{# templates/app/presences/recap_categorie.html.twig #}
{% extends 'app/base.html.twig' %}

{% block title %}Détail des présences — {{ nomCategorie }} — GestRestoSco{% endblock %}

{% block stylesheets %}
<style>
    @media print {
        .no-print,
        .app-topbar,
        .app-sidebar,
        .btn { display: none !important; }
        .app-main { margin-left: 0 !important; margin-top: 0 !important; padding: 0 !important; }
        .card { box-shadow: none !important; border: 1px solid #dee2e6 !important; }
        .print-header { display: block !important; }
        body { font-size: 12px; }
        .table th, .table td { padding: 4px 6px !important; }
    }
    .print-header { display: none; }
    .badge-actif   { background: #198754; }
    .badge-inactif { background: #6c757d; }
    tr.inactif td  { color: #adb5bd; font-style: italic; }
</style>
{% endblock %}

{% block body %}

{# ── En-tête ──────────────────────────────────────────────────────────── #}
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2 no-print">
    <div>
        <h4 class="mb-0">
            <i class="fas fa-table text-primary me-2"></i>
            Détail des présences par catégorie
        </h4>
        <p class="text-muted small mb-0 mt-1">
            <i class="fas fa-info-circle me-1"></i>
            Cumul mensuel — chaque chiffre représente le nombre de <strong>jours</strong> présents ou absents sur le mois.
        </p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ path('tenant_presences_recap') }}" class="btn btn-sm btn-outline-secondary">
            <i class="fas fa-arrow-left me-1"></i>Récapitulatif
        </a>
        {% if categorieId %}
        <a href="{{ path('tenant_presences_recap_categorie_pdf', {categorie: categorieId, mois: mois, annee: annee}) }}"
           class="btn btn-sm btn-success">
            <i class="fas fa-file-pdf me-1"></i>Télécharger PDF
        </a>
        <button type="button" class="btn btn-sm btn-secondary" onclick="window.print()">
            <i class="fas fa-print me-1"></i>Imprimer
        </button>
        {% endif %}
    </div>
</div>

{# ── En-tête impression ───────────────────────────────────────────────── #}
<div class="print-header mb-3 text-center">
    <h5 class="fw-bold mb-1">Récapitulatif des présences — {{ nomCategorie }}</h5>
    <div class="text-muted">{{ moisLabel }}</div>
</div>

{# ── Filtres catégorie + navigation mois ─────────────────────────────── #}
<div class="card border-0 shadow-sm mb-4 no-print">
    <div class="card-body py-2">
        <form method="get" class="row g-2 align-items-end">
            <input type="hidden" name="mois"  value="{{ mois }}">
            <input type="hidden" name="annee" value="{{ annee }}">
            <div class="col-auto">
                <label class="form-label small fw-semibold mb-1">Catégorie</label>
                <select name="categorie" class="form-select form-select-sm" onchange="this.form.submit()">
                    {% for cat in categories %}
                        <option value="{{ cat.id }}" {{ cat.id == categorieId ? 'selected' : '' }}>{{ cat.nom }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-auto ms-auto">
                <label class="form-label small fw-semibold mb-1 d-block">Mois</label>
                <div class="d-flex gap-2 align-items-center">
                    <a href="{{ path('tenant_presences_recap_categorie', {categorie: categorieId, mois: moisPrecedent.mois, annee: moisPrecedent.annee}) }}"
                       class="btn btn-outline-secondary btn-sm"><i class="fas fa-chevron-left"></i></a>
                    <span class="fw-semibold text-capitalize" style="min-width:140px; text-align:center">{{ moisLabel }}</span>
                    <a href="{{ path('tenant_presences_recap_categorie', {categorie: categorieId, mois: moisSuivant.mois, annee: moisSuivant.annee}) }}"
                       class="btn btn-outline-secondary btn-sm"><i class="fas fa-chevron-right"></i></a>
                </div>
            </div>
        </form>
    </div>
</div>

{# ── Navigation catégories (onglets rapides) ──────────────────────────── #}
{% if categories|length > 1 %}
<div class="mb-3 no-print d-flex flex-wrap gap-2">
    {% for cat in categories %}
        <a href="{{ path('tenant_presences_recap_categorie', {categorie: cat.id, mois: mois, annee: annee}) }}"
           class="btn btn-sm {{ cat.id == categorieId ? 'btn-primary' : 'btn-outline-primary' }}">
            {{ cat.nom }}
        </a>
    {% endfor %}
</div>
{% endif %}

{# ── Tableau de détail ────────────────────────────────────────────────── #}
{% if not categorieId %}
    <div class="card border-0 shadow-sm">
        <div class="card-body text-center py-5 text-muted">
            <i class="fas fa-arrow-up fa-2x mb-3 opacity-25"></i>
            <p>Sélectionnez une catégorie.</p>
        </div>
    </div>
{% elseif detail is empty %}
    <div class="card border-0 shadow-sm">
        <div class="card-body text-center py-5 text-muted">
            <i class="fas fa-calendar-times fa-2x mb-3 opacity-25"></i>
            <p>Aucune donnée pour <strong>{{ nomCategorie }}</strong> sur ce mois.</p>
        </div>
    </div>
{% else %}

    {# Calcul totaux colonnes #}
    {% set totaux = {} %}
    {% for service in services|keys %}
        {% set totaux = totaux|merge({(service): {presents: 0, absents: 0}}) %}
    {% endfor %}
    {% set totTousPresents = 0 %}
    {% set totTousAbsents  = 0 %}
    {% for pid, p in detail %}
        {% for service in services|keys %}
            {% set nb_p = p.services[service].presents ?? 0 %}
            {% set nb_a = p.services[service].absents  ?? 0 %}
            {% set totaux = totaux|merge({(service): {
                presents: totaux[service].presents + nb_p,
                absents:  totaux[service].absents  + nb_a
            }}) %}
            {% set totTousPresents = totTousPresents + nb_p %}
            {% set totTousAbsents  = totTousAbsents  + nb_a %}
        {% endfor %}
    {% endfor %}

    {# Résumé #}
    <div class="row g-3 mb-3 no-print">
        <div class="col-sm-4">
            <div class="card border-0 shadow-sm text-center py-3">
                <div class="text-success fw-bold fs-3">{{ totTousPresents }}</div>
                <div class="text-muted small">Total présences</div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="card border-0 shadow-sm text-center py-3">
                <div class="text-danger fw-bold fs-3">{{ totTousAbsents }}</div>
                <div class="text-muted small">Total absences</div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="card border-0 shadow-sm text-center py-3">
                <div class="text-primary fw-bold fs-3">{{ detail|length }}</div>
                <div class="text-muted small">Personnes</div>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="table-responsive">
            <table class="table table-bordered table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th rowspan="2" class="align-middle">Nom</th>
                        <th rowspan="2" class="align-middle">Prénom</th>
                        <th rowspan="2" class="align-middle text-center no-print">Statut</th>
                        {% for key, label in services %}
                            <th colspan="2" class="text-center">{{ label }}</th>
                        {% endfor %}
                        <th rowspan="2" class="align-middle text-center">Total<br>présents</th>
                        <th rowspan="2" class="align-middle text-center">Total<br>absents</th>
                    </tr>
                    <tr>
                        {% for key, label in services %}
                            <th class="text-center text-success small">Présents</th>
                            <th class="text-center text-danger small">Absents</th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for pid, p in detail %}
                        {% set totalP = 0 %}
                        {% set totalA = 0 %}
                        {% for service in services|keys %}
                            {% set totalP = totalP + (p.services[service].presents ?? 0) %}
                            {% set totalA = totalA + (p.services[service].absents  ?? 0) %}
                        {% endfor %}
                        <tr class="{{ not p.actif ? 'inactif' : '' }}">
                            <td class="fw-semibold">{{ p.nom }}</td>
                            <td>{{ p.prenom }}</td>
                            <td class="text-center no-print">
                                <span class="badge {{ p.actif ? 'badge-actif' : 'badge-inactif' }}">
                                    {{ p.actif ? 'Actif' : 'Inactif' }}
                                </span>
                            </td>
                            {% for key in services|keys %}
                                <td class="text-center text-success fw-semibold">{{ p.services[key].presents ?? 0 }}</td>
                                <td class="text-center text-danger">{{ p.services[key].absents  ?? 0 }}</td>
                            {% endfor %}
                            <td class="text-center fw-bold text-success">{{ totalP }}</td>
                            <td class="text-center fw-bold text-danger">{{ totalA }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
                <tfoot class="table-light fw-semibold">
                    <tr>
                        <td colspan="3" class="no-print">Total</td>
                        <td colspan="2" class="d-print-table-cell d-none">Total</td>
                        {% for service in services|keys %}
                            <td class="text-center text-success">{{ totaux[service].presents }}</td>
                            <td class="text-center text-danger">{{ totaux[service].absents }}</td>
                        {% endfor %}
                        <td class="text-center text-success">{{ totTousPresents }}</td>
                        <td class="text-center text-danger">{{ totTousAbsents }}</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <p class="text-muted small mt-2 no-print">
        <i class="fas fa-info-circle me-1"></i>
        Les personnes en <em>italique grisé</em> sont désactivées — leurs données historiques sont conservées.
    </p>
{% endif %}

{% endblock %}