{% include 'portail_client/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 class="btn btn-rounded btn-outline-primary" 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="d-flex justify-content-between mb-3">
                  <div>
                      <button id="prev" class="btn btn-secondary">Précédent</button>
                      <span id="current-period"></span>
                      <button id="next" class="btn btn-secondary">Suivant</button>
                  </div>
                  <div>
                      <button id="switch-to-month" class="btn btn-primary">Mois</button>
                      <button id="switch-to-year" class="btn btn-outline-primary">Année</button>
                  </div>
              </div>
                <div class="table-responsive" id="editable-datatable_wrapper">
                      <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>Date du devis</th>
                            <th>Priorité</th>
                            <th>Statut</th>
                            <th></th>
                          </tr>
                        </thead>
                        <tbody>

                        </tbody>
                        <tfoot>
                          <tr>
                            <th>Id</th>
                            <th>Titre</th>
                            <th>Date du devis</th>
                            <th>Priorité</th>
                            <th>Statut</th>
                            <th></th>
                          </tr>
                        </tfoot>
                      </table>
                    </div>
                </div>
              </div>
            </div>

        </div>

<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
        });
    });
});


  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('ajax_portail_getlist_ticket_date')}}', // URL du backend
          type: 'GET',
          cache: false,
      },
      columns: [
          { data: 'id' },          
          { data: 'titre' }, 
          { data: 'date' },
          { data: 'priorite' },
          { data: 'statut' },         
          { data: 'action' },     
      ],
      dom: 'Bfrtip', // Affiche les boutons en haut du tableau
        buttons: [
      {
          extend: 'excel',
          text: 'Exporter en Excel',
          filename: 'export_tickets', // Nom du fichier exporté en Excel
          className: 'btn btn-success'
      },
      {
          extend: 'pdf',
          text: 'Exporter en PDF',
          filename: 'export_tickets', // 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"
        },
        "zeroRecords": "Aucun enregistrement correspondant trouvé",
        "emptyTable": "Aucune donnée disponible dans le tableau",
        "infoFiltered": '(filtrés de _MAX_ tickets)',
    },
  });
    
  $(document).ready(function () {
    let type = 'month'; // 'month' ou 'year'
    let currentDate = new Date(); // Date actuelle

    const ticketsUrl = "{{ path('ajax_portail_getlist_ticket_date', { 'date': '2024-01', 'type': 'month'}) | raw }}";

    function formatDate(date) {
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        return type === 'month' ? `${year}-${month}` : `${year}`;
    }

    function updateUrl(type, date) {
        // Mettez à jour l'URL en remplaçant les paramètres {type} et {date}
        return ticketsUrl.replace('month', type).replace('2024-01', date);
    }

    function updatePeriodLabel() {
        const options = { year: 'numeric', month: type === 'month' ? 'long' : undefined };
        $('#current-period').text(currentDate.toLocaleDateString('fr-FR', options));
    }

    function reloadTable() {
        const ajaxUrl = updateUrl(type, formatDate(currentDate));
        $('#list_devis').DataTable().ajax.url(ajaxUrl).load();
    }

    // Mise à jour de la période actuelle
    updatePeriodLabel();

    // Navigation
    $('#prev').on('click', function () {
        if (type === 'month') {
            currentDate.setMonth(currentDate.getMonth() - 1);
        } else {
            currentDate.setFullYear(currentDate.getFullYear() - 1);
        }
        updatePeriodLabel();
        reloadTable();
    });

    $('#next').on('click', function () {
        if (type === 'month') {
            currentDate.setMonth(currentDate.getMonth() + 1);
        } else {
            currentDate.setFullYear(currentDate.getFullYear() + 1);
        }
        updatePeriodLabel();
        reloadTable();
    });

    // Changement d'affichage (mois/année)
    $('#switch-to-month').on('click', function () {
        type = 'month';
        $(this).addClass('btn-primary').removeClass('btn-outline-primary');
        $('#switch-to-year').addClass('btn-outline-primary').removeClass('btn-primary');
        updatePeriodLabel();
        reloadTable();
    });

    $('#switch-to-year').on('click', function () {
        type = 'year';
        $(this).addClass('btn-primary').removeClass('btn-outline-primary');
        $('#switch-to-month').addClass('btn-outline-primary').removeClass('btn-primary');
        updatePeriodLabel();
        reloadTable();
    });
});



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

</script>

    </div>

{% include 'partials/modal/new_ticket.html.twig' %}  
{% include 'portail_client/partials/footer.html.twig' %}