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

{% block title %}Tableau de bord{% endblock %}

{% block page_title %}Tableau de bord{% endblock %}

{% block body %}
    <div class="card mb-5 mb-xl-8">
        <div class="card-header border-0 pt-6">
            <div class="card-title">
                <h3>Effectif &amp; taux d'occupation</h3>
            </div>
        </div>
        <div class="card-body pt-0">
            {% if vue.groupes is empty %}
                <div class="text-muted">Aucun groupe actif.</div>
            {% else %}
                <div id="graphe-effectif-groupes" class="mb-8"></div>
                <div class="table-responsive">
                    <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>Groupe</th>
                                <th>Effectif</th>
                                <th>Capacité</th>
                                <th>Taux d'occupation</th>
                            </tr>
                        </thead>
                        <tbody class="fw-semibold text-gray-600">
                            {% for ligne in vue.groupes %}
                                <tr>
                                    <td>{{ ligne.groupe.nom }}</td>
                                    <td>{{ ligne.effectif }}</td>
                                    <td>{{ ligne.capacite ?? '—' }}</td>
                                    <td>{{ ligne.tauxOccupation is not null ? ligne.tauxOccupation ~ ' %' : '—' }}</td>
                                </tr>
                            {% endfor %}
                            <tr class="fw-bold text-gray-900">
                                <td>Total</td>
                                <td>{{ vue.totalEffectif }}</td>
                                <td>{{ vue.totalCapacite }}</td>
                                <td>{{ vue.tauxOccupationGlobal is not null ? vue.tauxOccupationGlobal ~ ' %' : '—' }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            {% endif %}
        </div>
    </div>

    <div class="card mb-5 mb-xl-8">
        <div class="card-header border-0 pt-6">
            <div class="card-title">
                <h3>Seuil de rentabilité</h3>
            </div>
        </div>
        <div class="card-body pt-0">
            {% if rentabilite.seuilEnfants is null %}
                <div class="text-muted">
                    Pas encore calculable : renseignez le plan tarifaire (frais d'inscription, mensualité)
                    d'au moins un groupe qui a des enfants inscrits (écran Personnel).
                </div>
            {% else %}
                <div class="alert {{ rentabilite.rentable ? 'alert-success' : 'alert-warning' }} mb-6">
                    Effectif actuel : <strong>{{ rentabilite.effectifActuel }}</strong> enfant{{ rentabilite.effectifActuel > 1 ? 's' : '' }}
                    — seuil de rentabilité estimé : <strong>{{ rentabilite.seuilEnfants }}</strong> enfant{{ rentabilite.seuilEnfants > 1 ? 's' : '' }}
                    ({{ rentabilite.rentable ? 'charges fixes couvertes' : 'charges fixes non couvertes' }}).
                </div>
                <div class="d-flex flex-wrap gap-6 mb-6">
                    <div>
                        <div class="fs-2 fw-bold text-gray-900">{{ rentabilite.chargesFixesMensuelles|number_format(0, ',', ' ') }} fcfa</div>
                        <div class="text-muted fs-7">Charges fixes mensuelles</div>
                    </div>
                    <div>
                        <div class="fs-2 fw-bold text-gray-900">{{ rentabilite.revenuMoyenMensuelParEnfant|number_format(0, ',', ' ') }} fcfa</div>
                        <div class="text-muted fs-7">Revenu mensuel moyen par enfant (mix actuel)</div>
                    </div>
                </div>
                <div id="graphe-seuil-rentabilite"></div>
                <div class="text-muted fs-8 mt-2">
                    Estimation indicative : ne tient pas compte de coûts variables par enfant (repas, couches...).
                </div>
            {% endif %}
        </div>
    </div>

    <div class="card mb-5 mb-xl-8">
        <div class="card-header border-0 pt-6">
            <div class="card-title">
                <h3>Reporting RH (basique)</h3>
            </div>
        </div>
        <div class="card-body pt-0">
            <div class="d-flex flex-wrap gap-6 mb-6">
                <div>
                    <div class="fs-2 fw-bold text-gray-900">{{ vue.personnel.actifs }}</div>
                    <div class="text-muted fs-7">Comptes actifs</div>
                </div>
                <div>
                    <div class="fs-2 fw-bold text-gray-900">{{ vue.personnel.revoques }}</div>
                    <div class="text-muted fs-7">Comptes révoqués</div>
                </div>
                <div>
                    <div class="fs-2 fw-bold text-gray-900">{{ vue.personnel.accesExpires }}</div>
                    <div class="text-muted fs-7">Accès temporaires expirés</div>
                </div>
            </div>

            {% if vue.personnel.parRole is empty %}
                <div class="text-muted">Aucun compte personnel.</div>
            {% else %}
                <div class="table-responsive">
                    <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>Rôle</th>
                                <th>Effectif</th>
                            </tr>
                        </thead>
                        <tbody class="fw-semibold text-gray-600">
                            {% for role, effectif in vue.personnel.parRole %}
                                <tr>
                                    <td>{{ rolesInfo[role].libelle ?? role }}</td>
                                    <td>{{ effectif }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block javascripts_bottom %}
    {{ parent() }}
    <script>
        (function () {
            var conteneur = document.getElementById('graphe-effectif-groupes');
            if (!conteneur) {
                return;
            }

            var donnees = {{ vue.groupes|map(l => {nom: l.groupe.nom, effectif: l.effectif, capacite: l.capacite})|json_encode|raw }};

            var graphe = new ApexCharts(conteneur, {
                chart: { type: 'bar', height: 300, toolbar: { show: false } },
                series: [
                    { name: 'Effectif', data: donnees.map(function (d) { return d.effectif; }) },
                    { name: 'Capacité', data: donnees.map(function (d) { return d.capacite; }) }
                ],
                xaxis: { categories: donnees.map(function (d) { return d.nom; }) },
                plotOptions: { bar: { columnWidth: '45%' } },
                dataLabels: { enabled: false },
                legend: { position: 'top' }
            });
            graphe.render();
        })();

        (function () {
            var conteneur = document.getElementById('graphe-seuil-rentabilite');
            if (!conteneur) {
                return;
            }

            var graphe = new ApexCharts(conteneur, {
                chart: { type: 'bar', height: 200, toolbar: { show: false } },
                series: [{
                    name: 'Enfants',
                    data: [
                        { x: 'Effectif actuel', y: {{ rentabilite.effectifActuel }} },
                        { x: 'Seuil de rentabilité', y: {{ rentabilite.seuilEnfants }} }
                    ]
                }],
                plotOptions: { bar: { horizontal: true, columnWidth: '45%' } },
                dataLabels: { enabled: true },
                legend: { show: false }
            });
            graphe.render();
        })();
    </script>
{% endblock %}