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

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

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

    .applied-filters {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
    }

    .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;
    }

    #filterOffcanvasAdministration .crm-filter-box {
      position: relative;
      padding-bottom: 62px;
    }

    #filterOffcanvasAdministration .btn-filter-abs {
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 2;
      min-width: 130px;
    }

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

      .adm-card {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) auto;
        gap: .55rem;
        padding: .5rem .55rem;
        align-items: start;
      }
      .adm-left { position: relative; }
      .adm-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;
      }
      .adm-check {
        position: absolute; top: -2px; left: -2px;
        width: 14px; height: 14px; margin: 0; accent-color: #2f6fd6;
      }
      .adm-main { min-width: 0; }
      .adm-top {
        display: flex; align-items: flex-start; justify-content: space-between; gap: .4rem;
      }
      .adm-name {
        font-size: .88rem; font-weight: 700; color: #111827; line-height: 1.2;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48vw;
      }
      .adm-ref, .adm-contact {
        margin-top: .05rem; font-size: .75rem; color: #64748b; line-height: 1.2;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      .adm-chips {
        margin-top: .24rem; display: flex; flex-wrap: wrap; gap: .3rem;
      }
      .adm-chip {
        font-size: .69rem; line-height: 1; padding: .24rem .42rem; border-radius: 999px;
        background: #f1f5f9; color: #1f2937; border: 1px solid #e2e8f0; white-space: nowrap;
      }
      .adm-chip .k { font-weight: 700; color: #334155; margin-right: .18rem; }
      .adm-actions { display: flex; align-items: flex-start; gap: .2rem; }
      .adm-actions .btn {
        width: 28px; height: 28px; min-width: 28px; padding: 0;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 8px;
      }
      .adm-actions .dropdown-menu { min-width: 180px; }
    }
  </style>
{% endblock %}

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

{% block js %}
  {{ parent() }}
  <script>
    function initAdministrationMobileCards() {
      var table = document.getElementById('administrationsTable');
      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('adm-mobile-host', 'adm-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 stateCell = tds[1] || null;
          var refCell = tds[2] || null;
          var nameCell = tds[3] || null;
          var emailCell = tds[4] || null;
          var phoneCell = tds[5] || null;
          var groupCell = tds[6] || null;
          var posteCell = tds[7] || null;
          var rolesCell = tds[8] || null;
          var createdCell = tds[9] || null;
          var actionsCell = tds[10] || tds[tds.length - 1] || null;

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

          var checkHtml = htmlOfCell(checkCell);
          var stateHtml = htmlOfCell(stateCell) || '';
          var refText = textOfCell(refCell) || '-';
          var nameText = textOfCell(nameCell) || 'Utilisateur';
          var emailText = textOfCell(emailCell) || '-';
          var phoneText = textOfCell(phoneCell) || '-';
          var groupText = textOfCell(groupCell) || '-';
          var posteText = textOfCell(posteCell) || '-';
          var createdText = textOfCell(createdCell) || '-';
          var actionsHtml = htmlOfCell(actionsCell) || '';

          host.classList.add('adm-mobile-host');
          host.setAttribute('data-label', '');
          host.innerHTML =
            '<div class="adm-card">' +
              '<div class="adm-left">' +
                '<span class="adm-avatar"><i class="fa fa-user"></i></span>' +
                (checkHtml ? checkHtml.replace(/class="([^"]*)"/, 'class="$1 adm-check"') : '') +
              '</div>' +
              '<div class="adm-main">' +
                '<div class="adm-top">' +
                  '<div class="adm-name">' + nameText + '</div>' +
                  '<div>' + stateHtml + '</div>' +
                '</div>' +
                '<div class="adm-ref">Ref: ' + refText + '</div>' +
                '<div class="adm-contact">' + phoneText + ' · ' + emailText + '</div>' +
                '<div class="adm-chips">' +
                  '<span class="adm-chip"><span class="k">Groupe:</span>' + groupText + '</span>' +
                  '<span class="adm-chip"><span class="k">Poste:</span>' + posteText + '</span>' +
                  '<span class="adm-chip"><span class="k">Cree:</span>' + createdText + '</span>' +
                '</div>' +
              '</div>' +
              '<div class="adm-actions">' + actionsHtml + '</div>' +
            '</div>';

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

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

    function bindAdministrationOffcanvasOffset() {
      var offcanvasEl = document.getElementById('filterOffcanvasAdministration');
      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.top = top + 'px';
        offcanvasEl.style.height = 'calc(100vh - ' + 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 () {
      initAdministrationMobileCards();
      bindAdministrationOffcanvasOffset();
    });
  </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-users"></i>
      </span>
      <div>
        <h3 class="badge-title-main mb-0" style="font-size:1.23rem;">GESTION DES UTILISATEURS CRM</h3>
      </div>
    </div>

    <div class="d-flex align-items-center gap-2 flex-wrap">
      <a href="javascript:void(0);" class="btn btn-success btn-sm modalNewAdministration">
        <i class="fa fa-plus-circle me-1"></i> Ajouter un utilisateur
      </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="#filterOffcanvasAdministration"
            aria-controls="filterOffcanvasAdministration">
      <i class="fa fa-filter me-1"></i> Filtres
    </button>
    <div id="appliedFiltersAdministration" class="applied-filters d-flex flex-wrap gap-2 mb-0"></div>
  </div>

  <div class="card shadow-sm">
    <div class="card-body p-2">
      <div class="table-responsive">
        <table id="administrationsTable" class="table table-striped table-hover table-bordered w-100">
          <thead>
            <tr>
              <th>#</th>
              <th>Etat</th>
              <th>Ref</th>
              <th>Nom</th>
              <th>Email</th>
              <th>Telephone</th>
              <th>Groupe</th>
              <th>Poste</th>
              <th>Roles</th>
              <th>Cree le</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
  </div>

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

        <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"
                    id="filter_user_save_top"
                    class="btn btn-sm btn-dark shadow-none"
                    title="Rechercher"
                    onclick="document.getElementById('filter_user_save') && document.getElementById('filter_user_save').click();">
              <i class="fa fa-search"></i>
            </button>
            <button type="reset" id="clear_filter" class="btn btn-sm btn-light border shadow-none" title="Reinitialiser les filtres">
              <i class="fa fa-eraser"></i>
            </button>
          </div>
        </div>

        <div class="crm-filter-field">
          <div class="crm-filter-label">Etat</div>
          <div class="crm-filter-control">
            {{ form_widget(form.isBlocked, { attr: { class: 'form-control m-input select2' } }) }}
          </div>
        </div>

        <div class="crm-filter-field">
          <div class="crm-filter-label">Nom</div>
          <div class="crm-filter-control">
            {{ form_widget(form.username, { attr: { class: 'form-control m-input', placeholder: 'Nom' } }) }}
          </div>
        </div>

        <div class="crm-filter-field">
          <div class="crm-filter-label">Telephone 1</div>
          <div class="crm-filter-control">
            {{ form_widget(form.phone, { attr: { class: 'form-control m-input', placeholder: 'Telephone' } }) }}
          </div>
        </div>

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

        <div class="crm-filter-field">
          <div class="crm-filter-label">Role</div>
          <div class="crm-filter-control">
            {{ form_widget(form.role, { attr: { class: 'form-control m-input select2' } }) }}
          </div>
        </div>

        <div class="crm-filter-field">
          <div class="crm-filter-label">Poste</div>
          <div class="crm-filter-control">
            {{ form_widget(form.poste, { attr: { class: 'form-control m-input select2' } }) }}
          </div>
        </div>

        <div class="crm-filter-field">
          <div class="crm-filter-label">Region</div>
          <div class="crm-filter-control">
            {{ form_widget(form.region, { attr: { class: 'form-control m-input select2' } }) }}
          </div>
        </div>

        <div class="crm-filter-field">
          <div class="crm-filter-label">Date creation</div>
          <div class="crm-filter-control d-flex flex-column gap-2">
            {{ form_widget(form.dateBefore, { attr: { class: 'form-control form-control-sm m-input', autocomplete: 'off' } }) }}
            {{ form_widget(form.dateAfter, { attr: { class: 'form-control form-control-sm m-input', autocomplete: 'off' } }) }}
          </div>
        </div>

        <button type="button" id="filter_user_save" class="btn btn-dark btn-sm rounded-pill px-3 btn-filter-abs">
          <i class="fa fa-search me-1"></i> Filtrer
        </button>

        {{ form_end(form, { render_rest: false }) }}
      </div>
    </div>
  </div>

  <div class="modal fade" id="m_modal_edit_administration" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
      <div class="modal_edit_content" id="modal_edit_content"></div>
    </div>
  </div>

  <div class="modal fade" id="m_modal_new_administration" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
      <div class="modal_edit_content" id="modal_new_content"></div>
    </div>
  </div>

  <div class="modal fade" id="m_modal_edit_pw_administration" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
      <div class="modal_edit_content" id="modal_edit_pw_content"></div>
    </div>
  </div>

  <div class="modal fade" id="m_modal_manage_block" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
      <div class="modal-content" id="modal_manage_block_content"></div>
    </div>
  </div>
{% endblock %}