{% extends "@Flexy/FrontBundle/Themes/CoWorking/templates/layout.html.twig"  %}


{% block stylesheets %}

	{{parent()}}
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.min.css" integrity="sha512-wJgJNTBBkLit7ymC6vvzM1EcSWeM9mmOu+1USHaRBbHkm6W9EgM0HY27+UtUaprntaYQJF75rc8gjxllKs5OIQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

{% endblock %}

{% block body %}


    <style>

#collectMap,#shippingMap {
  width: 100%;
  height: 400px;
}
    .pay-with-wallet .item{
        padding:10px 7px;
        margin:0 10px;
        font-weight:bold;
        background:#45dae9;
        color:white;
        border-radius:50px;
        text-align:center;
        font-size:14px;
    }
    .pay-with-wallet .item.selected{
        
        background:#febc4a;
    }

    .tips-shipping-agent .item{
        padding:10px 15px;
        margin:0 10px;
        font-weight:bold;
        background:#45dae9;
        color:white;
        border-radius:50px;
        text-align:center;
    }
    .tips-shipping-agent .item.selected{
        
        background:#febc4a;
    }


.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot{
    background:#d5d5d5;
}

.owl-dots {
     bottom:-35px; 
}
	.choices-shipping{
		font-size:13px;
    }
   .choices-shipping div div {
    /* border: 2px dotted #ccc; */
    padding: 20px;
    background: #f2f2f2;
}

    .choices-shipping div div.active {
    background-color: #45dae9;
    border-color: #29cedf;
    color: white;
}
	
	.jq-toast-wrap {
    display: block;
    position: fixed;
    width: 500px;
    pointer-events: none!important;
    letter-spacing: normal;
    z-index: 9000!important;
}

.jq-icon-warning {
    
    background-color: #9a0062;
}
    </style>

	<div 
		class="body-wrapper" >

		<!-- Begin Li's Breadcrumb Area -->
		<div class="breadcrumb-area">
			<div class="container">
				<ul id="progressbar">
					<li class="active">Livraison
					</li>
					<li>Paiement et coordonnées</li>
					<li>Resumé</li>
				</ul>
			</div>
		</div>
		<!-- Li's Breadcrumb Area End Here -->
		<!--Shopping Cart Area Strat-->
		<div class="Shopping-cart-area pt-60 pb-60">
			<div class="container">
				<div class="row ">
					<div class="col-12">
						<form action="#">
							<div class="table-content table-responsive d-none">
								<table class="table table-striped">
									<thead>
										<tr>
											<th class="li-product-remove">Supprimer</th>
											<th class="li-product-thumbnail">images</th>
											<th class="cart-product-name">Product</th>
											<th class="li-product-price">Prix unitaire</th>
											<th class="li-product-quantity">Quantité</th>
											<th class="li-product-subtotal">Total</th>
										</tr>
									</thead>
									<tbody
										class="cart"><!-- LocalStorage Cart Items -->
									</tbody>
								</table>
							</div>
							


                                                

							<div class="row">


								<div class="col-md-7 ">

                                    <div class="row">
                                    <div class="col-12">


                                    <!--Accordion Start-->
                                <p style="font-weight:bold;">Avez-vous un code promo? <span id="showcoupon" style="cursor:pointer;">Cliquez ici pour saisir votre code</span></p>
                                <div id="checkout_coupon" class="coupon-checkout-content">
                                    <div class="coupon-info">
                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="Votre code promo" data-coupon-value="0" data-coupon-type="amount" name="codeCoupon" aria-label="Recipient's username" aria-describedby="button-codeCoupon" value="">
                                            <button class="btn btn-success orderPreview" type="button" id="button-codeCoupon">Appliquer</button>
                                        </div>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                <!--Accordion End-->

                                        
                                    
                                

                                    <div class="row choices-shipping" style="margin-bottom:40px; ">
											{% for singleShippingMethod in shippingMethods %}
                                                <div  class="col-6 mt-4" >
                                                   <div style="min-height:180px;" data-id="{{singleShippingMethod.id}}" class="shippingMethod {% if singleShippingMethod == shippingMethods|first %}active{% endif %}">
                                                     <h4>{{singleShippingMethod.name}}</h4>
                                                    <ul>
                                                    <li>
														{% set shippingDurationValue = singleShippingMethod.shippingDuration %}
														{% set shippingDurationUnit = "H" %}
													{% if shippingDurationValue < 1 %}
														{% set shippingDurationValue = 60 * singleShippingMethod.shippingDuration  %}
														{% set shippingDurationUnit = "Min" %}
													{% endif %}
													Temps d’attente du Speeder <span class="float-right slot">{{shippingDurationValue}} {{shippingDurationUnit}}</span></li>
                                                    <li  class="">Récuperation de la commande <span class="float-right">{{singleShippingMethod.preparationDuration}} H</span></li>
                                                    <li>Livraison en <span class="float-right">{{singleShippingMethod.processingDuration}} H</span></li>
													{% if singleShippingMethod.shippingRules|length > 0 %}
                                                    <li style="line-height: 15px;"><small>{{singleShippingMethod.description}}</small></li>
													{% endif %}
                                                </ul>
                                                   </div>

												
                                                </div>
												{% endfor %}
                                                
                                            </div>
									<div class="row" >
									<div class="item aos-init aos-animate  col-6" id="accordionRecovery" data-aos="fade-up">
										<h6>Informations de récupération</h6>
										<div class="bg-white">
											<div class="row">
												<div class="box col-sm-5 col-md-12 col-lg-5">
													<label>Date</label>
													<div class="d-flex">
														<input type="text" class="form-control datedropper chooseDate"  data-dd-min-date="{{"now"|date('Y/m/d')}}" value="{{"now"|date('Y/m/d')}}" name="startProcessingAt"    />
														
													</div>
												</div>
												<div class="box col-sm-7 col-md-12 col-lg-7">
													<label>Heure</label>
													<span id="recovery_slot">
														<select id="receive_time" class="custom-select custom-select-recieve" name="collectTime" data-day="0">
															<option value="08:00" >Sélectionner un crénau</option>
														</select>
													</span>
												</div>
											</div>
											
											<div class="row justify-content-center">
												<div class="form-group box col-sm-12">
													<label>
														<b>Adresse de récupération</b>
													</label>
													<!-- Button trigger modal -->
													
                                                        <select class="mb-2" name="collectCityRegion" >
                                                            {% for cityRegion in cityRegions %}
                                                                <option data-lat="{{cityRegion.lat}}" data-lng="{{cityRegion.lng}}" value="{{cityRegion.id}}">{{cityRegion.name}}</option>
                                                            {% endfor %}
                                                        </select>
														<input type="text" id="collect_address" name="collect_address" value="Maarif, Casablanca, Maroc" class="form-control w-100" >
                                                        <a  href="#" id="modalShippingMap" type="button"  data-bs-toggle="modal" data-bs-target="#collectMapModal" class="btn btn-success mt-2"  style="" ><i class="fa-solid fa-location-dot"></i> Location</a>
    
												</div>
											</div>

										</div>


									</div>

									<div class="item aos-init aos-animate col-6" id="accordionRecovery" data-aos="fade-up">
										<h6>Informations de livraison</h6>
										<div class="bg-white"> 
                                            
											<div class="row">
												<div class="box col-sm-5 col-md-12 col-lg-5">
													<label>Date</label>
													<div class="d-flex">
														<input type="text" class="form-control datedropper chooseDate"  name="startDeliveryAt" value="{{"now"|date('Y/m/d')}}"   />
														
													</div>
												</div>
												<div class="box col-sm-7 col-md-12 col-lg-7">
													<label>Heure</label>
													<span id="recovery_slot">
														<select id="receive_time" class="custom-select custom-select-recieve" name="shippingTime" data-day="0">
															<option value="08:00" >Sélectionner un crénau</option>
														</select>
													</span>
												</div>
											</div>
											
											<div class="row justify-content-center">
												<div class="form-group box col-sm-12">
													<label>
														<b>Adresse de livraison</b>
													</label>
													
                                                        <select class="mb-2" name="shippingCityRegion" >
                                                            {% for cityRegion in cityRegions %}
                                                                <option data-lat="{{cityRegion.lat}}" data-lng="{{cityRegion.lng}}" value="{{cityRegion.id}}">{{cityRegion.name}}</option>
                                                            {% endfor %}
                                                        </select>
														<input type="text" id="shipping_address" name="shipping_address" value="Maarif, Casablanca, Maroc" class="form-control w-100 " />
                                                            
														
													
                                                    <a href="#" id="modalShippingMap" type="button"  data-bs-toggle="modal" data-bs-target="#collectMapModal" class="btn btn-success mt-2" style="" ><i class="fa-solid fa-location-dot"></i> Location</a>
												</div>
											</div>

										</div>


									</div>

                                    
                                    {% if is_granted("ROLE_CUSTOMER") and customer != null %}
                                    <div class="col-12 mt-5" >
                                        <h6>Payer avec ma wallet {{customer.credit}} DH</h6>
                                        <div class="owl-carousel pay-with-wallet d-none mt-4">
                                            {% if customer.credit > 0 %}
                                            {% set counterCredit = 0 %}
                                                    {% for i in 0..totalCart %}
                                                        {% if
                                                         (customer.credit >= i and customer.credit <= totalCart) or
                                                         (customer.credit >= i and customer.credit >= totalCart)
                                                         %}
                                                            <div data-value="{{i}}" class="item"> {{i}} DH</div>
                                                            {% set counterCredit = counterCredit + i %}
                                                         {% endif %}
                                                
                                            {% endfor %}
                                            {% endif %}
                                            
                                            
                                            </div>

                                    </div>
                                    {% endif %}
									</div>


									



                                    <hr>

                                    
								</div>

								 <div class="col-lg-5 col-12">
                            <div class="your-order">
                                <h3>Votre commande</h3>

                                <div class="shipping" >
                               
                                </div>


                                <div class="your-order-table table-responsive">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th class="cart-product-name">Produit</th>
                                                <th class="cart-product-total">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody class="cart-checkout">

 
                                        </tbody>
                                        <tfoot>
                                            <tr class="cart-subtotal">
                                                <th>Sous total</th>
                                                <td><span class="amount total-checkout total">0,00 MAD </span></td>
                                            </tr>
											<tr class="cart-subtotal promo">
                                                <th>Reduction coupon</th>
                                                <td><span class="amount codepromo">0,00 MAD </span></td>
                                            </tr>
                                            {# <tr class="cart-subtotal">
                                                <th>Paiement par wallet</th>
                                                <td><span class="amount wallet-payment">0,00 MAD </span></td>
                                            </tr> #}

                                            {# <tr class="cart-subtotal">
                                                <th>Pourboire pour le livreur</th>
                                                <td><span class="amount shipping-tips">0,00 MAD </span></td>
                                            </tr> #}
                                            
											<tr class="cart-subtotal">
                                                <th>Frais de livraison</th>
                                                <td><span class="amount shipping-method-fees">0,00 MAD </span></td>
                                            </tr>
                                            <tr class="order-total">
                                                <th>Montant á payer</th>
                                                <td><strong><span class="amount total-checkout total-to-pay ">0,00 MAD</span></strong></td>
                                            </tr>
											
                                            <tr>
                                                <td colspan="2" ><a href="#" class="save-button btn btn-primary d-block">Continuer</a></td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                    
                                </div>
                                
                            </div>
                        </div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<!--Shopping Cart Area End-->

	</div>
	<!-- Body Wrapper End Here -->



    <!-- Button trigger modal -->



{% endblock %}




{% block javascripts %}
    {{parent()}}
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBFliT4Ug0Ugto5davRC7krsyMhTfkI-L4&libraries=places"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.min.js" integrity="sha512-zlWWyZq71UMApAjih4WkaRpikgY9Bz1oXIW5G0fED4vk14JjGlQ1UmkGM392jEULP8jbNMiwLWdM8Z87Hu88Fw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script src="{{asset('flexy/js/datedropper/datedropper-javascript.js')}}"></script>
<script src="{{asset('flexy/js/datedropper/datedropper-javascript-lang-FR.js')}}"></script>



    <script>
	document.addEventListener("turbo:load", function() {

var isCollectReadyForCheckout = false;
var isShippingReadyForCheckout = false;
new dateDropper({
  lang:"fr",
  //format: "dd/m/y",
  selector: "input[name='startProcessingAt']",
  minDate: "{{"yesterday"|date("Y-m-d")}}",
  //autoFill:false,
  expandable: true,
  onChange: function (res) {
    $("input[name='startProcessingAt']").trigger("change");
  }
});
new dateDropper({
  lang:"fr",
  //format: "dd/m/y",
  selector: "input[name='startDeliveryAt']",
  //autoFill:false,
  expandable: true,
  onChange: function (res) {
    $("input[name='startProcessingAt']").trigger("change");
  }
});
$(document).ready(function(){  
    
  $(".tips-shipping-agent").owlCarousel({
    dots:true,
    items:5,
    nav:false,
    onChanged:function(){
        $(".tips-shipping-agent").removeClass("d-none");
    }
  });

  $(".pay-with-wallet").owlCarousel({
    dots:true,
    items:7,
    nav:false,
    onChanged:function(){
        $(".pay-with-wallet").removeClass("d-none");
    }
  });
  


    $(".pay-with-wallet .item").click(function(){
    $(".pay-with-wallet .item").removeClass("selected");
     $(this).addClass("selected");
     walletPayment = parseFloat($(this).attr("data-value"));
     
     $(".wallet-payment").html( (walletPayment) + " DH");
     $(".total-to-pay").html( ((total) - (amount) - (reductionCoupon) - (walletPayment)) + (shippingFees) + (shippingTips) + " DH");
  });


       var inputCollectAddress = document.getElementById('collect_address');
	   var inputShippingAddress = document.getElementById('shipping_address');
       
var optionsCollect = {
  //types: ['(cities)'],
  componentRestrictions: {country: 'ma'}
};

var optionsShipping = {
  //types: ['(cities)'],
  componentRestrictions: {country: 'ma'}
};


 var centerLatCollect = $("select[name='collectCityRegion']").find("option:selected").attr("data-lat"); // example latitude
  var centerLngCollect = $("select[name='collectCityRegion']").find("option:selected").attr("data-lng"); // example longitude

   var centerLatShipping =$("select[name='shippingCityRegion']").find("option:selected").attr("data-lat"); // example latitude
  var centerLngShipping =$("select[name='shippingCityRegion']").find("option:selected").attr("data-lng"); // example longitude


var centerPointCollect = new google.maps.LatLng(centerLatCollect, centerLngCollect);
var centerPointShipping = new google.maps.LatLng(centerLatShipping, centerLngShipping);

// Set the desired radius in meters
var radius = 10000; // 10 kilometers

var boundsCollect = new google.maps.Circle({ center: centerPointCollect, radius: radius }).getBounds();
var boundsShipping = new google.maps.Circle({ center: centerPointCollect, radius: radius }).getBounds();
  $("select[name='collectCityRegion']").change(function(){
    centerLatCollect = $("select[name='collectCityRegion']").find("option:selected").attr("data-lat");
    
    centerLngCollect = $("select[name='collectCityRegion']").find("option:selected").attr("data-lng");

     centerPointCollect = new google.maps.LatLng(centerLatCollect, centerLngCollect);
     boundsCollect = new google.maps.Circle({ center: centerPointCollect, radius: radius }).getBounds();

  });

    $("select[name='shippingCityRegion']").change(function(){
    centerLatShipping = $("select[name='shippingCityRegion']").find("option:selected").attr("data-lat");
    centerLngShipping = $("select[name='shippingCityRegion']").find("option:selected").attr("data-lng");
     centerPointShipping = new google.maps.LatLng(centerLatShipping, centerLngShipping);
     boundsShipping = new google.maps.Circle({ center: centerPointCollect, radius: radius }).getBounds();

    
  });









var autocompleteCollect = new google.maps.places.Autocomplete(inputCollectAddress, optionsCollect);
var autocompleteShipping = new google.maps.places.Autocomplete(inputShippingAddress, optionsShipping);

google.maps.event.addListener(autocompleteCollect, 'place_changed', function() {
    
    
    var lngCollect = autocompleteCollect.getPlace().geometry.location.lng();
    var latCollect = autocompleteCollect.getPlace().geometry.location.lat();

        if (autocompleteCollect.getPlace() && boundsCollect && boundsCollect.contains(autocompleteCollect.getPlace().geometry.location)) {
            // Place falls within the specified radius
            isCollectReadyForCheckout = true;
            console.log('Place collect is within the specified radius:', autocompleteCollect.getPlace());
        } else {
            isCollectReadyForCheckout = false;
            // Place is outside the specified radius
            console.log('Place collect is outside the specified radius:', autocompleteCollect.getPlace());
        }
    
});
google.maps.event.addListener(autocompleteShipping, 'place_changed', function() {
    
    
    var lngShipping = autocompleteShipping.getPlace().geometry.location.lng();
    var latShipping = autocompleteShipping.getPlace().geometry.location.lat();

    if (autocompleteShipping.getPlace() && boundsShipping && boundsShipping.contains(autocompleteShipping.getPlace().geometry.location)) {
            // Place falls within the specified radius
            isShippingReadyForCheckout = true;
            console.log('Place shipping is within the specified radius:', autocompleteShipping.getPlace());
        } else {
             isShippingReadyForCheckout = false;
            // Place is outside the specified radius
            console.log('Place shipping is outside the specified radius:', autocompleteShipping.getPlace());
        }

    
});
    
    $(".choices-shipping div div").click(function(){
        
            $(".choices-shipping div div").removeClass("active");
            $(this).addClass("active");
        
			total = cartLS.total();
			var value = $(this).val();
			//shippingFees = parseFloat($(this).find(":selected").attr("data-price")) ;
			//$(".shipping-method-fees").html(shippingFees+ " DH");
			//$(".total-to-pay").html(((total) - (amount) - (reductionCoupon)) + (shippingFees) + " DH");
			//$("#cash").trigger("keyup");
			$("input[name='startDeliveryAt']").val($("input[name='startProcessingAt']").val());
			$("input[name='startProcessingAt']").trigger("change");
    });
	$(".save-button").click(function(){
    

    if((isCollectReadyForCheckout && isShippingReadyForCheckout) || 1 == 1){
        
   
                        
                        
$.ajax({
                            url:"{{path('pos_cart_checkout')}}",
                            method:"POST",
                            data:{
                                
                                
								orderItems: cartLS.list(),
                                shippingMethod:$(".shippingMethod.active").attr("data-id"),
                                deliveryType:"collecte-and-delivery",
                                
                                
                                //reduction:$("#reduction").val(),
                                //payedAmount:$("#cash").val(),
                                codeCoupon:$("input[name=codeCoupon]").val(),
                                startProcessingAt: $("input[name=startProcessingAt]").val()+" "+$("select[name='collectTime']").find("option:selected").val(),
                                startDeliveryAt:$("input[name=startDeliveryAt]").val()+" "+$("select[name='shippingTime']").find("option:selected").val(),
                                shippingAddress:$("input[name=shipping_address]").val(),
                                collectAddress:$("input[name=collect_address]").val(),
                                cityRegionCollect:$("select[name='collectCityRegion']").find("option:selected").val(),
                                cityRegionShipping:$("select[name='shippingCityRegion']").find("option:selected").val(),
                                shippingTips:parseFloat($(".tips-shipping-agent .item.selected").attr("data-value")),
                                walletPaymentAmount:parseFloat($(".pay-with-wallet .item.selected").attr("data-value")),

                                isReadyForCheckout: true
                                
                            },
                            success:function(result){
 
                               if(result.status == "success");
							   window.location.href = "{{path('checkout')}}";
                            }
                        });    
 }else{
$.toast({
                                            heading: 'Merci de verifier vos cordonnées',
                                            text: "Vos cordonnées quartiers ou adresses ne sont pas valident merci de verifier !",
                                            showHideTransition: 'slide',
                                            hideAfter:12000,
                                            icon: 'warning',
                                            loaderBg: '#1ca5df', 
                                            position:"top-right",
                                            allowToastClose: true,
                                            stack: false
                                    })

 }

   
});
	$("input[name='startProcessingAt']").change(function(){
   
$.toast().reset('all');
    
                        
    $(".checkout-area").html("");
    
    var isWallet = 0;
    if($("#isWallet").is(':checked')){
        isWallet = 1;
    }
                        
$.ajax({
                            url:"{{path('pos_cart_checkout')}}",
                            method:"POST",
                            data:{
                                
                                orderItems: cartLS.list(),
                                shippingMethod:$(".shippingMethod.active").attr("data-id"),
                                deliveryType:"collecte-and-delivery",
                                
                                
                                //reduction:$("#reduction").val(),
                                //payedAmount:$("#cash").val(),
                                codeCoupon:$("input[name=codeCoupon]").val(),
                                startProcessingAt: $("input[name=startProcessingAt]").val()+" "+$("select[name='collectTime']").find("option:selected").val(),
                                startDeliveryAt:$("input[name=startDeliveryAt]").val()+" "+$("select[name='shippingTime']").find("option:selected").val(),
                                isChooseDatePreview: true
                                
                            },
                            success:function(result){
                                
                                $("input[name='startDeliveryAt']").attr("data-dd-opt-min-date",result.minDateShipping);
                                $("input[name='startDeliveryAt']").attr("data-dd-opt-max-date","{{ "next year"| date('Y-m-d') }}");
                                $("input[name='startDeliveryAt']").attr("data-dd-opt-default-date",result.shippingDate);
                                
                                //$("#shipping-method").find("option:selected").attr("data-price",result.shippingFees);
                                shippingFees = parseFloat(result.shippingFees) ;
                                $(".shipping-method-fees").html(shippingFees.toFixed(2)+ " DH");
                                $(".total-to-pay").html(((total) - (amount) - (reductionCoupon)) + (shippingFees) + (shippingTips) + " DH");
                                //$("select[name='collectTime']").modal('show');
                                $("select[name='collectTime']").html(result.collectHoursHTML);
                                $("select[name='shippingTime']").html(result.shippingHoursHTML);
                                $("input[name='startProcessingAt']").val(result.collectDate);
                                $("input[name='startDeliveryAt']").val(result.shippingDate);
                                
                                /*         
                                $("input[name='startDeliveryAt']").dateDropper({
                                    large: true,
                                    lang: 'fr',
                                    theme: 'datedropper',
                                    format: "d-m-Y",
                                    expandable: true,
                                    rangeStart: result.shippingDate,
                                    rangeEnd: "{{ " next year "|date('Y/m/d') }}",
                                    disabledDays: "{{settings.get().getExcludeDatesOnlyDates()|join(',')}}",
                                    disabledWeekDays: '6'
                                });
                                    */
                                
                                if(result.messages.length > 0){
                                    $.toast({
                                            heading: 'Décalage de date',
                                            text: result.messages,
                                            showHideTransition: 'slide',
                                            hideAfter:12000,
                                            icon: 'warning',
                                            loaderBg: '#1ca5df', 
                                            position:"top-right",
                                            allowToastClose: true,
                                            stack: false
                                    })
                                   
                                }
                            }
                        });                 
    
});
	$("input[name='startDeliveryAt']").change(function(){
   
$.toast().reset('all');
    
    var isWallet = 0;
    if($("#isWallet").is(':checked')){
        isWallet = 1;
    }
                        
$.ajax({
                            url:"{{path('pos_cart_checkout')}}",
                            method:"POST",
                            data:{
                                
                                orderItems: cartLS.list(),
                                shippingMethod:$(".shippingMethod.active").attr("data-id"),
                                deliveryType:$("select[name='delivery-type'] option:selected").val(),
                                
                                
                                //reduction:$("#reduction").val(),
                                //payedAmount:$("#cash").val(),
                                startProcessingAt: $("input[name=startProcessingAt]").val()+" "+$("select[name='collectTime']").find("option:selected").val(),
                                startDeliveryAt:$("input[name=startDeliveryAt]").val()+" "+$("select[name='shippingTime']").find("option:selected").val(),
                                isChooseDatePreview: true
                                
                            },
                            success:function(result){
                                
                                $("input[name='startDeliveryAt']").attr("data-dd-opt-min-date",result.minDateShipping);
                                $("input[name='startDeliveryAt']").attr("data-dd-opt-max-date","{{ "next year"| date('Y-m-d') }}");
                                $("input[name='startDeliveryAt']").attr("data-dd-opt-default-date",result.shippingDate);
                                
                                //$("#shipping-method").find("option:selected").attr("data-price",result.shippingFees);
                                shippingFees = parseFloat(result.shippingFees) ;
                                $(".shipping-method-fees").html(shippingFees.toFixed(2)+ " DH");
                                $(".total-to-pay").html(((total) - (amount) - (reductionCoupon)) + (shippingFees) + (shippingTips) + " DH");
                                //$("select[name='collectTime']").modal('show');
                                //$("select[name='collectTime']").html(result.collectHoursHTML);
                                $("select[name='shippingTime']").html(result.shippingHoursHTML);
                                //$("input[name='startProcessingAt']").val(result.collectDate);
                                $("input[name='startDeliveryAt']").val(result.shippingDate);
                                $("select[name='shippingTime']").find("option:first").attr("selected",true);
                                
                                /*         
                                $("input[name='startDeliveryAt']").dateDropper({
                                    large: true,
                                    lang: 'fr',
                                    theme: 'datedropper',
                                    format: "d-m-Y",
                                    expandable: true,
                                    rangeStart: result.shippingDate,
                                    rangeEnd: "{{ " next year "|date('Y/m/d') }}",
                                    disabledDays: "{{settings.get().getExcludeDatesOnlyDates()|join(',')}}",
                                    disabledWeekDays: '6'
                                });
                                    */
                                
                                if(result.messages.length > 0){
                                    $.toast({
                                            heading: 'Décalage de date',
                                            text: result.messages,
                                            showHideTransition: 'slide',
                                            hideAfter:12000,
                                            icon: 'warning',
                                            loaderBg: '#1ca5df', 
                                            position:"top-right",
                                            allowToastClose: true,
                                            stack: false
                                    })
                                   
                                }
                            }
                        });                 
    
});
$("select[name='collectTime']").change(function(){
    
                        
                        
$.ajax({
                            url:"{{path('pos_cart_checkout')}}",
                            method:"POST",
                            data:{
                                
                                
								orderItems: cartLS.list(),
                                shippingMethod:$(".shippingMethod.active").attr("data-id"),
                                deliveryType:$("select[name='delivery-type'] option:selected").val(),
                                
                                //reduction:$("#reduction").val(),
                                //payedAmount:$("#cash").val(),
                                startProcessingAt: $("input[name=startProcessingAt]").val()+" "+$("select[name='collectTime']").find("option:selected").val(),
                                startDeliveryAt:$("input[name=startDeliveryAt]").val(),
                                isChooseDatePreview: true
                                
                            },
                            success:function(result){
                                $("input[name='startDeliveryAt']").attr("data-dd-opt-min-date",result.minDateShipping);
                                $("input[name='startDeliveryAt']").attr("data-dd-opt-max-date","{{ "next year"| date('Y-m-d') }}");
                                $("input[name='startDeliveryAt']").attr("data-dd-opt-default-date",result.shippingDate);
                                //$("select[name='collectTime']").modal('show');
                                //$("select[name='collectTime']").html(result.collectHoursHTML);
                                $("select[name='shippingTime']").html(result.shippingHoursHTML);
                                //$("input[name='startProcessingAt']").val(result.collectDate);
                                $("input[name='startDeliveryAt']").val(result.shippingDate);
                            }
                        });                 
   
});
$("input[name='startProcessingAt']").trigger("change");
}); 


$(".orderPreview").click(function(){
    $(".checkout-area").html("");
    
    if(cartLS.list().length > 0){                        
$.ajax({
                            url:"{{path('pos_cart_checkout')}}",
                            method:"POST",
                            data:{
                                shippingMethod:$(".shippingMethod.active").attr("data-id"),
                                codeCoupon:$("input[name=codeCoupon]").val(),
                                isPromoPreview: true
                            },
                            success:function(result){
                                reductionCoupon = 0;
                                if(result.coupon ){
                                    if(result.coupon.typeReduction=="percent"){
                                        reductionCoupon = (total / 100) * result.coupon.valueReduction;
                                    }else{
                                        reductionCoupon = result.coupon.valueReduction;
                                    }

                                    $("input[name='codeCoupon']").attr("data-coupon-value",result.coupon.valueReduction);
                                    $("input[name='codeCoupon']").attr("data-type-value",result.coupon.typeReduction);
                                    
                                    $.toast({
                                            heading: result.coupon.code,
                                            text: result.message,
                                            showHideTransition: 'slide',
                                            hideAfter:12000,
                                            icon: 'success',
                                            loaderBg: '#1ca5df', 
                                            position:"top-right",
                                            allowToastClose: true,
                                            stack: false
                                    })
                                }else{
                                    $.toast({
                                            heading: "Remarque",
                                            text: result.message,
                                            showHideTransition: 'slide',
                                            hideAfter:12000,
                                            icon: 'warning',
                                            loaderBg: '#1ca5df', 
                                            position:"top-right",
                                            allowToastClose: true,
                                            stack: false
                                    })
                                }
                                $(".promo .codepromo").html(reductionCoupon.toFixed(2)+" DH");
                                $(".total-to-pay").html(((total) - (amount) - (reductionCoupon)) + (shippingFees) + (shippingTips) + " DH");

                                
                            }
                        });
               
    }
    else{
        alert("Veuillez rajouter des produit au panier");
    }
                            

                    });

  
})
    </script>

<script>

document.addEventListener("turbo:load", function() {
var collectMap;
var collectGeocoder;

function initCollectMap() {
  collectMap = new google.maps.Map(document.getElementById("collectMap"), {
    center: { lat: centerLatCollect, lng: centerLngCollect }, // Set initial map center
    zoom: 8, // Set initial zoom level
  });

  

  collectMap.addListener("click", function (event) {
    
    collectPlaceMarker(event.latLng);
    getCollectAddress(event.latLng);
  });
}

window.addEventListener('resize', function() {
  google.maps.event.trigger(collectMap, 'resize');
});

function collectPlaceMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: collectMap,
  });
  collectMap.panTo(location);
}

function getCollectAddress(latLng) {
    collectGeocoder = new google.maps.Geocoder();
  collectGeocoder.geocode({ location: latLng }, function (results, status) {
    console.log(results);
    if (status === "OK") {
      if (results[0]) {
        console.log(results[0].formatted_address);
      } else {
        console.log("No results found");
      }
    } else {
      console.log("Geocoder failed due to: " + status);
    }
  });
}

initCollectMap();



var shippingMap;
var shippingGeocoder;

function initShippingMap() {
  shippingMap = new google.maps.Map(document.getElementById("shippingMap"), {
    center: { lat: centerLatShipping, lng: centerLngShipping }, // Set initial map center
    zoom: 8, // Set initial zoom level
  });

  

  shippingMap.addListener("click", function (event) {
    
    shippingPlaceMarker(event.latLng);
    getShippingAddress(event.latLng);
  });
}

window.addEventListener('resize', function() {
  google.maps.event.trigger(shippingMap, 'resize');
});

function shippingPlaceMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: shippingMap,
  });
  shippingMap.panTo(location);
}

function getShippingAddress(latLng) {
    shippingGeocoder = new google.maps.Geocoder();
  shippingGeocoder.geocode({ location: latLng }, function (results, status) {
    console.log(results);
    if (status === "OK") {
      if (results[0]) {
        console.log(results[0].formatted_address);
      } else {
        console.log("No results found");
      }
    } else {
      console.log("Geocoder failed due to: " + status);
    }
  });
}

initShippingMap();


$("#modalShippingMap").click(function(){
    $("#shippingMap").removeClass("d-none");
    $("#collectMap").addClass("d-none");
});

$("#modalCollectMap").click(function(){
    $("#shippingMap").addClass("d-none");
    $("#collectMap").removeClass("d-none");
});

});
</script>


<!-- Modal -->
<div class="modal fade" id="collectMapModal" tabindex="-1" aria-labelledby="collectMapModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl" style="width:800px;">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="collectMapModalLabel">Cordonnées de collect</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div id="collectMap"></div>
        <div id="shippingMap"  class="d-none"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
        <button type="button" class="btn btn-primary">Séléctionner</button>
      </div
    </div>
  </div>
</div>



{% endblock %}