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

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

{% block body %}
<div class="mt-4 text-center"><h1>Liste des Bancs</h1></div>
  <!-- Card -->
  <div id="banc-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('app_admin_banc_ajouter') }}"><i class="fe fe-plus-circle"></i> Ajouter un Banc</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-designation">
                Designation
              </a>
            </th>
            <th>
              <a href="#" class="text-body-secondary list-sort" data-sort="o-longueur">
                Longueur max
              </a>
            </th>
            <th>
              <a href="#" class="text-body-secondary list-sort" data-sort="o-droit">
                Droit
              </a>
            </th>
            <th>
              <a href="#" class="text-body-secondary list-sort" data-sort="o-epure">
                Courbe
              </a>
            </th>
            <th>
              <a href="#" class="text-body-secondary list-sort" data-sort="o-ctf">
                Contre-Flêche
              </a>
            </th>
            <th colspan="2">
              <a href="#" class="text-body-secondary list-sort" data-sort="o-hydraulique">
                Hydraulique
              </a>
            </th>
          </tr>
        </thead>
        <tbody class="list">
        {% for banc in bancs %}  
          <tr>                      
            <td class="o-designation">{{ banc.designation }}</td>
            <td class="o-longueur">{{ banc.longueurMax }}</td>
            <td class="o-droit">
              {% if banc.droit %}<span class="badge bg-success">Oui</span>{% else %}<span class="badge bg-secondary">Non</span>{% endif %}                        
            </td>
            <td class="o-epure">
              {% if banc.epure %}<span class="badge bg-success">Oui</span>{% else %}<span class="badge bg-secondary">Non</span>{% endif %}
            </td>
            <td class="o-ctf">
              {% if banc.ctf %}<span class="badge bg-success">Oui</span>{% else %}<span class="badge bg-secondary">Non</span>{% endif %}
            </td>
            <td class="o-hydraulique">
              {% if banc.hydraulique %}<span class="badge bg-success">Oui</span>{% else %}<span class="badge bg-secondary">Non</span>{% endif %}
            </td>
            <td class="text-end">
              <a href="{{ path('app_admin_banc_modifier', {'id': banc.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="{{ banc.id }}"
                data-name="{{ banc.designation }}">
                  <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 le banc de collage "<strong id="bancName"></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 bancId = button.getAttribute('data-id');
        var bancName = button.getAttribute('data-name');

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

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

        // Mettre à jour le token CSRF
        fetch('/admin/banc/' + bancId + '/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-designation',
          'o-longueur',
          'o-droit',
          'o-epure',
          'o-ctf',
          'o-hydraulique'
        ]
      };

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

    });

  </script>
{% endblock %}