{% 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>
<script src="{{ asset('assets/libs/jquery-steps/jquery.steps.min.js') }}"></script>
<script src="{{ asset('assets/libs/jquery-validation/jquery.validate.min.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">Projets</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="#addModal">
                          Ajouter un projet
                        </a>
                      </li>
                    </ol>
                  </nav>
                </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_projets" class="table text-nowrap mb-0 align-middle w-100" > 
                      <thead>
                        <tr>
                          <th>ID</th>
                          <th>Projet</th>
                          <th>Date de début</th>
                          <th>Date limite</th>
                          <th>Progression</th>
                          <th>Statut</th>
                          <th></th>
                        </tr>
                      </thead>
                      <tbody>
                        
                        

                      </tbody>
                      <tfoot>
                        <tr>
                          <th>ID</th>
                          <th>Projet</th>
                          <th>Date de début</th>
                          <th>Date limite</th>
                          <th>Progression</th>
                          <th>Statut</th>
                          <th></th>
                        </tr>
                      </tfoot>
                    </table>
                  </div>
              </div>
            </div>
          </div>

        </div>
      </div>

{% if showOnboardingProjetModal() and not showOnboardingModal()  %}
      {% include '@Projet/projet/onboarding/onboarding_projet.html.twig' %}
      <script src="{{ asset('assets/libs/jquery.repeater/jquery.repeater.min.js') }}"></script>

      <script src="{{ asset('assets/js/app/onboarding_projet.js') }}"></script>
{% else %}
  {% include '@Projet/projet/modal/new_projet.html.twig' %} 
{% endif %}



      <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
    $('#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
    $('#editModal').on('shown.bs.modal', function () {
        $(this).find('.select2').select2({
            dropdownParent: $('#editModal') // Fixe les problèmes de z-index
        });
    });
});

let showArchived = "false";

const tableProjet = $('#list_projets').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
  processing: true, // Affiche un indicateur de chargement
  serverSide: true, // Active le mode server-side
  ajax: {
      url: '{{path('api_list_projet')}}', // URL du backend
      type: 'GET',
      cache: false,
      data: function (d) {
          d.archive = showArchived;  
      }

      
  },
  columns: [
      { data: 'id' },          
      { data: 'projet' }, 
      { data: 'startDate' },
      { data: 'deadline' },       
      { data: 'progression' }, 
      { data: 'statut' },   
      { data: 'action' },     
  ],
  // 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
  
  dom: 'Bfrtip', // Affiche les boutons en haut du tableau
  buttons: [
    {
        extend: 'excel',
        text: 'Exporter en Excel',
        filename: 'export_projets', // Nom du fichier exporté en Excel
        className: 'btn btn-success'
    },
    {
        extend: 'pdf',
        text: 'Exporter en PDF',
        filename: 'export_projets', // Nom du fichier exporté en PDF
        className: 'btn btn-danger'
    },
    {
        extend: 'print',
        text: 'Imprimer',
        className: 'btn btn-info'
    },
    {
      text: 'Afficher tous les projets',
      className: 'btn btn-primary',
      action: function (e, dt, node, config) {
        showArchived = "true";                // archive = true
        dt.ajax.reload();        // rechargement côté serveur
      }
    },
  ],
  language: {
      "info":           "Voir _START_ à _END_ de _TOTAL_ projets",
      "infoEmpty":      "Voir 0 à 0 de 0 projet",
      "search":         "Rechercher:",
      "paginate": {
          "first":      "Premier",
          "last":       "Dernier",
          "next":       "Suivant",
          "previous":   "Précédent"
      },
      "infoFiltered": '(filtrés de _MAX_ projets)',
  }
});

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

  const projetArchiveRoute = "{{ path('projet_archive', { 'id': 'ID_PLACEHOLDER' }) }}";
  const projetDeleteRoute = "{{ path('projet_delete', { 'id': 'ID_PLACEHOLDER' }) }}";
  const crudGetRoute = "{{ path('projet_get', { 'id': 'ID_PLACEHOLDER' }) }}";
  const addRoute = "{{ path('projet_add') }}";
  const getRoute = "{{ path('projet_get_update', { 'id': 'ID_PLACEHOLDER' }) }}";
  const updateRoute = "{{ path('projet_update') }}";
  const projetUpdateRoute = "{{ path('projet_update') }}";
    
</script>

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

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