@extends('include.head')
@section('content')
<section class="">
  <div class="container">
    <h3 class="bg-theme-colored p-15 mb-0 text-white">Make an Appointment</h3>
    <div class="section-content bg-white p-30">
      <div class="row">
        <div class="col-md-12">
          <!-- Reservation Form Start-->
          <form id="popup_reservation_form" name="reservation_form" class="reservation-form" method="post" action="{{ route('reservations.store') }}">
          @csrf
                      <div class="row">
              <div class="reservation-first-step">
                <h3 class="text-theme-colored line-bottom ml-15 mb-30 mr-15">Vehicle <span class="text-theme-color-2">Information</span></h3>
                <div class="col-sm-6">
                  <div class="form-group mb-30">
                    <label>Car Name</label>
                    <div class="styled-select">
                      <select id="popup_car_name_select" name="car_name_select" class="form-control ddslick" required="">
                        <option data-description="Lorem ipsum dolor sit amet consectetur adipisicing elit.." data-imagesrc="{{ asset('images/carl/rawy.png') }}" value="Pegout">Pegout</option>
                       <option data-description="Lorem ipsum dolor sit amet consectetur adipisicing elit.." data-imagesrc="{{ asset('images/carl/rawy.png') }}" value="Citroen">Citroen</option>
                        <option data-description="Lorem ipsum dolor sit amet consectetur adipisicing elit.." data-imagesrc="{{ asset('images/carl/rawy.png') }}" value="DS">DS</option>
                      </select>
                    </div>
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group mb-30">
                    <label>Car Type</label>
                    <div class="styled-select">
                      <select id="popup_car_type_select" name="car_type_select" class="form-control ddslick" required="">
                        <option data-description="Lorem ipsum dolor sit amet consectetur adipisicing elit.." data-imagesrc="images/car-logos/c1.png" value="Luxury Car">Luxury Car</option>
                        <option data-description="Lorem ipsum dolor sit amet consectetur adipisicing elit.." data-imagesrc="images/car-logos/c2.png" value="Suv">Suv</option>
                        <option data-description="Lorem ipsum dolor sit amet consectetur adipisicing elit.." data-imagesrc="images/car-logos/c4.png" value="Van">Van</option>
                        <option data-description="Lorem ipsum dolor sit amet consectetur adipisicing elit.." data-imagesrc="images/car-logos/c5.png" value="Sports">Sports</option>
                      </select>
                    </div>
                  </div>
                </div>
                <div class="col-sm-6">
                <div class="form-group mb-30">
                                      <label for="popup_amount">Car Year:</label>
                    <input type="text" id="popup_amount" data-target="popup-slider-range-max" class="no-border slider-range" name="car_year_select" required="">
                    <div id="popup-slider-range-max"></div>
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group mb-30">
                    <label>Car Model</label>
                    <input placeholder="Type Model Here" type="text" id="popup_car_model" name="car_model" class="form-control" required="">
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group mb-30">
                    <label>Type Of Service</label>
                    <div class="styled-select">
                      <select id="popup_car_service_select" name="car_service_select" class="form-control" required="">
                        <option value="">- Select Your Service Type -</option>
                        <option value="Engine Diagnostics">Engine Diagnostics</option>
                        <option value="Air Conditioning">Air Conditioning</option>
                        <option value="Wheel Alignment">Wheel Alignment</option>
                        <option value="Transmission Repair">Transmission Repair</option>
                        <option value="Brakes Repair">Brakes Repair</option>
                        <option value="Oil, Lube & Filters">Oil, Lube & Filters</option>
                        <option value="Engine Steam Clean">Engine Steam Clean</option>
                        <option value="Paint Protection">Paint Protection</option>
                        <option value="Dashboard Clean">Dashboard Clean</option>
                        <option value="Triple Coat Hand Wax">Triple Coat Hand Wax</option>
                        <option value="Trunk Vacuum">Trunk Vacuum</option>
                        <option value="Door Shuts & Plastics">Door Shuts & Plastics</option>
                        <option value="Triple Coat Hand Wax">Triple Coat Hand Wax</option>
                        <option value="More Than One">More Than One</option>
                      </select>
                    </div>
                  </div>
                </div>
              
                <div class="col-sm-6">
                  <div class="form-group mb-30">
                    <label>Preffered Date & Time Of Booking</label>
                    <input name="reservation_date" class="form-control required datetime-picker" type="text" placeholder="Type Reservation Date" aria-required="true">
                  </div>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="reservation-second-step">
                <h3 class="text-theme-colored line-bottom mt-0 mr-15 mb-30 ml-15">Personal <span class="text-theme-color-2">Information</span></h3>
                <div class="col-sm-6">
                  <div class="form-group mb-30">
                    <input placeholder="Enter Name" type="text" id="popup_reservation_name" name="reservation_name" required="" class="form-control">
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group mb-30">
                    <input placeholder="Email" type="text" id="popup_reservation_email" name="reservation_email" class="form-control" required="">
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group mb-30">
                    <input placeholder="Your Phone" type="text" id="popup_reservation_phone" name="reservation_phone" class="form-control" required="">
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group mb-30">
                    <input placeholder="Your Address" type="text" id="popup_reservation_address" name="reservation_address" class="form-control" required="">
                  </div>
                </div>
                <div class="col-sm-12">
                  <div class="form-group">
                    <textarea placeholder="Enter Message" rows="5" class="form-control required" name="form_message" aria-required="true"></textarea>
                  </div>
                </div>
                <div class="col-sm-12">
                  <div class="form-group text-center mb-0 mt-20">
                    <input name="form_botcheck" class="form-control" type="hidden" value="">
                    <button type="submit" class="btn btn-colored btn-theme-colored btn-lg btn-flat border-left-theme-color-2-4px" data-loading-text="Please wait...">Submit Now</button>
                  </div>
                </div>
              </div>
            </div>
          </form>
          <!-- Reservation Form End-->

          <!-- Reservation Form Validation Start-->

          <script>
$(function() {
    $('#reservation_date').datetimepicker({
        dateFormat: 'mm/dd/yy',
        timeFormat: 'hh:mm TT'
    });
});
</script>
</div>
                </div>
              </div>
            </div>
@endsection