@extends('layout.frontend.master')
@section('meta-title', 'Checkout - LEREVE')

@push('asset-top')
<style>
   .prepare-note {
      position: fixed;
      width: 100%;
      margin: 0;
      padding: 5px;
      text-align: center;
      font-size: 12px;
      border-radius: 0;
      z-index: 99;
   }
</style>
@endpush

@section('content')

   <section class="page-content ">
      <section class="shopping-cart">
         @if(!auth()->check())
            <a class="btn  mt-3  w-100  line-button-dark line-button-dark" href="{{route('home')}}">
               <i class="bi bi-arrow-left"></i>{{__('Continue Shopping')}}
            </a>
         @else
            <div class="container">
               <div class="row">
                  <div class="hero-content page-head"><h2>{{__('Checkout')}} </h2></div>
               </div>
               <div class="row checkout-block">
                  <div class="col-12 col-md-7 col-lg-8 ">
                     <div class="address-part ">
                        <div class="row delivery-type">
                           <div class="col-lg-12">
                              <!-- <h2>{{--__('Choose pick up or delivery?')--}}</h2> -->
                              <h2>{{__('Order Type:')}}</h2>
                           </div>
                           <div class="col-lg-12">   
                              <div class="delivery-option active">
                                 <a href="{{route('checkout')}}">
                                    <div class="icon vehicle"></div>
                                    <h3>{{__('Delivery')}}</h3>
                                 </a>
                              </div>
                           </div>
                           <div class="col-sm-3 offset-sm-9">
                              <span>Switch To: <a href="{{route('pickup')}}" style="color: #ac8f71;">{{__('Pickup')}}</a></span>
                           </div>
                           <div class="col-lg-12" style="display:none;">
                              <div class="delivery-option" >
                                 <a href="{{route('pickup')}}">
                                    <div class="icon take-way"></div><h3>{{__('Pickup')}}</h3>
                                 </a>
                              </div>
                           </div>
                        </div>
                        <h4 > {{__('Delivery Address')}} </h4>
                     </div>
                     <div class="address-part add-new-address new-address" style="display: none;">
                        <form method="post" action="{{route('add.address.store')}}">
                           @csrf
                           <div class="row mb-5 form-area">
                              <div class="col-lg-12 form-field">
                                 <div class="form-group">
                                    <label>{{__('Area')}}  <em>*</em> <span></span></label>
                                    <select name="area" required class="form-control custom-field" id="select_area">
                                       @foreach($areas as $area)
                                          <option value="{{$area->id}}" data-price="{{$area->shipping}}" {{(old('area')==$area->id)?'selected':''}}>{{(app()->currentLocale()=='en')?$area->name_en:$area->name_ar}}</option>
                                       @endforeach
                                    </select>
                                    @error('area')
                                       <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 " name="fname" type="text" required=""  value="{{ old('fname') }}">
                                    @error('fname')
                                       <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>{{__('Phone')}} <em>*</em></label>
                                    <input class="form-control custom-field " name="phone" type="tel" required=""  value="{{ old('phone') }}">
                                    @error('phone')
                                       <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 mb-0">
                                    <label>{{('Email')}} <em>*</em></label>
                                    <input class="form-control custom-field" name="email" type="email" required=""  value="{{ old('email') }}">
                                    @error('email')
                                       <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>{{__('Block')}}  <em>*</em></label>
                                    <input class="form-control custom-field" name="block" type="text" placeholder=" " required="" value="{{ old('block') }}">
                                    @error('block')
                                       <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>{{__('Street')}}  <em>*</em></label>
                                    <input class="form-control custom-field" name="street" type="text" placeholder=" " required=""  value="{{ old('street') }}">
                                    @error('street')
                                       <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>{{__('Avenue (Jaadah)')}} </label>
                                    <input class="form-control custom-field" type="text" name="avenue" value="{{ old('avenue') }}">
                                 </div>
                              </div>
                              <div class="col-sm-10 mt-4">
                                 <button class="btn float-right line-button-dark add-cancel-btn" type="button">{{__('Cancel')}}</button>
                              </div>
                              <div class="col-sm-2 mt-4">
                                 <button class="btn float-right primery-btn" >{{__('Submit')}}</button>
                              </div>
                           </div>
                           <input type="hidden" name="redirectTo" value="{{route(Route::currentRouteName())}}">
                        </form>
                     </div>
                     <form method="post" action="{{route('payment')}}">
                        @csrf
                       
                        @php $cartData = []; @endphp
                        @if(session('cart-address'))
                           @php $cartData = session('cart-address');
                           @endphp
                        @endif
                        <div class="address-part current-address">
                           <div class="address-box ">
                              @foreach($addresses as $key=>$address)
                                 <div class="delivery-info">
                                    <div class="rdio rdio-primary radio-inline">
                                       <input name="address" data-area="{{$address->area}}" data-shipping="{{$address->shipping}}" value="{{$address->id}}" id="radio{{$address->id}}" type="radio" class="control-input" {{(array_key_exists('address',$cartData) && $cartData['address']==$address->id)?'checked':(($key==0)?'checked':'')}} onclick="getSlots()" >
                                       <label for="radio{{$address->id}}" class="control-label">
                                          <h5>{{$address->name}} - {{$address->phone}} </h5>
                                          <p> {{$address->block}}, {{$address->street}}, {{(app()->getLocale()=='en')?$address->area_en:$address->area_ar}}, {{$address->avenue}}, {{$address->email}} </p>
                                          <!-- <div class="address-action">
                                             <a href="#"  class="edit-btn">CHANGE ADDRESS</a>
                                          </div> -->
                                       </label>
                                    </div>
                                 </div>
                              @endforeach
                           </div>
                           <div class="add-adddress">
                              <a href="#"> 
                                 <i class="bi bi-plus-circle"></i>{{__('Add New Address')}}
                              </a>
                           </div>
                           <div class="row">
                              <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>
                           
                        </div>
                        <div class="custom-control custom-checkbox billing-checkbox">
                           <input type="checkbox" class="custom-control-input" name="billing_opt" id="checkp" value="1" {{(array_key_exists('billing_opt',$cartData))?'checked':''}}>
                           <label class="custom-control-label" for="checkp">Billing Address(if you have different Billing  address)</label>
                        </div>
                        <div class="billing-adrs">
                           <div class="row checkout-block">
                              <div class="col-12 col-md-12 col-lg-12  ">
                                 <div class="address-part add-new-address">
                                    <div class="row mb-5 form-area">
                                       <h4 > {{__('Billing Address')}} </h4>
                                       <div class="col-lg-6 form-field ">
                                          <div class="form-group">
                                             <label>{{__('Full Name')}} <em>*</em></label>
                                             <input class="form-control custom-field " name="billing_name" value="{{(array_key_exists('billing_name', $cartData))?$cartData['billing_name']:''}}" type="text" >
                                          </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="{{(array_key_exists('billing_phone', $cartData))?$cartData['billing_phone'] : ''}}" name="billing_phone" type="tel" >
                                          </div>
                                       </div>
                                       <div class="col-lg-6 form-field">   
                                          <div class="form-group">
                                             <label>{{__('Email Address')}} <em>*</em></label>
                                             <input class="form-control custom-field " name="billing_email" value="{{(array_key_exists('billing_email', $cartData))?$cartData['billing_email']:''}}" type="email" >
                                          </div>
                                       </div>
                                       <div class="col-lg-6 form-field">
                                          <div class="form-group">
                                             <label>{{__('Area')}} <em>*</em></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>
                                          </div>
                                       </div>
                                       <div class="col-lg-6 form-field">
                                          <div class="form-group">
                                             <label>{{__('Block')}} <em>*</em></label>
                                             <input class="form-control custom-field" value="{{(array_key_exists('billing_block', $cartData))?$cartData['billing_block']:''}}" type="text" name="billing_block" >
                                          </div>
                                       </div>
                                       <div class="col-lg-6 form-field">
                                          <div class="form-group">
                                             <label>{{__('Street')}} <em>*</em></label>
                                             <input class="form-control custom-field" value="{{(array_key_exists('billing_street', $cartData))?$cartData['billing_street']:''}}" type="text" name="billing_street">
                                          </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="{{(array_key_exists('billing_avenue', $cartData))?$cartData['billing_avenue']:''}}" >
                                          </div>
                                       </div>
                                       <div class="col-lg-12 mt-4">
                             
                                          <!-- <a href="payment.html" class="btn float-right primery-btn" >Continue</a> -->
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </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']}}">
                        <button class="submit-order" style="display:none;">{{__('Place Order')}}</button>
                     </form>
                  </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 class="btn place-order primery-btn w-100" href="#">{{__('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>
               </div>
            </div>
         @endif
      </section>
   </section>
@endsection
@push('asset-bottom')
<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 = $('.current-address input[name="address"]:checked');
        // If a radio button is checked
        if (checkedAddress.length > 0) {
            // Get the data-area value and set it in the area input field
            var areaValue = checkedAddress.data('area');
            var shipping = checkedAddress.data('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"
        $('.current-address input[name="address"]').on('change', function() {
            // Update area field when user changes the address selection
            updateAreaField();
        });
    // });

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

   function getSlots(){
      // addloader
      var area = $('.current-address input[name="address"]:checked').data('area');
      // 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;

      // if(dt!=undefined){

         jQuery.ajax({
            url: '{{route("getSlots")}}',
            method: 'get',
            data: {
               branch: branch,
               del_dt: dt,
            },
            dataType: 'JSON',
            success: function(res){
               jQuery('#deliveryTime ul').html(res.html);
               // removeLoader
            },
            error: function(err){
               console.log(err);
               // removeLoader
            }
         });
      // }
      
   }

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

   function checkPreparation(){
      var area = $('.current-address input[name="address"]:checked').data('area');
      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({
      minDate: -20, maxDate: "+1M +10D"
   });
</script>

@endpush