{% extends 'b_index.html.twig' %}

{% block title %}Gestion des permissions{% endblock %}
{% block stylesheets %}
    {{ encore_entry_link_tags('app_table') }}
{% endblock %}
{% block body %}
    <meta name="view-transition" content="same-origin" />

    {#    <meta name="turbo-visit-control" content="reload">#}
    <div class="row">
        <div class="col py-2 px-3 ">
            <h1>Liste des Permissions pour le role {{ role.label }}</h1>
        </div>
        <div class="col py-2 px-3 ">
        </div>
       {# <div class="col py-2 px-3 ">
            <button style="float: right;" type="button"
                    class="btn btn-light-primary   btn-lg px-4 fs-4 font-weight-medium" data-bs-toggle="modal"
                    data-bs-target="#ajouter"><i class="fas fa-plus"> </i> Ajouter
            </button>
        </div>

    </div>

    <!-- Primary header modal -->
    <!-- Primary Header Modal -->
    <div id="ajouter" class="modal fade" tabindex="-1"
         aria-labelledby="primary-header-modalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg"> <!-- Ajout de modal-lg ici -->
            <div class="modal-content">
                <div class="modal-header modal-colored-header bg-primary text-white">
                    <h4 class="modal-title" id="primary-header-modalLabel">Ajouter Permission pour le role {{ role.label }}</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h5 class="mt-0">Remplir le formulaire</h5>
                    {{ render(controller('App\\Controller\\RolePermissionController::editPermissionsForRole', {'id': role.id})) }}
                </div>
            </div>
        </div>
    </div>
#}


    <!-- Bouton pour ouvrir la modale -->
  {#  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#permissionsModal">
        Gérer les permissions
    </button>
#}


        {# Toast Bootstrap - Succès #}
  {#      <div class="toast-container position-fixed top-0 end-0 p-3" style="z-index:1080">
            <div id="saveToast"
                 class="toast align-items-center text-bg-success border-0"
                 role="status" aria-live="polite" aria-atomic="true">
                <div class="d-flex">
                    <div id="saveToastBody" class="toast-body">
                        Permissions mises à jour avec succès.
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto"
                            data-bs-dismiss="toast" aria-label="Fermer"></button>
                </div>
            </div>
        </div>#}


    {#    <!-- Modale Bootstrap -->
    <div class="modal fade" id="permissionsModal" tabindex="-1" aria-labelledby="permissionsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="permissionsModalLabel">Gérer les permissions pour {{ role.label }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                </div>
                <div class="modal-body">
                    <!-- Zone de chargement AJAX -->
                    <div id="permissionsFormContainer">
                        <h5 class="mt-0">Remplir le formulaire</h5>
                        {{ render(controller('App\\Controller\\RolePermissionController::editPermissionsForRole', {'id': role.id})) }}                    </div>
                </div>
            </div>
        </div>
    </div>#}

        <!-- Bouton pour ouvrir la modale -->
        <div class="col py-2 px-3 ">
            <button style="float: right;" type="button"
                    class="btn btn-light-primary   btn-lg px-4 fs-4 font-weight-medium" data-bs-toggle="modal"
                    data-bs-target="#permissionsModal"><i class="fas fa-setting"> </i> Gérer les permissions
            </button>
        </div>

        <!-- Modale Bootstrap -->
        <div class="modal fade" id="permissionsModal" tabindex="-1" aria-labelledby="permissionsModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header bg-primary text-white">
                        <h5 class="modal-title" id="permissionsModalLabel">Gérer les permissions pour {{ role.label }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                    </div>
                    <div class="modal-body">
                        <div id="permissionsFormContainer">
                            {{ render(controller('App\\Controller\\RolePermissionController::editPermissionsForRole', {'id': role.id})) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>


    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="border-bottom title-part-padding">


                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <div id="table-container">
                            {% include 'role_permission/_table_wrapper.html.twig' with {
                                'role_permissions': role_permissions,
                                'role': role
                            } %}
                        </div>


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


        {# Toast Bootstrap - Succès #}
        <div class="toast-container position-fixed top-0 end-0 p-3" style="z-index:1080">
            <div id="saveToast"
                 class="toast align-items-center text-bg-success border-0 d-none"
                 role="status" aria-live="polite" aria-atomic="true">
                <div class="d-flex">
                    <div id="saveToastBody" class="toast-body">
                        Permissions mises à jour avec succès.
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto"
                            data-bs-dismiss="toast" aria-label="Fermer"></button>
                </div>
            </div>
        </div>



        {#
        <div id="test-table-container">
            <table id="test_table" border="1">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Permission</th>
                </tr>
                </thead>
                <tbody id="test-table-body">
                {% for item in role_permissions %}
                    <tr>
                        <td>{{ item.id }}</td>
                        <td>{{ item.permission.label }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>#}

{% endblock %}

        {% block javascripts %}
            {{ encore_entry_script_tags('apps_table') }}

            <script>
                // 1) Utilitaire: toast de succès (Bootstrap si dispo, sinon fallback .show)
                function showSuccessToast(message) {
                    const toastEl = document.getElementById('saveToast');
                    const bodyEl  = document.getElementById('saveToastBody');
                    if (!toastEl || !bodyEl) return;

                    bodyEl.textContent = message || 'Opération réussie.';
                    toastEl.classList.remove('d-none'); // on rend visible avant show()

                    if (window.bootstrap && window.bootstrap.Toast) {
                        const t = window.bootstrap.Toast.getOrCreateInstance(toastEl, { delay: 2500, autohide: true });
                        // Quand le toast se cache, on re-cache l’élément pour éviter l’auto-show au prochain load
                        toastEl.addEventListener('hidden.bs.toast', () => {
                            toastEl.classList.add('d-none');
                        }, { once: true });
                        t.show();
                    } else {
                        // Fallback sans Bootstrap JS
                        toastEl.classList.add('show');
                        setTimeout(() => {
                            toastEl.classList.remove('show');
                            toastEl.classList.add('d-none');
                        }, 2500);
                    }
                }
            </script>

            <script>
                // 2) Init DataTables au 1er chargement
                $(function () {
                    if ($.fn.DataTable && !$.fn.dataTable.isDataTable('#file_export')) {
                        $('#file_export').DataTable({
                            dom: 'Bfrtip',
                            buttons: ['copy','csv','excel','pdf','print']
                        });
                        $('.buttons-copy, .buttons-csv, .buttons-print, .buttons-pdf, .buttons-excel')
                            .addClass('btn btn-primary mr-1');
                    }
                });
            </script>

            <script>
                // 3) Flux AJAX: charge form, submit, replace table, re-init DT, toast
                document.addEventListener('DOMContentLoaded', () => {
                    const modalEl = document.getElementById('permissionsModal');

                    modalEl.addEventListener('show.bs.modal', () => {
                        const container = document.getElementById('permissionsFormContainer');
                        container.textContent = 'Chargement...';

                        fetch('{{ path("app_role_permission_form_partial", {"id": role.id}) }}')
                            .then(r => r.text())
                            .then(html => {
                                container.innerHTML = html;

                                const form = document.getElementById('permissionsForm');
                                const toggleBtn = document.getElementById('toggle-all');

                                // Tout cocher / décocher
                                if (toggleBtn) {
                                    let toggle = false;
                                    toggleBtn.addEventListener('click', () => {
                                        form.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = !toggle);
                                        toggle = !toggle;
                                    });
                                }

                                // Intercepter le submit
                                form.addEventListener('submit', (e) => {
                                    e.preventDefault();
                                    const fd = new FormData(form);

                                    fetch(form.action, { method: 'POST', body: fd })
                                        .then(res => {
                                            if (!res.ok) throw new Error('Serveur a répondu non-OK');

                                            // Fermer la modale sans API Bootstrap
                                            modalEl.querySelector('[data-bs-dismiss="modal"]')?.click();

                                            // Détruire DataTables AVANT remplacement
                                            if ($.fn.DataTable && $.fn.dataTable.isDataTable('#file_export')) {
                                                $('#file_export').DataTable().destroy();
                                            }

                                            // Recharger la table complète
                                            return fetch('{{ path("app_role_permission_partial_table", {"id": role.id}) }}');
                                        })
                                        .then(r => r.text())
                                        .then(html => {
                                            // Remplacer toute la table
                                            document.getElementById('table-container').innerHTML = html;

                                            // Ré-initialiser DataTables après remplacement
                                            if ($.fn.DataTable) {
                                                $('#file_export').DataTable({
                                                    dom: 'Bfrtip',
                                                    buttons: ['copy','csv','excel','pdf','print']
                                                });
                                                $('.buttons-copy, .buttons-csv, .buttons-print, .buttons-pdf, .buttons-excel')
                                                    .addClass('btn btn-primary mr-1');
                                            }

                                            // ✅ Toast succès
                                            showSuccessToast('Permissions mises à jour avec succès !');
                                        })
                                        .catch(err => {
                                            console.error('🧨 Erreur AJAX:', err);
                                            alert('Erreur lors de la mise à jour');
                                        });
                                });
                            })
                            .catch(err => {
                                console.error('🧨 Erreur chargement du formulaire:', err);
                                container.textContent = 'Erreur de chargement du formulaire';
                            });
                    });
                });
            </script>
        {% endblock %}