{% extends 'admin_technique/_layout.html.twig' %}

{% block title %}Utilisateurs{% endblock %}

{% block page_title %}Utilisateurs{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('assets/plugins/custom/datatables/dataTables.bootstrap5.min.css') }}" rel="stylesheet" type="text/css">
{% endblock %}

{% block body %}
    <style>
        /* Chevron pivote selon l'état ouvert/fermé du panneau "Nouveau compte" (aria-expanded posé par Bootstrap collapse). */
        [data-bs-toggle="collapse"] .chevron-nouveau-compte { transition: transform 0.2s ease; }
        [data-bs-toggle="collapse"][aria-expanded="true"] .chevron-nouveau-compte { transform: rotate(180deg); }
    </style>

    <div class="card mb-5 mb-xl-8">
        <div class="card-header cursor-pointer" data-bs-toggle="collapse" data-bs-target="#collapse-nouveau-compte" aria-expanded="false" aria-controls="collapse-nouveau-compte">
            <div class="card-title"><h3>Nouveau compte</h3></div>
            <div class="card-toolbar">
                <i class="ki-outline ki-down fs-1 chevron-nouveau-compte"></i>
            </div>
        </div>
        <div class="collapse" id="collapse-nouveau-compte">
            <div class="card-body pt-0">
            <form method="post" action="{{ path('admin_technique_utilisateurs_nouveau') }}" class="row g-3">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('admin_technique_utilisateurs_nouveau') }}">

                <div class="col-md-2">
                    <label class="form-label">Civilité *</label>
                    <select name="civilite" required class="form-select">
                        <option value="">Choisir...</option>
                        {% for civilite in civilites %}
                            <option value="{{ civilite.value }}">{{ civilite.label }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Prénom *</label>
                    <input type="text" name="prenom" required class="form-control">
                </div>
                <div class="col-md-3">
                    <label class="form-label">Nom *</label>
                    <input type="text" name="nom" required class="form-control">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Email *</label>
                    <input type="email" name="email" required class="form-control">
                </div>
                <div class="col-md-3">
                    <label class="form-label">Établissement</label>
                    <select name="etablissement_id" class="form-select">
                        <option value="">Aucun (compte transverse)</option>
                        {% for etablissement in etablissements %}
                            <option value="{{ etablissement.id }}"{% if etablissements|length == 1 %} selected{% endif %}>{{ etablissement.nom }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="col-12">
                    <label class="form-label">Rôle(s) *</label>
                    <div class="d-flex flex-wrap gap-4">
                        {% for role, info in rolesInfo %}
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="roles[]" value="{{ role }}" id="role-{{ role }}">
                                <label class="form-check-label" for="role-{{ role }}" title="{{ info.description }}">{{ info.libelle }}</label>
                            </div>
                        {% endfor %}
                    </div>
                </div>

                <div class="col-12">
                    <div class="form-text mb-3">Un email d'activation sera envoyé à l'adresse saisie ; la personne y définira elle-même son mot de passe.</div>
                    <button type="submit" class="btn btn-primary">Créer le compte</button>
                </div>
            </form>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title"><h3>Comptes</h3></div>
        </div>
        <div class="card-body pt-0">
            <div class="table-responsive">
                <table id="tbl-utilisateurs" class="table align-middle table-row-dashed fs-6 gy-5 w-100">
                    <thead>
                        <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                            <th>Nom</th>
                            <th>Email</th>
                            <th>Rôle(s)</th>
                            <th>Établissement</th>
                            <th>Statut</th>
                            <th>Créé le</th>
                            <th>Dernière connexion</th>
                            {% if is_granted('ROLE_DIRECTION') %}<th>Actions</th>{% endif %}
                        </tr>
                    </thead>
                    <tbody class="fw-semibold text-gray-600"></tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts_bottom %}
    {{ parent() }}
    <script src="{{ asset('assets/plugins/custom/datatables/dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/datatables/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/custom/datatables/datatables-fr.js') }}"></script>
    <script>
        $(function () {
            $('#tbl-utilisateurs').DataTable({
                serverSide: true,
                order: [[0, 'asc']],
                ajax: { url: '{{ path('admin_technique_utilisateurs_donnees') }}', type: 'GET' },
                language: DATATABLES_FR,
                columns: [
                    {
                        data: 'nom',
                        render: function (data, type, row) {
                            if (type !== 'display') { return data; }
                            var civilite = row.civiliteLabel ? escapeHtml(row.civiliteLabel) + ' ' : '';
                            return civilite + escapeHtml(row.prenom) + ' ' + escapeHtml(row.nom);
                        }
                    },
                    { data: 'email', render: DataTable.render.text() },
                    {
                        data: null,
                        orderable: false,
                        render: function (data, type, row) {
                            if (type !== 'display') { return ''; }
                            return row.roles.map(function (role) {
                                return '<span class="badge badge-light-primary me-1" title="' + escapeHtml(role.description) + '">' + escapeHtml(role.label) + '</span>';
                            }).join('');
                        }
                    },
                    {
                        data: 'etablissement',
                        render: function (data, type, row) {
                            if (type !== 'display') { return data || ''; }
                            return row.etablissement ? escapeHtml(row.etablissement) : '-';
                        }
                    },
                    {
                        data: 'actif',
                        render: function (data, type, row) {
                            if (type !== 'display') { return data ? 1 : 0; }
                            return row.actif
                                ? '<span class="badge badge-light-success">Actif</span>'
                                : '<span class="badge badge-light">Désactivé</span>';
                        }
                    },
                    { data: 'dateCreation', render: DataTable.render.text() },
                    {
                        data: 'derniereConnexion',
                        render: function (data, type, row) {
                            if (type !== 'display') { return data || ''; }
                            return row.derniereConnexion ? escapeHtml(row.derniereConnexion) : 'jamais';
                        }
                    },
                    {% if is_granted('ROLE_DIRECTION') %}
                    {
                        data: null,
                        orderable: false,
                        render: function (data, type, row) {
                            if (type !== 'display') { return ''; }

                            var html = '<div class="d-flex flex-wrap gap-2">';

                            if (row.urlModifier) {
                                html += '<a href="' + row.urlModifier + '" class="btn btn-light-primary btn-sm">Modifier</a>';
                            }

                            if (row.actif) {
                                html += '<form method="post" action="' + row.urlDesactiver + '">' +
                                    '<input type="hidden" name="_csrf_token" value="' + escapeHtml(row.csrfDesactiver) + '">' +
                                    '<button type="submit" class="btn btn-light-danger btn-sm">Désactiver</button>' +
                                    '</form>';
                            } else {
                                html += '<form method="post" action="' + row.urlActiver + '">' +
                                    '<input type="hidden" name="_csrf_token" value="' + escapeHtml(row.csrfActiver) + '">' +
                                    '<button type="submit" class="btn btn-light-success btn-sm">Activer</button>' +
                                    '</form>';
                            }

                            if (row.urlSupprimer) {
                                html += '<form method="post" action="' + row.urlSupprimer + '" onsubmit="return confirm(\'Supprimer définitivement ce compte (' + escapeHtml(row.email) + ') ? Cette action est irréversible.\');">' +
                                    '<input type="hidden" name="_csrf_token" value="' + escapeHtml(row.csrfSupprimer) + '">' +
                                    '<button type="submit" class="btn btn-light-danger btn-sm" title="Uniquement possible {{ delaiSuppressionMinutes }} min après la création, tant que le compte ne s\'est jamais connecté">Supprimer (erreur de création)</button>' +
                                    '</form>';
                            }

                            html += '</div>';

                            return html;
                        }
                    }
                    {% endif %}
                ]
            });
        });
    </script>
{% endblock %}