{% 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">
                <h5>Modèles de contrat</h5>
                <div class="d-sm-flex align-items-center justify-space-between">
                  
                  <a href="{{path('app_index')}}" class="p-2"><iconify-icon icon="solar:home-2-broken" class="fs-6"></iconify-icon> </a> >
                  <a href="{{path('projet_index')}}" class="p-2">Projets </a> >
                  <a href="{{path('projet_view', {'id': projet.idtoken})}}" class="p-2">{{projet.titre}} </a> >
                  <a href="{{path('projet_view_modeles', {'id': projet.idtoken})}}" class="p-2">Modèle de contrat </a>
                  
                </div>
              </div>
            </div>
          </div>

        <div class="card">
            <div class="card-body">
            
                <div class="text-end">
                    <a href="{{path('projet_view_modele_new', {id:projet.idtoken})}}" class="btn btn-light" >
                        Ajouter un modèle
                    </a>
                </div>

                <div class="row justify-content-center">
                    <div class="datatables">
                        <div class="card">
                            <div class="card-body">
                                <div class="table-responsive mb-4  rounded-1">
                                
                                <table id="liste_modele" class="table text-nowrap mb-0 align-middle w-100" > 

                                    <thead>
                                        <tr>
                                            <th>Titre</th>
                                            <th>Créé le</th>
                                            <th>Créé par</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                            <tr>
                                            <th>Titre</th>
                                            <th>Créé le</th>
                                            <th>Créé par</th>
                                            <th>Actions</th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>


        </div>
      </div>
    </div>

<script>

     const tableModele = $('#liste_modele').DataTable({
        "paging": true,          // Activer la pagination
        "searching": false,       // 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_modele')}}', // URL du backend
            type: 'GET',
            cache: false,
            data: function(d) {
              d.projetId = '{{ projet.idtoken }}'; // ID du projet à inclure dans la requête
          }
        },
        columns: [
            { data: 'nom' },          
            { data: 'createdby' },       
            { data: 'updatedat' }, 
            { data: 'action' },     
        ],
        columnDefs: [
            {
                targets: 1,
                className: 'text-wrap' // ta classe personnalisée
            }
        ],
        dom: 'Bfrtip', // Affiche les boutons en haut du tableau
        buttons: [
      {
          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_ modèles",
          "infoEmpty":      "Voir 0 à 0 de 0 modèle",
          "search":         "Rechercher:",
          "paginate": {
              "first":      "Premier",
              "last":       "Dernier",
              "next":       "Suivant",
              "previous":   "Précédent"
          },
          "infoFiltered": '(filtrées de _MAX_ modèles)',
      }
    });
    

  document.addEventListener("DOMContentLoaded", function () {
    const urlParams = new URLSearchParams(window.location.search);
    const tab = urlParams.get('tab');

    if (tab) {
      const targetTabId = `#pills-${tab}`;
      const triggerBtn = document.querySelector(`[data-bs-target="${targetTabId}"]`);

      if (triggerBtn) {
        const tabInstance = new bootstrap.Tab(triggerBtn);
        tabInstance.show();
      }
    }
  });
</script>


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

<script src="{{ asset('assets/js/global/fonctions.js') }}"></script>
<script src="{{ asset('assets/js/projet/projet_view.js') }}"></script>
<script src="{{ asset('assets/js/projet/mecene.js') }}"></script>

<script src="{{ asset('assets/js/data/search_mecene_ajax.js') }}"></script>
<script src="{{ asset('assets/js/data/update_datatable.js') }}"></script>

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