{% extends 'school/base.html.twig' %}
{% form_theme form 'bootstrap_5_layout.html.twig' %}

{% block title %}{{ title }} | SALSABIL Madrassas{% endblock %}

{% block content %}
    <style>
        .registration-program-admin-list{display:grid;gap:1rem}
        .registration-program-admin-card{border:1px solid rgba(15,92,69,.12);border-radius:16px;padding:1rem;background:linear-gradient(180deg,#fff,#fbfcfd);box-shadow:0 16px 40px rgba(20,30,44,.08)}
        .registration-program-admin-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}
        .registration-program-admin-head span{display:block;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#64748b}
        .registration-program-admin-head strong{display:block;color:#102033}
        .registration-program-admin-head small{display:block;margin-top:.2rem;color:#64748b}
        .registration-program-note{margin:.75rem 0;padding:.75rem;border-radius:12px;background:#fff7ed;color:#7c2d12}
        .admin-form-checkline{display:flex;align-items:end;padding-bottom:.25rem}
        .registration-program-add-row,.registration-program-admin-actions{display:flex;justify-content:flex-end;gap:.75rem;flex-wrap:wrap;margin-top:1rem}
        .registration-program-admin-actions{margin-top:0}
        .registration-program-admin-empty{border:1px dashed rgba(15,92,69,.28);border-radius:14px;padding:1rem;background:#f8fafc;color:#475569}
        .registration-program-remove{border:0;border-radius:999px;background:#fff1f2;color:#be123c;font-weight:800;padding:.5rem .9rem}
        @media (max-width:640px){.registration-program-admin-head{flex-direction:column}.registration-program-admin-actions{justify-content:flex-start}}
    </style>
    <div class="admin-page-stack">
        <section class="admin-page-header">
            <div>
                <p class="admin-eyebrow">{{ inscription.numeroDossier }}</p>
                <h1 class="admin-page-title">{{ title }}</h1>
                <p>{{ inscription.nomComplet }} · finalisez chaque programme demandé avant validation.</p>
            </div>
            <a class="admin-btn admin-btn-light" href="{{ path('school_inscription_show', {id: inscription.id}) }}">Retour au dossier</a>
        </section>

        {{ form_start(form, {attr: {class: 'admin-form'}}) }}
            <div class="admin-form-grid">
                <section class="admin-card admin-form-section">
                    <div class="admin-card-head">
                        <div>
                            <h2>Parcours à finaliser</h2>
                            <p>Les listes sont limitées à {{ ecole.nom }}. Ajoutez ici un autre programme, une autre langue ou une autre classe pour le même dossier.</p>
                        </div>
                        <div class="registration-program-admin-actions">
                            <button class="admin-btn admin-btn-primary" type="button" data-add-admin-program>
                                <span class="material-symbols-outlined">add</span>
                                Ajouter un parcours
                            </button>
                        </div>
                    </div>

                    {% set parcours_prototype %}
                        <article class="registration-program-admin-card" data-admin-program-card>
                            <div class="registration-program-admin-head">
                                <div>
                                    <span>Nouveau parcours</span>
                                    <strong>Parcours ajouté par l’administration</strong>
                                    <small>Renseignez au moins la section, le niveau ou la classe finale.</small>
                                </div>
                                <button class="registration-program-remove" type="button" data-remove-admin-program>Retirer</button>
                            </div>
                            <div class="admin-form-three-cols">
                                {{ form_row(form.parcours.vars.prototype.sectionSouhaitee) }}
                                {{ form_row(form.parcours.vars.prototype.niveauSouhaite) }}
                                {{ form_row(form.parcours.vars.prototype.classeSouhaitee) }}
                            </div>
                            <div class="admin-form-three-cols">
                                {{ form_row(form.parcours.vars.prototype.sectionFinale) }}
                                {{ form_row(form.parcours.vars.prototype.niveauFinal) }}
                                {{ form_row(form.parcours.vars.prototype.classeFinale) }}
                            </div>
                            <div class="admin-form-three-cols">
                                {{ form_row(form.parcours.vars.prototype.langueSouhaitee) }}
                                {{ form_row(form.parcours.vars.prototype.modeSouhaite) }}
                                {{ form_row(form.parcours.vars.prototype.tarifPropose) }}
                            </div>
                            <div class="admin-form-three-cols">
                                <div class="admin-form-checkline">{{ form_row(form.parcours.vars.prototype.principal) }}</div>
                                <div class="admin-form-checkline">{{ form_row(form.parcours.vars.prototype.actif) }}</div>
                            </div>
                            {{ form_row(form.parcours.vars.prototype.observation) }}
                        </article>
                    {% endset %}

                    <div class="registration-program-admin-list" id="admin-program-list" data-index="{{ form.parcours|length }}" data-prototype="{{ parcours_prototype|e('html_attr') }}">
                        {% for parcoursForm in form.parcours %}
                            {% set parcours = parcoursForm.vars.data %}
                            <article class="registration-program-admin-card" data-admin-program-card>
                                <div class="registration-program-admin-head">
                                    <div>
                                        <span>Parcours demandé {{ loop.index }}</span>
                                        <strong>{{ parcours.sectionSouhaitee ? parcours.sectionSouhaitee.nom : 'Programme non précisé' }}</strong>
                                        <small>
                                            {{ parcours.niveauSouhaite ? parcours.niveauSouhaite.nom : 'Niveau non précisé' }}
                                            {% if parcours.classeSouhaitee %} · {{ parcours.classeSouhaitee.nom }}{% endif %}
                                            {% if parcours.langueSouhaitee %} · {{ parcours.langueSouhaitee }}{% endif %}
                                            {% if parcours.modeSouhaite %} · {{ parcours.modeSouhaite }}{% endif %}
                                        </small>
                                    </div>
                                    {% if parcours.principal %}
                                        {% include 'components/admin/status_badge.html.twig' with {label: 'Principal', tone: 'success'} only %}
                                    {% endif %}
                                    <button class="registration-program-remove" type="button" data-remove-admin-program {{ loop.first ? 'hidden' : '' }}>Retirer</button>
                                </div>
                                {% if parcours.observation %}
                                    <div class="registration-program-note">{{ parcours.observation }}</div>
                                {% endif %}
                                <div class="admin-form-three-cols">
                                    {{ form_row(parcoursForm.sectionSouhaitee) }}
                                    {{ form_row(parcoursForm.niveauSouhaite) }}
                                    {{ form_row(parcoursForm.classeSouhaitee) }}
                                </div>
                                <div class="admin-form-three-cols">
                                    {{ form_row(parcoursForm.sectionFinale) }}
                                    {{ form_row(parcoursForm.niveauFinal) }}
                                    {{ form_row(parcoursForm.classeFinale) }}
                                </div>
                                <div class="admin-form-three-cols">
                                    {{ form_row(parcoursForm.langueSouhaitee) }}
                                    {{ form_row(parcoursForm.modeSouhaite) }}
                                    {{ form_row(parcoursForm.tarifPropose) }}
                                </div>
                                <div class="admin-form-three-cols">
                                    <div class="admin-form-checkline">{{ form_row(parcoursForm.principal) }}</div>
                                    <div class="admin-form-checkline">{{ form_row(parcoursForm.actif) }}</div>
                                </div>
                                {{ form_row(parcoursForm.observation) }}
                            </article>
                        {% else %}
                            <div class="registration-program-admin-empty">
                                Aucun parcours n’est encore affiché. Utilisez le bouton “Ajouter un parcours” pour créer une ligne d’affectation.
                            </div>
                        {% endfor %}
                    </div>
                    <div class="registration-program-add-row">
                        <button class="admin-btn admin-btn-light" type="button" data-add-admin-program>
                            <span class="material-symbols-outlined">add</span>
                            Ajouter un autre parcours
                        </button>
                    </div>
                    <div class="d-none">
                        {{ form_row(form.sectionFinale) }}
                        {{ form_row(form.niveauFinal) }}
                        {{ form_row(form.classeFinale) }}
                    </div>
                    {{ form_row(form.observationAdmin) }}
                </section>
            </div>
            <div class="admin-form-actions admin-form-actions-sticky">
                <a class="btn admin-btn admin-btn-secondary" href="{{ path('school_inscription_show', {id: inscription.id}) }}">Annuler</a>
                <button class="btn admin-btn admin-btn-primary" type="submit">{{ submitLabel }}</button>
            </div>
            {% if form._token is defined %}{{ form_widget(form._token) }}{% endif %}
        {{ form_end(form, {render_rest: false}) }}
    </div>
    <script>
        (() => {
            const list = document.getElementById('admin-program-list');
            const addButtons = document.querySelectorAll('[data-add-admin-program]');
            if (!list || addButtons.length === 0) return;

            const renumber = () => {
                list.querySelector('.registration-program-admin-empty')?.remove();
                list.querySelectorAll('[data-admin-program-card]').forEach((card, index) => {
                    const label = card.querySelector('.registration-program-admin-head span');
                    const remove = card.querySelector('[data-remove-admin-program]');
                    if (label) label.textContent = index === 0 ? 'Parcours principal' : 'Parcours ' + (index + 1);
                    if (remove) remove.hidden = index === 0;
                });
            };

            const addProgram = () => {
                const index = Number(list.dataset.index || '0');
                const html = list.dataset.prototype.replaceAll('__name__', String(index));
                list.insertAdjacentHTML('beforeend', html);
                list.dataset.index = String(index + 1);
                const created = list.querySelector('[data-admin-program-card]:last-child');
                const active = created?.querySelector('input[name$="[actif]"]');
                if (active) active.checked = true;
                renumber();
            };

            addButtons.forEach((button) => button.addEventListener('click', addProgram));

            list.addEventListener('click', (event) => {
                const button = event.target.closest('[data-remove-admin-program]');
                if (!button) return;
                button.closest('[data-admin-program-card]')?.remove();
                renumber();
            });

            renumber();
        })();
    </script>
{% endblock %}
