@extends('layout', ['page' => 'contact'])
@section('title', 'Contact - ' . config('app.name'))

@section('content')
    @php
        $contacts = explode(",", env('APP_CONTACT'));
        $email = env('APP_EMAIL');
    @endphp

   @if(isset($breadcrumb) && !empty($breadcrumb))
      @include('partials._breadcrumb-title', ['breadcrumb' => $breadcrumb])
   @endif

<section class="wrap">
   <div class="container">
      <div class="abt-dec">
         <!-- <div class="box-shadow"> -->
         <div class="row justify-content-center">
            <div class="col-12 col-sm-12 col-md-12 col-lg-12">
               <section class="wrap contact-inner-wrap">
                  <!-- <div class="container"> -->
                  <div class="row justify-content-center">
                     <div class="col-12 col-sm-5 col-md-4 col-lg-4">
                        <div class="contact-info-lftbar">
                           <div class="title">
                              <h4 class="d-inline-block">Contact Info</h4>
                           </div>
                           @if(!empty($contacts))
                           <div class="fotr-media">
                              <div class="media">
                                 <div class="media-body ps-0">
                                    <h6 class="mb-0 text-success">Contact No.:</h6>
                                    @foreach($contacts as $contact)
                                        <p><a href="tel:{{ $contact}}" class="text-dark fs-6"> {{ $contact}}</a></p>
                                    @endforeach
                                 </div>
                              </div>
                           </div>
                           @endif

                           @if($email)
                           <div class="fotr-media">
                              <div class="media">
                                 <div class="media-body ps-0">
                                    <h6 class="mb-0 text-success">Email:</h6>
                                    <p><a href="mailto:{{ $email }}" class="text-dark fs-6">{{ $email }}</a></p>
                                 </div>
                              </div>
                           </div>
                           @endif

                           @if(env('APP_ADDRESS'))
                           <div class="fotr-media">
                              <div class="media">
                                 <div class="media-body ps-0">
                                    <h6 class="mb-0 text-success">Address:</h6>
                                    <p>{{ env('APP_ADDRESS') }}</p>
                                 </div>
                              </div>
                           </div>
                           @endif

                           <div class="fotr-media mb-0">
                              <div class="media-body">
                                 <h6 class="text-success">Social Media:</h6>
                                  @include('partials._social_contacts')
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="col-12 col-sm-7 col-md-8 col-lg-8">
                        <div class="contact-form form-box border-0 shadow-none p-0">
                           <form id="contactEnquiryForm">
                              @csrf
                              <div class="title">
                                 <h2>Keep In Touch, We Want To Hear From You-Send Us Message</h2>
                              </div>
                              <div id="contactResMessage"></div>

                              <div class="row">
                                 <div class="col-sm-6">
                                    <div class="form-group">
                                       <label>Name<sup>*</sup></label>
                                       <div class="input-group">
                                          <span class="input-group-text" id="basic-addon1"><i class="fa fa-user text-secondary"></i></span>
                                          <input type="text" class="form-ctrl form-control" placeholder="Enter Name" name="name" aria-label="Username" aria-describedby="basic-addon1">
                                       </div>
                                       <span class="text-danger error-name"></span> 
                                    </div>
                                 </div>
                                 <div class="col-sm-6">
                                    <div class="form-group">
                                       <label>Email<sup>*</sup></label>
                                       <div class="input-group">
                                          <span class="input-group-text" id="basic-addon1"><i class="fa fa-envelope text-secondary"></i></span>
                                          <input type="text" class="form-ctrl form-control" placeholder="Enter Email Id" name="email" aria-label="Username" aria-describedby="basic-addon1">
                                       </div>
                                       <span class="text-danger error-email"></span>
                                    </div>
                                 </div>
                                 <div class="col-sm-6">
                                    <div class="form-group">
                                       <label>Mobile No.<sup>*</sup></label>
                                       <div class="input-group">
                                          <span class="input-group-text" id="basic-addon1"><i class="fa fa-volume-control-phone text-dark"></i></span>
                                          <input type="text" class="form-ctrl form-control" placeholder="Mobile Number" name="mobile" aria-label="Username" aria-describedby="basic-addon1">
                                       </div>
                                       <span class="text-danger error-mobile"></span> 
                                    </div>
                                 </div>
                              </div>
                              <div class="form-group">
                                 <label>Your Message here</label>
                                 <textarea rows="6" class="form-control form-ctrl" placeholder="Let us know if you have anything else to know" name="message" required></textarea>
                              </div>
                              <div class="form-group mb-3">
                                 <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required="">
                                    <label class="form-check-label label-trms" for="invalidCheck">
                                    By submitting this form, you agree to the {{ config('app.name') }} privacy notice.
                                    </label>
                                    <div class="invalid-feedback">
                                       You must agree before submitting.
                                    </div>
                                    <span class="text-danger error-mobile"></span>
                                 </div>
                              </div>
                              <div class="row">
                                 <div class="col-6 col-sm-4 col-md-3 col-lg-3">
                                    <button type="submit" class="button-1" id="contactSubmitBtn" style="background-color: #00a859;">
                                       <div class="eff-1"></div>
                                       <span>Send Message Now <i class="ms-2 fa fa-long-arrow-right"></i></span>
                                    </button>
                                 </div>
                              </div>
                           </form>
                        </div>
                     </div>
                  </div>
                  <!-- </div> -->
               </section>
            </div>
         </div>
         <!-- </div> -->
      </div>
   </div>
</section>
@endsection

@push('js')
<script>
   $(document).ready(function () {
      $("#contactEnquiryForm").on("submit", function (e) {
         e.preventDefault();

         let formData = $(this).serialize();
         $("#contactSubmitBtn").prop("disabled", true).text("Processing...");

         console.log(formData);


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

         $.ajax({
               url: "{{ route('enquiry.store') }}",
               type: "POST",
               data: formData,
               success: function (response) {
                  $("#contactResMessage").html('<div class="alert alert-success">'+ response.message +'</div>');
                  $("#contactEnquiryForm")[0].reset();
               },
               error: function (xhr) {
                  if (xhr.status === 422) { // Validation Error
                     let errors = xhr.responseJSON.errors;
                     if (errors.name) $(".error-name").text(errors.name[0]);
                     if (errors.email) $(".error-email").text(errors.email[0]);
                     if (errors.mobile) $(".error-mobile").text(errors.mobile[0]);
                     if (errors.message) $(".error-message").text(errors.message[0]);
                  } else {
                     $("#contactResMessage").html('<div class="alert alert-danger">Something went wrong, please try again.</div>');
                  }
               },
               complete: function () {
                  $("#contactSubmitBtn").prop("disabled", false).html('<div class="eff-1"></div><span>Send Message Now <i class="ms-2 fa fa-long-arrow-right"></i></span>');
               }
         });
      });
   });

</script>

@endpush