@extends('frontend.layout.app')



@section('title', 'BAIC BAHRAIN - Schedule a service')



@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">Schedule a service</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"></p>
                    <div class="form-wrapper"> <!-- Wrapper div for centering -->
                      <form class="gray-form reset_css" action="{{ route('schedule-service') }}" 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">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">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="rmi_email" id="email" required="">
                        </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">VIN/REGISTRATION NUMBER*</label>
                          <input type="text" class="form-control" name="rmi_vin" id="vin" required="">
                        </div>
                        <div class="mb-3">
                          <label class="form-label">Subject*</label>
                          <select class="form-control" name="subject" id="subject" required>
                            <option value="Service">Service</option>
                            <option value="Accidental repair">Accidental repair</option>
                          </select>
                        </div>
                        
                        <div class="mb-3">
                          <label class="form-label">Preferred Service Date</label>
                          <input type="text" class="form-control" name="service_date" id="rmi_service_date">
                        </div>
                        <div class="mb-3">
                          <label class="form-label">Comment*</label>
                          <textarea class="form-control" name="rmi_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>+973 17875801
              </h2>
              <div class="separator"></div>
            </div>
            
            
        </div>
      </div>
     
       </div>
  </section>
@endsection


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

    $( "#rmi_service_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