@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" />
@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;
	}
	
	$total_amount = $invoice->getBoxTotalAmount(auth()->user()->id);
	if($user_country_id != null && $user_country_id  > 0){
		$shipping_cost_val = calculateShippingCost($total_amount, $user_country_id);
		$shipping_cost_val_txt = "$".number_format($shipping_cost_val,2);
		$shipping_cost_status = 0;
	}elseif($total_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);
		$shipping_cost_status = 0;
	}else{
		$shipping_cost_val = 0.00;
		$shipping_cost_val_txt = 'Free';
		$shipping_cost_status = 1;
	}
	
@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="card-body">
				<!-- vikram code start -->
				<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>   
				<!-- vikram code end -->
            	<div id="validationErrors" class="ml-4 mr-4"></div>
            	<form id="boxCheckoutOrder">
            	    <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>
	                        			<a href="javascript:void(0);" class="change text-uppercase" onclick="getAllAddresses()">Change</a>
	                        		</span>
	                        	</div>
	                    	</div>
	                	</div>
	                </div>
	                
	                <div class="order-panel">
						<div class="order-header">
							<h5 class="mb-0">Product Order</h5>
						</div>
						@if($boxes->count()>0)
							@foreach($boxes as $item)
								<div class="order-body">
									<ul class="list-unstyled mb-0 order-list d-flex flex-wrap mybox-orders">
										<li class="text-center text-md-left">
											#{{ $item->number }}
										</li>
										<li class="text-center">
											Number of Items : <span>{{ $item->getTotalItemsOfInvoices("box-checkout") }}</span>
										</li>
										<li class="text-center text-md-right">
											Subtotal : <span>${{ number_format($item->getTotalOfArrivedItems("box-checkout"),2) }}</span>
										</li>
									</ul>
								</div>
							@endforeach
						@endif
						<div class="subtotal-bar text-right">${{ number_format($total_amount,2) }}</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 to saller..."></textarea>
									</div>
								</div>
							</div>
							<div class="shipping-option">
								<div class="row">
									<div class="col-12 col-lg-7">
										<div class="row">
											<div class="col-12 col-sm-4 mb-3 mb-md-0">
												<h6 class="font-weight-normal mb-0 textprimary-dark">Shipping option</h6>
											</div>
											<div class="col-12 col-sm-8 mb-3 mb-md-0">
												<p class="text-secondary mb-0 shipping_option_txt" style="line-height: 1;">{{ config('constants.ship_out_text') }}</p>
												<span id="delivery_estimate_time" style="display: block;">
													<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-5">
										<div class="row">
											<div class="col-12 col-sm-5 mb-3 mb-md-0">
												<p class="mb-0"><a href="#" class="textprimary-dark f-weight-medium text-uppercase" data-toggle="modal" data-target="#shippedoption">Change</a></p>
											</div>
											<div class="col-12 col-sm-6 text-lg-right">
												<span class="text-secondary shipping_cost">{{ $shipping_cost_val_txt }}</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
            		
						<div class="order-panel">
							
								<div class="order-header" id="payment_method_header">
									<h5 class="mb-0">Payment Method</h5>
								</div>
							
							<div class="order-body">
								
									<div class="Payment-Method" id="payment_method_content">
										@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>
										
									<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>Shipping Total : </span>
															<span class="shipping_cost">${{ number_format($shipping_cost_val,2) }}</span>
														</li>
														<li>
															<span>Total Payment :</span>
															<span class="subamout" id="grand_total_amount_txt">${{ number_format($shipping_cost_val,2) }}</span>
														</li>
													</ul>
												</div>
											</div>
										</div>
										<div class="text-right pb-3">
											<input type="hidden" name="shipping_amount" value="{{ number_format($shipping_cost_val,2)}}" id="shipping_amount">
											<input type="hidden" name="grand_total_amount" value="{{ number_format($shipping_cost_val,2) }}" id="grand_total_amount">

											<input type="hidden" name="total_amount" value="{{ number_format($total_amount,2) }}" id="total_amount_after_shipping">
										
											<input type="hidden" name="selected_shipping_option" value="{{ $ship_out }}" 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="hidden" value="{{ number_format($total_amount,2) }}" name="invoice_total_amount_with_open_box" id="invoice_total_amount_with_open_box">

											<input type="submit" class="btn btnprimary rounded-10 btn-sm" value="Ship Out" />
										</div>
									</div>
							</div>
						</div>
					</form>
					
            </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
		                        	$checked = false;
		                           	$optionPrice = $option->price;
		                           	if($option->id == 2){
		                              $optionPrice = $shipping_cost_val;
		                              $checked = true;
		                           	}
		                        @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 }}" {{ ($checked) ? 'checked' : '' }}>
		                                 <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>
		                              </label>
		                           </div>
		                           <div class="shipprice float-right">${{ $optionPrice ?? 0.00 }}</div>
		                        </li>                              
		                     @endforeach
		                  @endif
			      		{{-- <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 }}" checked>
								  	<input type="hidden" name="shipping_cost" id="shipping_cost" value="{{ number_format($shipping_cost_val,2) }}">
								  	<input type="hidden" name="shipping_option_txt" value="Ship Out">
								  	<span class="radio-checkmark"></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 }}">
								  	<span class="radio-checkmark"></span>
								  	<input type="hidden" name="shipping_cost" value="{{ $self_collect_cost }}">
								  	<input type="hidden" name="shipping_option_txt" value="Self Collect">
								</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="">{!! config('constants.checkout_success_message') !!}</p>
	                    <div class="">
				    		<a href="{{ route('customer.my-box.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-box.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>


<!-- 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>	

<!-- 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 class="modal-body">
            <div id="address-addform"></div>
        </div>
      </div>
   </div>
</div>

@endsection

@section('scripts')
<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 type="text/javascript">
	var shippingCostFirst = {{$shipping_cost_val}};
	$(document).ready(function(){
		$('#boxCheckoutOrder').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.box.boxCheckoutSubmit') }}",
		        data: formData,
		        cache: false,
		        contentType: false,
                processData: false,
		        success: function(data){
			        $('#pageloader').css('display','none');
		        	if(data.success==true){
			        	$('.middle__content').css('filter','blur(2px)'); 
			    		$('#successOrder').modal('show');
		        	}else{
		        		swal({
							title: "Error",
							text: data.message,
							icon: "warning",
							buttons:  ["Ok"],
							dangerMode: false,
						})
						.then((willShipOut) => {
						  	if (willShipOut) {
						  		window.location.href =  '{{ url('customer/my-box') }}';
			    			}
			    		});
		        	}
		        },
		        error:function (response){
		        	$('#pageloader').css('display','none');
		            $("#validationErrors").html('<ul class="list-unstyled alert alert-danger"></ul>');
		            $.each(response.responseJSON.errors, function (key, item) {
		                $("#validationErrors ul").append("<li>"+item+"</li>")
		            });
		        }
		    });
        });

		$('#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 == {{ $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();
    				$('#delivery_estimate_time').hide();
    			}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();
    				$('#delivery_estimate_time').show();
    			}
    			managePaymentMethodContent(selected_shipping_option, selected_shipping_cost);
    		}
    	});

        $('.payment_method').on('click',function(){
        	$('.dropify').val(null);
        	$('input[type=file]').prop('required',false);
        	var payment_method_id =  $(this).data('payment_method_id');
        	if ($('#payment_method_'+payment_method_id).is(":checked")) {
        		$('.payment_method_inner').hide();	
			   	$('#payment_method_inner_'+payment_method_id).show();
			   	$('#payment_method_inner_'+payment_method_id).find('.dropzone-area').find('input[type=file]').prop('required',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) {
                      //$('#address').modal('hide');      
                    $('#addNewAddressModal').find("#address-addform").html(response);
                    $('#addNewAddressModal').modal('toggle');
                  },
   		   });
   	   });
}); 
managePaymentMethodContent('{{ $ship_out }}', shippingCostFirst);
function managePaymentMethodContent(type="", shipping_cost=0){
	
	if(type=={{ $self_collect }}){
		$('input[type=file]').prop('required',false);
		$('#payment_method_header').hide();
    	$('#payment_method_content').hide();
	}else if(type=={{ $ship_out }} && shipping_cost == 0){
		$('input[type=file]').prop('required',false);
		$('#payment_method_header').hide();
    	$('#payment_method_content').hide();
	}else{
		$('#payment_method_header').show();
    	$('#payment_method_content').show();
	}
}

function amountCalculation(){
	var selected_shipping_cost = parseFloat($('#shipping_amount').val());
	var total_amount_before_shipping = 0.00;
	
	var total_amount_after_shipping = total_amount_before_shipping+selected_shipping_cost;
	var grand_total_amount = total_amount_after_shipping;
	
	$('#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));
}

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() {
	$.ajax({
        type: "GET",
        url: "{{ route('customer.addresses.index')}}",
        data: {
        	selected_address_id : $('#selected_address_id').val(),
            _token : '{{ csrf_token()}}'
        },
        success: function(data){
            if (data != "") {
                $('.address_content').html(data);
                $('#address').modal('show');               
            }
        }
    });
}

/* vikram code start*/
getShippingRange();
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_with_open_box').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_with_open_box").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 getInvoiceTotal(){
	$('#pageloader').css('display','flex');
	var selected_country_id = $('#selected_country_id').val();
	var total_amount =  $("#invoice_total_amount_with_open_box").val();
	$.ajax({
		type: "POST",
		url: "{{ route('customer.getInvoiceTotalMyBox')}}",
		data: {
		_token : "{{ csrf_token()}}",
		country_id : selected_country_id,
		total_amount: total_amount
		},
		success: function(response){
			$('.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);
			$('#shipping_cost').val(response.data.shipping_cost_val);
			$('#shipping_cost_val').val(response.data.shipping_cost_val);
			$('#shipping_cost_txt').html(response.data.shipping_cost_val_txt);
			if($('#selected_shipping_option').val() == {{ $ship_out }}){
				$('#shipping_amount').val(response.data.shipping_cost_val);
			}
			var selected_shipping_option = $('#selected_shipping_option').val();
			if(selected_shipping_option == {{ $self_collect }} || response.data.shipping_cost_val == 0){
				$('#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();
				$('#delivery_estimate_time').hide();
			}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();
				$('#delivery_estimate_time').show();
			}
			managePaymentMethodContent(selected_shipping_option, response.data.shipping_cost_val);

			amountCalculation();
			getShippingRange();
		},
		complete: function(){
			$('#pageloader').css('display','none');
		}
	});
}

$('#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');

	$('#address_tag').html($(this).data('address_tag'));

	$('#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');
	
	getInvoiceTotal(); 
	getShippingRange();
});
/* vikram code end */
</script>
@endsection