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

{% block stylesheets %}
    {{ parent() }}
    {# ===== Bloc 1 : KPI style identique "clients" ===== #}
<style>
  .kpi{
    transition: all 0.18s cubic-bezier(.4,1.3,.5,1);
    margin: .5rem 0;
    flex-shrink: 0;
    text-align: center;
    flex: 1 0 auto;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 5px;
    background-color: #f7f9fa;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }

  .kpi:hover{
    transform: scale(1.02);
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
  }

  /* variantes largeur (comme client) */
  .kpi-wide{ min-width:220px; max-width:260px; }
  .kpi-xl{   min-width:280px; max-width:320px; }
  .kpi-md{   min-width:140px; max-width:210px; }

  .kpi.bg-color{ background-color:#f9f9f9; }

  .kpi .kpi-label{ font-size:.75rem; margin-bottom:.25rem; }
  .kpi .kpi-value{ font-size:1rem; }

  .kpi-container{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
  }

  .kpi-group{
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    gap:1rem;
    margin-right:1rem;
    padding-right:1rem;
  }

  /* KPI inline (statut) */
  .kpi-inline{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:.45rem .6rem;
  }
  .kpi-inline .kpi-left{
    display:flex;
    align-items:center;
    gap:.35rem;
  }
  .kpi-inline .kpi-left i{ font-size:.9rem; opacity:.85; }
  .kpi-inline .kpi-value{
    font-size:.95rem;
    font-weight:700;
    margin:0;
  }

  @media (max-width:768px){
    .kpi-group{
      border-right:none;
      border-bottom:1px solid #ccc;
      padding:10px;
      padding-bottom:1rem;
      margin-right:0;
      width:100%;
      justify-content:center;
    }
  }

  /* toggle mobile (comme client) */
  .kpi-toggle-btn{ display:none; }
  @media (max-width:768px){
    .kpi-group:not(:first-child){ display:none; }
    .kpi-toggle-btn{
      display:block;
      text-align:center;
      margin-top:.5rem;
      font-size:.85rem;
      cursor:pointer;
      color: var(--secondary-color, #007bff);
      font-weight:500;
    }
  }

  .supplier-logo{
    width: 26px;
    height: 26px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid #e5e7eb;
    background: #fff;
    }
    .supplier-logo-fallback{
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    background: #f8f9fa;
    color: #6c757d;
    }
    .dt-supplier{ min-width: 220px; }
.supplier-name{ font-weight: 600; }

  /* Floating filter panel (same behavior as clients, custom show/hide) */
  #filterOffcanvasDocFr {
  --bs-offcanvas-width: clamp(300px, 32vw, 360px);
  top: var(--docfr-offcanvas-top, 100px);
  height: calc(100vh - var(--docfr-offcanvas-top, 100px));
  z-index: 1030;
}
@media (max-width: 991.98px) {
  #filterOffcanvasDocFr {
    --bs-offcanvas-width: min(78vw, 320px);
  }
}


  /* Mobile compact cards for supplier documents */
  @media (max-width: 767.98px){
    table[id$="FournisseurListTable"]{ border:0; }
    table[id$="FournisseurListTable"] thead{ display:none; }
    table[id$="FournisseurListTable"] tbody tr{
      display:block;
      margin-bottom:.55rem;
      border:1px solid #e4e9f0;
      border-radius:12px;
      background:#fff;
      box-shadow:0 1px 3px rgba(15,23,42,.06);
      overflow:visible;
    }
    table[id$="FournisseurListTable"] tbody td{
      display:none !important;
      border:0 !important;
      padding:0 !important;
    }
    table[id$="FournisseurListTable"] tbody td.docfr-mobile-host{
      display:block !important;
    }

    .docfr-card{
      display:grid;
      grid-template-columns:46px minmax(0,1fr) auto;
      gap:.55rem;
      padding:.5rem .55rem;
      align-items:start;
    }
    .docfr-left{ position:relative; }
    .docfr-icon{
      width:46px;height:46px;border-radius:10px;border:1px solid #e7ebf2;
      background:#f8fafc;color:#475569;display:inline-flex;align-items:center;justify-content:center;font-size:16px;
    }
    .docfr-check{
      position:absolute;top:-2px;left:-2px;width:14px;height:14px;margin:0;accent-color:#2f6fd6;
    }
    .docfr-main{ min-width:0; }
    .docfr-top{ display:flex;align-items:flex-start;justify-content:space-between;gap:.4rem; }
    .docfr-num{
      font-size:.88rem;font-weight:700;color:#1d4ed8;line-height:1.2;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50vw;
    }
    .docfr-status{ flex:0 0 auto; }
    .docfr-supplier{
      margin-top:.05rem;font-size:.82rem;color:#111827;font-weight:600;line-height:1.2;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    .docfr-meta{ margin-top:.28rem;display:flex;gap:.3rem;flex-wrap:wrap; }
    .docfr-chip{
      font-size:.69rem;line-height:1;padding:.24rem .42rem;border-radius:999px;
      background:#f1f5f9;color:#1f2937;border:1px solid #e2e8f0;white-space:nowrap;
    }
    .docfr-chip.muted{ background:#f8fafc;color:#64748b; }
    .docfr-chip .k{ font-weight:700;color:#334155;margin-right:.18rem; }
    .docfr-created{ margin-top:.24rem;font-size:.72rem;color:#64748b;line-height:1.2; }
    .docfr-actions{ display:flex;align-items:flex-start;gap:.2rem; }
    .docfr-actions .btn{
      width:28px;height:28px;min-width:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;
      border-radius:8px;border:1px solid #e5e7eb;background:#fff;color:#111827;
    }
    .docfr-actions .dropdown-menu{ min-width:170px; }
  }
</style>
{% endblock %}
{% block subheader %}

<input type="hidden" name="type" value="{{ type }}">

<div class="badge-titre d-flex justify-content-between align-items-center flex-wrap w-100 mb-3" style="min-height:3.2rem;">

    {# ===== Bloc 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 me-2">
            <i class="fa fa-truck"></i> {# Icône Achats / Réception #}
        </span>

        <div>
            <h3 class="badge-title-main mb-0" style="font-size:1.25rem;">
                {% if type == 'facture' %}
                    LISTE DES FACTURES FOURNISSEURS
                {% elseif type == 'achat' %}
                    LISTE DES DEMANDES D’ACHAT FOURNISSEURS
                {% elseif type == 'reception' %}
                    LISTE DES BONS DE RÉCEPTION FOURNISSEURS
                {% elseif type == 'retour' %}
                    LISTE DES BONS DE RETOUR FOURNISSEURS
                {% else %}
                    DOCUMENTS FOURNISSEURS
                {% endif %}
            </h3>


        </div>
    </div>

    {# ===== Bloc droit : Action principale ===== #}
    <div class="d-flex align-items-center mt-2 mt-sm-0">
        <button type="button"
                class="btn btn-success d-flex align-items-center gap-2"
                data-bs-toggle="modal"
                data-bs-target="#m_modal_8">
            <i class="fa fa-plus"></i>
            <span>
                Créer
                {% if type == 'facture' %} FACTURE
                {% elseif type == 'achat' %} DEMANDE D’ACHAT
                {% elseif type == 'reception' %} BON DE RÉCEPTION
                {% elseif type == 'retour' %} BON DE RETOUR
                {% endif %}
            </span>
        </button>
    </div>

</div>

{% endblock %}


{% block stat %}

{% endblock %}

{% block bodycontent %}

<div class="container-fluid py-3">

   {#-- Panneau statistiques Fournisseur (Réception) --#}
    <div class="row mb-3">
        <div class="col-12 px-0">
            <div class="card p-3">
            <div class="kpi-container">

                {# ========= KPI GROUPE 1 — Global ========= #}
                <div class="kpi-group">
                <div class="kpi bg-color kpi-inline kpi-wide">
                    <div class="kpi-left">
                    <i class="fa fa-list me-1"></i>
                    <span class="kpi-label">Nombre total</span>
                    </div>
                    <div class="kpi-value amount nbrTotal">0</div>
                </div>
                </div>

                {# ========= KPI GROUPE 2 — Totaux (admin) ========= #}
                {% if is_granted('ROLE_SUPER_ADMIN') %}
                <div class="kpi-group">

                    <div class="kpi bg-color kpi-inline kpi-wide">
                    <div class="kpi-left">
                        <i class="fa fa-coins me-1 text-muted"></i>
                        <span class="kpi-label">Total avec frais <sup>(TND)</sup></span>
                    </div>
                    <div class="kpi-value amount amountTotal">0.000</div>
                    </div>

                    <div class="kpi bg-color kpi-inline kpi-wide">
                    <div class="kpi-left">
                        <i class="fa fa-shipping-fast me-1 text-secondary"></i>
                        <span class="kpi-label">Frais livraison <sup>(TND)</sup></span>
                    </div>
                    <div class="kpi-value amount deliveryTotal">0.000</div>
                    </div>

                    <div class="kpi bg-color kpi-inline kpi-wide">
                    <div class="kpi-left">
                        <i class="fa fa-box-open me-1 text-secondary"></i>
                        <span class="kpi-label">Total sans frais <sup>(TND)</sup></span>
                    </div>
                    <div class="kpi-value amount amountTotalSansFrais">0.000</div>
                    </div>

                    <div class="kpi bg-color kpi-inline kpi-wide">
                    <div class="kpi-left">
                        <i class="fa fa-chart-line me-1 text-muted"></i>
                        <span class="kpi-label">Moyenne réception <sup>(TND)</sup></span>
                    </div>
                    <div class="kpi-value amount moyenne"
                        data-bs-toggle="tooltip"
                        title="Moyenne sans frais de livraison">0.000</div>
                    </div>

                </div>
                {% endif %}

            </div>

            <div class="d-flex align-items-center justify-content-between mb-4 pb-2 border-bottom"></div>

            <div class="kpi-container">
                {# ========= KPI GROUPE 3 — Statuts Réception ========= #}
                {% if type in ['reception'] %}
                <div class="kpi-group">

                    <div class="kpi bg-color kpi-inline kpi-md">
                    <div class="kpi-left">
                        <i class="fa fa-file-alt me-1"></i>
                        <span class="kpi-label">Brouillon</span>
                    </div>
                    <div class="kpi-value amount nbreStatutBrouillon">0</div>
                    </div>

                    <div class="kpi bg-color kpi-inline kpi-md">
                    <div class="kpi-left">
                        <i class="fa fa-check-circle me-1"></i>
                        <span class="kpi-label">Validé</span>
                    </div>
                    <div class="kpi-value amount nbreStatutValide">0</div>
                    </div>

                    <div class="kpi bg-color kpi-inline kpi-md">
                    <div class="kpi-left">
                        <i class="fa fa-file-invoice me-1"></i>
                        <span class="kpi-label">Payé</span>
                    </div>
                    <div class="kpi-value amount nbreStatutPaye">0</div>
                    </div>

                    <div class="kpi bg-color kpi-inline kpi-md">
                    <div class="kpi-left">
                        <i class="fa fa-file-invoice me-1"></i>
                        <span class="kpi-label">Facturé</span>
                    </div>
                    <div class="kpi-value amount nbreStatutFacture">0</div>
                    </div>

                </div>
                {% endif %}

                {# ========= Toggle mobile ========= #}
                <div class="kpi-toggle-btn d-md-none text-center" id="kpi-toggle-more"
                    onclick="
                    document.querySelectorAll('.kpi-group').forEach((el,i)=> el.style.display='flex');
                    this.style.display='none';
                    document.getElementById('kpi-toggle-less').style.display='block';
                    ">
                Voir plus
                </div>

                <div class="kpi-toggle-btn d-md-none text-center" id="kpi-toggle-less" style="display:none;"
                    onclick="
                    document.querySelectorAll('.kpi-group').forEach((el,i)=>{ if(i>0) el.style.display='none'; });
                    document.getElementById('kpi-toggle-more').style.display='block';
                    this.style.display='none';
                    ">
                Voir moins
                </div>

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



    {#-- Bouton Filtre --#}
    <div class="d-flex align-items-center flex-wrap gap-2 mb-3">
        <div class="col-12 px-0">
            <div class="d-flex align-items-center gap-2">
            <button class="btn btn-outline-primary btn-sm {% if not is_granted('ROLE_SUPER_ADMIN') %}d-none{% endif %}"
                    type="button"
                    data-bs-toggle="offcanvas"
                    data-bs-target="#filterOffcanvasDocFr"
                    aria-controls="filterOffcanvasDocFr">
                <i class="fa fa-filter me-1"></i> Filtres
            </button>
            <button class="btn btn-outline-dark btn-sm"
                    type="button"
                    onclick="document.querySelector('[data-proxy-id=btnSearchHeader]').click();"
                    title="Actualiser avec les filtres actuels">
                <i class="fa fa-rotate-right me-1"></i> Actualiser
            </button>
            </div>
        </div>
    </div>


    {#-- Panneau Filtre Offcanvas --#}
    <div class="offcanvas offcanvas-start" tabindex="-1" id="filterOffcanvasDocFr"
        aria-labelledby="filterOffcanvasDocFrLabel"
        data-bs-backdrop="false"
        data-bs-scroll="true">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="filterOffcanvasDocFrLabel">
            <i class="fa fa-filter me-2"></i> Filtres
            </h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Fermer"></button>
        </div>

        <div class="offcanvas-body">
            <div class="crm-filter-box {% if not is_granted('ROLE_SUPER_ADMIN') %}d-none{% endif %}">

            {{ form_start(form, { attr: { class: 'm-form m-form--fit m-form--label-align-left' } }) }}

            {% set _route  = app.request.attributes.get('_route') %}
            {% set _params = app.request.attributes.get('_route_params')|default({}) %}

            <div class="d-flex align-items-center mb-4 pb-2 border-bottom">
                <div class="ms-auto d-flex align-items-center" style="gap:.5rem;">
                <button type="button"
                        class="btn btn-sm btn-dark shadow-none"
                        title="Rechercher"
                        onclick="document.querySelector('[data-proxy-id=btnSearchHeader]').click();">
                    <i class="fa fa-search"></i>
                </button>

                <a href="{{ path(_route, _params|merge({'reset':1})) }}"
                    class="btn btn-sm btn-light border shadow-none"
                    title="Réinitialiser">
                    <i class="fa fa-eraser"></i>
                </a>
                </div>
            </div>

                {# ---------- Date de création ---------- #}
                {% set currentDateFilter = app.request.query.get('date') %}
                {% set defaultDate = currentDateFilter is not empty ? currentDateFilter : '30days' %}

                <div class="crm-filter-field">
                    <div class="crm-filter-label"> Date de création</div>
                    <div class="crm-filter-control">
                        {{ form_widget(form.date, {
                        attr:{ id:'filter_document_date', class:'form-control m-input select2', placeholder:'Date' },
                        value: defaultDate
                        }) }}
                    </div>
                </div>


                <div class="crm-filter-field">
                    <div class="crm-filter-label"></div>
                    <div class="crm-filter-control d-flex align-items-center flex-wrap" style="gap:.7rem;">
                    <label class="dateBefore mb-0" style="min-width:30px;display:none;">Du</label>
                    {{ form_widget(form.dateBefore, { attr:{ id:'filter_document_dateBefore', class:'form-control form-control-sm m-input', autocomplete:'off', style:'width:150px;' } }) }}
                    <div class="w-100"></div>
                    <label class="dateAfter mb-0" style="min-width:30px;display:none;">Au</label>
                    {{ form_widget(form.dateAfter, { attr:{ id:'filter_document_dateAfter', class:'form-control form-control-sm m-input', autocomplete:'off', style:'width:150px;' } }) }}
                    </div>
                </div>

                {# ---------- Statut ---------- #}
                <div class="crm-filter-field">
                    <div class="crm-filter-label"> Statut</div>
                    <div class="crm-filter-control">
                    {{ form_widget(form.status, { attr:{ class:'form-control m-input select2', placeholder:'Statut' } }) }}
                    </div>
                </div>

                {# ---------- Fournisseur ---------- #}
                <div class="crm-filter-field">
                    <div class="crm-filter-label"> Fournisseur</div>
                    <div class="crm-filter-control">
                    {{ form_widget(form.supplier, { attr:{ class:'form-control m-input select2', placeholder:'Fournisseur' } }) }}
                    </div>
                </div>

                {# ---------- Créé par ---------- #}
                <div class="crm-filter-field">
                    <div class="crm-filter-label"> Créé par</div>
                    <div class="crm-filter-control">
                    {{ form_widget(form.user, { attr:{ class:'form-control m-input select2', placeholder:'Utilisateur' } }) }}
                    </div>
                </div>

                {# ---------- Transporteur ---------- #}
                <div class="crm-filter-field">
                    <div class="crm-filter-label"> Transporteur</div>
                    <div class="crm-filter-control">
                    {{ form_widget(form.delivery, { attr:{ class:'form-control m-input select2', placeholder:'Transporteur' } }) }}
                    </div>
                </div>

                {# ---------- N° Suivi ---------- #}
                <div class="crm-filter-field">
                    <div class="crm-filter-label"> N° Suivi</div>
                    <div class="crm-filter-control">
                    {{ form_widget(form.parcelTrackingNbr, { attr:{ class:'form-control m-input', placeholder:'N° suivi' } }) }}
                    </div>
                </div>

                {# ---------- Montant (TND) ---------- #}
                <div class="crm-filter-field">
                    <div class="crm-filter-label"> Montant (TND)</div>
                    <div class="crm-filter-control d-flex gap-2">
                    {{ form_widget(form.totalAmountTtcMin, { attr:{ class:'form-control m-input', placeholder:'Min' } }) }}
                    {{ form_widget(form.totalAmountTtcMax, { attr:{ class:'form-control m-input', placeholder:'Max' } }) }}
                    </div>
                </div>

                {# ---------- Référence produit ---------- #}
                <div class="crm-filter-field">
                    <div class="crm-filter-label"> Référence produit</div>
                    <div class="crm-filter-control">
                    {{ form_widget(form.reference,   { attr:{ class:'form-control m-input', placeholder:'Référence' } }) }}
                    {{ form_widget(form.typeElement, { attr:{ class:'form-control m-input d-none' } }) }}

                    <input type="text" id="add_reference_produit" class="form-control m-input mt-2" placeholder="Référence produit">
                    <div class="result-search-reference-produit" style="display:none; min-width:194px;">
                        <ul class="m-menu__subnav padding-5" id="content-result-reference-produit"></ul>
                    </div>
                    </div>
                </div>

                {# hidden persistants #}
                {{ form_widget(form.type,     { attr: { class:'d-none', value: type } }) }}
                {{ form_widget(form.category, { attr: { class:'d-none', value: category } }) }}

                {# actions #}
                <div class="crm-search-actions">
                    {{ form_widget(form.save, {
                    attr:{
                        'data-proxy-id':'btnSearchHeader',
                        class:'btn btn-dark btn-sm rounded-pill px-3 crm-btn-search'
                    },
                    label:'Rechercher'
                    }) }}
                </div>

                {{ form_end(form, { render_rest:false }) }}
                </div>
            </div>
        </div>


        {#--Liste des documents--#}
        <div class="row g-3">
            <div class="col-12">
                <div class="card shadow-sm fade-in">
                    <div class="card-body">
                    <div class="table-responsive">

                        {% set tableId =
                        type == 'achat'
                            ? 'bonachatFournisseurListTable'
                            : (type == 'reception'
                                ? 'bonreceptionFournisseurListTable'
                                : (type == 'facture'
                                    ? 'bonfactureFournisseurListTable'
                                    : 'bonretourFournisseurListTable'
                                )
                            )
                        %}

                        <table id="{{ tableId }}" class="table table-striped table-hover table-bordered w-100">
                        <thead>
                        <tr>
                            <th></th>
                            <th>Numéro</th>
                            <th class="text-center">Statut</th>
                            <th class="text-center">Fournisseur</th>
                            <th class="text-center">Nb.Art</th>
                            <th class="text-center">Mt HT</th>
                            <th class="text-center">TVA</th>
                            <th class="text-center">Frais</th>
                            <th class="text-center">Nb colis</th> {# <- ajout #}
                            <th class="text-center">Mt TTC</th>
                            <th>Créé le</th>
                            <th class="text-center">B.Liv / Réception</th>

                            <th class="text-center">Action</th>
                        </tr>
                        </thead>

                        <tbody></tbody>
                        </table>

                    </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    {{ parent() }}
    <script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
    <script src="{{ asset('build/jquery.sticky.js') }}" type="text/javascript"></script>
    <script type="text/javascript">
        //$(document).ready(function () {
             initSelect2Filters();
        //});

        function initSupplierDocMobileCards() {
            var table = document.querySelector('table[id$="FournisseurListTable"]');
            if (!table) return;

            function normalizeLabel(txt) {
                return String(txt || '')
                    .toLowerCase()
                    .normalize('NFD').replace(/[\u0300-\u036f]/g, '')
                    .replace(/\s+/g, ' ')
                    .trim();
            }

            function findCellByLabel(tds, matchers) {
                return tds.find(function (td) {
                    var lbl = normalizeLabel(td.getAttribute('data-label'));
                    return matchers.some(function (m) { return lbl.indexOf(m) !== -1; });
                }) || null;
            }

            function shortDate(txt) {
                var s = String(txt || '').trim();
                var m = s.match(/(\d{2})\/(\d{2})\/(\d{4})/);
                if (m) return m[1] + '/' + m[2] + '/' + m[3].slice(-2);
                m = s.match(/(\d{4})-(\d{2})-(\d{2})/);
                if (m) return m[3] + '/' + m[2] + '/' + m[1].slice(-2);
                return s;
            }

            function textOfCell(td) {
                return td ? String(td.textContent || '').replace(/\s+/g, ' ').trim() : '';
            }

            function htmlOfCell(td) {
                return td ? String(td.innerHTML || '').trim() : '';
            }

            function applyCards() {
                var isMobile = window.matchMedia('(max-width: 767.98px)').matches;
                var ths = Array.from(table.querySelectorAll('thead th')).map(function (th) {
                    return (th.textContent || '').trim();
                });

                table.querySelectorAll('tbody tr').forEach(function (tr) {
                    if (tr.classList.contains('child')) return;
                    var tds = Array.from(tr.querySelectorAll('td'));
                    if (!tds.length) return;

                    tds.forEach(function (td, idx) {
                        td.setAttribute('data-label', ths[idx] || '');
                    });

                    var checkCell = tds[0] || null;
                    var numCell = findCellByLabel(tds, ['numero']);
                    var statusCell = findCellByLabel(tds, ['statut']);
                    var supplierCell = findCellByLabel(tds, ['fournisseur']);
                    var nbArtCell = findCellByLabel(tds, ['nb.art', 'nb art']);
                    var htCell = findCellByLabel(tds, ['mt ht']);
                    var tvaCell = findCellByLabel(tds, ['tva']);
                    var fraisCell = findCellByLabel(tds, ['frais']);
                    var colisCell = findCellByLabel(tds, ['nb colis']);
                    var ttcCell = findCellByLabel(tds, ['mt ttc']);
                    var createdCell = findCellByLabel(tds, ['cree le', 'created']);
                    var actionsCell = findCellByLabel(tds, ['action']);

                    var host = numCell || tds[1] || tds[0];
                    if (!host) return;

                    tds.forEach(function (td) {
                        if (!td.dataset.origHtml) td.dataset.origHtml = td.innerHTML;
                        td.classList.remove('docfr-mobile-host', 'docfr-mobile-hidden');
                        td.style.removeProperty('display');
                    });

                    if (!isMobile) {
                        tds.forEach(function (td) { td.innerHTML = td.dataset.origHtml || td.innerHTML; });
                        return;
                    }

                    if (host.classList.contains('dataTables_empty') || tr.querySelector('td.dataTables_empty')) return;

                    var checkHtml = htmlOfCell(checkCell);
                    var numHtml = htmlOfCell(numCell) || textOfCell(numCell) || '-';
                    var statusHtml = htmlOfCell(statusCell) || '';
                    var supplierText = textOfCell(supplierCell) || '-';

                    var metaTtc = textOfCell(ttcCell) || '-';
                    var metaArt = textOfCell(nbArtCell) || '0';
                    var metaColis = textOfCell(colisCell) || '0';
                    var metaHt = textOfCell(htCell) || '-';
                    var metaTva = textOfCell(tvaCell) || '-';
                    var metaFrais = textOfCell(fraisCell) || '-';
                    var createdText = shortDate(textOfCell(createdCell) || '-');
                    var actionsHtml = htmlOfCell(actionsCell) || '';

                    host.classList.add('docfr-mobile-host');
                    host.setAttribute('data-label', '');
                    host.innerHTML =
                        '<div class="docfr-card">' +
                            '<div class="docfr-left">' +
                                '<span class="docfr-icon"><i class="fa fa-truck"></i></span>' +
                                (checkHtml ? checkHtml.replace(/class="([^"]*)"/, 'class="$1 docfr-check"') : '') +
                            '</div>' +
                            '<div class="docfr-main">' +
                                '<div class="docfr-top">' +
                                    '<div class="docfr-num">' + numHtml + '</div>' +
                                    '<div class="docfr-status">' + statusHtml + '</div>' +
                                '</div>' +
                                '<div class="docfr-supplier">' + supplierText + '</div>' +
                                '<div class="docfr-meta">' +
                                    '<span class="docfr-chip"><span class="k">TTC:</span> ' + metaTtc + '</span>' +
                                    '<span class="docfr-chip"><span class="k">Art:</span> ' + metaArt + '</span>' +
                                    '<span class="docfr-chip"><span class="k">Colis:</span> ' + metaColis + '</span>' +
                                    '<span class="docfr-chip muted"><span class="k">HT:</span> ' + metaHt + '</span>' +
                                    '<span class="docfr-chip muted"><span class="k">TVA:</span> ' + metaTva + '</span>' +
                                    '<span class="docfr-chip muted"><span class="k">Frais:</span> ' + metaFrais + '</span>' +
                                '</div>' +
                                '<div class="docfr-created">Cree: ' + createdText + '</div>' +
                            '</div>' +
                            '<div class="docfr-actions">' + actionsHtml + '</div>' +
                        '</div>';

                    tds.forEach(function (td) {
                        if (td === host) return;
                        td.classList.add('docfr-mobile-hidden');
                        td.style.setProperty('display', 'none', 'important');
                    });
                });
            }

            applyCards();
            $(document).off('draw.dt.docfrCards', '#' + table.id)
                .on('draw.dt.docfrCards', '#' + table.id, applyCards);
            window.addEventListener('resize', applyCards);
        }

        document.addEventListener('DOMContentLoaded', function () {
            var offcanvasEl = document.getElementById('filterOffcanvasDocFr');
            var proxyBtn = document.querySelector('[data-proxy-id="btnSearchHeader"]');

            function applyFilterOffcanvasTopOffset() {
                if (!offcanvasEl) return;
                var header = document.getElementById('m_header');
                var top = 100;
                if (header) {
                    var rect = header.getBoundingClientRect();
                    top = Math.max(56, Math.ceil(rect.bottom));
                }
                offcanvasEl.style.setProperty('--docfr-offcanvas-top', top + 'px');
            }

            if (offcanvasEl) {
                applyFilterOffcanvasTopOffset();
                window.addEventListener('resize', applyFilterOffcanvasTopOffset);
                window.addEventListener('orientationchange', applyFilterOffcanvasTopOffset);
                offcanvasEl.addEventListener('show.bs.offcanvas', applyFilterOffcanvasTopOffset);

                if (typeof bootstrap !== 'undefined' && bootstrap.Offcanvas) {
                    var STORAGE_KEY = 'crm.documents.fournisseurs.filters.offcanvas';
                    var offcanvas = bootstrap.Offcanvas.getOrCreateInstance(offcanvasEl);

                    offcanvasEl.addEventListener('shown.bs.offcanvas', function () {
                        localStorage.setItem(STORAGE_KEY, 'visible');
                    });

                    offcanvasEl.addEventListener('hidden.bs.offcanvas', function () {
                        localStorage.setItem(STORAGE_KEY, 'hidden');
                    });

                    if (localStorage.getItem(STORAGE_KEY) !== 'hidden') {
                        offcanvas.show();
                    }
                }
            }

            if (proxyBtn && offcanvasEl) {
                proxyBtn.addEventListener('click', function () {
                    // garder ouvert pendant recherche si besoin
                });
            }


            initSupplierDocMobileCards();
        });
    </script>
{% endblock %}