{% extends'@admin/base.html.twig' %}
{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="{{ asset('css/admin/document_client_shared.css') }}">

{% endblock %}
{% block breadcrumb %}{% endblock %}
{% block bodycontent %}
   <div id="legacy-container"  class="mt-3">
        <div id="form">
            <form id="docForm" class="container-big" name="form_document" method="POST"
                {% if commande is not null and commande.type == 'echange' %}
                    action="{{ path('echange_document_commande_edit', {'id' : commande.document.id , 'category' : category, 'document' : commande.id  }) }}"
                {% else %}
                    action="{{ path('echange_document_commande', {'id' : document.id , 'category' : category  }) }}"
                {% endif %}
                enctype="multipart/form-data">
                    {#Titre document#}
                    <div class="alert w-100 d-flex align-items-center py-3 px-4 mb-4" style="background-color: #fff3cd; border: 1px solid #ffeeba; color: #856404;">
                        <i class="fas fa-edit me-3 fa-lg"></i>
                        <h3 class="m-subheader__title m-0 p-0" style="font-size: 1.25rem;">
                            VENTES - MODIFICATION DU BON D'ECHANGE
                        </h3>
                    </div>
                    <div class="docFormContent card p-3 fs-3">
                        <div id="formErrors" class="alert alert-danger d-none"></div>

                        <div class="topDocForm row d-flex gx-0">
                            <div id="corpInfo" class="col-12 col-lg-9">

                                <div id="formLimiter">

                                    <div class="delivery-box delivery-inline mt-3">
                                            <div class="row g-2 align-items-center">
                                                <div class="col-auto d-none d-md-flex align-items-center">
                                                    <i class="fa fa-truck text-primary" style="font-size:1.2rem;"></i>
                                                </div>
                                                <div class="col-6 col-md-1 delivery-free-field">
                                                    <label class="form-label mb-1 text-center w-100">Gratuit</label>
                                                    <div class="form-check form-switch d-flex justify-content-center align-items-center m-0">
                                                        <input type="checkbox"
                                                               id="form_document_free_delivery"
                                                               name="form_document[isFreedelivery]"
                                                               class="form-check-input"
                                                               data-bs-toggle="tooltip"
                                                               data-bs-placement="top"
                                                               title="Activer pour mettre les frais de livraison a 0"
                                                               {% if document.isFreedelivery is not null and document.isFreedelivery == true %}checked{% endif %}>
                                                    </div>
                                                </div>
                                                <div class="col-12 col-md-3">
                                                    <label class="form-label mb-1">Livraison</label>
                                                    <select id="form_document_delivery_id" name="form_document[delivery][id]" class="form-select form-select-sm shipping">
                                                        {% for delivery in deliverys %}
                                                        <option value="{{ delivery.id }}"
                                                                unitamount="{{ delivery.price }}"
                                                                {% if document.delivery is not null and document.delivery.id == delivery.id %}
                                                                    selected
                                                                {% elseif document.delivery is null and delivery.isSelected == 1 %}
                                                                    selected
                                                                {% endif %}>
                                                            {{ delivery.name }}
                                                        </option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                                <div class="col-6 col-md-2">
                                                    <label class="form-label mb-1">Prix HT</label>
                                                    <input id="form_document_delivery_price_ht"
                                                           class="form-control form-control-sm unitAmountDisplay updateRow price_ht-input"
                                                           type="number" step="any"
                                                           value="{{ document.deliveryPrice ?? '' }}"
                                                           name="form_document[delivery][price_ht]">
                                                </div>
                                                <div class="col-6 col-md-1">
                                                    <label class="form-label mb-1">Nb colis</label>
                                                    <input type="number"
                                                           step="1"
                                                           min="1"
                                                           id="form_document_packagesNbr"
                                                           name="form_document[packagesNbr]"
                                                           class="form-control form-control-sm updateRow quantity quantity-input"
                                                           value="{{ document.packagesNbr ?? 1 }}">
                                                </div>
                                                <div class="col-6 col-md-2">
                                                    <label class="form-label mb-1">TVA</label>
                                                    <select class="updateRow tva-input form-select form-select-sm" name="form_document[delivery][tva]">
                                                        <option value="0" selected>0</option>
                                                        {% for tva in tvas %}
                                                        <option {% if document.deliveryTva and document.deliveryTva.id == tva.id %}selected{% endif %} value="{{ tva.id }}">{{ tva.number }}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                                <div class="col-6 col-md-2">
                                                    <label class="form-label mb-1">Total</label>
                                                    <div class="form-control form-control-sm bg-light d-flex align-items-center justify-content-between">
                                                        <span id="form_document_delivery_total" class="total">{% if document.deliveryTotal %}{{ document.deliveryTotal }}{% else %}0{% endif %}</span><sup>TND</sup>
                                                    </div>
                                                    <input id="form_document_delivery_totalAmount"
                                                           class="withPrecision totalAmountTtc totalAmountTtc-input"
                                                           type="hidden"
                                                           value="{{ document.deliveryTotal ?? '7' }}"
                                                           name="form_document[delivery][total_amount_ttc]">
                                                </div>
                                                <div class="col-12 d-none">
                                                    <input class="discountValue updateRow discount-input hide"
                                                           type="number" step="any"
                                                           value="{% if document.deliveryDiscount is not null %}{{ document.deliveryDiscount }}{% else %}0{% endif %}"
                                                           name="form_document[delivery][discount]">
                                                    <select class="discountUnit updateRow discount-type-input hide" name="form_document[delivery][discount_type]">
                                                        <option {% if document.deliveryDiscountType == "percent" %}selected{% endif %} value="percent">%</option>
                                                        <option {% if document.deliveryDiscountType == "amount" %}selected{% endif %} value="amount" class="currency">TND</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                    <div id="formContent" class="ui-sortable">

                                        <input id="form_document_comment_count" class="" value="{{ document.documentComments | length }}" type="hidden">

                                        <div class="table-responsive">
                                            <table id="tableContent" class="table table-hover align-middle mb-0">
                                                <thead class="table-light">
                                                <tr class="small text-uppercase">
                                                    <th class="d-none">#</th>
                                                    <th class="image">Image</th>
                                                    <th class="name">Référence</th>
                                                    <th class="notes">Description</th>
                                                    <th class="unit text-nowrap">P.U HT</th>
                                                    <th class="discount">Remise</th>
                                                    <th class="tax col-disabled">TVA</th>
                                                    <th class="qt">Qt</th>
                                                    <th class="amount col-disabled text-nowrap">Net à payer</th>
                                                    <th></th>
                                                </tr>
                                                </thead>

                                                <tbody>

                                                {# ===== Template produit (1 seule fois) ===== #}
                                                <tr class="hasRightClick rightClickActivated tr-produit d-none">
                                                    <td class="d-none">
                                                    <input class="item-id" type="hidden">
                                                    <input class="type-input" type="hidden">
                                                    <input class="statut-input" type="hidden">
                                                    <input class="row-index" type="hidden">
                                                    </td>

                                                    <td class="image">
                                                    <img class="image-item rounded border" src="{{ asset('/images/galery_placeholder_200.png') }}" alt="">
                                                    </td>

                                                    <td class="name">
                                                    <input type="text" class="reference-input w-100 form-control" placeholder="Référence">
                                                    </td>

                                                    <td class="notes">
                                                    <textarea rows="1" class="description-textarea form-control"></textarea>
                                                    </td>

                                                    <td class="unit">
                                                    <input class="unitAmountDisplay updateRow price_ht-input form-control"
                                                            onchange="calculateTotalPrice($(this))"
                                                            type="number" step="any" value="0">
                                                    </td>

                                                    <td class="discount">
                                                    <div class="d-flex gap-1">
                                                        <input class="discountValue updateRow discount-input form-control"
                                                            onchange="calculateTotalPrice($(this))"
                                                            type="number" step="any" value="0.00">
                                                        <select class="discountUnit updateRow discount-type-input form-select"
                                                                onchange="calculateTotalPrice($(this))">
                                                        <option value="percent">%</option>
                                                        <option value="amount" class="currency">TND</option>
                                                        </select>
                                                    </div>
                                                    </td>

                                                    <td class="tax taxesvalueslist valueslist col-disabled">
                                                    <select class="updateRow tva-input form-select" onchange="calculateTotalPrice($(this));">
                                                        {% for tva in tvas %}
                                                        <option value="{{ tva.id }}">{{ tva.number }}</option>
                                                        {% endfor %}
                                                    </select>
                                                    </td>

                                                    <td class="qt">
                                                    <input type="number" step="any"
                                                            onchange="calculateTotalPrice($(this));"
                                                            class="updateRow quantity quantity-input form-control"
                                                            value="1">
                                                    </td>

                                                    <td class="amount amountTotal col-disabled text-end">
                                                    <span class="currencyleft"></span>
                                                    <span class="total"></span>
                                                    <span class="currencyright"></span>
                                                    <input class="withPrecision totalAmountTtc totalAmountTtc-input" type="hidden" value="">
                                                    </td>

                                                    <td class="acenter text-center">
                                                    <a href="javascript:void(0);" onclick="removeItem($(this));" class="text-danger">
                                                        <i class="fa fa-trash fs-5 cpointer"></i>
                                                    </a>
                                                    </td>
                                                </tr>

                                                {# ===== Template commentaire ===== #}
                                                <tr class="tr-comment d-none">
                                                    <td class="d-none"></td>

                                                    <td class="text-center align-middle" style="width:42px;">
                                                    <i class="fa fa-comment-dots text-info"></i>
                                                    </td>

                                                    <td colspan="7" class="title">
                                                    <textarea rows="1" placeholder="Commentaire" class="comment-textarea form-control"></textarea>
                                                    </td>

                                                    <td class="acenter text-center" style="width:40px;">
                                                    <a href="javascript:void(0);" onclick="removeItem($(this));" class="text-danger">
                                                        <i class="fa fa-trash fs-5 cpointer"></i>
                                                    </a>
                                                    </td>
                                                </tr>

                                                {# ligne delivery legacy cachee: conservee pour compatibilite JS #}
                                                <tr class="delivery-style d-none"><td colspan="10"></td></tr>


                                               <tr class="table-warning">
                                                    <td colspan="10" class="text-start fw-semibold py-2">
                                                        <i class="fa fa-random me-2"></i> Cocher le(s) produit(s) à échanger
                                                    </td>
                                                </tr>

                                                {% set i = 0 %}
                                                {% if commande.documentDeclinationProduits is not empty %}

                                                {% for key, documentDeclinationProduit in document.documentDeclinationProduits %}
                                                    {% set checked = (documentDeclinationProduit.produitDeclinationValue.id in
                                                    (commande.documentDeclinationProduits
                                                        |filter(p => p.type == "declinationEchange")
                                                        |map(p => p.produitDeclinationValue.id))
                                                    ) ? true : false %}

                                                    {% set i = key %}
                                                    {% set cbId = 'cb-echange-edit-' ~ (key+1) %}

                                                    <tr class="tr-produit {{ checked ? 'selectedToChange tr-echange-checked' : '' }}">

                                                    {# Colonne cachée (alignement avec <th class="d-none">#</th>) + données POST #}
                                                    <td class="d-none">
                                                        <input type="hidden"
                                                            name="form_document[content][{{ key+1 }}][change]"
                                                            value="{{ checked ? 'true' : 'false' }}"
                                                            class="checkbox-input">

                                                        <input class="item-id" type="hidden"
                                                            name="form_document[content][{{ key+1 }}][id]"
                                                            value="{% if documentDeclinationProduit.produitDeclinationValue is defined and documentDeclinationProduit.produitDeclinationValue is not null %}{{ documentDeclinationProduit.produitDeclinationValue.id }}{% endif %}">

                                                        <input class="type-input" type="hidden"
                                                            name="form_document[content][{{ key+1 }}][type]"
                                                            value="declinationEchange">

                                                        <input class="statut-input" type="hidden"
                                                            name="form_document[content][{{ key+1 }}][statut]"
                                                            value="echange">

                                                        <input class="row-index" type="hidden" value="{{ key+1 }}">
                                                    </td>

                                                    {# Checkbox overlay + Image cliquable #}
                                                    <td class="image text-center align-middle">
                                                        <div class="position-relative d-inline-block">

                                                        <input id="{{ cbId }}"
                                                                type="checkbox"
                                                                class="form-check-input checkbox-input-echange position-absolute m-0"
                                                                style="top:-6px; left:-6px; transform: scale(1.35); transform-origin: top left; z-index: 5;"
                                                                {{ checked ? 'checked' : '' }}
                                                                onchange="calculateTotalCheckbox($(this))">

                                                        {% set picture = asset('/images/galery_placeholder_200.png') %}
                                                        {% for image in documentDeclinationProduit.produitDeclinationValue.picture %}
                                                            {% if image.isSelected %}
                                                            {% set picture = app.request.getSchemeAndHttpHost() ~ vich_uploader_asset(image, 'file') %}
                                                            {% endif %}
                                                        {% endfor %}

                                                        <label for="{{ cbId }}" class="m-0 p-0" style="cursor:pointer;">
                                                            <img class="img-produit rounded border" src="{{ picture }}" alt="Produit">
                                                        </label>

                                                        </div>
                                                    </td>

                                                    {# Référence #}
                                                    <td class="name align-middle">
                                                        <input type="text"
                                                            class="form-control form-control-sm reference-input bg-light"
                                                            name="form_document[content][{{ key+1 }}][reference]"
                                                            value="{{ documentDeclinationProduit.reference }}"
                                                            readonly>
                                                    </td>

                                                    {# Description #}
                                                    <td class="notes align-middle">
                                                        <input type="text"
                                                            class="form-control form-control-sm bg-light description-input"
                                                            name="form_document[content][{{ key+1 }}][description]"
                                                            value="{{ documentDeclinationProduit.description }}"
                                                            readonly>
                                                    </td>

                                                    {# Prix HT (readonly + hidden value pour calcul) #}
                                                    <td class="unit align-middle text-end">
                                                        <input type="number"
                                                            class="form-control form-control-sm unitAmountDisplay bg-light"
                                                            value="{{ documentDeclinationProduit.priceHt }}"
                                                            readonly>
                                                        <input type="hidden"
                                                            class="price_ht-echange"
                                                            name="form_document[content][{{ key+1 }}][price_ht]"
                                                            value="{{ documentDeclinationProduit.priceHt }}">
                                                    </td>

                                                    {# Remise #}
                                                    <td class="discount align-middle">
                                                        <div class="d-flex gap-1">
                                                        <input type="number"
                                                                class="form-control form-control-sm discountValue updateRow discount-echange bg-light"
                                                                name="form_document[content][{{ key+1 }}][discount]"
                                                                value="{{ documentDeclinationProduit.discount }}"
                                                                readonly>
                                                        <select class="form-select form-select-sm discountUnit bg-light discount-type-echange"
                                                                name="form_document[content][{{ key+1 }}][discount_type]"
                                                                disabled>
                                                            <option value="percent" {% if documentDeclinationProduit.discountType == "percent" %}selected{% endif %}>%</option>
                                                            <option value="amount" {% if documentDeclinationProduit.discountType == "amount" %}selected{% endif %}>TND</option>
                                                        </select>
                                                        </div>
                                                    </td>

                                                    {# TVA (si tu veux figé: disabled ; sinon enlève disabled) #}
                                                    <td class="tax taxesvalueslist valueslist col-disabled align-middle">
                                                        <select class="form-select form-select-sm updateRow tva-echange"
                                                                name="form_document[content][{{ key+1 }}][tva]"
                                                                disabled>
                                                        <option value="0" selected>0</option>
                                                        {% for tva in tvas %}
                                                            <option {% if documentDeclinationProduit.tva.id == tva.id %}selected{% endif %} value="{{ tva.id }}">{{ tva.number }}</option>
                                                        {% endfor %}
                                                        </select>
                                                    </td>

                                                    {# Qté (readonly) #}
                                                    <td class="qt align-middle">
                                                        <input readonly
                                                            type="number"
                                                            step="any"
                                                            class="form-control form-control-sm updateRow quantity quantity-echange bg-light"
                                                            min="1"
                                                            value="{{ documentDeclinationProduit.quantity }}"
                                                            name="form_document[content][{{ key+1 }}][quantity]">
                                                    </td>

                                                    {# Total TTC #}
                                                    <td class="amount amountTotal col-disabled text-end align-middle">
                                                        <span class="total">{{ documentDeclinationProduit.totalAmountTtc }}</span>
                                                        <sup>TND</sup>
                                                        <input class="withPrecision totalAmountTtc totalAmountTtc-echange"
                                                            type="hidden"
                                                            value="{{ documentDeclinationProduit.totalAmountTtc }}"
                                                            name="form_document[content][{{ key+1 }}][total_amount_ttc]">
                                                    </td>

                                                    {# Colonne actions (vide ici) #}
                                                    <td class="acenter"></td>

                                                    </tr>
                                                {% endfor %}

                                                {% endif %}

                                                    {% if commande.documentDeclinationProduits is not empty %}
                                                        <tr class="table-success">
                                                            <td colspan="10" class="text-start fw-semibold py-2">
                                                                <i class="fa fa-plus-circle me-2"></i> Ajouter le(s) nouveau(x) produit(s)
                                                            </td>
                                                        </tr>
                                                        {% for key, documentDeclinationProduit in commande.documentDeclinationProduits|filter(prod => prod.type != "declinationEchange") %}
                                                            {% set i = i + 1 %}

                                                            <tr class="tr-produit prd-echange">

                                                                {# Colonne cachée (alignement) + hidden nécessaires #}
                                                                <td class="d-none">
                                                                <input class="item-id" type="hidden"
                                                                        name="form_document[content][{{ i+1 }}][id]"
                                                                        value="{% if documentDeclinationProduit.produitDeclinationValue is defined and documentDeclinationProduit.produitDeclinationValue is not null %}{{ documentDeclinationProduit.produitDeclinationValue.id }}{% endif %}">
                                                                <input class="type-input" type="hidden"
                                                                        name="form_document[content][{{ i+1 }}][type]"
                                                                        value="produitDeclination">
                                                                <input class="statut-input" type="hidden"
                                                                        name="form_document[content][{{ i+1 }}][statut]"
                                                                        value="new">
                                                                <input class="row-index" type="hidden" value="{{ i+1 }}">
                                                                </td>

                                                                {# Image #}
                                                                <td class="image">
                                                                {% set picture = asset('/images/galery_placeholder_200.png') %}
                                                                {% for image in documentDeclinationProduit.produitDeclinationValue.picture %}
                                                                    {% if image.isSelected %}
                                                                    {% set picture = app.request.getSchemeAndHttpHost() ~ vich_uploader_asset(image, 'file') %}
                                                                    {% endif %}
                                                                {% endfor %}
                                                                <img class="img-produit rounded border" src="{{ picture }}" alt="">
                                                                </td>

                                                                {# Référence #}
                                                                <td class="name">
                                                                <input type="text"
                                                                        class="reference-input w-100 form-control"
                                                                        placeholder="Référence"
                                                                        name="form_document[content][{{ i+1 }}][reference]"
                                                                        value="{{ documentDeclinationProduit.reference }}">
                                                                </td>

                                                                {# Description (readonly comme ton code actuel) #}
                                                                <td class="notes">
                                                                <input type="text"
                                                                        class="form-control form-control-sm bg-light description-input"
                                                                        name="form_document[content][{{ i+1 }}][description]"
                                                                        value="{{ documentDeclinationProduit.description }}"
                                                                        readonly>
                                                                </td>

                                                                {# PU HT (disabled + hidden posté) #}
                                                                <td class="unit">
                                                                <input class="form-control form-control-sm unitAmountDisplay bg-light"
                                                                        type="number" step="any"
                                                                        value="{{ documentDeclinationProduit.priceHt }}"
                                                                        disabled>
                                                                <input class="unitAmountDisplay updateRow price_ht-input"
                                                                        type="hidden" step="any"
                                                                        name="form_document[content][{{ i+1 }}][price_ht]"
                                                                        value="{{ documentDeclinationProduit.priceHt }}">
                                                                </td>

                                                                {# Remise #}
                                                                <td class="discount">
                                                                <div class="d-flex gap-1">
                                                                    <input class="discountValue updateRow discount-input form-control"
                                                                        onchange="calculateTotalPrice($(this))"
                                                                        type="number" step="any"
                                                                        value="{{ documentDeclinationProduit.discount }}"
                                                                        name="form_document[content][{{ i+1 }}][discount]">

                                                                    <select class="discountUnit updateRow discount-type-input form-select"
                                                                            onchange="calculateTotalPrice($(this))"
                                                                            name="form_document[content][{{ i+1 }}][discount_type]">
                                                                    <option {% if documentDeclinationProduit.discountType == "percent" %}selected{% endif %} value="percent">%</option>
                                                                    <option {% if documentDeclinationProduit.discountType == "amount" %}selected{% endif %} value="amount" class="currency">TND</option>
                                                                    </select>
                                                                </div>
                                                                </td>

                                                                {# TVA #}
                                                                <td class="tax taxesvalueslist valueslist col-disabled">
                                                                <select class="updateRow tva-input form-select"
                                                                        onchange="calculateTotalPrice($(this));"
                                                                        name="form_document[content][{{ i+1 }}][tva]">
                                                                    <option value="0" selected>0</option>
                                                                    {% for tva in tvas %}
                                                                    <option {% if documentDeclinationProduit.tva.id == tva.id %}selected{% endif %} value="{{ tva.id }}">{{ tva.number }}</option>
                                                                    {% endfor %}
                                                                </select>
                                                                </td>

                                                                {# Qt #}
                                                                <td class="qt">
                                                                <input type="number" step="any"
                                                                        onchange="calculateTotalPrice($(this));"
                                                                        class="updateRow quantity quantity-input form-control"
                                                                        min="1"
                                                                        value="{{ documentDeclinationProduit.quantity }}"
                                                                        name="form_document[content][{{ i+1 }}][quantity]">
                                                                </td>

                                                                {# Total TTC #}
                                                                <td class="amount amountTotal col-disabled text-end">
                                                                <span class="total">{{ documentDeclinationProduit.totalAmountTtc }}</span> <sup>TND</sup>
                                                                <input class="withPrecision totalAmountTtc totalAmountTtc-input"
                                                                        type="hidden"
                                                                        value="{{ documentDeclinationProduit.totalAmountTtc }}"
                                                                        name="form_document[content][{{ i+1 }}][total_amount_ttc]">
                                                                </td>

                                                                {# Actions #}
                                                                <td class="acenter text-center">
                                                                <a href="javascript:;" onclick="removeItem($(this));" class="text-danger">
                                                                    <i class="fa fa-trash fs-5 cpointer"></i>
                                                                </a>
                                                                </td>

                                                            </tr>
                                                            {% endfor %}
                                                    {% endif %}
                                                    {% if false and document.documentComments is not empty %}
                                                        {% for  key, documentComment in document.documentComments %}
                                                            <tr>
                                                                <td class="alfet ps-0">
                                                                    <i class="fa flaticon-chat-1"></i>
                                                                </td>
                                                                <td colspan=8 class="title">
                                                                    <textarea rows="1" name="form_document[comment][{{ key+1 }}]" placeholder="Commentaire" class="comment-textarea">{{ documentComment.description }}</textarea>
                                                                </td>
                                                                <td class="acenter">
                                                                    <a href="javascript:void(0);" onclick="removeItem($(this));"><i class="fa fa-trash  fs-4 cpointer"></i></a>
                                                                </td>
                                                            </tr>
                                                        {% endfor %}
                                                    {% endif %}

                                                </tbody>
                                            </table>
                                            </div>
                                            {% if document.documentProduits is empty and document.documentDeclinationProduits is empty %}
                                                <div class="placeholder mt-3 noDocument">
                                                    <div class="alert alert-warning text-center mb-0">
                                                    <strong>Ajoutez une ligne pour commencer votre document</strong>
                                                    </div>
                                                </div>
                                            {% endif %}
                                        </div>

                                        <div class="formFooter row g-3 mt-3">

                                        <div class="col-12 col-lg-7">
                                            {% if type == 'commande' %}
                                            <div class="mb-3 mt-1">
                                                <a href="javascript:void(0);" onclick="addComment($(this));" class="btn btn-secondary btn-sm mb-2">
                                                <i class="fa flaticon-chat-1 me-1"></i> Ajouter un commentaire
                                                </a>

                                                <div class="input-group">
                                                <span class="input-group-text" data-bs-toggle="tooltip" title="Recherche en stock réel">
                                                    <div class="form-check mb-0">
                                                    <input class="form-check-input" name="is_available" value="1" type="checkbox" checked>
                                                    </div>
                                                </span>

                                                <input id="searchItem"
                                                        type="text"
                                                        class="form-control"
                                                        placeholder="Tapez un nom, une référence..."
                                                        autocomplete="off"
                                                        data-category="{{ document.category }}">
                                                </div>

                                                <div class="token-input-dropdown position-relative mt-2" style="display: none;">
                                                <button type="button" class="btn-close search-dropdown-close" aria-label="Fermer"></button>
                                                <ul id="content"></ul>
                                                </div>
                                            </div>
                                            {% endif %}
                                        </div>

                                        {# Totaux #}
                                        <div class="col-12 col-lg-5 ms-lg-auto">
                                            <div class="border rounded-3 p-2 bg-light">
                                            <table class="table table-sm table-borderless mb-0 align-middle">
                                                <tbody>

                                                <tr>
                                                    <td class="text-muted">
                                                    <i class="fa fa-calculator me-2 text-secondary"></i> Total HT
                                                    </td>
                                                    <td class="text-end text-muted">
                                                    <input type="hidden" id="form_documentTotalAmountHt" name="form_document[totalAmountHt]" value="{{ document.totalAmountHt ?? 0 }}">
                                                    <input type="hidden" id="form_documentTotalAmountHt-echange" value="0">
                                                    <span id="totalHt">{{ document.totalAmountHt ?? 0 }}</span> <sup>TND</sup>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td class="text-muted">
                                                    <i class="fa fa-percent me-2 text-warning"></i> TVA
                                                    </td>
                                                    <td class="text-end text-muted">
                                                    <input type="hidden" id="form_documentTotalTva" name="form_document[totalTva]" value="{{ document.totalTva ?? 0 }}">
                                                    <span id="totalTva">{{ document.totalTva ?? 0 }}</span> <sup>TND</sup>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td class="text-dark fw-semibold">
                                                    <i class="fa fa-file-invoice-dollar me-2"></i> Total TTC
                                                    </td>
                                                    <td class="text-end fw-semibold">
                                                    <input type="hidden" id="form_documentTotalAmountTtc" name="form_document[totalAmountTtc]" value="{{ document.totalAmountTtc ?? 0 }}">
                                                    <input type="hidden" id="form_documentTotalAmountTtc-echange" value="0">
                                                    <span id="totalTtc">{{ document.totalAmountTtc ?? 0 }}</span> <sup>TND</sup>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td class="text-muted">
                                                    <i class="fa fa-tag me-2 text-info"></i> Remise
                                                    {% if document.discountType == 'percent' %}
                                                        ({{ document.discount ~ "%" }})
                                                    {% endif %}
                                                    </td>
                                                    <td class="text-end text-muted">
                                                    <span id="totalDisc">{{ document.discount ?? 0 }}</span>
                                                    <span id="typetotalDisc">
                                                        {% if document.discountType == "percent" %}%{% else %}<sup>TND</sup>{% endif %}
                                                    </span>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td class="text-muted">
                                                    <i class="fa fa-truck me-2 text-primary"></i> Frais de port
                                                    </td>
                                                    <td class="text-end text-muted">
                                                    {{ document.deliveryTotal ?? 0 }} <sup>TND</sup>
                                                    </td>
                                                </tr>

                                                <tr><td colspan="2" class="py-1"></td></tr>

                                                <tr class="border-top">
                                                    <td class="pt-3 fw-bold text-success">
                                                    <i class="fa fa-wallet me-2 text-success"></i> Total Net
                                                    </td>
                                                    <td class="text-end pt-3 fw-bold text-success">
                                                    <span id="totalNet">{{ document.totalAmountTtc ?? 0 }}</span> <sup>TND</sup>
                                                    </td>
                                                </tr>

                                                </tbody>
                                            </table>
                                            </div>
                                        </div>

                                        <div class="note mt-2">
                                            <textarea name="form_document[note]" class="d-none" placeholder="Notes" dir="ltr"></textarea>
                                        </div>

                                        </div>
                                    </div>
                                </div>
                                {# -- Partie droite : Document + Client + Paiement + Livraison -- #}
                                <div class="col-12 col-lg-3 mt-4 mt-lg-0 doc-sidebar">

                                <fieldset class="crm-fieldset p-3 mb-3">
                                    <legend class="crm-legend">
                                        <i class="fa fa-random text-primary me-2"></i> Motif d'échange
                                    </legend>

                                    <div class="ps-2">
                                        <div class="mb-2">
                                            <label for="exchange-reason-select" class="form-label mb-1">Motif</label>
                                            <select id="exchange-reason-select"
                                                    name="form_document[exchangeReason]"
                                                    class="form-select form-select-sm">
                                                <option value="">Sélectionner un motif</option>
                                                {% for reason in exchangeReasons %}
                                                    <option value="{{ reason.id }}"
                                                            {% if commande.exchangeReason and commande.exchangeReason.id == reason.id %}selected{% endif %}>
                                                        {{ reason.name }}
                                                    </option>
                                                {% endfor %}
                                            </select>
                                        </div>

                                        <div>
                                            <label for="exchange-reason-note" class="form-label mb-1">Détails complémentaires</label>
                                            <textarea id="exchange-reason-note"
                                                      name="form_document[exchangeReasonNote]"
                                                      class="form-control form-control-sm"
                                                      rows="3"
                                                      placeholder="Préciser la taille, la couleur, le modèle ou toute autre information utile">{{ commande.exchangeReasonNote ?? '' }}</textarea>
                                        </div>
                                    </div>
                                </fieldset>

                                {# == DOCUMENT == #}
                                <fieldset class="crm-fieldset p-3">
                                    <legend class="crm-legend">
                                        <i class="fa fa-file-alt text-primary me-2"></i> Document
                                    </legend>

                                    <div class="ps-2">
                                        <input type="text" class="d-none" id="source" name="form_document[source][id]" value="{{ document.source.id }}" readonly>

                                        <div class="row gx-1 gy-1 align-items-center mb-1">
                                        <label for="document-internalNbr" class="col-4 form-label mb-0 text-start">N°</label>
                                        <div class="col-8">
                                            <input type="text" class="form-control form-control-sm"
                                                id="document-internalNbr"
                                                name="form_document[internalNbr]"
                                                value="{{ commande.internalNbr }}"
                                                readonly>
                                        </div>
                                        </div>

                                        <div class="row gx-1 gy-1 align-items-center">
                                            <label for="document-createdAt" class="col-4 form-label mb-0 text-start">Date</label>
                                            <div class="col-8">
                                                <input type="text" class="form-control form-control-sm"
                                                    id="document-createdAt"
                                                    name="form_document[createdAt]"
                                                    value="{{ commande.createdAt|date('d/m/Y') }}"
                                                    readonly>
                                            </div>
                                        </div>

                                        <div class="row gx-1 gy-1 align-items-center mt-1">
                                            <label for="document-promisedAt" class="col-4 form-label mb-0 text-start">Date prévue</label>
                                            <div class="col-8">
                                                <input type="datetime-local"
                                                    id="document-promisedAt"
                                                    name="form_document[promisedAt]"
                                                    class="form-control form-control-sm datetimepicker-width"
                                                    autocomplete="off"
                                                    {% if commande.promisedAt %} value="{{ commande.promisedAt|date('Y-m-d\\TH:i') }}" {% endif %}>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>

                                <div class="d-none">
                                    <input type="text" id="currentUser" class="form-control"
                                            name="form_document[currentUser]"
                                            value="{{ document.user.username }}"
                                            disabled>
                                </div>

                                {# == INFO CLIENT == #}
                                <fieldset class="crm-fieldset p-3">
                                    <legend class="crm-legend">
                                        <i class="fa fa-user text-primary me-2"></i> Info Client
                                    </legend>

                                    <div class="ps-2">

                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                        <div class="fw-semibold">
                                            {{ document.client.civility }} {{ document.client.firstName }}
                                        </div>

                                        <a href="{{ path('user_show', {'id': document.client.id }) }}"
                                            class="text-decoration-none"
                                            title="{{ document.client.civility }} {{ document.client.firstName }}"
                                            target="_blank">
                                            {{ document.client.username }}
                                        </a>
                                        </div>

                                        <div class="small mb-2">
                                        <i class="fa fa-phone me-1 text-muted"></i>
                                        <a href="tel:{{ document.client.phone }}" class="text-decoration-none">
                                            {{ document.client.phone }}
                                        </a>
                                        {% if document.client.secondPhone %}
                                            <span class="text-muted mx-1">|</span>
                                            <a href="tel:{{ document.client.secondPhone }}" class="text-decoration-none">
                                            {{ document.client.secondPhone }}
                                            </a>
                                        {% endif %}
                                        </div>

                                        {% if document.client.adress %}
                                        <input type="hidden" id="doc_region" name="form_document[region]" value="{% if document.region %}{{ document.region }}{% else %}{{ document.client.region }}{% endif %}">

                                        <div class="d-flex align-items-start justify-content-between gap-2 mb-2">
                                            <div id="thirdAddress_toHTML" class="small text-muted lh-sm">
                                            <i class="fa fa-map-marker me-1"></i>
                                            {% if document.adress %}
                                                {{ document.adress|replace({'Tunisie': ""}) }}
                                            {% else %}
                                                {{ document.client.adress|replace({'Tunisie': ""}) }}
                                            {% endif %}
                                            , {{ document.client.city }} {{ document.client.region }}
                                            </div>

                                            {% if document.client.multiAddress is not empty %}
                                            <button id="btn-multiaddress"
                                                    title="Le client a plusieurs adresses"
                                                    type="button"
                                                    class="btn btn-sm btn-danger rounded-pill px-2 py-1 blinking">
                                                <i class="fa fa-map-marker me-1"></i>
                                                <span class="badge bg-light text-danger">
                                                {{ (document.client.multiAddress | length) + 1 }}
                                                </span>
                                            </button>
                                            {% endif %}
                                        </div>

                                        {% if document.client.multiAddress is not empty %}
                                            <select id="select_adress"
                                                    onchange="selectAdress($(this));"
                                                    class="form-select form-select-sm w-100 mb-2">
                                            <option
                                                {% if document.client.adress == document.adress %} selected {% endif %}
                                                value="0"
                                                data-address="{{ document.client.adress|replace({'Tunisie': ""}) }}"
                                                data-city="{{ document.client.city }}"
                                                data-region="{{ document.client.region }}">
                                                {{ document.client.adress }} - {{ document.client.city }} - {{ document.client.region }}
                                            </option>

                                            {% for addres in document.client.multiAddress %}
                                                <option value="{{ addres.id }}"
                                                        data-address="{{ addres.address|replace({'Tunisie': ""}) }}"
                                                        data-city="{{ addres.city }}"
                                                        data-region="{{ addres.region }}">
                                                {{ addres.address }} - {{ addres.city }} - {{ addres.region }}
                                                </option>
                                            {% endfor %}
                                            </select>
                                        {% endif %}

                                        <input type="hidden" id="doc_adress" name="form_document[adress]"
                                                value="{% if document.adress %}{{ document.adress }}{% else %}{{ document.client.adress }} {{ document.client.city }} {{ document.client.region }} {{ document.client.country }}{% endif %}">
                                        {% else %}
                                        <div class="small text-muted">
                                            <i class="fa fa-map-marker me-1"></i> Pas d'adresse !
                                        </div>
                                        {% endif %}

                                    </div>
                                </fieldset>


                                {# == INFOS PAIEMENT == #}
                                <fieldset class="crm-fieldset p-3">
                                    <legend class="crm-legend">
                                        <i class="fa fa-wallet text-primary me-2"></i> Infos Paiement
                                    </legend>

                                    <div class="ps-2">

                                        <div class="row gx-1 gy-1 align-items-center mb-2">
                                        <label class="col-4 form-label mb-0 text-start">Remise</label>
                                        <div class="col-4">
                                            <input type="number" step="any"
                                                class="form-control form-control-sm discountValue updateRow discountTotalValue"
                                                name="form_document[discount]"
                                                {% if commande.discount is null %} value="0" {% else %} value="{{ commande.discount }}" {% endif %}
                                                onchange="calculateTotal()">
                                        </div>
                                        <div class="col-4">
                                            <select class="form-select form-select-sm discountUnit updateRow discountTotalUnit"
                                                    name="form_document[discountType]"
                                                    onchange="calculateTotal()">
                                            <option value="amount" {% if commande.discountType == "amount" %}selected{% endif %}>TND</option>
                                            <option value="percent" {% if commande.discountType == "percent" %}selected{% endif %}>%</option>
                                            </select>
                                        </div>
                                        </div>

                                        <div class="row gx-1 gy-1 align-items-center">
                                        <label class="col-4 form-label mb-0 text-start">Moyen</label>
                                        <div class="col-8">
                                            <select name="form_document[paymentMethod]" class="form-select form-select-sm">
                                            <option value="especes" {% if commande.paymentMethod == "especes" or commande.paymentMethod is null %}selected{% endif %}>Espèces</option>
                                            <option value="cheque" {% if commande.paymentMethod == "cheque" %}selected{% endif %}>Chèque</option>
                                            <option value="virement" {% if commande.paymentMethod == "virement" %}selected{% endif %}>Virement bancaire</option>
                                            <option value="carte" {% if commande.paymentMethod == "carte" %}selected{% endif %}>Carte bancaire</option>
                                            <option value="prelevement" {% if commande.paymentMethod == "prelevement" %}selected{% endif %}>Prélèvement</option>
                                            </select>
                                        </div>

                                        <input type="hidden" name="form_document[paymentRef]" value="">
                                        </div>

                                    </div>
                                </fieldset>



                                </div>
                            </div>
                            <div class="clear"></div>
                            <div class="fixed bottom-right zi-100 white-bkg py-3 px-5 shadow fixed-block">
                                <div class="container-fluid d-flex justify-content-end align-items-center">

                                    {# Bouton Annuler à gauche #}
                                    <a href="{{ path('document_index', {'type': 'echange', 'category': 'client', 'date': 'today'}) }}" class="btn btn-light border btn-sm button-fixe">
                                        <i class="fa fa-times me-1"></i> Annuler et Fermer
                                    </a>

                                    {# Bouton Enregistrer à droite #}
                                    <button type="submit" name="form_document[save]" class="btn btn-dark loader-submit">
                                        <i class="fa fa-save me-1"></i> Enregistrer et continuer
                                    </button>

                                </div>
                        </div>

                    </div>
                </form>
            </div>
        </div>
    {{ include('@admin/includes/modals/_modal_edit_user.html.twig') }}
    {{ include('@admin/includes/modals/_modal_catalogue_produit.html.twig') }}
{% endblock %}