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

{% block stylesheets %}
  {{ parent() }}
  <style>
    .crm-filter-radios{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem 1.25rem;
    align-items:center;
    }

    .crm-radio{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    margin:0;
    cursor:pointer;
    user-select:none;
    }

    .crm-radio input[type="radio"]{
    margin:0;
    transform: translateY(1px);
    }

    /* 2 champs côte à côte (Min/Max) */
    .crm-filter-range{
    display:flex;
    gap:.75rem;
    align-items:center;
    }

    .crm-filter-range > *{
    flex: 1 1 0;
    min-width: 0;
    }

    #filterOffcanvasDec{
    --bs-offcanvas-width: clamp(300px, 32vw, 360px);
    top: 100px;
    height: calc(100vh - 100px);
    z-index: 1015;
    }
    @media (max-width: 991.98px){
    #filterOffcanvasDec{
        --bs-offcanvas-width: min(92vw, 380px);
        top: 0;
        height: 100vh;
    }
    }

    /* =========================
   Chips "Filtres appliqués"
   ========================= */
.applied-filters{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:center;
}
.applied-filters .badge{
  font-weight:500;
  padding:.45rem .65rem;
}
.applied-filters .badge strong{
  font-weight:700;
}

/* =========================
   Offcanvas filtre (Déclinaisons)
   - pas de backdrop noir
   - ne masque pas la table
   - hauteur sous topbar sticky
   ========================= */
#filterOffcanvasDec{
  --bs-offcanvas-width: clamp(300px, 32vw, 360px);
  top: 100px;                 /* ajuste si ta topbar n’est pas 100px */
  height: calc(100vh - 100px);
  z-index: 1015;              /* sous topnav si besoin */
}

@media (max-width: 991.98px){
  #filterOffcanvasDec{
    --bs-offcanvas-width: min(92vw, 380px);
    top: 0;
    height: 100vh;
  }
}

/* Optionnel: un peu plus “pro” dans l’offcanvas */
#filterOffcanvasDec .offcanvas-header{
  border-bottom:1px solid #e9ecef;
}
#filterOffcanvasDec .offcanvas-title{
  font-weight:700;
}

/* Mobile compact cards - declinaisons */
@media (max-width: 767.98px){
  #DeclinaisonProduitTable{ border:0; }
  #DeclinaisonProduitTable thead{ display:none; }
  #DeclinaisonProduitTable 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;
  }
  #DeclinaisonProduitTable tbody td{
    display:none !important;
    border:0 !important;
    padding:0 !important;
  }
  #DeclinaisonProduitTable tbody td.dec-mobile-host{
    display:block !important;
  }

  .dec-card{
    display:grid;
    grid-template-columns:48px minmax(0,1fr) auto;
    gap:.55rem;
    padding:.5rem .55rem;
    align-items:start;
  }
  .dec-thumb{
    width:48px;height:48px;border-radius:10px;overflow:hidden;
    border:1px solid #e7ebf2;background:#f8fafc;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .dec-thumb img{ width:100%;height:100%;object-fit:cover;display:block; }
  .dec-main{ min-width:0; }
  .dec-top{
    display:flex;align-items:flex-start;justify-content:space-between;gap:.4rem;
  }
  .dec-ref{
    font-size:.86rem;font-weight:700;color:#1d4ed8;line-height:1.2;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48vw;
  }
  .dec-badges{ display:flex;gap:.28rem;flex-wrap:wrap; }
  .dec-meta{ margin-top:.24rem;display:flex;gap:.3rem;flex-wrap:wrap; }
  .dec-chip{
    font-size:.69rem;line-height:1;padding:.24rem .42rem;border-radius:999px;
    background:#f1f5f9;color:#1f2937;border:1px solid #e2e8f0;white-space:nowrap;
  }
  .dec-chip .k{ font-weight:700;color:#334155;margin-right:.18rem; }
  .dec-chip.muted{ background:#f8fafc;color:#64748b; }
  .dec-chip.dec-price{
    background:#eef2ff;
    color:#3730a3;
    border-color:#d9defc;
  }
  .dec-badge{
    display:inline-flex;
    align-items:center;
    font-size:.69rem;
    line-height:1;
    padding:.24rem .45rem;
    border-radius:999px;
    border:1px solid transparent;
    white-space:nowrap;
    font-weight:600;
  }
  .dec-badge-stock.ok{
    background:#e6f8f0;
    color:#047857;
    border-color:#bde7d3;
  }
  .dec-badge-stock.pending{
    background:#eef2ff;
    color:#3730a3;
    border-color:#d9defc;
  }
  .dec-badge-stock.danger{
    background:#fef2f2;
    color:#991b1b;
    border-color:#fde0e0;
  }
  .dec-badge-dispo.ok{
    background:#e9f8ef;
    color:#1f7a3a;
    border-color:#c9ebd3;
  }
  .dec-badge-dispo.pending{
    background:#fff7ed;
    color:#9a3412;
    border-color:#fed7aa;
  }
  .dec-badge-dispo.danger{
    background:#fef2f2;
    color:#991b1b;
    border-color:#fde0e0;
  }
  .dec-actions{ display:flex;align-items:flex-start;gap:.2rem; }
  .dec-actions .btn{
    width:28px;height:28px;min-width:28px;padding:0;
    display:inline-flex;align-items:center;justify-content:center;border-radius:8px;
  }
  .dec-actions .dropdown-menu{ min-width:170px; }
}
</style>
{% endblock %}


{% block subheader %}

  <div class="badge-titre d-flex justify-content-between align-items-center flex-wrap w-100 mb-3" style="min-height:3.2rem;">
    <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-boxes"></i>  {# Icône déclinaisons produits #}
      </span>
      <div>
        <h3 class="badge-title-main mb-0" style="font-size:1.19rem;">
          LISTE DES DÉCLINAISONS PRODUITS
        </h3>

      </div>
    </div>
    {# — Zone d’actions à droite si besoin — #}
  </div>

{% endblock %}

{% block breadcrumb %}{% endblock %}
{% block stat %}
    <div  class="flex-right">
        <ul  class="action-nav">
            {#<li  style="display: none;">
                <button  type="button" class="el-button el-button--icon el-button--default">
                    <span><i  class="icon-score"></i></span>
                </button>
            </li>
            <li >
                <div  class="el-dropdown">
                    <button  type="button" class="el-button el-button--default el-dropdown-selfdefine  " aria-haspopup="list" aria-controls="dropdown-menu-8176" role="button" tabindex="0">
                        <span>Actions<i  class="icon-chevron-bottom ms-2 valign-middle fs-2"></i></span>
                    </button>
                </div>
            </li>#}

        </ul>
    </div>
{% endblock %}
{% block bodycontent %}

<div class="row">

    {#--Bouton Filtre + filtres appliqués (déclinaisons) --#}
    <div class="d-flex align-items-center flex-wrap gap-2 mb-3">
        <button class="btn btn-outline-primary btn-sm"
                type="button"
                data-bs-toggle="offcanvas"
                data-bs-target="#filterOffcanvasDec"
                aria-controls="filterOffcanvasDec">
            <i class="fa fa-filter me-1"></i> Filtres
        </button>

        <div id="appliedFiltersDec" class="applied-filters d-flex flex-wrap gap-2 mb-0"></div>
    </div>

    {#-- Liste des déclinaisons (droite) --#}
     <div class="col-12">
        <div class="listingContainer br flex flex-column m-portlet m-portlet--mobile width-100">
            <div class="m-portlet__body px-2 py-2">
                <table id="DeclinaisonProduitTable" class="table table-sm table-striped table-hover w-100">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Photo</th>
                            <th>Réf.</th>
                            <th>Déclinaison 1</th>
                            <th>Déclinaison 2</th>
                            <th>Prix TTC</th>
                            <th>Qt En Stock</th>
                            <th>Qt Dispo</th>
                            <th>Parent</th>
                            <th>Créé le</th>
                            <th>Actions</th>

                        </tr>
                    </thead>
                </table>

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



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


<div class="offcanvas offcanvas-start"
     tabindex="-1"
     id="filterOffcanvasDec"
     aria-labelledby="filterOffcanvasDecLabel"
     data-bs-backdrop="false"
     data-bs-scroll="true">

  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="filterOffcanvasDecLabel">
      <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">

    {# IMPORTANT: on met un ID sur le form pour le JS auto-close #}
    {{ form_start(form, { 'attr' : {
        'class': 'm-form m-form--fit m-form--label-align-left',
        'id': 'docDeclinaisonsFilterForm'
    } }) }}

    {# ---- TON CONTENU FILTRE EXISTANT (copie/colle à l’identique) ---- #}

    <div class="d-flex align-items-center justify-content-between mb-4 pb-2 border-bottom">
      <div class="d-flex align-items-center w-100" style="gap:.5rem;">
        <button type="submit" class="btn btn-sm btn-dark shadow-none" title="Rechercher">
          <i class="fa fa-search"></i>
        </button>

        <a href="{{ path(app.request.attributes.get('_route'), {'reset': 1}) }}"
           class="btn btn-sm btn-light border shadow-none"
           data-bs-toggle="tooltip"
           title="Réinitialiser tous les filtres">
          <i class="fa fa-eraser"></i>
        </a>

        <div class="d-flex align-items-center ms-auto gap-2">
          <label class="form-check form-switch mb-0">
            <input class="form-check-input" type="checkbox" id="filter_remember_dec">
            <span class="form-check-label small ms-1">Enregistrer le filtre</span>
          </label>

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

    {# --- Garde ensuite tous tes champs EXACTEMENT comme ils sont --- #}


    <div class="hide">
        {{ form_widget(form.name, {'attr': {'id': 'filter_produit_name', 'class': 'form-control m-input', 'placeholder':'Nom'}}) }}
    </div>

     {# -- Disponibilité -- #}
      <div class="crm-filter-field">
        <div class="crm-filter-label">Disponibilité</div>

          <div class="crm-filter-control">
              <div class="crm-filter-radios">
                <label class="crm-radio">
                    <input type="radio" name="isAvailable" value=""
                        {% if app.request.query.get('isAvailable') is empty %}checked{% endif %}>
                    <span>Tous</span>
                </label>

                <label class="crm-radio">
                    <input type="radio" name="isAvailable" value="1"
                        {% if app.request.query.get('isAvailable') is empty or app.request.query.get('isAvailable') == '1' %}checked{% endif %}>
                    <span>Oui</span>
                </label>

                <label class="crm-radio">
                    <input type="radio" name="isAvailable" value="0"
                        {% if app.request.query.get('isAvailable') == '0' %}checked{% endif %}>
                    <span>Non</span>
                </label>
              </div>
          </div>
      </div>
      <hr class="crm-separator">

      {#--référence#}
      <div class="crm-filter-field">
          <div class="crm-filter-label">Référence</div>
          <div class="crm-filter-control">
              {{ form_widget(form.reference, { attr: { id:'filter_produit_reference', class:'form-control m-input', placeholder:'Référence', value: app.request.query.get('reference') } }) }}
          </div>
      </div>

         {# -- Déclinaisons visibles pour le filtre, triées par position -- #}
        {% for declination in declinationsFilter %}
        <div class="crm-filter-field">
            <div class="crm-filter-label">{{ declination.name }}</div>
            <div class="crm-filter-control">
            <select class="form-control select2"
                    name="filter_produit_decl_{{ declination.id }}"
                    id="filter_produit_decl_{{ declination.id }}"
                    data-id="{{ declination.id }}">
                <option value="">Aucun</option>
                {% for value in declination.valueDeclinations %}
                <option value="{{ value.id }}">{{ value.name }}</option>
                {% endfor %}
            </select>
            </div>
        </div>
        {% endfor %}

      {# Catégorie #}
      <div class="crm-filter-field">
          <div class="crm-filter-label">Catégorie</div>

          <div class="crm-filter-control">
              {{ form_widget(form.categories, {
                  attr: {
                      id: 'filter_produit_categories',
                      class: 'form-control select2',
                      name: 'filter_produit[categories]'
                  }
              }) }}
          </div>
      </div>

      <div class="d-flex justify-content-center mt-3 mb-3">
        <button type="button"
                class="btn btn-link btn-sm text-decoration-none p-0 d-inline-flex align-items-center gap-2"
                id="toggleDecliAdvancedFilters"
                data-bs-toggle="collapse"
                data-bs-target="#decliAdvancedFilters"
                aria-expanded="false"
                aria-controls="decliAdvancedFilters">
          <i class="fa fa-angle-double-down"></i>
          <span>Voir plus</span>
        </button>
      </div>

      <div id="decliAdvancedFilters" class="collapse">

      <hr class="crm-separator">


      {# En promo #}
      <div class="crm-filter-field">
          <div class="crm-filter-label">En promo</div>
          <div class="crm-filter-control">
              <div class="crm-filter-radios">
              <label class="crm-radio">
                  <input type="radio" name="inPromo" value=""
                      {% if app.request.query.get('inPromo') is empty %}checked{% endif %}>
                  <span>Tous</span>
              </label>

              <label class="crm-radio">
                  <input type="radio" name="inPromo" value="1"
                      {% if app.request.query.get('inPromo') == '1' %}checked{% endif %}>
                  <span>Oui</span>
              </label>

              <label class="crm-radio">
                  <input type="radio" name="inPromo" value="0"
                      {% if app.request.query.get('inPromo') == '0' %}checked{% endif %}>
                  <span>Non</span>
              </label>
              </div>
          </div>
      </div>

      <hr class="crm-separator">


        {# Qté en Stock #}
        <div class="crm-filter-field">
            <div class="crm-filter-label">
                Qté en Stock
                <i class="fa fa-info-circle ms-1 text-muted"
                data-bs-toggle="tooltip"
                title="Filtre sur la quantité disponible (stock réel = Qté totale - Qté réservée)"></i>
            </div>

            <div class="crm-filter-control">
                <div class="crm-filter-range">
                {{ form_widget(form.qtMin, { attr: { id:'filter_produit_qtMin', class:'form-control', placeholder:'Qté Min' } }) }}
                {{ form_widget(form.qtMax, { attr: { id:'filter_produit_qtMax', class:'form-control', placeholder:'Qté Max' } }) }}
                </div>
            </div>
        </div>


        {# Prix Achat #}
        <div class="crm-filter-field {% if is_granted('ROLE_SUPER_ADMIN')==false or "DOCUMENT_SUPPLIER" not in rights %}d-none{% endif %}">
            <div class="crm-filter-label">Prix Achat</div>

            <div class="crm-filter-control">
                <div class="crm-filter-range">
                {{ form_widget(form.buyingPriceMin, { attr: { id:'filter_produit_buyingPriceMin', class:'form-control', placeholder:'Min' } }) }}
                {{ form_widget(form.buyingPriceMax, { attr: { id:'filter_produit_buyingPriceMax', class:'form-control', placeholder:'Max' } }) }}
                </div>
            </div>
        </div>


        {# Prix Vente #}
        <div class="crm-filter-field">
            <div class="crm-filter-label">Prix Vente</div>

            <div class="crm-filter-control">
                <div class="crm-filter-range">
                {{ form_widget(form.priceMin, { attr: { id:'filter_produit_priceMin', class:'form-control', placeholder:'Min' } }) }}
                {{ form_widget(form.priceMax, { attr: { id:'filter_produit_priceMax', class:'form-control', placeholder:'Max' } }) }}
                </div>
            </div>
        </div>

        </div>

        <div class="mb-3 m-form__group px-3 pb-0 pt-2 mt-3">
          {{ form_widget(form.save, {
            'attr': {
              'data-proxy-id': 'btnFiltrerProduitDec',
              'class': 'btn btn-dark btn-block fs-4 rounded-pill crm-btn-search'
            },
            'label': 'Rechercher'
          }) }}
        </div>

        {{ form_errors(form) }}
        {{ form_rest(form) }}
        {{ form_end(form) }}

    </div>
</div>

<div class="modal fade" id="m_modal_ajax" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content" id="modal_content"></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>
/* =========================
 * Déclinaisons - Offcanvas + Chips
 * ========================= */
(function () {
  'use strict';

  /* ---------- Helpers ---------- */
  function debounce(fn, delay) {
    var t = null;
    return function () {
      var ctx = this, args = arguments;
      clearTimeout(t);
      t = setTimeout(function () { fn.apply(ctx, args); }, delay || 250);
    };
  }

  function getSelectText(selector) {
    var el = document.querySelector(selector);
    if (!el) return '';

    var val = el.value;

    // vide / all
    if (val === null || val === '' || val === 'all') return '';

    // multi-select
    if (el.multiple) {
      var selected = Array.from(el.selectedOptions)
        .map(function (o) { return (o.text || '').trim(); })
        .filter(Boolean);
      return selected.length ? selected.join(', ') : '';
    }

    var opt = el.querySelector('option:checked');
    return opt ? (opt.text || '').trim() : String(val);
  }

  function getInputVal(selector) {
    var el = document.querySelector(selector);
    if (!el) return '';
    var v = (el.value || '').toString().trim();
    return (v && v !== 'all') ? v : '';
  }



  /* ---------- 2- Submit filtre: garder l'offcanvas ouvert ---------- */
  function initFilterOffcanvasAutoCloseDeclinaisons() {
    var form = document.getElementById('docDeclinaisonsFilterForm');
    if (!form) return;

    form.addEventListener('submit', function () {
      // Ne pas fermer le panneau filtre sur Entrée / submit.
    });
  }

  function initFilterOffcanvasStateDeclinaisons() {
    var el = document.getElementById('filterOffcanvasDec');
    if (!el || typeof bootstrap === 'undefined' || !bootstrap.Offcanvas) return;

    var STORAGE_KEY = 'crm.declinaisons.filters.offcanvas';
    var offcanvas = bootstrap.Offcanvas.getOrCreateInstance(el);

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

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

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

  /* ---------- 3- Refresh chips sur changements ---------- */
  function initAppliedFiltersLiveUpdate() {
    var form = document.getElementById('docDeclinaisonsFilterForm');
    if (!form) return;



    form.addEventListener('change', function () {
        if (typeof renderAppliedFiltersDec === 'function') renderAppliedFiltersDec();
    });
    form.addEventListener('input', function () {
        if (typeof renderAppliedFiltersDec === 'function') renderAppliedFiltersDec();
    });

  }

  function initDecliAdvancedFiltersToggle() {
    var $advancedFilters = $('#decliAdvancedFilters');
    var $advancedToggle = $('#toggleDecliAdvancedFilters');
    if (!$advancedFilters.length || !$advancedToggle.length) return;

    function syncDecliAdvancedToggle() {
      var opened = $advancedFilters.hasClass('show');
      $advancedToggle.attr('aria-expanded', opened ? 'true' : 'false');
      $advancedToggle.find('i')
        .toggleClass('fa-angle-double-down', !opened)
        .toggleClass('fa-angle-double-up', opened);
      $advancedToggle.find('span').text(opened ? 'Voir moins' : 'Voir plus');
    }

    $advancedFilters.on('shown.bs.collapse hidden.bs.collapse', syncDecliAdvancedToggle);
    syncDecliAdvancedToggle();
  }

  /* ---------- 4- Table -> cards mobile ---------- */
  function initDecliTableMobileCards() {
    var table = document.getElementById('DeclinaisonProduitTable');
    if (!table) return;

    function htmlOfCell(td) { return td ? String(td.innerHTML || '').trim() : ''; }
    function textOfCell(td) { return td ? String(td.textContent || '').replace(/\s+/g, ' ').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] || ''); });
        tds.forEach(function (td) {
          if (!td.dataset.origHtml) td.dataset.origHtml = td.innerHTML;
          td.classList.remove('dec-mobile-host', 'dec-mobile-hidden');
          td.style.removeProperty('display');
        });

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

        if (tr.querySelector('td.dataTables_empty')) return;

        // columns expected
        var photoCell = tds[1] || null;
        var refCell = tds[2] || null;
        var d1Cell = tds[3] || null;
        var d2Cell = tds[4] || null;
        var priceCell = tds[5] || null;
        var qStockCell = tds[6] || null;
        var qDispoCell = tds[7] || null;
        var parentCell = tds[8] || null;
        var createdCell = tds[9] || null;
        var actionsCell = tds[10] || tds[tds.length - 1] || null;

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

        var photoHtml = htmlOfCell(photoCell) || '<i class="fa fa-image text-muted"></i>';
        var refHtml = htmlOfCell(refCell) || textOfCell(refCell) || '-';
        var d1Html = htmlOfCell(d1Cell) || '';
        var d2Html = htmlOfCell(d2Cell) || '';
        var priceTxt = textOfCell(priceCell) || '-';
        var qStockTxt = textOfCell(qStockCell) || '0';
        var qDispoTxt = textOfCell(qDispoCell) || '0';
        var qStockNum = parseInt(String(qStockTxt).replace(/[^\d-]/g, ''), 10);
        var qDispoNum = parseInt(String(qDispoTxt).replace(/[^\d-]/g, ''), 10);
        var stockLevel = 'pending';
        var dispoLevel = 'pending';
        if (!isNaN(qStockNum)) {
          if (qStockNum <= 0) stockLevel = 'danger';
          else if (qStockNum > 3) stockLevel = 'ok';
        }
        if (!isNaN(qDispoNum)) {
          if (qDispoNum <= 0) dispoLevel = 'danger';
          else if (qDispoNum > 3) dispoLevel = 'ok';
        }
        var parentTxt = textOfCell(parentCell) || '-';
        var createdTxt = textOfCell(createdCell) || '-';
        var actionsHtml = htmlOfCell(actionsCell) || '';

        host.classList.add('dec-mobile-host');
        host.setAttribute('data-label', '');
        host.innerHTML =
          '<div class="dec-card">' +
            '<div class="dec-thumb">' + photoHtml + '</div>' +
            '<div class="dec-main">' +
              '<div class="dec-top">' +
                '<div class="dec-ref">' + refHtml + '</div>' +
                '<div class="dec-badges">' + d1Html + d2Html + '</div>' +
              '</div>' +
              '<div class="dec-meta">' +
                '<span class="dec-chip dec-price"><span class="k">Prix:</span> ' + priceTxt + '</span>' +
                '<span class="dec-badge dec-badge-stock ' + stockLevel + '">Stock: ' + qStockTxt + '</span>' +
                '<span class="dec-badge dec-badge-dispo ' + dispoLevel + '">Qté dispo: ' + qDispoTxt + '</span>' +
                '<span class="dec-chip muted"><span class="k">Parent:</span> ' + parentTxt + '</span>' +
                '<span class="dec-chip muted"><span class="k">Cree:</span> ' + createdTxt + '</span>' +
              '</div>' +
            '</div>' +
            '<div class="dec-actions">' + actionsHtml + '</div>' +
          '</div>';

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

    applyCards();
    $(document).off('draw.dt.decCards', '#DeclinaisonProduitTable')
      .on('draw.dt.decCards', '#DeclinaisonProduitTable', applyCards);
    window.addEventListener('resize', applyCards);
  }

  /* ---------- Init ---------- */
  document.addEventListener('DOMContentLoaded', function () {
    if (typeof initSelect2Filters === 'function') initSelect2Filters();

    initFilterOffcanvasAutoCloseDeclinaisons();
    initFilterOffcanvasStateDeclinaisons();
    initAppliedFiltersLiveUpdate();
    initDecliAdvancedFiltersToggle();
    initDecliTableMobileCards();


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