@extends('layouts.customer')
@section('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.css" integrity="sha512-In/+MILhf6UMDJU4ZhDL0R0fEpsp4D3Le23m6+ujDWXwl3whwpucJG1PEmI3B07nyJx+875ccs+yX2CqQJUxUw==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" type="text/css" media="screen" />
@endsection
@php 
$full_address = ''; 
$user_address = 'Not added Yet!';
$user_country_id = null;
if(auth()->user()->address){
   $full_address = json_encode(auth()->user()->address);
   $user_address = auth()->user()->address->address.', '.(auth()->user()->address->country->name ?? "").', '.auth()->user()->address->postal_code;
   $user_country_id = auth()->user()->address->country_id;
}

$invoice_id =  Request::segment(3);
$amtResponseArr = getTotalCartAmount($invoice->id, $user_country_id);
$invoice_amount_before_shipping = $amtResponseArr['total_amount'];
$total_amount = $total_invoice_amount = $invoice->getInvoiceTotalWithoutAddon(); 
$total_open_box_amount = $customer->getCustomerOpenBoxesTotalAmount();
$total_with_open_box_amount = $total_invoice_amount+$total_open_box_amount;

$liveSaleDiscountRes = getLiveSaleDiscount($saleId, $total_amount);

$liveSaleDiscountedAmt = $liveSaleDiscountRes['discounted_amt'] ?? 0; 
$liveSaleDiscountTxt = ($liveSaleDiscountRes['discount_type'] == 1) ? $liveSaleDiscountRes['discount_val']."%" : "$".$liveSaleDiscountRes['discount_val']; 

$total_amt_for_shipping_charges = ($invoice_amount_before_shipping - $amtResponseArr['not_arrived_pre_odr_total_amt'])+$total_open_box_amount;

if($user_country_id != null && $user_country_id  > 0){
   $shipping_cost_val = $amtResponseArr['shipping_cost_val'];
   $shipping_cost_val_txt = "$".number_format($shipping_cost_val,2);
}elseif($total_with_open_box_amount < $shipping_threshold->value){
   if(!empty($shippingOptions)){
      $shipOutOption = $shippingOptions->where('id', 2)->first();
      $shipping_cost_val = (isset($shipOutOption) && $shipOutOption) ? $shipOutOption->price : $shipout_cost->value;
   }else{
      $shipping_cost_val = $shipout_cost->value;
   }
   $shipping_cost_val_txt = "$".number_format($shipping_cost_val,2);
}else{
   $shipping_cost_val = 0.00;
   $shipping_cost_val_txt = 'Free';
}

@endphp

@section('content')
<div class="middle__content">
   <div class="card rounded-0 border-0">
      <div class="card-header bg-transparent">
         <h4 class="mb-0">Checkout</h4>
      </div>

      <div class="sticky-cart-progress-bar d-none" id="progress-bar-sticky" @if(!$user_country_id > 0) style="display:none;" @endif>
         <p class="text-center remaining_spend_txt">Only {{ config('constants.item_price_currency_sign') }}<span class="gap-amount">0</span> away from free shipping</p>
      </div>

      <div class="card-body">
         <div class="order-progress mt-0" id="cart-progress-bar" style="display:none;" @if($user_country_id > 0) style="display:block;" @else style="display:none;" @endif >
            <div class="order-progress-inner position-relative">
                <h1>Free shipping for orders of {{ config('constants.item_price_currency_sign') }}<span id="end-point">0</span> and above<div class="CH"></div></h1>
                <p class="remaining_spend_txt">Only {{ config('constants.item_price_currency_sign') }}<span class="gap-amount">0</span> away from free shipping</p>
                <div class="trusk-progress mt-5">
                    <div class="progress-set">
                        <div class="truck">
                            <span class="progress-bar-checkout">
                                <span class="truck-img truck-left"><img class="img-fluid" src="{{ asset('front/image/truck.png') }}"></span>
                            </span>
                        </div>
                    </div>
                    <ul class="d-flex progress-txt list-unstyled justify-content-between rates">
                      
                    </ul>
                </div>
            </div>
         </div>         
         
         <div id="validationErrors" class="ml-4 mr-4"></div>
         <form id="checkoutOrder">
            <div class="statusbar">
               <div class="row">
                  <div class="col-12 col-md-4">
                     <div class="locationleft">
                        <span class="lnr lnr-map-marker pr-2"></span>
                        <span>Delivery address</span>
                     </div>
                  </div>
                  <div class="col-12 col-md-8">
                     <div class="locationright d-flex flex-wrap">
                        <span id="address_content">{{ $user_address }}</span>
                        <span><a href="javascript:void(0);" class="default" id="address_tag">Default</a></span>
                        <span>
                        @if(auth()->user()->address)
                        <a href="javascript:void(0);" class="change text-uppercase" onclick="getAllAddresses()">Change</a>
                        @else
                        <a href="javascript:void(0);" class="address-modal-open btn btnprimary rounded-10 btn-xs mb-4">Add Address</a>
                        @endif
                        </span>
                     </div>
                  </div>
               </div>
            </div>
            <div class="order-panel">
               <div class="order-header">
                  <h5 class="mb-0">Product Order</h5>
                  <a href="javascript:void(0);" class="btn btnprimary btn-xs f-weight-medium" id="addon_item_btn">Add-on Items</a>
               </div>
               
               @if($invoice->dataEntries->count() > 0)
                  @foreach($invoice->dataEntries()->whereNull('pre_order_id')->get() as $item)
                     <div class="order-body list-mobile-block mobile-change-des">
                        <ul class="list-unstyled mb-0 order-list d-flex flex-wrap">
                           <li class="text-center text-md-left">
                              <div class="list-img-title">
                                 <div class="list-img"></div>
                                 <span>{{ $item->crystal->type }}{{ $item->description?"[".$item->description."]":""}}</span>
                              </div>
                           </li>                           
                           <li class="text-center">
                              <span>${{ $item->price }} x {{ $item->quantity }}</span>
                           </li>
                           <li class="text-right">
                              <span>${{ number_format($item->total_amount,2) }}</span>
                           </li>
                           <li class="text-center text-md-right">
                              <span></span>
                           </li>
                        </ul>
                     </div>
                  @endforeach
                  
                  @if($invoice->dataEntries()->whereNotNull('pre_order_id')->count() > 0)
                     <div class="pre-orders-content">
                        <div class="pre-orders-header">
                           <h5 class="mb-0">Pre Orders</h5>
                           <p class="mb-0">(Pre order items shipping will be calculated upon arrival)</p>
                        </div>
                        @foreach($invoice->dataEntries()->whereNotNull('pre_order_id')->get() as $itemP)
                           <div class="order-body list-mobile-block mobile-change-des">
                              <ul class="list-unstyled mb-0 order-list d-flex flex-wrap">
                                 <li class="text-center text-md-left">
                                    <div class="list-img-title">
                                       <div class="list-img"></div>
                                       <span>{{ $itemP->crystal->type }}{{ $itemP->description?"[".$itemP->description."]":""}}</span>
                                    </div>
                                 </li>                           
                                 <li class="text-center">
                                    <span>${{ $itemP->price }} x {{ $itemP->quantity }}</span>
                                 </li>
                                 <li class="text-right">
                                    <span>${{ number_format($itemP->total_amount,2) }}</span>
                                 </li>
                                 <li class="text-center text-md-right">
                                    <span></span>
                                 </li>
                              </ul>
                           </div>
                        @endforeach
                     </div>
                  @endif

                  <div class="cart-addon-items-content">
                  </div>
               @endif

               <div class="subtotal-bar d-none-discount text-right"><span class="order-t">Order Total (<span class="order_total_items">{{ $invoice->dataEntries->count() }}</span> items) :</span> <span class="invoice_total_amount invoice_total_amount_before_shipping">${{ number_format($total_amount,2) }}</span></div>
               <div class="order-footer">
                  <div class="row">
                     <div class="col-12 col-md-7">
                        <div class="message-bar d-flex py-3">
                           <label class="mr-3">Message</label>
                           <textarea name="message_to_seller" placeholder="(optional) leave a message..."></textarea>
                        </div>
                     </div>
                  </div>
                  <div class="shipping-option">
                     <div class="row">
                        <div class="col-12 col-lg-8">
                           <div class="row">
                              <div class="col-12 col-sm-5 mb-3 mb-md-0">
                                 <h6 class="font-weight-normal mb-0 textprimary-dark">Shipping option</h6>
                              </div>
                              <div class="col-12 col-sm-7 mb-3 mb-md-0">
                                 <p class="text-secondary mb-0 shipping_option_txt" style="line-height: 1;">{{ $def_shipping_option_txt }}</p>
                                 <span id="delivery_estimate_time" style="display: none;">
                                 <small style="font-size: 12px;">Receive by: {{ now()->addDays($shipout_duration)->format('d M') }} - {{ now()->addDays($shipout_duration+$shipout_duration)->format('d M') }}
                                 </small>
                                 </span>
                                 <span id="self_collect_date_box" style="display: none;">
                                 </span>
                              </div>
                           </div>
                        </div>
                        <div class="col-12 col-lg-4">
                           <div class="row">
                              <div class="col-12 col-sm-5 mb-3 mb-md-0">
                                 <p class="mb-0"><a href="#" class="btn btnprimary btn-xs text-uppercase f-weight-medium" data-toggle="modal" data-target="#shippedoption">Select</a></p>
                              </div>
                              <div class="col-12 col-sm-6 text-lg-right">
                                 <span class="text-secondary shipping_cost">$0.00</span>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="discount-bar pt-4">
                     <div class="row align-items-center">
                        <div class="col-12 col-lg-8 mb-3 text-center text-lg-left">
                           <div class="discount-area d-sm-flex flex-wrap align-items-center justify-content-center">
                              <span class="getdiscount">Get Discount</span>
                              <div class="discount-code d-sm-flex flex-wrap">
                                 <input type="text" name="discount_code" class="form-control input-sm" id="discount_code" placeholder="Enter discount code" autocomplete="off">
                                 <button type="button" class="btn btnprimary btn-xs text-uppercase" id="discount_code_apply" onclick="verifyDiscountCode();">Apply</button>
                              </div>
                              <div class="subtotal-bar d-none-desk-discount text-right"><span class="order-t">Order Total (<span class="order_total_items">{{ $invoice->dataEntries->count() }}</span> items) :</span> <span class="invoice_total_amount total_amount_after_shipping_txt">${{ number_format($total_amount,2) }}</span></div>
                              <div id="discount_respose_msg" class="ml-2"></div>
                           </div>
                        </div>
                        <div class="col-12 col-lg-4 text-center text-lg-right mb-3">
                           <div class="discount-total">
                              <p class="mb-0">Order Total (<span class="order_total_items">{{ $invoice->dataEntries->count() }}</span> items) :  
                                 <span class="textprimary-dark f-weight-medium last-span_discount-total total_amount_after_shipping_txt" id="total_amount_after_shipping_txt">${{ number_format($total_amount,2) }}</span>
                                 <input type="hidden" name="total_amount_invoice" id="total_amount_before_shipping" value="{{ $total_amount }}">
                              </p>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="order-panel">
               <div class="order-header">
                  <h5 class="mb-0">Payment Method</h5>
               </div>
               <div class="order-body">
                  <div class="Payment-Method">
                     @if($payment_methods)
                     @foreach($payment_methods as $key=>$payment_method)
                     @php 
                     if($payment_method->qr_image && Storage::disk('public')->exists('payment-method/'.$payment_method->qr_image)){
                     $image = asset('storage/payment-method/'.$payment_method->qr_image);
                     }else{
                     $image = asset('front/image/no-qr-image.jpg');
                     }  
                     @endphp
                     <div class="payment-title py-2">
                        <label class="radio-container text-uppercase textprimary-dark payment_method" data-payment_method_id="{{ $payment_method->id}}">{{ $payment_method->name }}
                        <input type="radio" id="payment_method_{{ $payment_method->id}}" name="payment_method" {{ ($key==0)?'checked':''}} value="{{ $payment_method->id}}">
                        <span class="radio-checkmark"></span>
                        </label>
                     </div>
                     <div class="Payment-inner pb-4 payment_method_inner" id="payment_method_inner_{{ $payment_method->id}}" style="display:{{ ($key==0)?'block':'none'}}">
                        <div class="payment-detail">
                           <div class="QrCode mb-5">
                              @if($image!='')
                              <a href="{{ $image }}" download>
                              <span class="lnr lnr-download"></span>
                              Download or screenshot QR Code
                              </a>
                              @endif
                           </div>
                           <div class="row">
                              <div class="col-12 col-md-5 mb-5 mb-md-0">
                                 <div class="Qrscan-image text-center text-md-left">
                                    @if($image!='')
                                    <img src="{{ $image }}" alt="" class="img-fluid" />
                                    @endif
                                 </div>
                              </div>
                              <div class="col-12 col-md-7">
                                 <div class="Qrscan-content">
                                    <p>{!! $payment_method->bank_details !!}</p>
                                    {{--<b class="text-dark">Attach Payment Proof *</b>
                                    <div class="dropzone-area">
                                       <input type="file" name="payment_screenshot_{{ $payment_method->id }}" accept="image/jpeg,image/png,image/jpg" data-height="150px" class="dropify" data-max-file-size="3M" data-allowed-file-extensions="jpeg png jpg" {{ ($key==0)?"required":"" }}>
                                    </div>
                                    --}}
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                     @endforeach
                     @endif	
                     <div class="payment-title py-2" id="paypal_box">
                        <label class="radio-container text-uppercase textprimary-dark payment_method" data-payment_method_id="0">Pay Via Paypal
                           <input type="radio" id="payment_method_0" name="payment_method" value="paypal">
                           <span class="radio-checkmark"></span>
                           <!-- Set up a container element for the button -->
                           <div id="paypal-button-container"></div>
                        </label>
                     </div>
                  </div>
                  <div class="payment-subtotal">
                     <div class="payment-subtotal-inner">
                        <div class="row">
                           <div class="col-12 col-md-7 ml-auto">
                              <ul class="list-unstyled mb-0 payment-subtotallist">
                                 <li>
                                    <span>Merchandise Subtotal : </span>
                                    <span id="invoice_total">${{ number_format($total_amount,2) }}</span>
                                 </li>
                                 <li>
                                    <span>Addon Items Total : </span>
                                    <span id="addon_items_total">$0.00</span>
                                 </li>
                                 <li class="live_sale_discount_apply">
                                    <span>{{ trans('frontend.live_discount') }} ({{ $liveSaleDiscountTxt ?? '' }}) :</span>
                                    <span id="sale_discount_on_price">-${{ number_format($liveSaleDiscountedAmt,2) }}</span>
                                 </li>
                                 <li class="discount_apply">
                                    <span>{{ trans('frontend.discount_voucher') }} :</span>
                                    <span id="discount_on_price">$0.00</span>
                                 </li>
                                 <li>
                                    <span>Shipping Total : </span>
                                    <span class="shipping_cost">$0.00</span>
                                 </li>
                                 <li>
                                    <span>Total Payment :</span>
                                    <span class="subamout" id="grand_total_amount_txt">${{ number_format($total_amount,2) }}</span>
                                 </li>
                              </ul>
                           </div>
                        </div>
                     </div>
                     <div class="text-right pb-3 place_order_block">   
                        <input type="hidden" value="0.00" name="discounted_amount" id="discounted_amount">
                        <input type="hidden" value="" name="discount_code_id" id="discount_code_id">
                        <input type="hidden" value="{{ $invoice_amount_before_shipping }}" name="invoice_total_amount_before_shipping" id="invoice_total_amount_before_shipping">

                        <input type="hidden" value="{{ $total_with_open_box_amount }}" name="invoice_total_amount_with_open_box" id="invoice_total_amount_with_open_box">
                        <input type="hidden" value="{{ $total_amt_for_shipping_charges }}" name="invoice_total_amount_with_open_box_not_change" id="invoice_total_amount_with_open_box_not_change">
                        <input type="hidden" value="{{ $total_amt_for_shipping_charges }}" name="total_amt_for_shipping_charges" id="total_amt_for_shipping_charges">

                        <input type="hidden" name="shipping_amount" value="0.00" id="shipping_amount">
                        <input type="hidden" name="grand_total_amount" value="{{ $total_amount }}" id="grand_total_amount">
                        <input type="hidden" name="live_sale_discount" value="{{ $liveSaleDiscountedAmt }}" id="live_sale_discount">
                        <input type="hidden" name="live_sale_discount_details" value="{{ json_encode($liveSaleDiscountRes) }}" id="live_sale_discount_details">
                        <input type="hidden" value="{{ $total_amount }}" id="total_amount_after_shipping">
                        <input type="hidden" name="selected_shipping_option" value="{{ $def_shipping_option }}" id="selected_shipping_option" required>

                        <input type="hidden" name="selected_self_collect_date" value="{{ date('Y-m-d') }}" id="selected_self_collect_date">
                        <input type="hidden" name="selected_self_collect_slot_id" value="" id="selected_self_collect_slot_id">
                        <input type="hidden" name="selected_self_collect_start_time" value="" id="selected_self_collect_start_time">
                        <input type="hidden" name="selected_self_collect_end_time" value="" id="selected_self_collect_end_time">
                        <input type="hidden" value="{{ auth()->user()->address_id }}" name="address_id" id="selected_address_id">
                        <input type="hidden" value="{{ $full_address }}" name="address_content" id="selected_address_content">
                        <input type="hidden" value="{{ $user_country_id }}" name="selected_country_id" id="selected_country_id">
                        <input type="submit" id="submit_btn" class="btn btnprimary rounded-10 btn-sm" value="Payment Made" />
                     </div>
                  </div>
               </div>
            </div>
         </form>
         <!-- progress sec-->
         
      </div>
   </div>
</div>
<!-- Address Modal -->
<div class="modal fade" id="address">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-header border-0">
            <h5 class="modal-title text-primary">Set Address</h5>
            <button type="button" class="close p-0" data-dismiss="modal">
            <span class="lnr lnr-cross"></span>
            </button>
         </div>
         <div class="modal-body">
            <div class="row align-items-center address_content">
            </div>
         </div>
      </div>
   </div>
</div>
<!-- Addon-Item Modal--> 
<div class="modal fade" id="addon-item">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-header border-0">
            <h5 class="modal-title text-primary">Add-on Items</h5>
            <button type="button" class="close p-0" data-dismiss="modal">
            <span class="lnr lnr-cross"></span>
            </button>
         </div>
         <div class="modal-body addon_items_content">
         </div>
      </div>
   </div>
</div>
<!-- Add address Modal -->
<div class="modal fade" id="addNewAddressModal">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-header border-0">
            <h5 class="modal-title text-primary">Add New Address</h5>
            <button type="button" class="close p-0" data-dismiss="modal">
            <span class="lnr lnr-cross"></span>
            </button>
         </div>
         <div id="address-addform"></div>
      </div>
   </div>
</div>
<!-- Shipping Modal -->
<div class="modal fade" id="shippedoption">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-header border-0">
            <h5 class="modal-title text-primary">Select Shipping Option</h5>
            <button type="button" class="close p-0" data-dismiss="modal">
            <span class="lnr lnr-cross"></span>
            </button>
         </div>         
         <div class="modal-body">
            <div class="address-panel flex-wrap">
               <ul class="list-unstyled mb-0 shipping-price">
                  @if(!empty($shippingOptions) && $shippingOptions->count() > 0)                  
                     @foreach($shippingOptions as $key => $option)      
                        @php
                           $optionPrice = $option->price;
                           if($option->id == 2){
                              $optionPrice = $shipping_cost_val;
                           }
                        @endphp
                        <li>
                           <div class="shipping-price-item float-left">
                              <label class="radio-container shipping_option_lbl">{{ $option->title ?? "" }}
                                 <input type="radio" name="shipping_option" value="{{ $option->id }}">
                                 <input type="hidden" name="shipping_cost" value="{{ $optionPrice ?? 0.00 }}">
                                 <input type="hidden" name="shipping_option_txt" value="{{ $option->title ?? '' }}">
                                 <span class="radio-checkmark"></span>
                                 <span class="shipping_option_help" data-toggle="tooltip" data-placement="bottom" title="{{ $option->description ?? '' }}">
                                    <i class="fa fa-info"></i>
                                 </span>
                              </label>
                           </div>
                           <div class="shipprice float-right">${{ $optionPrice ?? 0.00 }}</div>
                        </li>                              
                     @endforeach
                  @endif
                  <!-- old static shipping options -->
                  {{-- <li>
                        <div class="shipping-price-item float-left">
                           <label class="radio-container shipping_option_lbl">{{ config('constants.open_box_text') }}
                           <input type="radio" name="shipping_option" value="{{ $open_box }}">
                           <input type="hidden" name="shipping_cost" value="0.00">
                           <input type="hidden" name="shipping_option_txt" value="Open Box">
                           <span class="radio-checkmark"></span>
                           <span class="shipping_option_help" data-toggle="tooltip" data-placement="bottom" title="{{ config('constants.open_box_tooltip') }}">
                           <i class="fa fa-info"></i>
                           </span>
                           </label>
                        </div>
                        <div class="shipprice float-right">${{ $open_box_cost }}</div>
                     </li>
                     <li>
                        <div class="shipping-price-item float-left">
                           <label class="radio-container shipping_option_lbl">{{ config('constants.ship_out_text') }}
                           <input type="radio" name="shipping_option" value="{{ $ship_out }}">
                           <input type="hidden" id="shipping_cost_val" name="shipping_cost" value="{{ number_format($shipping_cost_val,2) }}">
                           <input type="hidden" name="shipping_option_txt" value="Ship Out">
                           <span class="radio-checkmark"></span>
                           <span class="shipping_option_help" data-toggle="tooltip" data-placement="bottom" title="{{ config('constants.ship_out_tooltip') }}">
                           <i class="fa fa-info"></i>
                           </span>
                           </label>
                        </div>
                        <div class="shipprice float-right" id="shipping_cost_txt">{{ $shipping_cost_val_txt }}</div>
                     </li>
                     <li>
                        <div class="shipping-price-item float-left">
                           <label class="radio-container shipping_option_lbl"  id="collection">{{ config('constants.self_collect_text') }}
                           <input type="radio" name="shipping_option" value="{{ $self_collect }}">
                           <input type="hidden" name="shipping_cost" value="0.00">
                           <input type="hidden" name="shipping_option_txt" value="Self Collect">
                           <span class="radio-checkmark"></span>
                           <span class="shipping_option_help" data-toggle="tooltip" data-placement="bottom" title="{{ config('constants.self_collection_tooltip') }}">
                           <i class="fa fa-info"></i>
                           </span>
                           </label>
                        </div>
                        <div class="shipprice float-right">${{ $self_collect_cost }}</div>
                     </li> --}}
               </ul>
               <div class="silotarea" style="display: none;">
                  <h5>Self collection slot</h5>
                  <div class="silotarea-datepicker self_collection_dates">
                  </div>
                  <div class="timesilotarea" style="display: none;">
                     <div class="timesilotarea-inner self_collection_time_slots">
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="modal-footer border-0 justify-content-center">
            <div class="save_changes_btn">
               <button type="button" class="btn btnprimary" data-dismiss="modal">Save Changes</button>
            </div>
         </div>
      </div>
   </div>
</div>
<!-- success Order Modal -->
<div class="modal fade" id="successOrder">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-body p-5">
            <div class="row align-items-center justify-content-center">
               <div class="col-12 text-center">
                  <i class="lnr lnr-checkmark-circle checkicon"></i>
                  <h3 class="">Order Completed Successfully!</h3>
                  <p class="">{!! trans('frontend.checkout_success_message') !!}</p>
                  <div class="">
                     <a href="{{ route('customer.my-purchase.index') }}" class="btn btnprimary save_changes_btn btn-sm "><i class="lnr lnr-arrow-left pr-1"></i> Back to Store</a>
                     {{--<a href="{{ route('customer.my-purchase.index') }}" class="ml-2 btn btnprimary save_changes_btn btn-sm"><i class="lnr lnr-cart pr-1"></i>View Order</a>--}}
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
@endsection
@section('scripts')
<!-- Include the PayPal JavaScript SDK -->
<script src="https://www.paypal.com/sdk/js?client-id={{ $clientId }}&disable-funding=paylater&currency=SGD" async></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.js" integrity="sha512-hJsxoiLoVRkwHNvA5alz/GVA+eWtVxdQ48iy4sFRQLpDrBPn6BFZeUcW4R4kU+Rj2ljM9wHwekwVtsb0RY/46Q==" crossorigin="anonymous"></script>
<script src="{{ asset('js/sweet-alert/sweetalert.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

<script type="text/javascript">
   function renderButtons(){
        // Render the PayPal button into #paypal-button-container
        paypal.Buttons({
            style: {
                color: 'blue',
                shape:  'pill',
                label:  'pay',
                height: 50
            },
            // Call your server to set up the transaction
            createOrder: function(data, actions) {
               let token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
               let formdata = {};
               $("#checkoutOrder").serializeArray().map(function(x){formdata[x.name] = x.value; });
               formdata['invoice_id'] = "{{ $invoice_id }}";
               return fetch("{{ route('paypal.create') }}", {
                  method: 'post',
                  headers: {
                     'content-type': 'application/json',
                     "Accept": "application/json, text-plain, */*",
                     "X-Requested-With": "XMLHttpRequest",
                     "X-CSRF-TOKEN": token
                  }, 
                  body: JSON.stringify(formdata), 
               })
               .then((response) => 
                    response.json()
               ) //or response.json()
               .then((result) => { 
                  if(typeof result.id != 'undefined'){
                     return result.id;
                  }else{
                     if(typeof result.errors != 'undefined'){
                        const wrapper = document.createElement('div');
                        var html = '<ul class="list-unstyled text-danger">';
                        var count = 1;
                        $.each(result.errors, function (key, item) {
                            html += "<li>"+count+". "+item+"</li>";
                            count++;
                        });
                        html += '</ul>';
                        wrapper.innerHTML = html;
                        swal({
                           title: "Error Occured",
                           content: wrapper,
                           icon: "error",
                           showCancelButton : false,
                           button: true,
                           dangerMode: true,
                        });
                     }                     
                     return false;
                  }
               }).catch(function() {
                  console.log("error");
               });                
            },
            // Call your server to finalize the transaction
            onApprove: function(data, actions) {
                let token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                let formdata = {};
                $("#checkoutOrder").serializeArray().map(function(x){formdata[x.name] = x.value; });
                formdata['invoice_id'] = "{{ $invoice_id }}";
                formdata['orderId'] = data.orderID;
                $('#pageloader').css('display', 'flex');
                return fetch("{{ route('paypal.capture') }}", {
                    method: 'post',
                    headers: {
                      'content-type': 'application/json',
                      "Accept": "application/json, text-plain, */*",
                      "X-Requested-With": "XMLHttpRequest",
                      "X-CSRF-TOKEN": token
                    }, 
                    body: JSON.stringify(formdata),  
                })
                // .then(status) 
                .then((response) => 
                    response.json()
                ) .then(function(orderData) {
                     // console.log(orderData);
                     $('#pageloader').css('display', 'none');
                     if(typeof orderData.success != undefined && orderData.success == false){
                        swal({
                           title: "Error Occured",
                           text: orderData.message,
                           icon: "error",
                           buttons:  ["Ok"],
                           dangerMode: true,
                        });
                        window.location.href = "{{ route('customer.payment-failed',$invoice_id) }}";
                        return true;
                     }
                    // Three cases to handle:
                    //   (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
                    //   (2) Other non-recoverable errors -> Show a failure message
                    //   (3) Successful transaction -> Show confirmation or thank you

                    // This example reads a v2/checkout/orders capture response, propagated from the server
                    // You could use a different API or structure for your 'orderData'
                    var errorDetail = Array.isArray(orderData.details) && orderData.details[0];

                    if (errorDetail && errorDetail.issue === 'INSTRUMENT_DECLINED') {
                        return actions.restart(); // Recoverable state, per:
                        // https://developer.paypal.com/docs/checkout/integration-features/funding-failure/
                    }

                    if (errorDetail) {
                        var msg = 'Sorry, your transaction could not be processed.';
                        if (errorDetail.description) msg += '\n\n' + errorDetail.description;
                        if (orderData.debug_id) msg += ' (' + orderData.debug_id + ')';
                        swal({
                           title: "Error Occured",
                           text: msg,
                           icon: "error",
                           buttons:  ["Ok"],
                           dangerMode: true,
                        });
                        window.location.href = "{{ route('customer.payment-failed',$invoice_id) }}";
                        // return alert(msg); // Show a failure message (try to avoid alerts in production environments)
                    }

                    // Successful capture! For demo purposes:
                    // console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
                    // console.log(orderData.order_id);
                    if(typeof orderData.status != undefined && orderData.status == 'COMPLETED'){
                        $('#pageloader').css('display','none');
                        $('.middle__content').css('filter','blur(2px)'); 
                        $('#successOrder').modal('show');
                    }
                    // Replace the above to show a success message within this page, e.g.
                    // const element = document.getElementById('paypal-button-container');
                    // element.innerHTML = '';
                    // element.innerHTML = '<h3>Thank you for your payment!</h3>';
                    // Or go to another URL:  actions.redirect('thank_you.html');
                })
                .catch(function(error) {
                    // redirect to failed page if internal error occurs
                    $('#pageloader').css('display', 'none');
                    swal({
                        title: "Error Occured",
                        text: "Something went wrong....please try again!",
                        icon: "error",
                        buttons:  ["Ok"],
                        dangerMode: true,
                     });
                    window.location.href = "{{ route('customer.payment-failed',$invoice_id) }}";
                });
            },
            onCancel: function (data) {
                $('#pageloader').css('display', 'none');
                // window.location.href = "{{ route('customer.payment-failed',$invoice_id) }}";
            }

        }).render('#paypal-button-container');
    }

    function status(res) {
      if (!res.ok) {
          throw new Error(res.statusText);
      }
      return res;
    }     
</script>
<script type="text/javascript">

$(document).ready(function(){
   @if(session('paypal_payment_success'))
        $('.middle__content').css('filter','blur(2px)');
        $('#successOrder').modal('show');
   @endif
       

   	$(".fancybox").attr("rel","gallery").fancybox();
   

      $(document).on('click','#addon_item_btn',function(){
           getAllAddonItems();
      });
      
      // $('#cart-progress-bar').hide();
      getInvoiceTotal();
    //   getShippingRange();

   
      $(document).on('click','.add-addon-item',function(){
       	addAdditionalItemsToCart($(this).data('addon_item_id'),$(this).data('addon_quantity'));	        
      });

      $(document).on('click','.remove_from_cart_btn',function(){
       	removeAdditionalItemFromCart($(this).data('addon_item_id'));	        
      });
   
      getAllCartAddonItems({{ $invoice_id }});
   
      $(document).on('click','.increase', function() {    
   	    // Define field variable
   	    field = "input[name=" + $(this).attr("field") + "]";   
   	    // Get its current value
   	    var currentVal = parseInt($(field).val());    
   	    // If is not undefined
   	    if ( !isNaN(currentVal)) {
   	        // Increment
   	        var newVal = currentVal + 1;
   	        $(field).val(newVal);
   	        $(this).parents('.addon-product-block').find('.btn-add').find('.add-addon-item').attr("data-addon_quantity", newVal);
   	    }		    
   	});
   
   	// This button will decrement the value till 0
   	$(document).on('click','.decrease', function(e) {
   		e.preventDefault();		    
   	    // Define field variable
   	    field = "input[name=" + $(this).attr("field") + "]"; 		    
   	    // Get its current value
   	    var currentVal = parseInt($(field).val());
   	    
   	    // If it isn't undefined or its greater than 0
   	    if ( !isNaN(currentVal) && currentVal > 0 ) {
   	        // Decrement one
   	        var newVal = currentVal - 1;
   	        $(field).val(newVal);
   	        $(this).parents('.addon-product-block').find('.btn-add').find('.add-addon-item').attr("data-addon_quantity", newVal);
   	    }else{
   	    	var newVal = 1;
   	        $(field).val(newVal);
   	        $(this).parents('.addon-product-block').find('.btn-add').find('.add-addon-item').attr("data-addon_quantity", newVal);
   	    }
   	    
   	});
       
   	$('#discount_code_apply').prop('disabled',true);
   
   	$('.dropify').dropify({
           messages: {
               'default': 'Drag & Drop here <br> or <br> <a href="#" class="btn btnprimary rounded-10 btn-xs">Browse File</a>',
               'replace': 'Click or drag and drop to replace',
               'remove':  'Remove',
               'error':   'Error. The file is either not square, larger than 2 MB or not an acceptable file type'
           }
      });
   
      /*
      $('#collection').click(function(){
       	$(".silotarea").show();
      });
      */

         $('.self_collection_dates').on('click','.silot-date',function(){
            $('.self_collection_dates').find('.silot-date').removeClass('active');
            $(this).addClass('active');
            var sel_date = $(this).attr('data-sel_date');
            $('#selected_self_collect_date').val(sel_date);
            getSelfCollectionTimeSlot(sel_date);
            
         });
      	
         $(document).on('click','.timesilotarea-block-parent',function(){
            const slotId =  $(this).find('input').val();
            if(slotId){
               $('.self_collection_time_slots').find('.timesilotarea-block-parent').find('.timesilotarea-block').removeClass('active');
               $(this).find('.timesilotarea-block').addClass('active');
               var start_time = $(this).find('.timesilotarea-block').data('start_time');
               var end_time = $(this).find('.timesilotarea-block').data('end_time');
               var sel_date = $(this).find('.timesilotarea-block').data('date');
      
               $('#self_collect_date_box').html('<small style="font-size: 12px;">'+sel_date+'('+start_time+' - '+end_time+')</small>');
               $('#self_collect_date_box').show();
      
               var sel_slot_id 	= slotId;
               
               $('#selected_self_collect_slot_id').val(sel_slot_id);
            }
       	
         });
   
      	$('#shippedoption').on('click','.shipping_option_lbl',function(){
      		if ($(this).find("input[name=shipping_option]").is(":checked")) {
      			var selected_shipping_option = $(this).find("input[name=shipping_option]").val();
      			var selected_shipping_option_txt = $(this).find("input[name=shipping_option_txt]").val();
      			var selected_shipping_cost = parseFloat($(this).find("input[name=shipping_cost]").val());
      			$('#shipping_amount').val(selected_shipping_cost);
      			$('#selected_shipping_option').val(selected_shipping_option);
      			$('.shipping_option_txt').html(selected_shipping_option_txt);
      			amountCalculation();
               
      			if(selected_shipping_option == {{ $ship_out }})
      			{
                  $('#delivery_estimate_time').show();
      			}else{
                  $('#delivery_estimate_time').hide();
      			}
      			// $('#cart-progress-bar').show();

      			if(selected_shipping_option == {{ $self_collect }}){
      				$('#selected_self_collect_date').prop('required',true);
      				$('#selected_self_collect_slot').prop('required',true);
      				$('#selected_self_collect_slot_id').prop('required',true);
      				getSelfCollectionData();
      				$(".silotarea").show();
      			}else{
      				$('#selected_self_collect_date').prop('required',false);
      				$('#selected_self_collect_slot').prop('required',false);
      				$('#selected_self_collect_slot_id').prop('required',false);
      				$('.silotarea').hide();
      				$('#self_collect_date_box').hide();
      			}
      			if(selected_shipping_option == {{ $ship_out }}){
      				checkOpenBoxInvoices();
      			}
      		}
      	});
   
         $('#discount_code').on('change keyup',function(){
          	if($(this).val().length >= 3){
          		$('#discount_code_apply').prop('disabled',false);
          	}else{
          		$('#discount_code_apply').prop('disabled',true);
          	}
         });
   
         $('#address').on('click','.change_delivery_address',function(){
          	var address_id 	= $(this).data('address_id');
          	$('#selected_address_id').val(address_id);
          	var address 	= $(this).data('address_content');
          	var full_address 	= $(this).find('#sel_full_address').val();
            var selected_country_id 	= $(this).data('address_country_id');

          	$('#selected_address_content').val(full_address);
          	$('#selected_country_id').val(selected_country_id);

          	$('#address_content').html(address);
          	$('#address_tag').html($(this).data('address_tag'));
          	$('#address').modal('toggle');
             
            /*if(selected_country_id > 0 && $('#selected_shipping_option').val() == {{ $ship_out }}){
               $('#cart-progress-bar').show();
            }else{
               $('#cart-progress-bar').hide();
            }*/
            // $('#cart-progress-bar').show();
            getInvoiceTotal(); 
            getShippingRange();
         });
          
         $('.payment_method').on('click',function(){
          	$('.dropify').val(null);
          	$('input[type=file]').prop('required',false);
          	var payment_method_id =  $(this).data('payment_method_id');
          	var thisElem = $('#payment_method_'+payment_method_id);
          	var thisElemInner = $('#payment_method_inner_'+payment_method_id);
          	if (thisElem.is(":checked")) {
          		$('.payment_method_inner').hide();	
       		   	thisElemInner.show();
       		   	thisElem.find('.dropzone-area').find('input[type=file]').prop('required',true);
       		   	if(payment_method_id == 0){
                     $('#paypal-button-container').html('');
                     renderButtons();
       		   	   // $('#submit_btn').val('Proceed to PayPal');
                     $('#submit_btn').hide();
       		   	}else{
                     $('#paypal-button-container').html('');
       		   	   $('#submit_btn').val('Payment Made');
                     $('#submit_btn').show();
       		   	}
   		   }
         });
   
          $('#checkoutOrder').on('submit',function(e){
          	e.preventDefault();
          	$('#pageloader').css('display','flex');
          	$('#submit_btn').attr('disabled',true);
          	var formData = new FormData(this);          	 
   	   	   $.ajax({
      		        headers: {
      			        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      			    },
      		        type: "POST",
      		        dataType: 'json',
      		        url: "{{ route('customer.placeOrder',$invoice_id) }}",
      		        data: formData,
      		        cache: false,
      		        contentType: false,
                      processData: false,
      		        success: function(data){
      		        	if(data.success){
      		        	    if(data.url != null){
      		        	        // window.location.href = data.url; 
      		        	    }else{
      		        	        $('#pageloader').css('display','none');
      		        	        $('.middle__content').css('filter','blur(2px)'); 
          			    		$('#successOrder').modal('show');
      		        	    }
      		        	}else{
      						$('#pageloader').css('display','none');
      						$('#submit_btn').attr('disabled',false);
      		        		swal({
      							title: "Error Occured",
      							text: data.message,
      							icon: "error",
      							buttons:  ["Ok"],
      							dangerMode: true,
      						});
      		        	}
      		        },
      		         error:function (response){
      		        	$('#pageloader').css('display','none');
      		        	$('#submit_btn').attr('disabled',false);
      		        	/*
      		            $("#validationErrors").html('<ul class="list-unstyled alert alert-danger"></ul>');
      		            $.each(response.responseJSON.errors, function (key, item) {
      		                $("#validationErrors ul").append("<li>"+item+"</li>")
      		            });*/
      		            const wrapper = document.createElement('div');
         		        	var html = '<ul class="list-unstyled text-danger">';
         		        	var count = 1;
      		            $.each(response.responseJSON.errors, function (key, item) {
      		                html += "<li>"+count+". "+item+"</li>";
      		                count++;
      		            });
      		            html += '</ul>';
      		        	   wrapper.innerHTML = html;
      		            swal({
         						title: "Error Occured",
         						content: wrapper,
         						icon: "error",
         						showCancelButton : false,
         						button: true,
         						dangerMode: true,
      					   });
      		         }
      		   });   	   	
          });
   
         $(document).on('click','.address-modal-open',function(){
   		   $.ajax({
   			url: "{{ route('customer.addresses.create') }}",
                  type: "get",
                  headers: {
                   'Cache-Control': 'no-cache, no-store, must-revalidate', 
                   'Pragma': 'no-cache', 
                   'Expires': '0'
                  },
                  success: function (response) {
                      $('#addNewAddressModal').find("#address-addform").html(response);
                  	$('#addNewAddressModal').modal('show');
                  },
   		   });
   	   });
   
         $('.shipping_option_help').tooltip({
            animation: true,
         });

   }); 
   


   function checkOpenBoxInvoices(){
      var selected_country_id = $('#selected_country_id').val();

      $.ajax({
          type: "POST",
          dataType: 'json',
          url: "{{ route('customer.checkOpenBoxInvoices')}}",
          data: {
              _token : '{{ csrf_token()}}',
              invoice_id : "{{ $invoice_id }}",
              country_id : selected_country_id,
          },
          success: function(data){
          	if(data.success==true){
          		$('#shipping_cost_val').val(data.shipping_cost);
          		$('#shipping_amount').val(data.shipping_cost);
          		$('#shipping_cost_txt').html(data.shipping_cost_txt);
          		amountCalculation();
               getShippingRange();
              }
          }
      });
   }
   
   function amountCalculation(){
      var selected_shipping_cost = parseFloat($('#shipping_amount').val());
      var total_amount_before_shipping = parseFloat($('#total_amount_before_shipping').val());
      var discounted_amount = parseFloat($('#discounted_amount').val());
      var live_sale_discount = parseFloat($('#live_sale_discount').val());
      
      var total_amount_after_shipping = total_amount_before_shipping+selected_shipping_cost;
      var grand_total_amount = total_amount_after_shipping-discounted_amount-live_sale_discount;
      if(grand_total_amount <= 0){
         grand_total_amount = 0.00;
         $('#paypal_box').hide();
      }else{
         $('#paypal_box').show();
      }
      
      var invoice_total_amount_with_open_box = parseFloat($('#invoice_total_amount_with_open_box').val());
      $('#invoice_total_amount_with_open_box').val(invoice_total_amount_with_open_box.toFixed(2));
      //$('#invoice_total_amount_before_shipping').val(total_amount_before_shipping.toFixed(2));
      $('.invoice_total_amount_before_shipping').html('$'+total_amount_before_shipping.toFixed(2));
      $('#grand_total_amount').val(grand_total_amount.toFixed(2));
      $('#grand_total_amount_txt').html('$'+grand_total_amount.toFixed(2));
      $('.shipping_cost').html('+$'+selected_shipping_cost.toFixed(2));
      $('.total_amount_after_shipping_txt').html('$'+grand_total_amount.toFixed(2));
      $('#total_amount_after_shipping').val(total_amount_after_shipping.toFixed(2));
      $('#discount_on_price').html('-$'+discounted_amount.toFixed(2));
   }
   
   function getInvoiceTotal(){
       $('#pageloader').css('display','flex');
      var invoice_id = '{{ $invoice_id }}';
      var selected_country_id = $('#selected_country_id').val();

      $.ajax({
          type: "POST",
          url: "{{ route('customer.getInvoiceTotal')}}",
          async: false, 
          data: {
            _token : "{{ csrf_token()}}",
          	invoice_id : invoice_id,
            country_id : selected_country_id,
          },
          success: function(response){
            var invoice_total_amount_with_open_box = parseFloat($('#invoice_total_amount_with_open_box_not_change').val());
            // var total_amount_with_addon = (invoice_total_amount_with_open_box) + parseFloat(response.data.total_addon_amount.toFixed(2));
            var total_amount_with_addon = invoice_total_amount_with_open_box;

            var total_amt_for_shipping_charges = parseFloat($('#total_amt_for_shipping_charges').val());

            $('#invoice_total_amount_with_open_box').val(total_amount_with_addon.toFixed(2));

          	$('.order_total_items').html(response.data.total_items_in_cart);
          	$('#total_amount_before_shipping').val(response.data.total_amount);
          	$('#invoice_total').html('$'+response.data.total_invoice_amount);
          	$('#addon_items_total').html('$'+response.data.total_addon_amount.toFixed(2));
          	$('#shipping_cost_val').val(response.data.shipping_cost_val);
          	$('#shipping_cost_txt').html(response.data.shipping_cost_val_txt);
            console.log($('#selected_shipping_option').val());
          	if($('#selected_shipping_option').val() == {{ $ship_out }}){
               console.log('hello');
               $('#shipping_amount').val(response.data.shipping_cost_val);
          	}
            amountCalculation();
            getShippingRange();
          },
          complete: function(){
              $('#pageloader').css('display','none');
          }
      });
   }

   Array.prototype.max = function() {
      return Math.max.apply(null, this);
   };

   Array.prototype.min = function() {
      return Math.min.apply(null, this);
   };

   function getShippingRange(){
       $('#pageloader').css('display','flex');
      var country_id = 0;
      var totalAmountBeforeShipping = 0.00;   
      var rangeArray = new Array();
      var gapAmount = 0;

      var country_id = $('#selected_country_id').val();
      // totalAmountBeforeShipping = parseFloat($('#invoice_total_amount_before_shipping').val());    
      totalAmountBeforeShipping = parseFloat($('#invoice_total_amount_with_open_box').val()); 
      if($('#live_sale_discount').val() != '' && $('#live_sale_discount').val() > 0){
         totalAmountBeforeShipping -= parseFloat($('#live_sale_discount').val());
      }
      if($('#discounted_amount').val() != '' && $('#discounted_amount').val() > 0){
         totalAmountBeforeShipping -= parseFloat($('#discounted_amount').val());
      }
      if(country_id > 0){
         $.ajax({
            type: "GET",
            url: "{{ url('/customer/get-shipping-rate') }}/" + country_id,
            success: function(response){
               showHideSticky(response.show_shipping_bar);                
               if(response.show_shipping_bar == 1){
                  $(".rates").html(response.html);                   

                  startPoint = 0;
                  endPoint = parseFloat(response.max); 
                  $('.gap-amount').show();
                  if(endPoint > totalAmountBeforeShipping){
                     gapAmount = (endPoint - totalAmountBeforeShipping);
                     $('#end-point').html(endPoint);    
                     if(gapAmount > 0){
                        $('.gap-amount').html(gapAmount.toFixed(2));    
                        $('.remaining_spend_txt').html('Only {{ config('constants.item_price_currency_sign') }}<span class="gap-amount">'+gapAmount+'</span> away from free shipping');
                     }else{
                        $('.remaining_spend_txt').html("{{ config('constants.free_shipping_message') }}"); 
                     }
                  }else{
                     $('#end-point').html(endPoint); 
                     $('.remaining_spend_txt').html("{{ config('constants.free_shipping_message') }}"); 
                  }
                  caculateBarLength(startPoint, endPoint);
               } 
            },
            error: function(xhr) {               
               $('#cart-progress-bar').hide();
            },
            complete: function(xhr) {               
               $('#pageloader').css('display','none');
            }
         });
      }

   }

   function showHideSticky(shipping_bar_status = 0)
   {
      if(shipping_bar_status == 1){
         $('#cart-progress-bar').show();
      }else{
         $('#cart-progress-bar').hide();
      }
      $(window).scroll(function(){
         if ($(window).scrollTop() >= 350 && shipping_bar_status == 1) {
            $('.sticky-cart-progress-bar').addClass('active');
         }
         else {
            $('.sticky-cart-progress-bar').css('display','none !important');
            $('.sticky-cart-progress-bar').removeClass('active');
         }
      });
   }

   function caculateBarLength(startPoint=0, endPoint=0){
      var width = 0;
      var amountWithoutShipping = 0;
      // amountWithoutShipping =  $("#invoice_total_amount_before_shipping").val();
      amountWithoutShipping =  $("#invoice_total_amount_with_open_box").val();

      if($('#live_sale_discount').val() != '' && $('#live_sale_discount').val() > 0){
         amountWithoutShipping -= parseFloat($('#live_sale_discount').val());
      }
      if($('#discounted_amount').val() != '' && $('#discounted_amount').val() > 0){
         amountWithoutShipping -= parseFloat($('#discounted_amount').val());
      }
      
      width = (amountWithoutShipping/endPoint)*100;
      if(width >= 5){
         $(".truck-img").removeClass("truck-left");
         if(width > 100){
            $(".progress-bar-checkout").css('width', '100%');
         }else{
            $(".progress-bar-checkout").css('width',Math.floor(width)+'%');
         }
      }
      else{
         $(".truck-img").addClass("truck-left");
         $(".progress-bar-checkout").css('width',Math.floor(width)+'%');
      }
   }
   
   function verifyDiscountCode() {
      $('#pageloader').css('display','flex');
   	$('.discount_respose_msg').html("<i class='fa fa-spin fa-spinner'></i>");
      $.ajax({
          type: "POST",
          url: "{{ route('customer.verifyDiscountCoupon')}}",
          data: {
          	invoice_id : "{{ $invoice_id }}",
          	price : $('#total_amount_before_shipping').val(),
          	discount_code : $('#discount_code').val(),
            _token : '{{ csrf_token()}}',
          },
          success: function(data){
              $('#pageloader').css('display','none');
          	if(data.success==true){
          		$('#discount_respose_msg').html(data.title+'<br>'+data.message);
        	      $('#discounted_amount').val(data.discount_val);
           	   $('#discount_code_id').val(data.code_id);
            }else{
              	$('#discount_respose_msg').html(data.message);
              	$('#discount_code').val('');
            }
          	amountCalculation();

            // updated on 26-09-2024
            getShippingRange();
          }
      });
   }
   
   function getSelfCollectionData(sel_date = ''){
      $.ajax({
          type: "POST",
          url: "{{ route('customer.getSelfCollectionData')}}",
          data: {
          	sel_date : sel_date,
              _token : '{{ csrf_token()}}'
          },
          success: function(data){
          	$('.self_collection_dates').html(data.viewData);
          	if(sel_date=='')
          	{
          		sel_date = data.date;
          	}
              getSelfCollectionTimeSlot(sel_date);
   
          }
      });
   }
   
   function getSelfCollectionTimeSlot(sel_date = ''){
      // $('.self_collection_time_slots').html("<i class='fa fa-spin fa-spinner'></i>");
      $.ajax({
          type: "POST",
          url: "{{ route('customer.getSelfCollectionTimeSlots') }}",
          data: {
          	sel_date : sel_date,
              _token : '{{ csrf_token()}}'
          },
          success: function(data){
          	if(sel_date==''){
              	var date = new Date().toDateString();
            }else{
   			    var date = new Date(sel_date).toDateString();
            }
            $('#self_collect_date_box').html('<small style="font-size: 12px;">'+date+'</small>');
       	    $('#self_collect_date_box').show();
          	$(".timesilotarea").show();
      		$('.self_collection_time_slots').html(data);
          }
      });
   }
   
   function getAllAddresses() {
       $('#pageloader').css('display','flex');
      $.ajax({
          type: "GET",
          url: "{{ route('customer.addresses.index')}}",
          data: {
          	selected_address_id : $('#selected_address_id').val(),
              _token : '{{ csrf_token()}}'
          },
          success: function(data){
               $('#pageloader').css('display','none');
              if (data != "") {
                  $('.address_content').html(data);
                  $('#address').modal('show');               
              }
          }
      });
   }
   
   function getAllAddonItems() {
      $.ajax({
          type: "GET",
          url: "{{ route('customer.getAllAddonItems')}}",
          data: {
          	invoice_id : "{{ $invoice_id }}",
          	_token : "{{ csrf_token()}}",
          },
          success: function(data){
              if (data != "") {
                  $('.addon_items_content').html(data.viewData);
                  $('#addon-item').modal('show');               
              }
          }
      });
   }
   
   function getAllCartAddonItems(invoice_id) {	
      $.ajax({
          type: "GET",
          url: "{{ route('customer.getAllCartAddonItems')}}",
          data: {
          	invoice_id : invoice_id,
          	_token : '{{ csrf_token()}}'
          },
          success: function(data){
              if (data != "") {
                  $('.cart-addon-items-content').html(data.viewData);
              }
          }
      });
   }
   
   function addAdditionalItemsToCart(additional_item_id,quantity) {
      $('#pageloader').css('display','flex');
      var invoice_id = '{{ $invoice_id }}';
      var quantity = quantity;
      $.ajax({
          type: "POST",
          url: "{{ route('customer.addAddonToCart')}}",
          dataType: 'json',
          data: {
          	additional_item_id : additional_item_id,
          	quantity : quantity,
          	invoice_id : invoice_id,
          	_token : '{{ csrf_token()}}'
          },
          success: function(data){
            $('#pageloader').css('display','none');
            if(data.success == true){
               getAllCartAddonItems(invoice_id);
               getInvoiceTotal();
               verifyDiscountCode();
                  swal('success!', data.message, 'success');  
          	}else{
          		swal('warning!', data.message, 'warning');  
          	}
           $('#addon-item').modal('hide');	           
          },
          error:function (response){
          	$('#pageloader').css('display','none');
          	const wrapper = document.createElement('div');
          	var html = '<ul class="list-unstyled text-danger">';
          	var count = 1;
              $.each(response.responseJSON.errors, function (key, item) {
                  html += "<li>"+count+". "+item+"</li>";
                  count++;
              });
              html += '</ul>';
          	wrapper.innerHTML = html;
              swal({
   			title: "Error Occured",
   			content: wrapper,
   			icon: "error",
   			showCancelButton : false,
   			button: true,
   			dangerMode: true,
   		});
          }
      });
   }
   
   function removeAdditionalItemFromCart(additional_item_id){
      swal({
   	title: "Are you sure?",
    		text: "Do you want to remove this addon item from cart?",
   	icon: "warning",
   	buttons: true,
   	dangerMode: true,
      }).then((willDelete) => {
   	if(willDelete){
   	    var invoice_id = '{{ $invoice_id }}';
   		$.ajax({
   	        type: "POST",
   	        url: "{{ route('customer.removeAddonFromCart')}}",
   	        dataType: 'json',
   	        data: {
   	        	additional_item_id : additional_item_id,
   	        	invoice_id : invoice_id,
   	        	_token : '{{ csrf_token()}}'
   	        },
   	        success: function(data){
   		        getAllCartAddonItems(invoice_id);
   		        getInvoiceTotal();
                 verifyDiscountCode();
   	        	if(data.success){
   		            swal('Success!', data.message, 'success');  
   				}else{
   					swal('Error!', data.message, 'error');  
   	        	}
   	        },
   	        error:function (response){
   	        	$('#pageloader').css('display','none');
   	        	const wrapper = document.createElement('div');
   	        	var html = '<ul class="list-unstyled text-danger">';
   	        	var count = 1;
   	            $.each(response.responseJSON.errors, function (key, item) {
   	                html += "<li>"+count+". "+item+"</li>";
   	                count++;
   	            });
   	            html += '</ul>';
   	        	wrapper.innerHTML = html;
   	            swal({
   					title: "Error Occured",
   					content: wrapper,
   					icon: "error",
   					showCancelButton : false,
   					button: true,
   					dangerMode: true,
   				});
   	        }
   	    });
     	}else{
       	swal('Addon item is safe!', 'Your addon item is safe', 'info'); 
     	}
   })



}
   
</script>
@endsection