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

    <script src="{{ asset('assets/libs/jquery/dist/jquery.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">Annuaire</h4>
                  <nav aria-label="breadcrumb" class="ms-auto">
                    <ol class="breadcrumb">
                      <li class="breadcrumb-item d-flex align-items-center">
                        <button type="button" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#addAnnuaireModal">
                          Ajouter un contact
                        </button>
                      </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="filterType">Type :</label>
                      <select id="filterType" class="form-control select2">
                          <option value="" selected>Tous</option>
                            <option value="client">Clients</option>
                          <option value="contact">Contacts</option>
                          <option value="staff">Employés</option>
                          <option value="Partenaire">Partenaires</option>
                          <option value="Prestataire">Prestataires</option>
                      </select>
                  </div>

                  <!-- Filtre Projet -->
                  <div class="col-md-4">
                      <label for="filterSource">Source :</label>
                      <select id="filterSource" class="form-control select2">
                          <option value="">Tous</option>
                          {% for source in sources %}
                            <option value="{{source.idtoken}}">{{source.nom}}</option>
                          {% endfor %}
                      </select>
                  </div>
                </div>

                <div class="table-responsive">
                      <table
                        id="list_annuaire"
                        class="table border table-striped table-bordered display text-nowrap w-100"
                        style="100%"
                      >
                        <thead>
                          <tr>
                            <th>Nom</th>
                            <th>Prénom</th>
                            <th>Type</th>
                            <th>Email</th>
                            <th>Téléphone</th>
                            <th>Entreprise</th>
                            <th>Source</th>
                            <th></th>
                          </tr>
                        </thead>
                        <tbody>                          

                        </tbody>
                        <tfoot>
                          <tr>
                            <th>Nom</th>
                            <th>Prénom</th>
                            <th>Type</th>
                            <th>Email</th>
                            <th>Téléphone</th>
                            <th>Entreprise</th>
                            <th>Source</th>
                            <th></th>
                          </tr>
                        </tfoot>
                      </table>
                    </div>
                </div>
              </div>
            </div>

        </div>
      </div>

      <script>
        const tableEntity = $('#list_annuaire').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_list_annuaire')}}', // URL du backend
              type: 'GET',
              cache: false,
              data: function (d) {
                d.type = $('#filterType').val();  
                d.source = $('#filterSource').val(); 
              },
          },
          columns: [
              { data: 'nom' },
              { data: 'prenom' },
              { data: 'role' },
              { data: 'email' },
              { data: 'telephone' },
              { data: 'entreprise' },
              { data: 'source' },
              { data: 'action' },     
          ],
            dom: 'Bfrtip', // Affiche les boutons en haut du tableau
             buttons: [
            {
                extend: 'excel',
                text: 'Exporter en Excel',
                filename: 'export_employes', // Nom du fichier exporté en Excel
                className: 'btn btn-success'
            },
            {
                extend: 'pdf',
                text: 'Exporter en PDF',
                filename: 'export_employes', // 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_ utilisateurs",
            "infoEmpty":      "Voir 0 à 0 de 0 utilisateurs",
            "search":         "Rechercher:",
            "paginate": {
                "first":      "Premier",
                "last":       "Dernier",
                "next":       "Suivant",
                "previous":   "Précédent"
            },
            "infoFiltered": '(filtrés de _MAX_ utilisateurs)',
            "zeroRecords": "Aucun enregistrement correspondant trouvé",
            "emptyTable": "Aucune donnée disponible dans le tableau",
        }
    });
    
  $('#filterType, #filterSource').on('change', function () {
        tableEntity.ajax.reload();
    });

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

  const staffDeleteRoute = "{{ path('staff_delete', { 'id': 'ID_PLACEHOLDER' }) }}";
</script>
    </div>

    </div>

{% include '@Commercial/annuaire/modal/new_contact.html.twig' %} 
{% include 'partials/modal/delete_modal.html.twig' %} 
{% include 'partials/footer.html.twig' %}