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

{% block title %}Places, capacité & personnel{% endblock %}

{% block page_title %}Places, capacité & personnel{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('assets/plugins/custom/datatables/dataTables.bootstrap5.min.css') }}" rel="stylesheet" type="text/css">
    <style>
        /* Chevron pivote selon l'état ouvert/fermé des panneaux repliables (aria-expanded posé par Bootstrap collapse). */
        [data-bs-toggle="collapse"] .chevron-groupes,
        [data-bs-toggle="collapse"] .chevron-recherche { transition: transform 0.2s ease; }
        [data-bs-toggle="collapse"][aria-expanded="true"] .chevron-groupes,
        [data-bs-toggle="collapse"][aria-expanded="true"] .chevron-recherche { transform: rotate(180deg); }
    </style>
{% endblock %}

{% block body %}
    <div class="card mb-5 mb-xl-8">
        <div class="card-header cursor-pointer" data-bs-toggle="collapse" data-bs-target="#collapse-groupes" aria-expanded="false" aria-controls="collapse-groupes">
            <div class="card-title"><h3>Groupes</h3></div>
            <div class="card-toolbar">
                <i class="ki-outline ki-down fs-1 chevron-groupes"></i>
            </div>
        </div>
        <div class="collapse" id="collapse-groupes">
            <div class="card-body pt-0">
                <div class="table-responsive mb-6">
                    <table class="table align-middle table-row-dashed fs-6 gy-5">
                        <thead>
                            <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                <th>Nom</th>
                                <th>Âge</th>
                                <th>Capacité max</th>
                                <th>Tarifs</th>
                                <th>Statut</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody class="fw-semibold text-gray-600">
                            {% for groupe in groupes %}
                                <tr>
                                    <td>{{ groupe.nom }}</td>
                                    <td>
                                        {% if groupe.ageMinMois or groupe.ageMaxMois %}
                                            {{ groupe.ageMinMois ?? '?' }} - {{ groupe.ageMaxMois ?? '?' }} mois
                                        {% else %}
                                            <span class="text-muted">-</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ groupe.capaciteMax ?? '-' }}</td>
                                    <td>
                                        {% if groupe.fraisInscription or groupe.tarifMensualite %}
                                            {{ groupe.fraisInscription|montant }} FCFA inscription<br>
                                            <span class="text-muted fs-8">{{ groupe.tarifMensualite|montant }} FCFA x {{ groupe.nombreMensualites }} mensualités</span>
                                        {% else %}
                                            <span class="text-muted">Non renseignés</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if groupe.actif %}
                                            <span class="badge badge-light-success">Actif</span>
                                        {% else %}
                                            <span class="badge badge-light">Désactivé</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-end">
                                        <button type="button" class="btn btn-light btn-sm" data-bs-toggle="collapse" data-bs-target="#collapse-modifier-groupe-{{ groupe.id }}">Modifier</button>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                {% for groupe in groupes %}
                    <div class="collapse mb-4" id="collapse-modifier-groupe-{{ groupe.id }}">
                        <form method="post" action="{{ path('administration_personnel_groupe_modifier', {id: groupe.id}) }}" class="row g-3 align-items-end border rounded p-4 m-0">
                            <input type="hidden" name="_csrf_token" value="{{ csrf_token('personnel_groupe_modifier_' ~ groupe.id) }}">
                            <div class="col-12">
                                <strong>Modifier {{ groupe.nom }}</strong>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Nom</label>
                                <input type="text" name="nom" value="{{ groupe.nom }}" required class="form-control">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Âge min (mois)</label>
                                <input type="number" name="age_min_mois" value="{{ groupe.ageMinMois }}" class="form-control">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Âge max (mois)</label>
                                <input type="number" name="age_max_mois" value="{{ groupe.ageMaxMois }}" class="form-control">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Capacité max</label>
                                <input type="number" name="capacite_max" value="{{ groupe.capaciteMax }}" class="form-control">
                            </div>
                            <div class="col-md-1 form-check form-switch mb-2">
                                <input class="form-check-input" type="checkbox" name="actif" value="1" {% if groupe.actif %}checked{% endif %} id="actif-{{ groupe.id }}">
                                <label class="form-check-label" for="actif-{{ groupe.id }}">Actif</label>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Frais d'inscription</label>
                                <input type="text" name="frais_inscription" value="{{ groupe.fraisInscription }}" class="form-control">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Montant mensualité</label>
                                <input type="text" name="tarif_mensualite" value="{{ groupe.tarifMensualite }}" class="form-control">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Nombre de mensualités</label>
                                <input type="number" name="nombre_mensualites" value="{{ groupe.nombreMensualites }}" class="form-control">
                            </div>
                            <div class="col-md-2">
                                <button type="submit" class="btn btn-primary">Enregistrer</button>
                            </div>
                        </form>
                    </div>
                {% endfor %}

                <div class="card border">
                    <div class="card-header cursor-pointer min-h-auto py-3" data-bs-toggle="collapse" data-bs-target="#collapse-nouveau-groupe">
                        <div class="card-title m-0"><h5 class="m-0">+ Nouveau groupe</h5></div>
                    </div>
                    <div class="collapse" id="collapse-nouveau-groupe">
                        <div class="card-body">
                            <form method="post" action="{{ path('administration_personnel_groupe_nouveau') }}" class="row g-3 align-items-end">
                                <input type="hidden" name="_csrf_token" value="{{ csrf_token('personnel_groupe_nouveau') }}">
                                <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-2">
                                    <label class="form-label">Âge min (mois)</label>
                                    <input type="number" name="age_min_mois" class="form-control">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">Âge max (mois)</label>
                                    <input type="number" name="age_max_mois" class="form-control">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">Capacité max</label>
                                    <input type="number" name="capacite_max" class="form-control">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">Frais d'inscription</label>
                                    <input type="text" name="frais_inscription" class="form-control">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">Montant mensualité</label>
                                    <input type="text" name="tarif_mensualite" class="form-control">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">Nombre de mensualités</label>
                                    <input type="number" name="nombre_mensualites" class="form-control">
                                </div>
                                <div class="col-md-2">
                                    <button type="submit" class="btn btn-primary">Créer le groupe</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card mb-5 mb-xl-8">
        <div class="card-header cursor-pointer" data-bs-toggle="collapse" data-bs-target="#collapse-recherche" aria-expanded="false" aria-controls="collapse-recherche">
            <div class="card-title"><h3>Rechercher</h3></div>
            <div class="card-toolbar">
                <i class="ki-outline ki-down fs-1 chevron-recherche"></i>
            </div>
        </div>
        <div class="collapse" id="collapse-recherche">
            <div class="card-body pt-0">
                <form id="form-recherche" class="row g-3 align-items-end">
                    <div class="col-md-3">
                        <label class="form-label">Nom</label>
                        <input type="text" name="nom" class="form-control">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Prénom</label>
                        <input type="text" name="prenom" class="form-control">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Groupe (affectation)</label>
                        <select name="groupe" class="form-select">
                            <option value="">Tous</option>
                            {% for groupe in groupes %}
                                <option value="{{ groupe.id }}">{{ groupe.nom }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <button type="submit" class="btn btn-primary">Rechercher</button>
                        <button type="reset" class="btn btn-light">Réinitialiser</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title"><h3>Personnel</h3></div>
        </div>
        <div class="card-body pt-0">
            <div class="table-responsive">
                <table id="tbl-personnel" 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>Groupes</th>
                            <th>Statut</th>
                            <th>Actions</th>
                        </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 () {
            var filtres = {};
            var groupesOptions = {{ groupes|map(g => {id: g.id, nom: g.nom})|json_encode|raw }};

            function optionsGroupes(selectionneId) {
                return groupesOptions.map(function (g) {
                    var selected = String(g.id) === String(selectionneId) ? ' selected' : '';
                    return '<option value="' + g.id + '"' + selected + '>' + escapeHtml(g.nom) + '</option>';
                }).join('');
            }

            var table = $('#tbl-personnel').DataTable({
                serverSide: true,
                searching: false,
                order: [[0, 'asc']],
                ajax: {
                    url: '{{ path('administration_personnel_donnees') }}',
                    type: 'GET',
                    data: function (d) { Object.assign(d, filtres); }
                },
                language: DATATABLES_FR,
                columns: [
                    {
                        data: 'nom',
                        render: function (data, type, row) {
                            if (type !== 'display') { return data; }
                            var civilite = row.civiliteLabel ? escapeHtml(row.civiliteLabel) + ' ' : '';
                            return '<strong>' + civilite + escapeHtml(row.prenom) + ' ' + escapeHtml(row.nom) + '</strong>';
                        }
                    },
                    { 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: null,
                        orderable: false,
                        render: function (data, type, row) {
                            if (type !== 'display') { return ''; }
                            return row.groupes.length ? escapeHtml(row.groupes.join(', ')) : '<span class="text-muted">aucun</span>';
                        }
                    },
                    {
                        data: 'actif',
                        render: function (data, type, row) {
                            if (type !== 'display') { return data ? 1 : 0; }
                            var html = row.actif
                                ? '<span class="badge badge-light-success">Actif</span>'
                                : '<span class="badge badge-light">Désactivé</span>';
                            if (row.dateExpirationAcces) {
                                html += '<br><span class="badge badge-light-warning mt-1">Accès borné au ' + escapeHtml(row.dateExpirationAcces) + '</span>';
                            }
                            return html;
                        }
                    },
                    {
                        data: null,
                        orderable: false,
                        className: 'text-end',
                        render: function (data, type, row) {
                            if (type !== 'display') { return ''; }
                            return '<button type="button" class="btn btn-light btn-sm btn-gerer-personnel">Gérer</button>';
                        }
                    }
                ]
            });

            function contenuGererPersonnel(row) {
                var html = '<div class="p-5 bg-light-secondary rounded d-flex flex-column gap-6">';

                html += '<div><div class="fs-7 fw-bold text-muted mb-2">Affectation à un groupe</div>' +
                    '<form method="post" action="' + row.urlAffecterGroupe + '" class="d-flex flex-wrap gap-2 align-items-end">' +
                    '<input type="hidden" name="_csrf_token" value="' + escapeHtml(row.csrfGroupe) + '">' +
                    '<select name="groupe_id" class="form-select form-select-sm" style="max-width: 220px;">' + optionsGroupes() + '</select>' +
                    '<button type="submit" name="action" value="affecter" class="btn btn-light-primary btn-sm">Affecter</button>' +
                    '<button type="submit" name="action" value="retirer" class="btn btn-light btn-sm">Retirer</button>' +
                    '</form></div>';

                html += '<div><div class="fs-7 fw-bold text-muted mb-2">Accès au compte</div>';
                if (row.actif) {
                    html += '<form method="post" action="' + row.urlRevoquer + '">' +
                        '<input type="hidden" name="_csrf_token" value="' + escapeHtml(row.csrfRevoquer) + '">' +
                        '<button type="submit" class="btn btn-light-danger btn-sm">Révoquer l\'accès (départ)</button>' +
                        '</form>';
                } else {
                    html += '<form method="post" action="' + row.urlReactiver + '">' +
                        '<input type="hidden" name="_csrf_token" value="' + escapeHtml(row.csrfReactiver) + '">' +
                        '<button type="submit" class="btn btn-light-success btn-sm">Réactiver l\'accès</button>' +
                        '</form>';
                }
                html += '</div>';

                html += '<div><div class="fs-7 fw-bold text-muted mb-2">Accès temporaire (remplacement)</div>' +
                    '<form method="post" action="' + row.urlAccesTemporaire + '" class="d-flex flex-wrap gap-2 align-items-end">' +
                    '<input type="hidden" name="_csrf_token" value="' + escapeHtml(row.csrfAccesTemporaire) + '">' +
                    '<input type="datetime-local" name="date_expiration" class="form-control form-control-sm" style="max-width: 220px;">' +
                    '<button type="submit" class="btn btn-light btn-sm">Définir (vide = permanent)</button>' +
                    '</form></div>';

                html += '</div>';

                return html;
            }

            $('#tbl-personnel tbody').on('click', 'button.btn-gerer-personnel', function () {
                var tr = $(this).closest('tr');
                var ligne = table.row(tr);

                if (ligne.child.isShown()) {
                    ligne.child.hide();
                    tr.removeClass('shown');
                } else {
                    ligne.child(contenuGererPersonnel(ligne.data())).show();
                    tr.addClass('shown');
                }
            });

            $('#form-recherche').on('submit', function (e) {
                e.preventDefault();
                filtres = {
                    nom: $('#form-recherche [name=nom]').val(),
                    prenom: $('#form-recherche [name=prenom]').val(),
                    groupe: $('#form-recherche [name=groupe]').val()
                };
                table.ajax.reload();
            });

            $('#form-recherche').on('reset', function () {
                filtres = {};
                table.ajax.reload();
            });
        });
    </script>
{% endblock %}