@extends('frontend.master')
@section('content')
<!--=======Breadcrumb =======-->
    <section id="breadcrumbs" class="breadcrumbs">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center">
            <h2>Contact Us</h2>
            <ol>
            <li><a href="../index.html">Home</a></li>
            <li>Contact Us</li>
            </ol>
            </div>
        </div>
    </section>
<!--=======End Breadcrumbs=======-->

<!--========Contact Us Start=============-->
    <section id="contact" class="contact pt-5 py-0 mb-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-5 mb-4">
                    <div class="row">
                        <div class="col-md-12">
                        <div class="info-box rounded">
                            <i class="bi bi-geo-alt-fill"></i>
                            <h3>Our Address</h3>
                            <p  class="pb-3">10 Abbas Garden, Dhaka-1206.</p>
                        </div>
                        </div>
                        <div class="col-md-6">
                          <div class="info-box mt-4 rounded">
                            <i class="bi bi-telephone-outbound-fill"></i>
                            <h3>Call Us</h3>
                            <p class="pb-2">+880 1752 545494</p>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="info-box mt-4 rounded">
                            <i class="bi bi-envelope-fill"></i>
                            <h3>Email Us</h3>
                            <p  class="pb-2">info@zingabd.com</p>
                          </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-7">
                    <form id="contactForm" class="php-email-form rounded" method="POST">
                        @csrf
                        <div class="row">
                        <div class="col-md-6 form-group">
                            <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required="">
                        </div>
                        <div class="col-md-6 form-group mt-3 mt-md-0">
                            <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required="">
                        </div>
                        </div>
                        <div class="form-group mt-3">
                        <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required="">
                        </div>
                        <div class="form-group mt-3">
                        <textarea class="form-control" name="message" rows="7" placeholder="Message" required=""></textarea>
                        </div>

                        <div class="text-center mt-3" style="font-weight:600;"><button type="submit" id="submitBtn">Send Message
                            <div id="loadingSpinner" class="d-none">
                                <div class="text-center spinner-border text-primary" role="status">
                                  <span class="visually-hidden">Loading...</span>
                                </div>
                            </div>
                        </button></div>
                    </form>
                </div>

                <div class="col-lg-12 mt-4 border">
                    <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d228.19634370394482!2d90.39499617764083!3d23.777975075454393!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755c769b40e2c4b%3A0xacc0f99a39c0a09b!2sWhite+House%2C+Mohakhali+Abbas+Garden+Rd%2C+Dhaka+1206!5e0!3m2!1sen!2sbd!4v1456663863808" width="100%" height="350" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
                </div>

            </div>
        </div>
    </section>
<!--========Contact Us End=============-->

@endsection()
@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/ajax-script.js"></script>

  <script>
    $(document).ready(function() {
        // Get the CSRF token from the meta tag
        var csrfToken = $('meta[name="csrf-token"]').attr('content');

        $('#contactForm').on('submit', function(e) {
            e.preventDefault();

            var formData = $(this).serialize();

            // Show the loading spinner
            $('#loadingSpinner').removeClass('d-none');
            $('#submitBtn').text('Loading...');


            $.ajax({
                method: 'post',
                url: '/contactt',
                data: formData,
                headers: {
                    'X-CSRF-TOKEN': csrfToken // Add the CSRF token to headers
                },
                success: function(response) {
                    $('#contactForm')[0].reset();
                    showAlert('success', 'Message sent successfully!');
                    $('#submitBtn').text('Send Message');
                },
                error: function(error) {

                    showAlert('Something went wrong. Please try again.');
                },
                complete: function() {
                    // Hide the loading spinner
                    $('#loadingSpinner').addClass('d-none');
                }
            });
        });

        function showAlert(type, message) {
            var alertElement = $('<div class="alert alert-' + type + ' mt-3" role="alert">' + message + '</div>');
            $('#contactForm').prepend(alertElement);
            alertElement.fadeTo(2000, 500).slideUp(500, function() {
                alertElement.slideUp(500).remove();
            });
        }
    });

  </script>
@endsection