{% extends '@App/partials/base.html.twig' %}

{% block content %}

    <div class="body-wrapper">
        <div class="container-fluid">

            <div class="card card-body py-3">
                <div class="row align-items-center">
                    <div class="col-12">
                        <div class="d-sm-flex align-items-center justify-space-between">
                            <h4 class="mb-4 mb-sm-0 card-title">Paramètres de l'annuaire</h4>
                            <nav aria-label="breadcrumb" class="ms-auto">
                            
                            </nav>
                        </div>
                    </div>
                </div>
            </div>

            <div>
                <div class="card p-4">
            

<table class="table">
  <thead>
    <tr>
      <th style="width:48px;"></th>
      <th>Niveau</th>
      <th>Nombre par ligne</th>
      <th>Afficher dans l'annuaire</th>
      <th>Afficher le nom</th>
      <th>Afficher le logo</th>
    </tr>
  </thead>
  <tbody id="niveauTable"
         data-reorder-url="{{ path('niveau_reorder') }}"
         >
    {% for niveau in niveaux %}
      <tr data-id="{{ niveau.id }}" data-toggle-url="{{ path('niveau_toggle_field', {id: niveau.id}) }}">
            <td>
                <button type="button" class="drag-handle" title="Déplacer" aria-label="Déplacer">☰</button>
            </td>
            <td>{{ niveau.nom }}</td>
            <td>
                <select class="form-control js-select" data-field="nb">
                    <option value="2" {{ niveau.nb == 2 ? 'selected' : '' }}>6 par ligne</option>
                    <option value="3" {{ niveau.nb == 3 ? 'selected' : '' }}>4 par ligne</option>
                    <option value="4" {{ niveau.nb == 4 ? 'selected' : '' }}>3 par ligne</option>
                </select>
            </td>
            <td>
                <label class="switch">
                    <input type="checkbox"
                        class="js-toggle-field"
                        data-field="affiche"
                        {{ niveau.affiche ? 'checked' : '' }}>
                    <span>Afficher</span>
                </label>
            </td>
            <td>
                <label class="switch">
                    <input type="checkbox"
                        class="js-toggle-field"
                        data-field="afficheNom"
                        {{ niveau.afficheNom ? 'checked' : '' }}>
                    <span>Afficher</span>
                </label>
            </td>
            <td>
                <label class="switch">
                    <input type="checkbox"
                        class="js-toggle-field"
                        data-field="afficheLogo"
                        {{ niveau.afficheLogo ? 'checked' : '' }}>
                    <span>Afficher</span>
                </label>
            </td>
        </tr>
    {% endfor %}
  </tbody>
</table>

<style>
.drag-handle{ cursor: grab; border:0; background:transparent; font-size:18px; }
.drag-handle:active{ cursor: grabbing; }
tr.dragging{ opacity:.6; }
.switch{ display:inline-flex; align-items:center; gap:.5rem; }
</style>

{# SortableJS (CDN). Tu peux aussi faire sans librairie, mais c'est plus long à maintenir. #}
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
<script>
(function(){
  const tbody = document.getElementById('niveauTable');
  const reorderUrl = tbody.dataset.reorderUrl;
  const csrf = tbody.dataset.csrf;

  // 1) Drag & drop pour réordonner
  const sortable = new Sortable(tbody, {
    handle: '.drag-handle',
    animation: 150,
    ghostClass: 'dragging',
    onEnd: async function () {
      const ids = Array.from(tbody.querySelectorAll('tr[data-id]')).map(tr => tr.dataset.id);
      try {
        const res = await fetch(reorderUrl, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': csrf
          },
          credentials: 'same-origin',
          body: JSON.stringify({ order: ids })
        });
        if (!res.ok) throw new Error('Erreur de sauvegarde de l’ordre');
      } catch (e) {
        alert(e.message || 'Impossible de sauvegarder le nouvel ordre');
      }
    }
  });

  // 2) Toggle visible
  tbody.addEventListener('focusin', (e) => {
    if (e.target.classList.contains('js-select')) {
      e.target.dataset.prev = e.target.value;
    }
  });

  // change = checkbox OU select
  tbody.addEventListener('change', async (e) => {
    const t = e.target;

    // Checkboxes déjà gérées ? on peut mutualiser :
    if (!(t.classList.contains('js-toggle-field') || t.classList.contains('js-select'))) return;

    const tr = t.closest('tr[data-id]');
    const url = tr.dataset.toggleUrl;
    const field = t.dataset.field;

    // valeur à envoyer
    let value;
    if (t.type === 'checkbox') {
      value = t.checked;
    } else { // select
      value = parseInt(t.value, 10);
    }

    // sauvegarde
    try {
      const res = await fetch(url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Requested-With': 'XMLHttpRequest',
          'X-CSRF-TOKEN': csrf
        },
        credentials: 'same-origin',
        body: JSON.stringify({ field, value })
      });
      if (!res.ok) throw new Error('Erreur de sauvegarde');
      // OK -> on fige la nouvelle valeur comme "prev"
      if (t.classList.contains('js-select')) {
        t.dataset.prev = String(value);
      }
    } catch (err) {
      // rollback
      if (t.type === 'checkbox') {
        t.checked = !value;
      } else {
        t.value = t.dataset.prev ?? t.value;
      }
      alert(err.message || 'Impossible de mettre à jour');
    }
  });
})();
</script>


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

      <script>


function handleColorTheme(e) {
  document.documentElement.setAttribute("data-color-theme", e);
}
    
</script>

{% endblock %}