@extends('frontend.layout.app')
@section('content')
<section class="mainBanner innerBanner">
   <div class="overlay"> </div>
   <div class="container">
      <h2 class="text-center">Contact Us</h2>
   </div>
</section>
<section class="positionRelative">
   <div class="container">
      <div class="col-md-12">
         <div class="">
            <div class="row">
               <div class="col-lg-5 col-md-6">
                  <div class="contactInfo mt-2">
                     <h3>Don’t Hesitate to Contact Us</h3>
                     <p>Please use the form or the following information to get in touch with us and we will reach out
                        as soon as possible. Thank you!</p>
                     <div class="contactInfo">
                        <p><span class="icons"><i class="fa fa-map-marker" aria-hidden="true"></i></span><span
                              class="detail"> 4th Floor, Aeren Building, Plot No. 14, Rajiv Gandhi Chandigarh IT Park
                              160101, India</span><span class="clearfix"></span></p>
                        <p><span class="icons"><i class="fa fa-phone" aria-hidden="true"></i></span><span
                              class="detail"> +01 2 3456 7890</span><span class="clearfix"></span></p>
                        <p><span class="icons"><i class="fa fa-envelope" aria-hidden="true"></i></span><span
                              class="detail"> <a href="#">info@ortho-k.com</a></span><span class="clearfix"></span></p>
                     </div>
                     <div class="contactInfo timeInfo">
                        <h3>Opening hours</h3>
                        <p><span class="icons"><i class="fa fa-clock" aria-hidden="true"></i></span><span
                              class="detail">09:00 - 17:00 Monday to Thursday</span><span class="clearfix"></span></p>
                        <p><span class="icons"><i class="fa fa-clock" aria-hidden="true"></i></span><span
                              class="detail"> 09:00 - 15:00 Friday (Summer time)</span><span class="clearfix"></span>
                        </p>
                        <p><span class="icons"><i class="fa fa-clock" aria-hidden="true"></i></span><span
                              class="detail"> 09:00 - 13:00 Friday (Winter time)</span><span class="clearfix"></span>
                        </p>
                     </div>
                     <a href="#" class="customBtn01 greenBtn">Holiday Calendar</a>
                  </div>
               </div>
               <div class="col-lg-7 col-md-6">
                  <div class="contactForm form-section mt-0">
                     <form id="contactForm" action="{{ route('contact_us.store') }}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="form-group row">
                           <div class="col-lg-6 col-md-12">
                              <label for="first-name">First Name <span class="text-danger">*</span></label>
                              <input type="text" id="first-name" name="first_name" class="form-control"
                                 placeholder="Enter your first name">
                           </div>
                           <div class="col-lg-6 col-md-12">
                              <label for="last-name">Last Name <span class="text-danger">*</span></label>
                              <input type="text" id="last-name" name="last_name" class="form-control"
                                 placeholder="Enter your last name">
                           </div>
                           <div class="col-lg-6 col-md-12">
                              <label for="company">Company <span class="text-danger">*</span></label>
                              <input type="text" id="company" name="company" class="form-control"
                                 placeholder="Enter your company name">
                           </div>
                           <div class="col-lg-6 col-md-12">
                              <label for="email">Email <span class="text-danger">*</span></label>
                              <input type="email" id="email" name="email" class="form-control"
                                 placeholder="Enter your email address">
                           </div>
                           <div class="col-lg-6 col-md-12">
                              <label for="phone">Phone <span class="text-danger">*</span></label>
                              <input type="text" id="phone" name="phone" class="form-control"
                                 placeholder="Enter your phone number">
                           </div>
                           <div class="col-lg-6 col-md-12">
                              <label for="subject">Subject <span class="text-danger">*</span></label>
                              <select id="subject" name="subject" class="form-control">
                                 <option value="">-- Select --</option>
                                 <option value="Apply for Kosher Certification">Apply for Kosher Certification</option>
                                 <option value="Client Support">Client Support</option>
                                 <option value="Consumer Product Enquiry">Consumer Product Enquiry</option>
                                 <option value="Other">Other</option>
                              </select>
                           </div>
                           <div class="col-md-12">
                              <label for="message">Message <span class="text-danger">*</span></label>
                              <textarea id="message" name="message" rows="8" class="form-control"
                                 placeholder="Enter your message"></textarea>
                           </div>
                           
                           <div class="form-group row mt-2">
                              <div class="col-md-12">
                                 <div class="form-check">
                                    <input type="checkbox" id="agree" name="agree" class="form-check-input">
                                    <label for="agree" class="form-check-label">By using this form you agree with the
                                       storage and handling of your data in accordance with the <a href="{{route('privacy_policy')}}"
                                          target="_blank">Privacy Policy</a>.</label>
                                 </div>
                              </div>
                           </div>
                           <div class="mt-3 submit-button">
                              <button type="submit" class="btn customBtn01 gradientBtn mb-0">Submit</button>
                           </div>
                        </div>
                     </form>


                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>
<section class="mapBox p-0">
   <iframe
      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3429.6928231418096!2d76.83915007537279!3d30.72703487458704!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390f92d899ba5593%3A0xb98cca5b36b56ae5!2sAeren%20Outsourcing!5e0!3m2!1sen!2sin!4v1724854048702!5m2!1sen!2sin"
      width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"
      referrerpolicy="no-referrer-when-downgrade"></iframe>
</section>
<section class="backgroundBg01 text-center text-white subscribe">
   <div class="container">
      <div class="row">
         <div class="col-lg-10 m-auto">
            <h2 class="text-white">Subscribe to Our Newsletter</h2>
            <p>By subscribing to our newsletter you agree to the Ortho-K</p>
            <form role="search" method="get" action="#" autocomplete="off" class="subscribeForm">
               <label class="screen-reader-text" for="searchInput"></label>
               <input type="text" class="search-field" value="" name="searchInput" id="searchInput"
                  placeholder="Enter Your Email Address" autocomplete="off">
               <input type="submit" id="subscribe" class="search-submit gradientBtn" value="Subscribe Now">
            </form>
         </div>
      </div>
   </div>
</section>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
   $(document).ready(function () {
      $('#contactForm').on('submit', function (e) {
         e.preventDefault();

         // Clear previous errors
         $('.text-danger').remove();

         let form = $(this);
         let url = form.attr('action');
         let formData = new FormData(this); 

         $.ajax({
            type: 'POST',
            url: url,
            data: formData,
            processData: false, 
            contentType: false,
            success: function (response) {
               Swal.fire({
                  title: 'Success!',
                  text: 'Your message has been sent successfully!',
                  icon: 'success',
                  timer: 3000,
                  showConfirmButton: false
               }).then(() => {
                  form[0].reset(); 
               });
            },
            error: function (xhr) {
               if (xhr.status === 422) {
                  let errors = xhr.responseJSON.errors;

                  Swal.fire({
                     title: 'Validation Error!',
                     text: 'Please check your inputs.',
                     icon: 'error',
                     timer: 3000,
                     showConfirmButton: false
                  }).then(() => {
                     $.each(errors, function (key, value) {
                        let input = $('[name="' + key + '"]');
                        input.addClass('is-invalid');
                        input.after('<div class="text-danger">' + value[0] + '</div>');
                     });
                  });
               }
            }
         });
      });
   });

</script>
@endsection('content')