@extends('frontend.layouts.app')

@section('title') {{ __($module_title) }} @endsection

@section('content')
 <!-- ================================
    START BREADCRUMB AREA
================================= -->
  <section class="breadcrumb-area bread-bg">
    <div class="overlay"></div>
    <!-- end overlay -->
    <div class="container">
      <div class="breadcrumb-content text-center">
        <h2 class="sec__title text-white mb-3">Contact Us</h2>
        <ul class="bread-list">
          <li><a href="index.html">home</a></li>
          <li>Contact Us</li>

        </ul>
      </div>
      <!-- end breadcrumb-content -->
    </div>
    <!-- end container -->
    <div class="bread-svg">
      <svg viewBox="0 0 500 150" preserveAspectRatio="none">
        <path d="M-4.22,89.30 C280.19,26.14 324.21,125.81 511.00,41.94 L500.00,150.00 L0.00,150.00 Z"></path>
      </svg>
    </div>
    <!-- end bread-svg -->
  </section>
  <!-- end breadcrumb-area -->
  <!-- ================================
    END BREADCRUMB AREA
================================= -->
<!-- ================================
    START CONTACT AREA
================================= -->
  <section class="contact-area padding-top-60px padding-bottom-90px">
    <div class="container">
      <div class="alert alert-success alert-message mb-3" role="alert">
        Thank You! Your message has been sent.
      </div>
      <div class="row">
        <div class="col-lg-8">
            <form action="#" method="POST" id="ajax_contact" class="contact-form card">
            @csrf
            <div class="card-body">
              <h4 class="card-title">Get in touch</h4>
              <hr class="border-top-gray" />
              <div class="form-group">
                <label class="label-text">Your Name</label>
                <input type="text" id="first_name" name="first_name" class="form-control form--control ps-3" placeholder="First Name">
              </div>
              <div class="form-group">
                <label class="label-text">Your Name</label>
                <input type="text" id="last_name" name="last_name" class="form-control" placeholder="Last Name">
              </div>
              <div class="form-group">
                <label class="label-text">Your Email</label>
                <input type="email" id="email" name="email" class="form-control" placeholder="Your Email">
              </div>
              <div class="form-group">
                <label class="label-text">Your Phone</label>
                <input type="text" id="mobile" name="mobile" class="form-control" placeholder="Your Number">
              </div>
              <div class="form-group">
                <label class="label-text">Message</label>
                <textarea id="message" name="message" cols="30" rows="5" class="form-control address" placeholder="Message"></textarea>
              </div>
              <button id="send-message-btn" class="theme-btn border-0" type="submit">
                Send Message
              </button>
            </div>
          </form>
        </div>
        <!-- end col-lg-8 -->
        <div class="col-lg-4">
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">Contact Information</h4>
              <hr class="border-top-gray" />
              <ul class="list-items mb-5">
                <li>
                  <span
                    class="fal fa-map-marker-alt icon-element icon-element-sm bg-white shadow-sm text-black me-2 font-size-14"></span>
                  101 East Parkview Road, New York
                </li>
                <li>
                  <span
                    class="fal fa-envelope icon-element icon-element-sm bg-white shadow-sm text-black me-2 font-size-14"></span><a
                    href="mailto:example@gmail.com">example@gmail.com</a>
                </li>
                <li>
                  <span
                    class="fal fa-phone icon-element icon-element-sm bg-white shadow-sm text-black me-2 font-size-14"></span>
                  +7(111)123456789
                </li>
              </ul>
              <h4 class="card-title">Working Hours</h4>
              <hr class="border-top-gray" />
              <ul class="list-items mt-3">
                <li class="d-flex align-items-center justify-content-between">
                  Monday To Friday
                  <span class="font-weight-regular">9am - 7pm</span>
                </li>
                <li class="d-flex align-items-center justify-content-between">
                  Saturday To Sunday
                  <span class="font-weight-regular text-danger">Close</span>
                </li>
              </ul>
            </div>
            <!-- end card-body -->
          </div>
          <!-- end card -->
        </div>
        <!-- end col-lg-4 -->
      </div>
      <!-- end row -->
    </div>
    <!-- end container -->
  </section>
  <!-- end contact-area -->
  <!-- ================================
    END CONTACT AREA
================================= -->

  <!-- Start map --->
  <div class="map-container">
    <iframe
      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2659.549815982692!2d77.30901507407322!3d28.585094686235898!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390ce45f97fb7b77%3A0x57e50ec90fd80e55!2sNoida%20Sector-15!5e1!3m2!1sen!2sin!4v1776707427347!5m2!1sen!2sin"
      width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"
      referrerpolicy="no-referrer-when-downgrade"></iframe>
  </div>
  <!-- End map --->

<script>
document.getElementById('ajax_contact').addEventListener('submit', function(e){
    e.preventDefault();

    let form = this;
    let formData = new FormData(form);
    let formMsg = document.getElementById('formMsg');

    fetch("{{ url('/contacts/submit') }}", {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json'
        },
        body: formData
    })
    .then(async res => {
        const data = await res.json();

        // ❌ Validation error (422)
        if (!res.ok) {
            if (res.status === 422) {
                let errorsHtml = '<ul>';

                Object.values(data.errors).forEach(messages => {
                    messages.forEach(message => {
                        errorsHtml += `<li>${message}</li>`;
                    });
                });

                errorsHtml += '</ul>';

                formMsg.className = 'alert alert-danger mt-20';
                formMsg.innerHTML = errorsHtml;

                // Auto-hide after 5 seconds
                setTimeout(() => {
                    formMsg.innerHTML = '';
                    formMsg.className = 'alert mt-20';
                }, 5000);
            }
            return;
        }

        // ✅ Success
        if (data.status) {
            formMsg.className = 'alert alert-success mt-20';
            formMsg.innerHTML = data.message;
            form.reset();

            setTimeout(() => {
                formMsg.innerHTML = '';
                formMsg.className = 'alert mt-20';
            }, 4000);
        }
    })
    .catch(() => {
        formMsg.className = 'alert alert-danger mt-20';
        formMsg.innerHTML = 'Server error. Please try again later.';
    });
});
</script>



@endsection