{% include 'partials/header.html.twig' %}

<link rel="stylesheet" href="{{ asset('assets/libs/select2/css/select2.min.css') }}">

<script src="{{ asset('assets/libs/jquery/dist/jquery.min.js') }}"></script>
<script src="{{ asset('assets/libs/select2/js/select2.min.js') }}"></script>

    <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 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">Tickets</h4>
                  <nav aria-label="breadcrumb" class="ms-auto">
                    <ol class="breadcrumb">
                      <li class="breadcrumb-item d-flex align-items-center">
                        <a href="javascrit:void(0)" class="btn btn-rounded btn-outline-primary" type="button" data-bs-toggle="modal" data-bs-target="#addTicketModal">
                          Ajouter un ticket
                        </a>
                      </li>
                    </ol>
                  </nav>
                </div>
              </div>
            </div>
          </div>

          <div class="datatables">
            <div class="card">
              <div class="card-body">

                <div class="row mb-3">
                  <!-- Filtre Statut -->
                  <div class="col-md-4">
                      <label for="filterStatus">Statut :</label>
                      <select id="filterStatus" class="form-control select2">
                          <option value="Ouvert" selected>Ouvert</option>
                          <option value="En cours">En cours</option>
                          <option value="Résolu">Résolu</option>
                      </select>
                  </div>

                  <!-- Filtre Client -->
                  <div class="col-md-4">
                      <label for="filterClient">Client :</label>
                      <select id="filterClient" class="form-control select2">
                          <option value="">Tous</option>
                          {% for client in clients %}
                            <option value="{{client.idtoken}}">{{client.nom}}</option>
                          {% endfor %}
                      </select>
                  </div>

                  <!-- Filtre Projet -->
                  <div class="col-md-4">
                      <label for="filterProjet">Projet :</label>
                      <select id="filterProjet" class="form-control select2">
                          <option value="">Tous</option>
                          {% for projet in projets %}
                            <option value="{{projet.idtoken}}">{{projet.titre}}</option>
                          {% endfor %}
                      </select>
                  </div>
                </div>

                <div class="table-responsive">
                    <table id="list_tickets" class="table border table-striped table-bordered display text-nowrap w-100">
                      <thead>
                        <tr>
                          <th>Id</th>
                          <th>Titre</th>
                          <th>Client</th>
                          <th>Projet</th>
                          <th>Statut</th>
                          <th>Date</th>
                          <th>Affectation</th>
                          <th></th>
                        </tr>
                      </thead>
                      <tbody>

                      </tbody>
                      <tfoot>
                        <tr>
                          <th>Id</th>
                          <th>Titre</th>
                          <th>Client</th>
                          <th>Projet</th>
                          <th>Statut</th>
                          <th>Date</th>
                          <th>Affectation</th>
                          <th></th>
                        </tr>
                      </tfoot>
                    </table>
                  </div>
              </div>
            </div>
          </div>

        </div>
      </div>

<!-- Modal Détail -->
<div class="modal fade" id="detailTicketModal" tabindex="-1" aria-labelledby="detailTicketModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content" id="detailTicketModalContent">
        </div>
    </div>
</div>


{% include 'partials/modal/archive_modal.html.twig' %}
{% include 'partials/modal/delete_modal.html.twig' %}


      <script>
      document.addEventListener('DOMContentLoaded', () => {
    // Initialisation pour les éléments déjà dans le DOM
    $('.select2').select2();

    // Réinitialisation lors de l'ouverture de la modal
    $('#addTicketModal').on('shown.bs.modal', function () {
        $(this).find('.select2').select2({
            dropdownParent: $('#addTicketModal') // Fixe les problèmes de z-index
        });
    });

    // Réinitialisation lors de l'ouverture de la modal
    $('#addModal').on('shown.bs.modal', function () {
        $(this).find('.select2').select2({
            dropdownParent: $('#addModal') // Fixe les problèmes de z-index
        });
    });

    // Réinitialisation lors de l'ouverture de la modal
    $('#viewModal').on('shown.bs.modal', function () {
        $(this).find('.select2').select2({
            dropdownParent: $('#viewModal') // Fixe les problèmes de z-index
        });
    });
});


      $('.select2').select2();

        const tableEntity = $('#list_tickets').DataTable({
            // Options personnalisées (facultatif)
            "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
            processing: true, // Affiche un indicateur de chargement
            serverSide: true, // Active le mode server-side
            ajax: {
              url: '{{path('api_getlist_tickets')}}', // URL du backend
              type: 'GET',
              cache: false,
              data: function (d) {
                d.statut = $('#filterStatus').val();  // Récupère la valeur du statut sélectionné
                d.client = $('#filterClient').val();  // Récupère la valeur du client sélectionné
                d.projet = $('#filterProjet').val();  // Récupère la valeur du projet sélectionné
            },
            },
            columns: [
                { data: 'id', },          
                { data: 'titre' },       
                { data: 'client' },
                { data: 'projet' },       
                { data: 'statut' },   
                { data: 'date' },       
                { data: 'priorite' },
                { data: 'action' },     
            ],
            dom: 'Bfrtip', // Affiche les boutons en haut du tableau
             buttons: [
            {
                extend: 'excel',
                text: 'Exporter en Excel',
                filename: 'export_ticket', // Nom du fichier exporté en Excel
                className: 'btn btn-success'
            },
            {
                extend: 'pdf',
                text: 'Exporter en PDF',
                filename: 'export_ticket', // 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_ tickets",
            "infoEmpty":      "Voir 0 à 0 de 0 ticket",
            "search":         "Rechercher:",
            "paginate": {
                "first":      "Premier",
                "last":       "Dernier",
                "next":       "Suivant",
                "previous":   "Précédent"
            },
            "infoFiltered": '(filtrés de _MAX_ tickets)',
            "zeroRecords": "Aucun enregistrement correspondant trouvé",
            "emptyTable": "Aucune donnée disponible dans le tableau",
        }
    });
    
    $('#filterStatus, #filterClient, #filterProjet').on('change', function () {
        tableEntity.ajax.reload();
    });

  const tacheUpdateRoute = "{{ path('todolist_update', { 'id': 'ID_PLACEHOLDER' }) }}";
  const ticketDetailRoute = "{{ path('ticket_view', { 'id': 'ID_PLACEHOLDER' }) }}";
  
  function handleColorTheme(e) {
    document.documentElement.setAttribute("data-color-theme", e);
  }



</script>

     
<script src="{{ asset('assets/js/projet/projet_view.js') }}"></script>
<script src="{{ asset('assets/js/dashboards/todolist.js') }}"></script>

</script>
    </div>
{% include 'partials/modal/add_modal.html.twig' %}
{% include 'partials/modal/new_ticketadmin.html.twig' %}  
{% include 'partials/modal/view_modal.html.twig' %}
{% include 'partials/modal/edit_modal.html.twig' %}
{% include 'partials/modal/delete_modal.html.twig' %}


{% include 'partials/footer.html.twig' %}