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

{% block stylesheets %}
  {{ parent() }}
<style>
    /* ===== Spécifique : Page Promotions ===== */

    .promotions-page .filter-card { /* applique le style carte générique */
    /* si tu utilises <div class="card card--crm"> inutile de répéter ici */
    }

    .promotions-toolbar { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
    .promotions-toolbar .counter { font-size:.85rem; color:#6b7280; }

    /* Datatable de la page */
    #promotionsTable.datatable-container { /* hérite de la hauteur min via .datatable-container si ajoutée */
    /* ici tu peux surcharger si nécessaire */
    }

    /* Badges propres aux promotions (mappés sur les génériques) */
    .badge-prom        { composes: status-badge; } /* si PostCSS; sinon duplique la classe suivante */
    .badge-prom { padding:0.35rem .6rem; font-weight:600; font-size:.78rem; border-radius:8px; border:1px solid transparent; }
    .badge-prom--active   { background:#e6f8f0; color:#047857; border-color:#bbecd9; }   /* map → status-badge--ok */
    .badge-prom--upcoming { background:#eef2ff; color:#3730a3; border-color:#d9defc; }   /* map → status-badge--pending */
    .badge-prom--expired  { background:#fef2f2; color:#991b1b; border-color:#fde0e0; }   /* map → status-badge--danger */

    /* à‰tat vide / skeleton de cette page uniquement */
    #promotionsSkeleton .skeleton { height:42px; margin-bottom:.5rem; }
    #promotionsEmpty { display:none; }

    /* Ajustements fins propres à  cette vue */
    .promotions-page .date-range .col-6 .form-control { height:40px; }

    /* Bloc nom/code dans la cellule */
  .promo-name-wrap {
    display:flex; flex-direction:column; max-width: 280px;
  }
  .promo-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .promo-code-line { margin-top: .15rem; font-size: .75rem; }

 #promoModalMeta .fa { opacity:.75; }

#promotionProductsModal .modal-body { max-height: 70vh; overflow: auto; }
.promo-imgbox {
  height:50px; width:50px; border:1px solid #c2c2c2; border-radius:.5rem;
  display:inline-flex; align-items:center; justify-content:center; background:#fff; overflow:hidden;
}
.promo-imgbox img { width:100%; height:100%; object-fit:cover; display:block; }
.promo-ref { margin-left:.5rem; }

/* Switch promo — OFF (rouge) */
.form-switch .form-check-input:not(:checked) {
    background-color: #f25e6d;
    border-color: #f25e6d;
}

/* Switch promo — ON (vert) */
.form-switch .form-check-input:checked {
    background-color: #3a9c6e;
    border-color: #3a9c6e;
}

/* Curseur */
.form-switch .form-check-input::before {
    background-color: #fff;
}

/* 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 Promotions */
  #filterOffcanvasPromo{
    --bs-offcanvas-width: clamp(300px, 32vw, 360px);
    top: 100px;                 /* ajuste selon ta topbar sticky */
    height: calc(100vh - 100px);
    z-index: 1015;
  }
  @media (max-width: 991.98px){
    #filterOffcanvasPromo{
      --bs-offcanvas-width: min(92vw, 380px);
      top: 0;
      height: 100vh;
    }
  }
  #filterOffcanvasPromo .offcanvas-header{ border-bottom:1px solid #e9ecef; }
  #filterOffcanvasPromo .offcanvas-title{ font-weight:700; }

    @media (max-width: 991.98px){
    #promotionsTable{ border:0; background:transparent; }
    #promotionsTable thead{ display:none; }
    #promotionsTable tbody tr{
      display:block;
      margin:0 0 .7rem;
      border:0;
      background:transparent;
      box-shadow:none;
    }
    #promotionsTable tbody tr.promo-mobile-ready td{
      display:none !important;
      border:0 !important;
      padding:0 !important;
      background:transparent !important;
    }
    #promotionsTable tbody tr.promo-mobile-ready td.promo-mobile-host{
      display:block !important;
    }

    .promo-m-card{
      border:1px solid #e5eaf1;
      border-left:4px solid #4f46e5;
      border-radius:14px;
      background:#fff;
      box-shadow:0 5px 14px rgba(15,23,42,.08);
      padding:.65rem .65rem .55rem;
    }
    .promo-m-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:.55rem;
    }
    .promo-m-left{
      display:flex;
      gap:.55rem;
      min-width:0;
      align-items:flex-start;
      flex:1;
    }
    .promo-m-icon{
      width:40px;
      height:40px;
      border-radius:11px;
      border:1px solid #e8edf6;
      background:#f8fafc;
      color:#475569;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:15px;
      flex:0 0 40px;
    }
    .promo-m-title-wrap{ min-width:0; }
    .promo-m-name{
      font-size:.9rem;
      font-weight:700;
      color:#0f172a;
      line-height:1.22;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .promo-m-code{
      margin-top:.12rem;
      font-size:.75rem;
      color:#64748b;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .promo-m-right{
      display:flex;
      align-items:center;
      gap:.35rem;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    .promo-m-meta{
      margin-top:.45rem;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:.35rem .5rem;
    }
    .promo-m-box{
      background:#f8fafc;
      border:1px solid #e6ebf3;
      border-radius:10px;
      padding:.33rem .42rem;
      min-width:0;
    }
    .promo-m-k{
      display:block;
      font-size:.65rem;
      text-transform:uppercase;
      color:#64748b;
      letter-spacing:.02em;
      margin-bottom:.07rem;
      font-weight:700;
    }
    .promo-m-v{
      display:block;
      font-size:.76rem;
      color:#0f172a;
      line-height:1.2;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .promo-m-foot{
      margin-top:.48rem;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:.45rem;
      border-top:1px dashed #e4e9f0;
      padding-top:.45rem;
    }
    .promo-m-target{
      flex:1;
      min-width:0;
      font-size:.72rem;
      color:#334155;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .promo-m-actions{
      display:flex;
      align-items:center;
      gap:.25rem;
      flex-wrap:nowrap;
    }
    .promo-m-actions .btn{
      width:30px;
      height:30px;
      min-width:30px;
      padding:0;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:8px;
    }
  }
</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-gift"></i> {# Icône promotion #}
      </span>
      <div>
        <h3 class="badge-title-main mb-0" style="font-size:1.19rem;">
          LISTE DES PROMOTIONS
        </h3>

      </div>
    </div>
    <div class="d-flex align-items-center gap-2">
      {% if "PRODUIT_CREATE" in rights %}
        <a href="javascript:void(0);" class="btn btn-success btn-sm modalNewPromotion rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#m_modal_promotion">
          <i class="fa fa-plus-circle me-1"></i> Ajouter une promotion
        </a>
      {% else %}
        <a class="btn btn-secondary btn-sm rounded-pill px-3 disabled" href="javascript:;" data-bs-toggle="tooltip"
           title="Accès réservé — contactez l’administrateur">
          <i class="fa fa-plus-circle me-1"></i> Ajouter une promotion
        </a>
      {% endif %}
    </div>
  </div>
{% endblock %}

{% block breadcrumb %}{% endblock %}

{% block stat %}{% endblock %}

{% block bodycontent %}
<section class="promotions-page">
  <div class="row">
    <div class="col-12">
      <div class="contentMargin">
        <div id="legacy-container">
          <div class="row d-flex flex-wrap">

           {# Bouton + filtres appliqués #}
            <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="#filterOffcanvasPromo"
                      aria-controls="filterOffcanvasPromo">
                <i class="fa fa-filter me-1"></i> Filtres
              </button>

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


            {# --- Résultats --- #}
            <div class="col-12">
              <div class="card h-100 shadow-sm results-card">


                <div class="card-body px-2 py-2">
                  <table id="promotionsTable" class="table table-striped table-hover w-100">
                    <thead>
                    <tr>
                        <th>Actif</th>
                        <th>à‰tat/Type</th>
                        <th>Nom</th>
                        <th>Type</th>
                        <th>Valeur</th>
                        <th>Créée</th>
                        <th>Période</th>
                        <th>Expire dans</th>
                        <th>Quantités</th>
                        <th>Nb.Ar</th>
                        <th>Cible</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                </table>

                    {# à‰tat vide / skeleton pendant chargement #}

                    <div id="promotionsEmpty" class="text-center py-5" style="display:none;">
                      <i class="fa fa-search" style="font-size:2rem;"></i>
                      <p class="mt-2 mb-0 text-muted">Aucune promotion trouvée.</p>
                      <small class="text-muted">Ajuste tes filtres ou ajoute une nouvelle promotion.</small>
                    </div>
                    {# La datatable JS remplacera ce contenu #}
                  </div>
                </div>
              </div>
            </div>

          </div> {# row #}
        </div>
      </div>
    </div>
  </div>
</section>


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

      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="filterOffcanvasPromoLabel">
          <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">
        {{ form_start(form, { attr: {
          class: 'm-form m-form--fit m-form--label-align-left',
          autocomplete: 'off',
          id: 'promoFilterForm'
        } }) }}

                  <div class="card card--crm p-3 h-100 shadow-sm filter-card">

                    {{ form_start(form, { attr: { class: 'm-form m-form--fit m-form--label-align-left', autocomplete: 'off' } }) }}
                    {# Type de promotion #}
                    <div class="mb-3">
                        <label class="crm-label">
                            <i class="fa fa-tags"></i> Type de promotion
                        </label>
                        {{ form_widget(form.promotionType, {
                            attr: { class: 'form-control m-input' }
                        }) }}
                    </div>

                    {# Statut de la promotion #}
                    <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;">
                          <i class="fa fa-toggle-on me-2"></i> Statut
                        </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="filter_promotion_isEnabled" value="" checked>
                            Tous
                            <span></span>
                          </label>

                          <label class="m-radio m-radio--solid m-radio--success mb-0">
                            <input type="radio" name="filter_promotion_isEnabled" value="1">
                            Actives
                            <span></span>
                          </label>

                          <label class="m-radio m-radio--solid m-radio--danger mb-0">
                            <input type="radio" name="filter_promotion_isEnabled" value="0">
                            Inactives
                            <span></span>
                          </label>
                        </div>
                    </div>

                    {# Nom #}
                    <div class="mb-3">
                        <label for="form_name" class="crm-label">Nom</label>
                        <div class="input-icon">
                        <i class="fa fa-tag"></i>
                        {{ form_widget(form.name, {
                            attr: { class: 'form-control m-input', placeholder: 'Nom de la promotion' }
                        }) }}
                        </div>
                    </div>

                    {# Date de début #}
                    <div class="mb-3 date-range">
                        <label class="crm-label"><i class="fa fa-calendar"></i> Date de début</label>
                        <div class="row g-2">
                        <div class="col-6">
                            {{ form_widget(form.dateStartBefore, {
                            attr: { class: 'form-control m-input', placeholder: 'Du' }
                            }) }}
                        </div>
                        <div class="col-6">
                            {{ form_widget(form.dateStartAfter, {
                            attr: { class: 'form-control m-input', placeholder: 'Au' }
                            }) }}
                        </div>
                        </div>
                    </div>

                    {# Date de fin #}
                    <div class="mb-3 date-range">
                        <label class="crm-label"><i class="fa fa-calendar-check-o"></i> Date de fin</label>
                        <div class="row g-2">
                        <div class="col-6">
                            {{ form_widget(form.dateEndBefore, {
                            attr: { class: 'form-control m-input', placeholder: 'Du' }
                            }) }}
                        </div>
                        <div class="col-6">
                            {{ form_widget(form.dateEndAfter, {
                            attr: { class: 'form-control m-input', placeholder: 'Au' }
                            }) }}
                        </div>
                        </div>
                    </div>

                    {# Code promotion #}
                    <div class="mb-3">
                        <label class="crm-label"><i class="fa fa-barcode"></i> Code promotion</label>
                        <div class="input-icon">
                        <i class="fa fa-barcode"></i>
                        {{ form_widget(form.code, { attr: { class: 'form-control m-input', placeholder: 'Code' } }) }}
                        </div>
                    </div>

                    {# Type de réduction #}
                    <div class="mb-3">
                        <label class="crm-label"><i class="fa fa-exchange"></i> Type de réduction</label>
                        {{ form_widget(form.discountType, { attr: { class: 'form-control m-input' } }) }}
                        <small class="crm-help">Choisir entre montant (TND) ou pourcentage.</small>
                    </div>

                    {# Valeur #}
                    <div class="mb-3">
                        <label class="crm-label"><i class="fa fa-percent"></i> Valeur</label>
                        <div class="row g-2">
                        <div class="col-6">
                            {{ form_widget(form.discountValueMin, { attr: { class: 'form-control m-input', placeholder: 'Min' } }) }}
                        </div>
                        <div class="col-6">
                            {{ form_widget(form.discountValueMax, { attr: { class: 'form-control m-input', placeholder: 'Max' } }) }}
                        </div>
                        </div>
                    </div>

                    {# Quantité totale #}
                    <div class="mb-3">
                        <label class="crm-label"><i class="fa fa-cubes"></i> Quantité totale</label>
                        <div class="row g-2">
                        <div class="col-6">
                            {{ form_widget(form.totalQuantityMin, { attr: { class: 'form-control m-input', placeholder: 'Min' } }) }}
                        </div>
                        <div class="col-6">
                            {{ form_widget(form.totalQuantityMax, { attr: { class: 'form-control m-input', placeholder: 'Max' } }) }}
                        </div>
                        </div>
                    </div>

                    {# Quantité par utilisateur #}
                    <div class="mb-3">
                        <label class="crm-label"><i class="fa fa-user-plus"></i> Qté par utilisateur</label>
                        <div class="row g-2">
                        <div class="col-6">
                            {{ form_widget(form.quntityUserMin, { attr: { class: 'form-control m-input', placeholder: 'Min' } }) }}
                        </div>
                        <div class="col-6">
                            {{ form_widget(form.quntityUserMax, { attr: { class: 'form-control m-input', placeholder: 'Max' } }) }}
                        </div>
                        </div>
                    </div>

                    {# Actions #}
                    <div class="d-flex justify-content-center gap-2 mt-4">
                        <a href="{{ path('promotion_index') }}" class="btn btn-light px-4">
                            Réinitialiser
                        </a>
                        {{ form_widget(form.save, {
                            attr: { class: 'btn btn-dark px-4' },
                            label: 'Rechercher'
                        }) }}
                    </div>


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

                    {{ form_end(form) }}

                </div>
        {{ form_end(form) }}
      </div>
  </div>
{# fenêtre modale : liste produits d'une promotion #}
<div class="modal fade" id="promotionProductsModal" tabindex="-1" role="dialog" aria-hidden="true" aria-labelledby="promotionProductsTitle">
  <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title d-flex flex-column" id="promotionProductsTitle">
          <span><i class="fa fa-list-alt me-2"></i> Produits de la promotion</span>
          <small class="text-muted" id="promoModalSubtitle"></small>
        </h5>
        <button type="button" class="bs-close" data-bs-dismiss="modal" aria-label="Fermer">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body p-0">
        <div class="table-responsive">
          <table class="table table-sm mb-0">
            <thead class="thead-light">
              <tr>
                <th style="width:260px;">Réf.</th>
                <th>Nom</th>
                <th class="text-end" style="width:260px;">Prix</th>
              </tr>
            </thead>
            <tbody id="promoProductsBody">
              <tr><td colspan="3" class="text-center py-4">Chargement…</td></tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="modal-footer">
        <button class="btn btn-light btn-pill" data-bs-dismiss="modal" type="button">Fermer</button>
      </div>
    </div>
  </div>
</div>

{# fenêtre modale : liste des clients d'une promotion #}
<div class="modal fade" id="promotionClientsModal"
     tabindex="-1"
     role="dialog"
     aria-hidden="true"
     aria-labelledby="promotionClientsTitle">

  <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable" role="document">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title d-flex flex-column" id="promotionClientsTitle">
          <span>
            <i class="fa fa-users me-2"></i>
            Clients ayant utilisé la promotion
          </span>
          <small class="text-muted" id="promoClientsModalSubtitle"></small>
        </h5>

        <button type="button"
                class="bs-close"
                data-bs-dismiss="modal"
                aria-label="Fermer">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body p-0">
        <div class="table-responsive">
          <table class="table table-sm mb-0">
            <thead class="thead-light">
              <tr>
                <th style="width:220px;">Client</th>
                <th>Email</th>
                <th style="width:160px;" class="text-center">Téléphone</th>
                <th style="width:120px;" class="text-center">Utilisations</th>
              </tr>
            </thead>

            <tbody id="promoClientsBody">
              <tr>
                <td colspan="4" class="text-center py-4">
                  Chargement…
                </td>
              </tr>
            </tbody>

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

      <div class="modal-footer">
        <button class="btn btn-light btn-pill"
                data-bs-dismiss="modal"
                type="button">
          Fermer
        </button>
      </div>

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




{% endblock %}


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

<script>
/**
 * Promotions — Helpers UI (BS5)
 * - Auto-close offcanvas filtre au submit
 * - Badge statut (active/upcoming/expired)
 * - CSRF token pour toggle
 */
(function () {
  'use strict';

  /* ===========================================
   * Offcanvas auto-close (Promotions)
   * =========================================== */
  function initFilterOffcanvasAutoClosePromo() {
    var el = document.getElementById('filterOffcanvasPromo');
    if (!el) return;

    var form = document.getElementById('promoFilterForm');
    if (!form) return;

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

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

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

  /* ===========================================
   * Badge statut (dans render DataTable)
   * =========================================== */
  window.renderStatusBadgePromo = function (row) {
    // row.status: 'active' | 'upcoming' | 'expired'
    var map = {
      active:   'badge-prom badge-prom--active',
      upcoming: 'badge-prom badge-prom--upcoming',
      expired:  'badge-prom badge-prom--expired'
    };
    var label = {
      active:   'Active',
      upcoming: 'à venir',
      expired:  'Expirée'
    };
    var cls = map[row.status] || 'badge-prom';
    var txt = label[row.status] || row.status;
    return '<span class="' + cls + '">' + txt + '</span>';
  };

  function initPromotionsMobileCards() {
    var table = document.getElementById('promotionsTable');
    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 esc(s) {
      return String(s || '')
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');
    }

    function applyCards() {
      var isMobile = window.matchMedia('(max-width: 991.98px)').matches;
      var rows = table.querySelectorAll('tbody tr');

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

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

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

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

        var activeCell = tds[0] || null;
        var stateTypeCell = tds[1] || null;
        var nameCell = tds[2] || null;
        var discountTypeCell = tds[3] || null;
        var valueCell = tds[4] || null;
        var createdCell = tds[5] || null;
        var periodCell = tds[6] || null;
        var expiresCell = tds[7] || null;
        var qtyCell = tds[8] || null;
        var countCell = tds[9] || null;
        var targetCell = tds[10] || null;
        var actionsCell = tds[11] || tds[tds.length - 1] || null;

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

        var activeHtml = htmlOfCell(activeCell) || '';
        var stateTypeHtml = htmlOfCell(stateTypeCell) || '';
        var nameText = textOfCell(nameCell) || '-';
        var nameHtml = htmlOfCell(nameCell) || '';
        var codeHtml = '';
        var m = nameHtml.match(/<div class=\"small text-muted\">([\s\S]*?)<\/div>/i);
        if (m && m[1]) {
          codeHtml = m[1].replace(/<i[^>]*><\/i>/gi, '').trim();
        }
        var discountTypeHtml = htmlOfCell(discountTypeCell) || esc(textOfCell(discountTypeCell) || '-');
        var valueHtml = htmlOfCell(valueCell) || esc(textOfCell(valueCell) || '-');
        var periodHtml = esc(textOfCell(periodCell) || '-');
        var expiresHtml = esc(textOfCell(expiresCell) || '-');
        var qtyHtml = esc(textOfCell(qtyCell) || '-');
        var countHtml = esc(textOfCell(countCell) || '-');
        var createdHtml = esc(textOfCell(createdCell) || '-');
        var targetText = textOfCell(targetCell) || '-';
        var actionsHtml = htmlOfCell(actionsCell) || '';

        host.classList.add('promo-mobile-host');
        host.setAttribute('data-label', '');
        host.innerHTML =
          '<div class="promo-m-card">' +
            '<div class="promo-m-head">' +
              '<div class="promo-m-left">' +
                '<span class="promo-m-icon"><i class="fa fa-gift"></i></span>' +
                '<div class="promo-m-title-wrap">' +
                  '<div class="promo-m-name">' + esc(nameText) + '</div>' +
                  '<div class="promo-m-code">' + (codeHtml || '-') + '</div>' +
                '</div>' +
              '</div>' +
              '<div class="promo-m-right">' +
                activeHtml +
                stateTypeHtml +
              '</div>' +
            '</div>' +
            '<div class="promo-m-meta">' +
              '<div class="promo-m-box"><span class="promo-m-k">Valeur</span><span class="promo-m-v">' + valueHtml + '</span></div>' +
              '<div class="promo-m-box"><span class="promo-m-k">Type</span><span class="promo-m-v">' + discountTypeHtml + '</span></div>' +
              '<div class="promo-m-box"><span class="promo-m-k">Periode</span><span class="promo-m-v">' + periodHtml + '</span></div>' +
              '<div class="promo-m-box"><span class="promo-m-k">Expire</span><span class="promo-m-v">' + expiresHtml + '</span></div>' +
              '<div class="promo-m-box"><span class="promo-m-k">Quantites</span><span class="promo-m-v">' + qtyHtml + '</span></div>' +
              '<div class="promo-m-box"><span class="promo-m-k">Nb Ar.</span><span class="promo-m-v">' + countHtml + '</span></div>' +
              '<div class="promo-m-box"><span class="promo-m-k">Créée</span><span class="promo-m-v">' + createdHtml + '</span></div>' +
            '</div>' +
            '<div class="promo-m-foot">' +
              '<div class="promo-m-target">' + esc(targetText) + '</div>' +
              '<div class="promo-m-actions">' + actionsHtml + '</div>' +
            '</div>' +
          '</div>';

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

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

  /* ===========================================
   * Init
   * =========================================== */
  document.addEventListener('DOMContentLoaded', function () {
    initFilterOffcanvasAutoClosePromo();
    initFilterOffcanvasStatePromo();
    initPromotionsMobileCards();

    // CSRF token pour toggle promo (AJAX)
    window.PROMO_TOGGLE_TOKEN = '{{ csrf_token("toggle_promotion") }}';
  });
})();
</script>
{% endblock %}