{# @var ea \EasyCorp\Bundle\EasyAdminBundle\Context\AdminContext #}
{% extends '@EasyAdmin/page/content.html.twig' %}


{% set percentageReductionValue = 0 %}
{% set customerValue = 0 %}
{% set deliveryDateValue = "" %}
{% set processingDateValue = "now"|date("Y-m-d") %}
{% set deliveryTypeValue = "on-store" %}
{% set paymentMethodValue = 0 %}
{% set shippingMethodValue = 0 %}
{% set agentValue = 0 %}
{% set cityRegionShippingValue = 0 %}
{% set cityRegionCollectValue = 0 %}
{% set commentValue = "" %}
{% set payedAmount  = 0 %}
{% set totalOrder  = 0 %}
{% set reductionCoupon  = 0 %}
{% set codeCoupon = "" %}
{% set credit = 0 %}
{% set processingCollectTimeValue = "08:00" %}
{% set processingShippingTimeValue = "08:00" %}



{% set urlSuccessOrder = ea_url().setController('App\\Flexy\\FrontBundle\\Themes\\'~settings.get.assetFolderName~'\\Controller\\ShopAdmin\\Order\\OrderCrudController').
                                setAction("index") %}


{% if order %}
{% set payedAmount  = order.payedAmount %}
{% set customerValue = order.customer.id %}
{% set percentageReductionValue = order.reduction  %}
{% set totalOrder  = order.totalAmount %}
{% set deliveryDateValue = order.startDeliveryAt|date("Y-m-d") %}
{% set processingDateValue = order.startProcessingAt|date("Y-m-d") %}
{% set processingCollectTimeValue = order.startProcessingAt|date("H:i") %}
{% set processingShippingTimeValue = order.startDeliveryAt|date("H:i") %}
{% set deliveryTypeValue = order.deliveryType %}

{% set reductionCoupon  = order.reductionOnCoupon %}
{% if order.coupon %}
    {% set codeCoupon = order.coupon.code %}
{% endif %}



{% if order.customerWalletPoints|length > 0 %}
        {% for customerWalletPoint in order.customerWalletPoints %}
            {% if customerWalletPoint.points > 0 %}
                {% set credit = credit + customerWalletPoint.points %}
            {% endif %}
        {% endfor %}
{% endif %}

{% if order.paymentMethod %}
{% set paymentMethodValue = order.paymentMethod.id %}
{% endif %}

{% if order.shippingMethod %}
{% set shippingMethodValue = order.shippingMethod.id %}
{% endif %}

{% if order.agent %}
{% set agentValue = order.agent.id %}

{% endif %}


{% if order.cityRegionCollect %}
{% set cityRegionCollect = order.cityRegionCollect.id %}

{% endif %}

{% if order.cityRegionShipping %}
{% set cityRegionShipping = order.cityRegionShipping.id %}

{% endif %}

{% set commentValue = order.description %}
{% endif %}



{% block head_stylesheets %}
{{parent()}}
<meta name="turbo-visit-control" content="reload">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
<!-- Or for RTL support -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.rtl.min.css" />
<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="flexy/js/datedropper/datedropper.min.css" />

<style>
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
    font-size: 12px;
    font-weight: bold;
}

.parent-filter-category .btn,
.parent-filter-category .btn:hover
{
    padding: 8px !important;
}


.filter-category .btn,
.filter-category .btn:hover
{
    padding: 4px 8px !important;
}

.parent-filter-category .btn,
.parent-filter-category .btn:hover
{
    
    font-weight: bold;
}


.cart .btn {
    padding: 2px 5px;
    border: none;
    box-shadow: none;
    background: #45dae8;
    color: white;
}
.cart .btn:hover{
    color: white;
}
.cart .btn.delete-product-from-cart{
    background:darkred;
}

.form-control {

    font-size: 0.775rem;
}

.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: #45dae8;
    color:white;
}

.datedropper {
  --dd-color1: #1ca5df !important;
  --dd-color2: white;
  --dd-color3: #4D4D4D;
  --dd-color4: white;
  --dd-radius: 6px;
  --dd-width: 180px;
  --dd-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.1);
}

label.error{
    color:darkred;
}

.btn-active{
    background: linear-gradient(180deg, #00d2ff 0%, #3a47d5 100%) !important;
}

.blocked{
    cursor: not-allowed;
}
table label{
    font-size:11px;
    white-space:nowrap;
}

.single-product .card{
    cursor: pointer;
    box-shadow: 0 0 5px #33333340;
    border: none;
    text-align:center;
}


.single-product .card h6 {
    font-size:10px;
    font-weight:bold;
}

.single-product .card .price {
    font-size:20px;
    font-weight:bold;
    color:#45dae8;
}

.toggled-details{
    display:none;
}
</style>




    

        


{% endblock %}




{% block main %}





    



    <div class="row">

           {% if order %}
            <div class="col-12 mb-2" ><h5 style="font-weight:bold;" ><i class="fa-solid fa-pen-to-square"></i> Modification de la commande <span class="badge badge-warning" >{{order}}</span></h5>
            
            <ul>
                <li>Commandé par : <b></b></li>
                <li>Status de la CMD : 
                    {% if order.status == "paid" %}
                        <span class="badge badge-success" >Réglé</span>
                    {% else %}
                     <span class="badge badge-danger" >Non réglé</span>
                    {% endif %}
                </li>
                <li>Status de livraison : <span class="badge badge-info" >{{ order.shipment.currentStep ? order.shipment.currentStep:"En attente"}}</span></li>
            <ul>
            </div>
            
           {% endif %}

            {% if is_granted("ROLE_SHIPPING_AGENT") != true %}
            <div class="col-12  col-lg-6 col-xl-6">
            
    
            <div class="input-group mb-3">
                <span style="height: 40px;" class="input-group-text" id="basic-addon2"><i style="font-size:1.3rem;" class="fa fa-search" ></i></span>
                <input type="text" class="form-control" id="search-product" placeholder="Rechercher " aria-label="Recipient's username" aria-describedby="basic-addon2">
                
            </div>


            
            <div class="row mb-3">
                {% for categorie in categories %}
                {% if categorie.parentCategory == null %}
                    <div class="col parent-filter-category d-none mb-1 categ-{{categorie.id}}" data-categ="categ-{{categorie.id}}"  ><a href="#" class="btn btn-primary  btn-lg d-block text-center p-3"  >{{categorie.name|upper}}</a></div>
                {% endif %}
                {% endfor %}
            </div>
            
            <div class="row mb-4">
                {% for categorie in categories %}
                {% if categorie.parentCategory != null %}
                    <div class="col filter-category mb-2  d-none categ-{{categorie.parentCategory.id}}" data-categ="categ-{{categorie.id}}" >
                    <a style="font-size: 10px;" href="#" class="btn btn-primary d-block text-center"   >{{categorie.name}}</a></div>
                {% endif %}
                {% endfor %}
            </div>

            <div class="row" style="max-height:500px;overflow-y:scroll;padding-top: 5px;">
                {% for product in products %}
                   <div class="col-3 col-md-4 col-lg-4 col-xl-3 mb-3 single-product {% for categorie in product.categoriesProduct %}categ-{{categorie.id}} {% endfor %}" >


                        
                        

                        {% set price = product.price  %}

                        {% if product.reduction %}
                            {% set price = product.price - product.reduction %}
                        {% endif %}


                        

                        <div style="cursor:pointer;" data-image="{{settings.get.rootUrl}}/uploads/{{settings.get.assetFolderName|lower}}/shop/products/{{asset(product.image)}}" data-name="{{product.name}}" data-price="{{price}}"  data-id="{{product.id}}" class="card  add-product-to-cart h-100" >
                          
                          <div class="bg-pink" style="background:url('{{settings.get.rootUrl}}/uploads/{{settings.get.assetFolderName|lower}}/shop/products/{{asset(product.image)}}'); height:100px;background-size:cover;"></div>
                            <div class="card-body">
                                <h6>{{product.name}}</h6>
                            <p class="price">{{price}} DH</p>
                            </div>
                            
                        </div>
                    </div>
                {% endfor %}
                </div>
            </div>

            {% endif %}


             <div class="col-12 {% if is_granted("ROLE_SHIPPING_AGENT") != true %} col-lg-6 col-xl-6 {% endif %}">

                
                <div class="card p-3" >
                <h4>Panier</h4>

                    <div class="form-customer">
                    {{render(url("select_customer_ajax"))}}
                    </div>
        
                    <table class="table align-middle">
                    <tbody class="cart">
                    </tbody>
                    <tfoot>
                        
                       <!--  <tr>
                           <!-- <td colspan="3">Montant pris 3: <input disabled="disabled" type="number" class="form-control" min="0"  id="cash" value="{{payedAmount}}" /></td>-->
                           <!-- <td colspan="6"> <strong>
                            

                            <div class="form-check form-switch">
                            
                            <label class="form-check-label toggle-charge-wallet-label" for="isWallet" style="display:none;" >Utiliser le reste comme crédit</label>
                            <label class="form-check-label toggle-pay-wallet-label" for="isWallet">Payer le reste par crédit</label>
                            <input class="form-check-input" type="checkbox" role="switch" {% if credit != 0 %}checked{% endif %} id="isWallet">
                            </div>

                            </strong>
                            
                            </td>

                            
                                


                            
                            
                        </tr>-->
                        <tr>
                        <td colspan="2"> 
                                    <!--<label>Paiement par</label>
                                    <select class="form-control" name="payment-method" >
                                        {% for paymentMethod in paymentMethods %}
                                        <option value="{{paymentMethod.id}}" {% if paymentMethodValue == paymentMethod.id %}selected{% endif %} >{{paymentMethod.name}}</option>
                                        {% endfor %}
                                    </select>-->
                                
                                </td>

                        <td colspan="2"> 
                                  <!--  <label>Remise en %</label>
                                    <input id="reduction" name="reduction" type="number" min="0" max="100" class="form-control" value="{{percentageReductionValue}}"  />
                                   
                                 -->
                                </td>
                                 <td colspan="5"> 
                                    <label>Code Promo</label>
                                   <div class="input-group">
                                        <input type="text" class="form-control" placeholder="Code coupon" data-coupon-value="0" data-coupon-type="amount" name="codeCoupon" aria-label="Recipient's username" aria-describedby="button-codeCoupon" value="{{codeCoupon}}">
                                        <button style="height: 33px;" class="btn btn-success orderPreview" type="button" id="button-codeCoupon">Appliquer</button>
                                    </div>
                                
                                </td>


                                
                            
                        </tr>

                        <tr>
                        
                            <td colspan="3">
                                
                                 <!--<label>Mode livraison</label>
                                    <select id="shipping-method" class="form-control" name="shipping-method" >
                                        {% for singleShippingMethod in shippingMethods %}
                                        <option data-price="{{singleShippingMethod.price}}" value="{{singleShippingMethod.id}}" {% if shippingMethodValue == singleShippingMethod.id %}selected{% endif %}>{{singleShippingMethod.name}}</option>
                                        {% endfor %}
                                    </select>-->

                                
                            </td>


                            <td colspan="3"> 
                                   <!-- <label>Type de livraison</label>
                                    <select class="form-control" name="delivery-type">
                                           
                                            <option value="on-store" {% if deliveryTypeValue == "on-store" %}selected{% endif %}>Magasin</option>
                                            <option value="collecte-and-delivery" {% if deliveryTypeValue == "collecte-and-delivery" %}selected{% endif %}>Collecte et livraison</option>
                                            <option value="collecte" {% if deliveryTypeValue == "collecte" %}selected{% endif %}>Collecte sans livraison</option>
                                            <option value="delivery"{% if deliveryTypeValue == "delivery" %}selected{% endif %}>Livraison sans collecte</option>
                                        
                                            
                                    </select>-->
                                
                                </td>
                            <td colspan="3"> 
                                    <!--<label>Choix livreur</label>
                                    <select class="form-control" name="shipping-agent" disabled>
                                        <option value="0" >Aucun</option>
                                            {% for singleagent in agents %}
                                            <option value="{{singleagent.id}}" {% if agentValue == singleagent.id %}selected{% endif %} >{{singleagent.firstName}} {{singleagent.lastName}}</option>
                                        {% endfor %}
                                    </select>-->
                                
                                </td>
                            
                        </tr>
                       <!-- <tr class="collecteAddress">
                       <td colspan="3"> 
                                    <label>Adresse Collecte</label>
                                    <input type="text" class="form-control" name="collectAddress"  value="{{order?order.collectAddress:""}}"  />
                                
                                </td>
                         <td colspan="3"> 
                                    <label>Zone/Quartier</label>
                                    <select class="form-control" name="collect-city-region">
                                        <option value="0" >Aucun</option>
                                            {% for singleCityRegion in cityRegions %}
                                            <option value="{{singleCityRegion.id}}" {% if cityRegionCollectValue == singleCityRegion.id %}selected{% endif %} >{{singleCityRegion}}</option>
                                        {% endfor %}
                                    </select>
                                
                                </td>
                        
                        <td colspan="3"> 
                                    <label>Tel</label>
                                    <input type="text" class="form-control" name="collectTelOrder"  />
                                
                                </td>
                        
                        </tr>-->
                         <!--<tr class="shippingAddress">
                       <td colspan="3"> 
                                    <label>Adresse Livraison</label>
                                    <input type="text" class="form-control" name="shippingAddress"  value="{{order?order.shippingAddress:""}}"  />
                                
                                </td>
                         <td colspan="3"> 
                                    <label>Zone/Quartier</label>
                                    <select class="form-control" name="city-region-shipping">
                                        <option value="0" >Aucun</option>
                                            {% for singleCityRegion in cityRegions %}
                                            <option value="{{singleCityRegion.id}}" {% if cityRegionShippingValue == singleCityRegion.id %}selected{% endif %} >{{singleCityRegion}}</option>
                                        {% endfor %}
                                    </select>
                                
                                </td>
                        
                        <td colspan="3"> 
                                    <label>Tel</label>
                                    <input type="text" class="form-control" name="telOrder"  />
                                
                                </td>
                        
                        </tr>

                        <tr>
                        <tr>
                       <td colspan="4"> 
                                    <div class="row">
                                        <div class="col-6" >
                                           <!-- <label>Date de col.</label>-->
                                           <!-- <input type="text" class="form-control datedropper chooseDate"  data-dd-min-date="{{"now"|date('Y-m-d')}}" name="startProcessingAt"  value="{{processingDateValue}}"  />-->
                                   <!--     </div>
                                        <div class="col-6" >
                                            <label>Heure de col.</label>
                                           <select name="collectTime" class="form-control" >
                                            <option value="{{processingCollectTimeValue}}" >Sélectionner un crénau</option>
                                           </select>
                                        </div>
                                    </div>
                                
                                </td>
                        <td colspan="5"> 
                        <div class="row">
                                        <div class="col-6" >
                                            <label>Date de liv.</label>
                                            <input type="text" class="form-control datedropper chooseDate" name="startDeliveryAt" value="{{deliveryDateValue}}" />
                                        </div>
                                        <div class="col-6" >
                                            <label>Heure de liv.</label>
                                             <select name="shippingTime" class="form-control" >
                                            <option value="{{processingShippingTimeValue}}" >Sélectionner un crénau</option>
                                           </select>
                                        </div>
                                    </div>
                                    
                                
                                </td>
                        
                        </tr>

                        <tr>-->
                       

                       <td colspan="4"> 
                                    <label>Note sur la commande</label>
                                    <textarea name="commentOrder" class="form-control">{{commentValue}}</textarea>
                                
                                </td>
                            <td colspan="5"> 
                                    <label>Note sur le client</label>
                                    <textarea name="commentCustomer" class="form-control">{{commentValue}}</textarea>
                                
                                </td>
                                
                        </tr>
                        
                       
                    </tfoot>
                    </table>
                    <div class="d-grid gap-2 d-md-block">
                        <button class="btn btn-primary  simulate-order d-none" >Simulation</button>
                        <button class="btn btn-success create-order" >
                        {% if order %}
                            Modifier la commande
                        {% else %}
                            Créer la commande
                        {% endif %}
                        
                        </button>
                        <button class="btn btn-secondary destroy-cart" >Vider le panier</button>
                    </div>

                    
                    
                </div>
            </div>
            
    </div>
    <div class="spacing-bottom" style="height:300px;">
    
    </div>





<!-- Modal -->
<div class="modal fade" id="modal-recap" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal-recapLabel">Infos de la commande</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="checkout-area" ></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btnCancel" data-bs-dismiss="modal">Fermer</button>
        <a type="button" class="btn btn-secondary btnSuccessOrder" style="display:none;" href="{{urlSuccessOrder}}" >Fermer</a>
      </div>
    </div>
  </div>
</div>

<div style="position:fixed;background:#0b2656;opacity:1;font-size:0.9rem;border-radius:5px;box-shadow:0px 0px 15px #33333370;bottom:30px;right:30px;min-height:100px;padding:25px 25px 20px;z-index:2;color:white;z-index:3;" >
    <span style="position:absolute;top:-10px;right:0px;background:#45dae8;padding:5px;border-radius:5px;font-size:11px;font-weight:bold;cursor:pointer;" class="toggle-details">
        
                                <span class="toggled-details" style="display:block;" >Afficher les details <i class="fas fa-arrow-circle-up"></i></span>
                                <span class="toggled-details"  >Reduire <i class="fas fa-arrow-circle-down"></i></span>
                            
    </span>
    <table>
        <tbody class="text-right">
       
        <tr class="toggled-details">
                            <td></td>
                            <td></td>
                            <td colspan="7" class="text-right">Total produits: <strong class="total"></strong></td>
                            
                        </tr>
                       
                        

                          

                        <!-- <tr class="toggled-details">
                            <td></td>
                            <td></td>
                            <td colspan="7" class="text-right">Frais de livraison: <strong class="shipping-method-fees">0 DH</strong></td>
                            
                        </tr>

                        <tr class="promo toggled-details">
                            <td></td>
                            <td></td>
                            <td colspan="7" class="text-right">Reduction coupon: <strong class="codepromo">0 DH</strong></td>
                            
                        </tr>

                        <tr class="toggled-details">
                            <td></td>
                            <td></td>
                            <td colspan="7" class="text-right">Remise en DH: <strong class="reduction-amount">0 DH</strong></td>
                            
                        </tr>-->

                        
                        
                        <!--<tr >
                            <td></td>
                            <td></td>
                            <td colspan="7" class="text-right">
                            {% if credit > 0 %}
                                Crédité au client
                            {% elseif credit > 0 %}
                                Debité au client
                            {% else %}
                                Rendue: 
                            {% endif %}
                            
                            <strong class="difference-cash">0 DH</strong></td>
                            
                        </tr>-->
                        <tr>
                            <td></td>
                            <td></td>
                            <td colspan="7" class="text-right">Montant á payer : <strong class="total-to-pay">0 DH</strong></td>
                            
                        </tr>
        </tbody>
    </table>
</div>

{% endblock %}


    {% block body_javascript %}

{{parent()}}



<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="{{asset('flexy/js/cart-localstorage.js')}}" defer></script>



<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></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() {

    
  


$(document).ready(function(){

$(".toggle-details").click(function(){
    $(".toggled-details").toggle();
});

new dateDropper({
  lang:"fr",
  format: "y-mm-dd",
  selector: "input[name='startProcessingAt']",
  minDate: "{{"today"|date("Y-m-d")}}",
  //autoFill:false,
  expandable: true,
  onChange: function (res) {
    $("input[name='startProcessingAt']").trigger("change");
  }
});

new dateDropper({
  lang:"fr",
  format: "y-mm-dd",
  selector: "input[name='startDeliveryAt']",
  //autoFill:false,
  expandable: true,
  onChange: function (res) {
    $("input[name='startDeliveryAt']").trigger("change");
  }
});

/*
$("input[name='startProcessingAt']").dateDropper({
large: true,
lang: 'fr',
theme: 'datedropper',
format: "d-m-Y",
expandable: true,
minDate: "{{ " now "|date('Y/m/d') }}",
range: true,
rangeStart: "{{ " now "|date('Y/m/d') }}",
rangeEnd: "{{ " next year "|date('Y/m/d') }}",
disabledDays: "{{settings.get().getExcludeDatesOnlyDates()|join(',')}}",
disabledWeekDays: '6'
});
*/

    $(".collecteAddress,.shippingAddress").hide();

    {% if order %}
        {% if order.deliveryType == "collecte" %}
            $(".collecteAddress").show();
        {% elseif order.deliveryType == "delivery" %}
            $(".shippingAddress").show();
        {% elseif order.deliveryType == "collecte-and-delivery" %}
            $(".collecteAddress,.shippingAddress").show();
        {% endif %}
    {% endif %}

    $("select[name='delivery-type']").change(function(){
        $("select[name='clientId']").trigger("change");
        var currentValue = $(this).find("option:selected").val();

        if(currentValue == "collecte-and-delivery"){
            $(".collecteAddress,.shippingAddress").show();
        }else if(currentValue == "collecte"){
            $(".collecteAddress").show();
            $(".shippingAddress").hide();
        }else if(currentValue == "delivery"){
            $(".collecteAddress").hide();
            $(".shippingAddress").show();
        }else{
            $(".collecteAddress").hide();
            $(".shippingAddress").hide();
        }
    });

    
    {% if order %}          
        
        cartLS.destroy();

        {% for singleOrderItem in order.orderItems %}

        
        {% if singleOrderItem.product %}
        cartLS.add({
                id: "p-{{ singleOrderItem.product.id }}", 
                idProduct: "{{ singleOrderItem.product.id }}", 
                name: "{{ singleOrderItem.description }}", 
                price: {{ singleOrderItem.price }}, 
                image: "uploads/{{settings.get.assetFolderName|lower}}/shop/products/{{ singleOrderItem.product.image }}",
                categoryName:"{{ singleOrderItem.product.categoriesProduct|first }}",
                subcategoryName:"{{ singleOrderItem.product.categoriesProduct|first }}",
                notes:[

                    {% set noteIdCounter = 0 %}
                    {% for singleOrderItemNote in singleOrderItem.orderItemNotes %}
                    {% set noteIdCounter = noteIdCounter + 1 %}
                    {
                    id: "p-{{ singleOrderItem.product.id }}",
                    noteId:"{{noteIdCounter}}",
                    note:"{{ singleOrderItemNote.getContent }}",
                },

                    
                    {% endfor %}

                ]
                    
                },{{ singleOrderItem.quantity}});

            {% endif %}

                
        
        {% endfor %}
            
            

        
            
        
        $('select[name=clientId]>option[value={{order.customer.id}}]').attr('selected', true);
       
    {% endif %}


// INIT Contact customer

var selectedClientAddress = $("select[name='clientId'] option:selected").attr("data-address");
var selectedClientTel = $("select[name='clientId'] option:selected").attr("data-tel");

//$("input[name='shippingAddress']").val(selectedClientAddress);
//$("input[name='telOrder']").val(selectedClientTel);

//$("#ajax-create-customer-from").validate();




    
    var amount=0;
    var reduction=0;
    var reductionCoupon=0;
    var cash = 0;
    var shippingFees = 0;
    var difference= cartLS.total()+ shippingFees;
    var total= cartLS.total();

    
    {% if order %}
        total = {{payedAmount}};
        reductionCoupon = {{reductionCoupon}};
        $(".promo .codepromo").html(reductionCoupon+" DH");
       setTimeout(function(){

         $("#shipping-method").trigger("change");
         $("#cash").trigger("keyup");
         $("input[name='startProcessingAt']").trigger("change");
    },1500);
    {% else %}

setTimeout(function(){

         
         $("input[name='startProcessingAt']").trigger("change");
    },1500);

    {% endif %}
    



  $("#search-product").on("keyup", function() {
    $('.parent-filter-category a').removeClass("btn-active");
$('.filter-category a').removeClass("btn-active");

    var value = $(this).val().toLowerCase();
    $(".single-product").filter(function() {
      $(this).toggle($(this).find(".card-body").text().toLowerCase().indexOf(value) > -1)
    });
  });




     $('.parent-filter-category').click(function(){


        $('.parent-filter-category a').removeClass("btn-active");
        


        $(this).find("a").addClass("btn-active");


        var dataCateg = $(this).attr("data-categ");

        
            $(".filter-category").hide();
            $(".filter-category")
            .filter("."+dataCateg)
            .show();

            //var dataCateg = $(this).attr("data-categ");

        //alert(dataCateg);
            $(".single-product").hide();
            $(".single-product")
            .filter("."+dataCateg)
            .show();
    });

        $('.filter-category').click(function(){



         $('.filter-category a').removeClass("btn-active");
        $(this).find("a").addClass("btn-active");

        var dataCateg = $(this).attr("data-categ");

        //alert(dataCateg);
            $(".single-product").hide();
            $(".single-product")
            .filter("."+dataCateg)
            .show();
    });

    
    // Init Categories and products to show

    $('.parent-filter-category,.filter-category').removeClass("d-none");

    $('.parent-filter-category:first-child').trigger("click");
    $('[data-categ="categ-4"]').trigger("click");

    // END : Init Categories and products to show

   /* $('.js-select2').select2({
        theme: 'bootstrap-5'
    });*/


    
    


function renderCart(items) {
    
     


  const $cart = document.querySelector(".cart")
  const $total = document.querySelector(".total")

  $cart.innerHTML = items.map((item) => `
      <tr data-id="${item.id}">
        <td colspan="3" width="40%" style="font-size: 10px;" >
        <img src="${item.image}"  style="float:left;max-height:25px;"  />
         ${item.name}</td>
        
        
        <td style="white-space:nowrap;font-size: 10px;font-weight:bold;" class="text-right">${item.quantity} x 
        <input style="max-width:50px" class="form-control input-price-product d-inline" data-id="${item.id}" value="${item.price}"  />
         DH</td>
         <td style="text-align:right;"> 
          <button data-id="${item.id}" type="button" class="btn   btn-block btn-sm  decrease-quantite-to-cart"
            ><i class="fas fa-minus"></i></button>
        </td>
         <td style="text-align:right;"> 
          <button data-id="${item.id}" type="button" class="btn   btn-block btn-sm  increase-quantite-to-cart"
            ><i class="fas fa-plus"></i></button>
        </td>
        <td  class="text-right p-3" style="white-space:nowrap;color:#45dae8;"><b>${item.price * item.quantity}  DH</b></td>
        <td  class="text-right">


        <div class="d-grid gap-2 col-6 mx-auto">
    <button id="modal-btn-${item.id}" data-id="${item.id}" data-quantite="${item.quantity}" class="btn btn-success modal-notes" data-bs-toggle="modal" data-bs-target="#modal-${item.id}" ><i class="fas fa-pen"></i></button>
    <button data-id="${item.id}" class="btn btn-danger  delete-product-from-cart" ><i class="fas fa-trash-alt"></i></button>
    </div>
        

        <div class="modal fade" id="modal-${item.id}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal-${item.id}-Label">${item.name} x ${item.quantity}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        
      </div>
      <div class="modal-footer">
        <button type="button" data-id="${item.id}" class="btn btn-primary save-notes" data-bs-dismiss="modal">Sauvgarder et continuer</button>
        
      </div>
    </div>
  </div>
</div>
        

        </td>
        
      </tr>`).join("");

  $total.innerHTML = cartLS.total() + "DH";
$("#cash").trigger("keyup");
$(".total-to-pay").html(cartLS.total().toFixed(2)  +" DH");
  if(cartLS.list().length <= 0){
    $("#cash").attr("disabled",true);
    //$("#cash,.difference-cash,.total-to-pay").val();

    var calculeDifference = parseFloat(cash) -  (((total) - (amount)) + (shippingFees));
    
    
    $(".difference-cash").text(calculeDifference.toFixed(2) + " DH");
    
    
  }else{
    $("#cash").attr("disabled",false);
    
    cash = (((total) - (amount) - (reductionCoupon)) + (shippingFees));
    //$("#cash").val((((total) - (amount) - (reductionCoupon)) + (shippingFees)));
    
  }

        $.ajax({
                            url:"{{path('pos_cart_checkout')}}",
                            method:"POST",
                            data:{
                                
                                orderItems: cartLS.list(),
                                customerId:$("select[name='clientId'] option:selected").val(),
                                shippingMethod:$("select[name='shipping-method'] option:selected").val(),
                                paymentMethod:$("select[name='payment-method'] option:selected").val(),
                                agent:$("select[name='shipping-agent'] option:selected").val(),
                                deliveryType:$("select[name='delivery-type'] option:selected").val(),
                                cash:$("#cash").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,
                                {% if order %}
                                editOrderId:"{{order.id}}",
                                {% endif %}
                                
                            },

                            success:function(result){


                                
                                
                                
                                $("#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) + " DH");

                                



                               
                            }
                        });
    $("#cash").trigger("keyup");
  
}


renderCart( cartLS.list());

console.log(cartLS.list());


    cartLS.onChange(renderCart);



function loadAllNotes(){
    var items = cartLS.list();

    items.forEach(elementParent => {

        
        elementParent.notes.forEach(element => 
                
                {
                    
                    $("#modal-"+elementParent.id).find(".modal-body").append( '<input name=[note-'+element.id+']['+element.noteId+'] class="form-control mb-3 noteforligne-'+element.id+'" value="'+element.note+'" placeholder="Note '+element.noteId+'"  >'  );
                }
        );
    });

}



setTimeout(loadAllNotes(),600);


const animateCSS = (element, animation, prefix = 'animate__') =>
  // We create a Promise and return it
  new Promise((resolve, reject) => {
    const animationName = `${prefix}${animation}`;
    const node = element;
    //console.log(document.querySelector(element));

    node.addClass(`${prefix}animated`, animationName);

    // When the animation ends, we clean the classes and resolve the Promise
    function handleAnimationEnd(event) {
      event.stopPropagation();
      node.removeClass(`${prefix}animated`, animationName);
      resolve('Animation ended');
    }

    node.addEventListener('animationend', handleAnimationEnd, {once: true});
  });


function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min) + min); // The maximum is exclusive and the minimum is inclusive
}
$(".add-product-to-cart").click(function(){


 $(this).addClass("animate__bounce animate__animated");

 var $this = $(this);

setTimeout(function () {
     $this.removeClass("animate__bounce animate__animated");
},800);


//var id = $(this).attr("data-id");




var id = "p-"+$(this).attr("data-id");
if($(this).attr("data-attribute") == "true"){
     id = getRandomInt(0,9999999).toString();
}
var idProduct = $(this).attr("data-id");
var name = $(this).attr("data-name");
var price = $(this).attr("data-price");
var image = $(this).attr("data-image");
var productType = $(this).attr("data-product-type");
var url = $(this).attr("data-url");
var attributes = $(this).attr("data-attribute");
var subcategoryName= $(".filter-category .btn-active").text();




if(attributes == "true"){

    var quantityAttribut = $($(this).attr("data-container-id")).find("input[name='quantity-attribut']").val();
    //var quantityProduct = $($(this).attr("data-container-id")).find("input[name='quantity-product']").val();
    var pricePerAttribut = $($(this).attr("data-container-id")).find("select[name='attribute-option-price'] option:selected").val();
    var attributName = $($(this).attr("data-container-id")).find("select[name='attribute-option-price'] option:selected").text();

    price = parseInt(quantityAttribut) * parseFloat(pricePerAttribut);

    id = "pv-" + $(this).attr("data-id")+quantityAttribut;

    name = name + "("+attributName+" x "+ quantityAttribut  +" )";
}

    
if( cartLS.list().length == 0){
    $(".checkout-area").html("");
}


if( cartLS.exists(id) === true){
updateCartNotes(id,"add");

   cartLS.onChange(renderCart);
}else{
        cartLS.add({
  id: id,
  idProduct: idProduct,
  image:image,
  name: name, 
  price: price,
  productType:productType,
  attributes:[],
  client:{
      name:"Adil",
      type:"Client Fidele",
  } ,
  notes:[
    {
    id:id,
    noteId:1,
    note:"",
  }
  ]
 
  
  
    
});
loadAllNotes();


    

   

    cartLS.onChange(renderCart);
}

//$('#modal-btn-'+id).trigger("click");



});



$(".cart").on("click",".save-notes",function(){
  
    var id = $(this).attr("data-id");
    updateCartNotes(id,updateMethod="update")
        cartLS.onChange(renderCart);


});


function updateCartNotes(id,updateMethod="add"){


    

    var currentLigneCart =  cartLS.get(id);

   
    
    var currentNotes = currentLigneCart.notes;

    
        var newNotes = [];
    
    var count = $('.noteforligne-'+id).length;

    

    var counterForName = 0;
    $('.noteforligne-'+id).each(function(i){


        counterForName = counterForName + 1;
        var newNote = {
                id:id,
                noteId:counterForName,
                note:$(this).val(),
        };
        newNotes.push(newNote);

        if (i+1 === count) {
        // this will be executed at the end of the loop
            if(updateMethod=="add"){

                
                    newNotes.push( {
                            id:id,
                            noteId:counterForName+1,
                            note:"",
                        });
                        cartLS.update(id,"notes",newNotes);
                        cartLS.quantity(id, 1);

                        cartLS.onChange(renderCart);
                }
                else if(updateMethod=="remove") {
                    newNotes.splice(-1);
                        cartLS.update(id,"notes",newNotes);
                        cartLS.quantity(id, -1);
                    
                        cartLS.onChange(renderCart);
                }

                else{
                    
                        cartLS.update(id,"notes",newNotes);
                }
                //$("#modal-"+element.id).find(".modal-body").html("");
                
             
            
    }
    loadAllNotes();
    console.log(currentLigneCart);
    });


    

    
   

    

}


$(".cart").on("click",".increase-quantite-to-cart",function(){
    
    var id = $(this).attr("data-id");

    updateCartNotes(id,"add");

    //$('#modal-btn-'+id).trigger("click");
    

    
});



$("select[name=delivery-type]").change(function(){
    $("input[name='startProcessingAt']").trigger("change");
    if($(this).find("option:selected").val() == "on-store"){
        $("select[name=shipping-agent]").attr("disabled",true)
    }else{
        $("select[name=shipping-agent]").attr("disabled",false)
    }
});



$(".cart").on("click",".decrease-quantite-to-cart",function(){
    
    var id = $(this).attr("data-id");
    
    updateCartNotes(id,"remove");

    //$('#modal-btn-'+id).trigger("click");

    
    
   
});


$(".cart").on("click",".modal-notes",function(){

    var id = $(this).attr("data-id");
    var currentLigneCart =  cartLS.get(id);
    var currentNotes = currentLigneCart.notes;
    

    var quantite = parseInt($(this).attr("data-quantite"));
    var target = $(this).attr("data-bs-target");

    var count = $('.noteforligne-'+id).length;
            if(count != currentNotes.length)
            {
                currentNotes.forEach(element => 
                
                {
                    $(target).find(".modal-body").append( '<input name=[note-'+element.id+']['+element.noteId+'] class="form-control mb-3 noteforligne-'+element.id+'" value="'+element.note+'" placeholder="Note '+element.noteId+'"  >'  );
                }
           
            
            
            );   
             }
            
            
        
       
    

   
});

$(".cart").on("click",".delete-product-from-cart",function(){

    var id = $(this).attr("data-id");

        cartLS.remove(id);
        cartLS.onChange(renderCart);
        loadAllNotes();
});

$(".destroy-cart").click(function(){
        cartLS.destroy();
});



$("#isWallet").attr("disabled",true);
$("label[for='isWallet']").addClass("text-decoration-line-through");
$("#cash").keyup(function(){
    

$("#isWallet").attr("disabled",true);
$("label[for='isWallet']").addClass("text-decoration-line-through");

    var total = ((cartLS.total() - amount - reductionCoupon) + shippingFees);
    cash = parseFloat($(this).val());
    difference = cash - total;
    
    if(cash <= 0 || total == cash ){
        difference=0;
        $(".toggle-pay-wallet-label").show();
        $(".toggle-charge-wallet-label").hide();
        $("#isWallet").attr("disabled",true);
        $("label[for='isWallet']").addClass("text-decoration-line-through");
        $(".difference-cash").html(difference.toFixed(2)+ " DH");
    }
    else if(cash > total){
        
        
        $(".toggle-pay-wallet-label").show();
        $(".toggle-charge-wallet-label").hide();
         $("#isWallet").attr("disabled",false);
        $("label[for='isWallet']").removeClass("text-decoration-line-through");
        $(".difference-cash").html(difference.toFixed(2)+ " DH");
        
    }
    else if(total > cash && cash > 0){
        $(".toggle-pay-wallet-label").show();
        $(".toggle-charge-wallet-label").hide();
        $("#isWallet").attr("disabled",false);
        $("label[for='isWallet']").removeClass("text-decoration-line-through");
    }
    
    else{
        difference=0;
        $(".toggle-pay-wallet-label").hide();
        $(".toggle-charge-wallet-label").show();
        $("#isWallet").attr("disabled",true);
        $("label[for='isWallet']").addClass("text-decoration-line-through");
        
    }

    $(".difference-cash").html(difference.toFixed(2)+ " DH");
    $(".total-to-pay").html(total.toFixed(2) + " DH");
    $("#reduction").trigger("keyup");
});




$(".cart").on("keyup",".input-price-product",function(){
    var id = $(this).attr("data-id");
    var value = $(this).val();
    setTimeout(function(){
            cartLS.update(id,"price",value);
        loadAllNotes();
    },1000);
    
});


$("#reduction").keyup(function(){
    
    total =  cartLS.total();
    var value = $(this).val();
    amount = (total / 100)  * value;

    var totalToPay = ((total) - (amount) - reductionCoupon ) + (shippingFees);
    $(".reduction-amount").html(amount.toFixed(2)+ " DH");

    $(".total-to-pay").html( totalToPay.toFixed(2) +  " DH");
    
});


$("#shipping-method").change(function(){
    
    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");


});





$("#isWallet").change(function(){
    if($(this).is(':checked') == false){
        //$("#cash").val((((total) - (amount) - (reductionCoupon)) + (shippingFees)));
        $(this).attr("disabled",true);
        //$("label[for='isWallet']").addClass("text-decoration-line-through");
    }else{
        $(this).attr("disabled",false);
        //$("label[for='isWallet']").removeClass("text-decoration-line-through");
    }
});

{% if order %}
    {% if order.customer %}
    $("select[name=clientId]").val({{order.customer.id}});
    {% endif %}
{% endif %}

$(".create-order").click(function(){
    $(".checkout-area").html("");
    
    var isWallet = 0;

    if($("#isWallet").is(':checked')){
        isWallet = 1;
    }

    

    if(cartLS.list().length > 0){
                        
                        
                        
                        {# if( isWallet == 0 && cash < (((cartLS.total()) - (amount) - (reductionCoupon)) + (shippingFees))){
                            alert("Verifier le montant pris !");
                        }
                        else  #}
                        
                        if( $("select[name='clientId'] option:selected").val() == 0 ){
                            alert("Merci de sélectionner un client !");
                        }
                        else if( 
                            $("select[name='delivery-type'] option:selected").val() == "collecte-and-delivery" &&
                            ($("input[name='collectAddress']").val() == "" || ($("input[name='shippingAddress']").val() == ""))
                            
                            ){
                            alert("Merci de verifier les adresses de collecte et livraison  !");
                        }
                        else if( 
                            $("select[name='delivery-type'] option:selected").val() == "collecte" &&
                            $("input[name='collectAddress']").val() == ""
                            
                            ){
                            alert("Merci de verifier l'adresse de collecte  !");
                        }
                        else if( 
                            $("select[name='delivery-type'] option:selected").val() == "delivery" &&
                            $("input[name='shippingAddress']").val() == ""
                            
                            ){
                            alert("Merci de verifier l'adresse de  livraison  !");
                        }
                        else if( 
                            ( $("select[name='delivery-type'] option:selected").val() == "delivery" ||
                            $("select[name='delivery-type'] option:selected").val() == "collecte" ) &&
                            $("select[name='shipping-agent'] option:selected").val() == "0"
                            ){
                            alert("Merci de choisir le livreur  !");
                        }
                        /*else if($("input[name='startDeliveryAt']").val() == ""){
                            alert("Merci de sélectionner la date de collecte  !");
                        }*/
                        else{
                            var statusOrder = "waiting";


                            //if payedAmount == Total
                            if(  cash == (((cartLS.total()) - (amount) - (reductionCoupon)) + (shippingFees))){
                                statusOrder = "paid";
                            }
                            
                            
$.ajax({
                            url:"{{path('pos_cart_checkout')}}",
                            method:"POST",
                            data:{
                                
                                orderItems: cartLS.list(),
                                customerId:$("select[name='clientId'] option:selected").val(),
                                shippingMethod:$("select[name='shipping-method'] option:selected").val(),
                                paymentMethod:$("select[name='payment-method'] option:selected").val(),
                                agent:$("select[name='shipping-agent'] option:selected").val(),
                                deliveryType:$("select[name='delivery-type'] option:selected").val(),
                                cash:$("#cash").val(),
                                isWallet:isWallet,
                                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(),
                                shippingAddress:$("input[name=shippingAddress]").val(),
                                telOrder:$("input[name=telOrder]").val(),
                                collectAddress:$("input[name=collectAddress]").val(),
                                collectTelOrder:$("input[name=collectTelOrder]").val(),
                                commentOrder:$("textarea[name=commentOrder]").val(),
                                commentCustomer:$("textarea[name=commentCustomer]").val(),
                                codeCoupon:$("input[name=codeCoupon]").val(),
                                cityRegionShipping:$("select[name=city-region]  option:selected").val(),
                                cityRegionCollect:$("select[name=collect-city-region]  option:selected").val(),
                                
                                
                                {% if order %}
                                editOrderId:"{{order.id}}",
                                {% else %}
                                status:statusOrder,
                                {% endif %}
                                
                            },

                            success:function(result){

                                if(
                                    result.indexOf("Solde insufisant") < 0 &&
                                    result.indexOf("Code coupon") < 0  &&
                                    result.indexOf("Aucun coupon") < 0 
                                    
                                    ){
                                    cartLS.destroy();
                                    $("input,textarea").val("");
                                    $("input[type='checkbox']").prop("checked", false);
                                    difference=0;
                                    amount=0;
                                    shippingFees=0;
                                    $(".reduction-amount").html("0 DH");
                                    $(".difference-cash").html("0 DH");
                                    $(".shipping-method-fees").html("0 DH");
                                }

                                
                                
                                
                                $('#modal-recap').modal('show');
                                $(".checkout-area").html(result);

                                $(".modal .btnSuccessOrder").show();
                                $(".modal .btnCancel").hide();
                                
                                {% set urlSuccessOrder = ea_url().setController('App\\Flexy\\FrontBundle\\Themes\\'~settings.get.assetFolderName~'\\Controller\\ShopAdmin\\Order\\OrderCrudController').
                                setAction("index") %}

                                {% if is_granted("ROLE_BACKOFFICE_AGENT") %}


                                {% set urlSuccessOrder = ea_url().setController('App\\Flexy\\POSBundle\\Controller\\OrderCrudController').
                                setAction("index") %}

                                {% elseif is_granted("ROLE_BACKOFFICE_STORE") %}

                                {% set urlSuccessOrder = ea_url().setController('App\\Flexy\\POSBundle\\Controller\\OrderCrudController').
                                setAction("index") %}

                                {% endif %}




                                //window.location.href = encodeURI("{{urlSuccessOrder}}");
                            }
                        });
                        }

                        
                
               
   
                    
                



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

                    });


$("input[name='startProcessingAt']").change(function(){
    
$.toast().reset('all');

    
                        
$.ajax({
                            url:"{{path('pos_cart_checkout')}}",
                            method:"POST",
                            data:{
                                
                                orderItems: cartLS.list(),
                                customerId:$("select[name='clientId'] option:selected").val(),
                                shippingMethod:$("select[name='shipping-method'] option:selected").val(),
                                paymentMethod:$("select[name='payment-method'] option:selected").val(),
                                agent:$("select[name='shipping-agent'] option:selected").val(),
                                deliveryType:$("select[name='delivery-type'] option:selected").val(),
                                cash:$("#cash").val(),
                                reduction:$("#reduction").val(),
                                payedAmount:$("#cash").val(),
                                startProcessingAt: $("input[name=startProcessingAt]").val()+" "+$("select[name='collectTime']").find("option:selected").val(),
                                collectTimePreview: $("select[name='collectTime']").find("option:selected").val(),
                                //startDeliveryAt:$("input[name=startDeliveryAt]").val()+" "+$("select[name='shippingTime']").find("option:selected").val(),
                                isChooseDatePreview: true,
                                {% if order %}
                                editOrderId:"{{order.id}}",
                                {% endif %}
                                
                            },

                            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) + " 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);



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

    
                        
$.ajax({
                            url:"{{path('pos_cart_checkout')}}",
                            method:"POST",
                            data:{
                                
                                orderItems: cartLS.list(),
                                customerId:$("select[name='clientId'] option:selected").val(),
                                shippingMethod:$("select[name='shipping-method'] option:selected").val(),
                                paymentMethod:$("select[name='payment-method'] option:selected").val(),
                                agent:$("select[name='shipping-agent'] option:selected").val(),
                                deliveryType:$("select[name='delivery-type'] option:selected").val(),
                                cash:$("#cash").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,
                                {% if order %}
                                editOrderId:"{{order.id}}",
                                {% endif %}
                                
                            },

                            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) + " 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(),
                                customerId:$("select[name='clientId'] option:selected").val(),
                                shippingMethod:$("select[name='shipping-method'] option:selected").val(),
                                paymentMethod:$("select[name='payment-method'] option:selected").val(),
                                agent:$("select[name='shipping-agent'] option:selected").val(),
                                deliveryType:$("select[name='delivery-type'] option:selected").val(),
                                cash:$("#cash").val(),
                                reduction:$("#reduction").val(),
                                payedAmount:$("#cash").val(),
                                //startProcessingAt: $("input[name=startProcessingAt]").val()+" "+$(this).find("option:selected").val(),
                                collectTimePreview: $(this).find("option:selected").val(),
                                startDeliveryAt:$("input[name=startDeliveryAt]").val(),
                                isChooseDatePreview: true,
                                {% if order %}
                                editOrderId:"{{order.id}}",
                                {% endif %}
                                
                            },

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






$(".orderPreview").click(function(){
    $(".checkout-area").html("");
    
    if(cartLS.list().length > 0){                        
$.ajax({
                            url:"{{path('pos_cart_checkout')}}",
                            method:"POST",
                            data:{
                                
                                orderItems: cartLS.list(),
                                customerId:$("select[name='clientId'] option:selected").val(),
                                shippingMethod:$("select[name='shipping-method'] option:selected").val(),
                                paymentMethod:$("select[name='payment-method'] option:selected").val(),
                                agent:$("select[name='shipping-agent'] option:selected").val(),
                                deliveryType:$("select[name='delivery-type'] option:selected").val(),
                                cash:$("#cash").val(),
                                reduction:$("#reduction").val(),
                                payedAmount:$("#cash").val(),
                                codeCoupon:$("input[name=codeCoupon]").val(),
                                startProcessingAt: $("input[name=startProcessingAt]").val(),
                                startDeliveryAt:$("input[name=startDeliveryAt]").val(),
                                isPromoPreview: true
                            },

                            success:function(result){
                                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);
                                    //$('#modal-recap').modal('show');
                                    //$(".checkout-area").("<b></b>");
                                }else{
                                    total = total + reductionCoupon;
                                    reductionCoupon = 0;
                                    //$('#modal-recap').modal('show');
                                    $(".checkout-area").html(result.messageHTML);
                                }
                                $(".promo .codepromo").html(reductionCoupon.toFixed(2)+" DH");
                                total = total - reductionCoupon;
                                total = total.toFixed(2);
                                $("#cash").trigger("keyup");
                                
                            }
                        });
               
    }
    else{
        alert("Veuillez rajouter des produit au panier");
    }
                            

                    });

$(".simulate-order").click(function(){
    $(".checkout-area").html("");
    
    var isWallet = 0;

    if($("#isWallet").is(':checked')){
        isWallet = 1;
    }

    

    if(cartLS.list().length > 0){

                        

                        
$.ajax({
                            url:"{{path('pos_cart_checkout')}}",
                            method:"POST",
                            data:{
                                
                                orderItems: cartLS.list(),
                                customerId:$("select[name='clientId'] option:selected").val(),
                                shippingMethod:$("select[name='shipping-method'] option:selected").val(),
                                paymentMethod:$("select[name='payment-method'] option:selected").val(),
                                agent:$("select[name='shipping-agent'] option:selected").val(),
                                deliveryType:$("select[name='delivery-type'] option:selected").val(),
                                cash:$("#cash").val(),
                                isWallet:isWallet,
                                reduction:$("#reduction").val(),
                                payedAmount:$("#cash").val(),
                                startProcessingAt: $("input[name=startProcessingAt]").val(),
                                startDeliveryAt:$("input[name=startDeliveryAt]").val(),
                                isSimulationPreview: true
                                
                            },

                            success:function(result){

                                
                                
                                
                                $('#modal-recap').modal('show');
                                $(".checkout-area").html(result);
                                
                            }
                        });
                        

                        
                
               
   
                    
                



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

                    });





$("select[name='clientId']").change(function(){
                                var selectedClientAddress = $("select[name='clientId'] option:selected").attr("data-address");
                                var selectedClientTel = $("select[name='clientId'] option:selected").attr("data-tel");

                                 $("input[name='shippingAddress'],input[name='collectAddress']").val(selectedClientAddress);
                                $("input[name='telOrder'],input[name='collectTelOrder']").val(selectedClientTel);
});

$(".create-customer").click(function(){
    if($("#ajax-create-customer-from").valid()){
                        $.ajax({
                            url:"{{path('pos_cart_create_customer')}}",
                            method:"POST",
                            data:{
                                
                                firstName:$("input[name='firstName']").val(),
                                lastName:$("input[name='lastName']").val(),
                                email:$("input[name='email']").val(),
                                phone:$("input[name='phone']").val(),
                                address:$("input[name='address']").val(),
                                
                            },

                            success:function(result){
                                $(".close-modal-create-customer").trigger("click");
                                $(".form-customer").html(result);
                                /*$('.js-select2').select2({
                                    theme: 'bootstrap-5'
                                });*/


                                var selectedClientAddress = $("select[name='clientId'] option:selected").attr("data-address");
                                var selectedClientTel = $("select[name='clientId'] option:selected").attr("data-tel");

                                $("input[name='shippingAddress'],input[name='collectAddress'],").val(selectedClientAddress);
                                $("input[name='telOrder'],input[name='collectTelOrder'],").val(selectedClientTel);

                                
                                
                                //  cartLS.destroy();
                            }
                        });
    }
                        
   
                            

                    });
                    
                        
});

})


</script>


{% endblock body_javascript %}