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

{% block extra_scripts %}
    <script src="{{ asset('js/admin/user-functions.js') }}"></script>
{% endblock %}


{% block stylesheets %}
    {{ parent() }}
    <style>
      #filterOffcanvasUsers {
        --bs-offcanvas-width: clamp(300px, 32vw, 360px);
        top: 100px;
        height: calc(100vh - 100px);
        z-index: 1015;
      }

      @media (max-width: 991.98px) {
        #filterOffcanvasUsers {
          --bs-offcanvas-width: min(92vw, 380px);
        }
      }


      .crm-admin-state-switch {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        padding: .18rem .55rem;
        border-radius: 999px;
        border: 1px solid transparent;
        min-height: 34px;
      }
      .crm-admin-state-switch.is-active {
        background: rgba(22, 163, 74, .10);
        border-color: rgba(22, 163, 74, .18);
      }
      .crm-admin-state-switch.is-blocked {
        background: rgba(220, 38, 38, .10);
        border-color: rgba(220, 38, 38, .18);
      }
      .crm-admin-state-switch .form-check-input {
        width: 2.15rem;
        height: 1.15rem;
        margin-top: 0;
        cursor: pointer;
        box-shadow: none !important;
      }
      .crm-admin-state-switch.is-active .form-check-input {
        background-color: #16a34a;
        border-color: #16a34a;
      }
      .crm-admin-state-switch.is-blocked .form-check-input {
        background-color: #dc2626;
        border-color: #dc2626;
      }
      .crm-admin-state-label {
        font-size: .77rem;
        font-weight: 700;
        color: #1f2937;
      }

      #filterOffcanvasUsers .crm-filter-box {
        padding: 1rem;
        }

        #filterOffcanvasUsers .crm-filter-label,
        #filterOffcanvasUsers label.small {
        font-size: .78rem;
        font-weight: 600;
        color: #6c757d;
        margin-bottom: .35rem;
        display: block;
        }

        #filterOffcanvasUsers .form-control,
        #filterOffcanvasUsers .select2-container .select2-selection--single {
        min-height: 38px;
        border-radius: .4rem;
        }

        #filterOffcanvasUsers .mb-2,
        #filterOffcanvasUsers .mb-3 {
        margin-bottom: .85rem !important;
        }

        #filterOffcanvasUsers .crm-separator {
        margin: .75rem 0 .9rem;
        opacity: .5;
        }

        #usersTable_wrapper .row.align-items-center.mb-2 > div:first-child {
        display: flex;
        align-items: center;
        width: 100%;
        gap: .5rem;
        }

        #usersTable_wrapper .dataTables_length {
        margin-bottom: 0;
        }

        #usersTable_wrapper #usersTableCount {
        margin-left: auto;
        display: flex;
        align-items: center;
        }

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

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

    </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;">

    {# --- Bloc gauche : Icône + Titre --- #}
    <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-user"></i> {# Icône client #}
        </span>

        <div>
            <h3 class="badge-title-main mb-0" style="font-size:1.23rem;">
                {% if type == 'contact' %}LISTE DES CONTACTS{% else %}LISTE DES CLIENTS{% endif %}
            </h3>
        </div>
    </div>

    {# --- Bloc droite : Actions --- #}
<div class="d-flex align-items-center gap-2 flex-wrap">

    {# Régénération types clients #}
    {% if type != 'contact' and "USERS_UPDATE" in rights %}
       <button
            class="btn btn-outline-warning btn-sm rounded-pill px-3 modalRegenerateClientTypes">
            <i class="fa fa-sync-alt me-1"></i>
            Régénérer types clients
        </button>
    {% endif %}

    {# + Ajouter client #}
    {% if "USERS_CREATE" in rights %}
        <a href="#"
           class="btn btn-primary btn-sm rounded-pill px-3 modalNewUser"
           data-type="{{ type == 'contact' ? 'contact' : 'client' }}">
            <i class="fa fa-plus me-1"></i>
            {{ type == 'contact' ? 'Ajouter un contact' : 'Ajouter un client' }}
        </a>
    {% endif %}
</div>


</div>

{% endblock %}

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

    <div class="container-fluid py-3">
        <div  class="type" data-type="{{type}}"></div>



        {#  Bouton affichage filtre en mobile #}

        <div class="row">
            {# Panneau filtre Clients (style modernisé) #}
            <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="#filterOffcanvasUsers"
                        aria-controls="filterOffcanvasUsers">
                    <i class="fa fa-filter me-1"></i> Filtres
                </button>
            </div>




            {# Zone de résultats utilisateurs #}
            <div class="col-12">
                <div class="listingContainer m-portlet m-portlet--mobile w-100">
                    <div class="m-portlet__body px-2 py-2">
                        <div class="table-responsive">
                            <table id="usersTable" class="table table-striped table-hover table-bordered w-100">
                               <thead>
                                    <tr>
                                        {% if type == 'contact' %}
                                            <th>#</th>
                                            <th>Nom</th>
                                            <th>Tél. / Email</th>
                                            <th>Créé le</th>
                                            <th>Actions</th>
                                        {% else %}
                                            <th>#</th>
                                            <th>Nom</th>
                                            <th>Type</th>
                                            <th>Tél. / Email</th>
                                            <th>Région</th>
                                            <th>Nb Cmd</th>
                                            <th>Cmd OK</th>
                                            <th>Cmd Annulée</th>
                                            <th>Cmd Retour</th>
                                            <th>Échanges</th>
                                            <th>Total Achat</th>
                                            <th>Dernière Cmd</th>
                                            <th>Créé le</th>
                                            <th>Actions</th>
                                        {% endif %}
                                    </tr>
                                </thead>

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

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

    <div class="offcanvas offcanvas-start"
        tabindex="-1"
        id="filterOffcanvasUsers"
        aria-labelledby="filterOffcanvasUsersLabel"
        data-bs-backdrop="false"
        data-bs-scroll="true">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="filterOffcanvasUsersLabel">
        <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: { class: 'm-form m-form--fit m-form--label-align-left', id: 'usersFilterForm' } }) }}

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

        {# ---- HEADER ---- #}
        <div class="d-flex align-items-center justify-content-between mb-4 pb-2 border-bottom">


            <div class="d-flex align-items-center ms-auto" style="gap:.5rem;">

                <a href="{{ path(_route, _params|merge({'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>

                <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>

            </div>

        </div>


        {# ===================== CHAMPS ===================== #}

        {# Nom client #}
        <div class="mb-3">
            <label class="small text-muted mb-1 d-block">
                 Nom
            </label>
            {{ form_widget(form.username, {
                attr: { class:'form-control m-input', placeholder:'Nom' }
            }) }}
        </div>

        <hr class="crm-separator">

        {# Téléphone #}
        <div class="mb-2">
            <label class="small text-muted mb-1 d-block">
                Téléphone
            </label>
            {{ form_widget(form.phone, {
                attr: { class:'form-control m-input', placeholder:'Téléphone' }
            }) }}
        </div>

        {# Email #}
        <div class="mb-3">
            <label class="small text-muted mb-1 d-block">
                 Email
            </label>
            {{ form_widget(form.email, {
                attr: { class:'form-control m-input', placeholder:'Email' }
            }) }}
        </div>

        {# Type client #}
        <div class="mb-3 {% if type == 'contact' %}d-none{% endif %}">
            <label class="small text-muted mb-1 d-block">
                 Type
            </label>
            {{ form_widget(form.clientType, {
                attr: { class:'form-control m-input select2', placeholder:'Type' }
            }) }}
        </div>

        <hr class="crm-separator">

        {# Gouvernorat #}
        <div class="mb-3">
            <label class="small text-muted mb-1 d-block">
                Gouvernorat
            </label>
            {{ form_widget(form.region, {
                attr: { class:'form-control m-input select2', placeholder:'Gouvernorat' }
            }) }}
        </div>

        {# Ville #}
        <div class="mb-3">
            <label class="small text-muted mb-1 d-block">
                Ville
            </label>
            {{ form_widget(form.city, {
                attr: { class:'form-control m-input', placeholder:'Ville' }
            }) }}
        </div>

        {% if type != 'contact' %}
            <div class="mb-3">
                <label class="small text-muted mb-1 d-block">
                    Compte vérifié
                </label>
                {{ form_widget(form.isVerified, {
                    attr: { class:'form-control m-input select2', placeholder:'Tous' }
                }) }}
            </div>
        {% endif %}


        <hr class="crm-separator">

            {# Dates DU/AU #}
        {% set dateSelect %}
            {{ form_widget(form.date, { attr: { id:'filter_user_date', class:'form-control m-input select2', placeholder:'Date' }, 'value': app.request.query.get('date')|default('all') }) }}
        {% endset %}

        <div class="mb-3">
            <div class="crm-filter-label">Date de création</div>
            <div class="crm-filter-control">{{ dateSelect|raw }}</div>
        </div>

        <div class="mb-3">
            <div class="crm-filter-label"></div>
            <div class="crm-filter-control d-flex flex-column gap-2">

                <label class="dateBefore mb-0" style="min-width:30px;display:none;">Du</label>
                {{ form_widget(form.dateBefore,  { attr: { id:'filter_user_dateBefore',  class:'form-control form-control-sm m-input', autocomplete:'off', style:'width:150px;display:none;' } }) }}
                <div class="w-100"></div>
                <label class="dateAfter  mb-0" style="min-width:30px;display:none;">Au</label>
                {{ form_widget(form.dateAfter,   { attr: { id:'filter_user_dateAfter',   class:'form-control form-control-sm m-input', autocomplete:'off', style:'width:150px;display:none;' } }) }}
            </div>
        </div>

        {# champ caché #}
        {{ form_widget(form.poste, {'attr': {'class': 'crm-hidden'}}) }}



        {# ===== Boutons bas ===== #}
        <div class="crm-search-actions">
            {# Bouton Rechercher #}
            {{ form_widget(form.save, { attr:{ class:'btn btn-dark btn-sm rounded-pill px-3 crm-btn-search', 'data-proxy-id':'btnSearchHeader' }, label:'Rechercher' }) }}

        </div>

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

    <div class="modal fade" id="m_modal_regenerate_client_types" tabindex="-1">
        <div class="modal-dialog modal-md modal-dialog-centered">
            <div class="modal-content">
                <div id="modal_regenerate_client_types_content"></div>
            </div>
        </div>
    </div>

{% endblock %}
{% block js %}
    {{ parent() }}
    <script src="{{ asset('build/jquery.sticky.js') }}" type="text/javascript"></script>
    <script type="text/javascript">

                  initSelect2Filters();
         function initUsersTableMobileCards() {
            var table = document.getElementById('usersTable');
            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 isContact = (String(document.querySelector('.type')?.dataset?.type || '') === 'contact');
              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('user-mobile-host', 'user-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;

                var checkCell = tds[0] || null;
                var nameCell = tds[1] || null;
                var typeCell = isContact ? null : (tds[2] || null);
                var contactCell = isContact ? (tds[2] || null) : (tds[3] || null);
                var regionCell = isContact ? null : (tds[4] || null);
                var nbCmdCell = isContact ? null : (tds[5] || null);
                var okCell = isContact ? null : (tds[6] || null);
                var annCell = isContact ? null : (tds[7] || null);
                var retCell = isContact ? null : (tds[8] || null);
                var echCell = isContact ? null : (tds[9] || null);
                var achatCell = isContact ? null : (tds[10] || null);
                var lastCell = isContact ? null : (tds[11] || null);
                var createdCell = isContact ? (tds[3] || null) : (tds[12] || null);
                var actionsCell = isContact ? (tds[4] || null) : (tds[13] || tds[tds.length - 1] || null);

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

                var nameText = textOfCell(nameCell) || (isContact ? 'Contact' : 'Client');
                var checkHtml = htmlOfCell(checkCell);
                var typeHtml = htmlOfCell(typeCell) || '';
                var contactHtml = htmlOfCell(contactCell) || '-';
                var regionText = textOfCell(regionCell) || '-';
                var actionsHtml = htmlOfCell(actionsCell) || '';
                var createdText = textOfCell(createdCell) || '-';

                host.classList.add('user-mobile-host');
                host.setAttribute('data-label', '');
                host.innerHTML =
                  '<div class="usr-card">' +
                    '<div class="usr-left">' +
                      '<span class="usr-avatar"><i class="fa fa-user"></i></span>' +
                      (checkHtml ? checkHtml.replace(/class="([^"]*)"/, 'class="$1 usr-check"') : '') +
                    '</div>' +
                    '<div class="usr-main">' +
                      '<div class="usr-top">' +
                        '<div class="usr-name">' + nameText + '</div>' +
                        '<div class="usr-type">' + (isContact ? '' : typeHtml) + '</div>' +
                      '</div>' +
                      '<div class="usr-contact">' + contactHtml + '</div>' +
                      (isContact
                        ? ('<div class="usr-meta"><span class="usr-chip muted"><span class="k">Créé:</span> ' + createdText + '</span></div>')
                        : ('<div class="usr-region">' + regionText + '</div>' +
                           '<div class="usr-stats">' +
                             '<span class="usr-chip"><span class="k">Cmd:</span> ' + htmlOfCell(nbCmdCell) + '</span>' +
                             '<span class="usr-chip"><span class="k">OK:</span> ' + htmlOfCell(okCell) + '</span>' +
                             '<span class="usr-chip"><span class="k">Ann:</span> ' + htmlOfCell(annCell) + '</span>' +
                             '<span class="usr-chip"><span class="k">Ret:</span> ' + htmlOfCell(retCell) + '</span>' +
                             '<span class="usr-chip"><span class="k">Ech:</span> ' + htmlOfCell(echCell) + '</span>' +
                           '</div>' +
                           '<div class="usr-meta">' +
                             '<span class="usr-chip muted"><span class="k">Achat:</span> ' + textOfCell(achatCell) + '</span>' +
                             '<span class="usr-chip muted"><span class="k">Dernière:</span> ' + textOfCell(lastCell) + '</span>' +
                             '<span class="usr-chip muted"><span class="k">Créé:</span> ' + createdText + '</span>' +
                           '</div>')) +
                    '</div>' +
                    '<div class="usr-actions">' + actionsHtml + '</div>' +
                  '</div>';

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

            applyCards();
            $(document).off('draw.dt.userCards', '#usersTable')
              .on('draw.dt.userCards', '#usersTable', applyCards);
            window.addEventListener('resize', applyCards);
         }
         document.addEventListener('DOMContentLoaded', function () {
            var el = document.getElementById('filterOffcanvasUsers');
            if (!el) return;

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

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

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

            initUsersTableMobileCards();
        });
        $(document).ready(function () {
            $(".leftpane > .flex-column").sticky({topSpacing:100});
        });

        document.addEventListener('DOMContentLoaded', function () {
            var filterPane = document.querySelector('.leftpane');
            var toggleBtn = document.getElementById('toggleFilterBtn');

            // Overlay
            var overlay = document.createElement('div');
            overlay.className = 'body-overlay';
            document.body.appendChild(overlay);

            toggleBtn?.addEventListener('click', function () {
                filterPane.classList.toggle('show');
                overlay.classList.toggle('show');
            });

            overlay.addEventListener('click', function () {
                filterPane.classList.remove('show');
                overlay.classList.remove('show');
            });
        });

    </script>
{% endblock %}