@extends('frontend.layout.app')



@section('title', 'BAIC BAHRAIN - Sales Enquiry')



@section('body-content')
<section class="inner-intro bg-1 bg-overlay-black-70" style="height: 125px !important;">
  <div class="container">
       <div class="row text-center intro-title">
         <div class="col-md-6 text-md-start d-inline-block">
           <h1 style="text-align:center;" class="text-white">Sales Enquiry</h1>
         </div>
         <div class="col-md-6 text-md-end float-end">
           
         </div>
       </div>
    </div>
  </section>

  <section class="car-details page-section bg-1 bg-overlay-black-70">
    <div class="container">
     
      <div class="row">
        <div class="col-md-3">
        </div>
        <div class="col-md-6">
            <ul>
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="text-white">PLEASE COMPLETE THE INFORMATION BELOW. OUR REPRESENTATIVE WILL CONTACT YOU SHORTLY.</h5>
                  </div>
                  <div class="modal-body">
                    <div id="rmi_notice" class="form-notice" style="display:none;"></div>
                    <p class="sub-title">Please fill out the information below and one of our representatives will contact you regarding your request for more information.</p>
                    <form class="gray-form reset_css" action="{{ route('sales-enquiry') }}" id="rmi_form" method="post">
                      @csrf
              
                      <div class="alrt">
                        <span class="alrt"></span>
                      </div>
                      <div class="mb-3">
                        <label class="form-label">First Name*</label>
                        <input type="text" class="form-control" name="first_name" id="rmi_first_name" required="">
                      </div>
                      <div class="mb-3">
                        <label class="form-label">Last Name*</label>
                        <input type="text" class="form-control" name="last_name" id="rmi_last_name" required="">
                      </div>
                      <div class="mb-3">
                        <label class="form-label">CPR Number*</label>
                        <input type="text" class="form-control" name="cpr" id="rmi_cpr" maxlength="9" pattern="\d{9}" required oninput="this.value=this.value.replace(/[^0-9]/g,'').slice(0,9)" />
                      </div>                      
                      <div class="mb-3">
                        <label class="form-label pe-3">Preferred Contact*</label>
                        <div class="form-check form-check-inline">
                          <input class="form-check-input" type="radio" name="preferred_contact" id="contact_email" value="Email">
                          <label class="form-check-label p-0 text-uppercase" for="contact_email">
                            Email
                          </label>
                        </div>
                        <div class="form-check form-check-inline">
                          <input class="form-check-input" type="radio" name="preferred_contact" id="contact_phone" value="Phone" checked="">
                          <label class="form-check-label p-0 text-uppercase" for="contact_phone">
                            Phone
                          </label>
                        </div>
                      </div>
                      <div class="mb-3">
                        <label class="form-label">Email address*</label>
                        <input type="email" class="form-control" name="email" id="rmi_email" required="">
                      </div>
                      <div class="mb-3">
                        <label class="form-label">Phone Number*</label>
                        <input type="text" class="form-control" id="phone" name="rmi_phone" maxlength="8" pattern="\d{8}" required oninput="this.value=this.value.replace(/[^0-9]/g,'').slice(0,8)" />
                      </div>                    
                      <div class="mb-3">
                        <label class="form-label">Body Type*</label>
                        <div class="select">
                          <select class="form-control" name="bodytype" id="rmi_bodytype" required>
                                                        
                          </select>
                        </div>
                      </div>                      
                      <div class="mb-3">
                        <label class="form-label">Vehicle Model*</label>
                        <select class="form-control" name="model" id="rmi_model" required>
                          <option value="">Select the Model</option>
                                                  
                        </select>
                      </div>
                      <div class="mb-3">
                        <label class="form-label">Preferred Location*</label>
                        <select class="form-control" name="location" id="rmi_location" required>
                          <option value="Tubli">Tubli</option>
                        </select>
                      </div>
                      <div class="mb-3">
                        <label class="form-label">Subject*</label>
                        <select class="form-control" name="subject" id="subject" required>
                          <option value="General Enquiry">General Enquiry</option>
                          <option value="Suggestion">Suggestion</option>
                          <option value="About offers in the website">About offers in the website</option>
                          <option value="Vehicle sales enquiry">Vehicle sales enquiry</option>
                          <option value="Other">Other</option>

                        </select>
                      </div>
                      <div class="mb-3">
                        <label class="form-label">Message</label>
                        <textarea class="form-control" name="message" id="rmi_message"></textarea>
                      </div>
                     
                      <div class="mb-3">
                        <div id="recaptcha1"></div>
                      </div>
                      <div>
                        <button type="submit" class="button red" id="request_more_info_submit">Submit <i class="fa fa-spinner fa-spin fa-fw btn-loader" style="display: none;"></i></button>
                      </div>
                    </form>
                  </div>
                </div>
            </ul>
            <div style="padding-top: 50px; color:white;" class="section-title">
              <span>Call Us For Enquiry</span>
              <h2>+973 17875801
              </h2>
              <div class="separator"></div>
            </div>
        </div>
      </div>
     
       </div>
  </section>

@endsection


@section('js')
<script>
  (function($) {
  $(document).ready(function(){
      $('#rmi_bodytype').on('change', function(){
      
          var catID = $(this).find('option:selected').data('catid');
          // Perform the AJAX request
          $.ajax({
              url: "{{ route('get-vehicles') }}",  // Laravel route
              method: 'GET',
              data: {
                  catID: catID,
                  _token: '{{ csrf_token() }}'  // Include CSRF token
              },
              success: function(response) {
                  // Display the response in the result div
                  console.log(response);
                  $('#rmi_model').html(response.html);
              },
              error: function() {
                  // Handle the error case
                  $('#result').html('An error occurred');
              }
          });
      });
  });
})(jQuery);
  </script>
@endsection