{% 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 badge-echange" style="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 - CREATION ECHANGE DU BON DE COMMANDE CLIENT
                    </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 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="formLimiter">
                                <div id="formContent" class="ui-sortable">
                                    <input id="form_document_count" class="" value="{{ document.documentDeclinationProduits | length }}" type="hidden">
                                    <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 ligne 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 ligne commentaire (1 seule fois) ===== #}
                                            <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="2" placeholder="Taper votre commentaire ..." class="comment-textarea form-control"></textarea>
                                                </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>

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

                                            <tr>  <td colspan="100" style="border-top: 2px solid #dee2e6; height: 1px; padding: 0;"></td> </tr> {#Ligne séparatrice#}

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


                                            {% if document and document.documentDeclinationProduits is not empty %}
                                                {% for key, documentDeclinationProduit in document.documentDeclinationProduits|filter(prod => prod.type != "declinationEchange") %}
                                                    <tr class="tr-produit">

                                                    {# Colonne cachée (alignement avec <th class="d-none">#</th>) #}
                                                    <td class="d-none">
                                                        <input type="hidden" name="form_document[content][{{ key+1 }}][change]" value="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="checkbox">
                                                    {% set cbId = 'cb-echange-' ~ key %}

                                                    <div class="position-relative d-inline-block">

                                                        <input id="{{ cbId }}"
                                                            onchange="calculateTotalCheckbox($(this))"
                                                            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;">

                                                        {% 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 %}

                                                        {# Cliquer sur l'image toggle la checkbox #}
                                                        <label for="{{ cbId }}" class="m-0 p-0" style="cursor:pointer;">
                                                        <img class="img-produit rounded border" src="{{ picture }}" alt="">
                                                        </label>

                                                    </div>
                                                    </td>

                                                    {# Référence  #}
                                                    <td class="name">

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

                                                    </td>

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

                                                    {# P.U HT (affiché disabled + valeur postée en hidden) #}
                                                    <td class="unit">
                                                        <input class="form-control"
                                                            type="number" step="any"
                                                            value="{{ documentDeclinationProduit.priceHt }}"
                                                            disabled>
                                                        <input class="price_ht-echange"
                                                            type="hidden"
                                                            name="form_document[content][{{ key+1 }}][price_ht]"
                                                            value="{{ documentDeclinationProduit.priceHt }}">
                                                    </td>

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

                                                        <select class="discountUnit updateRow discount-type-echange form-select"
                                                                onchange="calculateTotalPrice($(this))"
                                                                name="form_document[content][{{ key+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-echange form-select"
                                                                onchange="calculateTotalPrice($(this));"
                                                                name="form_document[content][{{ key+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-echange form-control"
                                                            min="1"
                                                            value="{{ documentDeclinationProduit.quantity }}"
                                                            name="form_document[content][{{ key+1 }}][quantity]">
                                                    </td>

                                                    {# Total TTC #}
                                                    <td class="amount amountTotal col-disabled text-end">
                                                        <span class="currencyleft"></span>
                                                        <span class="total">{{ documentDeclinationProduit.totalAmountTtc }}</span>
                                                        <span class="currencyright"><sup>TND</sup></span>
                                                        <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 document.documentComments is not empty %}
                                                {% for key, documentComment in document.documentComments %}
                                                    <tr class="tr-comment table-light">
                                                    <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="2"
                                                                name="form_document[comment][{{ key+1 }}]"
                                                                placeholder="Commentaire"
                                                                class="form-control comment-textarea w-100">{{ documentComment.description }}</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>
                                                {% endfor %}
                                            {% endif %}
                                            <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>


                                        </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 ici pour ajouter un produit..."
                                                    autocomplete="off"
                                                    data-category="{{ document.category }}"
                                                    autofocus>
                                            </div>

                                            <div class="token-input-dropdown position-relative" 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 id="totalAmountTaxEcl">
                                                <td class="text-muted"><i class="fa fa-calculator me-2"></i>Montant total HT</td>
                                                <td class="text-end text-muted">
                                                <input type="hidden" id="form_documentTotalAmountHt" name="form_document[totalAmountHt]" value="0">
                                                <input type="hidden" id="form_documentTotalAmountHt-echange" value="0">
                                                <span class="currencyleft"></span><span id="totalHt" class="total">0.000</span> <sup>TND</sup>
                                                </td>
                                            </tr>

                                            <tr class="totalTaxes">
                                                <td class="text-muted"><i class="fa fa-percent me-2 text-warning"></i>TVA</td>
                                                <td class="text-end text-muted override-totals-no-editable">
                                                <input type="hidden" id="form_documentTotalTva" name="form_document[totalTva]" value="0">
                                                <span class="currencyleft"></span><span id="totalTva" class="total">0.000</span> <sup>TND</sup>
                                                </td>
                                            </tr>

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

                                            <tr id="totalDiscount">
                                                <td class="text-muted"><i class="fa fa-tag me-2 text-info"></i>Remise</td>
                                                <td class="text-end text-muted">
                                                <span class="total" id="totalDisc">0.000</span>
                                                <span id="typetotalDisc">{% if document.discountType == "percent" %}%{% else %}<sup>TND</sup>{% endif %}</span>
                                                </td>
                                            </tr>

                                            <tr id="totalNetBeforeShipping">
                                                <td class="text-muted"><i class="fa fa-wallet me-2 text-secondary"></i>Net à payer (hors frais)</td>
                                                <td class="text-end text-muted">
                                                <span id="totalNetBeforeDelivery">0.000</span> <sup>TND</sup>
                                                </td>
                                            </tr>

                                            <tr id="totalShipping">
                                                <td class="text-muted"><i class="fa fa-truck me-2 text-primary"></i>Total frais de port</td>
                                                <td class="text-end text-muted">
                                                <span class="total-frais">{{ document.deliveryTotal }}</span> <sup>TND</sup>
                                                </td>
                                            </tr>

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

                                            <tr id="totalAllInc" class="border-top">
                                                <td class="pt-3 fw-bold"><i class="fa fa-wallet me-2 text-success"></i>Montant total Net</td>
                                                <td class="text-end pt-3 fw-bold text-success">
                                                <span id="totalNet">0.000</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 document.exchangeReason and document.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">{{ document.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">
                                {# Champ source Document (caché) #}
                                <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="{{ document.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="{{ document.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 document.promisedAt %} value="{{ document.promisedAt|date('Y-m-d\\TH:i') }}" {% endif %}>
                                    </div>
                                </div>

                            </div>
                        </fieldset>

                            {# Créé par (caché) #}
                        <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 %}
                                <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]"
                                        value="0"
                                        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 document.discountType == "amount" %}selected{% endif %}>TND</option>
                                    <option value="percent" {% if document.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 document.paymentMethod == "especes" or document.paymentMethod is null %}selected{% endif %}>Espèces</option>
                                    <option value="cheque" {% if document.paymentMethod == "cheque" %}selected{% endif %}>Chèque</option>
                                    <option value="virement" {% if document.paymentMethod == "virement" %}selected{% endif %}>Virement bancaire</option>
                                    <option value="carte" {% if document.paymentMethod == "carte" %}selected{% endif %}>Carte bancaire</option>
                                    <option value="prelevement" {% if document.paymentMethod == "prelevement" %}selected{% endif %}>Prélèvement</option>
                                    </select>
                                </div>

                                <input type="hidden" id="paymentRef" 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">
                            <a href="{{ path('document_index', {'type': 'echange', 'category': 'client', 'date': 'today'}) }}"
                            class="btn btn-light border me-2">
                            <i class="fa fa-times me-1"></i> Annuler et Fermer
                            </a>

                            <button type="submit" name="form_document[save]" class="btn btn-dark loader-submit">
                            <i class="fa fa-save me-1"></i> Enregistrer et quitter
                            </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 %}