@extends('front.frontLayout')
@section('title','Carts')
@section('pagelevelcss')
<link rel="stylesheet" type="text/css" href="{{asset('backend/css/sweetalert.css')}}">
<style type="text/css">
   .disabled { pointer-events: none; cursor: default; text-decoration: none; color: black; }
   .appointment-date-wrong { color: red; text-align: right; width: 100%; }
</style>
@stop
@section('content')
@if(count($carts) > 0)
<section class=" contact-banner ">
   <div class="container">
      <div class="row align-items-center">
         <div class="col-md-6">
            <div class="banner-content">
               <h1 class="main-title">Shopping Cart</h1>
            </div>
         </div>
         <div class="col-md-6 banner-img-wrapper">
             <!-- <div class="banner-img"><img src="https://4medicaltesting.co.uk/frontend/images/contact-banner.png" alt="product"></div> -->
         </div>
      </div>
   </div>
</section>
<section class="cart-page section-padding" id="cart-section">
   <div class="container px-3 my-5 clearfix">
      <div class="px-3">
         <a href="javascript:;" id="create_booking_btn" class="custom-btn">Make an appointment</a>   
      </div>            
        <!-- Shopping cart table -->
        <div class="card">
            <div class="card-body">
               <div class="table-responsive">
                  <table class="table table-bordered m-0">
                     <thead>
                        <tr>
                           <!-- Set columns width -->
                           <th class="text-center py-3 px-2" style="min-width: 400px;">Product Name &amp; Details</th>
                           <th class="text-center py-3 px-2" style="min-width: 100px;">Appointment Date</th>
                           <th class="text-center py-3 px-2" style="min-width: 100px;">Appointment Time</th>
                           <th class="text-right py-3 px-2" style="width: 100px;">Price</th>
                           <th class="text-center py-3 px-2" style="width: 80px;">Quantity</th>
                           <th class="text-right py-3 px-2" style="width: 100px;">Total</th>
                           <th class="text-center py-3 px-2" style="width: 80px;">
                              Action
                              <!-- <a href="#" class="shop-tooltip float-none text-light" title="" data-original-title="Clear cart">
                                 <i class="ino ion-md-trash"></i>
                              </a> -->
                           </th>
                        </tr>
                     </thead>
                     <tbody>
                        @php
                           $totale_price = 0; $date_check = 0;
                        @endphp
                        @if(count($carts) > 0)
                           @foreach($carts as $value)
                              @if($value->package)
                                 @php
                                    $appointment_date = Carbon\Carbon::parse($value->cart_booking->appointment_date)->format('m/d/Y');
                                    $appointment_date_time = $appointment_date . ' ' . $value->cart_booking->appointment_time;
                                    $time_in_24_hour_format  = date("d-m-Y H:i:s", strtotime($appointment_date_time));
                                    $todaytDate = date('d-m-Y H:i:s');
                                    $today_time = strtotime($todaytDate);
                                    $appointment_time = strtotime($time_in_24_hour_format);
                                    if($appointment_time < $today_time){
                                       $date_check = 1;
                                    }
                                 @endphp
                                 <tr>
                                    <td class="p-4">
                                       <div class="media align-items-center">
                                          <img src="{{ asset('uploads/'.$value->package->package_image) }}" class="d-block ui-w-40 ui-bordered mr-4" alt="{{ $value->package->name }}">
                                          <div class="media-body">
                                             <a href="{{ route('test.detail', ['name_url' => $value->package->name_url]) }}" class="d-block text-dark" target="_blank">{{ $value->package->name }}</a>
                                             <small>
                                                <span class="text-muted">Price: </span> {{config('app.covid_currency')}}{{ number_format($value->package->price, 2, '.', '') }} &nbsp;
                                                <span class="text-muted">Category: </span> {{ $value->package->package_category->name }}  &nbsp;
                                             </small>
                                          </div>
                                       </div>
                                    </td>
                                    <td class="text-center font-weight-semibold align-middle  py-4 px-2 ">{{ Carbon\Carbon::parse($value->cart_booking->appointment_date)->format('m-d-Y') }}<a href="javascript:void(0);" data-id="{{App\helpers\helper::encrypt($value->cart_booking->id)}}" class="shop-tooltip close float-none text-primary appointment-date-update" title="Edit" data-original-title="Edit" data-type="0" data-date="{{ Carbon\Carbon::parse($value->cart_booking->appointment_date)->format('m/d/Y') }}"><i class="fas fa-pencil appointment-update"></i></a></td>
                                    <td class="text-center font-weight-semibold align-middle  py-4 px-2">{{ $value->cart_booking->appointment_time }}<a href="javascript:void(0);" data-app_date="{{ Carbon\Carbon::parse($value->cart_booking->appointment_date)->format('m-d-Y') }}" data-id="{{App\helpers\helper::encrypt($value->cart_booking->id)}}" class="shop-tooltip close float-none text-primary appointment-time-update" title="Edit" data-original-title="Edit" data-type="0" data-time="{{$value->cart_booking->appointment_time }}"><i class="fas fa-pencil appointment-update"></i></a></td>
                                    <td class="text-center font-weight-semibold align-middle py-4 px-2">{{config('app.covid_currency')}}{{ number_format($value->package->price, 2, '.', '') }}</td>
                                    <td class="align-middle  py-4 px-2 text-center">
                                       <!-- <input type="text" class="form-control text-center" value="{{ $value->quantity }}"> -->
                                       {{ $value->quantity }}
                                    </td>
                                    <td class="text-center font-weight-semibold align-middle p-4">{{config('app.covid_currency')}}{{ @($value->quantity) ? number_format($value->package->price * $value->quantity, 2, '.', '') : number_format($value->package->price, 2, '.', '') }}</td>
                                    <td class="text-center align-middle  py-4 px-2">
                                       <a href="javascript:void(0);" data-url="{{ route('remove.carts', ['cart_id' => App\helpers\helper::encrypt($value->id)]) }}" class="shop-tooltip close float-none text-danger remove-cart" title="Remove" data-original-title="Remove">×</a>
                                       <a href="javascript:void(0);" data-id="{{App\helpers\helper::encrypt($value->cart_booking->id)}}" class="shop-tooltip close float-none text-primary test-edit" title="Edit" data-original-title="Edit"><i class="fas fa-pencil update_booking_icon appointment-update"></i></a>
                                    </td>
                                 </tr>
                                 @php
                                    if($value->quantity){
                                       $totale_price += ($value->package->price * $value->quantity);
                                    } else {
                                       $totale_price += $value->package->price;
                                    }
                                 @endphp
                              @elseif($value->order)
                                 @php
                                    $appointment_date_time = $value->order->appointment->app_date . ' ' . $value->order->appointment->app_time;
                                    $date = \DateTime::createFromFormat("m-d-Y g:i a" , $appointment_date_time);
                                    $time_in_24_hour_format = $date->format('d-m-Y H:i:s');
                                    $todaytDate = date('d-m-Y H:i:s');
                                    $today_time = strtotime($todaytDate);
                                    $appointment_time = strtotime($time_in_24_hour_format);
                                    if($appointment_time < $today_time){
                                       $date_check = 1;
                                    }
                                 @endphp
                                 <tr>
                                    <td class="p-4">
                                       <div class="media align-items-center">
                                          <div class="media-body">
                                             <a href="#" class="d-block text-dark" target="_blank">{{ ($value->order->kittype == 'pcr') ? 'RT-PCR' : 'Rapid Antigen test' }}</a>
                                             <small>
                                                <span class="text-muted">Price: </span> {{config('app.covid_currency')}}{{ $value->order->test_price }} &nbsp;
                                             </small>
                                          </div>
                                       </div>
                                    </td>
                                    <td class="text-center font-weight-semibold align-middle  py-4 px-2">{{ $value->order->appointment->app_date }}<a href="javascript:void(0);" data-id="{{App\helpers\helper::encrypt($value->order->appointment->id)}}" class="shop-tooltip close float-none  text-primary appointment-date-update" title="Edit" data-original-title="Edit" data-type="1" data-date="{{$value->order->appointment->app_date}}"><i class="fas fa-pencil appointment-update"></i></a></td>
                                    <td class="text-center font-weight-semibold align-middle  py-4 px-2">{{ $value->order->appointment->app_time }}<a href="javascript:void(0);" data-app_date="{{ $value->order->appointment->app_date }}" data-id="{{App\helpers\helper::encrypt($value->order->appointment->id)}}" class="shop-tooltip close float-none  text-primary appointment-time-update" title="Edit" data-original-title="Edit" data-type="1" data-time="{{$value->order->appointment->app_time}}"><i class="fas fa-pencil appointment-update"></i></a></td>
                                    <td class="text-right font-weight-semibold align-middle p-4">{{config('app.covid_currency')}}{{ $value->order->test_price }}</td>
                                    <td class="align-middle p-4 text-center">
                                       <!-- <input type="text" class="form-control text-center" value="{{ $value->quantity }}"> -->
                                       {{ $value->quantity }}
                                    </td>
                                    <td class="text-right font-weight-semibold align-middle p-4">
                                       {{config('app.covid_currency')}}{{ @($value->quantity) ? number_format($value->order->test_price * $value->quantity, 2, '.', '') : number_format($value->order->test_price, 2, '.', '') }}
                                    </td>
                                    <td class="text-center  px-0 p-4">
                                       <a href="javascript:void(0);" data-url="{{ route('remove.carts', ['cart_id' => App\helpers\helper::encrypt($value->id)]) }}" class="shop-tooltip close float-none text-danger remove-cart" title="Remove" data-original-title="Remove">×</a>
                                    </td>
                                 </tr>
                                 @php
                                    if($value->quantity){
                                       $totale_price += ($value->order->test_price * $value->quantity);
                                    } else {
                                       $totale_price += $value->order->test_price;
                                    }
                                 @endphp
                              @endif
                           @endforeach
                        @endif
                     </tbody>
                  </table>
               </div>
               <!-- / Shopping cart table -->
               @if(count($carts) > 0)
                  <div class="d-flex flex-wrap justify-content-between align-items-center pb-4">
                     <div class="mt-4">
                        <!-- <label class="text-muted font-weight-normal">Promocode</label>
                        <input type="text" placeholder="ABC" class="form-control"> -->
                     </div>
                     <div class="d-flex">
                        <!-- <div class="text-right mt-4 mr-5">
                           <label class="text-muted font-weight-normal m-0">Discount</label>
                           <div class="text-large">
                              <strong>$20</strong>
                           </div>
                        </div> -->
                        <div class="text-right mt-4">
                           <label class="text-muted font-weight-normal m-0">Total price</label>
                           <div class="text-large">
                              <strong>{{config('app.covid_currency')}}{{ number_format($totale_price, 2, '.', '') }}</strong>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="float-right">
                     <a href="{{ route('all.tests') }}" title="Back to shopping" class="btn btn-lg btn-default md-btn-flat mt-2 mr-3">Back to shopping</a>
                     @if($date_check == 1)
                        <a title="Checkout" class="btn btn-lg custom-btn mt-2 disabled">Checkout</a>
                     @else
                        <a href="{{ route('checkouts') }}" title="Checkout" class="btn btn-lg custom-btn mt-2">Checkout</a>
                     @endif
                     <!-- <button type="button" class="btn btn-lg custom-btn mt-2">Checkout</button> -->
                  </div>
                  @if($date_check == 1)
                     <div class="float-right appointment-date-wrong">
                        <span>Appointment date is not validate please update date.</span><br>
                     </div>
                  @endif
               @endif
            </div>
        </div>
    </div>
</section>
@else
<section class="empty-cart-page section-padding" id="empty-cart-section">
   <div class="container px-3 my-5 clearfix">
      <div class="row">
         <div class="col-md-12">
            <div class="card">
               <div class="card-body cart">
                  <div class="col-sm-12 empty-cart-cls text-center">
                     <img src="{{ asset('frontend/images/empty-cart.png') }}" width="130" height="130" class="img-fluid mb-4 mr-3">
                     <h3><strong>Your Cart is Empty</strong></h3>
                     <h4>Add something to make me happy :)</h4>
                     <a href="{{ route('all.tests') }}" class="custom-btn m-3" data-abc="true">continue shopping</a>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section> 
@endif
<!-- Modal -->
<div class = "modal fade" id = "appointmentDateModal" tabindex = "-1" 
   role = "dialog" aria-labelledby =" exampleModalLabel" aria-hidden = "true">
   <div class = "modal-dialog" role = "document">
      <div class = "modal-content">
         <div class = "modal-header">
            <h4>Appointment Date</h4>
            <button type = "button" class = "close cancel-date" data-dismiss = "modal" aria-label = "Close">
               <span aria-hidden = "true">×</span>
            </button>
         </div>
         <form action="javascript:void(0)" method="post" id="update_appointment_date">
            @csrf    
            <div class = "modal-body">
               <input type="hidden" name="app_date_id" id="app_date_id">
               <input type="hidden" name="app_date_type" id="app_date_type">
               <!-- <label>Appointment Date</label> -->
                  <div class= "row">
                    <div class="col-md-6">
                        <input type="text" id="app_date" class="appointment-datepicker-date form-control" name="app_date" value="" placeholder="Appointment Date" readonly/>
                        <span class="app_date error"></span>
                    </div>
                  </div>
            </div>         
            <div class = "modal-footer">
               <button type = "button" class = "custom-btn blog-btn cancel-date" data-dismiss = "modal">Close</button>
               <button type = "submit" class = "custom-btn order-btn" id="appointment-date-submit">Update</button>
            </div> 
         </form>          
      </div>
   </div>
</div>
<!-- Modal -->
<div class = "modal fade" id = "appointmenttimeModal" tabindex = "-1" 
   role = "dialog" aria-labelledby =" exampleModalLabel" aria-hidden = "true">
   <div class = "modal-dialog" role = "document">
      <div class = "modal-content">
         <div class = "modal-header">
            <h4>Appointment Time</h4>
            <button type = "button" class = "close cancel-time" data-dismiss = "modal" aria-label = "Close">
               <span aria-hidden = "true">×</span>
            </button>
         </div>  
         <form action="javascript:void(0)" method="post" id="update-appointment-time">
            @csrf 
            <div class = "modal-body">
               <input type="hidden" name="app_time_id" id="app_time_id">
               <input type="hidden" name="app_time_type" id="app_time_type">
               <input type="hidden" name="appo_date" id="appo_date">
               <!-- <label>Appointment Time</label> -->
               <div class= "row">
                    <div class="col-md-6">
                        <!-- <input type="text" class="appointment-timepicker form-control" name="app_time" id="app_time" placeholder="Appointment Time" /> -->
                        <select class="form-control" name="app_time" id="app_time">
                           <option value="">Select appointment time</option>
                        </select> 
                        <span class="app_time error"></span> 
                    </div>
                </div>
            </div>         
            <div class = "modal-footer">
               <button type = "button" class = "custom-btn blog-btn cancel-time" data-dismiss = "modal">Close</button>
               <button type="submit" class = "custom-btn order-btn" id="appointment-time-submit">Update</button>
            </div> 
         </form>        
      </div>
   </div>
</div>
<!-- Modal -->
<div class = "modal fade" id = "edittestModal" tabindex = "-1" 
   role = "dialog" aria-labelledby =" exampleModalLabel" aria-hidden = "true">
   <div class = "modal-dialog" role = "document">
      <div class = "modal-content">
         <div id="append_test_form">
         </div>    
      </div>
   </div>
</div>
<div class = "modal fade" id = "createtestModal">
   <div class = "modal-dialog" role = "document">
      <div class = "modal-content">
         <div class = "modal-header">
            <h4>Create Booking</h4>
            <button type = "button" class = "close cancel-date" data-dismiss = "modal" aria-label = "Close">
               <span aria-hidden = "true">×</span>
            </button>
         </div>
         <form action="javascript:void(0)" method="post" id="create_booking">
            @csrf  
            <div class = "modal-body">
               <div class= "row">
                  <div class="col-md-12">
                     <select class="form-control" id="package" name="package">
                        <option value="">Select Package*</option>
                        @if(count($packages) > 0)
                        @foreach($packages as $value)
                        <option value="{{$value->id}}">{{ $value->name }}</option>
                        @endforeach
                        @endif
                     </select>   
                  </div>
                  <div class="col-md-12">
                     <input type="text" name="appointment_date" id="appointment_date" class="form-control datepicker" value="{{old('appointment_date')}}" placeholder="Select appointment date*" readonly>
                  </div>
                  <div class="col-md-12">         
                     <select class="form-control" name="appointment_time" id="appointment_time">
                        <option value="">Select appointment time*</option>
                     </select> 
                  </div>
                  <div class="col-md-12">
                     <input type="text" id="name" name="name" class="form-control" placeholder="Name*" value="{{ (Auth::user()->name) ? Auth::user()->name : old('name')}}" maxlength="255">
                  </div>
                  <div class="col-md-12">
                     <input type="text" id="email" name="email" class="form-control" placeholder="Email*" value="{{(Auth::user()->email) ? Auth::user()->email : old('email')}}" maxlength="255">
                  </div>
                  <div class="col-md-12">
                     <input type="text" id="phone" name="phone" class="form-control" placeholder="Phone*" value="{{ (Auth::user()->phone) ? Auth::user()->phone : old('phone')}}" maxlength="12">
                  </div>
               </div>
            </div>         
            <div class = "modal-footer">
               <button type = "button" class = "custom-btn blog-btn" data-dismiss = "modal">Close</button>
               <button type = "submit" class = "custom-btn order-btn" id="booking-update">Create</button>
            </div> 
         </form>
      </div>
   </div>
</div>
<input type="hidden" id="appointment_data" value="{{ $date_desabeled }}">
@endsection
@section('pageleveljs')
<script src="{{asset('frontend/js/jquery.validate.min.js')}}?v=1.0"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src="{{asset('backend/js/sweetalert.min.js')}}"></script>
<script type="text/javascript">
$(function () {
   
   toastr.options = {
        closeButton: true,
        progressBar: true,
        showMethod: 'slideDown',
        timeOut: 4000
    };
   $('body').on('click', '.remove-cart', function (e) {
      var get_url = $(this).data("url");
      swal({
         title: "Are you sure?",
         text: "You will not be able to recover this cart item!",
         icon: 'warning',
         dangerMode: true,
         buttons: {
             cancel: 'No, Please!',
             delete: 'Yes, Delete It'
         }
      }).then(function (willDelete) {                
         if (willDelete) {
            $.ajax({
               type: "get",
               url: get_url,
               data: {"_token": "{{ csrf_token() }}"},
               success: function (data) {
                  swal("Your cart item has been deleted!", {
                     icon: "success",
                  });
                  setTimeout(function(){ location.reload(); }, 2000);
                  // var d_Table = $('.list').dataTable(); 
                  // d_Table.api().ajax.reload();
               },
               error: function (data) {
                  swal({
                     title: 'Error',
                     icon: 'error'
                  });
               }
            });                    
         }
      });
   });
   $('body').on('click', '.appointment-date-update', function (e) {
      $('#appointmentDateModal').modal('show');
      var date = $(this).data("date");
      $('#app_date').val(date); 
      var app_id = $(this).data("id");
      $('#app_date_id').val(app_id);
      var type = $(this).data("type");
      $('#app_date_type').val(type);
   });
   $('body').on('click', '#appointment-date-submit', function (e) {
      $("#update_appointment_date").validate({
           rules: {
               app_date: {
                   required: true
               }
           },
           messages: {
               app_date: {
                   required: "Please select date"
               }
           },
           errorElement: 'div',
           errorPlacement: function(error, element) {
               error.insertAfter(element);
           },
           submitHandler: function(form) {
             $.ajax({
               type: "post",
               url: "{{route('update.appointment.date')}}",
               data: $("#update_appointment_date").serialize(),
               success: function (data) {
                  if(data == true)
                  {
                     swal("An appointment date has been updated successfully!", {
                        icon: "success",
                     });
                     setTimeout(function(){ location.reload(); }, 2000);
                  }  else{
                     $(".app_date").text(data.app_date);
                  }               
               },
               error: function (data) {
                  swal({
                     title: 'Error',
                     icon: 'error'
                  });
               }
            }); 
           }
       });
   });
   $('body').on('click', '.appointment-time-update', function (e) {
      var time = $(this).data("time");
      // $('#app_time').val(time); 
      var app_time_id = $(this).data("id");
      $('#app_time_id').val(app_time_id);
      var app_time_type = $(this).data("type");
      $('#app_time_type').val(app_time_type);

      var app_date = $(this).data("app_date");
      $('#appo_date').val(app_date);
      var id = $(this).attr('id');
      $.ajax({
         type: "get",
         url: "{{ route('covid.appointment.time') }}",
         dataType: "json",
         data: {app_date:app_date, type:"cart"},
         async: false,
         success: function (response)
         {
            if (response.success == true) {
               $('#app_time').html(response.html);
               $('#app_time option[value="'+time+'"]').attr("selected", "selected");
               if ($('#app_time option[value="'+time+'"]').prop('disabled') == false) {
                  $('#app_time option[value="'+time+'"]').attr("selected", "");
               }
            }
         }
      });

      $('#appointmenttimeModal').modal('show');
   });
   
   $('body').on('click', '#appointment-time-submit', function (e) {
      $("#update-appointment-time").validate({
           rules: {
               app_time: {
                   required: true,
                   checktime: true
               }
           },
           messages: {
               app_time: {
                   required: "Please select time"
               }
           },
           errorElement: 'div',
           errorPlacement: function(error, element) {
               error.insertAfter(element);
           },
           submitHandler: function(form) {
             $.ajax({
               type: "post",
               url: "{{route('update.appointment.time')}}",
               data: $("#update-appointment-time").serialize(),
               success: function (data) {
                  if(data == true)
                  {
                     swal("An appointment time has been updated successfully!", {
                        icon: "success",
                     });
                     setTimeout(function(){ location.reload(); }, 2000);
                  } else{
                     $(".app_time").text(data.app_time);
                  }              
               },
               error: function (data) {
                  swal({
                     title: 'Error',
                     icon: 'error'
                  });
               }
            });
           }
       });
   }); 
   $(".cancel-time").click(function() {
      $("#update-appointment-time").data('validator').resetForm();
   });
   $(".cancel-date").click(function() {
      $("#update_appointment_date").data('validator').resetForm();
   });

   var appointment_data = $('#appointment_data').val();
   if (appointment_data != "[]" && appointment_data.length > 0) {
      $('.appointment-datepicker-date').datepicker({
          format: 'mm-dd-yyyy',
          autoclose: true,
          startDate: "today",
          // startDate: '-0m',
          todayHighlight: true,
          daysOfWeekDisabled: [0, 6],
          datesDisabled: appointment_data,
      }).on('changeDate', function(ev){
         var id = $(this).attr('id');
         const myArray = id.split("-");
         $.ajax({
            type: "get",
            url: "{{ route('covid.appointment.time') }}",
            dataType: "json",
            data: {app_date:$(this).val()},
            async: false,
            success: function (response)
            {
               if (response.success == true) {
                  $('#appointment_time').html(response.html);
               }
            }
         });
      });
   } else {
      $('.datepicker').datepicker({
          format: 'mm-dd-yyyy',
          autoclose: true,
          startDate: "today",
          // startDate: '-0m',
          todayHighlight: true,
          daysOfWeekDisabled: [0, 6],
          datesDisabled: '',
      }).on('changeDate', function(ev){
         var id = $(this).attr('id');
         const myArray = id.split("-");
         $.ajax({
            type: "get",
            url: "{{ route('covid.appointment.time') }}",
            dataType: "json",
            data: {app_date:$(this).val()},
            async: false,
            success: function (response)
            {
               if (response.success == true) {
                  $('#appointment_time').html(response.html);
               }
            }
         });
      });
   }
   $('body').on('click', '.test-edit', function (e) {  
         var id = $(this).data('id');       
         $.ajax({
            type: "get",
            url: "{{ route('appointment.test.edit') }}",
            dataType: "json",
            data: {id:id},
            async: false,
            success: function (response)
            {
               if (response.success == true) {
                  $('#append_test_form').html(response.html);
                  $('#edittestModal').modal('show');
                  let type = 'booking';
                  $.ajax({
                     type: "get",
                     url: "{{ route('covid.appointment.time') }}",
                     dataType: "json",
                     data: {id:id,type:type,app_date:$("#appointment_date").val()},
                     async: false,
                     success: function (response){
                       if (response.success == true) {
                         $('#appointment_time').html(response.html);
                         $("#appointment_time").val($('#hidden_appo_time').val());
                       }
                     }
                   });
                  getAppointmentDate();                  
               }
            },
            error: function (response) {
            }
         });
   });
   getAppointmentDate();
   function getAppointmentDate()
   {
      var appointment_data = $('#appointment_data').val();
      if (appointment_data != "[]" && appointment_data.length > 0) {
         $('.datepicker').datepicker({
             format: 'mm-dd-yyyy',
             autoclose: true,
             startDate: "today",
             // startDate: '-0m',
             todayHighlight: true,
             daysOfWeekDisabled: [0, 6],
             datesDisabled: appointment_data,
         }).on('changeDate', function(ev){
            var id = $(this).attr('id');
            const myArray = id.split("-");
            $.ajax({
               type: "get",
               url: "{{ route('covid.appointment.time') }}",
               dataType: "json",
               data: {app_date:$(this).val()},
               async: false,
               success: function (response)
               {
                  if (response.success == true) {
                     $('#appointment_time').html(response.html);
                  }
               }
            });
         });
      } else {
         $('.datepicker').datepicker({
             format: 'mm-dd-yyyy',
             autoclose: true,
             startDate: "today",
             // startDate: '-0m',
             todayHighlight: true,
             daysOfWeekDisabled: [0, 6],
             datesDisabled: '',
         }).on('changeDate', function(ev){
            var id = $(this).attr('id');
            const myArray = id.split("-");
            $.ajax({
               type: "get",
               url: "{{ route('covid.appointment.time') }}",
               dataType: "json",
               data: {app_date:$(this).val()},
               async: false,
               success: function (response)
               {
                  if (response.success == true) {
                     $('#appointment_time').html(response.html);
                  }
               }
            });
         });
      }
   }
   $('body').on('click', '#booking-update', function (e) {
      $("#update_test").validate({
         ignore: '',
         rules: {   
            name:"required",
            email:{
               required: true,
               email: true,
            },
            phone:{
               required: true,
               phoneUS: true,
               maxlength:12
            },
            appointment_date:{
               required: true,
               checkappointmentdate: true
            },
            appointment_time:{
               required: true,
               checkappointmenttime: true
            },
         },
         messages:{
            name: {
               required: "Please enter name.",
            },
            email: {
               required: "Please enter email.",
               email: "Please enter valid email.",
            },
            phone: {
               required: "Please enter phone.",
               phoneUS: "Please enter a valid phone.",
            },
            appointment_date: {
               required: "Please select appointment date."
            },
            appointment_time: {
               required: "Please select appointment time.",
            }
         },
         errorPlacement: function(error, element) {
           error.insertAfter(element);
         },
         errorElement: 'span',
         submitHandler: function(form) {
                $.ajax({
                  type: "post",
                  url: "{{route('appointment.booking.update')}}",
                  data: $("#update_test").serialize(),
                  success: function (data) {
                     if(data.success == true)
                     {
                        swal(data.message, {
                           icon: "success",
                        });
                        setTimeout(function(){ location.reload(); }, 2000);
                     } else{
                        toastr.error(data.message);
                     }              
                  },
                  error: function (data) {
                     swal(data.message, {
                           icon: "error",
                        });
                  }
               });
              }
      });
   });
   
   $.validator.addMethod("checkappointmentdate", function (value, element) {
        var isFound = false;
        var app_time = $('#appointment_time').val();
        var booking_id = $('#booking_id').val();
        $.ajax({
            type: "POST",
            url: "{{ ('appointmentAlreadyRegistered') }}",
            dataType: "json",
            data: { _token: "{{ csrf_token() }}",app_time:app_time,app_date:value,type:1,id:booking_id },
            async: false,
            success: function (response)
            {
                // if the email address does not exists, it returns a string "true"
                if (response.msg == true) {
                    isFound = false;
                } else {
                    isFound = true;
                }
            }
        })
        return isFound;
    }, "Appointment is Already Taken");
   $.validator.addMethod("checkappointmenttime", function (value, element) {
        var isFound = false;
        var app_date = $('#appointment_date').val();
        var booking_id = $('#booking_id').val();
        $.ajax({
            type: "POST",
            url: "{{ ('appointmentAlreadyRegistered') }}",
            dataType: "json",
            data: { _token: "{{ csrf_token() }}",app_time:value,app_date:app_date,type:1,id:booking_id },
            async: false,
            success: function (response)
            {
                // if the email address does not exists, it returns a string "true"
                if (response.msg == true) {
                    isFound = false;
                } else {
                    isFound = true;
                }
            }
        })
        return isFound;
    }, "Appointment is Already Taken");
   $.validator.addMethod("checktime", function (value, element) {
        var isFound = false;
        var booking_id = $('#app_time_id').val();
        var type = $('#app_time_type').val();
        var app_date = $('#appo_date').val();
        if(type == 1)
        {
            type = 2;
        }else{
            type = 1;
        }
        $.ajax({
            type: "POST",
            url: "{{ ('appointmentAlreadyRegistered') }}",
            dataType: "json",
            data: { _token: "{{ csrf_token() }}",app_time:value,app_date:app_date,id:booking_id },
            async: false,
            success: function (response)
            {
                // if the email address does not exists, it returns a string "true"
                if (response.msg == true) {
                    isFound = false;
                } else {
                    isFound = true;
                }
            }
        })
        return isFound;
    }, "Appointment is Already Taken");
   //Create booking
   $('body').on('click', '#create_booking_btn', function (e) {
      $('#create_booking').trigger("reset");
      $('#createtestModal').modal('show');
   });
   $('body').on('click', '#create_booking', function (e) {
      $("#create_booking").validate({
         ignore: '',
         rules: {   
            package:"required",
            name:"required",
            email:{
               required: true,
               email: true,
            },
            phone:{
               required: true,
               phoneUS: true,
               maxlength:12
            },
            appointment_date:{
               required: true,
               checkappointmentdate: true
            },
            appointment_time:{
               required: true,
               checkappointmenttime: true
            },
         },
         messages:{
            package:{
               required: "Please select package.",
            },
            name: {
               required: "Please enter name.",
            },
            email: {
               required: "Please enter email.",
               email: "Please enter valid email.",
            },
            phone: {
               required: "Please enter phone.",
               phoneUS: "Please enter a valid phone.",
            },
            appointment_date: {
               required: "Please select appointment date."
            },
            appointment_time: {
               required: "Please select appointment time.",
            }
         },
         errorPlacement: function(error, element) {
           error.insertAfter(element);
         },
         errorElement: 'span',
         submitHandler: function(form) {
             $.ajax({
               type: "post",
               url: "{{route('appointment.booking.update')}}",
               data: $("#create_booking").serialize(),
               success: function (data) {
                  if(data.success == true)
                  {
                     swal(data.message, {
                        icon: "success",
                     });
                     setTimeout(function(){ location.reload(); }, 2000);
                  } else{                     
                      toastr.error(data.message);
                  }              
               },
               error: function (data) {
                  swal(data.message, {
                        icon: "error",
                     });
               }
            });
           }
      });
   });
});
</script>
@stop