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

{% block title %}Inscription Bénévoles - AS Manissieux{% endblock %}

{% block body %}
<div class="educator__container mt-4">
    <div class="educator__header">
        <h1 class="educator__header-title">Inscription bénévoles/éducateurs</h1>
        <p class="educator__header-subtitle">Rejoignez notre équipe pour la saison {{ season.fromYear }}/{{ season.toYear }}</p>
    </div>

    {% for label, messages in app.flashes %}
        {% for message in messages %}
            <div class="educator__alert educator__alert--{{ label == 'success' ? 'info' : 'danger' }}">
                {{ message|trans|raw }}
            </div>
        {% endfor %}
    {% endfor %}

    <div id="previousDataAlert" class="educator__alert educator__alert--info" style="display: none;">
        <h3 class="font-semibold mb-2">📋 Données pré-remplies</h3>
        <p>Vos informations de l'année précédente ({{ season.fromYear - 1 }}/{{ season.toYear - 1 }}) ont été pré-remplies. Vous pouvez les modifier si nécessaire.</p>
    </div>

    <form id="educatorForm" method="POST" enctype="multipart/form-data" class="educator__form">
        <div class="educator__progress" id="progressBar">
        </div>

        <div class="educator__step active" data-step="1" data-type="all">
            <h2 class="educator__step-title">Choisissez votre profil</h2>
            <p class="educator__step-subtitle">Sélectionnez le type d'inscription qui vous correspond</p>

            <div class="educator__type-selection">
                <div class="educator__type-option" data-type="Educateur">
                    <div class="educator__type-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                        </svg>
                    </div>
                    <h3 class="educator__type-title">Éducateur</h3>
                    <p class="educator__type-description">Vous êtes éducateur majeur et souhaitez vous inscrire pour encadrer des équipes.</p>
                    <ul class="educator__type-features">
                        <li>Documents administratifs requis</li>
                        <li>RIB nécessaire</li>
                        <li>Équipement complet</li>
                    </ul>
                </div>

                <div class="educator__type-option" data-type="Educateur Mineur">
                    <div class="educator__type-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                        </svg>
                    </div>
                    <h3 class="educator__type-title">Éducateur Mineur</h3>
                    <p class="educator__type-description">Vous êtes éducateur mineur et souhaitez vous inscrire pour encadrer des équipes.</p>
                    <ul class="educator__type-features">
                        <li>Documents administratifs requis</li>
                        <li>RIB nécessaire</li>
                        <li>Autorisation parentale obligatoire</li>
                        <li>Équipement complet</li>
                    </ul>
                </div>

                <div class="educator__type-option" data-type="Dirigeant">
                    <div class="educator__type-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" />
                        </svg>
                    </div>
                    <h3 class="educator__type-title">Dirigeant</h3>
                    <p class="educator__type-description">Vous êtes dirigeant du club et souhaitez vous inscrire.</p>
                    <ul class="educator__type-features">
                        <li>Fonction au club à préciser</li>
                        <li>Pas de documents administratifs</li>
                        <li>Équipement complet</li>
                    </ul>
                </div>

{#                <div class="educator__type-option" data-type="Enfant">#}
{#                    <div class="educator__type-icon">#}
{#                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">#}
{#                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />#}
{#                        </svg>#}
{#                    </div>#}
{#                    <h3 class="educator__type-title">Enfant de bénévole</h3>#}
{#                    <p class="educator__type-description">Licence gratuite pour un enfant des bénévoles (éducateurs, dirigeants, etc.) en remerciement de leur aide.</p>#}
{#                    <ul class="educator__type-features">#}
{#                        <li>Licence gratuite offerte (1 enfant par parent)</li>#}
{#                        <li>Parent bénévole obligatoire</li>#}
{#                        <li>Autorisation parentale requise</li>#}
{#                        <li>Équipement partiel inclus</li>#}
{#                    </ul>#}
{#                </div>#}
            </div>

            <input type="hidden" name="type" id="educatorType" required>

            <div class="educator__buttons">
                <div></div>
                <button type="button" class="educator__button educator__button--primary" id="nextButton" disabled>
                    Suivant
                </button>
            </div>
        </div>

        <div class="educator__step" data-step="2" data-type="all">
            <h2 class="educator__step-title">Informations personnelles</h2>
            <p class="educator__step-subtitle">Vos informations de base (pré-remplies depuis votre profil)</p>

            <div class="educator__grid">
                <div class="educator__form-group">
                    <label class="educator__form-label">Prénom</label>
                    <input type="text" class="educator__form-input" value="{{ user.firstname }}" readonly>
                </div>
                <div class="educator__form-group">
                    <label class="educator__form-label">Nom</label>
                    <input type="text" class="educator__form-input" value="{{ user.lastname }}" readonly>
                </div>
                <div class="educator__form-group">
                    <label class="educator__form-label">Email</label>
                    <input type="email" class="educator__form-input" value="{{ user.email }}" readonly>
                </div>
                <div class="educator__form-group">
                    <label class="educator__form-label">Téléphone</label>
                    <input type="text" class="educator__form-input" value="{{ user.phone }}" readonly>
                </div>
            </div>

            <div id="profil_selection" class="educator__form-group" style="display: none;">
                <label class="educator__form-label required">Sélectionner le profil de l'enfant</label>
                <select name="profil_id" class="educator__form-select" id="profil_select">
                    <option value="">Choisir un profil</option>
                    {% for profil in profils %}
                        <option value="{{ profil.id }}">{{ profil.firstname }} {{ profil.lastname }} ({{ profil.birthday|date('d/m/Y') }})</option>
                    {% endfor %}
                </select>
                <p class="educator__form-help">Sélectionnez le profil de l'enfant mineur qui souhaite s'inscrire comme éducateur</p>
            </div>

            <div class="educator__form-group" id="categoriesField">
                <label class="educator__form-label required">Catégories entraînées ou fonction au club</label>
                <input type="text" name="categories" class="educator__form-input" placeholder="Ex: U11, U13, U15..." required>
            </div>



            <div class="educator__form-group" id="dateOfBirthField">
                <label class="educator__form-label">Date de naissance</label>
                <input type="date" name="date_of_birth" class="educator__form-input">
            </div>

            <div class="educator__form-group" id="isMinorField">
                <label class="educator__form-label">
                    <input type="checkbox" name="is_minor" class="educator__form-checkbox" id="is_minor">
                    Je suis mineur
                </label>
            </div>



            <div class="educator__buttons">
                <button type="button" class="educator__button educator__button--secondary" onclick="previousStep()">
                    Précédent
                </button>
                <button type="button" class="educator__button educator__button--primary" onclick="nextStep()">
                    Suivant
                </button>
            </div>
        </div>

        <div class="educator__step" data-step="3" data-type="all">
            <h2 class="educator__step-title">Tailles de vêtements</h2>
            <p class="educator__step-subtitle">Les tailles demandées sont collectées à titre informatif. Veuillez noter que tous les articles mentionnés ne seront pas forcément commandés.</p>

            <div class="educator__grid">
                <div class="educator__form-group">
                    <label class="educator__form-label required">Taille maillot</label>
                    <select name="taille_maillot" class="educator__form-select" required>
                        <option value="">Choisir une taille</option>
                        <option value="11/12 ans">11/12 ans</option>
                        <option value="13/14 ans">13/14 ans</option>
                        <option value="XS">XS</option>
                        <option value="S">S</option>
                        <option value="M">M</option>
                        <option value="L">L</option>
                        <option value="XL">XL</option>
                        <option value="2XL">2XL</option>
                    </select>
                </div>

                <div class="educator__form-group">
                    <label class="educator__form-label required">Taille veste</label>
                    <select name="taille_veste" class="educator__form-select" required>
                        <option value="">Choisir une taille</option>
                        <option value="11/12 ans">11/12 ans</option>
                        <option value="13/14 ans">13/14 ans</option>
                        <option value="XS">XS</option>
                        <option value="S">S</option>
                        <option value="M">M</option>
                        <option value="L">L</option>
                        <option value="XL">XL</option>
                        <option value="2XL">2XL</option>
                    </select>
                </div>

                <div class="educator__form-group">
                    <label class="educator__form-label required">Taille short</label>
                    <select name="taille_short" class="educator__form-select" required>
                        <option value="">Choisir une taille</option>
                        <option value="11/12 ans">11/12 ans</option>
                        <option value="13/14 ans">13/14 ans</option>
                        <option value="XS">XS</option>
                        <option value="S">S</option>
                        <option value="M">M</option>
                        <option value="L">L</option>
                        <option value="XL">XL</option>
                        <option value="2XL">2XL</option>
                    </select>
                </div>

                <div class="educator__form-group">
                    <label class="educator__form-label required">Taille jogging</label>
                    <select name="taille_jogging" class="educator__form-select" required>
                        <option value="">Choisir une taille</option>
                        <option value="11/12 ans">11/12 ans</option>
                        <option value="13/14 ans">13/14 ans</option>
                        <option value="XS">XS</option>
                        <option value="S">S</option>
                        <option value="M">M</option>
                        <option value="L">L</option>
                        <option value="XL">XL</option>
                        <option value="2XL">2XL</option>
                    </select>
                </div>

                <div class="educator__form-group">
                    <label class="educator__form-label required">Taille coupe-vent</label>
                    <select name="taille_coupe_vent" class="educator__form-select" required>
                        <option value="">Choisir une taille</option>
                        <option value="11/12 ans">11/12 ans</option>
                        <option value="13/14 ans">13/14 ans</option>
                        <option value="XS">XS</option>
                        <option value="S">S</option>
                        <option value="M">M</option>
                        <option value="L">L</option>
                        <option value="XL">XL</option>
                        <option value="2XL">2XL</option>
                    </select>
                </div>

                <div class="educator__form-group">
                    <label class="educator__form-label required">Taille parka</label>
                    <select name="taille_parka" class="educator__form-select" required>
                        <option value="">Choisir une taille</option>
                        <option value="11/12 ans">11/12 ans</option>
                        <option value="13/14 ans">13/14 ans</option>
                        <option value="XS">XS</option>
                        <option value="S">S</option>
                        <option value="M">M</option>
                        <option value="L">L</option>
                        <option value="XL">XL</option>
                        <option value="2XL">2XL</option>
                    </select>
                </div>

                <div class="educator__form-group" id="cho7Field">
                    <label class="educator__form-label">Taille chaussettes</label>
                    <select name="taille_cho7" class="educator__form-select">
                        <option value="">Choisir une taille</option>
                        <option value="28/30">28/30</option>
                        <option value="31/33">31/33</option>
                        <option value="34/36">34/36</option>
                        <option value="37/39">37/39</option>
                        <option value="40/42">40/42</option>
                        <option value="43/45">43/45</option>
                    </select>
                </div>
            </div>

            <div class="educator__buttons">
                <button type="button" class="educator__button educator__button--secondary" onclick="previousStep()">
                    Précédent
                </button>
                <button type="button" class="educator__button educator__button--primary" onclick="nextStep()">
                    Suivant
                </button>
            </div>
        </div>

        <div class="educator__step" data-step="4" data-type="Educateur,Educateur Mineur">
            <h2 class="educator__step-title">Documents requis</h2>
            <p class="educator__step-subtitle">Veuillez fournir les documents suivants pour compléter votre inscription</p>

            <div class="educator__form-group">
                <label class="educator__form-label required">RIB</label>
                <input type="text" name="rib" class="educator__form-input" placeholder="Votre RIB" required>
            </div>

            <div class="educator__document">
                <label class="educator__document-label">Photo d'identité (optionnel)</label>
                <p class="educator__document-description">Format accepté : JPG, PNG, PDF (max 5MB)</p>
                <div class="educator__file-upload">
                    <input type="file" name="photo_identite" class="educator__form-file" accept=".jpg,.jpeg,.png,.pdf" data-preview="photo_identite_preview">
                    <div class="educator__file-preview" id="photo_identite_preview">
                    </div>
                </div>
            </div>

            <div class="educator__document">
                <label class="educator__document-label">Photo de la carte d'identité (optionnel)</label>
                <p class="educator__document-description">Format accepté : JPG, PNG, PDF (max 5MB)</p>
                <div class="educator__file-upload">
                    <input type="file" name="photo_carte_identite" class="educator__form-file" accept=".jpg,.jpeg,.png,.pdf" data-preview="photo_carte_identite_preview">
                    <div class="educator__file-preview" id="photo_carte_identite_preview">
                    </div>
                </div>
            </div>

            <div class="educator__document">
                <label class="educator__document-label">Extrait du casier judiciaire vierge n°3 (optionnel)</label>
                <p class="educator__document-description">Format accepté : JPG, PNG, PDF (max 5MB)</p>
                <div class="educator__file-upload">
                    <input type="file" name="casier_judiciaire" class="educator__form-file" accept=".jpg,.jpeg,.png,.pdf" data-preview="casier_judiciaire_preview">
                    <div class="educator__file-preview" id="casier_judiciaire_preview">
                    </div>
                </div>
            </div>

            <div class="educator__terms">
                <div class="educator__terms-checkbox">
                    <input type="checkbox" name="accept_terms" class="educator__form-checkbox" id="accept_terms" required>
                    <label for="accept_terms" class="educator__terms-text">
                        Je certifie avoir pris connaissance des dispositions de 
                        <a href="https://www.legifrance.gouv.fr/codes/article_lc/LEGIARTI000043982870" target="_blank">
                            l'article L. 212-9
                        </a> 
                        du Code du Sport dans le cadre de l'exercice à titre bénévole de la fonction d'éducateur sous l'une des licences fédérales *
                    </label>
                </div>
            </div>

            <div class="educator__alert educator__alert--warning">
                <p><strong>Tous les champs marqués d'un * sont obligatoires.</strong></p>
                <p>Les informations collectées dans ce formulaire sont nécessaires pour votre inscription en tant qu'éducateur au sein de l'AS Manissieux. Elles font l'objet d'un traitement informatique et sont destinées au secrétariat du club. Conformément à la loi "informatique et libertés" du 6 janvier 1978 modifiée en 2004, vous bénéficiez d'un droit d'accès et de rectification aux informations qui vous concernent, que vous pouvez exercer en vous adressant au secrétariat du club.</p>
            </div>

            <div class="educator__buttons">
                <button type="button" class="educator__button educator__button--secondary" onclick="previousStep()">
                    Précédent
                </button>
                <button type="submit" class="educator__button educator__button--success">
                    Valider l'inscription
                </button>
            </div>
        </div>

        <div class="educator__step" data-step="4" data-type="Enfant">
            <h2 class="educator__step-title">Attestation parentale</h2>
            <p class="educator__step-subtitle">Veuillez confirmer les informations suivantes</p>

            <div class="educator__alert educator__alert--info">
                <h3 class="font-semibold mb-2">Licence gratuite pour enfant de bénévole</h3>
                <p>Cette licence gratuite est offerte en remerciement de l'aide apportée par le parent bénévole au club.</p>
            </div>

            <div class="educator__alert educator__alert--warning">
                <p><strong>Un tuteur légal doit remplir ce formulaire pour un mineur.</strong></p>
            </div>

            <div class="educator__terms">
                <div class="educator__terms-checkbox">
                    <input type="checkbox" name="parent_tutor" class="educator__form-checkbox" id="parent_tutor">
                    <label for="parent_tutor" class="educator__terms-text">
                        J'atteste être le parent/tuteur légal de l'enfant et être bénévole au club *
                    </label>
                </div>
            </div>

            <div class="educator__terms">
                <div class="educator__terms-checkbox">
                    <input type="checkbox" name="accept_termsa" class="educator__form-checkbox" id="accept_termsa">
                    <label for="accept_termsa" class="educator__terms-text required">
                        En tant que parent bénévole, j'atteste avoir pris connaissance des dispositions de 
                        <a href="https://www.legifrance.gouv.fr/codes/article_lc/LEGIARTI000043982870" target="_blank">
                            l'article L. 212-9
                        </a> 
                        du Code du Sport dans le cadre de l'exercice à titre bénévole de la fonction d'éducateur sous l'une des licences fédérales
                    </label>
                </div>
            </div>

            <div class="educator__terms">
                <div class="educator__terms-checkbox">
                    <input type="checkbox" name="accept_benefit" class="educator__form-checkbox" id="accept_benefit">
                    <label for="accept_benefit" class="educator__terms-text required">
                        J'accepte la licence gratuite offerte pour mon enfant en remerciement de mon aide bénévole au club
                    </label>
                </div>
            </div>

            <div class="educator__buttons">
                <button type="button" class="educator__button educator__button--secondary" onclick="previousStep()">
                    Précédent
                </button>
                <button type="submit" class="educator__button educator__button--success">
                    Valider l'inscription
                </button>
            </div>
        </div>
    </form>
</div>

<div id="imageModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
    <div class="relative max-w-6xl max-h-full p-4 w-full">
        <button id="closeModal" class="absolute top-4 right-4 text-white text-2xl font-bold hover:text-gray-300 z-10 bg-black bg-opacity-50 rounded-full w-10 h-10 flex items-center justify-center">
            ×
        </button>
        <div id="modalContent" class="w-full h-full">
        </div>
        <div id="modalCaption" class="text-white text-center mt-4 text-lg"></div>
    </div>
</div>

<script>
let currentStep = 1;
let currentType = '';
let totalSteps = 3;

// Données de l'année précédente (sera chargé via AJAX)
let previousYearData = null;

// Configuration des étapes par type
const stepConfig = {
    'Educateur': {
        steps: [
            { number: 1, label: 'Type' },
            { number: 2, label: 'Informations' },
            { number: 3, label: 'Vêtements' },
            { number: 4, label: 'Documents' }
        ],
        totalSteps: 4
    },
    'Educateur Mineur': {
        steps: [
            { number: 1, label: 'Type' },
            { number: 2, label: 'Informations' },
            { number: 3, label: 'Vêtements' },
            { number: 4, label: 'Documents' }
        ],
        totalSteps: 4
    },
    'Dirigeant': {
        steps: [
            { number: 1, label: 'Type' },
            { number: 2, label: 'Informations' },
            { number: 3, label: 'Vêtements' }
        ],
        totalSteps: 3
    },
    'Enfant': {
        steps: [
            { number: 1, label: 'Type' },
            { number: 2, label: 'Informations' },
            { number: 3, label: 'Vêtements' },
            { number: 4, label: 'Attestation' }
        ],
        totalSteps: 4
    }
};

// Générer la barre de progression
function generateProgressBar(type) {
    const progressBar = document.getElementById('progressBar');
    const config = stepConfig[type];
    
    if (!config) return;
    
    progressBar.innerHTML = '';
    
    config.steps.forEach((step, index) => {
        const stepElement = document.createElement('div');
        stepElement.className = `educator__progress-step ${index === 0 ? 'active' : ''}`;
        stepElement.setAttribute('data-step', step.number);
        
        stepElement.innerHTML = `
            <div class="educator__progress-number ${index === 0 ? 'active' : ''}">${step.number}</div>
            <div class="educator__progress-label ${index === 0 ? 'active' : ''}">${step.label}</div>
        `;
        
        progressBar.appendChild(stepElement);
    });
}

// Afficher/masquer les étapes selon le type (utilisé seulement pour l'initialisation)
function showStepsForType(type) {
    document.querySelectorAll('.educator__step').forEach(step => {
        const stepTypes = step.getAttribute('data-type');
        if (stepTypes === 'all' || stepTypes.includes(type)) {
            // Ne pas afficher, juste marquer comme disponible
            step.setAttribute('data-available', 'true');
        } else {
            step.setAttribute('data-available', 'false');
        }
    });
}

// Adapter les champs selon le type
function adaptFieldsForType(type) {
    const categoriesField = document.getElementById('categoriesField');
    const dateOfBirthField = document.getElementById('dateOfBirthField');
    const isMinorField = document.getElementById('isMinorField');
    const cho7Field = document.getElementById('cho7Field');
    const profilSelection = document.getElementById('profil_selection');
    
    // Masquer toutes les sections d'informations parentales
    profilSelection.style.display = 'none';
    
    // Réinitialiser tous les attributs required
    document.getElementById('profil_select').removeAttribute('required');
    document.getElementById('parent_tutor').removeAttribute('required');
    document.getElementById('accept_termsa').removeAttribute('required');
    document.getElementById('accept_benefit').removeAttribute('required');
    
    // Réinitialiser les champs communs
    const categoriesInput = categoriesField.querySelector('input[name="categories"]');
    const ribInput = document.querySelector('input[name="rib"]');
    const acceptTermsInput = document.getElementById('accept_terms');
    
    switch(type) {
        case 'Dirigeant':
            categoriesField.style.display = 'block';
            categoriesField.querySelector('label').textContent = 'Fonction au club *';
            categoriesField.querySelector('input').placeholder = 'Ex: Comité directeur, Bureau...';
            categoriesInput.required = true;
            dateOfBirthField.style.display = 'none';
            isMinorField.style.display = 'none';
            cho7Field.style.display = 'block';
            cho7Field.querySelector('select').required = true;
            // Pas de RIB ni de documents pour les dirigeants
            if (ribInput) ribInput.removeAttribute('required');
            if (acceptTermsInput) acceptTermsInput.removeAttribute('required');
            break;
        case 'Enfant':
            categoriesField.style.display = 'none';
            categoriesInput.removeAttribute('required');
            dateOfBirthField.style.display = 'none';
            isMinorField.style.display = 'none';
            cho7Field.style.display = 'block';
            cho7Field.querySelector('select').required = true;
            // Afficher la sélection de profil
            profilSelection.style.display = 'block';
            document.getElementById('profil_select').required = true;
            document.getElementById('accept_termsa').required = true;
            document.getElementById('accept_benefit').required = true;
            // Pas de RIB ni de documents pour les enfants
            if (ribInput) ribInput.removeAttribute('required');
            if (acceptTermsInput) acceptTermsInput.removeAttribute('required');
            break;
        case 'Educateur Mineur':
            categoriesField.style.display = 'block';
            categoriesField.querySelector('label').textContent = 'Catégorie(s) entraînée(s) *';
            categoriesField.querySelector('input').placeholder = 'Ex: U11, U13, U15...';
            categoriesInput.required = true;
            dateOfBirthField.style.display = 'none';
            isMinorField.style.display = 'none';
            cho7Field.style.display = 'block';
            cho7Field.querySelector('select').required = true;
            // Afficher la sélection de profil
            profilSelection.style.display = 'block';
            document.getElementById('profil_select').required = true;
            // RIB et documents requis pour les éducateurs mineurs
            if (ribInput) ribInput.required = true;
            if (acceptTermsInput) acceptTermsInput.required = true;
            break;
        default: // Éducateur
            categoriesField.style.display = 'block';
            categoriesField.querySelector('label').textContent = 'Catégories entraînées ou fonction au club *';
            categoriesField.querySelector('input').placeholder = 'Ex: U11, U13, U15...';
            categoriesInput.required = true;
            dateOfBirthField.style.display = 'none';
            isMinorField.style.display = 'none';
            cho7Field.style.display = 'none';
            cho7Field.querySelector('select').required = false;
            // RIB et documents requis pour les éducateurs
            if (ribInput) ribInput.required = true;
            if (acceptTermsInput) acceptTermsInput.required = true;
    }
}

function showStep(step) {
    // Masquer toutes les étapes
    document.querySelectorAll('.educator__step').forEach(s => {
        s.classList.remove('active');
        s.style.display = 'none';
    });
    
    // Afficher l'étape courante pour le type sélectionné
    const currentStepElement = document.querySelector(`[data-step="${step}"][data-available="true"]`);
    if (currentStepElement) {
        currentStepElement.classList.add('active');
        currentStepElement.style.display = 'block';
    }
    
    // Mettre à jour la barre de progression
    document.querySelectorAll('.educator__progress-step').forEach((s, index) => {
        const stepNumber = index + 1;
        const numberEl = s.querySelector('.educator__progress-number');
        const labelEl = s.querySelector('.educator__progress-label');
        
        if (stepNumber < step) {
            numberEl.classList.remove('active');
            numberEl.classList.add('completed');
            labelEl.classList.remove('active');
            labelEl.classList.add('completed');
        } else if (stepNumber === step) {
            numberEl.classList.add('active');
            numberEl.classList.remove('completed');
            labelEl.classList.add('active');
            labelEl.classList.remove('completed');
        } else {
            numberEl.classList.remove('active', 'completed');
            labelEl.classList.remove('active', 'completed');
        }
    });
}

function nextStep() {
    if (currentStep < totalSteps) {
        // Validation des champs obligatoires de l'étape actuelle
        if (!validateCurrentStep()) {
            return; // Arrêter si validation échoue
        }
        
        currentStep++;
        showStep(currentStep);
        
        // Remonter vers la barre de progression
        const progressBar = document.getElementById('progressBar');
        if (progressBar) {
            progressBar.scrollIntoView({ 
                behavior: 'smooth', 
                block: 'start' 
            });
        }
    }
}

function showErrorMessage(message) {
    // Supprimer les messages d'erreur existants
    const existingError = document.querySelector('.educator__error-message');
    if (existingError) {
        existingError.remove();
    }
    
    // Créer le nouveau message d'erreur
    const errorDiv = document.createElement('div');
    errorDiv.className = 'educator__error-message';
    errorDiv.innerHTML = `
        <div class="educator__alert educator__alert--danger">
            ${message}
        </div>
    `;
    
    // Insérer le message après le header
    const header = document.querySelector('.educator__header');
    if (header) {
        header.parentNode.insertBefore(errorDiv, header.nextSibling);
    }
    
    // Auto-suppression après 5 secondes
    setTimeout(() => {
        if (errorDiv.parentNode) {
            errorDiv.remove();
        }
    }, 5000);
}

function validateCurrentStep() {
    const currentStepElement = document.querySelector(`[data-step="${currentStep}"][data-available="true"]`);
    if (!currentStepElement) return true;
    
    const requiredFields = currentStepElement.querySelectorAll('[required]');
    let isValid = true;
    let firstInvalidField = null;
    
    // Réinitialiser les erreurs
    requiredFields.forEach(field => {
        field.classList.remove('error');
    });
    
    // Vérifier chaque champ obligatoire (seulement ceux qui sont visibles)
    requiredFields.forEach(field => {
        // Vérifier si le champ est visible
        const isVisible = field.offsetParent !== null && 
                         field.style.display !== 'none' && 
                         field.style.visibility !== 'hidden';
        
        if (!isVisible) return; // Ignorer les champs masqués
        
        let fieldValue = '';
        
        // Gestion spécifique selon le type de champ
        if (field.type === 'checkbox') {
            fieldValue = field.checked ? 'checked' : '';
        } else if (field.tagName === 'SELECT') {
            fieldValue = field.value;
        } else {
            fieldValue = field.value.trim();
        }
        
        if (!fieldValue) {
            field.classList.add('error');
            isValid = false;
            
            // Garder une référence au premier champ invalide
            if (!firstInvalidField) {
                firstInvalidField = field;
            }
        }
    });
    
    // Validation spéciale pour la sélection de profil (si affichée et pas à l'étape 1)
    if (currentStep > 1) {
        const profilSelect = document.getElementById('profil_select');
        const profilSelection = document.getElementById('profil_selection');
        
        // Vérifier que la sélection de profil est visible ET que le select a une valeur
        if (profilSelect && profilSelection && 
            profilSelection.style.display !== 'none' && 
            profilSelect.style.display !== 'none' && 
            !profilSelect.value) {
            
            profilSelect.classList.add('error');
            showErrorMessage('Veuillez sélectionner un profil avant de continuer.');
            profilSelect.scrollIntoView({ 
                behavior: 'smooth', 
                block: 'start' 
            });
            profilSelect.focus();
            return false;
        }
    }
    
    // Si validation échoue, afficher message et remonter vers le premier champ
    if (!isValid) {
        showErrorMessage('Veuillez remplir tous les champs obligatoires avant de continuer.');
        
        // Remonter vers le premier champ invalide
        if (firstInvalidField) {
            firstInvalidField.scrollIntoView({ 
                behavior: 'smooth', 
                block: 'start' 
            });
            firstInvalidField.focus();
        }
        
        return false;
    }
    
    return true;
}

function previousStep() {
    if (currentStep > 1) {
        currentStep--;
        showStep(currentStep);
        
        // Si on revient à l'étape 1, vider tous les champs
        if (currentStep === 1) {
            clearAllFields();
        }
    }
}

function fillFieldsWithPreviousData(data) {
    // Pré-remplir les champs avec les données de l'année précédente
    if (data.categories) {
        const categoriesInput = document.querySelector('input[name="categories"]');
        if (categoriesInput) categoriesInput.value = data.categories;
    }
    
    if (data.taille_maillot) {
        const maillotSelect = document.querySelector('select[name="taille_maillot"]');
        if (maillotSelect) {
            const option = maillotSelect.querySelector(`option[value="${data.taille_maillot}"]`);
            if (option) option.selected = true;
        }
    }
    
    if (data.taille_veste) {
        const vesteSelect = document.querySelector('select[name="taille_veste"]');
        if (vesteSelect) {
            const option = vesteSelect.querySelector(`option[value="${data.taille_veste}"]`);
            if (option) option.selected = true;
        }
    }
    
    if (data.taille_short) {
        const shortSelect = document.querySelector('select[name="taille_short"]');
        if (shortSelect) {
            const option = shortSelect.querySelector(`option[value="${data.taille_short}"]`);
            if (option) option.selected = true;
        }
    }
    
    if (data.taille_jogging) {
        const joggingSelect = document.querySelector('select[name="taille_jogging"]');
        if (joggingSelect) {
            const option = joggingSelect.querySelector(`option[value="${data.taille_jogging}"]`);
            if (option) option.selected = true;
        }
    }
    
    if (data.taille_coupe_vent) {
        const coupeVentSelect = document.querySelector('select[name="taille_coupe_vent"]');
        if (coupeVentSelect) {
            const option = coupeVentSelect.querySelector(`option[value="${data.taille_coupe_vent}"]`);
            if (option) option.selected = true;
        }
    }
    
    if (data.taille_parka) {
        const parkaSelect = document.querySelector('select[name="taille_parka"]');
        if (parkaSelect) {
            const option = parkaSelect.querySelector(`option[value="${data.taille_parka}"]`);
            if (option) option.selected = true;
        }
    }
    
    if (data.taille_cho7) {
        const cho7Select = document.querySelector('select[name="taille_cho7"]');
        if (cho7Select) {
            const option = cho7Select.querySelector(`option[value="${data.taille_cho7}"]`);
            if (option) option.selected = true;
        }
    }
    
    if (data.rib) {
        const ribInput = document.querySelector('input[name="rib"]');
        if (ribInput) ribInput.value = data.rib;
    }
    
    if (data.profil_id) {
        const profilSelect = document.getElementById('profil_select');
        if (profilSelect) {
            const option = profilSelect.querySelector(`option[value="${data.profil_id}"]`);
            if (option) option.selected = true;
        }
    }
    
    if (data.parent_firstname) {
        const parentFirstnameInput = document.querySelector('input[name="parent_firstname"]');
        if (parentFirstnameInput) parentFirstnameInput.value = data.parent_firstname;
    }
    
    if (data.parent_lastname) {
        const parentLastnameInput = document.querySelector('input[name="parent_lastname"]');
        if (parentLastnameInput) parentLastnameInput.value = data.parent_lastname;
    }
    
    if (data.parent_phone) {
        const parentPhoneInput = document.querySelector('input[name="parent_phone"]');
        if (parentPhoneInput) parentPhoneInput.value = data.parent_phone;
    }
    
    if (data.date_of_birth) {
        const dateOfBirthInput = document.querySelector('input[name="date_of_birth"]');
        if (dateOfBirthInput) dateOfBirthInput.value = data.date_of_birth;
    }
    
    if (data.is_parent_tutor) {
        const parentTutorCheckbox = document.getElementById('parent_tutor');
        if (parentTutorCheckbox) parentTutorCheckbox.checked = data.is_parent_tutor;
    }
    
    if (data.is_minor) {
        const isMinorCheckbox = document.getElementById('is_minor');
        if (isMinorCheckbox) isMinorCheckbox.checked = data.is_minor;
    }
    
    // Gestion des documents précédents
    if (data.photo_identite) {
        showPreviousFile('photo_identite_preview', data.photo_identite, 'Photo d\'identité');
    }
    
    if (data.carte_identite) {
        showPreviousFile('photo_carte_identite_preview', data.carte_identite, 'Photo carte d\'identité');
    }
    
    if (data.casier_judiciaire) {
        showPreviousFile('casier_judiciaire_preview', data.casier_judiciaire, 'Casier judiciaire');
    }
}

// Fonction pour afficher un fichier précédent
function showPreviousFile(previewId, fileName, fileType) {
    const previewElement = document.getElementById(previewId);
    if (previewElement) {
        previewElement.classList.add('has-file');
        
        // Déterminer l'icône selon le type de fichier
        let icon = '📎';
        let typeLabel = 'Document';
        let isImage = false;
        
        if (fileName.toLowerCase().includes('.jpg') || fileName.toLowerCase().includes('.jpeg') || 
            fileName.toLowerCase().includes('.png') || fileName.toLowerCase().includes('.gif')) {
            icon = '🖼️';
            typeLabel = 'Image';
            isImage = true;
        } else if (fileName.toLowerCase().includes('.pdf')) {
            icon = '📄';
            typeLabel = 'Document PDF';
        }
        
        if (isImage) {
            // Pour les images, afficher l'aperçu
            const imageUrl = `{{ path('educators_document', {'filename': 'FILENAME_PLACEHOLDER'}) }}`.replace('FILENAME_PLACEHOLDER', fileName);
            previewElement.innerHTML = `
                <div class="file-info">
                    <img src="${imageUrl}" alt="Aperçu" style="max-width: 200px; max-height: 150px; border-radius: 8px; margin-bottom: 10px; cursor: pointer;" onclick="openPreviewModal('${imageUrl}', '${fileName}')" title="Cliquer pour agrandir">
                    <div class="file-name">${fileName}</div>
                    <div class="file-type">${typeLabel} - Fichier déjà uploadé</div>
                </div>
                <button type="button" class="remove-file" onclick="removePreviousFile('${previewId}')" title="Supprimer">×</button>
            `;
        } else if (fileName.toLowerCase().includes('.pdf')) {
            // Pour les PDF, rendre cliquable
            const pdfUrl = `{{ path('educators_document', {'filename': 'FILENAME_PLACEHOLDER'}) }}`.replace('FILENAME_PLACEHOLDER', fileName);
            previewElement.innerHTML = `
                <div class="file-info" style="cursor: pointer;" onclick="openPreviewModal('${pdfUrl}', '${fileName}')" title="Cliquer pour visualiser">
                    <div style="font-size: 64px; margin-bottom: 15px;">📄</div>
                    <div class="file-name">${fileName}</div>
                    <div class="file-type">Document PDF - Fichier déjà uploadé</div>
                </div>
                <button type="button" class="remove-file" onclick="removePreviousFile('${previewId}')" title="Supprimer">×</button>
            `;
        } else {
            // Pour les autres types, afficher l'icône
            previewElement.innerHTML = `
                <div class="file-info">
                    <div style="font-size: 64px; margin-bottom: 15px;">${icon}</div>
                    <div class="file-name">${fileName}</div>
                    <div class="file-type">${typeLabel} - Fichier déjà uploadé</div>
                </div>
                <button type="button" class="remove-file" onclick="removePreviousFile('${previewId}')" title="Supprimer">×</button>
            `;
        }
    }
}

// Fonction pour supprimer un fichier précédent
function removePreviousFile(previewId) {
    const previewElement = document.getElementById(previewId);
    if (previewElement) {
        previewElement.classList.remove('has-file');
        previewElement.innerHTML = '';
    }
}

// Fonction pour gérer l'aperçu des fichiers sélectionnés
function handleFilePreview(input) {
    const file = input.files[0];
    const previewId = input.getAttribute('data-preview');
    const previewElement = document.getElementById(previewId);
    
    if (!previewElement) return;
    
    if (file) {
        previewElement.classList.add('has-file');
        
        // Déterminer le type de fichier
        const isImage = file.type.startsWith('image/');
        const isPDF = file.type === 'application/pdf';
        
        if (isImage) {
            // Aperçu pour les images
            const reader = new FileReader();
            reader.onload = function(e) {
                previewElement.innerHTML = `
                    <div class="file-info">
                        <img src="${e.target.result}" alt="Aperçu" style="max-width: 200px; max-height: 150px; border-radius: 8px; margin-bottom: 10px; cursor: pointer;" onclick="openPreviewModal('${e.target.result}', '${file.name}')" title="Cliquer pour agrandir">
                        <div class="file-name">${file.name}</div>
                        <div class="file-type">Image - ${(file.size / 1024 / 1024).toFixed(2)} MB</div>
                    </div>
                    <button type="button" class="remove-file" onclick="removeFile('${previewId}', '${input.name}')" title="Supprimer">×</button>
                `;
            };
            reader.readAsDataURL(file);
        } else if (isPDF) {
            // Aperçu pour les PDF
            const reader = new FileReader();
            reader.onload = function(e) {
                previewElement.innerHTML = `
                    <div class="file-info" style="cursor: pointer;" onclick="openPreviewModal('${e.target.result}', '${file.name}')" title="Cliquer pour visualiser">
                        <div style="font-size: 64px; color: #ef4444; margin-bottom: 15px;">📄</div>
                        <div class="file-name">${file.name}</div>
                        <div class="file-type">Document PDF - ${(file.size / 1024 / 1024).toFixed(2)} MB</div>
                    </div>
                    <button type="button" class="remove-file" onclick="removeFile('${previewId}', '${input.name}')" title="Supprimer">×</button>
                `;
            };
            reader.readAsDataURL(file);
        } else {
            // Aperçu pour les autres types
            previewElement.innerHTML = `
                <div class="file-info">
                    <div style="font-size: 64px; color: #6b7280; margin-bottom: 15px;">📎</div>
                    <div class="file-name">${file.name}</div>
                    <div class="file-type">Document - ${(file.size / 1024 / 1024).toFixed(2)} MB</div>
                </div>
                <button type="button" class="remove-file" onclick="removeFile('${previewId}', '${input.name}')" title="Supprimer">×</button>
            `;
        }
    } else {
        previewElement.classList.remove('has-file');
        previewElement.innerHTML = '';
    }
}

// Fonction pour supprimer un fichier sélectionné
function removeFile(previewId, inputName) {
    const previewElement = document.getElementById(previewId);
    const inputElement = document.querySelector(`input[name="${inputName}"]`);
    
    if (previewElement) {
        previewElement.classList.remove('has-file');
        previewElement.innerHTML = '';
    }
    
    if (inputElement) {
        inputElement.value = '';
    }
}

// Fonction pour ouvrir la modale d'aperçu
function openPreviewModal(fileSrc, fileName) {
    const modal = document.getElementById('imageModal');
    const modalContent = document.getElementById('modalContent');
    const modalCaption = document.getElementById('modalCaption');
    
    // Déterminer le type de fichier
    const isImage = fileName.toLowerCase().match(/\.(jpg|jpeg|png|gif|webp)$/);
    const isPDF = fileName.toLowerCase().endsWith('.pdf');
    
    if (isImage) {
        // Aperçu d'image
        modalContent.innerHTML = `
            <img src="${fileSrc}" alt="Aperçu" class="max-w-full max-h-[80vh] object-contain rounded-lg mx-auto">
        `;
    } else if (isPDF) {
        // Aperçu PDF avec iframe
        modalContent.innerHTML = `
            <iframe src="${fileSrc}" 
                    class="w-full h-[80vh] rounded-lg border-0" 
                    title="Aperçu PDF">
            </iframe>
        `;
    } else {
        // Pour les autres types de fichiers
        modalContent.innerHTML = `
            <div class="flex items-center justify-center h-[80vh] bg-gray-100 rounded-lg">
                <div class="text-center">
                    <div class="text-6xl mb-4">📄</div>
                    <div class="text-xl text-gray-600">Aperçu non disponible</div>
                    <div class="text-sm text-gray-500 mt-2">${fileName}</div>
                    <a href="${fileSrc}" target="_blank" class="inline-block mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
                        Télécharger le fichier
                    </a>
                </div>
            </div>
        `;
    }
    
    modalCaption.textContent = fileName;
    modal.classList.remove('hidden');
    
    // Empêcher le scroll du body
    document.body.style.overflow = 'hidden';
}

// Fonction pour fermer la modale
function closeImageModal() {
    const modal = document.getElementById('imageModal');
    modal.classList.add('hidden');
    
    // Restaurer le scroll du body
    document.body.style.overflow = 'auto';
}

// Gestion des événements de la modale
document.addEventListener('DOMContentLoaded', function() {
    const modal = document.getElementById('imageModal');
    const closeButton = document.getElementById('closeModal');
    
    // Fermer avec le bouton
    closeButton.addEventListener('click', closeImageModal);
    
    // Fermer en cliquant sur l'arrière-plan
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            closeImageModal();
        }
    });
    
    // Fermer avec la touche Escape
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
            closeImageModal();
        }
    });
});

function clearAllFields() {
    // Vider tous les inputs text (sauf les readonly)
    document.querySelectorAll('.educator__form-input').forEach(input => {
        if (!input.readOnly) {
            input.value = '';
        }
    });
    
    // Réinitialiser tous les selects
    document.querySelectorAll('.educator__form-select').forEach(select => {
        select.selectedIndex = 0;
    });
    
    // Décocher toutes les checkboxes
    document.querySelectorAll('.educator__form-checkbox').forEach(checkbox => {
        checkbox.checked = false;
    });
    
    // Vider tous les aperçus de fichiers
    document.querySelectorAll('.educator__file-preview').forEach(preview => {
        preview.classList.remove('has-file');
        preview.innerHTML = '';
    });
    
    // Vider tous les inputs de fichiers
    document.querySelectorAll('input[type="file"]').forEach(input => {
        input.value = '';
    });
    
    // Réinitialiser le type sélectionné
    document.getElementById('educatorType').value = '';
    
    // Désélectionner les options de type
    document.querySelectorAll('.educator__type-option').forEach(option => {
        option.classList.remove('selected');
    });
    
    // Désactiver le bouton suivant
    document.getElementById('nextButton').disabled = true;
    
    // Réinitialiser la barre de progression
    generateProgressBar('');
    
    // Réinitialiser les variables
    currentType = '';
    totalSteps = 3;
    
    // Réinitialiser les données précédentes
    previousYearData = null;
}

// Fonction pour récupérer les données de l'année précédente via AJAX
async function fetchPreviousYearData(type) {
    try {
        const response = await fetch(`{{ path('educators_previous_data') }}?type=${encodeURIComponent(type)}`);
        const result = await response.json();
        
        if (result.success && result.data) {
            previousYearData = result.data;
            
            // Afficher l'alerte de données pré-remplies
            const alertElement = document.getElementById('previousDataAlert');
            if (alertElement) {
                alertElement.style.display = 'block';
            }
            
            // Pré-remplir les champs avec les données récupérées
            fillFieldsWithPreviousData(previousYearData);
            
            return true;
        }
        return false;
    } catch (error) {
        console.error('Erreur lors de la récupération des données précédentes:', error);
        return false;
    }
}

// Gestion de la sélection de type
document.querySelectorAll('.educator__type-option').forEach(option => {
    option.addEventListener('click', async function() {
        const selectedType = this.getAttribute('data-type');
        
        // Si on change de type, vider d'abord tous les champs
        if (currentType && currentType !== selectedType) {
            clearAllFields();
            // Masquer l'alerte de données précédentes
            const alertElement = document.getElementById('previousDataAlert');
            if (alertElement) {
                alertElement.style.display = 'none';
            }
        }
        
        // Retirer la sélection précédente
        document.querySelectorAll('.educator__type-option').forEach(opt => {
            opt.classList.remove('selected');
        });
        
        // Sélectionner l'option cliquée
        this.classList.add('selected');
        
        // Mettre à jour le champ caché
        document.getElementById('educatorType').value = selectedType;
        
        // Activer le bouton suivant
        document.getElementById('nextButton').disabled = false;
        
        // Stocker le type sélectionné
        currentType = selectedType;
        totalSteps = stepConfig[selectedType].totalSteps;
        
        // Essayer de récupérer les données de l'année précédente pour le nouveau type
        await fetchPreviousYearData(selectedType);
    });
});



// Validation du formulaire avant soumission
document.getElementById('educatorForm').addEventListener('submit', function(e) {
    const currentType = document.getElementById('educatorType').value;
    let isValid = true;
    const errors = [];
    
    // Réinitialiser les erreurs
    this.querySelectorAll('.error').forEach(field => {
        field.classList.remove('error');
    });
    
    // Validation selon le type
    switch(currentType) {
        case 'Educateur':
            // Vérifier les champs obligatoires pour éducateur
            const categoriesInput = this.querySelector('input[name="categories"]');
            const ribInput = this.querySelector('input[name="rib"]');
            const acceptTermsInput = this.querySelector('input[name="accept_terms"]');
            
            if (!categoriesInput.value.trim()) {
                categoriesInput.classList.add('error');
                errors.push('Les catégories entraînées sont obligatoires');
                isValid = false;
            }
            if (!ribInput.value.trim()) {
                ribInput.classList.add('error');
                errors.push('Le RIB est obligatoire');
                isValid = false;
            }
            if (!acceptTermsInput.checked) {
                acceptTermsInput.classList.add('error');
                errors.push('Vous devez accepter les conditions');
                isValid = false;
            }
            break;
            
        case 'Educateur Mineur':
            // Vérifier les champs obligatoires pour éducateur mineur
            const profilSelect = this.querySelector('select[name="profil_id"]');
            const categoriesInputMinor = this.querySelector('input[name="categories"]');
            const ribInputMinor = this.querySelector('input[name="rib"]');
            const acceptTermsInputMinor = this.querySelector('input[name="accept_terms"]');
            
            if (!profilSelect.value) {
                profilSelect.classList.add('error');
                errors.push('La sélection du profil est obligatoire');
                isValid = false;
            }
            if (!categoriesInputMinor.value.trim()) {
                categoriesInputMinor.classList.add('error');
                errors.push('Les catégories entraînées sont obligatoires');
                isValid = false;
            }
            if (!ribInputMinor.value.trim()) {
                ribInputMinor.classList.add('error');
                errors.push('Le RIB est obligatoire');
                isValid = false;
            }
            if (!acceptTermsInputMinor.checked) {
                acceptTermsInputMinor.classList.add('error');
                errors.push('Vous devez accepter les conditions');
                isValid = false;
            }
            break;
            
        case 'Dirigeant':
            // Vérifier les champs obligatoires pour dirigeant
            const categoriesInputDir = this.querySelector('input[name="categories"]');
            const cho7Select = this.querySelector('select[name="taille_cho7"]');
            
            if (!categoriesInputDir.value.trim()) {
                categoriesInputDir.classList.add('error');
                errors.push('La fonction au club est obligatoire');
                isValid = false;
            }
            if (!cho7Select.value) {
                cho7Select.classList.add('error');
                errors.push('La taille CHO7 est obligatoire');
                isValid = false;
            }
            break;
            
        case 'Enfant':
            // Vérifier les champs obligatoires pour enfant
            const profilSelectChild = this.querySelector('select[name="profil_id"]');
            const cho7SelectChild = this.querySelector('select[name="taille_cho7"]');
            const acceptTermsaInput = this.querySelector('input[name="accept_termsa"]');
            const acceptBenefitInput = this.querySelector('input[name="accept_benefit"]');
            
            if (!profilSelectChild.value) {
                profilSelectChild.classList.add('error');
                errors.push('La sélection du profil est obligatoire');
                isValid = false;
            }
            if (!cho7SelectChild.value) {
                cho7SelectChild.classList.add('error');
                errors.push('La taille CHO7 est obligatoire');
                isValid = false;
            }
            if (!acceptTermsaInput.checked) {
                acceptTermsaInput.classList.add('error');
                errors.push('Vous devez accepter les dispositions de l\'article L. 212-9');
                isValid = false;
            }
            if (!acceptBenefitInput.checked) {
                acceptBenefitInput.classList.add('error');
                errors.push('Vous devez accepter la licence gratuite');
                isValid = false;
            }
            break;
    }
    
    if (!isValid) {
        e.preventDefault();
        alert('Erreurs de validation :\n' + errors.join('\n'));
    }
});

// Initialisation
document.addEventListener('DOMContentLoaded', function() {
    // Générer la barre de progression par défaut (vide)
    generateProgressBar('');
    
    // Marquer toutes les étapes comme disponibles au début
    document.querySelectorAll('.educator__step').forEach(step => {
        step.setAttribute('data-available', 'true');
    });
    
    // Afficher l'étape 1 par défaut
    showStep(1);
    
    // Gestion des aperçus de fichiers
    document.querySelectorAll('input[type="file"]').forEach(input => {
        input.addEventListener('change', function() {
            handleFilePreview(this);
        });
    });
    
    // Adapter les champs quand on passe à l'étape 2
    document.getElementById('nextButton').addEventListener('click', function() {
        if (currentType) {
            if (currentStep === 1) {
                // Première fois qu'on clique sur Suivant
                // Générer la nouvelle barre de progression
                generateProgressBar(currentType);
                
                // Adapter les champs
                adaptFieldsForType(currentType);
                
                // Afficher les étapes appropriées
                showStepsForType(currentType);
                
                // Passer à l'étape 2
                nextStep();
            } else {
                // Navigation normale
                nextStep();
            }
        }
    });
});
</script>
{% endblock %}