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

{% block title %}Personnel{% endblock %}

{% block body %}

    <div class="col-lg-4 col-xlg-3 col-md-5" style="border-right: #0a0a0a solid">
        <div class="card">
            <div class="card-body">
                <center class="mt-4"><i class="fa fa-user-circle"></i>
                    <h4 class="card-title mt-2">{{ personnel.nom |upper }} {{ personnel.postnom |upper }} {{ personnel.prenom |upper }}</h4>
                    <h6 class="card-subtitle">Personnel chez TransDavid</h6>
                    {# <div class="row text-center justify-content-md-center">
                        <div class="col-4"><a href="javascript:void(0)" class="link"><i class="icon-people"></i> <font class="font-weight-medium">254</font></a></div>
                        <div class="col-4"><a href="javascript:void(0)" class="link"><i class="icon-picture"></i> <font class="font-weight-medium">54</font></a></div>
                    </div> #}
                </center>
            </div>
            <div>
                <hr>
            </div>
            <div class="card-body"><small class="text-muted">Email adresse </small>
                <h6>{{ personnel.email }}</h6> <small class="text-muted pt-4 db">Contact</small>
                <h6>{{ personnel.phone }}</h6> <small class="text-muted pt-4 db">Adresse</small>
                <h6>{{ personnel.adresse }}</h6><small class="text-muted pt-4 db">Role</small>

                {# {% set items=userroles %}

                {% for item in items %}
                <h6>{{ item.role.label }}</h6>
                {% endfor %} #}
                <div id="table-container">

                    {% include 'personnel/_table_wrapper.html.twig' with {
                        'user_roles': userroles,
                        'user': personnel.user
                    } %}
                </div>

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

    <button 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-plus"> </i> Ajouter role
    </button>



    <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 roles pour {{ personnel.nom }}</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\\UserRoleController::editRoleforUser', {'id': personnel.user.id})) }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# <a href="{{ path('app_personnel_index') }}">back to list</a>

    <a href="{{ path('app_personnel_edit', {'id': personnel.id}) }}">edit</a> #}

    {# {{ include('personnel/_delete_form.html.twig') }} #}
{% 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_user_role_form_partial", {"id": personnel.user.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_user_role_partial_table", {"id": personnel.user.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 %}