{% extends '@App/partials/base.html.twig' %}

{% block content %}

        <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">Secteurs d'activité</h4>
                  <nav aria-label="breadcrumb" class="ms-auto">
                    <ol class="breadcrumb">
                      <li class="breadcrumb-item d-flex align-items-center">
                        <button class="btn btn-primary me-1 submit-secteuractivite">
                            Enregistrer les modifications
                        </button>
                        <a href="{{ path('secteuractivite_add_modal') }}" class="btn btn-primary" data-turbo-frame="modal-frame">
                          Ajouter un secteur d'activité
                        </a>
                      </li>
                    </ol>
                  </nav>
                </div>
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-body">
              <turbo-frame id="secteur-table" src="{{path('secteur_activite_turbo_table')}}">
                Chargement des secteurs d'activité
              </turbo-frame>
            </div>
          </div>

      <script>
        const tableEntity = $('#list_secteur').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_secteur')}}', // URL du backend
                type: 'GET',
                cache: false,
            },
            columns: [
                { data: 'nom' },
                { data: 'action' },     
            ],
            dom: 'Bfrtip', // Affiche les boutons en haut du tableau
             buttons: [
            {
                extend: 'excel',
                text: 'Exporter en Excel',
                filename: 'export_produits', // Nom du fichier exporté en Excel
                className: 'btn btn-success'
            },
            {
                extend: 'pdf',
                text: 'Exporter en PDF',
                filename: 'export_produits', // 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_ banques",
            "infoEmpty":      "Voir 0 à 0 de 0 banque",
            "search":         "Rechercher:",
            "paginate": {
                "first":      "Premier",
                "last":       "Dernier",
                "next":       "Suivant",
                "previous":   "Précédent"
            },
            "infoFiltered": '(filtrés de _MAX_ banques)',
            "zeroRecords": "Aucune banque correspondante trouvée",
           "emptyTable": "Aucune banque n'est enregistrée",

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


    </div>

{% endblock %}