{% include 'partials/header.html.twig' %}
    <link rel="stylesheet" href="{{ asset('assets/libs/datatables.net-bs5/css/dataTables.bootstrap5.min.css') }}">

    <script src="{{ asset('assets/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net/js/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net/js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net/js/buttons.print.min.js') }}"></script>
    <script src="{{ asset('assets/libs/jszip/jszip.min.js') }}"></script>
    <script src="{{ asset('assets/libs/pdfmake/pdfmake.min.js') }}"></script>
    <script src="{{ asset('assets/libs/pdfmake/vfs_fonts.js') }}"></script>

    <div class="body-wrapper">
      <div class="container-fluid">
            <div class="card bg-primary-subtle shadow-none position-relative overflow-hidden mb-4">
              <div class="card-body px-4 py-3">
                <div class="row align-items-center">
                  <div class="col-9">
                    <h4 class="fw-semibold mb-8">Tâches ponctuelles</h4>
                  </div>
                  <div class="col-3">
                      <div class="text-center">
                        <button type="button" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#addModal">
                          Créer une tâche
                        </button>
                      </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="datatables">
              <div class="card">
                <div class="card-body">
                  <div class="table-responsive mb-4  rounded-1">
                  
                      <table id="list_taches" class="table text-nowrap mb-0 align-middle w-100" >
                          <thead>
                            <tr>
                              <th>Nom</th>
                              <th>Récurrence</th>
                              <th>Début</th>
                              <th>Fin</th>
                              <th>Affecté</th>
                              <th></th>
                            </tr>
                          </thead>
                          <tbody>
                          </tbody>
                          <tfoot>
                            <tr>
                              <th>Nom</th>
                              <th>Récurrence</th>
                              <th>Début</th>
                              <th>Fin</th>
                              <th>Affecté</th>
                              <th></th>
                            </tr>
                          </tfoot>
                        </table>
                      </div>
                  </div>
                </div>
              </div>
              <!-- end Custom toolbar elements -->
            </div>
          </div>
        </div>

<!-- Modal Supprimer une chambre -->
<div class="modal fade" id="deleteTacheModal" tabindex="-1" aria-labelledby="deleteTacheModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="deleteTacheModalLabel">Supprimer une tâche</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="card-body p-4">
          <h4 class="card-title">Vous-vous vraiment supprimer cette tâche ?</h4>
          <input type="hidden" class="form-control" id="tacheId">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" onclick="deleteTache()">Supprimer</button>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal modifier -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div id="contentModal">
            </div>
        </div>
    </div>
</div>


<script>
      let showAllTasks = false;
       const tableEntity = $('#list_taches').DataTable({
        "paging": true,          // Activer la pagination
        "searching": true,       // Activer la recherche
        "ordering": true,        // Activer le tri des colonnes
        "info": true,            // Afficher les informations sur le nombre de résultats
        "lengthChange": false,   // Permettre de changer le nombre de lignes affichées
        "pageLength": 20,        // Nombre de lignes par page par défaut
        displayLength: 25,
        processing: true, // Affiche un indicateur de chargement
          serverSide: true, // Active le mode server-side
          ajax: {
              url: '{{path('ajax_list_tachehotel')}}', // URL du backend
              type: 'GET',
              cache: false,
              data: function (d) {
                d.showAll = showAllTasks ? 1 : 0; // ✅ Envoi du paramètre showAll
            }
          },
          columns: [
            { data: 'nom' },
            { data: 'recurrence' },
            { data: 'debut' },
            { data: 'fin' },
            { data: 'affecte' },
            { data: 'action' },     
          ],
        dom: 'Bfrtip', // Affiche les boutons en haut du tableau
        buttons: [
            {
                text: 'Afficher toutes les tâches',
                className: 'btn btn-secondary',
                action: function (e, dt, node, config) {
                    showAllTasks = !showAllTasks; 
                    tableEntity.ajax.reload(); 
                    node.text(showAllTasks ? 'Masquer les tâches expirées' : 'Afficher toutes les tâches');
                }
            },
            {
                extend: 'excel',
                text: 'Exporter en Excel',
                filename: 'export_taches', // Nom du fichier exporté en Excel
                className: 'btn btn-success'
            },
            {
                extend: 'pdf',
                text: 'Exporter en PDF',
                filename: 'export_taches', // Nom du fichier exporté en PDF
                className: 'btn btn-danger'
            },
            {
                extend: 'print',
                text: 'Imprimer',
                className: 'btn btn-info'
            }
        ],
        language: {
            "info":           "Voir _START_ à _END_ de _TOTAL_ tâches",
            "infoEmpty":      "Voir 0 à 0 de 0 tâche",
            "search":         "Rechercher:",
            "paginate": {
                "first":      "Premier",
                "last":       "Dernier",
                "next":       "Suivant",
                "previous":   "Précédent"
            },
            "infoFiltered": '(filtrées de _MAX_ tâches au total)',
            "zeroRecords": "Aucun enregistrement correspondant trouvé",
            "emptyTable": "Aucune donnée disponible dans le tableau",

        }        
    });


    $(".buttons-copy, .buttons-csv, .buttons-print, .buttons-pdf, .buttons-excel").addClass("btn btn-primary mr-1");

   

const deleteModal = document.getElementById('deleteTacheModal');
    if (deleteModal) {
    deleteModal.addEventListener('show.bs.modal', event => {
        const button = event.relatedTarget

        const recipient = button.getAttribute('data-bs-tache')
        const deleteId = document.getElementById('tacheId');

        deleteId.value = recipient
    })
    }


function deleteTache(){
  
    const tacheId = document.getElementById('tacheId').value;
-
        // Envoyer la mise à jour au serveur avec fetch et AJAX
        fetch('{{ path('tachehotel_delete') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token("tache_delete") }}'
            },
            body: JSON.stringify({
              tacheId: tacheId
            })
        })
        .then(response => response.json())
        .then(data => {
            // Afficher une notification toast lorsque la mise à jour est réussie
            if (data.success) {
                showToast('La tâche a bien été supprimée !');
                bootstrap.Modal.getInstance(document.getElementById('deleteTacheModal')).hide();
                tableEntity.ajax.reload();
            } else {
                showToast(data.message, 'error');
            }
        })
        .catch(error => {
            showToast('Erreur lors de la mise à jour.', 'error');
        });
    }

  $(document).on('click', '.edit', function () {
      const selectedId = $(this).data('id');
      const modalContentId = 'contentModal';
      const modalId = 'editModal';

      // Charger le contenu via AJAX
      loadContent('{{ path('tachehotel_get_update', { 'id': 'ID_PLACEHOLDER' }) }}', selectedId, modalContentId);
      $(`#${modalId}`).modal('show');

    });
    
    $(document).on('click', '.affect', function () {
      const selectedId = $(this).data('id');
      const modalContentId = 'contentModal';
      const modalId = 'editModal';

      // Charger le contenu via AJAX
      loadContent('{{ path('tachehotel_get_affect', { 'id': 'ID_PLACEHOLDER' }) }}', selectedId, modalContentId);
      $(`#${modalId}`).modal('show');

    });



</script>
{% include '@Hotel/tachehotel/modal/new_tachehotel.html.twig' %}
{% include 'partials/footer.html.twig' %}