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

{% block stylesheets %}
  {{ parent() }}
  <style>
    .pack-list-shell {
      background: #fff;
      border: 1px solid #eee;
      border-radius: 10px;
    }

    #filterOffcanvasPack {
      --bs-offcanvas-width: clamp(300px, 32vw, 360px);
      top: var(--pack-offcanvas-top, 100px);
      height: calc(100vh - var(--pack-offcanvas-top, 100px));
      z-index: 1030;
    }

    @media (max-width: 991.98px) {
      #filterOffcanvasPack {
        --bs-offcanvas-width: min(78vw, 320px);
      }
    }

    @media (max-width: 767.98px) {
      #packsTable { border: 0; }
      #packsTable thead { display: none; }
      #packsTable 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;
      }
      #packsTable tbody td {
        display: none !important;
        border: 0 !important;
        padding: 0 !important;
      }
      #packsTable tbody td.pack-mobile-host {
        display: block !important;
      }

      .pack-card {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr) auto;
        gap: .55rem;
        padding: .5rem .55rem;
        align-items: start;
      }
      .pack-thumb {
        width: 48px;
        height: 48px;
        border-radius: 10px;
        border: 1px solid #e7ebf2;
        background: #f8fafc;
        overflow: hidden;
      }
      .pack-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .pack-main { min-width: 0; }
      .pack-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: .35rem;
      }
      .pack-ref {
        font-size: .88rem;
        font-weight: 700;
        color: #1d4ed8;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 48vw;
      }
      .pack-name {
        margin-top: .06rem;
        font-size: .82rem;
        color: #0f172a;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .pack-meta {
        margin-top: .28rem;
        display: flex;
        flex-wrap: wrap;
        gap: .3rem;
      }
      .pack-chip {
        font-size: .69rem;
        line-height: 1;
        padding: .24rem .42rem;
        border-radius: 999px;
        background: #f1f5f9;
        color: #1f2937;
        border: 1px solid #e2e8f0;
        white-space: nowrap;
      }
      .pack-chip .k {
        font-weight: 700;
        color: #334155;
        margin-right: .18rem;
      }
      .pack-actions {
        display: flex;
        align-items: flex-start;
      }
      .pack-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;
      }
      .pack-actions .dropdown-menu { min-width: 165px; }
    }
  </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-box"></i>
      </span>
      <div>
        <h3 class="badge-title-main mb-0" style="font-size:1.23rem;">
          LISTE DES PACKS
        </h3>
      </div>
    </div>
    <div class="d-flex align-items-center gap-2 flex-wrap">
      <a href="#" class="btn btn-primary btn-sm rounded-pill px-3 modalAddPack">
        <i class="fa fa-plus me-1"></i> Ajouter un pack
      </a>
    </div>
  </div>
{% endblock %}


{% block bodycontent %}

    <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="#filterOffcanvasPack"
              aria-controls="filterOffcanvasPack">
        <i class="fa fa-filter me-1"></i> Filtres
      </button>

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

    <div class="m-portlet m-portlet--mobile pack-list-shell">
        <div class="tab-content p-3">
            <table id="packsTable" class="table table-striped table-hover table-bordered w-100">
            <thead>
                <tr>
                <th>#</th>
                <th>Image</th>
                <th>Référence</th>
                <th>Nom pack</th>
                <th>Nb articles</th>
                <th>Prix TTC</th>
                <th>Remise</th>
                <th>Prix final</th>
                <th>Site</th>
                <th>Créé le</th>
                <th>Actions</th>
                </tr>
            </thead>
            <tbody></tbody>
            </table>
        </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 class="text-center py-5">
            <div class="spinner-border text-dark" role="status"></div>
            <div class="mt-2">Chargement...</div>
          </div>
        </div>
      </div>
  </div>

  <div class="offcanvas offcanvas-start"
     tabindex="-1"
     id="filterOffcanvasPack"
     aria-labelledby="filterOffcanvasPackLabel"
     data-bs-backdrop="false"
     data-bs-scroll="true">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="filterOffcanvasPackLabel">
      <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 id="packFilterForm" 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="submit" class="btn btn-sm btn-dark shadow-none" title="Rechercher">
              <i class="fa fa-search"></i>
            </button>
            <button type="button" id="btnResetPackFilter" class="btn btn-sm btn-light border shadow-none" title="Réinitialiser tous les filtres">
              <i class="fa fa-eraser"></i>
            </button>
            <span id="packsFilterInfo" class="badge bg-info-subtle text-info-emphasis border d-none ms-auto">
              Liste filtrée (0 filtre)
            </span>
          </div>
        </div>

        <div class="crm-filter-field">
          <div class="crm-filter-label">Référence pack</div>
          <div class="crm-filter-control">
            <input id="filter_pack_reference" class="form-control m-input" placeholder="Référence pack">
          </div>
        </div>

        <div class="crm-filter-field">
          <div class="crm-filter-label">Nom pack</div>
          <div class="crm-filter-control">
            <input id="filter_pack_name" class="form-control m-input" placeholder="Nom pack">
          </div>
        </div>

        <div class="crm-filter-field">
          <div class="crm-filter-label">Prix final</div>
          <div class="crm-filter-control d-flex gap-2">
            <input id="filter_pack_price_min" type="number" step="any" class="form-control m-input" placeholder="Min">
            <input id="filter_pack_price_max" type="number" step="any" class="form-control m-input" placeholder="Max">
          </div>
        </div>

        <div class="crm-filter-field">
          <div class="crm-filter-label">Nb d'articles</div>
          <div class="crm-filter-control d-flex gap-2">
            <input id="filter_pack_items_min" type="number" class="form-control m-input" placeholder="Min">
            <input id="filter_pack_items_max" type="number" class="form-control m-input" placeholder="Max">
          </div>
        </div>

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

        <div class="crm-search-actions">
          <button type="submit" class="btn btn-dark btn-sm rounded-pill px-3 crm-btn-search">Rechercher</button>
        </div>
      </form>
    </div>
  </div>
</div>


{% endblock %}

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

  <script>
    function renderPackMobileCards() {
      if (!window.matchMedia('(max-width: 767.98px)').matches) return;
      if (!$.fn.DataTable.isDataTable('#packsTable')) return;

      var dt = $('#packsTable').DataTable();
      dt.rows({ page: 'current' }).every(function () {
        var d = this.data() || {};
        var $tr = $(this.node());
        var $first = $tr.find('td').eq(0);
        if (!$first.length) return;

        var img = d.image || '/images/galery_placeholder_200.png';
        var ref = d.reference || ('PACK-' + (d.id || ''));
        var price = Number(d.finalPriceTtc || 0).toFixed(3) + ' TND';
        var remise = Number(d.remise || 0).toFixed(2) + '%';
        var nb = Number(d.itemsCount || 0);
        var site = d.showInWebsite
          ? '<span class="pack-chip"><span class="k">Site:</span>Oui</span>'
          : '<span class="pack-chip"><span class="k">Site:</span>Non</span>';

        $first
          .addClass('pack-mobile-host')
          .html(
            '<div class="pack-card">' +
              '<div class="pack-thumb"><img src="' + img + '" alt=""></div>' +
              '<div class="pack-main">' +
                '<div class="pack-top">' +
                  '<div class="pack-ref">' + ref + '</div>' +
                '</div>' +
                '<div class="pack-name">' + (d.name || '') + '</div>' +
                '<div class="pack-meta">' +
                  '<span class="pack-chip"><span class="k">Articles:</span>' + nb + '</span>' +
                  '<span class="pack-chip"><span class="k">Prix:</span>' + price + '</span>' +
                  '<span class="pack-chip"><span class="k">Remise:</span>' + remise + '</span>' +
                  site +
                '</div>' +
              '</div>' +
              '<div class="pack-actions">' +
                '<div class="dropdown">' +
                  '<button class="btn btn-sm btn-light" data-bs-toggle="dropdown"><i class="fas fa-ellipsis-h"></i></button>' +
                  '<div class="dropdown-menu dropdown-menu-end">' +
                    '<a class="dropdown-item" href="' + Routing.generate('pack_show', { id: d.id }) + '" target="_blank"><i class="fas fa-eye me-2"></i>Voir fiche</a>' +
                    '<a class="dropdown-item modalEditPack" href="#" data-url="' + Routing.generate('pack_edit', { id: d.id }) + '"><i class="fas fa-edit me-2"></i>Modifier</a>' +
                    '<a class="dropdown-item archivePack" href="#" data-pack="' + d.id + '"><i class="fas fa-archive text-warning me-2"></i>Archiver</a>' +
                  '</div>' +
                '</div>' +
              '</div>' +
            '</div>'
          );
      });
    }

    function bindPackFilterOffcanvasOffset() {
      var offcanvasEl = document.getElementById('filterOffcanvasPack');
      if (!offcanvasEl) return;

      var topnav = document.querySelector('.m-topbar, .topbar, .topnav, .m-header');
      var applyOffset = function () {
        var top = 92;
        if (topnav) {
          var r = topnav.getBoundingClientRect();
          top = Math.max(70, Math.round(r.bottom + 8));
        }
        offcanvasEl.style.setProperty('--pack-offcanvas-top', top + 'px');
      };

      applyOffset();
      window.addEventListener('resize', applyOffset, { passive: true });
      window.addEventListener('scroll', applyOffset, { passive: true });
      offcanvasEl.addEventListener('show.bs.offcanvas', applyOffset);
    }

    document.addEventListener('DOMContentLoaded', function () {
      bindPackFilterOffcanvasOffset();

      $(document).on('draw.dt', function (e, settings) {
        if (!settings || settings.nTable.id !== 'packsTable') return;
        renderPackMobileCards();
      });
      renderPackMobileCards();

      $(document).on('submit', '#packFilterForm', function () {
        // Garder le panneau filtre ouvert apres validation (Enter / submit).
      });
    });

    $(document).on('click', 'a.modalAddPack', function (e) {
      e.preventDefault();
      $('#m_modal_ajax').modal('show');
      $('#modal_content').load('{{ path('pack_new') }}', function () {
        $('.select2').select2({ width: '100%' });
      });
    });

    $(document).on('click', 'a.modalEditPack', function (e) {
      e.preventDefault();
      var url = $(this).data('url');
      $('#m_modal_ajax').modal('show');
      $('#modal_content').load(url, function () {
        $('.select2').select2({ width: '100%' });
      });
    });

    $(document).on('click', '.archivePack', function (e) {
        e.preventDefault();
        var idPack = $(this).data('pack');

        var motifs = {
            'Arrêt de commercialisation': 'Arrêt de commercialisation',
            'Pack obsolète': 'Pack obsolète',
            'Remplacé par un nouveau pack': 'Remplacé par un nouveau pack',
            'Vente très faible': 'Vente très faible',
            'Autre': 'Autre'
        };

        Swal.fire({
            title: 'Êtes-vous sûr ?',
            html: "d'archiver ce pack&nbsp;!",
            icon: 'warning',
            input: 'select',
            inputOptions: motifs,
            inputPlaceholder: "Choisir un motif d'archivage (obligatoire)",
            showCancelButton: true,
            confirmButtonText: 'Oui, archiver !',
            cancelButtonText: 'Non, annuler !',
            inputValidator: (value) => !value ? "Merci de choisir un motif d'archivage." : null
        }).then(function (result) {
            if (!result.isConfirmed) return;

            $.ajax({
            type: 'DELETE',
            url: Routing.generate('pack_delete', { id: idPack }),
            data: { reason: result.value },
            dataType: 'json',
            success: function (res) {
                if (res && res.status === 'success') {
                Swal.fire('Succès !', res.message || 'Pack archivé.', 'success')
                    .then(function () { window.location.reload(); });
                } else {
                Swal.fire('Erreur !', (res && (res.message || res.error)) || 'Archivage impossible.', 'error');
                }
            },
            error: function (xhr) {
                var msg = (xhr.responseJSON && (xhr.responseJSON.message || xhr.responseJSON.error))
                ? (xhr.responseJSON.message || xhr.responseJSON.error)
                : 'Erreur technique.';
                Swal.fire('Erreur !', msg, 'error');
            }
            });
        });
        });

  </script>
{% endblock %}