@extends('frontend.layout.app')



@section('title', 'BAIC BAHRAIN - Test Drive')



@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">Book a test drive</h1>
          </div>
          <div class="col-md-6 text-md-end float-end">
          </div>
      </div>
  </div>
</section>

<!-- Adding the same background classes for the entire page -->
<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"></p>
                          <div class="form-wrapper">
                              <!-- Wrapper div for centering -->
                              <form class="gray-form reset_css" action="{{ route('test-drive') }}" id="rmi_form" method="post">
                                  @csrf
                                  <input type="hidden" name="action" value="request_more_info">
                                  <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">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">Email address*</label>
                                      <input type="email" class="form-control" name="email" id="rmi_email" 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">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">Preferred Date / Appointment Date</label>
                                      <input type="text" class="form-control" placeholder="dd-mm-yyyy" name="app_date" id="rmi_date" />
                                  </div>
                                  <div class="mb-3">
                                      <label class="form-label">PREFERRED TIMING*</label>
                                      <select class="form-control" name="rmi_timing" id="rmi_timing" required>
                                          <option value="8.00AM - 12.30PM">8.00AM - 12.30PM</option>
                                          <option value="3.30AM - 7.00PM">3.30AM - 7.00PM</option>
                                      </select>
                                  </div>
                                  <div class="mb-3">
                                      <label class="form-label">Comment*</label>
                                      <textarea class="form-control" name="comment" id="comment" required></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>
                  </div>
              </ul>
              <div style="padding-top: 50px; color:white;" class="section-title">
                  <span>Call Us For Enquiry</span>
                  <h2 class="text-white">+973 17875801</h2>
                  <div class="separator"></div>
              </div>
          </div>
      </div>
  </div>
</section>


@endsection


@section('js')
<script>
  $( function() {
  

    $( "#rmi_date" ).datepicker({
        beforeShowDay: function(date) {
            day = date.getDay();  
                      
            formatted = $.datepicker.formatDate('mm/dd/yy', date);

            // If it is a Tue or a Fri, AND it is not in the disallowed list, 
            // it should be selectable
            if ((day != 5 ) ) {
                return [true];
            } else {
                return [false];
            }
        },
        minDate: new Date(),
        dateFormat: 'dd/mm/yy'
    });
  } );
  </script>
@endsection