{% extends 'school/base.html.twig' %}

{% block title %}{{ classe.nom }} | SALSABIL Madrassas{% endblock %}

{% block content %}
    <div class="admin-page-stack">
        <section class="admin-page-header">
            <div>
                <p class="admin-eyebrow">CLASSE / GROUPE</p>
                <h1 class="admin-page-title">{{ classe.nom }}</h1>
                <p>Vue détaillée de la classe, de son organisation et des étudiants rattachés.</p>
            </div>
            <div class="admin-hero-actions">
                <a class="admin-btn admin-btn-light" href="{{ path('school_classe_index') }}">Retour aux classes</a>
                <a class="admin-btn admin-btn-primary" href="{{ path('school_classe_edit', {id: classe.id}) }}">Modifier</a>
            </div>
        </section>

        <section class="school-summary-grid school-summary-grid-four">
            <article class="school-summary-card"><span>Étudiants</span><strong>{{ etudiants|length }}</strong></article>
            <article class="school-summary-card"><span>Capacité</span><strong>{{ classe.capacite ?: '-' }}</strong></article>
            <article class="school-summary-card"><span>Mode</span><strong>{{ classe.mode ? classe.mode|replace({'_':' '})|title : '-' }}</strong></article>
            <article class="school-summary-card"><span>Tarif</span><strong>{{ classe.tarifDefaut ? classe.tarifDefaut|number_format(0, ',', ' ') ~ ' FCFA' : '-' }}</strong></article>
        </section>

        <section class="admin-grid admin-grid-school">
            <article class="admin-card">
                <div class="admin-card-head"><div><h2>Informations de la classe</h2><p>Ces informations servent aussi aux affectations des inscriptions.</p></div></div>
                <div class="admin-mini-list">
                    <div class="admin-mini-item"><div><strong>Section</strong><small>{{ classe.section ? classe.section.nom : '-' }}</small></div></div>
                    <div class="admin-mini-item"><div><strong>Niveau</strong><small>{{ classe.niveau ? classe.niveau.nom : '-' }}</small></div></div>
                    <div class="admin-mini-item"><div><strong>Année scolaire</strong><small>{{ classe.anneeScolaire ? classe.anneeScolaire.libelle : '-' }}</small></div></div>
                    <div class="admin-mini-item"><div><strong>Langue / public</strong><small>{{ classe.langue ? classe.langue|replace({'_':' '})|title : '-' }}{% if classe.sexe %} · {{ classe.sexe|replace({'_':' '})|title }}{% endif %}</small></div></div>
                    <div class="admin-mini-item"><div><strong>Horaires</strong><small>{{ classe.joursCours ?: '-' }}{% if classe.heureDebut %} · {{ classe.heureDebut|date('H:i') }}{% endif %}{% if classe.heureFin %} - {{ classe.heureFin|date('H:i') }}{% endif %}</small></div></div>
                    <div class="admin-mini-item"><div><strong>WhatsApp</strong><small>{{ classe.whatsappGroupInviteLink ?: classe.whatsappGroupId ?: 'Aucun groupe renseigné' }}</small></div></div>
                </div>
            </article>

            <article class="admin-card">
                <div class="admin-card-head"><div><h2>État du groupe</h2><p>Suivi rapide avant les affectations.</p></div></div>
                <div class="class-progress-box">
                    {% set capacity = classe.capacite ?: 0 %}
                    {% set count = etudiants|length %}
                    {% set percent = capacity > 0 ? ((count / capacity) * 100)|round(0, 'floor') : 0 %}
                    <div class="class-progress-ring"><strong>{{ percent }}%</strong><span>occupation</span></div>
                    <p>{{ count }} étudiant(s) actuellement rattaché(s){% if capacity %} sur {{ capacity }} place(s){% endif %}.</p>
                    {% include 'components/admin/status_badge.html.twig' with {label: classe.active ? 'Classe active' : 'Classe inactive', tone: classe.active ? 'success' : 'neutral'} only %}
                </div>
            </article>
        </section>

        <section class="admin-card admin-table-card">
            <div class="admin-card-head"><div><h2>Étudiants de la classe</h2><p>Liste des apprenants validés ou rattachés à ce groupe.</p></div></div>
            {% if etudiants is empty %}
                <div class="admin-empty-state"><span class="material-symbols-outlined">groups</span><strong>Aucun étudiant dans cette classe</strong><p>Les étudiants apparaîtront ici après validation ou affectation.</p></div>
            {% else %}
                <div class="table-responsive">
                    <table class="table admin-table school-table align-middle mb-0">
                        <thead><tr><th>Matricule</th><th>Nom complet</th><th>Téléphone</th><th>Section / niveau</th><th>Statut</th><th class="text-end">Actions</th></tr></thead>
                        <tbody>
                        {% for etudiant in etudiants %}
                            <tr>
                                <td><strong>{{ etudiant.matricule ?: etudiant.matriculeTemporaire ?: '-' }}</strong></td>
                                <td>{{ etudiant.nomComplet }}</td>
                                <td>{{ etudiant.telephoneWhatsapp ?: etudiant.telephonePrincipal ?: '-' }}</td>
                                <td>{{ etudiant.section ? etudiant.section.nom : '-' }}{% if etudiant.niveau %}<small class="d-block">{{ etudiant.niveau.nom }}</small>{% endif %}</td>
                                <td>{% include 'components/admin/status_badge.html.twig' with {label: etudiant.actif ? 'Actif' : 'Inactif', tone: etudiant.actif ? 'success' : 'neutral'} only %}</td>
                                <td class="text-end"><a class="admin-action-button" href="{{ path('school_etudiant_show', {id: etudiant.id}) }}">Voir</a></td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endif %}
        </section>
    </div>
{% endblock %}
