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

    <style>
        .doc-sidebar {
            background: #f5f6f8;
            border-left: 1px solid #dcdfe4;
            padding: 16px;
        }

        .doc-sidebar > .sidebar-block {
            background: #ffffff;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            padding: 14px;
            margin-bottom: 16px;
        }

        .sidebar-title {
            background-color: #f8f9fa;
            border-left: 4px solid #007bff;
            padding: 10px 12px;
            font-weight: 600;
            border-radius: 4px;
            margin-bottom: 12px;
        }

        @keyframes blinkPromo {
            0%   { opacity: 1; }
            50%  { opacity: 0.3; }
            100% { opacity: 1; }
        }

        .promo-blink {
            animation: blinkPromo 0.8s ease-in-out infinite;
        }

        #tableContent.table {
            word-wrap: break-word;
            border-collapse: separate;
            border-spacing: 0;
            width: 100%;
            margin-bottom: 1rem;
            font-size: 0.95rem;
        }

        #tableContent.table th,
        #tableContent.table td {
            vertical-align: middle;
            padding: 0.5rem;
        }

        #tableContent.table th {
            background-color: #f0f0f0;
            font-weight: 600;
            color: #333;
            text-align: center;
        }

        #tableContent img.img-produit,
        .image-item {
            width: 50px;
            height: auto;
            border-radius: 4px;
            border: 1px solid #ccc;
        }

        /* Saisie produits */
        input.reference-input,
        textarea.description-textarea,
        input.price_ht-input,
        input.discount-input,
        input.quantity-input,
        select {
            width: 100%;
            font-size: 0.9rem;
            padding: 0.4rem 0.5rem;
            border-radius: 4px;
            border: 1px solid #ccc;
        }

        /* Bouton suppression ligne */
        .acenter i.la-trash {
            color: #dc3545;
            cursor: pointer;
            transition: color 0.2s;
        }

        .acenter i.la-trash:hover {
            color: #a71d2a;
        }

        /* Totaux */
        .listTotal table {
            width: 100%;
            font-size: 0.95rem;
        }

        .listTotal td.title {
            font-weight: 600;
            color: #444;
        }

        .listTotal td.tamount {
            text-align: right;
        }

        /* Ajout produit */
        #searchItem {
            font-size: 0.9rem;
        }

        .token-input-dropdown ul#content {
            background-color: white;
            border: 1px solid #ddd;
            list-style: none;
            position: relative;
            padding-top: 28px;
        }

        .search-dropdown-close {
            position: absolute;
            top: 6px;
            right: 8px;
            z-index: 5;
            font-size: 12px;
        }

       .delivery-box.delivery-inline{
            border:1px solid #dbe3ea;
            background:#f8fbff;
            border-left:3px solid #3b82f6;
            border-radius:8px;
            padding:.5rem .6rem;
            }
            .delivery-box.delivery-inline .form-label{
            font-size:.75rem;
            font-weight:600;
            margin-bottom:.15rem;
            line-height:1.1;
            }
            .delivery-box.delivery-inline .form-control,
            .delivery-box.delivery-inline .form-select{
            min-height:31px;
            font-size:.84rem;
            padding:.2rem .45rem;
            }
            @media (max-width: 767.98px){
            .delivery-box.delivery-inline .row{ flex-wrap: wrap !important; }
            }

            .delivery-icon{
                font-size: 1.25rem;
                line-height: 1;
                }

                .nb-colis-col{
                max-width: 92px;
                }

                #form_document_packagesNbr{
                text-align: center;
                padding-left: .25rem;
                padding-right: .25rem;
                }

                .delivery-box.delivery-inline .form-check-input{
                margin-top: 0;
                }

.delivery-free-field{
  min-width: 90px;
  max-width: 100px;
}
.delivery-free-field .form-label{
  font-size: .78rem;
  line-height: 1.1;
}
.delivery-free-field .form-check-input{
  margin-top: 0;
}

    </style>
{% endblock %}


{% block subheader %}

{% endblock %}
{% block breadcrumb %}{% endblock %}
{% block stat %}

{% endblock %}
{% block bodycontent %}
    <div id="legacy-container" >
        <div id="form">
            <form id="docForm"  class="container-big"  name="form_document"   method="POST"  action="{{ path('new_document_commande', {'category' : category,'type':type, 'id' : id }) }}" 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: #d4edda; border: 1px solid #c3e6cb; color: #155724;">
                    <i class="fas fa-edit me-3 fa-lg"></i>
                    <h3 class="m-subheader__title m-0 p-0" style="font-size: 1.25rem;">
                        ACHAT -
                        {% if document.type == 'achat' %} CREATION DE DEMANDE D'ACHAT FOURNISSEUR
                        {% elseif document.type == 'facture' %}  CREATION DE FACTURE FOURNISSEUR
                        {% elseif document.type == 'reception' %}  CREATION DU BON DE RECEPTION FOURNISSEUR
                        {% elseif document.type == 'retour' %}  CREATION BON DE RETOUR FOURNISSEUR
                        {% endif %}
                    </h3>
                </div>
                <div class="docFormContent well fs-3">
                    <div id="formErrors" class="alert alert-danger" style="display:none;"></div>

                    <div class="topDocForm row justify-content-between">

                        <div id="corpInfo" class="col-12 col-lg-9">
                            <div class="delivery-box delivery-inline mb-2">
                                <div class="row g-2 align-items-center flex-nowrap">
                                    <div class="col-auto d-none d-md-flex align-items-center pe-1">
                                        <i class="fa fa-truck text-primary delivery-icon"></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 à 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">Transporteur</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{% 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 nb-colis-col">
                                        <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">{{ document.deliveryTotal ?? 0 }}</span>
                                            <sup>TND</sup>
                                        </div>
                                        <input id="form_document_delivery_totalAmount"
                                                class="withPrecision totalAmountTtc totalAmountTtc-input"
                                                type="hidden"
                                                value="{{ document.deliveryTotal ?? 0 }}"
                                                name="form_document[delivery][total_amount_ttc]">
                                    </div>



                                    <div class="col-12 d-none">
                                        <input class="discountValue updateRow discount-input" type="number" step="any"
                                                value="{{ document.deliveryDiscount ?? 0 }}" name="form_document[delivery][discount]">
                                        <select class="discountUnit updateRow discount-type-input" 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">TND</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            {# Contenu du document (structure identique client) #}
                            <div id="formLimiter" class="card border-0 shadow-sm">
                                <div id="formContent" class="ui-sortable">
                                    <input id="form_document_count" value="{{ document.documentDeclinationProduits|length }}" type="hidden">
                                    <input id="form_document_comment_count" 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="qt">Qt</th>
                                                    <th class="discount">Remise</th>
                                                    <th class="tax col-disabled">TVA</th>

                                                    <th class="amount col-disabled text-nowrap">Net à payer (TTC)</th>
                                                    <th></th>
                                                </tr>
                                            </thead>

                                            <tbody>
                                                {# Template ligne produit (identique client) #}
                                                <tr class="tr-produit d-none">
                                                    <td class="image">
                                                        <img class="image-item rounded border" src="{{ asset('/images/galery_placeholder_200.png') }}" alt="Produit">
                                                        <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="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 (identique client) #}
                                                <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 livraison (structure client, logique inchangée) #}
                                               <tr class="delivery-style d-none">
                                                    <td colspan="10"></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>

                                {# Footer (structure client) - on garde tes features "Catalogue" + "Total Qté par produit" #}
                                <div class="formFooter row g-3 mt-3">
                                    <div class="col-12 col-lg-7">
                                        {% if type in ['achat','retour','reception'] %}
                                            <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="Rechercher uniquement les déclinaisons en stock">
                                                        <div class="form-check mb-0">
                                                            <input class="form-check-input" name="is_available" value="1" type="checkbox">
                                                        </div>
                                                    </span>

                                                    <input id="searchItem"
                                                        type="text"
                                                        class="form-control"
                                                        placeholder="Tapez ici pour ajouter un produit..."
                                                        autocomplete="off"
                                                        data-category="{{ document.category }}">

                                                    <button class="btn btn-primary d-flex align-items-center"
                                                            data-bs-toggle="modal"
                                                            data-bs-target="#m_modal_catalogue_produit"
                                                            type="button">
                                                        <i class="fa fa-archive me-1"></i> Catalogue
                                                    </button>
                                                </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>

                                                {# Total Qté par produit (ton feature, inchangé) #}
                                                <div class="mt-4 border rounded shadow-sm">
                                                    <div class="card-header bg-light d-flex align-items-center py-2 px-3 border-bottom">
                                                        <i class="fa fa-cubes text-primary me-2"></i>
                                                        <strong>Total Qté par produit</strong>
                                                    </div>

                                                    <div class="card-body pt-3 pb-2 px-4 bg-white">
                                                        <div id="catalogue-summary-by-product" class="small text-muted" style="line-height: 1.7;">
                                                            <em>Aucun produit ajouté</em>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        {% endif %}
                                    </div>

                                    {# Totaux BS5 identiques client (on garde tes IDs) #}
                                    <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>Total HT</td>
                                                        <td class="text-end text-muted">
                                                            <input type="hidden" id="form_documentTotalAmountHt" name="form_document[totalAmountHt]" value="0">
                                                            <span class="currencyleft"></span><span id="totalHt" class="total">0.000</span> <sup>TND</sup>
                                                        </td>
                                                    </tr>

                                                    <tr id="totalTax_3014919" class="totalTaxes">
                                                        <td class="text-muted"><i class="fa fa-percent me-2 text-warning"></i>Total 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>Total TTC</td>
                                                        <td class="text-end fw-semibold">
                                                            <input type="hidden" id="form_documentTotalAmountTtc" name="form_document[totalAmountTtc]" value="0">
                                                            <span class="currencyleft"></span><span id="totalTtc">0.000</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 id="totalDisc" class="total">{% if document.discount is null %}0.000{% else %}{{ document.discount }}{% endif %}</span>
                                                            <span id="typetotalDisc">{% if document.discountType == "percent" %}%{% else %}<sup>TND</sup>{% endif %}</span>
                                                        </td>
                                                    </tr>

                                                    <tr id="totalShipping">
                                                        <td class="text-muted"><i class="fa fa-truck me-2 text-primary"></i>Frais de port</td>
                                                        <td class="text-end text-muted">
                                                            <span class="total-frais"></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>Net à payer</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 rows="1" name="form_document[note]" class="d-none" placeholder="Notes" dir="ltr"></textarea>
                                    </div>
                                </div>

                            </div>
                        </div>

                         <div class="col-12 col-lg-3 mt-4 mt-lg-0 doc-sidebar">

                        <fieldset class="crm-fieldset p-3">
                            <legend class="crm-legend">
                                <i class="fa fa-user-tie text-primary me-2"></i> Fournisseur
                            </legend>

                            <div class="ps-2">
                                <div class="row gx-1 gy-1 align-items-center">
                                    <label for="supplier_id" class="col-4 form-label mb-0 text-start">Nom</label>

                                    <div class="col-8">
                                        <select id="supplier_id"
                                                name="form_document[supplier][id]"
                                                class="form-select form-select-sm"
                                                required>
                                            <option value="" disabled {% if document.supplier is null %}selected{% endif %}>
                                                -- Sélectionner --
                                            </option>

                                            {% for supplier in suppliers %}
                                                <option value="{{ supplier.id }}"
                                                    {% if document.supplier is not null and document.supplier.id == supplier.id %}selected{% endif %}>
                                                    {{ supplier.name }}
                                                </option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                            {# == INFOS DOCUMENT (fieldset style client) == #}
                            <fieldset class="crm-fieldset p-3">
                                <legend class="crm-legend">
                                    <i class="fa fa-file-alt text-primary me-2"></i> Info Document
                                </legend>

                                <div class="ps-2">
                                    <div class="row gx-1 gy-2">
                                        <div class="col-12 col-md-6">
                                            <label class="form-label mb-1">N° Document</label>
                                            <input type="text"
                                                class="form-control form-control-sm bg-light text-muted"
                                                name="form_document[internalNbr]"
                                                value="{{ document.internalNbr }}"
                                                readonly>
                                        </div>

                                        <div class="col-12 col-md-6">
                                            <label class="form-label mb-1">Date création Doc</label>
                                            <input type="text"
                                                class="form-control form-control-sm bg-light text-muted"
                                                value="{{ document.createdAt|date('d/m/Y') }}"
                                                readonly>
                                        </div>

                                        <div class="col-12 col-md-6">
                                            <label class="form-label mb-1">Date BL Fournisseur</label>
                                            {# NOTE: datetime-local attend Y-m-d\TH:i ; ton ancien code utilisait d/m/Y => bug #}
                                            <input type="datetime-local"
                                                class="form-control form-control-sm"
                                                name="form_document[shippedAt]"
                                                {% if document.shippedAt %}value="{{ document.shippedAt|date('Y-m-d\\TH:i') }}"{% endif %}>
                                        </div>

                                        <div class="col-12 col-md-6">
                                            <label class="form-label mb-1">Date Bon Réception</label>
                                            <input type="datetime-local"
                                                class="form-control form-control-sm"
                                                name="form_document[bonrecuAt]"
                                                {% if document.bonrecuAt %}value="{{ document.bonrecuAt|date('Y-m-d\\TH:i') }}"{% endif %}>
                                        </div>

                                        <div class="col-12">
                                            <label class="form-label mb-1">N° Document Fournisseur</label>
                                            <input type="text"
                                                class="form-control form-control-sm"
                                                name="form_document[externalNbr]"
                                                value="{{ document.externalNbr }}">
                                        </div>

                                        <div class="col-12 d-none">
                                            <label class="form-label mb-1">Objet document</label>
                                            <textarea rows="1" name="form_document[object]" class="form-control form-control-sm" dir="ltr"></textarea>
                                        </div>

                                        <div class="col-12">
                                            <label class="form-label mb-1">Ajouter une note</label>
                                            <textarea name="form_document[note]"
                                                    rows="3"
                                                    class="form-control form-control-sm"
                                                    placeholder="Saisir une remarque ou une instruction...">{{ document.note }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>

                            {# == INFOS PAIEMENT (fieldset style client) == #}
                            <fieldset class="crm-fieldset p-3 mt-3">
                                <legend class="crm-legend">
                                    <i class="fa fa-money-check-alt text-success me-2"></i> Info Paiement
                                </legend>

                                <div class="ps-2">
                                    <div class="row gx-1 gy-2">
                                        <div class="col-12">
                                            <label class="form-label mb-1">Moyen de paiement</label>
                                            <select name="form_document[paymentMethod]" class="form-select form-select-sm">
                                                <option value="especes" {% if document.paymentMethod == "especes" %}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>

                                        <div class="col-12">
                                            <label class="form-label mb-1">N° chèque / traite</label>
                                            <input type="text"
                                                class="form-control form-control-sm"
                                                name="form_document[paymentRef]"
                                                value="{{ document.paymentRef }}">
                                        </div>

                                        <div class="col-12">
                                            <label class="form-label mb-1">Acompte</label>
                                            <div class="row gx-1">
                                                <div class="col-8">
                                                    <input type="number"
                                                        step="any"
                                                        class="form-control form-control-sm updateRow"
                                                        name="form_document[advancePayment]"
                                                        value="{{ document.advancePayment ?? 0 }}">
                                                </div>
                                                <div class="col-4">
                                                    <select name="form_document[advancePaymentType]" class="form-select form-select-sm updateRow">
                                                        <option value="amount" {% if document.advancePaymentType == 'amount' %}selected{% endif %}>TND</option>
                                                        <option value="percent" {% if document.advancePaymentType == 'percent' %}selected{% endif %}>%</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-12">
                                            <label class="form-label mb-1">À payer le</label>
                                            {# NOTE: datetime-local attend Y-m-d\TH:i ; ton ancien code utilisait d/m/Y => bug #}
                                            <input type="datetime-local"
                                                class="form-control form-control-sm"
                                                name="form_document[aPayerLe]"
                                                {% if document.aPayerLe %}value="{{ document.aPayerLe|date('Y-m-d\\TH:i') }}"{% endif %}>
                                        </div>

                                        <div class="col-12">
                                            <label class="form-label mb-1">Délais de paiement</label>
                                            <select name="form_document[paymentDeadline]" class="form-select form-select-sm" id="paydate">
                                                <option value="onorder" {% if document.paymentDeadline == "onorder" %}selected{% endif %}>À la commande</option>
                                                <option value="endmonth" {% if document.paymentDeadline == "endmonth" %}selected{% endif %}>Fin de mois</option>
                                                <option value="30days" {% if document.paymentDeadline == "30days" %}selected{% endif %}>À 30 jours</option>
                                                <option value="45days" {% if document.paymentDeadline == "45days" %}selected{% endif %}>À 45 jours</option>
                                                <option value="60days" {% if document.paymentDeadline == "60days" %}selected{% endif %}>À 60 jours</option>
                                                <option value="deadlines" {% if document.paymentDeadline == "deadlines" %}selected{% endif %}>Plusieurs échéances</option>
                                                <option value="scaled" {% if document.paymentDeadline == "scaled" %}selected{% endif %}>Paiement échelonné</option>
                                            </select>
                                        </div>

                                        <div class="col-12">
                                            <label class="form-label mb-1">Remise globale</label>
                                            <div class="row gx-1">
                                                <div class="col-8">
                                                    <input type="number"
                                                        step="any"
                                                        class="form-control form-control-sm discountValue updateRow discountTotalValue"
                                                        name="form_document[discount]"
                                                        value="{{ document.discount ?? 0 }}"
                                                        onchange="calculateTotal()">
                                                </div>
                                                <div class="col-4">
                                                    <select name="form_document[discountType]"
                                                            class="form-select form-select-sm discountUnit updateRow discountTotalUnit"
                                                            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>
                                    </div>
                                </div>
                            </fieldset>

                            {# == INFOS LIVRAISON (fieldset style client) == #}
                            <fieldset class="crm-fieldset p-3 mt-3">
                                <legend class="crm-legend">
                                    <i class="fa fa-truck text-primary delivery-icon"></i> Info Livraison
                                </legend>

                                <div class="ps-2">
                                    <div class="row gx-1 gy-2">


                                        <div class="col-12">
                                            <label class="form-label mb-1">N° suivi</label>
                                            <input type="text"
                                                name="form_document[parcelTrackingNbr]"
                                                class="form-control form-control-sm"
                                                value="{{ document.parcelTrackingNbr }}">
                                        </div>

                                        <div class="col-12">
                                            <label class="form-label mb-1">URL de suivi</label>
                                            <input type="text"
                                                name="form_document[urlTracking]"
                                                class="form-control form-control-sm"
                                                value="{{ document.urlTracking }}">
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        </div>




                    </div>
                <div class="clear"></div>

                <div class="fixed bottom-right w-100 zi-100 white-bkg py-3 px-5 shadow d-flex justify-content-between align-items-center" style="border-top: 1px solid #ddd;">

                    {# Bouton Annuler à gauche #}
                    <a href="{{ path('document_index', {'type': 'reception', 'category': 'fournisseur', 'date': 'thisMonth'}) }}" class="btn btn-light border btn-sm">

                        <i class="fa fa-times-circle me-1"></i> Annuler et Fermer
                    </a>

                    {# Boutons Enregistrer à droite #}
                    <div class="d-flex">
                        {% if type in ['achat','retour','reception'] %}
                            <button type="submit" name="form_document[save]" value="save" class="btn btn-primary btn-sm">
                                <i class="fa fa-save me-1"></i> Enregistrer et rester
                            </button>
                        {% endif %}
                        <button type="submit" name="form_document[save]" value="save-and-exit" class="btn btn-success btn-sm" style="margin-left: 10px;">
                            <i class="fa fa-check 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 %}
{% block js %}
    {{ parent() }}
    <script>

        var category = '{{ category|default('') }}';

        $(document).ready(function() {

            {% if category == 'client' %}
                $(function () {

                    const $form = $('form#docForm');
                    if (!$form.length) return;

                    $form.on('submit', function (e) {
                        e.preventDefault();

                        $.ajax({
                            url: Routing.generate('verify_cond_document', { client: '{{ document.client.id }}' }),
                            type: 'POST',
                            data: $form.serialize(),
                            dataType: 'json',

                            // Loader BS5 simple (remplace mApp.block)
                            beforeSend: function () {
                                document.body.classList.add('crm-loading');
                                $("[name='form_document[save]']").prop('disabled', true);
                            },

                            success: function (response) {

                                // Cas OK → submit réel
                                if (response.success === true) {
                                    $form.off('submit').trigger('submit');
                                    return;
                                }

                                // Cas avertissement
                                Swal.fire({
                                    title: 'Souhaitez-vous continuer l\'enregistrement ?',
                                    text: `Ce client a passé ${response.data.length} commande(s) au cours des trois derniers jours !`,
                                    icon: 'warning',
                                    showCancelButton: true,
                                    confirmButtonText: 'Continuer',
                                    cancelButtonText: 'Annuler'
                                }).then(result => {

                                    if (result.isConfirmed) {
                                        $form.off('submit').trigger('submit');
                                    } else {
                                        Swal.fire(
                                            'Modifications non enregistrées',
                                            '',
                                            'info'
                                        );
                                    }
                                });

                                if (response.message) {
                                    $('#error-message')
                                        .text(response.message)
                                        .removeClass('d-none')
                                        .show();
                                }
                            },

                            error: function () {
                                $('#error-message')
                                    .text('Une erreur est survenue. Veuillez réessayer plus tard.')
                                    .removeClass('d-none')
                                    .show();
                            },

                            complete: function () {
                                document.body.classList.remove('crm-loading');
                                $("[name='form_document[save]']").prop('disabled', false).show();
                            }
                        });
                    });

                });

                {% endif %}


        });

        $(function () {
            $('[data-bs-toggle="tooltip"]').tooltip();
        });

        //calculer le nb de pièces par produit




    </script>
{% endblock %}