{# ================= CONTENT: Documents lies au pack (style produit) ================= #}

<style>
  #content_documents_pack .panel {
    background: #fff;
    border: 1px solid #e6ecf2;
    border-radius: 12px;
    overflow: hidden;
  }
  #content_documents_pack .crm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-bottom: 1px solid #eef2f7;
    background: #fff;
  }
  #content_documents_pack .crm-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  #content_documents_pack .crm-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
  }
  #content_documents_pack .crm-subtitle {
    font-size: .8rem;
    color: #64748b;
    margin: 0;
  }
  #content_documents_pack .crm-badge {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef2ff;
    color: #1d4ed8;
    font-size: .9rem;
  }
  #content_documents_pack .kpi-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  #content_documents_pack .kpi {
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #f8fafc;
    padding: .25rem .6rem;
    font-size: .78rem;
    color: #334155;
    white-space: nowrap;
  }
  #content_documents_pack .panel-body {
    padding: 12px;
    background: #f8fafc;
  }
  #content_documents_pack .toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
  }
  #content_documents_pack .toolbar-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid #e8edf3;
    border-radius: 10px;
    background: #fff;
  }
  #content_documents_pack .group-title {
    font-size: .76rem;
    font-weight: 700;
    color: #475569;
    margin-right: 4px;
    padding: 0 4px;
  }
  #content_documents_pack .btn-document {
    position: relative;
    overflow: visible;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #d7deea;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    font-size: .8rem;
    line-height: 1.2;
    padding: .4rem .55rem;
    transition: .15s ease;
  }
  #content_documents_pack .btn-document .doc-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: .7rem;
    line-height: 18px;
    text-align: center;
    font-weight: 700;
    border: 1px solid #fff;
    background: rgba(255,193,7,.9);
    color: #7a4f00;
    z-index: 2;
  }
  #content_documents_pack .btn-document.active .doc-badge {
    background: #fff;
    color: #1d4ed8;
  }
  #content_documents_pack .btn-document .doc-badge.doc-badge--zero {
    background: #adb5bd;
    color: #fff;
  }
  #content_documents_pack .btn-document:hover {
    border-color: #bfcde0;
    background: #f8fafc;
  }
  #content_documents_pack .btn-document.active {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
  }
  #content_documents_pack .filters-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr auto;
    gap: 8px;
    margin-bottom: 10px;
  }
  #content_documents_pack .hint {
    font-size: .82rem;
    color: #64748b;
    background: #fff;
    border: 1px dashed #d9e1ec;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
  }
  #content_documents_pack .crm-table {
    border: 1px solid #e6ecf2;
    border-radius: 10px;
    background: #fff;
    padding: 10px;
  }
  #documentsListTablePack thead th {
    font-size: .75rem;
    text-transform: uppercase;
    color: #64748b;
    background: #f8fafc;
    white-space: nowrap;
  }
  @media (max-width: 991.98px) {
    #content_documents_pack .filters-row {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (max-width: 767.98px) {
    #content_documents_pack .filters-row {
      grid-template-columns: 1fr;
    }
  }
</style>

{% set _nbrCommande = docCounts.commande|default(0) %}
{% set _nbrFacture = docCounts.facture|default(0) %}
{% set _nbrAvoir = docCounts.avoir|default(0) %}
{% set _nbrEchange = docCounts.echange|default(0) %}
{% set _docsTotal = _nbrCommande + _nbrFacture + _nbrAvoir + _nbrEchange %}

<div id="content_documents_pack">
  <div class="panel">
    <div class="crm-header">
      <div class="crm-header-left">
        <span class="crm-badge"><i class="fas fa-folder-open"></i></span>
        <div>
          <h4>Documents lies au pack</h4>
          <p class="crm-subtitle">Suivi des documents client rattaches au pack</p>
        </div>
      </div>

      <div class="kpi-wrap">
        <span class="kpi">Total docs: <strong>{{ _docsTotal }}</strong></span>
        <span class="kpi">CA TTC: <strong>{{ stats.ca_total_ttc|default(0)|number_format(3,'.',',') }} TND</strong></span>
      </div>
    </div>

    <div class="panel-body">
      <div class="toolbar" role="group" aria-label="Filtre types de documents">
        <div class="toolbar-group">
          <span class="group-title">Client</span>

          <button type="button" class="btn btn-sm btn-document active" data-type="commande">
            <i class="fas fa-shopping-basket"></i> Bons de commande
            <span class="doc-badge {{ _nbrCommande == 0 ? 'doc-badge--zero' : '' }}">{{ _nbrCommande }}</span>
          </button>

          <button type="button" class="btn btn-sm btn-document" data-type="facture">
            <i class="fas fa-file-invoice"></i> Factures
            <span class="doc-badge {{ _nbrFacture == 0 ? 'doc-badge--zero' : '' }}">{{ _nbrFacture }}</span>
          </button>

          <button type="button" class="btn btn-sm btn-document" data-type="avoir">
            <i class="fas fa-file-invoice-dollar"></i> Avoirs
            <span class="doc-badge {{ _nbrAvoir == 0 ? 'doc-badge--zero' : '' }}">{{ _nbrAvoir }}</span>
          </button>

          <button type="button" class="btn btn-sm btn-document" data-type="echange">
            <i class="fas fa-exchange-alt"></i> Bons d'echange
            <span class="doc-badge {{ _nbrEchange == 0 ? 'doc-badge--zero' : '' }}">{{ _nbrEchange }}</span>
          </button>
        </div>
      </div>

      <div class="filters-row">
        <input type="text" id="packDocSearchInput" class="form-control form-control-sm" placeholder="Recherche (numero, client, statut)">
        <select id="packDocStatus" class="form-control form-select form-select-sm">
          <option value="">Tous les statuts</option>
          {% set statuses = [] %}
          {% for d in documents %}
            {% if d.status not in statuses %}
              {% set statuses = statuses|merge([d.status]) %}
            {% endif %}
          {% endfor %}
          {% for s in statuses %}
            <option value="{{ s }}">{{ s }}</option>
          {% endfor %}
        </select>
        <input type="date" id="packDocDateFrom" class="form-control form-control-sm" placeholder="Date du">
        <input type="date" id="packDocDateTo" class="form-control form-control-sm" placeholder="Date au">
        <button type="button" id="packDocFilterReset" class="btn btn-sm btn-light border">Initialiser</button>
      </div>

      <p class="hint">
        <i class="fa fa-info-circle me-1"></i>
        Cet onglet affiche uniquement les documents <strong>client</strong> lies au pack (pas de documents fournisseur).
      </p>

      <div class="crm-table">
        <div class="table-responsive">
          <table id="documentsListTablePack" class="table table-sm table-hover align-middle mb-0">
            <thead>
              <tr>
                <th>Numero</th>
                <th>Type</th>
                <th>Statut</th>
                <th>Client</th>
                <th class="text-end">Mt TTC</th>
                <th>Date</th>
              </tr>
            </thead>
            <tbody>
              {% for d in documents %}
                <tr
                  data-type="{{ d.type|default('')|lower }}"
                  data-status="{{ d.status|default('')|lower }}"
                  data-date="{{ d.createdAt ? d.createdAt|date('Y-m-d') : '' }}"
                  data-search="{{ (d.internalNbr|default('') ~ ' ' ~ d.type|default('') ~ ' ' ~ d.status|default('') ~ ' ' ~ (d.client ? d.client.firstName ~ ' ' ~ d.client.lastName : ''))|lower }}"
                >
                  <td><a href="{{ path('document_show', { id: d.id }) }}" target="_blank">{{ d.internalNbr }}</a></td>
                  <td>{{ d.type }}</td>
                  <td>{{ d.status }}</td>
                  <td>{{ d.client ? d.client.firstName ~ ' ' ~ d.client.lastName : '-' }}</td>
                  <td class="text-end">{{ (d.totalAmountTtc ?? 0)|number_format(3, '.', ' ') }}</td>
                  <td>{{ d.createdAt ? d.createdAt|date('d/m/Y H:i') : '-' }}</td>
                </tr>
              {% else %}
                <tr class="pack-docs-empty">
                  <td colspan="6" class="text-center text-muted">Aucun document client lie a ce pack.</td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>

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

<script>
  (function () {
    var root = document.getElementById('content_documents_pack');
    if (!root) return;

    var searchInput = document.getElementById('packDocSearchInput');
    var statusInput = document.getElementById('packDocStatus');
    var dateFromInput = document.getElementById('packDocDateFrom');
    var dateToInput = document.getElementById('packDocDateTo');
    var resetBtn = document.getElementById('packDocFilterReset');
    var rows = Array.from(root.querySelectorAll('#documentsListTablePack tbody tr')).filter(function (r) {
      return !r.classList.contains('pack-docs-empty');
    });
    var typeButtons = Array.from(root.querySelectorAll('.btn-document'));
    var currentType = 'commande';

    function applyFilters() {
      var q = (searchInput && searchInput.value ? searchInput.value : '').trim().toLowerCase();
      var st = (statusInput && statusInput.value ? statusInput.value : '').trim().toLowerCase();
      var d1 = dateFromInput && dateFromInput.value ? dateFromInput.value : '';
      var d2 = dateToInput && dateToInput.value ? dateToInput.value : '';

      rows.forEach(function (row) {
        var rowType = (row.getAttribute('data-type') || '').trim();
        var rowStatus = (row.getAttribute('data-status') || '').trim();
        var rowDate = row.getAttribute('data-date') || '';
        var rowSearch = row.getAttribute('data-search') || '';

        var okType = !currentType || rowType === currentType;
        var okSearch = !q || rowSearch.indexOf(q) !== -1;
        var okStatus = !st || rowStatus === st;
        var okFrom = !d1 || (rowDate && rowDate >= d1);
        var okTo = !d2 || (rowDate && rowDate <= d2);

        row.style.display = (okType && okSearch && okStatus && okFrom && okTo) ? '' : 'none';
      });
    }

    typeButtons.forEach(function (btn) {
      btn.addEventListener('click', function () {
        typeButtons.forEach(function (b) { b.classList.remove('active'); });
        btn.classList.add('active');
        currentType = (btn.getAttribute('data-type') || '').trim().toLowerCase();
        applyFilters();
      });
    });

    [searchInput, statusInput, dateFromInput, dateToInput].forEach(function (el) {
      if (!el) return;
      el.addEventListener('input', applyFilters);
      el.addEventListener('change', applyFilters);
    });

    if (resetBtn) {
      resetBtn.addEventListener('click', function () {
        if (searchInput) searchInput.value = '';
        if (statusInput) statusInput.value = '';
        if (dateFromInput) dateFromInput.value = '';
        if (dateToInput) dateToInput.value = '';
        currentType = 'commande';
        typeButtons.forEach(function (b) {
          b.classList.toggle('active', (b.getAttribute('data-type') || '').toLowerCase() === 'commande');
        });
        applyFilters();
      });
    }

    applyFilters();
  })();
</script>