{% extends'@admin/base.html.twig' %}

{% block stylesheets %}
    {{ parent() }}

    <link rel="stylesheet" href="{{ asset('css/admin/document-detail-shared.css') }}">

{% endblock %}

{% block extra_scripts %}
    <script src="{{ asset('js/admin/document-functions.js') }}"></script>
{% endblock %}

{% block subheader %}

  <div class="badge-titre d-flex justify-content-between align-items-start align-items-lg-center flex-wrap gap-3 mb-3 sticky-top bg-white pt-2"
     style="top:72px; z-index:1020;">

     {# --- Colonne gauche : icône + titre + breadcrumb --- #}
    <div class="d-flex flex-column flex-sm-row align-items-start align-items-sm-center gap-2">
        <span class="crm-badge">
        <i class="fa fa-file-alt"></i>
        </span>

        <h3 class="badge-title-main mb-0 fs-5">
        {% if document.type == 'commande' %}BONS DE COMMANDE CLIENT
        {% elseif document.type == 'facture' %}FACTURE CLIENT
        {% elseif document.type == 'avoir' %}AVOIR CLIENT
        {% elseif document.type == 'retour' %}BON DE RETOUR
        {% endif %}
        </h3>

        <ul class="breadcrumb mb-0 small">
        {% include "@admin/includes/_document_nav_item.html.twig" with {'document': document} %}
        </ul>
    </div>
     {# --- Colonne droite : Boutons + Actions --- #}
    <div class="d-flex align-items-center gap-2 flex-wrap">
        {% set echange = false %}
        {% set allEchangeCanceled = true %}
        {% set echange_in_process = false %}
        {% set doc_echange = null %}
        {% for doc in document.documents %}
            {#{% if doc.type=="echange" and doc.status in ['en-attente','accepte','expedie'] %}#}
            {% if doc.type=="echange" %}
                {% set echange = true %}
                {% set doc_echange = doc %}
                {% if  doc.status in ['en-attente','accepte','a-expedier','expedie'] %}
                    {% set echange_in_process = true %}
                {% endif %}
                {% if  doc.status != 'annule' %}
                    {% set allEchangeCanceled = false %}
                {% endif %}
            {% endif %}
        {% endfor %}

        <div class="action ms-auto d-flex flex-wrap align-items-center w-100">
            <div class="dropdown ms-auto d-flex flex-wrap gap-2">
                <button class="btn btn-outline-info btn-sm dropdown-toggle"
                        data-bs-toggle="dropdown">
                    <i class="fa fa-cog me-1"></i> Actions
                </button>

                {% if "DOCUMENT_CLIENT_UPDATE" in rights %}
                    <ul class="dropdown-menu dropdown-menu-end shadow-sm">
                        <li>
                            <a href="#"
                                class="dropdown-item"
                                onclick="printDoc({{ document.id }}); return false;">
                                <i class="fa fa-print me-2"></i> Imprimer
                            </a>
                        </li>

                        {% if document.status == 'en-attente' %}
                            <li>
                                <a href="{{ path('edit_document_commande', {
                                    document: document.id,
                                    category: document.category,
                                    type: document.type
                                }) }}"
                                class="dropdown-item">
                                    <i class="fa fa-edit me-2 text-primary"></i> Modifier document
                                </a>
                            </li>

                        {% endif %}
                       {% if document.status in ['annule', 'retour-en-cours', 'retourne'] %}
                            <li>
                                <a href="#"
                                class="dropdown-item text-warning"
                                data-bs-toggle="modal"
                                data-bs-target="#m_modal_update_raison"
                                data-document="{{ document.id }}">
                                    <i class="fa fa-exclamation-circle me-2"></i>
                                    Modifier motif {{ document.status == 'annule' ? "Annulation" : "Retour" }}
                                </a>
                            </li>
                        {% endif %}

                        {% if "DOCUMENT_CLIENT_DELETE" in rights or "DOCUMENT_SUPPLIER_DELETE" in rights %}
                            {% if document.status == 'annule' and is_granted('ROLE_SUPER_ADMIN') %}
                                <li>
                                    <a href="#"
                                    class="dropdown-item text-danger deleteDocument"
                                    data-id="{{ document.id }}"
                                    data-type="{{ document.type }}"
                                    data-category="{{ document.category }}"
                                    data-internal-nbr="{{ document.internalNbr }}"
                                    data-client-name="{{ document.client.username }}">
                                        <i class="fas fa-trash-alt me-2"></i> Supprimer bon de commande
                                    </a>
                                </li>
                            {% endif %}

                        {% endif %}
                       {% if document.status not in ['annule', 'transforme'] %}
                            <li>
                                <a href="#"
                                class="dropdown-item text-info modalEditInfo"
                                data-document="{{ document.id }}">
                                    <i class="fa fa-truck me-2"></i> Modifier infos livraison
                                </a>
                            </li>
                        {% endif %}


                         <li><hr class="crm-separator"></li>
                        {% if document.type == 'commande'%}
                            {% if document.status == 'en-attente' %}
                                <li>
                                    <a href="{{ path('accept_commande', {'id': document.id }) }}"
                                    class="dropdown-item text-success">
                                        <i class="fa fa-check me-2"></i> Accepter
                                    </a>
                                </li>

                                <li>
                                    <a href="#"
                                    class="dropdown-item text-danger"
                                    data-bs-toggle="modal"
                                    data-bs-target="#m_modal_annuled">
                                        <i class="fa fa-times me-2"></i> Annuler
                                    </a>
                                </li>
                            {% endif %}
                            {% if document.status == 'accepte' %}
                                <li>
                                    <a href="#"
                                    class="dropdown-item text-info"
                                    data-bs-toggle="modal"
                                    data-bs-target="#m_modal_expider"
                                    data-action="{{ path('pending_shipment_commande', {
                                            category: document.category,
                                            id: document.client.id,
                                            idCommande: document.id
                                    }) }}"
                                    data-type="pending">
                                        <i class="fa fa-clock me-2"></i> Prêt à  expédier
                                    </a>
                                </li>

                                <li>
                                    <a href="#"
                                    class="dropdown-item text-primary"
                                    data-bs-toggle="modal"
                                    data-bs-target="#m_modal_expider"
                                    data-action="{{ path('auto_document', {
                                            category: document.category,
                                            id: document.client.id,
                                            idCommande: document.id
                                    }) }}"
                                    data-type="ship">
                                        <i class="fa fa-truck me-2"></i> Expédier
                                    </a>
                                </li>

                                <li><hr class="crm-separator"></li>

                                <li>
                                    <a href="{{ path('annul_accept_commande', {'id': document.id }) }}"
                                    class="dropdown-item text-warning loader-submit">
                                        <i class="fa fa-reply-all me-2"></i> Annuler 'Accepté'
                                    </a>
                                </li>
                            {% endif %}

                            {% if document.status == 'a-expedier' %}
                                <li>
                                    <a href="#"
                                    class="dropdown-item text-primary"
                                    data-bs-toggle="modal"
                                    data-bs-target="#m_modal_expider"
                                    data-action="{{ path('auto_document', {
                                            category: document.category,
                                            id: document.client.id,
                                            idCommande: document.id
                                    }) }}"
                                    data-type="ship">
                                        <i class="fa fa-truck me-2"></i> Expédier
                                    </a>
                                </li>

                                <li><hr class="crm-separator"></li>

                                <li>
                                    <a href="{{ path('cancel_pending_shipment_commande', {'id': document.id }) }}"
                                    class="dropdown-item text-warning loader-submit">
                                        <i class="fa fa-reply-all me-2"></i> Annuler 'A-Expédier'
                                    </a>
                                </li>
                            {% endif %}


                            {% if document.status == 'expedie' %}
                                    {% set after4HoursOfExpedition = document.shippedAt|date_modify("+4 hours") %}

                                <li>
                                    <a href="#"
                                    class="dropdown-item text-success"
                                    data-bs-toggle="modal"
                                    data-bs-target="#m_modal_livraison"
                                    {% if not is_granted('ROLE_SUPER_ADMIN')
                                        and "now"|date('Y-m-d H:i:s') < after4HoursOfExpedition|date('Y-m-d H:i:s') %}
                                        aria-disabled="true"
                                        title="Merci d'attendre 4 heures pour exécuter cette étape"
                                    {% endif %}>
                                        <i class="fa fa-thumbs-up me-2"></i> Livrer
                                    </a>
                                </li>

                                <li><hr class="crm-separator"></li>

                                <li>
                                {% if is_granted('ROLE_SUPER_ADMIN') %}
                                    <a href="{{ path('annul_expedition_commande', {'id': document.id }) }}"
                                    class="dropdown-item text-warning loader-submit">
                                        <i class="fa fa-reply-all me-2"></i> Annuler 'Expédier'
                                    </a>
                                {% else %}
                                    <span class="dropdown-item text-muted disabled"
                                        title="Accès interdit">
                                        <i class="fa fa-reply-all me-2"></i> Annuler 'Expédier'
                                    </span>
                                {% endif %}
                                </li>

                                <li>
                                    <a href="#"
                                    class="dropdown-item text-danger"
                                    data-bs-toggle="modal"
                                    data-bs-target="#m_modal_retour"
                                    data-title="Colis non livré"
                                    data-btn="Retour en cours"
                                    {% if not is_granted('ROLE_SUPER_ADMIN')
                                        and "now"|date('Y-m-d H:i:s') < after4HoursOfExpedition|date('Y-m-d H:i:s') %}
                                        aria-disabled="true"
                                        title="Merci d'attendre 4 heures pour exécuter cette étape"
                                    {% endif %}>
                                        <i class="fa fa-thumbs-down me-2"></i> Retour en cours
                                    </a>
                                </li>
                            {% endif %}

                            {% if document.status in ['livre', 'partiellement-paye', 'non-paye'] %}
                                {% if document.status == 'livre' %}
                                    <li>
                                    {% if is_granted('ROLE_SUPER_ADMIN') %}
                                        <a href="{{ path('annul_expedition_commande', {'id': document.id }) }}"
                                        class="dropdown-item text-warning loader-submit">
                                            <i class="fa fa-reply-all me-2"></i> Annuler 'Livré'
                                        </a>
                                    {% else %}
                                        <span class="dropdown-item text-muted disabled"
                                            title="Accès interdit">
                                            <i class="fa fa-reply-all me-2"></i> Annuler 'Livré'
                                        </span>
                                    {% endif %}
                                    </li>

                                    <li><hr class="crm-separator"></li>
                                {% endif %}

                                <li>
                                    <a href="#"
                                    class="dropdown-item text-success"
                                    data-bs-toggle="modal"
                                    data-bs-target="#m_modal_payment"
                                    id="btnMarkPaid">
                                        <i class="fa fa-money-bill me-2"></i> Marquer comme payé
                                    </a>
                                </li>

                                <li>
                                    <a href="#"
                                    class="dropdown-item js-set-payment text-muted"
                                    data-url="{{ path('document_payment_state', {id: document.id, state: 'non-paye'}) }}">
                                        <i class="fa fa-circle me-2"></i> Non payé
                                    </a>
                                </li>

                                <li>
                                    <a href="#"
                                    class="dropdown-item js-set-payment text-warning"
                                    data-url="{{ path('document_payment_state', {id: document.id, state: 'partiellement-paye'}) }}">
                                        <i class="fa fa-adjust me-2"></i> Partiellement payé
                                    </a>
                                </li>

                                {% if not echange or allEchangeCanceled %}
                                    <li><hr class="crm-separator"></li>

                                    <li>
                                        <a href="{{ path('echange_document_commande', {
                                            id: document.id,
                                            category: document.category
                                        }) }}"
                                        class="dropdown-item text-warning">
                                            <i class="fa fa-refresh me-2"></i> échange
                                        </a>
                                    </li>

                                {% endif %}

                            {% endif %}

                            {% if document.status == 'paye' %}

                                <li>
                                    {% if factureExistante %}
                                        <span class="dropdown-item text-muted disabled">
                                            <i class="fa fa-file-text me-2"></i> Facturer (déjà  facturé)
                                        </span>
                                    {% else %}
                                        <a href="{{ path('create_facture_document', {'id': document.id }) }}"
                                        class="dropdown-item text-info">
                                            <i class="fa fa-file-text me-2"></i> Facturer
                                        </a>
                                    {% endif %}
                                </li>

                                {% if not echange %}
                                <li>
                                    <a href="{{ path('echange_document_commande', {
                                        id: document.id,
                                        category: document.category
                                    }) }}"
                                    class="dropdown-item text-warning">
                                        <i class="fa fa-refresh me-2"></i> échange
                                    </a>
                                </li>
                                {% endif %}

                                <li><hr class="crm-separator"></li>

                                <li>
                                    <a href="#"
                                    class="dropdown-item text-danger"
                                    data-bs-toggle="modal"
                                    data-bs-target="#modalRefundFull"
                                    title="Marquer ce bon de commande comme à  rembourser">
                                        <i class="fa fa-undo me-2"></i> à rembourser
                                    </a>
                                </li>

                            {% endif %}

                            {% if document.status == 'a-rembourser' %}
                                <li>
                                    <a href="{{ path('document_refund', { id: document.id, mode: 'finalize' }) }}"
                                    class="dropdown-item text-danger"
                                    data-bs-toggle="tooltip"
                                    title="Finaliser le remboursement : le document passera en remboursé et les articles seront remis en stock">
                                        <i class="fa fa-undo me-2"></i> Finaliser le remboursement
                                    </a>
                                </li>
                            {% endif %}

                            {% if document.type == 'facture' and document.status == 'facture' %}
                                <li>
                                    <a href="#"
                                    class="dropdown-item text-warning"
                                    data-bs-toggle="modal"
                                    data-bs-target="#m_modal_avoir"
                                    data-title="Créer un avoir (Rembourser)"
                                    title="Créer un avoir pour rembourser cette facture sans modifier les stocks">
                                        <i class="fa fa-file-invoice-dollar me-2"></i> Créer un avoir (rembourser)
                                    </a>
                                </li>
                            {% endif %}

                            {% if document.type == 'facture' and document.status == 'retour-en-cours' %}
                                <li>
                                    <a href="{{ path('retour_final_document', {'id': document.id }) }}"
                                    class="dropdown-item text-danger">
                                        <i class="fa fa-recycle me-2"></i> Remboursé (articles retournés)
                                    </a>
                                </li>
                            {% elseif document.status == 'retour-en-cours' %}
                                <li>
                                    <a href="{{ path('return_expedition_commande', {'id': document.id }) }}"
                                    class="dropdown-item text-danger">
                                        <i class="fa fa-recycle me-2"></i> Colis retourné (remise en stock)
                                    </a>
                                </li>
                            {% endif %}


                        {% endif %}



                         <li><hr class="crm-separator"></li>
                         <li>
                            <a href="{{ document.urlPdf ?: path('print_document', {'id': document.id}) }}"
                                target="_blank"
                                class="dropdown-item">
                                <i class="fa fa-external-link-alt me-2 text-primary"></i> Ouvrir le PDF
                            </a>
                        </li>

                         <li>
                            <a href="#"
                            class="dropdown-item"
                            onclick="download({{ document.id }}); return false;">
                                <i class="fa fa-file-pdf me-2 text-danger"></i> Télécharger PDF
                            </a>
                        </li>



                    </ul>
                {% endif %}
            </div>

        </div>
    </div>
</div>

{% endblock %}

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

{% endblock %}


{% block bodycontent %}

<script>
    window.DOCUMENT_ID = {{ document.id }};
</script>

{# -- JS appels téléphoniques -- #}
<script src="{{ asset('js/admin/document-calls.js') }}"></script>

{% set echange = false %}
{% set allEchangeCanceled = true %}
{% set echange_in_process = false %}
{% set doc_echange = null %}
{% for doc in document.documents %}
    {#{% if doc.type=="echange" and doc.status in ['en-attente','accepte','expedie'] %}#}
    {% if doc.type=="echange" %}
        {% set echange = true %}
        {% set doc_echange = doc %}
        {% if  doc.status in ['en-attente','accepte','a-expedier','expedie'] %}
            {% set echange_in_process = true %}
        {% endif %}
        {% if  doc.status != 'annule' %}
            {% set allEchangeCanceled = false %}
        {% endif %}
    {% endif %}
{% endfor %}
    <div class="m-content padding-0">



        {#-- Détails cde + panneaux commentaires et historiques--#}
        <div class="row" >

            {#-- Détails cde --#}
            <div class="col-lg-8 padding-5-5 position-relative document-detail-main">

                <div id="content_docOverview" style="height: auto; position: relative; overflow: hidden;" >
                    <div class="alert px-4 py-2 fw-bold d-flex align-items-center justify-content-between
                        {% if document.status == 'en-attente' %} alert-en-attente
                        {% elseif document.status == 'accepte' %} alert-accepte
                        {% elseif document.status == 'annule' %} alert-annule
                        {% elseif document.status == 'a-expedier' %} alert-a-expedier
                        {% elseif document.status == 'expedie' %} alert-expedie
                        {% elseif document.status == 'livre' %} alert-livre
                        {% elseif document.status == 'non-paye' %} alert-non-paye
                        {% elseif document.status == 'partiellement-paye' %} alert-partiellement-paye
                        {% elseif document.status == 'paye' %} alert-paye
                        {% elseif document.status == 'facture' %} alert-facture
                        {% elseif document.status == 'retour-en-cours' %} alert-retour-en-cours
                        {% elseif document.status == 'retourne' %} alert-retourne
                        {% elseif document.status in ['valide', 'transforme'] %} alert-livre
                        {% elseif document.status == 'a-rembourser' %} alert-a-rembourser
                        {% elseif document.status == 'rembourse' %} alert-rembourse
                        {% elseif document.status == 'brouillon' %} alert-en-attente
                        {% else %} bg-light
                        {% endif %}">
                         {# Statut à  gauche #}
                        <div class="d-flex align-items-center">
                            <i class="fa fa-info-circle me-2"></i>
                            {{ document.status|replace({'-':' '})|capitalize }}
                        </div>

                        {# Icône info-bulle à  droite (si applicable) #}
                        {% set tooltip = '' %}
                        {% if document.status == 'annule' %}
                            {% set tooltip = document.cancelReason ? document.cancelReason.name : 'Aucune raison d’annulation' %}
                        {% elseif document.status in ['retourne','retour-en-cours'] %}
                            {% set tooltip = document.returnReason ? document.returnReason.name : 'Aucune raison de retour' %}
                        {% elseif document.status in ['a-rembourser','rembourse'] %}
                            {% set tooltip = document.refundReason ? document.refundReason.name : 'Aucune raison de remboursement' %}
                        {% endif %}


                        {% if tooltip %}
                            <i class="fa fa-question-circle text-muted"
                            data-bs-toggle="tooltip"
                            data-bs-placement="right"
                            title="{{ tooltip }}{% if document.note %} — {{ document.note }}{% endif %}">
                            </i>
                        {% endif %}

                    </div>
                    {% if factureExistante %}<span class="badge badge-info">Facturé (Facture N° {{ factureExistante.internalNbr }})</span> {% endif %}
                    <div class="preview_nomsie" >

                        {% if echange %}
                            <div class="alert alert-warning d-flex align-items-start justify-content-between gap-3 mb-3 exchange-blink-5s" role="alert">
                                <div class="d-flex align-items-start gap-2">
                                    <i class="fa fa-exchange-alt mt-1"></i>
                                    <div>
                                        <div class="fw-semibold">Un bon d’échange est lié à ce document</div>
                                        <div class="small">
                                            Échange {% if echange_in_process %}en cours{% else %}effectué{% endif %}
                                            <span class="badge bg-warning text-dark ms-1">{{ doc_echange.status }}</span>
                                        </div>
                                    </div>
                                </div>
                                <a href="{{ path('document_show', {'id': doc_echange.id }) }}"
                                   class="btn btn-sm btn-outline-warning"
                                   target="_blank">
                                    <i class="fa fa-arrow-up-right-from-square me-1"></i>Ouvrir l’échange
                                </a>
                            </div>
                        {% endif %}

                        {% if cmdEnAttente >= 2 %}
                            <div class="alert alert-warning d-flex align-items-start gap-2 mb-3 crm-alert-pulse-5s" role="alert">
                                <i class="fa fa-hourglass-half mt-1 text-warning"></i>
                                <div>
                                    <div class="fw-semibold">Attention sur l'historique client</div>
                                    <div class="small">
                                        Ce client a
                                        <strong>{{ cmdEnAttente }}</strong>
                                        commande{% if cmdEnAttente > 1 %}s{% endif %}
                                        en attente ou acceptée{% if cmdEnAttente > 1 %}s{% endif %}.
                                    </div>
                                </div>
                            </div>
                        {% endif %}

                        {#--Statut commande --#}
                        <div class="card" >


                            <div class="card-body d-flex flex-column">

                                <div class="row my-1" >

                                    <div class="col-12">
                                       <div class="row g-2 g-lg-3 align-items-stretch" id="document-client-info-section">
                                            {#--- info clients --- #}
                                            <div class="col-12 col-lg-4 d-flex">
                                                <fieldset class="crm-fieldset p-3 crm-summary-card w-100">
                                                    <legend class="crm-legend d-flex align-items-center justify-content-between w-100">
                                                        <span><i class="fa fa-user text-primary me-2"></i>Info Client</span>
                                                        <a href="#"
                                                            title="Modifier infos client"
                                                            class="crm-action-btn crm-action-edit modalEditUser ms-auto"
                                                            data-client="{{ document.client.id }}"
                                                            data-document="{{ document.id }}">
                                                            <i class="fa fa-pen fa-sm"></i>
                                                        </a>
                                                    </legend>

                                                    <div class="crm-summary-topbar">
                                                        {% if document.client.clientType %}
                                                            <div class="crm-summary-chip">
                                                                {% include '@admin/includes/_client_type_badge.html.twig' with { user: document.client } %}
                                                            </div>
                                                        {% endif %}

                                                        <div class="crm-summary-kpis">
                                                            <span class="crm-mini-kpi" title="Nbr des commandes total">
                                                                <i class="fa fa-shopping-basket"></i>
                                                                <strong>{{ nbCmdTotal - (cmdEnRetour + cmdAnnule) }}</strong>
                                                            </span>
                                                            {% if nbBeTotal > 0 %}
                                                                <span class="crm-mini-kpi" title="Nbr des échanges total">
                                                                    <i class="fa fa-refresh"></i>
                                                                    <strong>{{ nbBeTotal }}</strong>
                                                                </span>
                                                            {% endif %}
                                                            {% if cmdEnAttente > 0 %}
                                                                <span class="crm-mini-kpi blinking" title="Nbr de commande en attente ou acceptée">
                                                                    <i class="fa fa-hourglass-half text-warning"></i>
                                                                    <strong>{{ cmdEnAttente }}</strong>
                                                                </span>
                                                            {% endif %}
                                                            {% if cmdAnnule > 0 %}
                                                                <span class="crm-mini-kpi is-danger blinking" title="Nbr de commande annulée">
                                                                    <i class="fa fa-remove"></i>
                                                                    <strong>{{ cmdAnnule }}</strong>
                                                                </span>
                                                            {% endif %}
                                                            {% if cmdEnRetour > 0 %}
                                                                <span class="crm-mini-kpi is-return blinking" title="Nbr de commande retournée">
                                                                    <i class="fa fa-undo"></i>
                                                                    <strong>{{ cmdEnRetour }}</strong>
                                                                </span>
                                                            {% endif %}
                                                            {% if document.client.description %}
                                                                <span class="crm-mini-kpi is-note blinking" title="{{ document.client.description }}">
                                                                    <i class="fa fa-info"></i>
                                                                </span>
                                                            {% endif %}
                                                        </div>
                                                    </div>

                                                    <div class="crm-summary-list">
                                                        <div class="crm-summary-item">
                                                            <span class="crm-summary-label"><i class="fa fa-hashtag me-1"></i>Réf.</span>
                                                            <span class="crm-summary-value">
                                                                <a href="{{ path('user_show', {'id': document.client.id }) }}"
                                                                   class="blue copy-text"
                                                                   title="Copier la référence client"
                                                                   target="_blank"
                                                                   data-copy="{{ document.client.username }}">
                                                                    {{ document.client.username }}
                                                                </a>
                                                            </span>
                                                        </div>

                                                        <div class="crm-summary-item">
                                                            <span class="crm-summary-label">Client</span>
                                                            <span class="crm-summary-value copy-text cursor-pointer"
                                                                  title="Copier le nom du client"
                                                                  data-copy="{{ document.client.civility }} {{ document.client.firstName }}">
                                                                {{ document.client.civility }} {{ document.client.firstName }}
                                                            </span>
                                                        </div>

                                                        <div class="crm-summary-item">
                                                            <span class="crm-summary-label"><i class="fa fa-map-marker-alt me-1"></i>Adresse</span>
                                                            <span class="crm-summary-value copy-text cursor-pointer"
                                                                  title="Copier l’adresse"
                                                                  data-copy="{% if document.adress is not empty %}{{ document.adress|replace({'Tunisie': ''})|trim }}{% else %}{% if document.client.city is not empty %}{{ document.client.city }}{% endif %}{% if document.client.region is not empty %} {{ document.client.region }}{% endif %}{% endif %}">
                                                                {% if document.adress is not empty %}
                                                                    {{ document.adress|replace({'Tunisie': ''}) }}
                                                                {% else %}
                                                                    {% if document.client.city is not empty %}{{ document.client.city }}{% endif %}
                                                                    {% if document.client.region is not empty %} {{ document.client.region }}{% endif %}
                                                                {% endif %}
                                                            </span>
                                                        </div>

                                                        <div class="crm-summary-item">
                                                            <span class="crm-summary-label"><i class="fa fa-phone me-1"></i>Téléphone</span>
                                                            <span class="crm-summary-value d-flex flex-wrap align-items-center gap-2">
                                                                <a href="tel:{{ document.client.phone }}" class="blue" title="Passer un appel">
                                                                    <i class="fa fa-phone"></i>
                                                                </a>
                                                                <span class="copy-text cursor-pointer"
                                                                      title="Copier le numéro"
                                                                      data-copy="{{ document.client.phone }}">{{ document.client.phone }}</span>
                                                                {% if document.client.secondPhone %}
                                                                    <span class="text-muted">|</span>
                                                                    <a href="tel:{{ document.client.secondPhone }}" class="blue" title="Passer un appel">
                                                                        <i class="fa fa-phone"></i>
                                                                    </a>
                                                                    <span class="copy-text cursor-pointer"
                                                                          title="Copier le numéro"
                                                                          data-copy="{{ document.client.secondPhone }}">{{ document.client.secondPhone }}</span>
                                                                {% endif %}
                                                            </span>
                                                        </div>

                                                        {% if document.client.promotion is not null and document.client.promotion.code is not null %}
                                                            <div class="crm-summary-item">
                                                                <span class="crm-summary-label">Code promo</span>
                                                                <span class="crm-summary-value copy-text cursor-pointer"
                                                                      title="Copier le code promotionnel"
                                                                      data-copy="{{ document.client.promotion.code }}">{{ document.client.promotion.code }}</span>
                                                            </div>
                                                        {% endif %}

                                                        {% if document.source %}
                                                            <div class="crm-summary-item">
                                                                <span class="crm-summary-label">Source</span>
                                                                <span class="crm-summary-value">
                                                                    {% if  'Facebook' in document.source.name %}
                                                                        <i class="m--font-brand fa fa-facebook-official me-1"></i>
                                                                    {% elseif document.source.name == 'Instagram' %}
                                                                        <i class="m--font-danger fa fa-instagram me-1"></i>
                                                                    {% elseif document.source.name == 'WhatsApp' %}
                                                                        <i class="m--font-success fa fa-whatsapp me-1"></i>
                                                                    {% elseif document.source.name == 'Site web' %}
                                                                        <i class="m--font-primary fa fa-globe me-1"></i>
                                                                    {% elseif document.source.name == 'TikTok' %}
                                                                        <i class="m--font-primary fa-brands fa fa-tiktok me-1"></i>
                                                                    {% endif %}
                                                                    {% if document.client.links is empty %}
                                                                        <span>{{ document.source.name }}</span>
                                                                    {% else %}
                                                                        {% for link in document.client.links %}
                                                                            <a href="{{ link.link }}" target="_blank" class="text-decoration-none">
                                                                                <i class="fa fa-link me-1"></i>{{ document.source.name }}
                                                                            </a>
                                                                        {% endfor %}
                                                                    {% endif %}
                                                                </span>
                                                            </div>
                                                        {% endif %}
                                                    </div>
                                                </fieldset>
                                            </div>

                                            <div class="col-12 d-lg-none">
                                                <div class="d-flex flex-wrap gap-3 mb-2 small">
                                                    <a class="text-decoration-none fw-semibold"
                                                       data-bs-toggle="collapse"
                                                       href="#document-mobile-delivery-info"
                                                       role="button"
                                                       aria-expanded="false"
                                                       aria-controls="document-mobile-delivery-info">
                                                        <i class="fa fa-truck me-1"></i>Voir infos livraison
                                                    </a>
                                                    <a class="text-decoration-none fw-semibold"
                                                       data-bs-toggle="collapse"
                                                       href="#document-mobile-document-info"
                                                       role="button"
                                                       aria-expanded="false"
                                                       aria-controls="document-mobile-document-info">
                                                        <i class="fa fa-file-alt me-1"></i>Voir infos document
                                                    </a>
                                                </div>
                                            </div>

                                            {#--- info livraison  --- #}
                                            <div id="document-mobile-delivery-info" class="col-12 col-lg-4 collapse d-lg-flex">
                                                <fieldset class="crm-fieldset p-3 crm-summary-card crm-summary-card-right w-100">
                                                   <legend class="crm-legend">
                                                        <i class="fa fa-truck text-info me-2"></i>Info Livraison
                                                    </legend>
                                                    <div class="crm-summary-list">
                                                        <div class="crm-summary-item">
                                                            <span class="crm-summary-label"><i class="fa fa-building me-1"></i>Transporteur</span>
                                                            <span class="crm-summary-value">{{ document.delivery ? document.delivery.name : 'Non mentionnée' }}</span>
                                                        </div>

                                                        <div class="crm-summary-item">
                                                            <span class="crm-summary-label"><i class="fa fa-barcode me-1"></i>Num. suivi</span>
                                                            <span class="crm-summary-value copy-text cursor-pointer"
                                                                  title="Copier le numéro de suivi"
                                                                  data-copy="{{ document.parcelTrackingNbr ?: '' }}">{{ document.parcelTrackingNbr ?: '—' }}</span>
                                                        </div>

                                                        <div class="crm-summary-item">
                                                            <span class="crm-summary-label"><i class="fa fa-link me-1"></i>URL suivi</span>
                                                            <span class="crm-summary-value">
                                                                {% if document.urlTracking %}
                                                                    <a href="{{ document.urlTracking }}"
                                                                       target="_blank"
                                                                       class="copy-text"
                                                                       title="Copier l’URL de suivi"
                                                                       data-copy="{{ document.urlTracking }}">
                                                                        {{ document.urlTracking }}
                                                                    </a>
                                                                {% else %}
                                                                    —
                                                                {% endif %}
                                                            </span>
                                                        </div>

                                                        <div class="crm-summary-item">
                                                            <span class="crm-summary-label"><i class="fa fa-box me-1"></i>Colis</span>
                                                            <span class="crm-summary-value">{{ document.packagesNbr }}</span>
                                                        </div>
                                                    </div>
                                                </fieldset>
                                            </div>

                                            {#--- info document  --- #}
                                            <div id="document-mobile-document-info" class="col-12 col-lg-4 collapse d-lg-flex">
                                                <fieldset class="crm-fieldset p-3 crm-summary-card crm-summary-card-right w-100">
                                                    <legend class="crm-legend">
                                                        <i class="fa fa-file-alt text-success me-2"></i>Info Document
                                                    </legend>
                                                    <div class="crm-summary-list">
                                                        <div class="crm-summary-item">
                                                            <span class="crm-summary-label"><i class="fa fa-file-alt me-1"></i>N°</span>
                                                            <span class="crm-summary-value copy-text cursor-pointer"
                                                                  title="Copier le numéro du document"
                                                                  data-copy="{{ document.internalNbr }}">{{ document.internalNbr }}</span>
                                                        </div>

                                                        <div class="crm-summary-item">
                                                            <span class="crm-summary-label">
                                                                <i class="fa fa-link me-1"></i>Lien client
                                                            </span>

                                                            <span class="crm-summary-value d-inline-flex align-items-center gap-2">
                                                                {# Ouvrir le lien #}
                                                                <a href="{{ customerTrackingUrl }}"
                                                                target="_blank"
                                                                rel="noopener noreferrer"
                                                                class="crm-link-icon"
                                                                data-bs-toggle="tooltip"
                                                                data-bs-placement="top"
                                                                title="Ouvrir le lien de suivi client">
                                                                    <i class="fa fa-up-right-from-square"></i>
                                                                </a>

                                                                {# Copier le lien #}
                                                                <button type="button"
                                                                        class="btn btn-link p-0 copy-text crm-link-icon"
                                                                        data-copy="{{ customerTrackingUrl }}"
                                                                        data-bs-toggle="tooltip"
                                                                        data-bs-placement="top"
                                                                        title="Copier le lien de suivi client"
                                                                        aria-label="Copier le lien de suivi client">
                                                                    <i class="fa fa-copy"></i>
                                                                </button>
                                                            </span>
                                                        </div>

                                                        <div class="crm-summary-item">
                                                            <span class="crm-summary-label"><i class="fa fa-calendar-alt me-1"></i>Date</span>
                                                            <span class="crm-summary-value">{{ document.createdAt|date("d/m/Y") }}</span>
                                                        </div>

                                                        {% if document.promisedAt %}
                                                        <div class="crm-summary-item">
                                                            <span class="crm-summary-label"><i class="fa fa-calendar-check me-1"></i>Liv. prévue</span>
                                                            <span class="crm-summary-value blinking {% if document.promisedAt < "now" %}text-success{% else %}text-danger{% endif %}">
                                                                {{ document.promisedAt|date("d/m/Y") }}
                                                            </span>
                                                        </div>
                                                        {% endif %}

                                                        {% if document.shippedAt and document.status in ['expedie','livre','paye','non-paye','partiellement-paye', 'retour-en-cours', 'retourne', 'a-rembourser','rembourse'] %}
                                                        <div class="crm-summary-item">
                                                            <span class="crm-summary-label"><i class="fa fa-truck me-1"></i>Expédié le</span>
                                                            <span class="crm-summary-value">{{ document.shippedAt|date("d/m/Y") }}</span>
                                                        </div>
                                                        {% endif %}

                                                        {% if document.deliveredAt and document.status in ['livre','paye','non-paye','partiellement-paye'] %}
                                                        <div class="crm-summary-item">
                                                            <span class="crm-summary-label"><i class="fa fa-check-circle me-1"></i>Livré le</span>
                                                            <span class="crm-summary-value">{{ document.deliveredAt|date("d/m/Y") }}</span>
                                                        </div>
                                                        {% endif %}

                                                        {% if document.paidAt %}
                                                            <div class="crm-summary-item">
                                                                <span class="crm-summary-label"><i class="fa fa-money-bill me-1"></i>Payé le</span>
                                                                <span class="crm-summary-value">{{ document.paidAt|date("d/m/Y") }}</span>
                                                            </div>
                                                        {% endif %}

                                                        {% if document.returnedAt and document.status == 'retourne' %}
                                                            <div class="crm-summary-item">
                                                                <span class="crm-summary-label"><i class="fa fa-undo me-1"></i>Retourné le</span>
                                                                <span class="crm-summary-value">{{ document.returnedAt|date("d/m/Y") }}</span>
                                                            </div>
                                                        {% endif %}
                                                    </div>
                                                </fieldset>
                                            </div>
                                        </div>

                                {% set __docArticlesQty = 0 %}
                                {% for __line in document.documentDeclinationProduits %}
                                    {% set __docArticlesQty = __docArticlesQty + (__line.quantity ?? 0) %}
                                {% endfor %}

                                <div class="col-12" style="margin-bottom:10px;">
                                    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 font-size-12 text-muted">
                                        <div class="d-flex align-items-center">
                                            <i class="fa fa-user-edit me-2 text-primary"></i>
                                            <span>Créé par :&nbsp;<strong class="text-dark">{{ document.user.firstName }}</strong></span>
                                        </div>

                                        <div class="d-flex align-items-center">
                                            <span class="badge bg-light text-dark border">
                                                Nb d'articles : <strong>{{ __docArticlesQty }}</strong>
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <div class="table-responsive">
                                    <table class="table table-striped table-hover align-middle mb-0">
                                        <thead class="table-light">
                                        <tr>
                                            <th class="text-center">Image</th>
                                            <th class="text-start">Référence</th>
                                            <th class="text-center">Stock</th>
                                            <th class="text-center">HT</th>
                                            <th class="text-center">TVA</th>
                                            <th class="text-end">Qte</th>
                                            <th class="text-center">Remise</th>
                                            <th class="text-center">TTC</th>
                                        </tr>
                                        </thead>

                                        <tbody>
                                       {% if document.documentComments is not empty %}
                                            {% for key, documentComment in document.documentComments %}
                                                <tr class="table-warning">
                                                <td colspan="8" class="py-2">
                                                    <div class="d-flex align-items-start gap-2">
                                                    <i class="fa fa-comment-dots text-info mt-1"></i>
                                                    <div class="small">
                                                        {{ documentComment.description }}
                                                    </div>
                                                    </div>
                                                </td>
                                                </tr>
                                            {% endfor %}
                                        {% endif %}

                                        {% set TotalTTC = 0 %}
                                        {% set discountPrdTotal = 0 %}
                                        {% set TotalTVA = 0 %}
                                        {% set TotalHT = 0 %}

                                        {% set __prevPackGroup = null %}
                                        {% set __prevWasPack = false %}
                                        {% for key, documentDeclinationProduit in document.documentDeclinationProduits %}
                                            {% set discountPrd = 0 %}
                                            {% set tvaRate = documentDeclinationProduit.tva is not null ? documentDeclinationProduit.tva.number : 0 %}
                                            {% set qty = documentDeclinationProduit.quantity ?? 0 %}
                                            {% set lineGrossHt = (documentDeclinationProduit.priceHT ?? 0) * qty %}
                                            {% set lineGrossTtc = lineGrossHt * (1 + (tvaRate / 100)) %}
                                            {% set lineNetTtc = documentDeclinationProduit.totalAmountTtc ?? 0 %}
                                            {% set discountPrd = lineGrossTtc - lineNetTtc %}
                                            {% if discountPrd < 0 %}
                                                {% set discountPrd = 0 %}
                                            {% endif %}
                                            {% set __isPackLine = documentDeclinationProduit.packGroup is not empty %}
                                            {% set __packGroup = __isPackLine ? documentDeclinationProduit.packGroup : null %}

                                            {% if __isPackLine and __packGroup != __prevPackGroup %}
                                                {% set __packTotal = 0 %}
                                                {% for __p in document.documentDeclinationProduits %}
                                                    {% if __p.packGroup == __packGroup %}
                                                        {% set __packTotal = __packTotal + (__p.totalAmountTtc ?? 0) %}
                                                    {% endif %}
                                                {% endfor %}

                                                <tr class="table-primary">
                                                    <td colspan="8" class="py-2">
                                                        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                                                            <div class="d-flex align-items-center gap-2 flex-wrap">
                                                                <i class="fa fa-box-open"></i>
                                                                <strong>Pack:</strong>
                                                                <span>{{ documentDeclinationProduit.pack ? documentDeclinationProduit.pack.name : ('Pack #' ~ __packGroup) }}</span>

                                                                {% if documentDeclinationProduit.packQty %}
                                                                    <span class="badge bg-light text-dark border">Qté pack: {{ documentDeclinationProduit.packQty }}</span>
                                                                {% endif %}
                                                            </div>

                                                            <div>
                                                                <span class="badge bg-info text-dark border">
                                                                    Mt pack: {{ __packTotal|number_format(3, ',', '') }} TND
                                                                </span>
                                                            </div>
                                                        </div>

                                                    </td>
                                                </tr>
                                            {% endif %}

                                            {% if __prevWasPack and not __isPackLine %}
                                                <tr>
                                                    <td colspan="8" class="py-1" style="background:#fff;">
                                                        <hr class="my-1">
                                                        <small class="text-muted"><i class="fa fa-tag me-1"></i>Autres produits (hors pack)</small>
                                                    </td>
                                                </tr>
                                            {% endif %}


                                            <tr>
                                                <td class="text-center">
                                                    {% set picture = '<i class="fa fa-image text-muted" style="font-size:32px;"></i>' %}

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

                                                    {% set parentProduit = documentDeclinationProduit.produitDeclinationValue.produit ?? null %}
                                                    {% if parentProduit %}
                                                        <a href="{{ path('produit_show', {'id': parentProduit.id}) }}"
                                                           target="_blank"
                                                           class="text-decoration-none"
                                                           data-bs-toggle="tooltip"
                                                           data-bs-placement="top"
                                                           title="Ouvrir la fiche produit">
                                                            <img class="img-produit img-fluid rounded" src="{{ picture }}" style="max-width:50px;">
                                                        </a>
                                                    {% else %}
                                                        <img class="img-produit img-fluid rounded" src="{{ picture }}" style="max-width:50px;">
                                                    {% endif %}
                                                </td>

                                                <td class="text-start fw-semibold">
                                                    <a href="{{ path('produit_declination_value_show', {'id': documentDeclinationProduit.produitDeclinationValue.id}) }}"
                                                       target="_blank"
                                                       class="text-decoration-none">
                                                        {{ documentDeclinationProduit.reference }}
                                                    </a>
                                                    <p class="mb-0"><small class="text-muted">{{ documentDeclinationProduit.description }}</small></p>
                                                    {% if __isPackLine %}
                                                        <div class="mt-1">
                                                            <span class="badge bg-light text-primary border">
                                                                <i class="fa fa-box me-1"></i>
                                                                {{ documentDeclinationProduit.pack ? documentDeclinationProduit.pack.name : 'Pack' }}
                                                            </span>
                                                        </div>
                                                    {% endif %}

                                                </td>

                                                <td class="text-center">
                                                    <span style="overflow: visible; width: 50px;">
                                                        <span class="badge {{ documentDeclinationProduit.produitDeclinationValue.getQtyAvailable() > 0 ? 'text-bg-success' : 'text-bg-danger' }}"
                                                            data-bs-toggle="tooltip"
                                                            data-bs-placement="bottom"
                                                            title="qté disponible">
                                                            {{ documentDeclinationProduit.produitDeclinationValue.getQtyAvailable() }}
                                                        </span>

                                                        <sup class="badge text-bg-danger"
                                                            style="position: relative; right: 7px; top: -10px;"
                                                            data-bs-toggle="tooltip"
                                                            data-bs-placement="bottom"
                                                            title="qté reservé">
                                                            {{ documentDeclinationProduit.produitDeclinationValue.getQtyReserved() }}
                                                        </sup>
                                                    </span>
                                                </td>

                                                <td class="text-center">
                                                    {{ documentDeclinationProduit.priceHT|number_format(3,',','') }} <sup>TND</sup>
                                                </td>

                                                <td class="text-center">
                                                    {% if documentDeclinationProduit.tva is not null %}
                                                        {{ (documentDeclinationProduit.tva).number }} %
                                                    {% else %}
                                                        0 %
                                                    {% endif %}
                                                </td>

                                                <td class="text-center">
                                                    {% set qte = documentDeclinationProduit.quantity ?? 0 %}
                                                    {% if qte > 1 %}
                                                    <div class="d-flex flex-column align-items-center">
                                                        <span class="badge bg-warning text-dark qty-alert-badge">{{ qte }}</span>
                                                        <small class="text-danger fw-semibold mt-1 qty-alert-text">Qte > 1</small>
                                                    </div>
                                                    {% else %}
                                                    {{ qte }}
                                                    {% endif %}

                                                </td>

                                                <td class="text-center">
                                                    {{ documentDeclinationProduit.discount|number_format(3,',','') }}
                                                    {% if documentDeclinationProduit.discountType == 'percent' %}
                                                        %
                                                    {% else %}
                                                        <sup>TND</sup>
                                                    {% endif %}
                                                    {% set discountPrdTotal = discountPrdTotal + discountPrd %}
                                                </td>

                                                <td class="text-end">
                                                    {{ documentDeclinationProduit.totalAmountTtc|number_format(3,',','') }} <sup>TND</sup>
                                                </td>
                                            </tr>


                                            {% if documentDeclinationProduit.type == 'declinationEchange' %}
                                                {% set TotalHT = TotalHT - lineGrossHt %}
                                                {% set TotalTVA = TotalTVA - (lineGrossTtc - lineGrossHt) %}
                                                {% set TotalTTC = TotalTTC - lineGrossTtc %}
                                            {% else %}
                                                {% set TotalHT = TotalHT + lineGrossHt %}
                                                {% set TotalTVA = TotalTVA + (lineGrossTtc - lineGrossHt) %}
                                                {% set TotalTTC = TotalTTC + lineGrossTtc %}
                                            {% endif %}
                                            {% set __prevPackGroup = __packGroup %}
                                            {% set __prevWasPack = __isPackLine %}

                                        {% endfor %}

                                        {% set discountBase = TotalTTC > 0 ? TotalTTC : 0 %}
                                        {% set discount = (document.discountType == 'percent') ? ((discountBase * (document.discount ?? 0)) / 100) : (document.discount ?? 0) %}
                                        {% if discount < 0 %}
                                            {% set discount = 0 %}
                                        {% endif %}
                                        {% if discount > discountBase %}
                                            {% set discount = discountBase %}
                                        {% endif %}
                                        {% set totalDiscount = discount + discountPrdTotal %}
                                        {% set netToPayBeforeDelivery = TotalTTC - totalDiscount %}
                                        {% set netToPay = netToPayBeforeDelivery + (document.deliveryTotal ?? 0) %}

                                        <tr class="text-muted fst-italic" style="background-color:#f9f9f9;">
                                            <td class="text-center">
                                                <img class="img-produit img-fluid" src="{{ asset('assets/media/img/delivery.png') }}" title="Frais de livraison" style="max-width:50px;">
                                            </td>
                                            <td class="text-start" colspan="2">
                                                <small>{{ document.delivery ? document.delivery.name : "n'est pas mentionnée" }}</small>
                                            </td>
                                            <td class="text-end">—</td>
                                            <td class="text-end">—</td>
                                            <td class="text-end">1</td>
                                            <td class="text-center">
                                                {{ document.deliveryDiscount }}
                                                {% if document.deliveryDiscountType == 'percent' %}%{% else %}<sup>TND</sup>{% endif %}
                                            </td>
                                            <td class="text-end">
                                                {{ document.deliveryTotal|number_format(3, ',', '') }}<sup>TND</sup>
                                            </td>
                                        </tr>

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



                                {# === RéCAP & PROMOTION === #}
                                    <div class="row gy-4 mt-1">

                                        {# --- Promotion --- #}
                                        <div class="col-12 col-lg-6 ms-lg-auto">
                                            {% if document.promotion is not null %}
                                                {% set promo = document.promotion %}

                                                <div class="alert alert-info d-flex align-items-start gap-2 mb-0" role="alert">
                                                    <i class="fa fa-tag fa-lg mt-1"></i>

                                                    <div class="small">
                                                        <strong>Promotion appliquée à  cette commande</strong><br>
                                                        Code : <strong>{{ promo.code }}</strong>
                                                        {% if promo.name %} —” {{ promo.name }}{% endif %}
                                                        <br>
                                                        Remise :
                                                        <strong>
                                                            {{ promo.discountValue }}
                                                            {{ promo.discountType == 'percent' ? '%' : 'TND' }}
                                                        </strong>
                                                    </div>
                                                </div>
                                            {% endif %}
                                        </div>

                                        {# --- Totaux --- #}
                                        <div class="col-12 col-lg-4 ms-lg-auto">
                                            <div class="border rounded-3 p-2 bg-light">

                                                <table class="table table-sm table-borderless mb-0 align-middle ">
                                                    <tbody>

                                                    <tr>
                                                        <td class="text-muted">
                                                            <i class="fa fa-calculator me-2"></i>Total HT
                                                        </td>
                                                        <td class="text-end text-muted">
                                                            {{ TotalHT|number_format(3, ',', '') }} <sup>TND</sup>
                                                        </td>
                                                    </tr>

                                                    <tr>
                                                        <td class="text-muted">
                                                            <i class="fa fa-percent me-2 text-warning"></i>Total TVA
                                                        </td>
                                                        <td class="text-end text-muted">
                                                            {{ TotalTVA|number_format(3, ',', '') }} <sup>TND</sup>
                                                        </td>
                                                    </tr>

                                                    <tr>
                                                        <td class="text-dark fw-semibold">
                                                            <i class="fa fa-file-invoice-dollar me-2"></i>Total TTC
                                                        </td>
                                                        <td class="text-end fw-semibold">
                                                            {{ TotalTTC|number_format(3, ',', '') }} <sup>TND</sup>
                                                        </td>
                                                    </tr>

                                                    <tr>
                                                        <td class="text-muted">
                                                            <i class="fa fa-tag me-2 text-info"></i>Remise
                                                            {% if document.discountType == 'percent' %}
                                                                ({{ document.discount ~ "%" }})
                                                            {% endif %}
                                                        </td>
                                                        <td class="text-end text-muted">
                                                            {{ totalDiscount|number_format(3, ',', '') }} <sup>TND</sup>
                                                        </td>
                                                    </tr>

                                                    <tr>
                                                        <td class="text-muted">
                                                            <i class="fa fa-wallet me-2 text-secondary"></i>Net à payer (hors frais)
                                                        </td>
                                                        <td class="text-end text-muted">
                                                            {{ netToPayBeforeDelivery|number_format(3, ',', '') }} <sup>TND</sup>
                                                        </td>
                                                    </tr>

                                                    <tr>
                                                        <td class="text-muted">
                                                            <i class="fa fa-truck me-2 text-primary"></i>Frais de livraison
                                                        </td>
                                                        <td class="text-end text-muted">
                                                            {{ document.deliveryTotal|number_format(3, ',', '') }} <sup>TND</sup>
                                                        </td>
                                                    </tr>

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

                                                    <tr class="border-top">
                                                        <td class="pt-3 fw-bold" style="background:#eefbf6;">
                                                            <i class="fa fa-wallet me-2 text-success"></i>Net à  payer
                                                        </td>
                                                        <td class="text-end pt-3 fw-bold text-success" style="background:#eefbf6;">
                                                            <span class="copy-text cursor-pointer"
                                                                  data-bs-toggle="tooltip"
                                                                  data-bs-placement="top"
                                                                  title="Copier le montant"
                                                                  data-copy="{{ document.totalAmountTtc|number_format(3, '.', '') }}">
                                                                {{ document.totalAmountTtc|number_format(3, ',', '') }}
                                                            </span> <sup>TND</sup>
                                                        </td>
                                                    </tr>

                                                    </tbody>
                                                </table>

                                            </div>
                                        </div>

                                    </div>

                            </div>

                        </div>

                    </div>
                </div>
            </div>

                </div>
            </div>

            {#-- panneaux commentaires et historiques--#}
            <div class="col-lg-4 ps-lg-3 mt-4 mt-lg-0 document-detail-side">
                <div class="card shadow-sm h-100">

                    <div class="accordion" id="accordion-right">

                         {# -- Historique Commentaires -- #}
                        <div class="accordion-item">

                           <h2 class="accordion-header" id="heading-comments">
                                <button class="accordion-button py-3 px-4"
                                        type="button"
                                        data-bs-toggle="collapse"
                                        data-bs-target="#m_accordion_2_item_1_body"
                                        aria-expanded="true"
                                        aria-controls="m_accordion_2_item_1_body">

                                    <i class="fa fa-comments me-3"></i>
                                    <span class="fw-semibold">Commentaires</span>

                                </button>
                            </h2>


                            <div id="m_accordion_2_item_1_body"
                                    class="accordion-collapse collapse show"
                                    aria-labelledby="heading-comments"
                                    data-bs-parent="#accordion-right">
                                <div class="accordion-body p-3 bg-white">

                                    {% if comments is empty %}
                                        <div class="alert alert-warning text-center" role="alert">
                                            <strong>Pas de commentaires pour l’instant.</strong>
                                        </div>
                                    {% endif %}
                                    <div class="m-messenger m-messenger--message-arrow m-messenger--skin-light">

                                        {% include 'admin/document/_comments_block.html.twig' %}
                                        <div class="m-messenger__seperator"></div>


                                         {# --- Zone de text Ajout commentaire --- #}
                                        <form name="form_comment" method="POST" action="{{ path('comment_new', {'type' : 'document', 'id' : document.id  }) }}" enctype="multipart/form-data" class="el-form well p-0 b-0 el-form--label-top el-form--inline">
                                            <div class="m-messenger__form">
                                                <div class="m-messenger__form-controls">
                                                    <input type="text" id="comment-input" name="form_comment[comment]" placeholder="Ecrire ton commentaire ici..." class="m-messenger__form-input">
                                                   <div class="mt-2 d-flex align-items-center justify-content-start">
                                                        <input type="hidden" name="form_comment[is_public]" value="0">

                                                       <div class="comment-public-row mt-2">
                                                            <input type="hidden" name="form_comment[is_public]" value="0">

                                                            <input class="m-0"
                                                                    type="checkbox"
                                                                    role="switch"
                                                                    id="new_comment_is_public_doc"
                                                                    name="form_comment[is_public]"
                                                                    value="1">

                                                            <label class="comment-public-label mb-0"
                                                                    for="new_comment_is_public_doc">
                                                                Commentaire public <span class="comment-public-hint">(visible par le client)</span>
                                                            </label>
                                                        </div>
                                                    </div>


                                                </div>
                                                <div class="m-messenger__form-tools">
                                                    <button type="submit" class="m-messenger__form-attachment"><i class="fas fa-comment-dots"></i></button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>

                                </div>
                            </div>
                        </div>

                         {# -- Historique Appels -- #}
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="heading-calls">
                                <button class="accordion-button collapsed py-3 px-4" type="button"
                                        data-bs-toggle="collapse"
                                        data-bs-target="#accordion-calls-body">
                                    <i class="fa fa-phone me-2"></i> Historique des appels
                                </button>
                            </h2>

                            <div id="accordion-calls-body"
                                class="accordion-collapse collapse show"
                                data-bs-parent="#accordion-right">
                                <div class="accordion-body p-3 bg-white">
                                        {# === Historique des appels === #}
                                        {% include 'admin/document/_calls_block.html.twig' %}

                                </div>


                            </div>
                        </div>


                        {# -- Historique Modifications -- #}
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="heading-history">
                                <button class="accordion-button collapsed py-3 px-4"
                                        type="button"
                                        data-bs-toggle="collapse"
                                        data-bs-target="#m_accordion_2_item_3_body"
                                        aria-expanded="false"
                                        aria-controls="m_accordion_2_item_3_body">
                                <i class="fa fa-history me-2"></i>
                                <span class="fw-semibold">Historique des modifications</span>
                                </button>
                            </h2>

                            <div id="m_accordion_2_item_3_body"
                                class="accordion-collapse collapse"
                                aria-labelledby="heading-history"
                                data-bs-parent="#accordion-right">
                                <div class="accordion-body p-3 bg-white">


                                {# 1) Fusion des activités (ancêtres → courant) #}
                                {% set activities = document.activities %}
                                {% if document.document is not null %}
                                    {% set activities = document.document.activities|merge(activities) %}
                                    {% if document.document.document is not null %}
                                    {% set activities = document.document.document.activities|merge(activities) %}
                                    {% if document.document.document.document is not null %}
                                        {% set activities = document.document.document.document.activities|merge(activities) %}
                                    {% endif %}
                                    {% endif %}
                                {% endif %}

                                {# 2) Tri décroissant (plus récentes en premier) #}
                                {% set activities = activities|sort((a, b) => a.createdAt <=> b.createdAt)|reverse %}


                                {# 3) Icônes & badges par type #}
                                {% set type_icon = {
                                    'info':   'fa fa-info-circle text-info',
                                    'danger': 'fa fa-exclamation-triangle text-danger',
                                    'success':'fa fa-check-circle text-success',
                                    'warning':'fa fa-exclamation-circle text-warning'
                                } %}
                                {% set type_badge = {
                                    'info':   'm-badge m-badge--info m-badge--wide',
                                    'danger': 'm-badge m-badge--danger m-badge--wide',
                                    'success':'m-badge m-badge--success m-badge--wide',
                                    'warning':'m-badge m-badge--warning m-badge--wide'
                                } %}

                                {% if activities is empty %}
                                    <div class="alert alert-warning text-center mb-0">
                                    <strong>Aucun historique pour le moment.</strong>
                                    </div>
                                {% else %}
                                    <ul class="list-unstyled mb-0" style="max-height:320px;overflow:auto;">
                                    {% set currentDay = '' %}
                                    {% for activity in activities %}
                                        {% set day = activity.createdAt|date('d/m/Y') %}

                                        {# Titre de date (groupement) #}
                                        {% if day != currentDay %}
                                        {% set currentDay = day %}
                                        <li class="mt-2 mb-1">
                                            <div class="crm-legend d-flex align-items-center">
                                            <i class="fa fa-calendar-alt me-2 text-muted"></i>
                                            <span class="fw-bold text-dark">{{ currentDay }}</span>
                                            <span class="crm-vsep mx-2"></span>
                                            <span class="text-muted small">
                                                {% set countDay = activities|filter(a => a.createdAt|date('d/m/Y') == currentDay)|length %}
                                                {{ countDay }} action{{ countDay>1?'s':'' }}
                                            </span>
                                            </div>
                                        </li>
                                        {% endif %}

                                        {# Ligne activité #}
                                        <li class="py-2 border-bottom" id="activity_{{ activity.id }}">
                                        <div class="d-flex align-items-start">
                                            <i class="{{ type_icon[activity.type]|default('fa fa-circle text-secondary') }} me-2" style="font-size:1rem;"></i>

                                            <div class="flex-grow-1">
                                            <div class="d-flex align-items-center flex-wrap" style="gap:8px;">
                                                <span class="{{ type_badge[activity.type]|default('m-badge m-badge--metal m-badge--wide') }}">
                                                {{ activity.type|capitalize }}
                                                </span>

                                                <span class="text-muted small">
                                                {{ activity.createdAt|date('H:i') }}
                                                </span>

                                                {# Si l'auteur est disponible #}
                                                {% if activity.user is defined and activity.user %}
                                                <span class="small text-muted">
                                                    — {{ activity.user.fullName ?? activity.user.username }}
                                                </span>
                                                {% endif %}
                                            </div>

                                            <div class="mt-1">
                                                <small class="text-dark" style="white-space:pre-wrap;">{{ activity.message }}</small>
                                            </div>
                                            </div>

                                            {# Action "copier" rapide #}
                                            <a href="#"
                                            class="ms-2 text-muted small"
                                            title="Copier le message"
                                            data-bs-toggle="tooltip"
                                            onclick="navigator.clipboard.writeText(`{{ activity.message|e('js') }}`); return false;">
                                            <i class="fa fa-copy"></i>
                                            </a>
                                        </div>
                                        </li>
                                    {% endfor %}
                                    </ul>
                                {% endif %}
                                </div>
                            </div>
                        </div>


                        {#--Historique du document--#}
                      <div class="accordion-item">
                        <h2 class="accordion-header" id="heading-doc-history">
                            <button class="accordion-button py-3 px-4"
                                    type="button"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#m_accordion_2_item_2_body"
                                    aria-expanded="true"
                                    aria-controls="m_accordion_2_item_2_body">
                            <i class="fa fa-link me-2"></i>
                            <span class="fw-semibold">Historique du document</span>
                            </button>
                        </h2>

                        <div id="m_accordion_2_item_2_body"
                            class="accordion-collapse collapse"
                            aria-labelledby="heading-doc-history"
                            data-bs-parent="#accordion-right">
                            <div class="accordion-body p-3">
                            <ul class="list-unstyled ps-2">


                                    {# — Icones & classes statuts — #}
                                    {% set icons = {
                                        'commande':   '<i class="fa fa-file-alt text-primary"></i>',
                                        'facture':    '<i class="fa fa-file-invoice-dollar text-info"></i>',
                                        'avoir':      '<i class="fa fa-recycle text-warning"></i>',
                                        'retour':     '<i class="fa fa-undo text-danger"></i>',
                                        'default':    '<i class="fa fa-file text-secondary"></i>'
                                    } %}
                                    {% set status_classes = {
                                        'en-attente': 'alert-en-attente',
                                        'accepte': 'alert-accepte',
                                        'a-expedier': 'alert-a-expedier',
                                        'expedie': 'alert-expedie',
                                        'livre': 'alert-livre',
                                        'paye': 'alert-paye',
                                        'non-paye': 'alert-non-paye',
                                        'partiellement-paye': 'alert-partiellement-paye',
                                        'facture': 'alert-facture',
                                        'annule': 'alert-annule',
                                        'retour-en-cours': 'alert-retour-en-cours',
                                        'retourne': 'alert-retourne',
                                        'rembourse': 'alert-rembourse',
                                        'a-rembourser': 'alert-a-rembourser'
                                    } %}

                                    {# — Affichage ancêtres verticaux — #}
                                    {% set d0 = document %}
                                    {% set d1 = d0.document %}
                                    {% set d2 = d1 is not null ? d1.document : null %}
                                    {% set d3 = d2 is not null ? d2.document : null %}
                                    {% set docs = [d3, d2, d1, d0]|filter(d => d is not null) %}
                                    {% for doc in docs %}
                                        <li class="mb-2 d-flex align-items-center">
                                            <div style="min-width:28px;text-align:center;">
                                                {% if not loop.first %}
                                                    <i class="fa fa-angle-down text-muted" style="font-size:1.1em;"></i>
                                                {% endif %}
                                            </div>
                                            <div class="d-flex align-items-center flex-wrap" style="gap:8px;">
                                                {{ icons[doc.type]|default(icons['default'])|raw }}
                                                <a href="{{ path('document_show', {'id': doc.id }) }}" title="{{ doc.conditionDocument }}" style="font-weight:600;">
                                                    N°{{ doc.internalNbr }}
                                                </a>
                                                <span class="badge badge-light">{{ doc.type|capitalize }}</span>
                                                <span class="badge {{ status_classes[doc.status]|default('badge-secondary') }}">
                                                    {{ doc.status|replace({'-':' '})|capitalize }}
                                                </span>
                                                {% if doc.createdAt is defined %}
                                                    <span class="text-muted" style="font-size:0.92em;">
                                                        {{ doc.createdAt|date('d/m/Y') }}
                                                    </span>
                                                {% endif %}
                                            </div>
                                        </li>
                                    {% endfor %}

                                    {# — Enfants directs — #}
                                    {% if document.documents|length > 0 %}
                                        <li class="ms-4 mb-1 ps-2 border-left" style="border-color:#dee2e6 !important;">
                                            {% for doc in document.documents %}
                                                <div class="d-flex align-items-center mb-2">
                                                    <i class="fa fa-angle-double-down text-muted me-2"></i>
                                                    {{ icons[doc.type]|default(icons['default'])|raw }}
                                                    <a href="{{ path('document_show', {'id': doc.id }) }}" class="ms-1" style="font-weight:600;">
                                                        N°{{ doc.internalNbr }}
                                                    </a>
                                                    <span class="badge badge-light ms-1">{{ doc.type|capitalize }}</span>
                                                    <span class="badge {{ status_classes[doc.status]|default('badge-secondary') }} ms-1">
                                                        {{ doc.status|replace({'-':' '})|capitalize }}
                                                    </span>
                                                    {% if doc.createdAt is defined %}
                                                        <span class="text-muted ms-2" style="font-size:0.92em;">
                                                            {{ doc.createdAt|date('d/m/Y') }}
                                                        </span>
                                                    {% endif %}
                                                </div>
                                            {% endfor %}
                                        </li>
                                    {% endif %}
                                </ul>
                            </div>
                        </div>
                    </div>


                    </div>

                </div>
            </div>
        </div>
    </div>


    {% include '@admin/document/_modalsCalls.html.twig' %}

    {{ include('@admin/includes/modals/_modal_edit_info_livraison.html.twig') }}
    {{ include('@admin/includes/modals/_modal_edit_user.html.twig') }}



{% endblock %}
{# -- Variables JS page document client -- #}


{% block js %}
    {{ parent() }}

    <script>


        $(function() {
            $('#m_modal_retour').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget) // Button that triggered the modal
                var title = button.data('title') // Extract info from data-* attributes
                var titleBtn = button.data('btn') // Extract info from data-* attributes
                var modal = $(this)
                modal.find('.modal-title').text(title);
                modal.find('button[type=submit]').text(titleBtn);
            })
            var originalHeight=$("#content_docOverview").parent().height();
            $(window).scroll(function(){
                if($(this).scrollTop() > 10){
                    $('.m-subheader').addClass('sticky_title')
                    $('.action > .row > .col-lg-12').addClass("sticky_action")
                    $('.m-content').addClass("sticky")
                /*if(originalHeight>960)*/ $("#content_docOverview").parent().height(originalHeight+170)
                }
                else{
                    $('.m-subheader').removeClass("sticky_title")
                    $('.action > .row > .col-lg-12').removeClass("sticky_action")
                    $('.m-content').removeClass("sticky")
                    $( "#content_docOverview").parent().height(originalHeight)
                }
            });
        });

      $(function(){
        $('#m_modal_expider').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // Le bouton ayant ouvert la modale
            var action = button.data('action');
            var type   = button.data('type'); // "pending" ou "ship"

            // Change la route cible du form
            $(this).find('form').attr('action', action);

            // Affiche seulement le bon bouton submit
            if (type === 'pending') {
                $('#auto_document_save').addClass('d-none');
                $('#auto_document_pending').removeClass('d-none');
            } else {
                $('#auto_document_save').removeClass('d-none');
                $('#auto_document_pending').addClass('d-none');
            }
        });
    });

        // set payment state (non-paye / partiellement-paye / payé via route mark_paid)
        $(document).on('click', '.js-set-payment', function (e) {
            e.preventDefault();
            var url = $(this).data('url');
            $.post(url).done(() => window.location.reload());
        });

        // refunds (full / partial)
        $(document).on('click', '.js-refund', function (e) {
            e.preventDefault();
            var url = $(this).data('url');
            $.post(url).done(() => window.location.reload());
        });




    </script>

{% endblock %}