{% extends 'school/base.html.twig' %}
{% block title %}{{ is_edit ? 'Modifier document' : 'Nouveau document' }} | {{ ecole.nom }}{% endblock %}

{% block content %}
<section class="doc-form-page">
    <div class="doc-form-hero">
        <div>
            <span>Documents</span>
            <h1>{{ is_edit ? 'Modifier le document' : 'Nouveau document' }}</h1>
            <p>Ajoutez un fichier utile aux parents : règlement, programme, emploi du temps, fournitures ou guide.</p>
        </div>
        <a class="doc-btn doc-btn-light" href="{{ is_edit ? path('school_document_show', {id: document.id}) : path('school_document_index') }}">
            <span class="material-symbols-outlined">arrow_back</span> Retour
        </a>
    </div>

    {{ form_start(form, {attr:{class:'doc-form'}}) }}
    <div class="doc-form-layout">
        <div class="doc-form-main">
            <section class="doc-panel">
                <div class="doc-panel-head">
                    <span class="material-symbols-outlined">description</span>
                    <div>
                        <h2>Contenu du document</h2>
                        <p>Le titre, le type et le résumé seront visibles dans le portail parent.</p>
                    </div>
                </div>

                <div class="doc-grid doc-grid-main">
                    <div class="doc-field">
                        <label>Titre du document</label>
                        {{ form_widget(form.titre, {attr:{class:'doc-input', placeholder:'Ex : Règlement intérieur Al Qiyam 2026'}}) }}
                        {{ form_errors(form.titre) }}
                    </div>
                    <div class="doc-field">
                        <label>Type de document</label>
                        {{ form_widget(form.typeDocument, {attr:{class:'doc-input'}}) }}
                        {{ form_errors(form.typeDocument) }}
                    </div>
                </div>

                <div class="doc-field">
                    <label>Description / résumé</label>
                    {{ form_widget(form.description, {attr:{class:'doc-input doc-textarea', placeholder:'Résumé visible dans le portail parent...', rows:5}}) }}
                    {{ form_errors(form.description) }}
                    <small>Restez court et clair : ce texte aide le parent à comprendre l’utilité du document.</small>
                </div>

                <div class="doc-upload-box">
                    <span class="material-symbols-outlined">upload_file</span>
                    <div class="doc-upload-content">
                        <label>{{ is_edit ? 'Remplacer le fichier' : 'Fichier du document' }}</label>
                        {{ form_widget(form.documentFile, {attr:{class:'doc-input'}}) }}
                        {{ form_errors(form.documentFile) }}
                        <small>Formats acceptés : PDF, Word, Excel ou image. Taille maximale : 25 Mo.</small>
                        {% if is_edit and document.fichierName %}
                            <div class="doc-current-file">
                                <span class="material-symbols-outlined">attach_file</span>
                                <div><strong>Fichier actuel</strong><br>{{ document.fichierName }}</div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </section>

            <section class="doc-panel">
                <div class="doc-panel-head">
                    <span class="material-symbols-outlined">adjust</span>
                    <div>
                        <h2>Ciblage</h2>
                        <p>Choisissez l’école entière, une section ou une classe précise.</p>
                    </div>
                </div>
                <div class="doc-hint">
                    <span class="material-symbols-outlined">info</span>
                    <p>Si aucune section n’est sélectionnée, le document est général à toute l’école. Si une classe est sélectionnée, seuls les parents liés à cette classe le verront.</p>
                </div>
                <div class="doc-grid doc-grid-target">
                    <div class="doc-field">
                        <label>Section concernée</label>
                        {{ form_widget(form.section, {attr:{class:'doc-input'}}) }}
                        {{ form_errors(form.section) }}
                    </div>
                    <div class="doc-field">
                        <label>Classe concernée</label>
                        {{ form_widget(form.classe, {attr:{class:'doc-input'}}) }}
                        {{ form_errors(form.classe) }}
                    </div>
                </div>
            </section>
        </div>

        <aside class="doc-form-sidebar">
            <section class="doc-side-panel">
                <div class="doc-side-head">
                    <h2>Diffusion</h2>
                    <p>Contrôlez l’affichage parent et l’envoi automatique WhatsApp.</p>
                </div>

                <div class="doc-toggle-list">
                    <label class="doc-toggle">
                        {{ form_widget(form.visibleParent, {attr:{class:'doc-check'}}) }}
                        <span><strong>Visible dans le portail parent</strong><small>Le document apparaît dans l’espace parent.</small></span>
                    </label>
                    <label class="doc-toggle">
                        {{ form_widget(form.envoyerPreinscription, {attr:{class:'doc-check'}}) }}
                        <span><strong>Ajouter après préinscription</strong><small>Le lien est ajouté au message WhatsApp de préinscription.</small></span>
                    </label>
                    <label class="doc-toggle">
                        {{ form_widget(form.envoyerValidation, {attr:{class:'doc-check'}}) }}
                        <span><strong>Envoyer après validation</strong><small>Le lien est envoyé avec les informations de validation.</small></span>
                    </label>
                    <label class="doc-toggle">
                        {{ form_widget(form.obligatoire, {attr:{class:'doc-check'}}) }}
                        <span><strong>Important / obligatoire</strong><small>Le document est mis en évidence pour le parent.</small></span>
                    </label>
                    <label class="doc-toggle">
                        {{ form_widget(form.actif, {attr:{class:'doc-check'}}) }}
                        <span><strong>Document actif</strong><small>Le document est disponible et utilisable.</small></span>
                    </label>
                </div>

                <div class="doc-field doc-order-field">
                    <label>Ordre d’affichage</label>
                    {{ form_widget(form.ordre, {attr:{class:'doc-input', min:0}}) }}
                    {{ form_errors(form.ordre) }}
                    <small>Plus le nombre est petit, plus le document remonte dans la liste.</small>
                </div>

                <button class="doc-btn doc-btn-primary doc-submit" type="submit"><span class="material-symbols-outlined">save</span> Enregistrer</button>
                <a class="doc-btn doc-btn-light doc-submit" href="{{ path('school_document_index') }}">Annuler</a>
            </section>
        </aside>
    </div>
    {{ form_rest(form) }}
    {{ form_end(form) }}
</section>

<style>
.doc-form-page{display:grid;gap:1rem;padding:0 0 2rem}.doc-form-hero{display:flex;justify-content:space-between;align-items:center;gap:1rem;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-form-hero span{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;font-weight:900;color:var(--admin-muted,#6b7280);margin-bottom:.35rem}.doc-form-hero h1{margin:0;color:var(--admin-text,#10201b);font-size:clamp(2rem,3vw,3rem);line-height:1.05;font-weight:950}.doc-form-hero p{margin:.45rem 0 0;color:var(--admin-muted,#6b7280);font-weight:700}.doc-form-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:1rem;align-items:start}.doc-form-main{display:grid;gap:1rem}.doc-panel,.doc-side-panel{background:var(--admin-surface,#fff);border:1px solid var(--admin-border,#dfe5df);border-radius:1.35rem;padding:1.2rem;box-shadow:var(--admin-shadow-soft,0 18px 45px rgba(15,23,42,.06))}.doc-panel-head{display:flex;gap:.85rem;align-items:flex-start;border-bottom:1px solid var(--admin-border,#dfe5df);padding-bottom:1rem;margin-bottom:1rem}.doc-panel-head>span{width:48px;height:48px;border-radius:1rem;display:grid;place-items:center;background:color-mix(in srgb,var(--admin-primary,#006b3f) 9%,transparent);color:var(--admin-primary,#006b3f);flex:0 0 auto}.doc-panel-head h2,.doc-side-head h2{margin:0;color:var(--admin-text,#10201b);font-size:1.1rem;font-weight:950}.doc-panel-head p,.doc-side-head p{margin:.25rem 0 0;color:var(--admin-muted,#6b7280);font-weight:750}.doc-grid{display:grid;gap:.9rem}.doc-grid-main{grid-template-columns:minmax(0,1.35fr) minmax(190px,.65fr)}.doc-grid-target{grid-template-columns:1fr 1fr}.doc-field{margin-bottom:1rem}.doc-field label,.doc-upload-content label{display:block;text-transform:uppercase;letter-spacing:.06em;font-weight:950;font-size:.72rem;color:var(--admin-muted,#6b7280);margin-bottom:.35rem}.doc-field small,.doc-upload-content small{display:block;color:var(--admin-muted,#6b7280);font-weight:700;margin-top:.4rem}.doc-input{width:100%;border:1px solid var(--admin-border,#dfe5df)!important;border-radius:.95rem!important;background:var(--admin-surface,#fff)!important;color:var(--admin-text,#10201b)!important;font-weight:750!important;min-height:46px;padding:.8rem .95rem!important;outline:none!important;box-shadow:none!important}.doc-input:focus{border-color:var(--admin-primary,#006b3f)!important;box-shadow:0 0 0 .18rem color-mix(in srgb,var(--admin-primary,#006b3f) 14%,transparent)!important}.doc-textarea{min-height:150px;resize:vertical}.doc-upload-box{display:grid;grid-template-columns:58px 1fr;gap:1rem;border:1px dashed color-mix(in srgb,var(--admin-primary,#006b3f) 32%,var(--admin-border,#dfe5df));border-radius:1.2rem;background:color-mix(in srgb,var(--admin-primary,#006b3f) 4%,var(--admin-surface,#fff));padding:1rem}.doc-upload-box>span{width:58px;height:58px;border-radius:1rem;display:grid;place-items:center;color:var(--admin-primary,#006b3f);background:color-mix(in srgb,var(--admin-primary,#006b3f) 10%,transparent)}.doc-current-file{display:flex;align-items:center;gap:.6rem;margin-top:.75rem;padding:.75rem;border-radius:.95rem;background:var(--admin-soft,#f7f7f4);color:var(--admin-muted,#6b7280);font-weight:750}.doc-hint{display:flex;gap:.7rem;align-items:flex-start;border:1px solid color-mix(in srgb,var(--admin-primary,#006b3f) 18%,var(--admin-border,#dfe5df));border-radius:1rem;background:color-mix(in srgb,var(--admin-primary,#006b3f) 5%,var(--admin-surface,#fff));padding:.85rem 1rem;margin-bottom:1rem;color:var(--admin-muted,#6b7280);font-weight:750}.doc-hint p{margin:0}.doc-hint .material-symbols-outlined{color:var(--admin-primary,#006b3f)}.doc-side-panel{position:sticky;top:1rem}.doc-toggle-list{display:grid;gap:.75rem;margin-top:1rem}.doc-toggle{display:flex!important;align-items:flex-start;gap:.75rem;padding:.85rem;border:1px solid var(--admin-border,#dfe5df);border-radius:1rem;background:var(--admin-soft,#f7f7f4);cursor:pointer;margin:0}.doc-toggle .doc-check{width:1.1rem;height:1.1rem;margin:.15rem 0 0;accent-color:var(--admin-primary,#006b3f);flex:0 0 auto}.doc-toggle span{display:block}.doc-toggle strong{display:block;color:var(--admin-text,#10201b);font-size:.92rem;line-height:1.25;font-weight:950}.doc-toggle small{display:block;color:var(--admin-muted,#6b7280);font-weight:700;line-height:1.35;margin-top:.18rem}.doc-toggle:has(input:checked){border-color:color-mix(in srgb,var(--admin-primary,#006b3f) 34%,var(--admin-border,#dfe5df));background:color-mix(in srgb,var(--admin-primary,#006b3f) 7%,var(--admin-surface,#fff))}.doc-order-field{margin-top:1rem}.doc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border-radius:.9rem;padding:.75rem 1rem;font-weight:950;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:44px}.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-submit{width:100%;margin-top:.75rem}@media(max-width:1050px){.doc-form-layout{grid-template-columns:1fr}.doc-side-panel{position:static}}@media(max-width:760px){.doc-form-hero{flex-direction:column;align-items:flex-start;padding:1rem}.doc-grid-main,.doc-grid-target{grid-template-columns:1fr}.doc-upload-box{grid-template-columns:1fr}.doc-panel,.doc-side-panel{padding:1rem}.doc-btn{width:100%}}
</style>
{% endblock %}