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

  {% block stylesheets %}
  {{ parent() }}
   <link rel="stylesheet" href="{{ asset('css/admin/list_produits.css') }}">


{% 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-box-open"></i> {# Icône produit #}
      </span>
      <div>
        <h3 class="badge-title-main mb-0" style="font-size:1.23rem;">
          LISTE DES PRODUITS
        </h3>

      </div>
    </div>
    <div class="d-flex align-items-center gap-2 flex-wrap">
      {% if "PRODUIT_CREATE" in rights %}
        <a class="btn btn-primary btn-sm rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#m_modal_produit">
          <i class="fa fa-plus me-1"></i> Ajouter un produit
        </a>
      {% endif %}
    </div>
  </div>
{% endblock %}

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

 {% endblock %}
{% block bodycontent %}

<div class="row">

  {#--Bouton Filtre + filtres appliqués (produits) --#}
  <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="#filterOffcanvasProduit"
            aria-controls="filterOffcanvasProduit">
      <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 id="appliedFiltersProduit" class="applied-filters d-flex flex-wrap gap-2 mb-0"></div>
  </div>



    {#--Liste des produits--#}
    <div class="col-12">


        <div class="m-portlet m-portlet--mobile" style="background:#fff;border:1px solid #eee;border-radius:10px;">


           <div class="d-flex align-items-center justify-content-between px-3 pt-3 gap-2 flex-wrap">
            <div class="btn-group btn-group-sm" id="viewToggle">
              <button type="button" class="btn btn-dark" data-view="list" title="Vue liste">
                <i class="fa fa-list"></i>
              </button>
              <button type="button" class="btn btn-outline-dark" data-view="grid" title="Vue grille">
                <i class="fa fa-th-large"></i>
              </button>
            </div>

          </div>

          {# Vue Grille (nouvelle) #}
          <div id="pane-grille" class="d-none">
            <div id="produitsGridPagerTop" class="mb-3 text-center"></div>
            <div id="produitsGrid" class="grid-row"></div>
            <div id="produitsGridPager" class="mt-3 text-center"></div>
          </div>




            <div class="tab-content p-3" id="produitsViewContent">
                {# Vue Liste (existante) #}
                <div class="tab-pane fade show active" id="pane-liste" role="tabpanel" aria-labelledby="tab-liste">
                    <!-- TABLE: Produits -->
                    <table id="produitsTable" class="table table-striped table-hover table-bordered w-100">
                        <thead>
                            <tr>
                                <th class="dt-col-checkbox">#</th>
                                <th class="text-center" style="width:40px;"></th>
                                <th class="dt-col-image">Photo</th>
                                <th>Réf</th>
                                <th>Nom produit</th>
                                {% if is_granted('ROLE_SUPER_ADMIN') %}
                                    <th>Prix Achat</th>
                                {% endif %}
                                <th>Prix TTC</th>
                                <th>Stock</th>
                                <th>Statut</th>
                                {% if is_granted('ROLE_SUPER_ADMIN') %}
                                    <th>Fournisseur</th>
                                {% endif %}
                                <th>Créé le</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>

                </div>

            </div>
        </div>

    </div>


</div>

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

 {#-- Colonne filtre --#}
    <div class="offcanvas offcanvas-start"
        tabindex="-1"
        id="filterOffcanvasProduit"
        aria-labelledby="filterOffcanvasProduitLabel"
        data-bs-backdrop="false"
        data-bs-scroll="true">

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


            {{ form_start(form, { attr: { id: 'docProduitsFilterForm', class: 'm-form m-form--fit m-form--label-align-left' } }) }}
            <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="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(app.request.attributes.get('_route'), {'reset': 1}) }}" class="btn btn-sm btn-light border shadow-none" data-bs-toggle="tooltip" data-placement="left" title="Réinitialiser tous les filtres">
                      <i class="fa fa-eraser"></i>
                  </a>

                  <span id="produitsFilterInfo" class="badge bg-info-subtle text-info-emphasis border d-none ms-auto">
                    Liste filtrée (0 filtre)
                  </span>

              </div>

            </div>

               {# — Référence — #}
            <div class="crm-filter-field">
                <div class="crm-filter-label">
                   Référence
                    <i class="fa fa-info-circle ms-1 text-muted"
                    data-bs-toggle="tooltip" data-html="true"
                    title="Filtres avancés :<br>- ref : égal à ref<br>- ref* : commence par ref<br>- *ref : se termine par ref<br>- *ref* : contient ref"></i>
                </div>
                <div class="crm-filter-control">
                    {{ form_widget(form.reference, { attr: {
                    class: 'form-control m-input', placeholder:'Référence', value: app.request.query.get('reference')
                    }}) }}
                </div>
            </div>

             {# — Disponibilité — #}
            <div class="crm-filter-field align-items-center mb-2" style="gap:1.3rem;">
                <div class="crm-filter-label d-flex align-items-center" style="min-width:150px;">
                Disponibilité
                </div>
                <div class="crm-filter-control d-flex align-items-center flex-wrap" style="gap:0.7rem;">
                  <label class="m-radio m-radio--solid m-radio--primary mb-0">
                    <input type="radio" name="isAvailable" value="" {% if app.request.query.get('isAvailable') is empty %}checked{% endif %}> Tous<span></span>
                  </label>
                  <label class="m-radio m-radio--solid m-radio--primary mb-0">
                    <input type="radio" name="isAvailable" value="1" {% if app.request.query.get('isAvailable') == '1' %}checked{% endif %}> Oui<span></span>
                  </label>
                  <label class="m-radio m-radio--solid m-radio--primary mb-0">
                    <input type="radio" name="isAvailable" value="0" {% if app.request.query.get('isAvailable') == '0' %}checked{% endif %}> Non<span></span>
                  </label>
                </div>
            </div>


          <hr class="crm-separator">
          {# — En promo — #}
          <div class="crm-filter-fieldalign-items-center mb-2" style="gap:1.3rem;">
            <div class="crm-filter-label d-flex align-items-center" style="min-width:150px;">
             En promo
            </div>
            <div class="crm-filter-control d-flex align-items-center flex-wrap" style="gap:0.7rem;">
              <label class="m-radio m-radio--solid m-radio--primary mb-0">
                <input type="radio" name="inPromo" value="" {% if app.request.query.get('inPromo') is empty %}checked{% endif %}> Tous<span></span>
              </label>
              <label class="m-radio m-radio--solid m-radio--primary mb-0">
                <input type="radio" name="inPromo" value="1" {% if app.request.query.get('inPromo') == '1' %}checked{% endif %}> Oui<span></span>
              </label>
              <label class="m-radio m-radio--solid m-radio--primary mb-0">
                <input type="radio" name="inPromo" value="0" {% if app.request.query.get('inPromo') == '0' %}checked{% endif %}> Non<span></span>
              </label>
            </div>
          </div>

          <hr class="crm-separator">
            {# — Produits archivés — #}
            <div class="crm-filter-field align-items-center mb-2" style="gap:1.3rem;">
              <div class="crm-filter-label d-flex align-items-center">
                Produits archivés
              </div>
              <div class="d-flex align-items-center flex-wrap" style="gap:0.7rem;">
                <label class="m-radio m-radio--solid m-radio--primary mb-0">
                  <input type="radio" name="filter_archived" value="0" checked> Non<span></span>
                </label>
                <label class="m-radio m-radio--solid m-radio--primary mb-0">
                  <input type="radio" name="filter_archived" value="1"> Oui<span></span>
                </label>
              </div>
            </div>
           <hr class="crm-separator">
            {# — Nom produit — #}
            <div class="crm-filter-field">
                <div class="crm-filter-label">
                    Nom Produit
                    <i class="fa fa-info-circle ms-1 text-muted" data-bs-toggle="tooltip" title="Le nom contient"></i>
                </div>
                <div class="crm-filter-control">
                    {{ form_widget(form.name, { attr: { class:'form-control m-input', placeholder:'Nom' } }) }}
                </div>
            </div>

            {# — 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: { class:'form-control m-input select2', placeholder:'Catégorie' }, value: app.request.query.get('category')|trim }) }}
                </div>
            </div>




            {# — Fournisseur — #}
            <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">Fournisseur</div>
                <div class="crm-filter-control">
                    {{ form_widget(form.supplier, { attr: { class:'form-control m-input select2' } }) }}
                </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="toggleProduitAdvancedFilters"
                      data-bs-toggle="collapse"
                      data-bs-target="#produitAdvancedFilters"
                      aria-expanded="false"
                      aria-controls="produitAdvancedFilters">
                <i class="fa fa-angle-double-down"></i>
                <span>Voir plus</span>
              </button>
            </div>

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

             {# — Date de création — #}
              <div class="crm-filter-field">
                  <div class="crm-filter-label">Date de création</div>
                  <select id="filtre_produit_date" class="form-control form-control-sm">
                    <option value="">Aucun</option>
                    <option value="today">Aujourd'hui</option>
                    <option value="yesterday">Hier</option>
                    <option value="3days">3 derniers jours</option>
                    <option value="thisWeek">7 derniers jours</option>
                    <option value="thisMonth">Ce mois</option>
                    <option value="thisYear">Cette année</option>
                    <option value="from">À partir de</option>
                    <option value="before">Avant le</option>
                    <option value="between">Entre 2 dates</option>
                  </select>
              </div>

              {# — Dates (même logique que documents) — #}
              <div class="mb-3 m-form__group px-3 pb-0 pt-2">
                <div class="d-flex align-items-center flex-wrap gap-2">
                  {{ form_widget(form.dateDebut, { attr: { id: 'filter_produit_dateDebut',   class: 'datetimepicker-width form-control form-control-sm m-input', autocomplete: 'off', style: 'width:145px;display:none;', title: 'Date de début' }
                  }) }}

                  {{ form_widget(form.dateFin, { attr: { id: 'filter_produit_dateFin',  class: 'datetimepicker-width form-control form-control-sm m-input', autocomplete: 'off',  style: 'width:145px;display:none;', title: 'Date de fin' }
                  }) }}


                </div>
              </div>
              {# — 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 d-flex gap-2">
                      {{ form_widget(form.qtMin, { attr: { class:'form-control m-input', placeholder:'Qté min' } }) }}
                      {{ form_widget(form.qtMax, { attr: { class:'form-control m-input', placeholder:'Qté max' } }) }}
                  </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 d-flex gap-2">
                    {{ form_widget(form.buyingPriceMin, { attr: { class:'form-control m-input', placeholder:'Min' } }) }}
                    {{ form_widget(form.buyingPriceMax, { attr: { class:'form-control m-input', placeholder:'Max' } }) }}
                </div>
            </div>

            {# — Prix vente — #}
            <div class="crm-filter-field">
                <div class="crm-filter-label">Prix vente</div>
                <div class="crm-filter-control d-flex gap-2">
                    {{ form_widget(form.priceMin, { attr: { class:'form-control m-input', placeholder:'Min' } }) }}
                    {{ form_widget(form.priceMax, { attr: { class:'form-control m-input', placeholder:'Max' } }) }}
                </div>
            </div>



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

           {# — Actions (bas) — #}
            </div>
          <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_errors(form) }}
            {{ form_rest(form) }}
            {{ form_end(form) }}

        </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>
$(function () {
  /* =========================
   * 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 isGridVisible() {
    return !$('#pane-grille').hasClass('d-none');
  }

  function getActiveView() {
    return isGridVisible() ? 'grid' : 'list';
  }

  function renderList() {
    if (typeof window.produitsDatatable === 'function') window.produitsDatatable();
  }

  function renderGrid(resetPage) {
    if (resetPage) window.produitsGridPage = 1;
    if (typeof window.produitsGrid === 'function') window.produitsGrid();
  }

  function renderActiveView(resetGridPage) {
    var view = getActiveView();

    if (view === 'grid') {
      renderGrid(!!resetGridPage);
    } else {
      renderList();
    }

    // chips (si la fonction existe déjà)
    if (typeof window.renderAppliedFiltersProduit === 'function') {
      window.renderAppliedFiltersProduit();
    }
  }

  function initProduitsTableMobileCards() {
    var table = document.getElementById('produitsTable');
    if (!table) return;
    if (window.__produitsCardsInitDone) return;
    window.__produitsCardsInitDone = true;

    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 extractPromoBadgeText(priceHtml) {
      if (!priceHtml) return '';
      var m = String(priceHtml).match(/<span[^>]*class="[^"]*badge[^"]*"[^>]*>(.*?)<\/span>/i);
      if (!m || !m[1]) return '';
      return String(m[1]).replace(/<[^>]*>/g, '').replace(/\s+/g, ' ').trim();
    }

    function extractOldPrice(priceHtml) {
      if (!priceHtml) return '';
      var m = String(priceHtml).match(/<del[^>]*>(.*?)<\/del>/i);
      if (!m || !m[1]) return '';
      return String(m[1]).replace(/<[^>]*>/g, '').replace(/\s+/g, ' ').trim();
    }

    function extractFinalPrice(priceHtml, fallbackText) {
      var html = String(priceHtml || '');
      // cherche le dernier bloc avec TND
      var matches = html.match(/>([^<>]*TND[^<>]*)</gi);
      if (matches && matches.length) {
        var last = matches[matches.length - 1].replace(/[<>]/g, '').replace(/\s+/g, ' ').trim();
        if (last) return last;
      }
      return fallbackText || '—';
    }

    function applyLabelsAndCards() {
      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 chkCell = tds.find(function (td) { return td.classList.contains('dt-col-checkbox'); }) || findCellByLabel(tds, ['#']);
        var imgCell = tds.find(function (td) { return td.classList.contains('dt-col-image'); }) || findCellByLabel(tds, ['photo']);
        var refCell = findCellByLabel(tds, ['ref']);
        var nameCell = findCellByLabel(tds, ['nom produit']);
        var priceTtcCell = findCellByLabel(tds, ['prix ttc']);
        var stockCell = findCellByLabel(tds, ['stock']);
        var statusCell = findCellByLabel(tds, ['statut']);
        var buyingCell = findCellByLabel(tds, ['prix achat']);
        var supplierCell = findCellByLabel(tds, ['fournisseur']);
        var createdCell = findCellByLabel(tds, ['cree le', 'created']);
        var actionsCell = findCellByLabel(tds, ['actions']);

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

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

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

        // Ligne vide DataTables
        if (host.classList.contains('dataTables_empty') || tr.querySelector('td.dataTables_empty')) return;

        var imgHtml = htmlOfCell(imgCell) || '<span class="text-muted small">—</span>';
        var chkHtml = htmlOfCell(chkCell);
        var nameTxt = textOfCell(nameCell) || 'Produit';
        var refTxt = textOfCell(refCell) || '—';
        var statusHtml = htmlOfCell(statusCell) || '';
        var priceHtml = htmlOfCell(priceTtcCell);
        var priceTxt = textOfCell(priceTtcCell) || '—';
        var oldPriceTxt = extractOldPrice(priceHtml);
        var finalPriceTxt = extractFinalPrice(priceHtml, priceTxt);
        var stockTxt = textOfCell(stockCell) || '0';
        var buyingTxt = textOfCell(buyingCell) || '';
        var createdTxt = shortDate(textOfCell(createdCell) || '—');
        var promoTxt = extractPromoBadgeText(priceHtml);

        var stockNum = parseInt(String(stockTxt).replace(/[^\d-]/g, ''), 10);
        var stockBadgeClass = 'status-badge--pending';
        if (!isNaN(stockNum)) {
          if (stockNum <= 0) stockBadgeClass = 'status-badge--danger';
          else if (stockNum > 3) stockBadgeClass = 'status-badge--ok';
        }

        var secondChip = '';
        if (buyingTxt) {
          secondChip = '<span class="chip muted" title="Prix achat"><span class="k">Achat:</span> ' + buyingTxt + '</span>';
        } else {
          secondChip = '<span class="chip muted"><span class="k">Créé:</span> ' + createdTxt + '</span>';
        }

        var actionsHtml = htmlOfCell(actionsCell) || '';

        var venteHtml = oldPriceTxt
          ? ('<span class="prd-price-old">' + oldPriceTxt + '</span><span class="prd-price-new">' + finalPriceTxt + '</span>')
          : ('<span class="prd-price-new">' + finalPriceTxt + '</span>');

        host.classList.add('prod-mobile-host');
        host.setAttribute('data-label', '');
        host.innerHTML =
          '<div class="prd-card">' +
            '<div class="prd-left">' +
              '<div class="prd-thumb">' +
                imgHtml +
                (chkHtml ? chkHtml.replace(/class="([^"]*)"/, 'class="$1 prd-check"') : '') +
              '</div>' +
            '</div>' +
            '<div class="prd-main">' +
              '<div class="prd-top">' +
                '<div class="prd-name" title="' + nameTxt.replace(/"/g, '&quot;') + '">' + nameTxt + '</div>' +
                '<div class="prd-sub">' +
                  '<span class="prd-ref">' + refTxt + '</span>' +
                  '<span class="prd-status">' + statusHtml + '</span>' +
                '</div>' +
              '</div>' +
              '<div class="prd-price-row">' +
                '<span class="chip"><span class="k">Vente:</span> ' + venteHtml + '</span>' +
                secondChip +
              '</div>' +
              '<div class="prd-meta">' +
                '<span class="prd-badge prd-badge-stock ' + stockBadgeClass + '">Stock: ' + stockTxt + '</span>' +
                (promoTxt ? ('<span class="prd-badge prd-badge-remise">Remise: ' + promoTxt + '</span>') : '') +
              '</div>' +
            '</div>' +
            '<div class="prd-actions">' + actionsHtml + '</div>' +
          '</div>';

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

    applyLabelsAndCards();
    $(document).off('draw.dt.produitsCards', '#produitsTable')
      .on('draw.dt.produitsCards', '#produitsTable', applyLabelsAndCards);
    window.addEventListener('resize', applyLabelsAndCards);
  }

  /* =========================
   * Offcanvas auto-close (Produit)
   * ========================= */
  function initFilterOffcanvasAutoCloseProduit() {
    var form = document.getElementById('docProduitsFilterForm');
    if (!form) return;

    form.addEventListener('submit', function () {
      // Garder le panneau filtre ouvert apres validation (Enter / submit).
    });
  }

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

    var STORAGE_KEY = 'crm.produits.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();
    }
  }

  /* =========================
   * Vue (List/Grid) + restore
   * ========================= */
  function applySavedView() {
    var saved = localStorage.getItem('lastProductView');
    if (saved === 'grid') {
      $('#pane-liste').addClass('d-none');
      $('#pane-grille').removeClass('d-none');
      window.produitsGridPage = window.produitsGridPage || 1;
    } else {
      $('#pane-grille').addClass('d-none');
      $('#pane-liste').removeClass('d-none');
    }
  }

  applySavedView();

  // Rendu initial
  renderActiveView(false);
  initProduitsTableMobileCards();

  // Changement vue via boutons
  $(document).off('click.listProduitView', '#viewToggle [data-view]')
    .on('click.listProduitView', '#viewToggle [data-view]', function () {
      var selected = ($(this).data('view') === 'grid') ? 'grid' : 'list';

      if (selected === 'grid') {
        $('#pane-liste').addClass('d-none');
        $('#pane-grille').removeClass('d-none');
        window.produitsGridPage = window.produitsGridPage || 1;
        renderGrid(false);
      } else {
        $('#pane-grille').addClass('d-none');
        $('#pane-liste').removeClass('d-none');
        renderList();
      }

      localStorage.setItem('lastProductView', selected);

      if (typeof window.renderAppliedFiltersProduit === 'function') {
        window.renderAppliedFiltersProduit();
      }
    });

  // Pagination grille
  $(document).off('click.listProduitGridPager', '.grid-page')
    .on('click.listProduitGridPager', '.grid-page', function (e) {
      e.preventDefault();
      window.produitsGridPage = parseInt($(this).data('page'), 10) || 1;
      renderGrid(false);

      if (typeof window.renderAppliedFiltersProduit === 'function') {
        window.renderAppliedFiltersProduit();
      }
    });

  /* =========================
   * Filtres (Offcanvas) -> refresh vue active
   * ========================= */
  var onFiltersChanged = debounce(function () {
    renderActiveView(true);
  }, 250);

  // IMPORTANT: on écoute le FORM offcanvas (plus #filter-panel-produit)
  $('#docProduitsFilterForm').off('.sync')
    .on('input.sync change.sync', 'input,select,textarea', onFiltersChanged);

  // Bouton Rechercher (proxy) => refresh + fermeture offcanvas via submit si c’est un submit
  var $advancedFilters = $('#produitAdvancedFilters');
  var $advancedToggle = $('#toggleProduitAdvancedFilters');

  function syncProduitAdvancedToggle() {
    if (!$advancedFilters.length || !$advancedToggle.length) return;
    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', syncProduitAdvancedToggle);
  syncProduitAdvancedToggle();

  $(document).off('click.listProduitSearch', '[data-proxy-id="btnSearchHeader"]')
    .on('click.listProduitSearch', '[data-proxy-id="btnSearchHeader"]', function (e) {
      // Si ton bouton proxy déclenche un submit, laisse faire.
      // Sinon on force juste le refresh.
      e.preventDefault();
      renderActiveView(true);
    });

  /* =========================
   * Init
   * ========================= */
  initFilterOffcanvasAutoCloseProduit();
  initFilterOffcanvasStateProduit();
});
</script>


{% endblock %}