{% extends 'base.html.twig' %}

{% block title %}Utilisateurs - James Gestion de Production{% endblock %}

{% block body %}  
  <div class="col-12 col-lg-10 col-xl-8">
    <h1 class="text-center mt-5">Gestion des Utilisateurs</h1>

    <!-- Card -->
    <div id="user-list" class="card" data-list='{
      "valueNames": ["o-designation", "o-longueur", "o-droit", "o-epure", "o-ctf", "o-hydraulique"],
      "page": 25,
      "pagination": true
    }'>

      <div class="card-header">
        <!-- Form -->
        <form>
          <div class="input-group input-group-flush input-group-merge input-group-reverse">
            <input class="form-control list-search" type="search" placeholder="Rechercher">
            <span class="input-group-text">
              <i class="fe fe-search"></i>
            </span>
          </div>
        </form>
        <a class="btn btn-primary" href="{{ path('admin_user_new') }}"><i class="fe fe-plus-circle"></i> Ajouter un Utilisateur</a>
      </div>
      <div class="table-responsive">
        <table class="table table-sm table-nowrap card-table">
          <thead>
            <tr>                      
              <th>
                <a href="#" class="text-body-secondary list-sort" data-sort="o-email">
                  Email
                </a>
              </th>
              <th>
                <a href="#" class="text-body-secondary list-sort" data-sort="o-role">
                  Roles
                </a>
              </th>
              
            </tr>
          </thead>
          <tbody class="list">
          {% for user in users %}  
            <tr>                      
              <td class="o-email">{{ user.email }}</td>
              <td class="o-role">
                {% for role in user.roles %}
                    <span class="badge bg-secondary">{{ role }}</span>
                {% endfor %}
              </td>
              <td class="text-end">
                <a href="{# path('app_admin_user_modifier', {'id': user.id}) #}"
                  class="btn btn-sm btn-light me-2" title="Modifier">
                    <i class="fe fe-edit"></i>
                </a>

                <a href="#"
                  class="btn btn-sm btn-light text-danger"
                  title="Supprimer"
                  data-bs-toggle="modal"
                  data-bs-target="#deleteModal"
                  data-id="{{ user.id }}"
                  data-name="{{ user.email }}">
                    <i class="fe fe-trash"></i>
                </a>
            </td>

            </tr>
          {% endfor %}
        </tbody>
      </table>
      <!-- Pagination -->
      <ul class="pagination justify-content-center listjs-pagination"></ul>
    </div>
  </div>

  <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header bg-danger text-white">
          <h5 class="modal-title" id="deleteModalLabel">Confirmer la suppression</h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Fermer"></button>
        </div>
        <div class="modal-body">
          <p>Vous allez supprimer l'utilisateur' "<strong id="userName"></strong>". Souhaitez-vous continuer ?</p>
        </div>
        <div class="modal-footer">
          <form method="post" id="deleteForm">
            <input type="hidden" name="_token" id="csrfToken" value="">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
            <button type="submit" class="btn btn-danger">Supprimer</button>
          </form>
        </div>
      </div>
    </div>
  </div>
{% endblock %}
{% block script %}
  {{ parent() }}

  <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
      var deleteModal = document.getElementById('deleteModal');
      deleteModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        var userId = button.getAttribute('data-id');
        var userName = button.getAttribute('data-name');

        // Mettre à jour le nom du user dans la modale
        var modalBancName = deleteModal.querySelector('#userName');
        modalBancName.textContent = userName;

        // Mettre à jour l'action du formulaire
        var deleteForm = deleteModal.querySelector('#deleteForm');
        deleteForm.action = '/user/' + userId + '/delete';

        // Mettre à jour le token CSRF
        fetch('/user/' + userId + '/delete-token')
          .then(response => response.json())
          .then(data => {
            var csrfTokenInput = deleteModal.querySelector('#csrfToken');
            csrfTokenInput.value = data.token;
          });
      });
      // Initialisation de List.js
      const options = {
        valueNames: [
          'o-email',
          'o-role'
        ]
      };

      const listContainer = document.getElementById('user-list');
      if (listContainer) {
        new List('user-list', JSON.parse(listContainer.getAttribute('data-list')));
      }

    });

  </script>
{% endblock %}