@extends('hulaki_khabar.layout.layout')
@section('content')
    <!-- Start Page Banner -->
    <div class="page-title-area">
        <div class="container">
            <div class="page-title-content">
                <h2>सम्पर्क</h2>
                <ul>
                    <li><a href="index.html">होमपेज </a></li>
                    <li>सम्पर्क</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- End Page Banner -->

    <!-- Start Contact Area -->
    <section class="contact-area ptb-50">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <section class="widget widget_stay_connected">
                        <div class="contact-form">
                            <div class="title">
                                <h4>तयार हुनुहुन्छ</h4>
                                <p>आवश्यक क्षेत्रहरूमा * चिन्ह लगाइएका छन् । </p>
                            </div>
                            <form action="{{ route('sendEmail') }}" id="sendEmail" method="post">
                                <div class="row">
                                    @csrf
                                    @if($errors->any())
                                        @foreach($errors->all() as $error)
                                            <div class="alert alert-danger">{{ $error }}</div>
                                        @endforeach
                                    @endif
                                    <div class="col-lg-6 col-md-6">
                                        <div class="form-group">
                                            <input type="text" name="title" class="form-control" id="title"
                                                required data-error="Please enter your name" placeholder="नाम*">
                                            <div class="help-block with-errors"></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="form-group">
                                            <input type="email" name="email" class="form-control" id="email"
                                                required data-error="Please enter your email" placeholder="ईमेल*">
                                            <div class="help-block with-errors"></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="form-group">
                                            <input type="text" name="phone_number" class="form-control" id="phone_number"
                                                required data-error="Please enter your phone number" placeholder="फोन*">
                                            <div class="help-block with-errors"></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="form-group">
                                            <input type="text" name="secondary_number" class="form-control"
                                                id="secondary_number" required data-error="Please enter your phone number"
                                                placeholder="आपतकालिन फोन*">
                                            <div class="help-block with-errors"></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-md-12">
                                        <div class="form-group">
                                            <textarea name="message" id="message" class="form-control" cols="30" rows="2" required
                                                data-error="Please enter your message" placeholder="सन्देस"></textarea>
                                            <div class="help-block with-errors"></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="checkme" name="accepted">
                                            <label class="form-check-label" for="accepted">
                                                सेवा सर्तहरू र गोपनीयता नीति स्वीकार गर्नुहोस्।
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-md-12">
                                        <button type="submit" class="default-btn"> सन्देस पठाउनुहोस </button>
                                        <div id="msgSubmit" class="h3 text-center hidden"></div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </section>
                </div>
                <div class="col-lg-4">
                    <section class="widget widget_stay_connected">
                        <div class="contact-form">
                            <div class="title">
                                <h4>
                                    कार्यालय जान चाहानुहुन्छ ?
                                </h4>
                            </div>
                            <div class="container">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div>
                                            <ul class="contact-info">
                                                <li>
                                                    <h6><svg xmlns="http://www.w3.org/2000/svg" width="16"
                                                            height="16" fill="currentColor" class="bi bi-geo-alt-fill"
                                                            viewBox="0 0 16 16">
                                                            <path
                                                                d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10m0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6" />
                                                        </svg><b> स्थान :</b></h6>
                                                    <span><?php echo SITEVARS->location ?></span>
                                                </li><br>
                                                <li>
                                                    <h6><svg xmlns="http://www.w3.org/2000/svg" width="16"
                                                            height="16" fill="currentColor" class="bi bi-telephone"
                                                            viewBox="0 0 16 16">
                                                            <path
                                                                d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.6 17.6 0 0 0 4.168 6.608 17.6 17.6 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.68.68 0 0 0-.58-.122l-2.19.547a1.75 1.75 0 0 1-1.657-.459L5.482 8.062a1.75 1.75 0 0 1-.46-1.657l.548-2.19a.68.68 0 0 0-.122-.58zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z" />
                                                        </svg><b> फोन :</b></h6>
                                                    <a href="tel:9800000000 "><?php echo SITEVARS->phone ?> </a><br>
                                                    <a href="tel:01-000-000"><?php echo SITEVARS->secondary_phone ?></a>
                                                </li><br>
                                                <li>
                                                    <h6><svg xmlns="http://www.w3.org/2000/svg" width="16"
                                                            height="16" fill="currentColor" class="bi bi-envelope"
                                                            viewBox="0 0 16 16">
                                                            <path
                                                                d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z" />
                                                        </svg><b> ईमेल :</b></h6>
                                                    <a href="mailto:abc@example.com "><?php echo SITEVARS->email ?></a><br>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </section>
                </div>
            </div>
        </div>
    </section>

    <div style="margin-bottom: -1%">
        <iframe
            src=""
            width="2000" height="400" style="border:0;" allowfullscreen="" loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>

    <!-- End Contact Area -->
@endsection
@push('js')
    <script>
        $(document).ready(function() {
            $('#sendEmail').on('submit', function(e) {
                e.preventDefault();
                var form = $(this);
                var formData = new FormData(this);
                $.ajax({
                    url: "{{ route('sendEmail') }}",
                    type: "POST",
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        if (response.success) {
                            $('#msgSubmit').html('<div class="alert alert-success">' + response
                                .success + '</div>').fadeIn();
                            form.trigger('reset');
                            setTimeout(function() {
                                $('#msgSubmit').fadeOut();
                            }, 2000);
                        }
                    },
                    error: function(xhr, status, error) {
                        var errorMessage = xhr.status + ': ' + xhr.statusText;
                        $('#msgSubmit').html('<div class="alert alert-danger">Error - ' +
                            errorMessage + '</div>').fadeIn();
                        setTimeout(function() {
                            $('#msgSubmit').fadeOut();
                        }, 2000);
                    }
                });
            });
        });
    </script>
@endpush