{% extends 'base.html' %}
{% load static %}
    <!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Formulaire de candidature en ligne pour l'ESSIG, avec un design moderne et une navigation fluide.">
    <meta name="author" content="ESSIG">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100    ..900&display=swap" rel="stylesheet">
    <!-- Bootstrap CSS -->                  
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="shortcut icon" type="image/jpeg" href="{% static 'img/logo-removebg-preview.png' %}">
</head>
{% block title %}Postuler - ESSIG{% endblock %}

{% block extra_css %}
<style>
    /* =========================
       🎨 VARIABLES GLOBALES
    ========================= */
    :root {
        /* Colors */
        --color-primary: #205397;
        --color-accent: #e90707;
        --color-dark: #1E1E1E;
        --color-light-blue: #4A90E2;
        --color-white: #FFFFFF;
        
        /* Typography */
        --font-main: "Roboto", sans-serif;
    }

    * {
        font-family: var(--font-main);
    }

    /* Stepper Styles */
    .stepper {
        display: flex;
        justify-content: space-between;
        margin-bottom: 40px;
        position: relative;
    }

    .stepper::before {
        content: '';
        position: absolute;
        top: 20px;
        left: 0;
        right: 0;
        height: 2px;
        background: #e0e0e0;
        z-index: 1;
    }

    .step {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid #e0e0e0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        z-index: 2;
        transition: all 0.3s;
        position: relative;
        font-size: 1.1rem;
    }

    .step.active {
        border-color: var(--color-primary);
        background: linear-gradient(135deg, var(--color-primary), var(--color-light-blue));
        color: white;
        transform: scale(1.05);
        box-shadow: 0 0 0 3px rgba(32, 83, 151, 0.2);
    }

    .step.completed {
        background: var(--color-primary);
        color: #fff;
        border-color: var(--color-primary);
    }

    .step-label {
        position: absolute;
        top: 50px;
        font-size: 0.7rem;
        white-space: nowrap;
        color: #6c757d;
        font-weight: 500;
    }

    .step.active .step-label {
        color: var(--color-primary);
        font-weight: bold;
    }

    .step.completed .step-label {
        color: var(--color-primary);
    }

    /* Form Steps */
    .form-step {
        display: none;
        animation: fadeIn 0.4s ease-in-out;
    }

    .form-step.active {
        display: block;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Card Styles */
    .card {
        border: none;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        border-radius: 20px;
        overflow: hidden;
    }

    .card-header {
        background: linear-gradient(135deg, var(--color-primary), var(--color-light-blue));
        color: white;
        padding: 2rem;
        border-bottom: 4px solid var(--color-accent);
    }

    .card-header h2 {
        font-weight: 800;
        margin-bottom: 0.5rem;
    }

    /* Form Controls */
    .form-label {
        font-weight: 600;
        color: var(--color-dark);
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
    }

    .form-control, .form-select {
        border: 1.5px solid #e0e0e0;
        border-radius: 10px;
        padding: 0.6rem 1rem;
        transition: all 0.3s;
    }

    .form-control:focus, .form-select:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 0.2rem rgba(32, 83, 151, 0.15);
        outline: none;
    }

    .form-control.is-invalid, .form-select.is-invalid {
        border-color: var(--color-accent);
    }

    /* Section Title */
    .section-title {
        color: var(--color-primary);
        border-left: 4px solid var(--color-accent);
        padding-left: 15px;
        margin-bottom: 25px;
        font-weight: 700;
        font-size: 1.4rem;
    }

    /* Buttons */
    .btn-primary {
        background: linear-gradient(135deg, var(--color-primary), var(--color-light-blue));
        border: none;
        padding: 0.7rem 2rem;
        font-weight: 600;
        border-radius: 50px;
        transition: all 0.3s;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(32, 83, 151, 0.3);
    }

    .btn-success {
        background: linear-gradient(135deg, #28a745, #20c997);
        border: none;
        padding: 0.7rem 2rem;
        font-weight: 600;
        border-radius: 50px;
        transition: all 0.3s;
    }

    .btn-success:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
    }

    .btn-outline-secondary {
        border: 1.5px solid #ccc;
        border-radius: 50px;
        padding: 0.7rem 2rem;
        font-weight: 600;
        transition: all 0.3s;
    }

    .btn-outline-secondary:hover {
        background: #f8f9fa;
        transform: translateY(-2px);
    }

    /* Summary Card */
    .summary-card {
        background: linear-gradient(135deg, #f8f9fa, #ffffff);
        border-left: 4px solid var(--color-accent);
        padding: 1.5rem;
        border-radius: 15px;
        margin-bottom: 1rem;
    }

    /* File Input Styling */
    input[type="file"] {
        padding: 0.5rem;
        background: #fff;
    }

    input[type="file"]::file-selector-button {
        background: var(--color-primary);
        color: white;
        border: none;
        padding: 0.4rem 1rem;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s;
    }

    input[type="file"]::file-selector-button:hover {
        background: var(--color-light-blue);
    }

    /* Checkbox Styling */
    .form-check-input:checked {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
    }

    /* Responsive */
    @media (max-width: 768px) {
        .step-label {
            display: none !important;
        }
        
        .step {
            width: 35px;
            height: 35px;
            font-size: 0.9rem;
        }
        
        .stepper::before {
            top: 17px;
        }
        
        .card-header {
            padding: 1rem;
        }
        
        .section-title {
            font-size: 1.2rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="card">
                <div class="card-header text-center">
                    <h2>📋 Postuler à l'ESSIG</h2>
                    <p class="mb-0 opacity-75">Rejoignez une école d'excellence</p>
                </div>
                <div class="card-body p-4 p-md-5">
                    
                    <!-- Stepper -->
                    <div class="stepper mb-5">
                        <div class="step active" data-step="1">
                            1 
                            <span class="step-label d-none d-md-block">Personnel</span>
                        </div>
                        <div class="step" data-step="2">
                            2 
                            <span class="step-label d-none d-md-block">Académique</span>
                        </div>
                        <div class="step" data-step="3">
                            3 
                            <span class="step-label d-none d-md-block">Formation</span>
                        </div>
                        <div class="step" data-step="4">
                            4 
                            <span class="step-label d-none d-md-block">Documents</span>
                        </div>
                        <div class="step" data-step="5">
                            5 
                            <span class="step-label d-none d-md-block">Urgence</span>
                        </div>
                        <div class="step" data-step="6">
                            6 
                            <span class="step-label d-none d-md-block">Motivation</span>
                        </div>
                        <div class="step" data-step="7">
                            7 
                            <span class="step-label d-none d-md-block">Validation</span>
                        </div>
                    </div>

                    <form id="multiStepForm" method="post" enctype="multipart/form-data" novalidate>
                        {% csrf_token %}

                        <!-- Étape 1 : Informations personnelles -->
                        <div class="form-step active" data-step="1">
                            <h4 class="section-title">📝 Informations personnelles</h4>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">Nom</label>
                                    {{ form.nom }}
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Prénom(s)</label>
                                    {{ form.prenoms }}
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Sexe</label>
                                    {{ form.sexe }}
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Date de naissance</label>
                                    {{ form.date_naissance }}
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Lieu de naissance</label>
                                    {{ form.lieu_naissance }}
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Nationalité</label>
                                    {{ form.nationalite }}
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Photo d'identité</label>
                                    {{ form.photo_identite }}
                                    <small class="text-muted">Format JPG/PNG, max 2MB</small>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Numéro de téléphone</label>
                                    {{ form.telephone }}
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Numéro WhatsApp</label>
                                    {{ form.whatsapp }}
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Adresse email</label>
                                    {{ form.email }}
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Ville / Pays</label>
                                    {{ form.ville_pays }}
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Adresse complète</label>
                                    {{ form.adresse_complete }}
                                </div>
                            </div>
                        </div>

                        <!-- Étape 2 : Informations académiques -->
                        <div class="form-step" data-step="2">
                            <h4 class="section-title">🎓 Informations académiques</h4>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">Dernier diplôme obtenu</label>
                                    {{ form.dernier_diplome }}
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Série du Bac</label>
                                    {{ form.serie_bac }}
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Année d'obtention</label>
                                    {{ form.annee_obtention }}
                                </div>
                                <div class="col-md-8">
                                    <label class="form-label">Établissement fréquenté</label>
                                    {{ form.etablissement_frequente }}
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Moyenne obtenue</label>
                                    {{ form.moyenne_obtenue }}
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Niveau actuel d'étude</label>
                                    {{ form.niveau_actuel_etude }}
                                </div>
                            </div>
                        </div>

                        <!-- Étape 3 : Choix de formation -->
                        <div class="form-step" data-step="3">
                            <h4 class="section-title">🏫 Choix de formation</h4>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">Type de formation</label>
                                    {{ form.type_formation }}
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Mode d'étude</label>
                                    {{ form.mode_etude }}
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Filière choisie</label>
                                    {{ form.filiere_choisie }}
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Deuxième choix (optionnel)</label>
                                    {{ form.deuxieme_choix_filiere }}
                                </div>
                            </div>
                        </div>

                        <!-- Étape 4 : Documents -->
                        <div class="form-step" data-step="4">
                            <h4 class="section-title">📂 Documents requis</h4>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">Copie du BAC ou relevé</label>
                                    {{ form.bac_releve }}
                                    <small class="text-muted">PDF, JPG ou PNG</small>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Acte de naissance</label>
                                    {{ form.acte_naissance }}
                                    <small class="text-muted">PDF, JPG ou PNG</small>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Certificat de nationalité (optionnel)</label>
                                    {{ form.certificat_nationalite }}
                                    <small class="text-muted">PDF, JPG ou PNG</small>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">CV (optionnel)</label>
                                    {{ form.cv }}
                                    <small class="text-muted">PDF uniquement</small>
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Lettre de motivation</label>
                                    {{ form.lettre_motivation }}
                                    <small class="text-muted">PDF, DOC ou DOCX</small>
                                </div>
                            </div>
                        </div>

                        <!-- Étape 5 : Contact d'urgence -->
                        <div class="form-step" data-step="5">
                            <h4 class="section-title">👨‍👩‍👦 Contact d'urgence</h4>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">Nom du parent ou tuteur</label>
                                    {{ form.parent_nom }}
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Relation avec l'étudiant</label>
                                    {{ form.parent_relation }}
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Profession</label>
                                    {{ form.parent_profession }}
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Téléphone</label>
                                    {{ form.parent_telephone }}
                                </div>
                            </div>
                        </div>

                        <!-- Étape 6 : Informations complémentaires -->
                        <div class="form-step" data-step="6">
                            <h4 class="section-title">💡 Motivation et projet</h4>
                            <div class="row g-3">
                                <div class="col-12">
                                    <label class="form-label">Pourquoi souhaitez-vous intégrer l'ESSIG ?</label>
                                    {{ form.motivation }}
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Avez-vous une expérience professionnelle ?</label>
                                    {{ form.experience_professionnelle }}
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Projet professionnel / objectif de carrière</label>
                                    {{ form.projet_professionnel }}
                                </div>
                            </div>
                        </div>

                        <!-- Étape 7 : Validation finale -->
                        <div class="form-step" data-step="7">
                            <h4 class="section-title">✅ Validation de la candidature</h4>
                            <div class="summary-card">
                                <h5 class="mb-3" style="color: var(--color-primary);">📋 Récapitulatif</h5>
                                <p class="text-muted">Veuillez vérifier toutes vos informations avant de soumettre. Vous pouvez revenir aux étapes précédentes pour apporter des modifications.</p>
                                <hr>
                                <div class="form-check mt-4">
                                    {{ form.certifie_exactitude }}
                                    <label class="form-check-label" for="{{ form.certifie_exactitude.id_for_label }}">
                                        Je certifie sur l'honneur que les informations fournies sont exactes et sincères.
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Navigation Buttons -->
                        <div class="mt-5 d-flex justify-content-between">
                            <button type="button" class="btn btn-outline-secondary px-5 py-2" id="prevBtn" onclick="nextPrev(-1)">
                                ◀ Précédent
                            </button>
                            <button type="button" class="btn btn-primary px-5 py-2" id="nextBtn" onclick="nextPrev(1)">
                                Suivant ▶
                            </button>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    let currentStep = 1;
    const totalSteps = 7;

    function showStep(n) {
        const steps = document.getElementsByClassName("form-step");
        const stepperItems = document.getElementsByClassName("step");
        
        // Hide all steps
        for (let i = 0; i < steps.length; i++) {
            steps[i].classList.remove("active");
        }
        
        // Show current step
        if (steps[n - 1]) {
            steps[n - 1].classList.add("active");
        }
        
        // Update stepper UI
        for (let i = 0; i < stepperItems.length; i++) {
            stepperItems[i].classList.remove("active", "completed");
            if (i + 1 < n) {
                stepperItems[i].classList.add("completed");
            } else if (i + 1 === n) {
                stepperItems[i].classList.add("active");
            }
        }
        
        // Update buttons visibility
        const prevBtn = document.getElementById("prevBtn");
        const nextBtn = document.getElementById("nextBtn");
        
        if (n === 1) {
            prevBtn.style.opacity = "0.5";
            prevBtn.disabled = true;
        } else {
            prevBtn.style.opacity = "1";
            prevBtn.disabled = false;
        }
        
        if (n === totalSteps) {
            nextBtn.innerHTML = "✅ Soumettre la candidature";
            nextBtn.classList.remove("btn-primary");
            nextBtn.classList.add("btn-success");
        } else {
            nextBtn.innerHTML = "Suivant ▶";
            nextBtn.classList.remove("btn-success");
            nextBtn.classList.add("btn-primary");
        }

        // Scroll to top smoothly
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    function nextPrev(n) {
        // Validation simple avant de passer à l'étape suivante
        if (n === 1 && !validateStep()) {
            return false;
        }
        
        currentStep += n;
        
        if (currentStep > totalSteps) {
            document.getElementById("multiStepForm").submit();
            return false;
        }
        
        if (currentStep < 1) {
            currentStep = 1;
            return false;
        }
        
        showStep(currentStep);
        return false;
    }

    function validateStep() {
    const currentStepEl = document.querySelector(`.form-step[data-step="${currentStep}"]`);
    if (!currentStepEl) return true;
    
    const inputs = currentStepEl.querySelectorAll("input[required], select[required], textarea[required]");
    let valid = true;
    
    // Clear previous invalid states
    inputs.forEach(input => {
        input.classList.remove("is-invalid");
    });
    
    // Check each required input
    inputs.forEach(input => {
        if (!input.value.trim()) {
            input.classList.add("is-invalid");
            valid = false;
            
            // Add error message if not exists
            let errorDiv = input.parentElement.querySelector(".invalid-feedback");
            if (!errorDiv) {
                errorDiv = document.createElement("div");
                errorDiv.className = "invalid-feedback";
                errorDiv.innerText = "Ce champ est obligatoire.";
                input.parentElement.appendChild(errorDiv);
            }
        }
    });
    
    // Special check for Step 7 checkbox (CORRIGÉ)
    if (currentStep === totalSteps) {  // Changé de totalSteps - 1 à totalSteps
        const checkbox = document.getElementById("id_certifie_exactitude");
        if (checkbox && !checkbox.checked) {
            alert("Veuillez certifier l'exactitude des informations.");
            valid = false;
        }
    }
    
    if (!valid) {
        // Scroll to first invalid field
        const firstInvalid = document.querySelector(".is-invalid");
        if (firstInvalid) {
            firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
    }
    
    return valid;
}

    // Add real-time validation removal
    document.addEventListener('input', function(e) {
        if (e.target.classList && e.target.classList.contains('is-invalid')) {
            e.target.classList.remove('is-invalid');
        }
    });
    
    // Initialize step and add keyboard navigation
    document.addEventListener('DOMContentLoaded', function() {
        showStep(currentStep);
        
        // Optional: Keyboard navigation
        document.addEventListener('keydown', function(e) {
            if (e.key === 'ArrowRight' && !e.target.matches('input, textarea, select')) {
                e.preventDefault();
                if (currentStep < totalSteps && validateStep()) {
                    currentStep++;
                    showStep(currentStep);
                } else if (currentStep === totalSteps) {
                    document.getElementById("multiStepForm").submit();
                }
            } else if (e.key === 'ArrowLeft' && !e.target.matches('input, textarea, select')) {
                e.preventDefault();
                if (currentStep > 1) {
                    currentStep--;
                    showStep(currentStep);
                }
            }
        });
    });
</script>
{% endblock %}