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

{% block stylesheets %}
    {{ parent() }}
<style>
    @media (max-width: 768px) {
        .leftpane {
            position: fixed;
            top: 0;
            left: -100%;
            width: 80%;
            height: 100vh;
            background: #fff;
            z-index: 1050;
            overflow-y: auto;
            transition: left 0.3s ease-in-out;
            padding: 1rem;
        }

        .leftpane.show {
            left: 0;
        }


    }

    /* CSS — largeur identique, texte noir, transparence contrôlée */
.badge-fixed{
    min-width:110px;
    text-align:center;
    font-weight:400;
    color:#212529; /* texte toujours noir */
}
.crm-badge-fixed {
    min-width: 100px;
    text-align: center;
    font-weight: 400;
    white-space: nowrap;
}

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

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

    .sup-card {
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr) auto;
      gap: .55rem;
      padding: .5rem .55rem;
      align-items: start;
    }
    .sup-left { position: relative; }
    .sup-logo {
      width: 46px; height: 46px; border-radius: 10px;
      border: 1px solid #e7ebf2; background: #f8fafc;
      display: inline-flex; align-items: center; justify-content: center;
      overflow: hidden;
    }
    .sup-logo img {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }
    .sup-check {
      position: absolute; top: -2px; left: -2px;
      width: 14px; height: 14px; margin: 0; accent-color: #2f6fd6;
    }
    .sup-main { min-width: 0; }
    .sup-top {
      display: flex; align-items: flex-start; justify-content: space-between; gap: .4rem;
    }
    .sup-name {
      font-size: .88rem; font-weight: 700; color: #111827; line-height: 1.2;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48vw;
    }
    .sup-state { flex: 0 0 auto; }
    .sup-contact, .sup-address {
      margin-top: .06rem; font-size: .75rem; color: #64748b; line-height: 1.2;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .sup-stats, .sup-meta {
      margin-top: .24rem; display: flex; flex-wrap: wrap; gap: .3rem;
    }
    .sup-chip {
      font-size: .69rem; line-height: 1; padding: .24rem .42rem; border-radius: 999px;
      background: #f1f5f9; color: #1f2937; border: 1px solid #e2e8f0; white-space: nowrap;
    }
    .sup-chip .k { font-weight: 700; color: #334155; margin-right: .18rem; }
    .sup-chip.muted { background: #f8fafc; color: #64748b; }
    .sup-actions { display: flex; align-items: flex-start; gap: .2rem; }
    .sup-actions .btn {
      width: 28px; height: 28px; min-width: 28px; padding: 0;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 8px;
    }
    .sup-actions .dropdown-menu { min-width: 180px; }
  }

</style>
{% endblock %}

{% block extra_scripts %}
    <script src="{{ asset('js/admin/user-functions.js') }}"></script>
{% 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-industry"></i>
    </span>
    <div>
      <h3 class="badge-title-main mb-0" style="font-size:1.23rem;">
        LISTE DES FOURNISSEURS
      </h3>
    </div>
  </div>

  <div class="d-flex align-items-center gap-2 flex-wrap">
    <a href="javascript:void(0);"
       class="btn btn-primary btn-sm rounded-pill px-3 modalNewSupplier"
       data-bs-toggle="modal"
       data-bs-target="#m_modal_supplier">
      <i class="fa fa-plus me-1"></i> Ajouter un fournisseur
    </a>
  </div>
</div>
{% endblock %}



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

{% block bodycontent %}

    <div class="container-fluid py-3">


        {# ➤ Bouton affichage filtre en mobile #}
       <button class="btn btn-outline-primary btn-sm"
                type="button"
                data-bs-toggle="offcanvas"
                data-bs-target="#filterOffcanvasSuppliers"
                aria-controls="filterOffcanvasSuppliers">
        <i class="fa fa-filter me-1"></i> Filtres
        </button>

        <div class="row">

            {# ➤ Zone de résultats utilisateurs #}
            <div class=" col-12">
                <div class="card shadow-sm border-0">
                    <div class="table-responsive card-body p-3">
                        <table id="suppliersTable" class="table table-striped table-hover align-middle w-100">
                            <thead>
                            <tr>
                                <th class="text-center" style="width:34px"><input type="checkbox" id="supplier-check-all"></th>
                                <th class="text-center" style="width:70px">Logo</th>
                                <th class="text-center" style="width:34px">État</th>
                                <th>Nom</th>
                                <th>Tél. / Email</th>
                                <th>Adresse</th>
                                <th class="text-center">Réceptions</th>
                                <th class="text-center">Factures</th>
                                <th class="text-center">Total Achat</th>
                                <th class="text-center">Dernière réception</th>
                                <th class="text-center">Créé le</th>
                                <th class="text-center" style="width:120px">Actions</th>
                            </tr>
                            </thead>
                        </table>


                    </div>

                </div>
             </div>


        </div>
    </div>

    <div class="offcanvas offcanvas-start"
            tabindex="-1"
            id="filterOffcanvasSuppliers"
            aria-labelledby="filterOffcanvasSuppliersLabel"
            data-bs-backdrop="false"
            data-bs-scroll="true">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="filterOffcanvasSuppliersLabel">
            <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 bg-white border rounded p-3">
            {{ form_start(form, { attr: { id: 'suppliersFilterForm', class: 'm-form m-form--fit' } }) }}

            {% set _route  = app.request.attributes.get('_route') %}
            {% set _params = app.request.attributes.get('_route_params')|default({}) %}

            <div class="d-flex align-items-center mb-4 pb-2 border-bottom">
                <div class="ms-auto d-flex align-items-center" 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(_route, _params|merge({'reset':1})) }}"
                    class="btn btn-sm btn-light border shadow-none"
                    title="Réinitialiser tous les filtres">
                    <i class="fa fa-eraser"></i>
                </a>
                </div>
            </div>

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

            <div class="mb-3">
                <label class="form-label">Téléphone</label>
                {{ form_widget(form.phone, {'attr': {'class': 'form-control m-input', 'placeholder':'Téléphone'}}) }}
            </div>

            <div class="mb-3">
                <label class="form-label">Email</label>
                {{ form_widget(form.email, {'attr': {'class': 'form-control m-input', 'placeholder':'E-mail'}}) }}
            </div>

            <div class="mb-3">
                <label class="form-label">Type</label>
                {{ form_widget(form.type, {'attr': {'class': 'form-control m-input', 'placeholder':'Type'}}) }}
            </div>

            <div class="mb-3">
                <label class="form-label">Date de création</label>
                <div class="d-flex flex-column gap-2">
                <div class="d-flex align-items-center gap-2">
                    <span class="form-label mb-0" style="min-width:30px;">Du</span>
                    {{ form_widget(form.dateBefore, {'attr': {'class':'form-control form-control-sm','autocomplete':'off','style':'width:150px;'}}) }}
                </div>
                <div class="d-flex align-items-center gap-2">
                    <span class="form-label mb-0" style="min-width:30px;">Au</span>
                    {{ form_widget(form.dateAfter, {'attr': {'class':'form-control form-control-sm','autocomplete':'off','style':'width:150px;'}}) }}
                </div>
                </div>
            </div>

            <div class="mt-3">
                {{ form_widget(form.save, {'attr': {'data-proxy-id':'btnSearchHeader','class':'btn btn-dark btn-block fs-4 rounded-pill'}, 'label':'Rechercher'}) }}
                <a href="{{ path('supplier_index') }}" class="btn btn-secondary btn-block mt-2">Réinitialiser</a>
            </div>

            {{ form_errors(form) }}
            {{ form_rest(form) }}
            {{ form_end(form) }}
            </div>
        </div>
        </div>


    {% include '@admin/supplier/_formDeleteSupplierModal.html.twig' %}


{% endblock %}

{% block js %}
    {{ parent() }}
<script>
    document.addEventListener('DOMContentLoaded', function () {
    const el = document.getElementById('filterOffcanvasSuppliers');
    const form = document.getElementById('suppliersFilterForm');
    if (!el || !form) return;

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

    if (typeof bootstrap !== 'undefined' && bootstrap.Offcanvas) {
        const STORAGE_KEY = 'crm.suppliers.filters.offcanvas';
        const 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();
        }
    }

    initSuppliersTableMobileCards();
    });

    function initSuppliersTableMobileCards() {
      var table = document.getElementById('suppliersTable');
      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('sup-mobile-host', 'sup-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;

          // expected order from datatable suppliers
          var checkCell = tds[0] || null;
          var logoCell = tds[1] || null;
          var stateCell = tds[2] || null;
          var nameCell = tds[3] || null;
          var contactCell = tds[4] || null;
          var addressCell = tds[5] || null;
          var recepCell = tds[6] || null;
          var factCell = tds[7] || null;
          var totalCell = tds[8] || null;
          var lastCell = tds[9] || null;
          var createdCell = tds[10] || null;
          var actionsCell = tds[11] || null;

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

          var checkHtml = htmlOfCell(checkCell);
          var logoHtml = htmlOfCell(logoCell) || '<i class="fa fa-industry text-muted"></i>';
          var stateHtml = htmlOfCell(stateCell) || '';
          var nameText = textOfCell(nameCell) || 'Fournisseur';
          var contactHtml = htmlOfCell(contactCell) || '-';
          var addressText = textOfCell(addressCell) || '-';
          var actionsHtml = htmlOfCell(actionsCell) || '';

          host.classList.add('sup-mobile-host');
          host.setAttribute('data-label', '');
          host.innerHTML =
            '<div class="sup-card">' +
              '<div class="sup-left">' +
                '<span class="sup-logo">' + logoHtml + '</span>' +
                (checkHtml ? checkHtml.replace(/class="([^"]*)"/, 'class="$1 sup-check"') : '') +
              '</div>' +
              '<div class="sup-main">' +
                '<div class="sup-top">' +
                  '<div class="sup-name">' + nameText + '</div>' +
                  '<div class="sup-state">' + stateHtml + '</div>' +
                '</div>' +
                '<div class="sup-contact">' + contactHtml + '</div>' +
                '<div class="sup-address">' + addressText + '</div>' +
                '<div class="sup-stats">' +
                  '<span class="sup-chip"><span class="k">Rec:</span> ' + textOfCell(recepCell) + '</span>' +
                  '<span class="sup-chip"><span class="k">Fact:</span> ' + textOfCell(factCell) + '</span>' +
                  '<span class="sup-chip"><span class="k">Total:</span> ' + textOfCell(totalCell) + '</span>' +
                '</div>' +
                '<div class="sup-meta">' +
                  '<span class="sup-chip muted"><span class="k">Derniere:</span> ' + textOfCell(lastCell) + '</span>' +
                  '<span class="sup-chip muted"><span class="k">Cree:</span> ' + textOfCell(createdCell) + '</span>' +
                '</div>' +
              '</div>' +
              '<div class="sup-actions">' + actionsHtml + '</div>' +
            '</div>';

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

      applyCards();
      $(document).off('draw.dt.supCards', '#suppliersTable')
        .on('draw.dt.supCards', '#suppliersTable', applyCards);
      window.addEventListener('resize', applyCards);
    }
</script>

{% endblock %}