{% 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>
    <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">Packs</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 pack
                        </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_produit" class="table text-nowrap mb-0 align-middle w-100" > 
                        <thead>
                          <tr>
                            <th>Nom</th>
                            <th>Bundles</th>
                            <th>Prix HT</th>
                            <th></th>
                          </tr>
                        </thead>
                        <tbody>

                        </tbody>
                        <tfoot>
                          <tr>
                            <th>Nom</th>
                            <th>Bundles</th>
                            <th>Prix HT</th>
                            <th></th>
                          </tr>
                        </tfoot>
                      </table>
                    </div>
                </div>
              </div>
            </div>

        </div>

      <script>
        const tableEntity = $('#list_produit').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_list_pack')}}', // URL du backend
                type: 'GET',
                cache: false,
            },
            columns: [
                { data: 'nom' },
                { data: 'bundles' },
                { data: 'prix' },           
                { 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'
            },
            {
                text: 'Afficher tous les produits',
                action: function(e, dt, node, config) {
                    // Filtre pour afficher tous les utilisateurs (sans filtre sur le statut)
                    $.fn.dataTable.ext.search.pop();
                    table.draw();
                },
                className: 'btn btn-primary'
            }
        ],
        language: {
            "info":           "Voir _START_ à _END_ de _TOTAL_ produits",
            "infoEmpty":      "Voir 0 à 0 de 0 produits",
            "search":         "Rechercher:",
            "paginate": {
                "first":      "Premier",
                "last":       "Dernier",
                "next":       "Suivant",
                "previous":   "Précédent"
            },
            "infoFiltered": '(filtrés de _MAX_ produits)',
        }
    });
    
  tinymce.init({
      selector: "textarea#description",
      menubar: false,
      plugins: ["link", "lists", "code"],
      toolbar: "bold italic | bullist numlist | code",
  });

    function handleColorTheme(e) {
        document.documentElement.setAttribute("data-color-theme", e);
    }
    const addRoute = "{{ path('produit_add') }}";
    const updateRoute = "{{ path('produit_update') }}";
    const produitDeleteRoute = "{{ path('produit_delete', { 'id': 'ID_PLACEHOLDER' }) }}";
    const getRoute = "{{ path('produit_get_update', { 'id': 'ID_PLACEHOLDER' }) }}";
    
    document.addEventListener("DOMContentLoaded", () => {
    const modalElement = document.getElementById("editModal");

    // Fonction pour initialiser TinyMCE
    const initializeTinyMCE = () => {
        const textarea = document.querySelector("textarea#descriptionupdate");

        if (textarea) {
            // Supprimer l'instance existante pour éviter les conflits
            if (tinymce.get("descriptionupdate")) {
                tinymce.get("descriptionupdate").remove();
            }

            // Initialiser TinyMCE
            tinymce.init({
                selector: "textarea#descriptionupdate",
                menubar: false,
                plugins: ["link", "lists", "code"],
                toolbar: "bold italic | bullist numlist | code",
            });
        }
    };

    // Utiliser setInterval pour vérifier l'existence du textarea
    let interval = setInterval(() => {
        if (modalElement && modalElement.classList.contains("show")) {
            const textarea = modalElement.querySelector("textarea#descriptionupdate");

            if (textarea) {
                // Initialiser TinyMCE si un textarea est détecté
                initializeTinyMCE();

                // Arrêter l'intervalle une fois TinyMCE initialisé
                clearInterval(interval);
            }
        }
    }, 500);

    // Redémarrer l'intervalle à chaque affichage de la modal
    modalElement.addEventListener("shown.bs.modal", () => {

        const interval = setInterval(() => {
            if (modalElement.classList.contains("show")) {
                const textarea = document.querySelector("textarea#descriptionupdate");

                if (textarea) {
                    initializeTinyMCE();
                    clearInterval(interval);
                }
            }
        }, 500);
    });

    // Arrêter l'intervalle lorsque la modal est fermée
    modalElement.addEventListener("hidden.bs.modal", () => {
        clearInterval(interval);

        // Supprimer TinyMCE si nécessaire
        if (tinymce.get("descriptionupdate")) {
            tinymce.get("descriptionupdate").remove();
        }
    });
});

</script>


    </div>

{% include '@Commercial/pack/modal/new_pack.html.twig' %} 

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

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