@extends('layout.frontend.master')

@section('meta-title', 'Guest Checkout - LEREVE')

@section('content')
   <section class="page-content ">       
      <section class="shopping-cart">
         <div class="container">
            <div class="row">
               <div class="hero-content page-head">
                  <h2>{{__('GUEST CHECKOUT')}}</h2>
               </div>
            </div>         

            @if(session('guest')['delivery_type'] == "Delivery")
               <div class="row checkout-block">
                  @if(session('cart_id'))
                     <div class="col-12 col-md-7 col-lg-8  ">
                        <div class="address-part add-new-address">
                           <form method="post" action="{{route('payment')}}">
                              @csrf
                              <div class="row mb-5 form-area">
                                 <h4 > {{__('Delivery Address')}} </h4>
                                 
                                 <div class="col-lg-12 form-field">
                                    <div class="form-group">
                                       <label>{{__('Area')}}  <em>*</em> <span></span></label>
                                       <select name="billing_area" required class="form-control custom-field" id="extra_biling_area" onchange="getSlots()"> 
                                          <option value="0" data-shipping="0">Select Area</option>
                                          @foreach($areas as $area)
                                             <option value="{{$area->id}}" data-shipping="{{$area->shipping}}" {{old('billing_area')==$area->id || (session('cart-address')['billing_area']==$area->id)?'selected':''}}>{{(app()->currentLocale()=='en')?$area->name_en:$area->name_ar}}</option>
                                          @endforeach
                                       </select>
                                       <!-- <input class="form-control custom-field " name="billing_area" value="" type="text" required=""> -->
                                    </div>
                                 </div>
                                 <input type="hidden" name="shipping" class="ar-shipping-input">
                                 <input type="hidden" name="subtotal" class="ar-subtotal" value="{{$cart['cart'][0]['subtotal'] - $cart['cart'][0]['discount']}}">
                                 {{--  --}}
                                 <div class="form-field mt-5">
                                    <h4>Select Day</h4>
                                    <ul class="timelist">
                                       {{-- @if ($hoursDifference !== null && $hoursDifference > 4 && $isBeforeNoon)
                                       <li>
                                          <div class="radio time">
                                                <input id="del-date-today" class="del-date" name="del_date" type="radio"
                                                   data-name="{{ \Carbon\Carbon::today()->format('l, d, M') }}"
                                                   value="{{ \Carbon\Carbon::today()->format('m/d/Y') }}">
                                                <label for="del-date-today" class="radio-label">
                                                   {{ \Carbon\Carbon::today()->format('l, d, M') }}
                                                </label>
                                          </div>
                                       </li>
                                    @endif  --}}
                                    <input type="hidden" id="ajax_area" name="area" checked  value="">
                                       @for($i = 0; $i < 4; $i++)
                                       <li>
                                           <div class="radio time">
                                               <label for="del-date-{{$i}}" class="radio-label"><input id="del-date-{{$i}}" onclick="getSlots()" class="del-date" name="del_date" type="radio" {{-- ($i == 0) || session('sel-date') ? 'checked' : '' --}} data-name="{{ date('l, d, M', strtotime('+' . ($i) . ' day')) }}" value="{{ date('m/d/Y', strtotime('+' . ($i) . ' day')) }}">
                                               {{ date('l, d, M', strtotime('+' . ($i) . ' day')) }}</label>
                                           </div>
                                       </li>
                                   @endfor
                                   <li>
                                       <div class="radio time">
                                          <input type='text' class="form-control custom-field input_del_date" name="del_date"  placeholder="DD/MM/YY" id="date_pick" />
                                          <!-- <label for="date_pick">DD/MM/YY</label> -->
                                       </div>
                                  </li>
                                    </ul>
                                   </div>
            
            
                                   <div class="form-field mt-5" id="deliveryTime">
                                    <h4>Select Time</h4>
                                    <ul class="timelist"></ul>
                                   </div>
                                 {{--  --}}


                                 <div class="col-lg-6 form-field ">
                                    <div class="form-group">
                                       <label>{{__('Full Name')}} <em>*</em></label>
                                       <input class="form-control custom-field " value="{{old('billing_name', session('guest')['full_name'])}}" name="billing_name" type="text" required="">
                                    </div>
                                 </div>
                                 <div class="col-lg-6 form-field">
                                    <div class="form-group">
                                       <label>{{__('Phone')}} <em>*</em></label>
                                       <input class="form-control custom-field " value="{{old('billing_phone', session('guest')['phone'])}}" name="billing_phone"  type="tel" required="">
                                    </div>
                                 </div>
                                 <div class="col-lg-6 form-field">
                                    <div class="form-group mb-0">
                                       <label>{{__('Email')}} <em>*</em></label>
                                       <input class="form-control custom-field" value="{{old('billing_email', session('guest')['email'])}}" name="billing_email"  type="email" required="">
                                    </div>
                                 </div>
                                 
                                 <div class="col-lg-6 form-field">
                                    <div class="form-group">
                                       <label>{{__('Block')}}  <em>*</em></label>
                                       <input class="form-control custom-field" type="text" name="billing_block" value="{{old('billing_block', (session('cart-address'))?session('cart-address')['billing_block']:'')}}" placeholder=" " required="" >
                                    </div>
                                 </div>
                                 <div class="col-lg-6 form-field">
                                    <div class="form-group">
                                       <label>{{__('Street')}}  <em>*</em></label>
                                       <input class="form-control custom-field" type="text" value="{{old('billing_street', (session('cart-address'))?session('cart-address')['billing_street']:'')}}" name="billing_street" placeholder=" " required="" >
                                    </div>
                                 </div>                                   
                                 <div class="col-lg-6 form-field">
                                    <div class="form-group">
                                       <label>{{__('Avenue (Jaadah)')}} </label>
                                       <input class="form-control custom-field" type="text" name="billing_avenue" value="{{old('billing_avenue', (session('cart-address'))?session('cart-address')['billing_avenue']:'')}}" required="">
                                    </div>
                                 </div>
                                 <button class="submit-order" style="display:none;">{{__('Place Order')}}</button>
                              </div>

                              
                           </form>
                        </div>                          
                     </div>
                     <div class="col-12 col-md-5 col-lg-4 ">
                        <div class="cart-right">
                           <div class="side-head">
                              <h4>{{__('Payment Summary')}}</h4>
                           </div>

                           <div class="card  ">
                              <div class="card-body">
                                 <ul class="list-group list-group-sm list-group-flush-y list-group-flush-x">
                                    <li class="list-group-item d-flex ">
                                       <span>{{__('Total')}}</span> <span class="ml-auto font-size-sm price">{{$cart['cart'][0]['subtotal']}} {{__('KWD')}}</span>
                                    </li>
                                    <li class="list-group-item d-flex ">
                                        <span>{{__('Discount Code')}}</span> <span class="ml-auto font-size-sm price"> -{{($cart['cart'][0]['discount'])?$cart['cart'][0]['discount']:0}} {{__('KWD')}} </span>
                                    </li> 
                                    <li class="list-group-item d-flex ar-shipping">
                                       <span>{{__('Delivery Charge')}}</span> <span class="ml-auto font-size-sm price"> 0 KWD</span>
                                    </li>                                     
                                    <li class="list-group-item d-flex   subtotal">
                                       <span>{{__('Grand Total')}}</span> <span class="ml-auto price">{{ $cart['cart'][0]['subtotal'] - $cart['cart'][0]['discount'] }} {{__('KWD')}}</span>
                                    </li>
                                 </ul>
                              </div>
                           </div>
                           <div class="cart-btm">
                              <a href="#" class="btn place-order primery-btn w-100">{{__('Place Order')}}</a>
                           </div>
                        </div>
                        <a class="btn  mt-3  w-100  line-button-dark line-button-dark" href="{{route('cart')}}">
                           <i class="bi bi-bag"></i>{{__('View Cart')}}
                        </a>
                     </div>
                  @else
                     <a class="btn  mt-3  w-100  line-button-dark line-button-dark" href="{{route('products')}}">
                        <i class="bi bi-arrow-left"></i>{{__('Continue Shopping')}}
                     </a>
                  @endif
               </div>
            @else           

               {{--  --}}
               <div class="row checkout-block">
                  @if(session('cart_id'))
                     <div class="col-12 col-md-7 col-lg-8  ">
                        <div class="address-part add-new-address">
                           <form method="post" action="{{route('payment')}}">
                              @csrf
                              
                              <div class="row mb-5 form-area">
                                 <h4 > {{__('Pickup Information')}} </h4>
                                 <div class="col-lg-6 form-field">

                                    <div class="form-group">

                                        <label>{{__('Branch Name')}}  <em>*</em> <span></span></label>

                                        <select class="form-select form-control custom-field" aria-label="Default select example" name="branch_id">

                                            <option value="" selected>{{__('Select Branch Name')}}</option>

                                            @foreach($branches as $branch)

                                                <option value="{{$branch->id}}" >{{$branch->name}}</option>

                                            @endforeach

                                        </select>
                                       @error('branch_id')
                                          <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
                                       @enderror
                                    </div>

                                </div>
                                <div class="col-lg-6 form-field">

                                       <div class="form-group">

                                          <label>{{__('Pickup Date')}}  <em>*</em> <span></span></label>

                                          {{-- <select class="form-select form-control custom-field" aria-label="Default select example"  name="pickup_date">
                                             <option value="" selected>{{__('Select Pickup Date')}}</option>
                                             <option value="1">1 Hr</option>
                                             <option value="2">2 Hr</option>
                                             <option value="3">3 Hr</option>
                                             <option value="4">4 Hr</option>
                                             </select> --}}
                                             {{-- <input type="date" class="form-control custom-field " name="pickup_date" id=""> --}}
                                             <input type='text' class="form-control custom-field input_del_date" placeholder="Select Date" name="pickup_date" />
                                             @error('pickup_date')
                                                <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
                                             @enderror

                                       </div>   

                                 </div>
                                <div class="col-lg-6 form-field">

                                       <div class="form-group">

                                          <label>{{__('Pickup Time')}}  <em>*</em> <span></span></label>

                                          <select class="form-select form-control custom-field" aria-label="Default select example"  name="pickup_time">

                                             <option value="" selected>{{__('Select Pickup Time')}}</option>

                                             <option value="1">1 Hr</option>

                                             <option value="2">2 Hr</option>

                                             <option value="3">3 Hr</option>

                                             <option value="4">4 Hr</option>

                                             </select>
                                          @error('pickup_time')
                                             <div class="help-block form-text with-errors form-control-feedback">{{ $message }}</div>
                                          @enderror

                                       </div>   

                                 </div>


                                 <div class="col-lg-6 form-field ">
                                    <div class="form-group">
                                       <label>{{__('Full Name')}} <em>*</em></label>
                                       <input class="form-control custom-field " value="{{old('billing_name', session('guest')['full_name'])}}" name="billing_name" type="text" required="">
                                    </div>
                                 </div>
                                 <div class="col-lg-6 form-field">
                                    <div class="form-group">
                                       <label>{{__('Phone')}} <em>*</em></label>
                                       <input class="form-control custom-field " value="{{old('billing_phone', session('guest')['phone'])}}" name="billing_phone"  type="tel" required="">
                                    </div>
                                 </div>
                                 <div class="col-lg-6 form-field">
                                    <div class="form-group mb-0">
                                       <label>{{__('Email')}} <em>*</em></label>
                                       <input class="form-control custom-field" value="{{old('billing_email', session('guest')['email'])}}" name="billing_email"  type="email" required="">
                                    </div>
                                 </div>
                                 {{-- <div class="col-lg-6 form-field">
                                    <div class="form-group">
                                       <label>{{__('Area')}}  <em>*</em> <span></span></label>
                                       <select name="billing_area" required class="form-control custom-field" id="extra_biling_area"> 
                                          @foreach($areas as $area)
                                             <option value="{{$area->id}}" {{old('billing_area')==$area->id || (session('cart-address')==$area->id)?'selected':''}}>{{(app()->currentLocale()=='en')?$area->name_en:$area->name_ar}}</option>
                                          @endforeach
                                       </select>
                                       <!-- <input class="form-control custom-field " name="billing_area" value="" type="text" required=""> -->
                                    </div>
                                 </div> --}}
                                 {{-- <div class="col-lg-6 form-field">
                                    <div class="form-group">
                                       <label>{{__('Block')}}  <em>*</em></label>
                                       <input class="form-control custom-field" type="text" name="billing_block" value="{{old('billing_block', (session('cart-address'))?session('cart-address')['billing_block']:'')}}" placeholder=" " required="" >
                                    </div>
                                 </div> --}}
                                 {{-- <div class="col-lg-6 form-field">
                                    <div class="form-group">
                                       <label>{{__('Street')}}  <em>*</em></label>
                                       <input class="form-control custom-field" type="text" value="{{old('billing_street', (session('cart-address'))?session('cart-address')['billing_street']:'')}}" name="billing_street" placeholder=" " required="" >
                                    </div>
                                 </div>                                    --}}
                                 {{-- <div class="col-lg-6 form-field">
                                    <div class="form-group">
                                       <label>{{__('Avenue (Jaadah)')}} </label>
                                       <input class="form-control custom-field" type="text" name="billing_avenue" value="{{old('billing_avenue', (session('cart-address'))?session('cart-address')['billing_avenue']:'')}}" required="">
                                    </div>
                                 </div> --}}
                                 <button class="submit-order" style="display:none;">{{__('Place Order')}}</button>
                              </div>

                              


                         
                           </form>
                        </div>                          
                     </div>
                     <div class="col-12 col-md-5 col-lg-4 ">
                        <div class="cart-right">
                           <div class="side-head">
                              <h4>{{__('Payment Summary')}}</h4>
                           </div>

                           <div class="card  ">
                              <div class="card-body">
                                 <ul class="list-group list-group-sm list-group-flush-y list-group-flush-x">
                                    <li class="list-group-item d-flex ">
                                       <span>{{__('Total')}}</span> <span class="ml-auto font-size-sm price">{{$cart['cart'][0]['subtotal']}} {{__('KWD')}}</span>
                                    </li>
                                    <li class="list-group-item d-flex ">
                                        <span>{{__('Discount Code')}}</span> <span class="ml-auto font-size-sm price"> -{{($cart['cart'][0]['discount'])?$cart['cart'][0]['discount']:0}} {{__('KWD')}} </span>
                                    </li> 
                                    <li class="list-group-item d-flex ">
                                       <!-- <span>Delivery Charge</span> <span class="ml-auto font-size-sm price"> 2 {{__('KWD')}}</span> -->
                                    </li>                                       
                                    <li class="list-group-item d-flex   subtotal">
                                       <span>{{__('Grand Total')}}</span> <span class="ml-auto price">{{ $cart['cart'][0]['subtotal'] - $cart['cart'][0]['discount'] }} {{__('KWD')}}</span>
                                    </li>
                                 </ul>
                              </div>
                           </div>
                           <div class="cart-btm">
                              <a href="#" class="btn place-order primery-btn w-100">{{__('Place Order')}}</a>
                           </div>
                        </div>
                        <a class="btn  mt-3  w-100  line-button-dark line-button-dark" href="{{route('cart')}}">
                           <i class="bi bi-bag"></i>{{__('View Cart')}}
                        </a>
                     </div>
                  @else
                     <a class="btn  mt-3  w-100  line-button-dark line-button-dark" href="{{route('products')}}">
                        <i class="bi bi-arrow-left"></i>{{__('Continue Shopping')}}
                     </a>
                  @endif
               </div>
               {{--  --}}
            @endif
         </div>
      </section>
   </section>
   
@push('asset-bottom')
<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">


<script>
    
   $(document).ready(function(){   
      $('input.custom-control-input:checkbox').change(function(){
         if($(this).is(":checked")) {
            $('.billing-adrs').addClass("addressitemshow");
         } else {
            $('.billing-adrs').removeClass("addressitemshow");
         }
      });

      jQuery('body').on('click', '.add-adddress a', function(e){
         e.preventDefault();
         jQuery('.new-address').show(500);
         jQuery('.current-address').hide(500);
      });

      jQuery('body').on('click', '.add-cancel-btn', function(e){
         e.preventDefault();
         jQuery('.new-address').hide(500);
         jQuery('.add-cancel-btn').hide(500);
         jQuery('.current-address').show(500);
      });

      jQuery('body').on('click', 'input[name="billing_opt"]', function(){
         if(jQuery(this).is(':checked')){
            jQuery('.billing-adrs').find('input').prop('required', true);
         } else {
            jQuery('.billing-adrs').find('input').prop('required', false);
         }
      });

      $('.map-block input.form-check-input:checkbox').change(function(){
         if($(this).is(":checked")) {
            $('.location-block').addClass("showMap"),700;
         } else {
            $('.location-block').removeClass("showMap"),700;
         }
      });
   });

   function updateAreaField() {
        // Find the checked radio button
        var checkedAddress = $('#extra_biling_area');
        // If a radio button is checked
        if (checkedAddress.length > 0) {
            $value = checkedAddress.val();

            // Get the data-area value and set it in the area input field
            // var areaValue = checkedAddress.data('area');
            var shipping = checkedAddress.find('option[value='+$value+']').data('shipping');
            console.log(shipping);
            jQuery('.ar-shipping .price').text('+'+shipping+' KWD');
            jQuery('.ar-shipping-input').val(shipping);
            $subtotal = jQuery('.ar-subtotal').val()
            $gtotal = parseFloat($subtotal) + parseFloat(shipping);
            jQuery('.subtotal .price').text($gtotal+' KWD');
            // $('#ajax_area').val(areaValue);
        }
    }

    $(document).ready(function() {
        // Call the function once on page load
        updateAreaField();

        // Add change event listener for radio buttons with name="address"
        $('#extra_biling_area').on('change', function() {
            // Update area field when user changes the address selection

            updateAreaField();
        });
    });

    $('#select_area').on('change', function() {

      $('#ajax_area').val($(this).val());
   });
    $('#extra_biling_area').on('change', function() {

      $('#ajax_area').val($(this).val());
   });

   function getSlots(){
      area = jQuery('#ajax_area').val();
      // branch = jQuery('input[name="area"]:checked').data('id');
      branch = area;
      jQuery('.branch').val(branch);
      dt = jQuery('input[name="del_date"]:checked').val();
      indt = jQuery('input[name="input_del_date"]').val();
      if(indt!='' && indt!=undefined)
         dt = indt;
      jQuery.ajax({
         url: '{{route("getSlots")}}',
         method: 'get',
         data: {
            branch: branch,
            del_dt: dt,
         },
         dataType: 'JSON',
         success: function(res){
            jQuery('#deliveryTime ul').html(res.html);
         },
         error: function(err){
            console.log(err);
         }
      });
   }

   jQuery('body').on('change', 
      'input[name="slot"], #select_area, #extra_biling_area, input[name="del_date"], input[name="input_del_date"]', 
      function(){
         setTimeout(function(){
            checkPreparation();
         }, 1000);
      }
   );

   function checkPreparation(){
      var area = jQuery('#ajax_area').val();
      var slot = jQuery('input[name="slot"]:checked').val();
      
      dt = jQuery('input[name="del_date"]:checked').val();
      indt = jQuery('input[name="input_del_date"]').val();
      if(indt!='' && indt!=undefined)
         dt = indt;

      jQuery('.btn.place-order').removeClass('disabled');
      jQuery('.prepare-note').remove();
      if(dt!=undefined && slot!=undefined && area!=undefined){
         jQuery.ajax({
            url: '{{route("chkPreparation")}}',
            method: 'get',
            data: {
               area: area,
               del_dt: dt,
               slot: slot,
            },
            dataType: 'JSON',
            success: function(res){
               // alert(res.result);
               if(res.result=='error'){
                  console.log(res.msg);
                  jQuery('.btn.place-order').addClass('disabled');
                  jQuery('body').prepend('<div class="alert-danger alert prepare-note">'+res.msg+'</div>');
               }
            },
            error: function(err){
               console.log(err);
            }
         });
      }

   }

$(".input_del_date").datepicker({
   startDate: '+1d',endDate: "+40d",
    todayHighlight: true
});

// jQuery('body').on('change', '.area, .del-date, .input_del_date', function(){

// displayData();

// getSlots();

// });
</script>

@endpush

@endsection