@extends('layouts.admin')
@section('content')
<style type="text/css">
   .booking_page button.btn-bluefill{
      font-size: 16px;
    /* text-transform: uppercase; */
    width: 300px;
    max-width: 100%;
    
   }
   .booking_page .bg-warning{
      color:#000;
   }
   .br-8{
      border-radius: 8px;
   }
   .booking_page .res_content{
      font-size: 16px;
      padding: 0px 20px 20px
   }
   .booking_page .headline_main_title{
      padding: 10px 30px 10px 15px;
      border-radius: 8px;
      border: 1px solid rgba(0,0,0,0.14);
      background: #efefef !important;
      font-size: 17px;
      font-weight: 700;
   }
   .booking_page .form-control{
      height: 40px/*calc(1.9695rem + 2px)*/;
   }
   .booking_page select.form-control{
      -webkit-appearance: auto;
   }
   .booking_cancel_btn{
      color: #333333;
      padding: 0.3375rem 0.725rem;
      min-width: 0 !important;
      white-space: pre;
      font-size: 0.6875rem;
      border: 1px solid #6E7271;
      background: transparent;
      border-radius: 8px;
      font-weight: 700;
   }
   .booking_cancel_btn.btn_blue_ds{
      color: #fff;
    background-color: #0D6CB8;
    border-color: #0D6CB8;
   }
   .booking_cancel_btn:focus{
      outline:none !important;
   }
   .selected_package{
      font-size: 15px;
   }
</style>
<div class="main-content-wrap sidenav-open d-flex flex-column">
   <!-- ============ Body content start ============= -->
   <div class="main-content">
      <div class="row">
         <!-- ============Breadcrumb Pagination ============= -->
         <div class="col-sm-11">
            <ul class="breadcrumb">
               <li> <a href="javascript:;">Step 2</a></li>
               <li>Book</li>
            </ul>
         </div>
         <!-- ============Back Button ============= -->
         <div class="col-sm-1 back-arrow">
            <div class="text-center">
               <a href="javascript:history.back()"> <i class="fas fa-arrow-circle-left fa-1x">Back</i> </a>
            </div>
         </div>
      </div>
      <!-- ========================= -->
      <div class="row">
         <div class="card text-left">
            <div class="card-body">
               <div class="row">
                  <div class="col-md-3">
                     <h5>Book with</h5>
                     <h3 class="mb-3" style="font-weight:700"> {{ ucwords($user->first_name.' '.$user->last_name)}}</h3>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-12" >
                     @include('admin.bookings.submenu')
                  </div>
               </div>
               <form  method="post" action="{{route('admin.instructors/addVehicleInfo')}}" id="addVehicleInfo" >
                  @csrf
                  <div class="row py-3">
                     <!-- Account Information Form Start-->
                     <div class="col" style="box-shadow: 0px 0px 10px #ddd; padding: 0px 15px;">
                        <h3 class="text-blue fw-700 py-3">Add to Cart</h3>
                        <div class="row">
                        <div class="container-fluid">
                              <div class="container">
                                 <!-- Main content -->
                                 <div class="row">
                                    <div class="col-lg-7">
                                       <!-- Driving Lessons -->
                                       <div class="card booking_page mb-4">
                                          <div class="card-body ">
                                             <h4 class="heading-data text-blue">Who are you registering for?</h4>
                                             <div class="form-check change_form">
                                                <input class="form-check-input" type="radio" id="myself" name="exampleRadios" value="myself" checked>
                                                <label class="form-check-label" for="myself">
                                                Myself
                                                </label>
                                             </div>
                                             <div class="form-check change_form">
                                                <input class="form-check-input" type="radio" id="someone_else" name="exampleRadios" value="someone_else">
                                                <label class="form-check-label" for="someone_else">
                                                Someone else (e.g. child, partner, grandchild, other)
                                                </label>
                                             </div>
                                             <hr>
                                             <div class="myself_sec">
												 <h3>Please enter your pick up details</h3>
												 <div class="form-group">
													<label>Pick up address</label>
													<input type="text" class="form-control" id="" placeholder="">
												 </div>
												 <div class="row">
													<div class="col-6">
													   <div class="form-group">
														  <label for="exampleFormControlSelect1">Suburb</label>
														  <select class="form-control" id="exampleFormControlSelect1">
															 <option>1</option>
															 <option>2</option>
															 <option>3</option>
															 <option>4</option>
															 <option>5</option>
														  </select>
													   </div>
													</div>
													<div class="col-6">
													   <div class="form-group">
														  <label for="exampleFormControlSelect1">State</label>
														  <select class="form-control" id="exampleFormControlSelect1">
															 <option>1</option>
															 <option>2</option>
															 <option>3</option>
															 <option>4</option>
															 <option>5</option>
														  </select>
													   </div>
													</div>
												 </div>
												 <hr>
												 <div class="form-check">
													<input class="form-check-input" type="checkbox" id="myself" name="exampleRadios" value="#">
													<label class="form-check-label" for="myself">
													I agree to the Learner Driver Terms & Conditions
													</label>
												 </div>
												 <button class="bg-warning btn btn-bluefill d-block mt-3 mx-0">Continue</button>
											 </div>
											 <div class="someone_sec" style="display:none;">
												 <h3>Please enter the learner's pick up details</h3>
												 <div class="form-group">
													<label>Pick up address</label>
													<input type="text" class="form-control" id="" placeholder="">
												 </div>
												 <div class="row">
													<div class="col-6">
													   <div class="form-group">
														  <label for="exampleFormControlSelect1">Suburb</label>
														  <select class="form-control" id="exampleFormControlSelect1">
															 <option>1</option>
															 <option>2</option>
															 <option>3</option>
															 <option>4</option>
															 <option>5</option>
														  </select>
													   </div>
													</div>
													<div class="col-6">
													   <div class="form-group">
														  <label for="exampleFormControlSelect1">State</label>
														  <select class="form-control" id="exampleFormControlSelect1">
															 <option>1</option>
															 <option>2</option>
															 <option>3</option>
															 <option>4</option>
															 <option>5</option>
														  </select>
													   </div>
													</div>
												 </div>
												 <hr>
												 <h3>Please provide the learner's personal details</h3>
												 <div class="row">
													<div class="col-6">
													   <div class="form-group">
														  <label>First name</label>
														  <input type="text" class="form-control" id="" placeholder="">
													   </div>
													</div>
													<div class="col-6">
													   <div class="form-group">
														  <label>Last name</label>
														  <input type="text" class="form-control" id="" placeholder="">
													   </div>
													</div>
													<div class="col-6">
													   <div class="form-group">
														  <label>Phone number</label>
														  <input type="text" class="form-control" id="" placeholder="">
													   </div>
													</div>
													<div class="col-6">
													   <div class="row">
														  <div class="col-12">
															 <div class="form-group mb-0">
																<label for="exampleFormControlSelect1">Date of birth</label>
															 </div>
														  </div>
														  <div class="col">
															 <div class="form-group">
																<select class="form-control" id="exampleFormControlSelect1">
																   <option>1</option>
																   <option>2</option>
																   <option>3</option>
																   <option>4</option>
																   <option>5</option>
																</select>
															 </div>
														  </div>
														  <div class="col">
															 <div class="form-group">
																<select class="form-control" id="exampleFormControlSelect1">
																   <option>1</option>
																   <option>2</option>
																   <option>3</option>
																   <option>4</option>
																   <option>5</option>
																</select>
															 </div>
														  </div>
														  <div class="col">
															 <div class="form-group">
																<select class="form-control" id="exampleFormControlSelect1">
																   <option>1</option>
																   <option>2</option>
																   <option>3</option>
																   <option>4</option>
																   <option>5</option>
																</select>
															 </div>
														  </div>
													   </div>
													</div>
													<div class="col-6">
													   <div class="form-group">
														  <label for="exampleFormControlSelect1">Which best describes you?</label>
														  <select class="form-control" id="exampleFormControlSelect1">
															 <option>I hold a learner licence</option>
															 <option>I hold an overseas licence (current or expired)</option>
															 <option>I hold a provisional or full Australian licence</option>
														  </select>
													   </div>
													</div>
												 </div>
												 <hr>
												 <h3>Please provide your details</h3>
												 <div class="row">
													<div class="col-6">
													   <div class="form-group">
														  <label>First name</label>
														  <input type="text" class="form-control" id="" placeholder="">
													   </div>
													</div>
													<div class="col-6">
													   <div class="form-group">
														  <label>Last name</label>
														  <input type="text" class="form-control" id="" placeholder="">
													   </div>
													</div>
													<div class="col-12">
													   <div class="form-group">
														  <label>Email Address</label>
														  <input type="text" class="form-control" id="" placeholder="">
													   </div>
													</div>
													<div class="col-6">
													   <div class="form-group">
														  <label>Phone number</label>
														  <input type="text" class="form-control" id="" placeholder="">
													   </div>
													</div>
													<div class="col-6">
													   <div class="form-group">
														  <div class="form-group">
														  <label for="exampleFormControlSelect1">Relationship to learner</label>
														  <select class="form-control" id="exampleFormControlSelect1">
															 <option>Please select</option>
															 <option>Parent</option>
															 <option>Guardian</option>
															 <option>Grandparent</option>
														  </select>
													   </div>
													   </div>
													</div>
													
												 </div>
												 <hr>
												 <div class="form-check">
													<input class="form-check-input" type="checkbox" id="myself" name="exampleRadios" value="#">
													<label class="form-check-label" for="myself">
													I agree to the Learner Driver Terms & Conditions . I confirm that I am authorised to sign up for driving lessons for the learner driver & they are aware that I am doing so on their behalf.
													</label>
												 </div>
												 <button class="bg-warning btn btn-bluefill d-block mt-3 mx-0">Continue</button>
											 </div>
                                          </div>
                                       </div>
                                       <!--Driving Test Package -->
                                    </div>
                                    <div class="col-lg-5">
                                       <!-- Customer Notes -->
                                       <div class="card mb-4">
                                          <div class="card-body">
                                             <h3 class="mb-3"> Your Selected Package </h3>
                                             <div class="selected_package">
                                             <div class="d-flex justify-content-between mb-2">
                                                <span class="font-weight-800">You have added 10 lessons and 1 test package to your cart.</span>
                                             </div>
                                             
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </form>
            </div>
         </div>
      </div>
   </div>
</div>

@endsection