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

{% block title %}{{ title }} | {{ ecole.nom }}{% endblock %}

{% macro field(field, icon, help, wide) %}
    <div class="activity-form-field {{ wide ? 'span-full' : '' }}">
        <div class="activity-field-label">
            {% if icon %}<span class="material-symbols-outlined">{{ icon }}</span>{% endif %}
            {{ form_label(field) }}
        </div>
        {{ form_widget(field, {attr: {class: 'activity-control'}}) }}
        {% if help %}<p class="activity-field-help">{{ help }}</p>{% endif %}
        {{ form_errors(field) }}
    </div>
{% endmacro %}

{% import _self as ui %}

{% block content %}
<section class="admin-page-stack activity-form-page">
    <div class="admin-page-header admin-page-header-compact activity-form-hero-pro">
        <div class="activity-hero-icon"><span class="material-symbols-outlined">add_photo_alternate</span></div>
        <div class="activity-hero-copy">
            <span class="admin-eyebrow">Activités</span>
            <h1>{{ title }}</h1>
            <p>Préparez une publication claire, ciblée et illustrée pour le portail parent.</p>
        </div>
        <div class="activity-hero-actions">
            {% if activite.id %}
                <a class="admin-btn admin-btn-light" href="{{ path('school_activite_show', {id: activite.id}) }}"><span class="material-symbols-outlined">visibility</span> Aperçu</a>
            {% endif %}
            <a class="admin-btn admin-btn-light" href="{{ path('school_activite_index') }}"><span class="material-symbols-outlined">arrow_back</span> Retour</a>
        </div>
    </div>

    {{ form_start(form, {attr: {class: 'activity-form-layout', novalidate: 'novalidate'}}) }}
        <main class="activity-form-main-pro">
            <section class="activity-editor-card admin-card">
                <div class="activity-card-head">
                    <span class="activity-card-icon material-symbols-outlined">edit_note</span>
                    <div>
                        <h2>Contenu de l’activité</h2>
                        <p>Le titre, le résumé, la date et les médias seront visibles côté parent.</p>
                    </div>
                </div>

                <div class="activity-form-grid-main">
                    {{ ui.field(form.titre, 'title', 'Exemple : Lecture collective du Qur’an, arrivée des participants, atelier sportif…', false) }}
                    {{ ui.field(form.type, 'category', null, false) }}
                    {{ ui.field(form.dateDebut, 'event', null, false) }}
                    {{ ui.field(form.dateFin, 'event_available', 'Laissez vide si l’activité n’a pas d’heure de fin.', false) }}
                    {{ ui.field(form.description, 'notes', 'Restez court et clair : ce résumé sera lu rapidement par les parents.', true) }}
                </div>
            </section>

            <section class="activity-editor-card admin-card">
                <div class="activity-card-head">
                    <span class="activity-card-icon material-symbols-outlined">target</span>
                    <div>
                        <h2>Ciblage</h2>
                        <p>Déterminez qui verra cette activité dans le portail parent.</p>
                    </div>
                </div>

                <div class="activity-info-strip">
                    <span class="material-symbols-outlined">info</span>
                    <p>Vous pouvez cibler toute l’école, une section, une classe ou un seul enfant. Côté parent, seuls les parents concernés verront l’activité.</p>
                </div>

                <div class="activity-form-grid-target">
                    {{ ui.field(form.section, 'layers', null, false) }}
                    {{ ui.field(form.classe, 'groups', null, false) }}
                    {{ ui.field(form.etudiant, 'child_care', null, false) }}
                </div>
            </section>

            <section class="activity-editor-card admin-card activity-media-manager" id="activity-media-manager"
                {% if activite.id %}
                    data-photo-upload-url="{{ path('school_activite_media_photo_upload', {id: activite.id}) }}"
                    data-video-upload-url="{{ path('school_activite_media_video_upload', {id: activite.id}) }}"
                    data-video-delete-url="{{ path('school_activite_media_video_delete', {id: activite.id}) }}"
                    data-csrf-token="{{ csrf_token('activity_media_' ~ activite.id) }}"
                {% endif %}>
                <div class="activity-card-head">
                    <span class="activity-card-icon material-symbols-outlined">perm_media</span>
                    <div>
                        <h2>Médias optimisés</h2>
                        <p>Ajoutez les photos une par une avec compression Web, puis une vidéo courte avec progression visible.</p>
                    </div>
                </div>

                {% if not activite.id %}
                    <div class="activity-media-first-save">
                        <span class="material-symbols-outlined">save</span>
                        <div>
                            <strong>Enregistrez d’abord l’activité</strong>
                            <p>Après la création, vous serez redirigé ici pour importer chaque média séparément, sans perdre le formulaire.</p>
                        </div>
                    </div>
                {% else %}
                    <div class="activity-media-section">
                        <div class="activity-media-section-head">
                            <div><span class="material-symbols-outlined">photo_camera</span><div><strong>Photos de l’activité</strong><small>Une photo à la fois · conversion automatique jusqu’à 1920 px</small></div></div>
                            <span class="activity-media-count" id="activity-photo-count">{{ activite.photos|length }} photo{{ activite.photos|length > 1 ? 's' : '' }}</span>
                        </div>

                        <div class="activity-current-gallery activity-async-gallery" id="activity-photo-gallery">
                            {% for photo in activite.photos %}
                                <figure data-photo-id="{{ photo.id }}">
                                    <img src="{{ asset(photo.publicPath) }}" alt="Photo activité {{ loop.index }}">
                                    <figcaption>
                                        <span>Photo {{ loop.index }}</span>
                                        <button type="button" class="activity-photo-delete js-activity-photo-delete"
                                            data-delete-url="{{ path('school_activite_media_photo_delete', {id: activite.id, photoId: photo.id}) }}"
                                            title="Supprimer la photo">
                                            <span class="material-symbols-outlined">delete</span>
                                        </button>
                                    </figcaption>
                                </figure>
                            {% else %}
                                <div class="activity-media-empty" id="activity-photo-empty"><span class="material-symbols-outlined">image</span><p>Aucune photo enregistrée.</p></div>
                            {% endfor %}
                        </div>

                        <div class="activity-smart-uploader" data-uploader="photo">
                            <div class="activity-smart-uploader-icon"><span class="material-symbols-outlined">add_photo_alternate</span></div>
                            <div class="activity-smart-uploader-copy">
                                <strong>Importer ou photographier</strong>
                                <p>Le navigateur réduit l’image avant l’envoi, puis le serveur la valide et l’optimise pour la TV et le portail parent.</p>
                                <label class="admin-btn admin-btn-primary activity-media-pick">
                                    <span class="material-symbols-outlined">upload</span> Choisir une photo
                                    <input id="activity-photo-input" type="file" accept="image/jpeg,image/png,image/webp" capture="environment" hidden>
                                </label>
                            </div>
                        </div>

                        <div class="activity-upload-progress" id="activity-photo-progress" hidden>
                            <div class="activity-upload-progress-head"><strong id="activity-photo-status">Préparation…</strong><span id="activity-photo-percent">0 %</span></div>
                            <div class="activity-upload-track"><span id="activity-photo-bar"></span></div>
                            <p id="activity-photo-detail">Analyse de l’image.</p>
                        </div>
                    </div>

                    <div class="activity-media-divider"></div>

                    <div class="activity-media-section">
                        <div class="activity-media-section-head">
                            <div><span class="material-symbols-outlined">movie</span><div><strong>Vidéo de l’activité</strong><small>MP4, WebM, OGG ou MOV · maximum conseillé 2 à 3 minutes</small></div></div>
                            <span class="activity-media-count" id="activity-video-state">{{ activite.videoPublicPath ? 'Vidéo enregistrée' : 'Aucune vidéo' }}</span>
                        </div>

                        <div id="activity-video-preview-wrap">
                            {% if activite.videoPublicPath %}
                                <div class="activity-video-preview-pro" id="activity-video-preview">
                                    <video controls preload="metadata" src="{{ asset(activite.videoPublicPath) }}"></video>
                                    <div><strong>Vidéo importée</strong><p>Le remplacement est enregistré dès que le nouvel envoi est terminé.</p><button type="button" class="admin-btn admin-btn-danger-soft" id="activity-video-delete"><span class="material-symbols-outlined">delete</span> Supprimer</button></div>
                                </div>
                            {% endif %}
                        </div>

                        <div class="activity-smart-uploader" data-uploader="video">
                            <div class="activity-smart-uploader-icon video"><span class="material-symbols-outlined">video_file</span></div>
                            <div class="activity-smart-uploader-copy">
                                <strong>Importer une vidéo</strong>
                                <p>La progression de transfert est affichée. Si FFmpeg est disponible sur le serveur, la vidéo est convertie en MP4 Web 720p avec démarrage rapide.</p>
                                <label class="admin-btn admin-btn-primary activity-media-pick">
                                    <span class="material-symbols-outlined">upload_file</span> Choisir une vidéo
                                    <input id="activity-video-input" type="file" accept="video/mp4,video/webm,video/ogg,video/quicktime" hidden>
                                </label>
                            </div>
                        </div>

                        <div class="activity-upload-progress" id="activity-video-progress" hidden>
                            <div class="activity-upload-progress-head"><strong id="activity-video-status">Préparation…</strong><span id="activity-video-percent">0 %</span></div>
                            <div class="activity-upload-track"><span id="activity-video-bar"></span></div>
                            <p id="activity-video-detail">Le traitement peut continuer quelques instants après l’arrivée à 100 %.</p>
                        </div>

                        <div class="activity-video-link-field">
                            {{ ui.field(form.videoUrl, 'link', 'Lien YouTube, Facebook, Google Drive ou autre lien public.', false) }}
                        </div>
                    </div>
                {% endif %}

                <div class="activity-native-file-fields" hidden>
                    {{ form_widget(form.photos, {attr: {disabled: 'disabled'}}) }}
                    {{ form_widget(form.videoFile, {attr: {disabled: 'disabled'}}) }}
                    {% if not activite.id %}{{ form_widget(form.videoUrl, {attr: {class: 'activity-control'}}) }}{% endif %}
                </div>
            </section>
        </main>

        <aside class="activity-form-side-pro">
            <section class="activity-side-panel-pro admin-card">
                <div class="activity-side-head-pro">
                    <span class="material-symbols-outlined">campaign</span>
                    <div>
                        <h2>Publication</h2>
                        <p>Contrôlez la visibilité et les notifications.</p>
                    </div>
                </div>

                <label class="activity-toggle-pro">
                    {{ form_widget(form.visibleParent, {attr: {class: 'activity-check'}}) }}
                    <span><strong>Visible parent</strong><em>Afficher dans le portail parent.</em></span>
                </label>
                <label class="activity-toggle-pro">
                    {{ form_widget(form.publiee, {attr: {class: 'activity-check'}}) }}
                    <span><strong>Publier</strong><em>Rendre l’activité disponible.</em></span>
                </label>
                <label class="activity-toggle-pro">
                    {{ form_widget(form.visibleTv, {attr: {class: 'activity-check'}}) }}
                    <span><strong>Afficher sur TV</strong><em>Inclure les photos et vidéos dans le diaporama TV après publication.</em></span>
                </label>
                <div class="activity-tv-settings">
                    <div>{{ form_label(form.tvOrdre) }}{{ form_widget(form.tvOrdre, {attr: {class: 'activity-control'}}) }}</div>
                    <div>{{ form_label(form.tvDureeSecondes) }}{{ form_widget(form.tvDureeSecondes, {attr: {class: 'activity-control'}}) }}</div>
                </div>
                <label class="activity-toggle-pro">
                    {{ form_widget(form.notifierParents, {attr: {class: 'activity-check'}}) }}
                    <span><strong>Notifier WhatsApp</strong><em>Informer les parents concernés.</em></span>
                </label>

                <div class="activity-side-actions-pro">
                    <button class="admin-btn admin-btn-primary w-100" type="submit"><span class="material-symbols-outlined">save</span> Enregistrer</button>
                    <a class="admin-btn admin-btn-light w-100" href="{{ path('school_activite_index') }}">Annuler</a>
                </div>
            </section>

            <section class="activity-side-note-pro admin-card">
                <span class="material-symbols-outlined">tips_and_updates</span>
                <p>Conseil : publiez une activité courte avec 2 à 5 photos. Les parents liront surtout le titre, la première image et le résumé.</p>
            </section>
        </aside>

        {{ form_rest(form) }}
    {{ form_end(form) }}

    {% for photo in activite.photos %}
        <form id="delete-photo-{{ photo.id }}" method="post" action="{{ path('school_activite_photo_delete', {id: photo.id}) }}" class="d-none">
            <input type="hidden" name="_token" value="{{ csrf_token('delete_activity_photo_' ~ photo.id) }}">
        </form>
    {% endfor %}
</section>

<style>
/* Correctif : styles strictement limités au formulaire activité, sans toucher au menu admin. */
.activity-form-page{position:relative;z-index:1;}
.admin-sidebar,.admin-shell-sidebar,.admin-mobile-sidebar{z-index:50;}
.activity-form-page{display:grid;gap:1rem;padding-bottom:2rem}.activity-form-hero-pro{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;border-left:6px solid var(--admin-primary);background:linear-gradient(135deg,color-mix(in srgb,var(--admin-primary) 9%,var(--admin-surface)) 0%,var(--admin-surface) 72%);box-shadow:var(--admin-shadow-soft);border-radius:1.45rem;padding:1rem 1.2rem}.activity-hero-icon{width:3.3rem;height:3.3rem;border-radius:1.15rem;background:color-mix(in srgb,var(--admin-primary) 12%,transparent);color:var(--admin-primary);display:grid;place-items:center}.activity-hero-icon .material-symbols-outlined{font-size:1.8rem}.activity-hero-copy h1{margin:.1rem 0 .25rem;font-size:clamp(1.95rem,3vw,2.8rem);font-weight:950;letter-spacing:-.06em;line-height:1}.activity-hero-copy p{margin:0;color:var(--admin-muted);font-weight:750}.activity-hero-actions{display:flex;gap:.55rem;flex-wrap:wrap;justify-content:flex-end}.activity-form-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1rem;align-items:start}.activity-form-main-pro{display:grid;gap:1rem}.activity-form-side-pro{position:sticky;top:92px;display:grid;gap:1rem}.activity-editor-card{padding:1.05rem 1.15rem;border-radius:1.35rem;box-shadow:var(--admin-shadow-soft)}.activity-card-head{display:flex;gap:.8rem;align-items:flex-start;border-bottom:1px solid var(--admin-border);padding-bottom:.9rem;margin-bottom:1rem}.activity-card-icon{width:2.75rem;height:2.75rem;border-radius:1rem;display:grid!important;place-items:center;background:color-mix(in srgb,var(--admin-primary) 10%,transparent);color:var(--admin-primary)}.activity-card-head h2{margin:0;font-weight:950;font-size:1.18rem;letter-spacing:-.025em}.activity-card-head p{margin:.12rem 0 0;color:var(--admin-muted);font-weight:750;line-height:1.35}.activity-form-grid-main{display:grid;grid-template-columns:minmax(240px,1.35fr) minmax(180px,.75fr) minmax(210px,1fr) minmax(210px,1fr);gap:.85rem}.activity-form-grid-target{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem}.activity-form-field{min-width:0}.activity-form-field.span-full{grid-column:1/-1}.activity-field-label{display:flex;align-items:center;gap:.35rem;text-transform:uppercase;letter-spacing:.07em;font-size:.72rem;font-weight:950;color:var(--admin-muted);margin-bottom:.38rem}.activity-field-label .material-symbols-outlined{font-size:1rem;color:var(--admin-primary)}.activity-control{width:100%!important;min-height:3.05rem;border:1px solid var(--admin-border)!important;border-radius:.95rem!important;background:var(--admin-surface-soft)!important;color:var(--admin-text)!important;padding:.75rem .85rem!important;font:inherit!important;font-weight:800!important;outline:none!important;box-shadow:none!important}.activity-control:focus{border-color:color-mix(in srgb,var(--admin-primary) 55%,var(--admin-border))!important;box-shadow:0 0 0 .22rem color-mix(in srgb,var(--admin-primary) 12%,transparent)!important}textarea.activity-control{min-height:8.8rem;resize:vertical;line-height:1.55}.activity-field-help{margin:.38rem 0 0;color:var(--admin-muted);font-size:.82rem;font-weight:700;line-height:1.35}.activity-info-strip{display:flex;gap:.65rem;align-items:flex-start;border:1px solid color-mix(in srgb,var(--admin-primary) 18%,var(--admin-border));background:color-mix(in srgb,var(--admin-primary) 5%,var(--admin-surface));border-radius:1.05rem;padding:.82rem;margin-bottom:1rem;color:var(--admin-muted);font-weight:750}.activity-info-strip .material-symbols-outlined{color:var(--admin-primary)}.activity-info-strip p{margin:0;line-height:1.45}.activity-current-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.75rem;margin-bottom:1rem}.activity-current-gallery figure{margin:0;border:1px solid var(--admin-border);border-radius:1rem;overflow:hidden;background:var(--admin-surface-soft)}.activity-current-gallery img{width:100%;height:115px;object-fit:cover;display:block}.activity-current-gallery figcaption{display:flex;align-items:center;justify-content:space-between;padding:.55rem .65rem;color:var(--admin-muted);font-weight:850}.activity-photo-delete{border:0;background:transparent;color:#dc2626;display:inline-grid;place-items:center;cursor:pointer}.activity-photo-delete .material-symbols-outlined{font-size:1.15rem}.activity-upload-panel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.85rem;align-items:start;border:1px dashed color-mix(in srgb,var(--admin-primary) 35%,var(--admin-border));background:color-mix(in srgb,var(--admin-primary) 4%,var(--admin-surface-soft));border-radius:1.15rem;padding:1rem}.activity-upload-panel>span{width:2.6rem;height:2.6rem;border-radius:.95rem;display:grid;place-items:center;background:color-mix(in srgb,var(--admin-primary) 10%,transparent);color:var(--admin-primary)}.activity-upload-panel label{display:block;font-weight:950;color:var(--admin-text);margin-bottom:.4rem}.activity-file-control{width:100%;border:1px solid var(--admin-border);border-radius:.95rem;background:var(--admin-surface);padding:.7rem;color:var(--admin-text);font-weight:750}.activity-upload-panel p{margin:.5rem 0 0;color:var(--admin-muted);font-weight:750}.activity-video-preview-pro{display:grid;grid-template-columns:220px minmax(0,1fr);gap:1rem;align-items:center;border:1px solid var(--admin-border);border-radius:1.1rem;background:var(--admin-surface-soft);padding:.75rem;margin-bottom:1rem}.activity-video-preview-pro video{width:100%;border-radius:.9rem;background:#000}.activity-video-preview-pro strong{font-weight:950;color:var(--admin-text)}.activity-video-preview-pro p{margin:.25rem 0 0;color:var(--admin-muted);font-weight:750}.activity-video-link-preview-pro{display:flex;align-items:center;gap:.65rem;border:1px solid var(--admin-border);border-radius:1rem;background:var(--admin-surface-soft);padding:.8rem;margin-bottom:1rem;word-break:break-all}.activity-video-link-preview-pro .material-symbols-outlined{color:var(--admin-primary)}.activity-video-link-preview-pro a{font-weight:850;color:var(--admin-primary)}.activity-side-panel-pro{border-radius:1.35rem;padding:1rem;display:grid;gap:.8rem;box-shadow:var(--admin-shadow-soft)}.activity-side-head-pro{display:flex;align-items:flex-start;gap:.7rem}.activity-side-head-pro>span{width:2.55rem;height:2.55rem;border-radius:.95rem;display:grid;place-items:center;background:color-mix(in srgb,var(--admin-primary) 10%,transparent);color:var(--admin-primary)}.activity-side-head-pro h2{margin:0;font-size:1.2rem;font-weight:950}.activity-side-head-pro p{margin:.1rem 0 0;color:var(--admin-muted);font-weight:700;line-height:1.35}.activity-toggle-pro{display:flex;align-items:flex-start;gap:.7rem;border:1px solid var(--admin-border);background:var(--admin-surface-soft);border-radius:1rem;padding:.78rem;cursor:pointer}.activity-check{width:1.05rem;height:1.05rem;margin-top:.2rem;accent-color:var(--admin-primary)}.activity-toggle-pro strong{display:block;font-weight:950;color:var(--admin-text)}.activity-toggle-pro em{display:block;font-style:normal;color:var(--admin-muted);font-weight:700;font-size:.84rem}.activity-tv-settings{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}.activity-tv-settings label{font-size:.72rem;font-weight:950;color:var(--admin-muted);text-transform:uppercase}.activity-side-actions-pro{display:grid;gap:.55rem;margin-top:.2rem}.activity-side-note-pro{border-radius:1.25rem;padding:1rem;display:flex;gap:.75rem;color:var(--admin-muted);font-weight:750;line-height:1.45}.activity-side-note-pro .material-symbols-outlined{color:var(--admin-primary)}.activity-side-note-pro p{margin:0}.w-100{width:100%!important}.d-none{display:none!important}@media(max-width:1180px){.activity-form-layout{grid-template-columns:1fr}.activity-form-side-pro{position:static;order:-1}.activity-form-grid-main{grid-template-columns:repeat(2,minmax(0,1fr))}.activity-form-grid-target{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.activity-form-hero-pro{grid-template-columns:1fr}.activity-hero-actions{justify-content:flex-start}.activity-form-grid-main,.activity-form-grid-target{grid-template-columns:1fr}.activity-editor-card{padding:.95rem}.activity-video-preview-pro{grid-template-columns:1fr}.activity-upload-panel{grid-template-columns:1fr}.activity-current-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:460px){.activity-current-gallery{grid-template-columns:1fr}.activity-current-gallery img{height:190px}}
</style>
<link rel="stylesheet" href="{{ asset('assets/admin/activity-media-uploader.css') }}?v=1">
<script src="{{ asset('assets/admin/activity-media-uploader.js') }}?v=1" defer></script>
{% endblock %}