src/Flexy/FrontBundle/Themes/IlaveU/templates/cart/cart.html.twig line 1

  1. {% extends "@Flexy/FrontBundle/Themes/IlaveU/templates/layout.html.twig"  %}
  4. {% block stylesheets %}
  6.     {{parent()}}
  7.     <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" />
  8.     <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" />
  9.     <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" />
  11. {% endblock %}
  13. {% block body %}
  16.     <style>
  18. #collectMap,#shippingMap {
  19.   width: 100%;
  20.   height: 400px;
  21. }
  22.     .pay-with-wallet .item{
  23.         padding:10px 7px;
  24.         margin:0 10px;
  25.         font-weight:bold;
  26.         background:#45dae9;
  27.         color:white;
  28.         border-radius:50px;
  29.         text-align:center;
  30.         font-size:14px;
  31.     }
  32.     .pay-with-wallet .item.selected{
  33.         
  34.         background:#febc4a;
  35.     }
  37.     .tips-shipping-agent .item{
  38.         padding:10px 15px;
  39.         margin:0 10px;
  40.         font-weight:bold;
  41.         background:#45dae9;
  42.         color:white;
  43.         border-radius:50px;
  44.         text-align:center;
  45.     }
  46.     .tips-shipping-agent .item.selected{
  47.         
  48.         background:#febc4a;
  49.     }
  52. .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot{
  53.     background:#d5d5d5;
  54. }
  56. .owl-dots {
  57.      bottom:-35px; 
  58. }
  59.     .choices-shipping{
  60.         font-size:13px;
  61.     }
  62.    .choices-shipping div div {
  63.     /* border: 2px dotted #ccc; */
  64.     padding: 20px;
  65.     background: #f2f2f2;
  66. }
  68.     .choices-shipping div div.active {
  69.     background-color: #45dae9;
  70.     border-color: #29cedf;
  71.     color: white;
  72. }
  73.     
  74.     .jq-toast-wrap {
  75.     display: block;
  76.     position: fixed;
  77.     width: 500px;
  78.     pointer-events: none!important;
  79.     letter-spacing: normal;
  80.     z-index: 9000!important;
  81. }
  83. .jq-icon-warning {
  84.     
  85.     background-color: #9a0062;
  86. }
  87.     </style>
  89.     <div 
  90.         class="body-wrapper" >
  92.         <!-- Begin Li's Breadcrumb Area -->
  93.         <div class="breadcrumb-area">
  94.             <div class="container">
  95.                 <ul id="progressbar">
  96.                     <li class="active">Livraison
  97.                     </li>
  98.                     <li>Paiement et coordonnées</li>
  99.                     <li>Resumé</li>
  100.                 </ul>
  101.             </div>
  102.         </div>
  103.         <!-- Li's Breadcrumb Area End Here -->
  104.         <!--Shopping Cart Area Strat-->
  105.         <div class="Shopping-cart-area pt-60 pb-60">
  106.             <div class="container">
  107.                 <div class="row ">
  108.                     <div class="col-12">
  109.                         <form action="#">
  110.                             <div class="table-content table-responsive d-none">
  111.                                 <table class="table table-striped">
  112.                                     <thead>
  113.                                         <tr>
  114.                                             <th class="li-product-remove">Supprimer</th>
  115.                                             <th class="li-product-thumbnail">images</th>
  116.                                             <th class="cart-product-name">Product</th>
  117.                                             <th class="li-product-price">Prix unitaire</th>
  118.                                             <th class="li-product-quantity">Quantité</th>
  119.                                             <th class="li-product-subtotal">Total</th>
  120.                                         </tr>
  121.                                     </thead>
  122.                                     <tbody
  123.                                         class="cart"><!-- LocalStorage Cart Items -->
  124.                                     </tbody>
  125.                                 </table>
  126.                             </div>
  127.                             
  130.                                                 
  132.                             <div class="row">
  135.                                 <div class="col-md-7 ">
  137.                                     <div class="row">
  138.                                     <div class="col-12">
  141.                                     <!--Accordion Start-->
  142.                                 <p style="font-weight:bold;">Avez-vous un code promo? <span id="showcoupon" style="cursor:pointer;">Cliquez ici pour saisir votre code</span></p>
  143.                                 <div id="checkout_coupon" class="coupon-checkout-content">
  144.                                     <div class="coupon-info">
  145.                                         <div class="input-group">
  146.                                             <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="">
  147.                                             <button class="btn btn-success orderPreview" type="button" id="button-codeCoupon">Appliquer</button>
  148.                                         </div>
  149.                                         </div>
  150.                                     </div>
  151.                                     </div>
  152.                                 </div>
  153.                                 <!--Accordion End-->
  155.                                         
  156.                                     
  157.                                 
  159.                                     <div class="row choices-shipping" style="margin-bottom:40px; ">
  160.                                             {% for singleShippingMethod in shippingMethods %}
  161.                                                 <div  class="col-6 mt-4" >
  162.                                                    <div style="min-height:180px;" data-id="{{singleShippingMethod.id}}" class="shippingMethod {% if singleShippingMethod == shippingMethods|first %}active{% endif %}">
  163.                                                      <h4>{{singleShippingMethod.name}}</h4>
  164.                                                     <ul>
  165.                                                     <li>
  166.                                                         {% set shippingDurationValue = singleShippingMethod.shippingDuration %}
  167.                                                         {% set shippingDurationUnit = "H" %}
  168.                                                     {% if shippingDurationValue < 1 %}
  169.                                                         {% set shippingDurationValue = 60 * singleShippingMethod.shippingDuration  %}
  170.                                                         {% set shippingDurationUnit = "Min" %}
  171.                                                     {% endif %}
  172.                                                     Temps d’attente du Speeder <span class="float-right slot">{{shippingDurationValue}} {{shippingDurationUnit}}</span></li>
  173.                                                     <li  class="">Récuperation de la commande <span class="float-right">{{singleShippingMethod.preparationDuration}} H</span></li>
  174.                                                     <li>Livraison en <span class="float-right">{{singleShippingMethod.processingDuration}} H</span></li>
  175.                                                     {% if singleShippingMethod.shippingRules|length > 0 %}
  176.                                                     <li style="line-height: 15px;"><small>{{singleShippingMethod.description}}</small></li>
  177.                                                     {% endif %}
  178.                                                 </ul>
  179.                                                    </div>
  181.                                                 
  182.                                                 </div>
  183.                                                 {% endfor %}
  184.                                                 
  185.                                             </div>
  186.                                     <div class="row" >
  187.                                     <div class="item aos-init aos-animate  col-6" id="accordionRecovery" data-aos="fade-up">
  188.                                         <h6>Informations de récupération</h6>
  189.                                         <div class="bg-white">
  190.                                             <div class="row">
  191.                                                 <div class="box col-sm-5 col-md-12 col-lg-5">
  192.                                                     <label>Date</label>
  193.                                                     <div class="d-flex">
  194.                                                         <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"    />
  195.                                                         
  196.                                                     </div>
  197.                                                 </div>
  198.                                                 <div class="box col-sm-7 col-md-12 col-lg-7">
  199.                                                     <label>Heure</label>
  200.                                                     <span id="recovery_slot">
  201.                                                         <select id="receive_time" class="custom-select custom-select-recieve" name="collectTime" data-day="0">
  202.                                                             <option value="08:00" >Sélectionner un crénau</option>
  203.                                                         </select>
  204.                                                     </span>
  205.                                                 </div>
  206.                                             </div>
  207.                                             
  208.                                             <div class="row justify-content-center">
  209.                                                 <div class="form-group box col-sm-12">
  210.                                                     <label>
  211.                                                         <b>Adresse de récupération</b>
  212.                                                     </label>
  213.                                                     <!-- Button trigger modal -->
  214.                                                     
  215.                                                         <select class="mb-2" name="collectCityRegion" >
  216.                                                             {% for cityRegion in cityRegions %}
  217.                                                                 <option data-lat="{{cityRegion.lat}}" data-lng="{{cityRegion.lng}}" value="{{cityRegion.id}}">{{cityRegion.name}}</option>
  218.                                                             {% endfor %}
  219.                                                         </select>
  220.                                                         <input type="text" id="collect_address" name="collect_address" value="Maarif, Casablanca, Maroc" class="form-control w-100" >
  221.                                                         <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>
  222.     
  223.                                                 </div>
  224.                                             </div>
  226.                                         </div>
  229.                                     </div>
  231.                                     <div class="item aos-init aos-animate col-6" id="accordionRecovery" data-aos="fade-up">
  232.                                         <h6>Informations de livraison</h6>
  233.                                         <div class="bg-white"> 
  234.                                             
  235.                                             <div class="row">
  236.                                                 <div class="box col-sm-5 col-md-12 col-lg-5">
  237.                                                     <label>Date</label>
  238.                                                     <div class="d-flex">
  239.                                                         <input type="text" class="form-control datedropper chooseDate"  name="startDeliveryAt" value="{{"now"|date('Y/m/d')}}"   />
  240.                                                         
  241.                                                     </div>
  242.                                                 </div>
  243.                                                 <div class="box col-sm-7 col-md-12 col-lg-7">
  244.                                                     <label>Heure</label>
  245.                                                     <span id="recovery_slot">
  246.                                                         <select id="receive_time" class="custom-select custom-select-recieve" name="shippingTime" data-day="0">
  247.                                                             <option value="08:00" >Sélectionner un crénau</option>
  248.                                                         </select>
  249.                                                     </span>
  250.                                                 </div>
  251.                                             </div>
  252.                                             
  253.                                             <div class="row justify-content-center">
  254.                                                 <div class="form-group box col-sm-12">
  255.                                                     <label>
  256.                                                         <b>Adresse de livraison</b>
  257.                                                     </label>
  258.                                                     
  259.                                                         <select class="mb-2" name="shippingCityRegion" >
  260.                                                             {% for cityRegion in cityRegions %}
  261.                                                                 <option data-lat="{{cityRegion.lat}}" data-lng="{{cityRegion.lng}}" value="{{cityRegion.id}}">{{cityRegion.name}}</option>
  262.                                                             {% endfor %}
  263.                                                         </select>
  264.                                                         <input type="text" id="shipping_address" name="shipping_address" value="Maarif, Casablanca, Maroc" class="form-control w-100 " />
  265.                                                             
  266.                                                         
  267.                                                     
  268.                                                     <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>
  269.                                                 </div>
  270.                                             </div>
  272.                                         </div>
  275.                                     </div>
  277.                                     
  278.                                     {% if is_granted("ROLE_CUSTOMER") and customer != null %}
  279.                                     <div class="col-12 mt-5" >
  280.                                         <h6>Payer avec ma wallet {{customer.credit}} DH</h6>
  281.                                         <div class="owl-carousel pay-with-wallet d-none mt-4">
  282.                                             {% if customer.credit > 0 %}
  283.                                             {% set counterCredit = 0 %}
  284.                                                     {% for i in 0..totalCart %}
  285.                                                         {% if
  286.                                                          (customer.credit >= i and customer.credit <= totalCart) or
  287.                                                          (customer.credit >= i and customer.credit >= totalCart)
  288.                                                          %}
  289.                                                             <div data-value="{{i}}" class="item"> {{i}} DH</div>
  290.                                                             {% set counterCredit = counterCredit + i %}
  291.                                                          {% endif %}
  292.                                                 
  293.                                             {% endfor %}
  294.                                             {% endif %}
  295.                                             
  296.                                             
  297.                                             </div>
  299.                                     </div>
  300.                                     {% endif %}
  301.                                     </div>
  304.                                     
  308.                                     <hr>
  310.                                     
  311.                                 </div>
  313.                                  <div class="col-lg-5 col-12">
  314.                             <div class="your-order">
  315.                                 <h3>Votre commande</h3>
  317.                                 <div class="shipping" >
  318.                                
  319.                                 </div>
  322.                                 <div class="your-order-table table-responsive">
  323.                                     <table class="table">
  324.                                         <thead>
  325.                                             <tr>
  326.                                                 <th class="cart-product-name">Produit</th>
  327.                                                 <th class="cart-product-total">Total</th>
  328.                                             </tr>
  329.                                         </thead>
  330.                                         <tbody class="cart-checkout">
  332.  
  333.                                         </tbody>
  334.                                         <tfoot>
  335.                                             <tr class="cart-subtotal">
  336.                                                 <th>Sous total</th>
  337.                                                 <td><span class="amount total-checkout total">0,00 MAD </span></td>
  338.                                             </tr>
  339.                                             <tr class="cart-subtotal promo">
  340.                                                 <th>Reduction coupon</th>
  341.                                                 <td><span class="amount codepromo">0,00 MAD </span></td>
  342.                                             </tr>
  343.                                             {# <tr class="cart-subtotal">
  344.                                                 <th>Paiement par wallet</th>
  345.                                                 <td><span class="amount wallet-payment">0,00 MAD </span></td>
  346.                                             </tr> #}
  348.                                             {# <tr class="cart-subtotal">
  349.                                                 <th>Pourboire pour le livreur</th>
  350.                                                 <td><span class="amount shipping-tips">0,00 MAD </span></td>
  351.                                             </tr> #}
  352.                                             
  353.                                             <tr class="cart-subtotal">
  354.                                                 <th>Frais de livraison</th>
  355.                                                 <td><span class="amount shipping-method-fees">0,00 MAD </span></td>
  356.                                             </tr>
  357.                                             <tr class="order-total">
  358.                                                 <th>Montant á payer</th>
  359.                                                 <td><strong><span class="amount total-checkout total-to-pay ">0,00 MAD</span></strong></td>
  360.                                             </tr>
  361.                                             
  362.                                             <tr>
  363.                                                 <td colspan="2" ><a href="#" class="save-button btn btn-primary d-block">Continuer</a></td>
  364.                                             </tr>
  365.                                         </tfoot>
  366.                                     </table>
  367.                                     
  368.                                 </div>
  369.                                 
  370.                             </div>
  371.                         </div>
  372.                             </div>
  373.                         </form>
  374.                     </div>
  375.                 </div>
  376.             </div>
  377.         </div>
  378.         <!--Shopping Cart Area End-->
  380.     </div>
  381.     <!-- Body Wrapper End Here -->
  385.     <!-- Button trigger modal -->
  389. {% endblock %}
  394. {% block javascripts %}
  395.     {{parent()}}
  396.     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBFliT4Ug0Ugto5davRC7krsyMhTfkI-L4&libraries=places"></script>
  397.     <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>
  398.     <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>
  399.     <script src="{{asset('flexy/js/datedropper/datedropper-javascript.js')}}"></script>
  400. <script src="{{asset('flexy/js/datedropper/datedropper-javascript-lang-FR.js')}}"></script>
  404.     <script>
  405.     document.addEventListener("turbo:load", function() {
  407. var isCollectReadyForCheckout = false;
  408. var isShippingReadyForCheckout = false;
  409. new dateDropper({
  410.   lang:"fr",
  411.   //format: "dd/m/y",
  412.   selector: "input[name='startProcessingAt']",
  413.   minDate: "{{"yesterday"|date("Y-m-d")}}",
  414.   //autoFill:false,
  415.   expandable: true,
  416.   onChange: function (res) {
  417.     $("input[name='startProcessingAt']").trigger("change");
  418.   }
  419. });
  420. new dateDropper({
  421.   lang:"fr",
  422.   //format: "dd/m/y",
  423.   selector: "input[name='startDeliveryAt']",
  424.   //autoFill:false,
  425.   expandable: true,
  426.   onChange: function (res) {
  427.     $("input[name='startProcessingAt']").trigger("change");
  428.   }
  429. });
  430. $(document).ready(function(){  
  431.     
  432.   $(".tips-shipping-agent").owlCarousel({
  433.     dots:true,
  434.     items:5,
  435.     nav:false,
  436.     onChanged:function(){
  437.         $(".tips-shipping-agent").removeClass("d-none");
  438.     }
  439.   });
  441.   $(".pay-with-wallet").owlCarousel({
  442.     dots:true,
  443.     items:7,
  444.     nav:false,
  445.     onChanged:function(){
  446.         $(".pay-with-wallet").removeClass("d-none");
  447.     }
  448.   });
  449.   
  452.     $(".pay-with-wallet .item").click(function(){
  453.     $(".pay-with-wallet .item").removeClass("selected");
  454.      $(this).addClass("selected");
  455.      walletPayment = parseFloat($(this).attr("data-value"));
  456.      
  457.      $(".wallet-payment").html( (walletPayment) + " DH");
  458.      $(".total-to-pay").html( ((total) - (amount) - (reductionCoupon) - (walletPayment)) + (shippingFees) + (shippingTips) + " DH");
  459.   });
  462.        var inputCollectAddress = document.getElementById('collect_address');
  463.        var inputShippingAddress = document.getElementById('shipping_address');
  464.        
  465. var optionsCollect = {
  466.   //types: ['(cities)'],
  467.   componentRestrictions: {country: 'ma'}
  468. };
  470. var optionsShipping = {
  471.   //types: ['(cities)'],
  472.   componentRestrictions: {country: 'ma'}
  473. };
  476.  var centerLatCollect = $("select[name='collectCityRegion']").find("option:selected").attr("data-lat"); // example latitude
  477.   var centerLngCollect = $("select[name='collectCityRegion']").find("option:selected").attr("data-lng"); // example longitude
  479.    var centerLatShipping =$("select[name='shippingCityRegion']").find("option:selected").attr("data-lat"); // example latitude
  480.   var centerLngShipping =$("select[name='shippingCityRegion']").find("option:selected").attr("data-lng"); // example longitude
  483. var centerPointCollect = new google.maps.LatLng(centerLatCollect, centerLngCollect);
  484. var centerPointShipping = new google.maps.LatLng(centerLatShipping, centerLngShipping);
  486. // Set the desired radius in meters
  487. var radius = 10000; // 10 kilometers
  489. var boundsCollect = new google.maps.Circle({ center: centerPointCollect, radius: radius }).getBounds();
  490. var boundsShipping = new google.maps.Circle({ center: centerPointCollect, radius: radius }).getBounds();
  491.   $("select[name='collectCityRegion']").change(function(){
  492.     centerLatCollect = $("select[name='collectCityRegion']").find("option:selected").attr("data-lat");
  493.     
  494.     centerLngCollect = $("select[name='collectCityRegion']").find("option:selected").attr("data-lng");
  496.      centerPointCollect = new google.maps.LatLng(centerLatCollect, centerLngCollect);
  497.      boundsCollect = new google.maps.Circle({ center: centerPointCollect, radius: radius }).getBounds();
  499.   });
  501.     $("select[name='shippingCityRegion']").change(function(){
  502.     centerLatShipping = $("select[name='shippingCityRegion']").find("option:selected").attr("data-lat");
  503.     centerLngShipping = $("select[name='shippingCityRegion']").find("option:selected").attr("data-lng");
  504.      centerPointShipping = new google.maps.LatLng(centerLatShipping, centerLngShipping);
  505.      boundsShipping = new google.maps.Circle({ center: centerPointCollect, radius: radius }).getBounds();
  507.     
  508.   });
  518. var autocompleteCollect = new google.maps.places.Autocomplete(inputCollectAddress, optionsCollect);
  519. var autocompleteShipping = new google.maps.places.Autocomplete(inputShippingAddress, optionsShipping);
  521. google.maps.event.addListener(autocompleteCollect, 'place_changed', function() {
  522.     
  523.     
  524.     var lngCollect = autocompleteCollect.getPlace().geometry.location.lng();
  525.     var latCollect = autocompleteCollect.getPlace().geometry.location.lat();
  527.         if (autocompleteCollect.getPlace() && boundsCollect && boundsCollect.contains(autocompleteCollect.getPlace().geometry.location)) {
  528.             // Place falls within the specified radius
  529.             isCollectReadyForCheckout = true;
  530.             console.log('Place collect is within the specified radius:', autocompleteCollect.getPlace());
  531.         } else {
  532.             isCollectReadyForCheckout = false;
  533.             // Place is outside the specified radius
  534.             console.log('Place collect is outside the specified radius:', autocompleteCollect.getPlace());
  535.         }
  536.     
  537. });
  538. google.maps.event.addListener(autocompleteShipping, 'place_changed', function() {
  539.     
  540.     
  541.     var lngShipping = autocompleteShipping.getPlace().geometry.location.lng();
  542.     var latShipping = autocompleteShipping.getPlace().geometry.location.lat();
  544.     if (autocompleteShipping.getPlace() && boundsShipping && boundsShipping.contains(autocompleteShipping.getPlace().geometry.location)) {
  545.             // Place falls within the specified radius
  546.             isShippingReadyForCheckout = true;
  547.             console.log('Place shipping is within the specified radius:', autocompleteShipping.getPlace());
  548.         } else {
  549.              isShippingReadyForCheckout = false;
  550.             // Place is outside the specified radius
  551.             console.log('Place shipping is outside the specified radius:', autocompleteShipping.getPlace());
  552.         }
  554.     
  555. });
  556.     
  557.     $(".choices-shipping div div").click(function(){
  558.         
  559.             $(".choices-shipping div div").removeClass("active");
  560.             $(this).addClass("active");
  561.         
  562.             total = cartLS.total();
  563.             var value = $(this).val();
  564.             //shippingFees = parseFloat($(this).find(":selected").attr("data-price")) ;
  565.             //$(".shipping-method-fees").html(shippingFees+ " DH");
  566.             //$(".total-to-pay").html(((total) - (amount) - (reductionCoupon)) + (shippingFees) + " DH");
  567.             //$("#cash").trigger("keyup");
  568.             $("input[name='startDeliveryAt']").val($("input[name='startProcessingAt']").val());
  569.             $("input[name='startProcessingAt']").trigger("change");
  570.     });
  571.     $(".save-button").click(function(){
  572.     
  574.     if((isCollectReadyForCheckout && isShippingReadyForCheckout) || 1 == 1){
  575.         
  576.    
  577.                         
  578.                         
  579. $.ajax({
  580.                             url:"{{path('pos_cart_checkout')}}",
  581.                             method:"POST",
  582.                             data:{
  583.                                 
  584.                                 
  585.                                 orderItems: cartLS.list(),
  586.                                 shippingMethod:$(".shippingMethod.active").attr("data-id"),
  587.                                 deliveryType:"collecte-and-delivery",
  588.                                 
  589.                                 
  590.                                 //reduction:$("#reduction").val(),
  591.                                 //payedAmount:$("#cash").val(),
  592.                                 codeCoupon:$("input[name=codeCoupon]").val(),
  593.                                 startProcessingAt: $("input[name=startProcessingAt]").val()+" "+$("select[name='collectTime']").find("option:selected").val(),
  594.                                 startDeliveryAt:$("input[name=startDeliveryAt]").val()+" "+$("select[name='shippingTime']").find("option:selected").val(),
  595.                                 shippingAddress:$("input[name=shipping_address]").val(),
  596.                                 collectAddress:$("input[name=collect_address]").val(),
  597.                                 cityRegionCollect:$("select[name='collectCityRegion']").find("option:selected").val(),
  598.                                 cityRegionShipping:$("select[name='shippingCityRegion']").find("option:selected").val(),
  599.                                 shippingTips:parseFloat($(".tips-shipping-agent .item.selected").attr("data-value")),
  600.                                 walletPaymentAmount:parseFloat($(".pay-with-wallet .item.selected").attr("data-value")),
  602.                                 isReadyForCheckout: true
  603.                                 
  604.                             },
  605.                             success:function(result){
  606.  
  607.                                if(result.status == "success");
  608.                                window.location.href = "{{path('checkout')}}";
  609.                             }
  610.                         });    
  611.  }else{
  612. $.toast({
  613.                                             heading: 'Merci de verifier vos cordonnées',
  614.                                             text: "Vos cordonnées quartiers ou adresses ne sont pas valident merci de verifier !",
  615.                                             showHideTransition: 'slide',
  616.                                             hideAfter:12000,
  617.                                             icon: 'warning',
  618.                                             loaderBg: '#1ca5df', 
  619.                                             position:"top-right",
  620.                                             allowToastClose: true,
  621.                                             stack: false
  622.                                     })
  624.  }
  626.    
  627. });
  628.     $("input[name='startProcessingAt']").change(function(){
  629.    
  630. $.toast().reset('all');
  631.     
  632.                         
  633.     $(".checkout-area").html("");
  634.     
  635.     var isWallet = 0;
  636.     if($("#isWallet").is(':checked')){
  637.         isWallet = 1;
  638.     }
  639.                         
  640. $.ajax({
  641.                             url:"{{path('pos_cart_checkout')}}",
  642.                             method:"POST",
  643.                             data:{
  644.                                 
  645.                                 orderItems: cartLS.list(),
  646.                                 shippingMethod:$(".shippingMethod.active").attr("data-id"),
  647.                                 deliveryType:"collecte-and-delivery",
  648.                                 
  649.                                 
  650.                                 //reduction:$("#reduction").val(),
  651.                                 //payedAmount:$("#cash").val(),
  652.                                 codeCoupon:$("input[name=codeCoupon]").val(),
  653.                                 startProcessingAt: $("input[name=startProcessingAt]").val()+" "+$("select[name='collectTime']").find("option:selected").val(),
  654.                                 startDeliveryAt:$("input[name=startDeliveryAt]").val()+" "+$("select[name='shippingTime']").find("option:selected").val(),
  655.                                 isChooseDatePreview: true
  656.                                 
  657.                             },
  658.                             success:function(result){
  659.                                 
  660.                                 $("input[name='startDeliveryAt']").attr("data-dd-opt-min-date",result.minDateShipping);
  661.                                 $("input[name='startDeliveryAt']").attr("data-dd-opt-max-date","{{ "next year"| date('Y-m-d') }}");
  662.                                 $("input[name='startDeliveryAt']").attr("data-dd-opt-default-date",result.shippingDate);
  663.                                 
  664.                                 //$("#shipping-method").find("option:selected").attr("data-price",result.shippingFees);
  665.                                 shippingFees = parseFloat(result.shippingFees) ;
  666.                                 $(".shipping-method-fees").html(shippingFees.toFixed(2)+ " DH");
  667.                                 $(".total-to-pay").html(((total) - (amount) - (reductionCoupon)) + (shippingFees) + (shippingTips) + " DH");
  668.                                 //$("select[name='collectTime']").modal('show');
  669.                                 $("select[name='collectTime']").html(result.collectHoursHTML);
  670.                                 $("select[name='shippingTime']").html(result.shippingHoursHTML);
  671.                                 $("input[name='startProcessingAt']").val(result.collectDate);
  672.                                 $("input[name='startDeliveryAt']").val(result.shippingDate);
  673.                                 
  674.                                 /*         
  675.                                 $("input[name='startDeliveryAt']").dateDropper({
  676.                                     large: true,
  677.                                     lang: 'fr',
  678.                                     theme: 'datedropper',
  679.                                     format: "d-m-Y",
  680.                                     expandable: true,
  681.                                     rangeStart: result.shippingDate,
  682.                                     rangeEnd: "{{ " next year "|date('Y/m/d') }}",
  683.                                     disabledDays: "{{settings.get().getExcludeDatesOnlyDates()|join(',')}}",
  684.                                     disabledWeekDays: '6'
  685.                                 });
  686.                                     */
  687.                                 
  688.                                 if(result.messages.length > 0){
  689.                                     $.toast({
  690.                                             heading: 'Décalage de date',
  691.                                             text: result.messages,
  692.                                             showHideTransition: 'slide',
  693.                                             hideAfter:12000,
  694.                                             icon: 'warning',
  695.                                             loaderBg: '#1ca5df', 
  696.                                             position:"top-right",
  697.                                             allowToastClose: true,
  698.                                             stack: false
  699.                                     })
  700.                                    
  701.                                 }
  702.                             }
  703.                         });                 
  704.     
  705. });
  706.     $("input[name='startDeliveryAt']").change(function(){
  707.    
  708. $.toast().reset('all');
  709.     
  710.     var isWallet = 0;
  711.     if($("#isWallet").is(':checked')){
  712.         isWallet = 1;
  713.     }
  714.                         
  715. $.ajax({
  716.                             url:"{{path('pos_cart_checkout')}}",
  717.                             method:"POST",
  718.                             data:{
  719.                                 
  720.                                 orderItems: cartLS.list(),
  721.                                 shippingMethod:$(".shippingMethod.active").attr("data-id"),
  722.                                 deliveryType:$("select[name='delivery-type'] option:selected").val(),
  723.                                 
  724.                                 
  725.                                 //reduction:$("#reduction").val(),
  726.                                 //payedAmount:$("#cash").val(),
  727.                                 startProcessingAt: $("input[name=startProcessingAt]").val()+" "+$("select[name='collectTime']").find("option:selected").val(),
  728.                                 startDeliveryAt:$("input[name=startDeliveryAt]").val()+" "+$("select[name='shippingTime']").find("option:selected").val(),
  729.                                 isChooseDatePreview: true
  730.                                 
  731.                             },
  732.                             success:function(result){
  733.                                 
  734.                                 $("input[name='startDeliveryAt']").attr("data-dd-opt-min-date",result.minDateShipping);
  735.                                 $("input[name='startDeliveryAt']").attr("data-dd-opt-max-date","{{ "next year"| date('Y-m-d') }}");
  736.                                 $("input[name='startDeliveryAt']").attr("data-dd-opt-default-date",result.shippingDate);
  737.                                 
  738.                                 //$("#shipping-method").find("option:selected").attr("data-price",result.shippingFees);
  739.                                 shippingFees = parseFloat(result.shippingFees) ;
  740.                                 $(".shipping-method-fees").html(shippingFees.toFixed(2)+ " DH");
  741.                                 $(".total-to-pay").html(((total) - (amount) - (reductionCoupon)) + (shippingFees) + (shippingTips) + " DH");
  742.                                 //$("select[name='collectTime']").modal('show');
  743.                                 //$("select[name='collectTime']").html(result.collectHoursHTML);
  744.                                 $("select[name='shippingTime']").html(result.shippingHoursHTML);
  745.                                 //$("input[name='startProcessingAt']").val(result.collectDate);
  746.                                 $("input[name='startDeliveryAt']").val(result.shippingDate);
  747.                                 $("select[name='shippingTime']").find("option:first").attr("selected",true);
  748.                                 
  749.                                 /*         
  750.                                 $("input[name='startDeliveryAt']").dateDropper({
  751.                                     large: true,
  752.                                     lang: 'fr',
  753.                                     theme: 'datedropper',
  754.                                     format: "d-m-Y",
  755.                                     expandable: true,
  756.                                     rangeStart: result.shippingDate,
  757.                                     rangeEnd: "{{ " next year "|date('Y/m/d') }}",
  758.                                     disabledDays: "{{settings.get().getExcludeDatesOnlyDates()|join(',')}}",
  759.                                     disabledWeekDays: '6'
  760.                                 });
  761.                                     */
  762.                                 
  763.                                 if(result.messages.length > 0){
  764.                                     $.toast({
  765.                                             heading: 'Décalage de date',
  766.                                             text: result.messages,
  767.                                             showHideTransition: 'slide',
  768.                                             hideAfter:12000,
  769.                                             icon: 'warning',
  770.                                             loaderBg: '#1ca5df', 
  771.                                             position:"top-right",
  772.                                             allowToastClose: true,
  773.                                             stack: false
  774.                                     })
  775.                                    
  776.                                 }
  777.                             }
  778.                         });                 
  779.     
  780. });
  781. $("select[name='collectTime']").change(function(){
  782.     
  783.                         
  784.                         
  785. $.ajax({
  786.                             url:"{{path('pos_cart_checkout')}}",
  787.                             method:"POST",
  788.                             data:{
  789.                                 
  790.                                 
  791.                                 orderItems: cartLS.list(),
  792.                                 shippingMethod:$(".shippingMethod.active").attr("data-id"),
  793.                                 deliveryType:$("select[name='delivery-type'] option:selected").val(),
  794.                                 
  795.                                 //reduction:$("#reduction").val(),
  796.                                 //payedAmount:$("#cash").val(),
  797.                                 startProcessingAt: $("input[name=startProcessingAt]").val()+" "+$("select[name='collectTime']").find("option:selected").val(),
  798.                                 startDeliveryAt:$("input[name=startDeliveryAt]").val(),
  799.                                 isChooseDatePreview: true
  800.                                 
  801.                             },
  802.                             success:function(result){
  803.                                 $("input[name='startDeliveryAt']").attr("data-dd-opt-min-date",result.minDateShipping);
  804.                                 $("input[name='startDeliveryAt']").attr("data-dd-opt-max-date","{{ "next year"| date('Y-m-d') }}");
  805.                                 $("input[name='startDeliveryAt']").attr("data-dd-opt-default-date",result.shippingDate);
  806.                                 //$("select[name='collectTime']").modal('show');
  807.                                 //$("select[name='collectTime']").html(result.collectHoursHTML);
  808.                                 $("select[name='shippingTime']").html(result.shippingHoursHTML);
  809.                                 //$("input[name='startProcessingAt']").val(result.collectDate);
  810.                                 $("input[name='startDeliveryAt']").val(result.shippingDate);
  811.                             }
  812.                         });                 
  813.    
  814. });
  815. $("input[name='startProcessingAt']").trigger("change");
  816. }); 
  819. $(".orderPreview").click(function(){
  820.     $(".checkout-area").html("");
  821.     
  822.     if(cartLS.list().length > 0){                        
  823. $.ajax({
  824.                             url:"{{path('pos_cart_checkout')}}",
  825.                             method:"POST",
  826.                             data:{
  827.                                 shippingMethod:$(".shippingMethod.active").attr("data-id"),
  828.                                 codeCoupon:$("input[name=codeCoupon]").val(),
  829.                                 isPromoPreview: true
  830.                             },
  831.                             success:function(result){
  832.                                 reductionCoupon = 0;
  833.                                 if(result.coupon ){
  834.                                     if(result.coupon.typeReduction=="percent"){
  835.                                         reductionCoupon = (total / 100) * result.coupon.valueReduction;
  836.                                     }else{
  837.                                         reductionCoupon = result.coupon.valueReduction;
  838.                                     }
  840.                                     $("input[name='codeCoupon']").attr("data-coupon-value",result.coupon.valueReduction);
  841.                                     $("input[name='codeCoupon']").attr("data-type-value",result.coupon.typeReduction);
  842.                                     
  843.                                     $.toast({
  844.                                             heading: result.coupon.code,
  845.                                             text: result.message,
  846.                                             showHideTransition: 'slide',
  847.                                             hideAfter:12000,
  848.                                             icon: 'success',
  849.                                             loaderBg: '#1ca5df', 
  850.                                             position:"top-right",
  851.                                             allowToastClose: true,
  852.                                             stack: false
  853.                                     })
  854.                                 }else{
  855.                                     $.toast({
  856.                                             heading: "Remarque",
  857.                                             text: result.message,
  858.                                             showHideTransition: 'slide',
  859.                                             hideAfter:12000,
  860.                                             icon: 'warning',
  861.                                             loaderBg: '#1ca5df', 
  862.                                             position:"top-right",
  863.                                             allowToastClose: true,
  864.                                             stack: false
  865.                                     })
  866.                                 }
  867.                                 $(".promo .codepromo").html(reductionCoupon.toFixed(2)+" DH");
  868.                                 $(".total-to-pay").html(((total) - (amount) - (reductionCoupon)) + (shippingFees) + (shippingTips) + " DH");
  870.                                 
  871.                             }
  872.                         });
  873.                
  874.     }
  875.     else{
  876.         alert("Veuillez rajouter des produit au panier");
  877.     }
  878.                             
  880.                     });
  882.   
  883. })
  884.     </script>
  886. <script>
  888. document.addEventListener("turbo:load", function() {
  889. var collectMap;
  890. var collectGeocoder;
  892. function initCollectMap() {
  893.   collectMap = new google.maps.Map(document.getElementById("collectMap"), {
  894.     center: { lat: centerLatCollect, lng: centerLngCollect }, // Set initial map center
  895.     zoom: 8, // Set initial zoom level
  896.   });
  898.   
  900.   collectMap.addListener("click", function (event) {
  901.     
  902.     collectPlaceMarker(event.latLng);
  903.     getCollectAddress(event.latLng);
  904.   });
  905. }
  907. window.addEventListener('resize', function() {
  908.   google.maps.event.trigger(collectMap, 'resize');
  909. });
  911. function collectPlaceMarker(location) {
  912.   var marker = new google.maps.Marker({
  913.     position: location,
  914.     map: collectMap,
  915.   });
  916.   collectMap.panTo(location);
  917. }
  919. function getCollectAddress(latLng) {
  920.     collectGeocoder = new google.maps.Geocoder();
  921.   collectGeocoder.geocode({ location: latLng }, function (results, status) {
  922.     console.log(results);
  923.     if (status === "OK") {
  924.       if (results[0]) {
  925.         console.log(results[0].formatted_address);
  926.       } else {
  927.         console.log("No results found");
  928.       }
  929.     } else {
  930.       console.log("Geocoder failed due to: " + status);
  931.     }
  932.   });
  933. }
  935. initCollectMap();
  939. var shippingMap;
  940. var shippingGeocoder;
  942. function initShippingMap() {
  943.   shippingMap = new google.maps.Map(document.getElementById("shippingMap"), {
  944.     center: { lat: centerLatShipping, lng: centerLngShipping }, // Set initial map center
  945.     zoom: 8, // Set initial zoom level
  946.   });
  948.   
  950.   shippingMap.addListener("click", function (event) {
  951.     
  952.     shippingPlaceMarker(event.latLng);
  953.     getShippingAddress(event.latLng);
  954.   });
  955. }
  957. window.addEventListener('resize', function() {
  958.   google.maps.event.trigger(shippingMap, 'resize');
  959. });
  961. function shippingPlaceMarker(location) {
  962.   var marker = new google.maps.Marker({
  963.     position: location,
  964.     map: shippingMap,
  965.   });
  966.   shippingMap.panTo(location);
  967. }
  969. function getShippingAddress(latLng) {
  970.     shippingGeocoder = new google.maps.Geocoder();
  971.   shippingGeocoder.geocode({ location: latLng }, function (results, status) {
  972.     console.log(results);
  973.     if (status === "OK") {
  974.       if (results[0]) {
  975.         console.log(results[0].formatted_address);
  976.       } else {
  977.         console.log("No results found");
  978.       }
  979.     } else {
  980.       console.log("Geocoder failed due to: " + status);
  981.     }
  982.   });
  983. }
  985. initShippingMap();
  988. $("#modalShippingMap").click(function(){
  989.     $("#shippingMap").removeClass("d-none");
  990.     $("#collectMap").addClass("d-none");
  991. });
  993. $("#modalCollectMap").click(function(){
  994.     $("#shippingMap").addClass("d-none");
  995.     $("#collectMap").removeClass("d-none");
  996. });
  998. });
  999. </script>
  1002. <!-- Modal -->
  1003. <div class="modal fade" id="collectMapModal" tabindex="-1" aria-labelledby="collectMapModalLabel" aria-hidden="true">
  1004.   <div class="modal-dialog modal-xl" style="width:800px;">
  1005.     <div class="modal-content">
  1006.       <div class="modal-header">
  1007.         <h5 class="modal-title" id="collectMapModalLabel">Cordonnées de collect</h5>
  1008.         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  1009.       </div>
  1010.       <div class="modal-body">
  1011.         <div id="collectMap"></div>
  1012.         <div id="shippingMap"  class="d-none"></div>
  1013.       </div>
  1014.       <div class="modal-footer">
  1015.         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
  1016.         <button type="button" class="btn btn-primary">Séléctionner</button>
  1017.       </div
  1018.     </div>
  1019.   </div>
  1020. </div>
  1024. {% endblock %}