@extends('layouts.admin')
@section('content')
<style type="text/css">
</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>Add to Cart</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="{{ url('/admin/bookings/storeSessionData',['instructor_id'=>base64_encode($user->id),'learner_id'=>base64_encode($learnerId),'iv_id'=>base64_encode($ivId)]) }}" id="addToCartForm">
                  @csrf
                  <input type="hidden" class="zeroToOneHours" value="{{$driving_lesson->zero_to_one_hour_rate}}">
                  <input type="hidden" class="oneToFiveHours" value="{{$driving_lesson->one_to_five_hours_rate}}">
                  <input type="hidden" class="sixToNineHours" value="{{$driving_lesson->six_to_nine_hours_rate}}">
                  <input type="hidden" class="tenHours" value="{{$driving_lesson->ten_hours_rate}}">
                  <input type="hidden" name="vehicleInfoId" value="{{$driving_lesson->vehicle_info_id}}">
                  <input type="hidden" name="total_driving_lesson_price" class="totalDrivingLessonPriceValue">
                  <input type="hidden" name="total_driving_test_price" class="defaultTestRate" value="{{$driving_test->charges}}">
                  <input type="hidden" name="lesson_rate_per_hour" class="lessonRatePerHourValue" value="{{$rate}}">
                  <input type="hidden" name="total_calculated_price" class="totalCalculatedPriceValue">
                  <input type="hidden" name="is_selected_driving_test" class="isSelectedDrivingTest">
                  <input type="hidden" name="count_slots" class="countSlots">
                  
                  <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-8">
                                       <!-- Driving Lessons -->
                                       <input type="hidden" class="defaultLessonRate" value="{{$defaultRate}}">
                                       
                                       <div class="card mb-4">
                                          <div class="card-body">
                                             <h4 class="heading-data text-blue">Driving Lessons</h4>
                                             <table class="table table-borderless">
                                                <tbody>
                                                   <tr>
                                                      <td scope="row">
                                                          <input type="checkbox" name="cuschecked[]" checked disabled>
                                                       </td>
                                                      <td>
                                                         <select class="selectHours" name="selectHours">
                                                          @php
                                                          $z= 0;
                                                          $intervals = 15;
                                                          $intervalMinutes = $availability_setting->duration;
                                                          $maxMinutes = $intervals * $intervalMinutes;

                                                          $hours = floor($intervalMinutes / 60);
                                                          $minutes = $intervalMinutes % 60;
                                                          $hourLabel = ($hours == 1 ? 'hr' : 'hrs');
                                                          $TotalSelectDrivingLessonHours = ($hours > 0 ? $hours . ' ' . $hourLabel : '') . ($minutes > 0 ? ' ' . $minutes . ' min' : '');
                                                          @endphp

                                                          @for ($i = $intervalMinutes; $i <= $maxMinutes; $i += $intervalMinutes)
                                                              @php
                                                              $z++;
                                                              $hours = floor($i / 60);
                                                              $minutes = $i % 60;
                                                              $hourLabel = ($hours == 1 ? 'hr' : 'hrs');
                                                              $intervalDisplay = ($hours > 0 ? $hours . ' ' . $hourLabel : '') . ($minutes > 0 ? ' ' . $minutes . ' min' : '');
                                                              @endphp
                                                              <option value="{{ $i }}" count_slots="{{$z}}">{{ $intervalDisplay }}</option>
                                                          @endfor
                                                      </select>

                                                      </td>
                                                      <td>$<span class="ratePerHour">{{$rate}}</span>/hr</td>
                                                      <td class="text-right"><strong class="text-oil small-fontsize-18 large-fontsize-20">$<span class="totalDrivingLessonPrice">{{$defaultRate}}</span> total</strong></td>
                                                   </tr>
                                                </tbody>
                                             </table>
                                             <div style="background-color: #F4F4F4;padding: 10px;">
                                                <div class="mb-3 d-flex justify-content-between">
                                                   <div class="d-flex mb-2">
                                                      <div class="flex-lg-grow-1 ms-3">
                                                         <h5 class="mb-0"><a href="#" class="text-reset">Driving Lesson Pricing </a></h5>
                                                         <span class="small">How many lessons do I need?</span>
                                                      </div>
                                                   </div>
                                                </div>
                                                
                                                <table class="table table-borderless">
                                                   <tbody>
                                                      <tr>
                                                         <td>
                                                            <div class="d-flex mb-2">
                                                               <div class="flex-lg-grow-1 ms-3">
                                                                  <h5 class="mb-0"><a href="#" class="text-reset">less than one hour </a></h5>
                                                               </div>
                                                            </div>
                                                         </td>
                                                         <td class="text-end">{{'$'.$driving_lesson->zero_to_one_hour_rate.' / hr'}}</td>
                                                      </tr>
                                                      <tr>
                                                         <td>
                                                            <div class="d-flex mb-2">
                                                               <div class="flex-lg-grow-1 ms-3">
                                                                  <h5 class="mb-0"><a href="#" class="text-reset">1-5 hrs </a></h5>
                                                               </div>
                                                            </div>
                                                         </td>
                                                         <td class="text-end">{{'$'.$driving_lesson->one_to_five_hours_rate.' / hr'}}</td>
                                                      </tr>
                                                      <tr>
                                                         <td>
                                                            <div class="d-flex mb-2">
                                                               <div class="flex-lg-grow-1 ms-3">
                                                                  <h5 class="mb-0"><a href="#" class="text-reset">6-9 hrs </a></h5>
                                                               </div>
                                                            </div>
                                                         </td>
                                                         <td class="text-end">{{'$'.$driving_lesson->six_to_nine_hours_rate.' / hr'}}</td>
                                                      </tr>
                                                      <tr>
                                                         <td>
                                                            <div class="d-flex mb-2">
                                                               <div class="flex-lg-grow-1 ms-3">
                                                                  <h5 class="mb-0"><a href="#" class="text-reset">10+ hrs </a></h5>
                                                               </div>
                                                            </div>
                                                         </td>
                                                         <td class="text-end">{{'$'.$driving_lesson->ten_hours_rate.' / hr'}}</td>
                                                      </tr>
                                                   </tbody>
                                                </table>
                                                <hr style="margin-top: 0rem; margin-bottom: 1rem;">
                                                 <p class="text-center">* You can book {{$TotalSelectDrivingLessonHours}} driving lessons </p>
                                              </div>
                                          </div>
                                       </div>
                                       <!--Driving Test Package -->
                                       <div class="card mb-4">
                                          <div class="card-body">
                                             <h4 class="heading-data text-blue">Driving Test Package</h4>
                                             <table class="table table-borderless">
                                                <tbody>
                                                   <tr>
                                                      <td scope="row">
                                                          <input type="checkbox" name="cuschecked[]" class="checkedTestPackage">
                                                       </td>
                                                      <td>
                                                         <img width="40" height="40" class="avatar-img img-thumbnail" src="{{ asset('admin/images/package.png')}}">
                                                      </td>
                                                      <td>
                                                         {!! $driving_test->description !!}
                                                      </td>
                                                      <td class="text-right"><strong class="text-oil small-fontsize-18 large-fontsize-20">{{'$'.$driving_test->charges}}</strong></td>
                                                   </tr>
                                                </tbody>
                                             </table>
                                          </div>
                                       </div>
                                    </div>
                                    <div class="col-lg-4">
                                       <!-- Customer Notes -->
                                       <div class="card mb-4">
                                          <div class="card-body">
                                             <h5 class="small-margin-0">Instructor choice</h5>
                                             <p class="medium-fontsize-14 small-margin-top-5">Choose your instructor, change online anytime.</p>
                                          </div>
                                          <div class="card-body">
                                             <h5 class="small-margin-0">Book now or later</h5>
                                             <p class="medium-fontsize-14 small-margin-top-5">Buy a package, make bookings now or later.</p>
                                          </div>
                                          <div class="card-body">
                                             <h5 class="small-margin-0">Real-time availability</h5>
                                             <p class="medium-fontsize-14 small-margin-top-5">Book directly into your instructor’s calendar.</p>
                                          </div>
                                          <div class="card-body">
                                             <h5 class="small-margin-0">Booking flexibility</h5>
                                             <p class="medium-fontsize-14 small-margin-top-5">Reschedule online up to 24 hours before a booking.</p>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-md-6 text-right">
                        <button type="submit" class="btn bg-blue text-white continueBtn">Continue (Total $<span class="totalCalculatedPrice"></span>)</button>
                     </div>
                  </div>
               </form>
            </div>
         </div>
      </div>
   </div>
</div>

<script>
$(window).on('load', function() {
  var defaultLessonRate =$('.defaultLessonRate').attr('value');
  $('.totalDrivingLessonPrice').text(defaultLessonRate);
  $('.totalDrivingLessonPriceValue').val(defaultLessonRate);
  $('.totalCalculatedPrice').text(defaultLessonRate);
  $('.totalCalculatedPriceValue').val(defaultLessonRate);
  $('.isSelectedDrivingTest').val(0);
  $('.countSlots').val(1);
});

//  
$(document).on('change','.selectHours',function() {
  var minute = $(".selectHours option:selected").val();
  var count_slots = $(".selectHours option:selected").attr('count_slots');
  $('.countSlots').val(count_slots);
  if(minute <= 45)
  {
      var lessonRate =$('.zeroToOneHours').attr('value');
  }
  else if(minute > 45 && minute <= 300)
  { 
      var lessonRate =$('.oneToFiveHours').attr('value');
      
  }
  else if(minute > 300 && minute <= 540)
  {
      var lessonRate =$('.sixToNineHours').attr('value');
  }
  else if(minute > 540)
  {
      var lessonRate =$('.tenHours').attr('value');
  }
  var hours = minute / 60;
  var totalDrivingLessonrate = hours * lessonRate;
  var totalHoursrate = hours * lessonRate;
   if ($('.checkedTestPackage').is(':checked')) {
   var testRate =parseFloat($('.defaultTestRate').attr('value'));
   var totalHoursrate = testRate + totalHoursrate;
  }
  else
  {
    var totalHoursrate = hours * lessonRate;
  }

  $('.totalDrivingLessonPrice').text(totalDrivingLessonrate);
  $('.totalDrivingLessonPriceValue').val(totalDrivingLessonrate);
  $('.totalCalculatedPrice').text(totalHoursrate);
  $('.totalCalculatedPriceValue').val(totalHoursrate);
  $('.ratePerHour').text(lessonRate);
  $('.lessonRatePerHourValue').val(lessonRate);
});

//  
$(document).on('change','.checkedTestPackage',function() {
   var testRate =parseFloat($('.defaultTestRate').attr('value'));
   var totalDrivingLessonPriceValue =parseFloat($('.totalDrivingLessonPriceValue').val());
   if ($(this).is(':checked')) {
      var addingPrice = testRate + totalDrivingLessonPriceValue;
      $('.totalCalculatedPriceValue').val(addingPrice);
      $('.totalCalculatedPrice').text(addingPrice);
      $('.isSelectedDrivingTest').val(1);
   }
   else
   {
      var addingPrice = totalDrivingLessonPriceValue;
      $('.totalCalculatedPriceValue').val(addingPrice);
      $('.totalCalculatedPrice').text(addingPrice);
      $('.isSelectedDrivingTest').val(0);
   }
  
});

//
 $(document).on('submit', 'form#addToCartForm', function (event) {
 event.preventDefault();
 //clearing the error msg
 $('p.error_container').html("");
 $('.error-control').removeClass('border-danger');
 $('.continueBtn').attr('disabled',true);

 var form = $(this);
 var data = new FormData($(this)[0]);
 var url = form.attr("action");

  $.ajax({
      type: form.attr('method'),
      url: url,
      data: data,
      cache: false,
      contentType: false,
      processData: false,
      success: function (response) {
          if(response.success==true  ) {
            var instructor_id = response.instructor_id;
            var learner_id = response.learner_id;
            var iv_id = response.iv_id;
            window.location = "{{ url('/')}}"+"/admin/bookings/book-slots/"+instructor_id+'/'+learner_id+'/'+iv_id;

          }
      },
      error: function (xhr, textStatus, errorThrown) {
          alert("Error: " + errorThrown);
      }
  });
  return false;
 });
</script>
@endsection