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

@push('asset-top')
@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('products')}}">
               <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>

                           </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-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}}" {{(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="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">
                                            <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')) }}">
                                            <label for="del-date-{{$i}}" class="radio-label">{{ date('l, d, M', strtotime('+' . ($i) . ' day')) }}</label>
                                        </div>
                                    </li>
                                @endfor
                                <li>
                                 <div class="radio time abhishek_dangi">
                                    <input type='text' class="form-control custom-field input_del_date" placeholder="Select 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 " 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="row">
                              <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}}" {{(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="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">
                                            <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')) }}">
                                            <label for="del-date-{{$i}}" class="radio-label">{{ date('l, d, M', strtotime('+' . ($i) . ' day')) }}</label>
                                        </div>
                                    </li>
                                @endfor
                                <li>
                                 <div class="radio time abhishek_dangi">
                                    <input type='text' class="form-control custom-field input_del_date" placeholder="Select 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 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}}" 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':'')}}>
                                       <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>
                        <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>
                        <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 ">

                                    <!-- <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 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');
            $('#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').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();
console.log(area);



// 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);



   }



});



}


$(".input_del_date").datepicker({
   minDate: -20, maxDate: "+1M +10D"
});
</script>

@endpush