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

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

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

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

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

       .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" class="mt-3">
    <div id="form">

        <form id="docForm" class="container-big" name="form_document"
              {% if app.request.attributes.get('_route') == 'convert_da_to_bon_reception' %}
                  action="{{ path('convert_da_to_bon_reception', {'document' : document.id ,'category':category,'type':document.type }) }}"
              {% else %}
                  action="{{ path('edit_document_commande', {'document' : document.id ,'category':category,'type':document.type }) }}"
              {% endif %}
              method="POST">

            {# Titre #}
            <div class="alert w-100 d-flex align-items-center py-3 px-4 mb-4"
                 style="background-color: #fff3cd; border: 1px solid #ffeeba; color: #856404;">
                <i class="fas fa-edit me-3 fa-lg"></i>
                <h3 class="m-subheader__title m-0 p-0" style="font-size: 1.25rem;">
                    ACHAT -
                    {% if app.request.attributes.get('_route') == 'convert_da_to_bon_reception' %}
                        TRANSFORMATION DU DOCUMENT
                    {% else %}
                        MODIFICATION DU DOCUMENT FOURNISSEUR
                    {% endif %}
                </h3>
            </div>

            <div class="docFormContent card p-3 fs-3">
                <div id="formErrors" class="alert alert-danger" style="display:none;"></div>

                <div class="topDocForm row d-flex gx-0">

                    {# =======================
                       LEFT
                       ======================= #}
                    <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"></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>
                        <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="discount">Remise</th>
                                                <th class="tax col-disabled">TVA</th>
                                                <th class="qt">Qt</th>
                                                <th class="amount col-disabled text-nowrap">Net à payer (TTC)</th>
                                                <th></th>
                                            </tr>
                                        </thead>

                                        <tbody>

                                            {# Template commentaire #}
                                            <tr class="tr-comment d-none">
                                                <td class="d-none"></td>
                                                <td class="text-center align-middle" style="width:42px;">
                                                    <i class="fa fa-comment-dots text-info"></i>
                                                </td>
                                                <td colspan="7" class="title">
                                                    <textarea rows="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>

                                            {# Livraison #}

                                            {# Lignes existantes #}
                                            {% if document.documentDeclinationProduits is not empty %}
                                                {% for key, documentDeclinationProduit in document.documentDeclinationProduits %}
                                                    {#<tr class="tr-produit border-bottom">#}
                                                    <tr class="tr-produit" border-bottom>


                                                        <td class="d-none">
                                                            <input class="item-id" type="hidden" name="form_document[content][{{ key+1 }}][id]" value="{{ documentDeclinationProduit.produitDeclinationValue.id }}">
                                                            <input class="type-input" type="hidden" name="form_document[content][{{ key+1 }}][type]" value="produitDeclination">
                                                            <input class="statut-input" type="hidden" name="form_document[content][{{ key+1 }}][statut]" value="update">
                                                            <input class="row-index" type="hidden" value="{{ key+1 }}">
                                                        </td>

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

                                                        </td>

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


                                                        </td>

                                                        <td class="notes">
                                                            <textarea rows="2"
                                                                      class="description-textarea form-control"
                                                                      name="form_document[content][{{ key+1 }}][description]">{{ documentDeclinationProduit.description }}</textarea>
                                                        </td>

                                                        <td class="unit">
                                                            <input class="unitAmountDisplay updateRow price_ht-input form-control"
                                                                   onchange="calculateTotalPrice($(this))"
                                                                   type="number"
                                                                   step="any"
                                                                   name="form_document[content][{{ key+1 }}][price_ht]"
                                                                   value="{{ documentDeclinationProduit.priceHt }}">
                                                        </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="{{ documentDeclinationProduit.discount }}"
                                                                       name="form_document[content][{{ key+1 }}][discount]">
                                                                <select class="discountUnit updateRow discount-type-input 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>

                                                        <td class="tax taxesvalueslist valueslist col-disabled">
                                                            <select class="updateRow tva-input form-select"
                                                                    onchange="calculateTotalPrice($(this));"
                                                                    name="form_document[content][{{ key+1 }}][tva]">
                                                                {% for tva in tvas %}
                                                                    <option {% if documentDeclinationProduit.tva and documentDeclinationProduit.tva.id == tva.id %}selected{% endif %} 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"
                                                                   min="1"
                                                                   value="{{ documentDeclinationProduit.quantity }}"
                                                                   name="form_document[content][{{ key+1 }}][quantity]">
                                                        </td>

                                                        <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-input" type="hidden"
                                                                   value="{{ documentDeclinationProduit.totalAmountTtc }}"
                                                                   name="form_document[content][{{ key+1 }}][total_amount_ttc]">
                                                        </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>
                                                {% endfor %}
                                            {% endif %}

                                            {% if document.documentComments is not empty %}
                                                {% for key, documentComment in document.documentComments %}
                                                    <tr>
                                                        <td class="d-none"></td>
                                                        <td class="text-center align-middle" style="width:42px;">
                                                            <i class="fa fa-comment-dots text-info"></i>
                                                        </td>
                                                        <td colspan="7" class="title">
                                                            <textarea rows="1"
                                                                      name="form_document[comment][{{ key+1 }}]"
                                                                      placeholder="Commentaire"
                                                                      class="comment-textarea form-control">{{ documentComment.description }}</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>
                                                {% endfor %}
                                            {% endif %}

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

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

                            {# Footer #}
                            <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>

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

                                <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 class="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 img-produit rounded border" src="{{ asset('/images/galery_placeholder_200.png') }}" alt="Produit">
                                                    </td>
                                                    <td class="name">
                                                        <input type="text" class="reference-input w-100 form-control" placeholder="Référence">
                                                    </td>
                                                    <td class="notes">
                                                        <textarea rows="2" 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">
                                                            <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>


                                                <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="{{ document.totalAmountHt ?? 0 }}">
                                                        <span class="currencyleft"></span><span id="totalHt" class="total">{{ document.totalAmountHt ?? '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="{{ document.totalTva ?? 0 }}">
                                                        <span class="currencyleft"></span><span id="totalTva" class="total">{{ document.totalTva ?? '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="{{ document.totalToPay ?? 0 }}">
                                                        <span class="currencyleft"></span><span id="totalTtc">{{ document.totalToPay ?? '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">{{ document.discount ?? '0.000' }}</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">{{ document.totalToPay ?? '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>

                    {# =======================
                       RIGHT SIDEBAR
                       ======================= #}
                    <div class="col-12 col-lg-3 mt-4 mt-lg-0 doc-sidebar">

                        {# Fournisseur: select (si tu veux le verrouiller plus tard, on mettra readonly selon status) #}
                        <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>
                                            {% 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>

                        {# Info Document #}
                        <fieldset class="crm-fieldset p-3 mt-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</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>
                                        <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">
                                        <label class="form-label mb-1">Note</label>
                                        <textarea name="form_document[note]" rows="3" class="form-control form-control-sm">{{ document.note }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </fieldset>

                        {# Info Paiement #}
                        <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</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</option>
                                            <option value="carte" {% if document.paymentMethod == "carte" %}selected{% endif %}>Carte</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">Référence</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>
                                        <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</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>

                        {# Info Livraison #}
                        <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">Nombre de colis</label>
                                        <input type="number" step="1"
                                               name="form_document[packagesNbr]"
                                               class="form-control form-control-sm"
                                               value="{{ document.packagesNbr ?? 1 }}">
                                    </div>
                                    #}

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

                {# Actions #}
                <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;">
                    <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>

                    <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 ms-2">
                            <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('') }}';

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

        document.addEventListener('DOMContentLoaded', function () {
            if (typeof calculateTotal === "function") {
                calculateTotal();
            }
        });
    </script>
{% endblock %}