{% extends 'school/base.html.twig' %}
{% block title %}Documents | {{ ecole.nom }}{% endblock %}

{% block content %}
{% set activeCount = 0 %}
{% set parentCount = 0 %}
{% set validationCount = 0 %}
{% for document in documents %}
    {% if document.actif %}{% set activeCount = activeCount + 1 %}{% endif %}
    {% if document.visibleParent %}{% set parentCount = parentCount + 1 %}{% endif %}
    {% if document.envoyerValidation %}{% set validationCount = validationCount + 1 %}{% endif %}
{% endfor %}

<section class="doc-page">
    <div class="doc-hero">
        <div class="doc-hero-text">
            <span>Documents</span>
            <h1>Documents et ressources</h1>
            <p>Centralisez les règlements, programmes, emplois du temps et documents utiles par section ou classe.</p>
        </div>
        <div class="doc-hero-actions">
            <a class="doc-btn doc-btn-light" href="{{ path('parent_document_index') }}" target="_blank" rel="noopener">
                <span class="material-symbols-outlined">visibility</span> Voir côté parent
            </a>
            <a class="doc-btn doc-btn-primary" href="{{ path('school_document_new') }}">
                <span class="material-symbols-outlined">upload_file</span> Nouveau document
            </a>
        </div>
    </div>

    <div class="doc-kpi-grid">
        <article class="doc-kpi"><span class="material-symbols-outlined">folder_open</span><small>Total</small><strong>{{ documents|length }}</strong><em>Document(s) trouvé(s)</em></article>
        <article class="doc-kpi"><span class="material-symbols-outlined">verified</span><small>Actifs</small><strong>{{ activeCount }}</strong><em>Disponibles</em></article>
        <article class="doc-kpi"><span class="material-symbols-outlined">family_restroom</span><small>Portail parent</small><strong>{{ parentCount }}</strong><em>Visibles aux parents</em></article>
        <article class="doc-kpi"><span class="material-symbols-outlined">send</span><small>Validation</small><strong>{{ validationCount }}</strong><em>Envoyés après validation</em></article>
    </div>

    <form class="doc-filter" method="get">
        <div class="doc-field doc-search">
            <label>Recherche</label>
            <input type="search" name="q" value="{{ filters.q }}" placeholder="Titre, description, fichier...">
        </div>
        <div class="doc-field">
            <label>Type</label>
            <select name="type">
                <option value="">Tous</option>
                <option value="REGLEMENT" {{ filters.type == 'REGLEMENT' ? 'selected' : '' }}>Règlement</option>
                <option value="PROGRAMME" {{ filters.type == 'PROGRAMME' ? 'selected' : '' }}>Programme</option>
                <option value="EMPLOI_TEMPS" {{ filters.type == 'EMPLOI_TEMPS' ? 'selected' : '' }}>Emploi du temps</option>
                <option value="FOURNITURES" {{ filters.type == 'FOURNITURES' ? 'selected' : '' }}>Fournitures</option>
                <option value="GUIDE" {{ filters.type == 'GUIDE' ? 'selected' : '' }}>Guide</option>
                <option value="AUTRE" {{ filters.type == 'AUTRE' ? 'selected' : '' }}>Autre</option>
            </select>
        </div>
        <div class="doc-field">
            <label>Section</label>
            <select name="section">
                <option value="">Toutes</option>
                {% for section in sections %}<option value="{{ section.id }}" {{ filters.section == section.id ? 'selected' : '' }}>{{ section.nom }}</option>{% endfor %}
            </select>
        </div>
        <div class="doc-field">
            <label>Classe</label>
            <select name="classe">
                <option value="">Toutes</option>
                {% for classe in classes %}<option value="{{ classe.id }}" {{ filters.classe == classe.id ? 'selected' : '' }}>{{ classe.nom }}</option>{% endfor %}
            </select>
        </div>
        <div class="doc-field doc-status">
            <label>Statut</label>
            <select name="statut">
                <option value="">Tous</option>
                <option value="actif" {{ filters.statut == 'actif' ? 'selected' : '' }}>Actifs</option>
                <option value="inactif" {{ filters.statut == 'inactif' ? 'selected' : '' }}>Inactifs</option>
            </select>
        </div>
        <div class="doc-filter-actions">
            <button class="doc-btn doc-btn-primary" type="submit"><span class="material-symbols-outlined">filter_alt</span> Filtrer</button>
            <a class="doc-btn doc-btn-light" href="{{ path('school_document_index') }}">Réinitialiser</a>
        </div>
    </form>

    <section class="doc-card">
        <div class="doc-card-head">
            <div>
                <h2>Documents disponibles</h2>
                <p>Les documents visibles sont accessibles depuis le portail parent et peuvent être ajoutés aux messages WhatsApp.</p>
            </div>
            <a class="doc-btn doc-btn-light" href="{{ path('school_document_new') }}"><span class="material-symbols-outlined">add</span> Ajouter</a>
        </div>

        {% if documents is empty %}
            <div class="doc-empty">
                <span class="material-symbols-outlined">folder_open</span>
                <strong>Aucun document</strong>
                <p>Ajoutez le règlement, le programme, l’emploi du temps ou la liste des fournitures.</p>
                <a class="doc-btn doc-btn-primary" href="{{ path('school_document_new') }}">Ajouter un document</a>
            </div>
        {% else %}
            <div class="doc-list">
                {% for document in documents %}
                    {% set target = document.classe ? document.classe.nom : (document.section ? document.section.nom : 'Toute l’école') %}
                    <article class="doc-row">
                        <a class="doc-row-icon" href="{{ path('school_document_show', {id: document.id}) }}">
                            <span class="material-symbols-outlined">{{ document.typeDocument == 'REGLEMENT' ? 'gavel' : (document.typeDocument == 'EMPLOI_TEMPS' ? 'calendar_month' : (document.typeDocument == 'FOURNITURES' ? 'inventory_2' : 'description')) }}</span>
                        </a>
                        <div class="doc-row-body">
                            <div class="doc-row-badges">
                                <span class="doc-pill {{ document.actif ? 'doc-pill-success' : 'doc-pill-muted' }}">{{ document.actif ? 'Actif' : 'Inactif' }}</span>
                                <span class="doc-pill doc-pill-soft">{{ document.typeLabel }}</span>
                                {% if document.obligatoire %}<span class="doc-pill doc-pill-warning">Important</span>{% endif %}
                            </div>
                            <h3><a href="{{ path('school_document_show', {id: document.id}) }}">{{ document.titre }}</a></h3>
                            <p class="doc-target"><span class="material-symbols-outlined">adjust</span> {{ target }}</p>
                            <p class="doc-preview">
                                {% if document.description %}
                                    {% set preview = document.description|striptags %}{{ preview|length > 150 ? preview|slice(0, 150) ~ '...' : preview }}
                                {% else %}
                                    {{ document.fichierName ?: 'Document sans description' }}
                                {% endif %}
                            </p>
                        </div>
                        <div class="doc-row-side">
                            <div class="doc-flags">
                                <span class="{{ document.visibleParent ? 'on' : '' }}">Parent</span>
                                <span class="{{ document.envoyerPreinscription ? 'on' : '' }}">Préinscription</span>
                                <span class="{{ document.envoyerValidation ? 'on' : '' }}">Validation</span>
                            </div>
                            <div class="doc-row-actions">
                                <a class="doc-btn doc-btn-light" href="{{ path('school_document_show', {id: document.id}) }}">Voir</a>
                                <a class="doc-btn doc-btn-light" href="{{ path('school_document_edit', {id: document.id}) }}">Modifier</a>
                                <a class="doc-btn doc-btn-primary" href="{{ path('document_secure_download', {token: document.downloadToken}) }}" target="_blank" rel="noopener">Ouvrir</a>
                            </div>
                        </div>
                    </article>
                {% endfor %}
            </div>
        {% endif %}
    </section>
</section>

<style>
.doc-page{display:grid;gap:1rem;padding:0 0 2rem}.doc-hero{display:flex;justify-content:space-between;align-items:center;gap:1.25rem;border:1px solid var(--admin-border,#dfe5df);border-left:6px solid var(--admin-primary,#006b3f);border-radius:1.45rem;padding:1.35rem 1.55rem;background:linear-gradient(135deg,color-mix(in srgb,var(--admin-primary,#006b3f) 10%,#fff) 0%,var(--admin-surface,#fff) 72%);box-shadow:var(--admin-shadow-soft,0 18px 45px rgba(15,23,42,.06))}.doc-hero-text span{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;font-weight:900;color:var(--admin-muted,#6b7280);margin-bottom:.35rem}.doc-hero h1{margin:0;color:var(--admin-text,#10201b);font-size:clamp(2rem,3vw,3.15rem);line-height:1.05;font-weight:950}.doc-hero p{margin:.45rem 0 0;color:var(--admin-muted,#6b7280);font-weight:700}.doc-hero-actions,.doc-filter-actions,.doc-row-actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}.doc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border-radius:.9rem;padding:.72rem 1rem;font-weight:900;text-decoration:none;border:1px solid var(--admin-border,#dfe5df);line-height:1;color:var(--admin-text,#10201b);background:var(--admin-surface,#fff);min-height:42px}.doc-btn .material-symbols-outlined{font-size:1.05rem}.doc-btn-primary{background:var(--admin-primary,#006b3f);border-color:var(--admin-primary,#006b3f);color:#fff;box-shadow:0 14px 28px color-mix(in srgb,var(--admin-primary,#006b3f) 22%,transparent)}.doc-btn-light:hover{border-color:color-mix(in srgb,var(--admin-primary,#006b3f) 28%,var(--admin-border,#dfe5df));color:var(--admin-primary,#006b3f)}.doc-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.doc-kpi{background:var(--admin-surface,#fff);border:1px solid var(--admin-border,#dfe5df);border-left:4px solid color-mix(in srgb,var(--admin-primary,#006b3f) 45%,#f0c64f);border-radius:1.25rem;padding:1.05rem;box-shadow:var(--admin-shadow-soft,0 18px 45px rgba(15,23,42,.06))}.doc-kpi span{width:42px;height:42px;border-radius:1rem;display:grid;place-items:center;color:var(--admin-primary,#006b3f);background:color-mix(in srgb,var(--admin-primary,#006b3f) 9%,transparent);margin-bottom:1rem}.doc-kpi small,.doc-field label{display:block;text-transform:uppercase;letter-spacing:.06em;font-weight:950;font-size:.72rem;color:var(--admin-muted,#6b7280)}.doc-kpi strong{display:block;font-size:2rem;line-height:1;color:var(--admin-text,#10201b);font-weight:950}.doc-kpi em{display:block;font-style:normal;margin-top:.45rem;color:var(--admin-muted,#6b7280);font-weight:750}.doc-filter{display:grid;grid-template-columns:minmax(240px,1.6fr) minmax(145px,.65fr) minmax(170px,.8fr) minmax(170px,.8fr) minmax(145px,.6fr) auto;gap:.7rem;align-items:end;background:var(--admin-surface,#fff);border:1px solid var(--admin-border,#dfe5df);border-radius:1.35rem;padding:1rem;box-shadow:var(--admin-shadow-soft,0 18px 45px rgba(15,23,42,.06))}.doc-field input,.doc-field select,.doc-field textarea{width:100%;border:1px solid var(--admin-border,#dfe5df);border-radius:.9rem;background:var(--admin-surface,#fff);color:var(--admin-text,#10201b);font-weight:750;min-height:44px;padding:.72rem .9rem;outline:none}.doc-field input:focus,.doc-field select:focus,.doc-field textarea:focus{border-color:var(--admin-primary,#006b3f);box-shadow:0 0 0 .18rem color-mix(in srgb,var(--admin-primary,#006b3f) 14%,transparent)}.doc-card{background:var(--admin-surface,#fff);border:1px solid var(--admin-border,#dfe5df);border-radius:1.35rem;padding:1.15rem;box-shadow:var(--admin-shadow-soft,0 18px 45px rgba(15,23,42,.06))}.doc-card-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-bottom:1rem;border-bottom:1px solid var(--admin-border,#dfe5df);margin-bottom:1rem}.doc-card-head h2{margin:0;font-size:1.2rem;font-weight:950;color:var(--admin-text,#10201b)}.doc-card-head p{margin:.25rem 0 0;color:var(--admin-muted,#6b7280);font-weight:700}.doc-empty{text-align:center;border:1px dashed var(--admin-border,#dfe5df);border-radius:1.25rem;padding:3rem 1rem;color:var(--admin-muted,#6b7280)}.doc-empty>span{width:56px;height:56px;display:grid;place-items:center;margin:0 auto 1rem;border-radius:1rem;color:var(--admin-primary,#006b3f);background:color-mix(in srgb,var(--admin-primary,#006b3f) 10%,transparent)}.doc-empty strong{display:block;color:var(--admin-text,#10201b);font-size:1.1rem;margin-bottom:.3rem}.doc-list{display:grid;gap:.85rem}.doc-row{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(300px,auto);gap:1rem;align-items:center;border:1px solid var(--admin-border,#dfe5df);border-radius:1.15rem;padding:.9rem;background:color-mix(in srgb,var(--admin-soft,#f7f7f4) 50%,var(--admin-surface,#fff));transition:.18s ease}.doc-row:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(15,23,42,.06)}.doc-row-icon{width:56px;height:56px;border-radius:1rem;display:grid;place-items:center;background:color-mix(in srgb,var(--admin-primary,#006b3f) 9%,transparent);color:var(--admin-primary,#006b3f);text-decoration:none}.doc-row-badges{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:.35rem}.doc-pill{display:inline-flex;align-items:center;border-radius:999px;padding:.3rem .6rem;font-size:.68rem;text-transform:uppercase;font-weight:950;color:var(--admin-muted,#6b7280);background:var(--admin-soft,#f7f7f4)}.doc-pill-success{color:var(--admin-primary,#006b3f);background:color-mix(in srgb,var(--admin-primary,#006b3f) 12%,transparent)}.doc-pill-warning{color:#9a5b00;background:#fff4d8}.doc-row h3{margin:0;font-size:1.02rem;font-weight:950}.doc-row h3 a{color:var(--admin-text,#10201b);text-decoration:none}.doc-target,.doc-preview{margin:.3rem 0 0;color:var(--admin-muted,#6b7280);font-weight:700}.doc-target{display:flex;gap:.35rem;align-items:center}.doc-target .material-symbols-outlined{font-size:1rem;color:var(--admin-primary,#006b3f)}.doc-row-side{display:grid;gap:.65rem;justify-items:end}.doc-flags{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:flex-end}.doc-flags span{border-radius:999px;padding:.25rem .55rem;font-size:.68rem;font-weight:900;color:var(--admin-muted,#6b7280);background:var(--admin-soft,#f7f7f4)}.doc-flags span.on{color:var(--admin-primary,#006b3f);background:color-mix(in srgb,var(--admin-primary,#006b3f) 10%,transparent)}@media(max-width:1180px){.doc-filter{grid-template-columns:repeat(2,minmax(0,1fr))}.doc-filter-actions{grid-column:1/-1}.doc-row{grid-template-columns:56px 1fr}.doc-row-side{grid-column:2/-1;justify-items:start}.doc-flags{justify-content:flex-start}}@media(max-width:760px){.doc-hero{align-items:flex-start;flex-direction:column;padding:1rem}.doc-hero-actions,.doc-filter-actions,.doc-row-actions{width:100%}.doc-hero-actions .doc-btn,.doc-filter-actions .doc-btn,.doc-row-actions .doc-btn{flex:1}.doc-kpi-grid{grid-template-columns:1fr 1fr}.doc-filter{grid-template-columns:1fr}.doc-row{grid-template-columns:1fr}.doc-row-icon{width:48px;height:48px}.doc-row-side{grid-column:auto}.doc-card-head{align-items:flex-start;flex-direction:column}}@media(max-width:520px){.doc-kpi-grid{grid-template-columns:1fr}.doc-hero h1{font-size:2rem}}
</style>
{% endblock %}