{% extends 'public/themes/' ~ activeTheme ~ '/base.html.twig' %}

{% form_theme form 'bootstrap_5_layout.html.twig' %}

{% block title %}Inscription | {{ school.name }}{% endblock %}
{% block seo_description %}Inscription en ligne à {{ school.name }} : programme, niveau, classe et informations parent ou étudiant pour préparer le suivi administratif.{% endblock %}
{% block seo_canonical %}{{ school.registrationRoute }}{% endblock %}
{% block seo_type %}website{% endblock %}

{% block body %}
    <style>
        .public-program-list{display:grid;gap:1rem;margin-top:1rem}
        .public-program-card{border:1px solid rgba(15,92,69,.14);background:linear-gradient(180deg,#fff,rgba(250,251,253,.92));border-radius:18px;padding:1rem;box-shadow:0 18px 44px rgba(20,30,44,.08)}
        .public-program-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}
        .public-program-card-head span{display:block;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--school-primary,#0F5C45)}
        .public-program-card-head strong{display:block;font-size:1rem;color:#1f2937}
        .public-program-remove,.public-register-add-program{border:0;border-radius:999px;font-weight:800}
        .public-program-remove{background:#fff1f2;color:#be123c;padding:.45rem .85rem}
        .public-register-add-program{margin-top:1rem;background:var(--school-secondary,#DDEFE7);color:var(--school-primary,#0F5C45);padding:.78rem 1.1rem}
        @media (max-width: 640px){.public-program-card{padding:.85rem}.public-program-card-head{flex-direction:column}.public-program-remove{width:100%}}
    </style>
    <section class="public-register-hero public-register-hero-compact">
        <div class="container public-register-hero-grid">
            <div>
                <p class="public-register-kicker">Inscription en ligne</p>
                <h1>Choisissez votre situation avant de remplir le formulaire</h1>
                <p>Cette étape permet à l’administration de savoir s’il s’agit d’une première inscription ou d’une réinscription. Les informations seront vérifiées avant validation.</p>
                {% if currentAnnee %}<p class="public-register-year">Année en cours : <strong>{{ currentAnnee.libelle }}</strong></p>{% endif %}
            </div>
            <div class="public-register-card public-register-card-soft">
                <span>À savoir</span>
                <strong>Le matricule est généré automatiquement</strong>
                <p>Vous n’avez pas besoin de créer un matricule. Il sera attribué par la plateforme après validation.</p>
            </div>
        </div>
    </section>

    <section class="public-register-section">
        <div class="container">
            <div class="public-choice-panel">
                <div class="public-choice-intro">
                    <p class="public-register-kicker">Votre profil</p>
                    <h2>Êtes-vous un(e) nouvel(le) étudiant(e) ou un(e) ancien(ne) étudiant(e) ?</h2>
                    <p>Choisissez simplement l’option qui correspond à votre situation. Le formulaire adapté s’affichera ensuite.</p>
                </div>
                <div class="public-choice-cards">
                    <button type="button" class="public-choice-card" data-registration-choice="NOUVEAU">
                        <span>01</span>
                        <strong>Nouvel(le) étudiant(e)</strong>
                        <small>Je m’inscris pour la première fois dans cette madrassa.</small>
                    </button>
                    <button type="button" class="public-choice-card" data-registration-choice="ANCIEN">
                        <span>02</span>
                        <strong>Ancien(ne) étudiant(e)</strong>
                        <small>Je suis déjà connu(e) et je souhaite me réinscrire.</small>
                    </button>
                </div>
            </div>

            <div class="public-register-card public-old-flow" id="old-student-panel" hidden>
                <div class="public-form-section-heading">
                    <span>Réinscription</span>
                    <h2>Rechercher votre ancien dossier</h2>
                    <p>Tapez d’abord votre matricule ou votre nom. Sélectionnez ensuite votre dossier pour préremplir le formulaire de réinscription.</p>
                </div>
                <div class="public-old-student-search">
                    <label class="form-label" for="old-student-search">Recherche par matricule ou noms</label>
                    <input class="form-control" id="old-student-search" type="search" placeholder="Ex : 26MQO001 ou Aïcha">
                    <div class="public-old-student-results" id="old-student-results" aria-live="polite"></div>
                </div>
            </div>

            <div class="public-register-card public-form-shell" id="registration-form-shell" hidden>
                {{ form_start(form, {attr: {class: 'public-register-form'}}) }}
                    <div class="public-form-section-heading">
                        <span>Dossier</span>
                        <h2>Informations de l’étudiant(e)</h2>
                        <p>Veuillez renseigner les informations avec soin. Les champs non connus peuvent être laissés vides si l’administration les complétera plus tard.</p>
                    </div>

                    <div class="public-form-grid public-form-grid-soft">
                        <div class="public-form-span public-form-choice-hidden">{{ form_row(form.typeCandidat) }}</div>
                        <div>
                            <label class="form-label" for="public-matricule-preview">Matricule</label>
                            <input class="form-control" id="public-matricule-preview" type="text" value="Automatique après validation" readonly>
                            <small class="form-text">Ce champ est géré par l’administration.</small>
                        </div>
                        {{ form_row(form.ancienMatricule) }}
                        {{ form_row(form.nom) }}
                        {{ form_row(form.sexe) }}
                        {{ form_row(form.dateNaissance) }}
                        {{ form_row(form.lieuNaissance) }}
                        {{ form_row(form.situationMatrimoniale) }}
                        <div class="public-form-span public-form-check">{{ form_row(form.aDesEnfants) }}</div>
                    </div>

                    <div class="public-form-section-heading public-form-section-spacing">
                        <span>Contacts</span>
                        <h2>Comment l’administration peut vous joindre ?</h2>
                    </div>
                    <div class="public-form-grid">
                        {{ form_row(form.telephonePrincipal) }}
                        {{ form_row(form.telephoneWhatsapp) }}
                        {{ form_row(form.autreContact) }}
                        {{ form_row(form.email) }}
                        <div class="public-form-span">{{ form_row(form.adresse) }}</div>
                    </div>

                    <div class="public-form-section-heading public-form-section-spacing">
                        <span>Programmes souhaités</span>
                        <h2>Choisissez un ou plusieurs programmes</h2>
                        <p>
                            {% if ecole.slug == 'daroul-ilm' %}
                                Vous pouvez demander plusieurs programmes, langues ou groupes dans le même dossier.
                            {% else %}
                                Ajoutez un deuxième programme uniquement si vous souhaitez suivre plusieurs parcours.
                            {% endif %}
                        </p>
                    </div>

                    {% set parcours_prototype %}
                        <div class="public-program-card" data-program-card>
                            <div class="public-program-card-head">
                                <div>
                                    <span>Programme __name_plus_one__</span>
                                    <strong>Programme souhaité</strong>
                                </div>
                                <button class="public-program-remove" type="button" data-remove-program>Retirer</button>
                            </div>
                            <div class="public-form-grid">
                                {{ form_row(form.parcours.vars.prototype.sectionSouhaitee) }}
                                {{ form_row(form.parcours.vars.prototype.niveauSouhaite) }}
                                {{ form_row(form.parcours.vars.prototype.classeSouhaitee) }}
                                {{ form_row(form.parcours.vars.prototype.langueSouhaitee) }}
                                {{ form_row(form.parcours.vars.prototype.modeSouhaite) }}
                                <div class="public-form-span">{{ form_row(form.parcours.vars.prototype.observation) }}</div>
                            </div>
                        </div>
                    {% endset %}

                    <div class="public-program-list" id="public-program-list" data-index="{{ form.parcours|length }}" data-prototype="{{ parcours_prototype|e('html_attr') }}">
                        {% for parcoursForm in form.parcours %}
                            <div class="public-program-card" data-program-card>
                                <div class="public-program-card-head">
                                    <div>
                                        <span>{{ loop.first ? 'Parcours principal' : 'Programme ' ~ loop.index }}</span>
                                        <strong>{{ loop.first ? 'Programme principal souhaité' : 'Programme souhaité' }}</strong>
                                    </div>
                                    <button class="public-program-remove" type="button" data-remove-program {{ loop.first ? 'hidden' : '' }}>Retirer</button>
                                </div>
                                <div class="public-form-grid">
                                    {{ form_row(parcoursForm.sectionSouhaitee) }}
                                    {{ form_row(parcoursForm.niveauSouhaite) }}
                                    {{ form_row(parcoursForm.classeSouhaitee) }}
                                    {{ form_row(parcoursForm.langueSouhaitee) }}
                                    {{ form_row(parcoursForm.modeSouhaite) }}
                                    <div class="public-form-span">{{ form_row(parcoursForm.observation) }}</div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                    <button class="public-register-add-program" type="button" id="public-add-program">
                        Ajouter un autre programme
                    </button>

                    <div class="public-form-legacy-hidden" hidden>
                        {{ form_row(form.sectionSouhaitee) }}
                        {{ form_row(form.niveauSouhaite) }}
                        {{ form_row(form.classeSouhaitee) }}
                        {{ form_row(form.langueSouhaitee) }}
                        {{ form_row(form.modeSouhaite) }}
                    </div>

                    <div class="public-form-section-heading public-form-section-spacing">
                        <span>Disponibilités</span>
                        <h2>Horaires et message pour l’administration</h2>
                    </div>
                    <div class="public-form-grid">
                        <div class="public-form-span">{{ form_row(form.joursDisponibles) }}</div>
                        <div class="public-form-span">{{ form_row(form.plageHoraireSouhaitee) }}</div>
                        <div class="public-form-span">{{ form_row(form.observationCandidat) }}</div>
                    </div>

                    <div class="public-register-actions">
                        <a class="public-register-link" href="{{ school.route }}">Retour à la page</a>
                        <button class="public-register-submit" type="submit">Envoyer ma demande d’inscription</button>
                    </div>
                    {% if form._token is defined %}{{ form_widget(form._token) }}{% endif %}
                {{ form_end(form, {render_rest: false}) }}
            </div>
        </div>
    </section>

    <script>
        (() => {
            const shell = document.getElementById('registration-form-shell');
            const oldPanel = document.getElementById('old-student-panel');
            const choiceCards = document.querySelectorAll('[data-registration-choice]');
            const typeRadios = document.querySelectorAll('input[name="{{ form.typeCandidat.vars.full_name }}"]');
            const search = document.getElementById('old-student-search');
            const results = document.getElementById('old-student-results');
            const matricule = document.getElementById('{{ form.ancienMatricule.vars.id }}');
            const nom = document.getElementById('{{ form.nom.vars.id }}');
            const sexe = document.getElementById('{{ form.sexe.vars.id }}');
            const dateNaissance = document.getElementById('{{ form.dateNaissance.vars.id }}');
            const lieuNaissance = document.getElementById('{{ form.lieuNaissance.vars.id }}');
            const situation = document.getElementById('{{ form.situationMatrimoniale.vars.id }}');
            const telephonePrincipal = document.getElementById('{{ form.telephonePrincipal.vars.id }}');
            const telephoneWhatsapp = document.getElementById('{{ form.telephoneWhatsapp.vars.id }}');
            const email = document.getElementById('{{ form.email.vars.id }}');
            const adresse = document.getElementById('{{ form.adresse.vars.id }}');
            const section = document.getElementById('{{ form.sectionSouhaitee.vars.id }}');
            const niveau = document.getElementById('{{ form.niveauSouhaite.vars.id }}');
            const classe = document.getElementById('{{ form.classeSouhaitee.vars.id }}');
            const jours = document.getElementById('{{ form.joursDisponibles.vars.id }}');
            const plage = document.getElementById('{{ form.plageHoraireSouhaitee.vars.id }}');
            const enfants = document.getElementById('{{ form.aDesEnfants.vars.id }}');
            const programList = document.getElementById('public-program-list');
            const addProgram = document.getElementById('public-add-program');
            const formWasSubmitted = {{ form.vars.submitted ? 'true' : 'false' }};

            const setType = (value) => {
                typeRadios.forEach((radio) => radio.checked = radio.value === value);
                choiceCards.forEach((card) => card.classList.toggle('is-selected', card.dataset.registrationChoice === value));
                oldPanel.hidden = value !== 'ANCIEN';
                shell.hidden = value === 'ANCIEN';
                if (matricule) {
                    matricule.readOnly = value === 'NOUVEAU';
                    if (value === 'NOUVEAU') matricule.value = '';
                }
                (value === 'ANCIEN' ? oldPanel : shell).scrollIntoView({behavior: 'smooth', block: 'start'});
            };

            choiceCards.forEach((card) => card.addEventListener('click', () => setType(card.dataset.registrationChoice)));

            const renumberPrograms = () => {
                if (!programList) return;
                programList.querySelectorAll('[data-program-card]').forEach((card, index) => {
                    const label = card.querySelector('.public-program-card-head span');
                    const title = card.querySelector('.public-program-card-head strong');
                    const remove = card.querySelector('[data-remove-program]');
                    if (label) label.textContent = index === 0 ? 'Parcours principal' : 'Programme ' + (index + 1);
                    if (title) title.textContent = index === 0 ? 'Programme principal souhaité' : 'Programme souhaité';
                    if (remove) remove.hidden = index === 0;
                });
            };

            const firstProgramField = (field) => programList?.querySelector(`[data-program-card] [name$="[${field}]"]`);
            const fillProgram = (field, value) => fill(firstProgramField(field), value || '');

            if (addProgram && programList) {
                addProgram.addEventListener('click', () => {
                    const index = Number(programList.dataset.index || '0');
                    const html = programList.dataset.prototype
                        .replaceAll('__name_plus_one__', String(index + 1))
                        .replaceAll('__name__', String(index));
                    programList.insertAdjacentHTML('beforeend', html);
                    programList.dataset.index = String(index + 1);
                    renumberPrograms();
                });

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

            if (formWasSubmitted) {
                const selectedType = [...typeRadios].find((radio) => radio.checked)?.value || 'NOUVEAU';
                choiceCards.forEach((card) => card.classList.toggle('is-selected', card.dataset.registrationChoice === selectedType));
                oldPanel.hidden = selectedType !== 'ANCIEN';
                shell.hidden = false;
            }

            const fill = (element, value) => { if (element && value !== null && value !== undefined) element.value = value; };
            let timeout = null;
            if (search && results) {
                search.addEventListener('input', () => {
                    clearTimeout(timeout);
                    const q = search.value.trim();
                    if (q.length < 2) { results.innerHTML = ''; return; }
                    timeout = setTimeout(async () => {
                        const response = await fetch('{{ school.oldStudentsSearchRoute }}?q=' + encodeURIComponent(q), {headers: {'Accept': 'application/json'}});
                        const items = await response.json();
                        if (!items.length) {
                            results.innerHTML = '<div class="public-old-student-empty">Aucun ancien étudiant trouvé pour cette recherche.</div>';
                            return;
                        }
                        results.innerHTML = items.map((item) => `
                            <button type="button" class="public-old-student-item" data-item='${JSON.stringify(item).replaceAll("'", "&apos;") }'>
                                <strong>${item.nom || 'Étudiant'}</strong>
                                <span>${item.matricule || 'Sans matricule'}${item.telephone ? ' · ' + item.telephone : ''}</span>
                            </button>
                        `).join('');
                    }, 250);
                });

                results.addEventListener('click', (event) => {
                    const button = event.target.closest('.public-old-student-item');
                    if (!button) return;
                    const item = JSON.parse(button.dataset.item.replaceAll('&apos;', "'"));
                    setType('ANCIEN');
                    fill(nom, item.nom || '');
                    fill(matricule, item.matricule || '');
                    fill(sexe, item.sexe || '');
                    fill(dateNaissance, item.dateNaissance || '');
                    fill(lieuNaissance, item.lieuNaissance || '');
                    fill(situation, item.situationMatrimoniale || '');
                    fill(telephonePrincipal, item.telephonePrincipal || item.telephone || '');
                    fill(telephoneWhatsapp, item.telephoneWhatsapp || item.telephone || '');
                    fill(email, item.email || '');
                    fill(adresse, item.adresse || '');
                    fill(section, item.sectionId || '');
                    fill(niveau, item.niveauId || '');
                    fill(classe, item.classeId || '');
                    fillProgram('sectionSouhaitee', item.sectionId || '');
                    fillProgram('niveauSouhaite', item.niveauId || '');
                    fillProgram('classeSouhaitee', item.classeId || '');
                    fill(jours, item.joursDisponibles || '');
                    fill(plage, item.plageHoraireSouhaitee || '');
                    if (enfants) enfants.checked = !!item.aDesEnfants;
                    if (matricule) matricule.readOnly = true;
                    shell.hidden = false;
                    results.innerHTML = '<div class="public-old-student-selected">Ancien dossier sélectionné : ' + (item.nom || '') + '</div>';
                    shell.scrollIntoView({behavior: 'smooth', block: 'start'});
                });
            }
        })();
    </script>
{% endblock %}
