<?php
session_start();
$candidat = $_SESSION['candidat'];
if (isset($candidat)) {
    $candidat_data = $_SESSION['candidat'];
    $candidat_id = $candidat_data["id"];
} else {
    $candidat_data = null;
    header('Location: /est-concours/app/cnx/candidat/login');
    exit();
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inscription - Formulaire en 3 Étapes</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <!-- Google Fonts - Montserrat -->
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"
          rel="stylesheet">
    <link href="../../../../css/candidat-styles.css" rel="stylesheet">

</head>

<body>

<?php include "../../../../layouts/candidat/header.php"; ?>

<!-- Spinner Overlay -->
<div class="spinner-overlay" id="spinnerOverlay">
    <div class="spinner-box">
        <div class="spinner-border" role="status"></div>
        <p></p>
    </div>
</div>

<main class="main-content">
    <div class="container-custom">
        <div class="row justify-content-center">
            <div class="col-12">
                <div class="card main-card">
                    <!-- Step Content -->
                    <div class="card-body p-4 p-md-4">

                        <div class="step-content active" id="step1">
                            <div class="col-md-3 mb-3">
                                <button type="button"
                                        class="btn btn-custom-secondary d-flex align-items-center justify-content-center gap-2"
                                        onclick="fillUpTestData()">
                                    <i class="fas fa-user-plus"></i> Remplir Pour Test
                                </button>
                            </div>

                            <p class="step-description">Remplissez vos informations personnelles de base. Tous les
                                champs marqués d'un <span class="required">*</span> sont obligatoires.</p>

                            <form id="personalInfoForm" enctype="multipart/form-data">
                                <!-- Section 0: Concours -->
                                <div class="form-section mb-3">
                                    <h6 class="form-section-title d-flex align-items-center gap-2">
                                        <i class="fas fa-trophy"></i> Concours
                                    </h6>
                                    <div class="row g-3 mb-3">




                                        <input type="text" class="form-control" id="candidat_id" name="candidat_id" hidden="hidden"
                                               placeholder="Ex: AB123456" maxlength="8" required value="<?php echo $candidat_id ?>">
                                        <div class="error-message" id="cin-error">Le CIN doit contenir 8
                                            caractères.
                                        </div>




                                        <div class="col-md-4">
                                            <label class="form-label">CIN<span class="required">*</span></label>
                                            <input type="text" class="form-control" id="cin" name="cin"
                                                   placeholder="Ex: AB123456" maxlength="8" required value="<?php echo $candidat_data["cin"] ?>">
                                            <div class="error-message" id="cin-error">Le CIN doit contenir 8
                                                caractères.
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">Concours<span class="required">*</span></label>
                                            <select class="form-select" id="concours_id" name="concours_id" required>
                                                <option value="">Sélectionner un concours...</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">Type du diplôme obtenu<span class="required">*</span></label>

                                            <select class="form-select" id="type_diplome_obtenu" name="type_diplome_obtenu" required>
                                                <option value="">Sélectionner...</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <!-- Section 1: Basic Information -->
                                <div class="form-section mb-3">
                                    <h6 class="form-section-title d-flex align-items-center gap-2">
                                        <i class="fas fa-user"></i> Informations de Base
                                    </h6>
                                    <div class="row g-3 mb-3">
                                        <div class="col-md-3">
                                            <label class="form-label">Civilité<span class="required">*</span></label>
                                            <select class="form-select" name="civilite" id="civilite" required>
                                                <option value="">Sélectionner...</option>
                                                <option value="Monsieur">Monsieur</option>
                                                <option value="Madame">Madame</option>
                                                <option value="Mademoiselle">Mademoiselle</option>
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">Adresse e-mail<span
                                                        class="required">*</span></label>
                                            <input type="email" class="form-control" id="email" name="email"
                                                   placeholder="exemple@domain.com" required  value="<?php echo $candidat_data["email"] ?>">
                                            <div class="error-message" id="email-error">Veuillez saisir une adresse
                                                email valide.
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">Prénom (Français)<span
                                                        class="required">*</span></label>
                                            <input type="text" class="form-control" name="prenom" id="prenom"
                                                   placeholder="Entrez votre prénom" required  value="<?php echo $candidat_data["prenom"] ?>">
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">Nom (Français)<span
                                                        class="required">*</span></label>
                                            <input type="text" class="form-control" name="nom" id="nom"
                                                   placeholder="Entrez votre nom" required value="<?php echo $candidat_data["nom"] ?>">
                                        </div>
                                    </div>
                                    <div class="row g-3 mb-3">
                                        <div class="col-md-4">
                                            <label class="form-label">الاسم الشخصي (عربي)<span class="required">*</span></label>
                                            <input type="text" class="form-control arabic-input" name="prenom_arabe"
                                                   id="prenom_arabe" placeholder="أدخل اسمك الشخصي" required>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">الاسم العائلي (عربي)<span
                                                        class="required">*</span></label>
                                            <input type="text" class="form-control arabic-input" name="nom_arabe"
                                                   id="nom_arabe" placeholder="أدخل اسمك العائلي" required>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">Numéro de téléphone<span class="required">*</span></label>
                                            <input type="tel" class="form-control" id="telephone" name="telephone"
                                                   placeholder="06XXXXXXXX" pattern="[0-9]{10}" required>
                                            <div class="error-message" id="telephone-error">Le numéro doit contenir 10
                                                chiffres.
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Section 2: Birth Information -->
                                <div class="form-section mb-3">
                                    <h6 class="form-section-title d-flex align-items-center gap-2">
                                        <i class="fas fa-birthday-cake"></i> Informations de Naissance
                                    </h6>
                                    <div class="row g-3 mb-3">
                                        <div class="col-md-4">
                                            <label class="form-label">Situation familiale<span class="required">*</span></label>
                                            <select class="form-select" name="situation_familiale"
                                                    id="situation_familiale" required>
                                                <option value="">Sélectionner...</option>
                                                <option value="Célibataire">Célibataire</option>
                                                <option value="Marié(e)">Marié(e)</option>
                                                <option value="Divorcé(e)">Divorcé(e)</option>
                                                <option value="Veuf(ve)">Veuf(ve)</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">Date de naissance<span
                                                        class="required">*</span></label>
                                            <input type="date" class="form-control" name="date_naissance"
                                                   id="date_naissance" required>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">Lieu de naissance (Français)<span
                                                        class="required">*</span></label>
                                            <input type="text" class="form-control" id="lieu_naissance"
                                                   name="lieu_naissance" placeholder="Ex: Casablanca" required>
                                        </div>
                                    </div>
                                    <div class="row g-3">
                                        <div class="col-md-4">
                                            <label class="form-label">Lieu de naissance (Arabe)<span
                                                        class="required">*</span></label>
                                            <input type="text" class="form-control arabic-input"
                                                   id="lieu_naissance_arabe" name="lieu_naissance_arabe"
                                                   placeholder="مثال: الدار البيضاء" required>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">Province de naissance<span
                                                        class="required">*</span></label>
                                            <select class="form-select" name="province_naissance" id="province_naissance" required>
                                                <option value="">Sélectionner...</option>
                                                <option value="Autre">Autre (Étranger)</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">Nationalité<span class="required">*</span></label>
                                            <select class="form-control" id="nationalite" name="nationalite" required>
                                                <option value="Autre">Autre (Nationalité non listée)</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <!-- Section 3: Address Information -->
                                <div class="form-section mb-3">
                                    <h6 class="form-section-title d-flex align-items-center gap-2">
                                        <i class="fas fa-home"></i> Divers
                                    </h6>
                                    <div class="row g-3 mb-3">
                                        <div class="col-md-4">
                                            <label class="form-label">Adresse (Français)<span class="required">*</span></label>
                                            <input type="text" class="form-control" id="adresse" name="adresse"
                                                   placeholder="Ex: Rue xxx, Quartier xxx" required>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">Adresse (Arabe)<span
                                                        class="required">*</span></label>
                                            <input type="text" class="form-control arabic-input" id="adresse_arabe"
                                                   name="adresse_arabe" placeholder="مثال: شارع xxx، حي xxx" required>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">Code Postal<span class="required">*</span></label>
                                            <input type="text" class="form-control" id="code_postal" name="code_postal"
                                                   placeholder="Ex: 10000" pattern="[0-9]{5}" required>
                                            <div class="error-message" id="code_postal-error">Le code postal doit
                                                contenir 5 chiffres.
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label class="form-label">Province de résidence<span
                                                        class="required">*</span></label>
                                            <select class="form-select" id="province_residence" name="province_residence" required>
                                                <option value="">Sélectionner...</option>
                                                <option value="Autre">Autre (Étranger)</option>
                                            </select>
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label">Situation professionnelle<span
                                                        class="required">*</span></label>
                                            <select class="form-select" id="situation_professionnelle"
                                                    name="situation_professionnelle" required>
                                                <option value="">Sélectionner...</option>
                                                <option value="Non employé">Non employé</option>
                                                <option value="Employé">Employé</option>
                                                <option value="Fonctionnaire">Fonctionnaire</option>
                                                <option value="Étudiant">Étudiant</option>
                                                <option value="Autre">Autre</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <!-- Section: Baccalauréat -->
                                <div class="form-section">
                                    <h6 class="form-section-title"><i class="fas fa-graduation-cap"></i> Informations du
                                        Baccalauréat</h6>
                                    <div class="row g-3 mb-3">
                                        <div class="col-md-3">
                                            <label class="form-label">Code MASSAR/CNE<span
                                                        class="required">*</span></label>
                                            <input type="text" class="form-control" id="code_massar" name="code_massar"
                                                   placeholder="Ex: J143061074" required>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">Année du Bac<span
                                                        class="required">*</span></label>
                                            <select class="form-select" id="annee_bac" name="annee_bac" required>
                                                <option value="">Sélectionner...</option>
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">Spécialité du Bac<span
                                                        class="required">*</span></label>
                                            <select class="form-select" id="specialite_bac" name="specialite_bac" required>
                                                <option value="">Sélectionner...</option>
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">Mention du Bac<span
                                                        class="required">*</span></label>
                                            <select class="form-select" id="mention_bac" name="mention_bac" required>
                                                <option value="">Sélectionner...</option>
                                                <option value="Très Bien">Très Bien</option>
                                                <option value="Bien">Bien</option>
                                                <option value="Assez Bien">Assez Bien</option>
                                                <option value="Passable">Passable</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row g-3 mb-3">
                                        <div class="col-md-4">
                                            <label class="form-label">Type d'établissement du Bac<span class="required">*</span></label>
                                            <select class="form-select" id="type_etablissement_bac"
                                                    name="type_etablissement_bac" required>
                                                <option value="">Sélectionner...</option>
                                                <option value="Public">Public</option>
                                                <option value="Privé">Privé</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">Province du Bac<span
                                                        class="required">*</span></label>
                                            <select class="form-select" id="province_bac" name="province_bac" required>
                                                <option value="">Sélectionner...</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">Moyenne générale du Bac (0-20)<span
                                                        class="required">*</span></label>
                                            <input type="number" step="0.01" class="form-control" id="moyenne_bac"
                                                   name="moyenne_bac" placeholder="Ex: 15.50" min="0" max="20" required>
                                        </div>
                                    </div>
                                </div>

                                <!-- Section: Diplôme -->
                                <div class="form-section">
                                    <h6 class="form-section-title"><i class="fas fa-certificate"></i> Informations du
                                        Diplôme (BAC+2/3)</h6>
                                    <div class="row g-3 mb-3">
                                        <div class="col-md-4">
                                            <label class="form-label">Type du diplôme obtenu<span
                                                        class="required">*</span></label>
                                            <select class="form-select" id="type_diplome_obtenu" name="type_diplome_obtenu" required>
                                                <option value="">Sélectionner...</option>

                                                <optgroup label="Baccalauréat">
                                                    <option value="Baccalauréat Marocain">Baccalauréat Marocain</option>
                                                    <option value="Baccalauréat Étranger">Baccalauréat Étranger</option>
                                                </optgroup>

                                                <optgroup label="Formation Professionnelle (OFPPT / Privé...)">
                                                    <option value="Diplôme de Technicien Spécialisé (DTS)">Diplôme de Technicien Spécialisé (DTS)</option>
                                                    <option value="Diplôme de Technicien (DT)">Diplôme de Technicien (DT)</option>
                                                    <option value="Diplôme de Qualification Professionnelle">Diplôme de Qualification Professionnelle</option>
                                                </optgroup>

                                                <optgroup label="Diplômes Universitaires (Bac +2)">
                                                    <option value="Diplôme d'Études Universitaires Générales (DEUG)">Diplôme d'Études Universitaires Générales (DEUG)</option>
                                                    <option value="Diplôme d'Études Universitaires Professionnelles (DEUP)">Diplôme d'Études Universitaires Professionnelles (DEUP)</option>
                                                    <option value="Diplôme Universitaire de Technologie (DUT)">Diplôme Universitaire de Technologie (DUT)</option>
                                                    <option value="Brevet de Technicien Supérieur (BTS)">Brevet de Technicien Supérieur (BTS)</option>
                                                    <option value="Diplôme d'Études Universitaires Scientifiques et Techniques (DEUST)">Diplôme d'Études Universitaires Scientifiques et Techniques (DEUST)</option>
                                                </optgroup>

                                                <optgroup label="Cycle Licence (Bac +3)">
                                                    <option value="Licence Fondamentale">Licence Fondamentale</option>
                                                    <option value="Licence Professionnelle">Licence Professionnelle</option>
                                                    <option value="Licence en Éducation (CLE)">Licence en Éducation (CLE)</option>
                                                </optgroup>

                                                <optgroup label="Master, Ingénierie et Doctorat">
                                                    <option value="Master Fondamental">Master Fondamental</option>
                                                    <option value="Master Spécialisé">Master Spécialisé</option>
                                                    <option value="Diplôme d'Ingénieur d'État">Diplôme d'Ingénieur d'État</option>
                                                    <option value="Diplôme de l'ENCG / ISCAE">Diplôme de l'ENCG / ISCAE</option>
                                                    <option value="Doctorat">Doctorat</option>
                                                </optgroup>

                                                <optgroup label="Autre">
                                                    <option value="Autre Diplôme / Équivalence">Autre Diplôme / Équivalence</option>
                                                </optgroup>
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">Spécialité du diplôme<span
                                                        class="required">*</span></label>
                                            <select class="form-select" id="specialite_diplome" name="specialite_diplome" required>
                                                <option value="">Sélectionner...</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">Année d'obtention du diplôme<span
                                                        class="required">*</span></label>
                                            <select class="form-select" id="annee_diplome" name="annee_diplome" required>
                                                <option value="">Sélectionner...</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row g-3 mb-3">
                                        <div class="col-md-4">
                                            <label class="form-label">Établissement d'origine<span class="required">*</span></label>

                                            <select class="form-select" id="etablissement_origine" name="etablissement_origine" required>
                                                <option value="">Sélectionner...</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">Tous les modules validés ?<span
                                                        class="required">*</span></label>
                                            <select class="form-select" id="modules_valides" name="modules_valides"
                                                    required>
                                                <option value="">Sélectionner...</option>
                                                <option value="Oui">Oui</option>
                                                <option value="Non">Non</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">Durée du diplôme (années)<span
                                                        class="required">*</span></label>
                                            <input type="number" class="form-control" id="duree_diplome"
                                                   name="duree_diplome" value="2" readonly required>
                                        </div>
                                    </div>
                                </div>

                                <!-- Section: Notes -->
                                <div class="form-section">
                                    <h6 class="form-section-title"><i class="fas fa-list-ol"></i> Notes des Semestres
                                    </h6>
                                    <div class="row g-3">
                                        <div class="col-6 col-md-3">
                                            <div class="note-box">
                                                <div class="note-box-title">Semestre 1</div>
                                                <input type="number" step="1"
                                                       class="form-control text-center semester-note" id="note_s1"
                                                       name="note_s1" placeholder="0-20" min="0" max="20" required>
                                            </div>
                                        </div>
                                        <div class="col-6 col-md-3">
                                            <div class="note-box">
                                                <div class="note-box-title">Semestre 2</div>
                                                <input type="number" step="1"
                                                       class="form-control text-center semester-note" id="note_s2"
                                                       name="note_s2" placeholder="0-20" min="0" max="20" required>
                                            </div>
                                        </div>
                                        <div class="col-6 col-md-3">
                                            <div class="note-box">
                                                <div class="note-box-title">Semestre 3</div>
                                                <input type="number" step="1"
                                                       class="form-control text-center semester-note" id="note_s3"
                                                       name="note_s3" placeholder="0-20" min="0" max="20" required>
                                            </div>
                                        </div>
                                        <div class="col-6 col-md-3">
                                            <div class="note-box">
                                                <div class="note-box-title">Semestre 4</div>
                                                <input type="number" step="1"
                                                       class="form-control text-center semester-note" id="note_s4"
                                                       name="note_s4" placeholder="0-20" min="0" max="20" required>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Section Documents à Télécharger (تعديل كامل ليطابق الصورة) -->
                                <div class="form-section mb-3">
                                    <h6 class="form-section-title d-flex align-items-center gap-2">
                                        <i class="fas fa-file-upload"></i> Documents à Télécharger
                                    </h6>

                                    <div class="row g-3 mb-3">
                                        <!-- Photo d'identité -->
                                        <div class="col-md-3">
                                            <label class="form-label">Photo d'identité<span
                                                        class="required">*</span></label>
                                            <div class="file-upload-zone" id="zone-photo"
                                                 onclick="triggerFileInput('photo', event)">
                                                <div id="empty-photo">
                                                    <i class="fas fa-file-image text-primary"></i>
                                                    <p class="mt-2 mb-1 fw-medium">Télécharger dPhoto d'identité</p>
                                                    <p class="text-muted small">Format: JPG, PNG, PDF | Max: 5MB</p>
                                                </div>
                                                <div id="filled-photo" class="zone-filled-state d-none">
                                                    <i class="fas fa-file-alt"></i>
                                                    <span class="file-name" id="name-photo"></span>
                                                    <span class="file-size" id="size-photo"></span>
                                                </div>
                                                <input type="file" id="photo" name="photo" accept=".pdf,.jpg,.png"
                                                       class="d-none" onchange="handleFileChange('photo')" required>
                                            </div>
                                            <div class="upload-action-buttons d-none" id="actions-photo">
                                                <button type="button" class="btn-preview-file"
                                                        onclick="previewUploadedFile('photo')"><i
                                                            class="fas fa-eye"></i> Aperçu
                                                </button>
                                                <button type="button" class="btn-delete-file"
                                                        onclick="clearUploadedFile('photo')"><i
                                                            class="fas fa-trash-alt"></i> Supprimer
                                                </button>
                                            </div>
                                            <div class="error-message">Veuillez télécharger la Photo d'identité</div>
                                        </div>

                                        <!-- Diplôme -->
                                        <div class="col-md-3">
                                            <label class="form-label">Diplôme ou attestation de réussite<span
                                                        class="required">*</span></label>
                                            <div class="file-upload-zone" id="zone-diplome"
                                                 onclick="triggerFileInput('diplome', event)">
                                                <div id="empty-diplome">
                                                    <i class="fas fa-graduation-cap text-primary"></i>
                                                    <p class="mt-2 mb-1 fw-medium">Télécharger diplôme/attestation</p>
                                                    <p class="text-muted small">Format: JPG, PNG, PDF | Max: 5MB</p>
                                                </div>
                                                <div id="filled-diplome" class="zone-filled-state d-none">
                                                    <i class="fas fa-file-alt"></i>
                                                    <span class="file-name" id="name-diplome"></span>
                                                    <span class="file-size" id="size-diplome"></span>
                                                </div>
                                                <input type="file" id="diplome" name="diplome" accept=".pdf,.jpg,.png"
                                                       class="d-none" onchange="handleFileChange('diplome')" required>
                                            </div>
                                            <div class="upload-action-buttons d-none" id="actions-diplome">
                                                <button type="button" class="btn-preview-file"
                                                        onclick="previewUploadedFile('diplome')"><i
                                                            class="fas fa-eye"></i> Aperçu
                                                </button>
                                                <button type="button" class="btn-delete-file"
                                                        onclick="clearUploadedFile('diplome')"><i
                                                            class="fas fa-trash-alt"></i> Supprimer
                                                </button>
                                            </div>
                                            <div class="error-message">Veuillez télécharger le diplôme</div>
                                        </div>

                                        <!-- Relevés de notes -->
                                        <div class="col-md-3">
                                            <label class="form-label">Relevés de notes<span
                                                        class="required">*</span></label>
                                            <div class="file-upload-zone" id="zone-releves_notes"
                                                 onclick="triggerFileInput('releves_notes', event)">
                                                <div id="empty-releves_notes">
                                                    <i class="fas fa-file-invoice text-primary"></i>
                                                    <p class="mt-2 mb-1 fw-medium">Télécharger relevés de notes</p>
                                                    <p class="text-muted small">Format: JPG, PNG, PDF | Max: 5MB</p>
                                                </div>
                                                <div id="filled-releves_notes" class="zone-filled-state d-none">
                                                    <i class="fas fa-file-alt"></i>
                                                    <span class="file-name" id="name-releves_notes"></span>
                                                    <span class="file-size" id="size-releves_notes"></span>
                                                </div>
                                                <input type="file" id="releves_notes" name="releves_notes"
                                                       accept=".pdf,.jpg,.png" class="d-none"
                                                       onchange="handleFileChange('releves_notes')" required>
                                            </div>
                                            <div class="upload-action-buttons d-none" id="actions-releves_notes">
                                                <button type="button" class="btn-preview-file"
                                                        onclick="previewUploadedFile('releves_notes')"><i
                                                            class="fas fa-eye"></i> Aperçu
                                                </button>
                                                <button type="button" class="btn-delete-file"
                                                        onclick="clearUploadedFile('releves_notes')"><i
                                                            class="fas fa-trash-alt"></i> Supprimer
                                                </button>
                                            </div>
                                            <div class="error-message">Veuillez télécharger les relevés de notes</div>
                                        </div>

                                        <!-- Demande manuscrite -->
                                        <div class="col-md-3">
                                            <label class="form-label">Demande manuscrite<span class="required">*</span></label>
                                            <div class="file-upload-zone" id="zone-demande_maniscrite"
                                                 onclick="triggerFileInput('demande_maniscrite', event)">
                                                <div id="empty-demande_maniscrite">
                                                    <i class="fas fa-pen-nib text-primary"></i>
                                                    <p class="mt-2 mb-1 fw-medium">Télécharger demande manuscrite</p>
                                                    <p class="text-muted small">Format: JPG, PNG, PDF | Max: 5MB</p>
                                                </div>
                                                <div id="filled-demande_maniscrite" class="zone-filled-state d-none">
                                                    <i class="fas fa-file-alt"></i>
                                                    <span class="file-name" id="name-demande_maniscrite"></span>
                                                    <span class="file-size" id="size-demande_maniscrite"></span>
                                                </div>
                                                <input type="file" id="demande_maniscrite" name="demande_maniscrite"
                                                       accept=".pdf,.jpg,.png" class="d-none"
                                                       onchange="handleFileChange('demande_maniscrite')" required>
                                            </div>
                                            <div class="upload-action-buttons d-none" id="actions-demande_maniscrite">
                                                <button type="button" class="btn-preview-file"
                                                        onclick="previewUploadedFile('demande_maniscrite')"><i
                                                            class="fas fa-eye"></i> Aperçu
                                                </button>
                                                <button type="button" class="btn-delete-file"
                                                        onclick="clearUploadedFile('demande_maniscrite')"><i
                                                            class="fas fa-trash-alt"></i> Supprimer
                                                </button>
                                            </div>
                                            <div class="error-message">Veuillez télécharger la demande manuscrite</div>
                                        </div>
                                    </div>

                                    <div class="row g-3">
                                        <!-- CV -->
                                        <div class="col-md-4">
                                            <label class="form-label">Curriculum Vitae (CV)<span class="required">*</span></label>
                                            <div class="file-upload-zone" id="zone-cv" onclick="triggerFileInput('cv', event)">
                                                <div id="empty-cv">
                                                    <!-- AJOUTEZ L'ICÔNE ICI -->
                                                    <i class="fas fa-file-alt text-primary"></i>

                                                    <p class="mt-2 mb-1 fw-medium">Télécharger CV</p>
                                                    <p class="text-muted small">Format: PDF, DOC, DOCX | Max: 5MB</p>
                                                </div>
                                                <div id="filled-cv" class="zone-filled-state d-none">
                                                    <i class="fas fa-file-alt"></i>
                                                    <span class="file-name" id="name-cv"></span>
                                                    <span class="file-size" id="size-cv"></span>
                                                </div>
                                                <input type="file" id="cv" name="cv" accept=".pdf,.doc,.docx"
                                                       class="d-none" onchange="handleFileChange('cv')" required>
                                            </div>
                                            <div class="upload-action-buttons d-none" id="actions-cv">
                                                <button type="button" class="btn-preview-file"
                                                        onclick="previewUploadedFile('cv')"><i class="fas fa-eye"></i>
                                                    Aperçu
                                                </button>
                                                <button type="button" class="btn-delete-file"
                                                        onclick="clearUploadedFile('cv')"><i
                                                            class="fas fa-trash-alt"></i> Supprimer
                                                </button>
                                            </div>
                                            <div class="error-message">Veuillez télécharger le CV</div>
                                        </div>

                                        <!-- CIN Recto -->
                                        <div class="col-md-4">
                                            <label class="form-label">Carte nationale (Recto)<span
                                                        class="required">*</span></label>
                                            <div class="file-upload-zone" id="zone-cin_recto"
                                                 onclick="triggerFileInput('cin_recto', event)">
                                                <div id="empty-cin_recto">
                                                    <i class="fas fa-id-card text-primary"></i>
                                                    <p class="mt-2 mb-1 fw-medium">Télécharger CIN Recto</p>
                                                    <p class="text-muted small">Format: JPG, PNG | Max: 5MB</p>
                                                </div>
                                                <div id="filled-cin_recto" class="zone-filled-state d-none">
                                                    <i class="fas fa-file-alt"></i>
                                                    <span class="file-name" id="name-cin_recto"></span>
                                                    <span class="file-size" id="size-cin_recto"></span>
                                                </div>
                                                <input type="file" id="cin_recto" name="cin_recto" accept=".jpg,.png"
                                                       class="d-none" onchange="handleFileChange('cin_recto')" required>
                                            </div>
                                            <div class="upload-action-buttons d-none" id="actions-cin_recto">
                                                <button type="button" class="btn-preview-file"
                                                        onclick="previewUploadedFile('cin_recto')"><i
                                                            class="fas fa-eye"></i> Aperçu
                                                </button>
                                                <button type="button" class="btn-delete-file"
                                                        onclick="clearUploadedFile('cin_recto')"><i
                                                            class="fas fa-trash-alt"></i> Supprimer
                                                </button>
                                            </div>
                                            <div class="error-message">Veuillez télécharger le recto de la CIN</div>
                                        </div>

                                        <!-- CIN Verso -->
                                        <div class="col-md-4">
                                            <label class="form-label">Carte nationale (Verso)<span
                                                        class="required">*</span></label>
                                            <div class="file-upload-zone" id="zone-cin_verso"
                                                 onclick="triggerFileInput('cin_verso', event)">
                                                <div id="empty-cin_verso">
                                                    <i class="fas fa-id-card text-primary"></i>
                                                    <p class="mt-2 mb-1 fw-medium">Télécharger CIN Verso</p>
                                                    <p class="text-muted small">Format: JPG, PNG | Max: 5MB</p>
                                                </div>
                                                <div id="filled-cin_verso" class="zone-filled-state d-none">
                                                    <i class="fas fa-file-alt"></i>
                                                    <span class="file-name" id="name-cin_verso"></span>
                                                    <span class="file-size" id="size-cin_verso"></span>
                                                </div>
                                                <input type="file" id="cin_verso" name="cin_verso" accept=".jpg,.png"
                                                       class="d-none" onchange="handleFileChange('cin_verso')" required>
                                            </div>
                                            <div class="upload-action-buttons d-none" id="actions-cin_verso">
                                                <button type="button" class="btn-preview-file"
                                                        onclick="previewUploadedFile('cin_verso')"><i
                                                            class="fas fa-eye"></i> Aperçu
                                                </button>
                                                <button type="button" class="btn-delete-file"
                                                        onclick="clearUploadedFile('cin_verso')"><i
                                                            class="fas fa-trash-alt"></i> Supprimer
                                                </button>
                                            </div>
                                            <div class="error-message">Veuillez télécharger le verso de la CIN</div>
                                        </div>
                                    </div>
                                </div>


                                <!-- Button Group -->
                                <div class="d-flex justify-content-between align-items-center w-100 mt-4">
                                    <button type="button"
                                            class="btn btn-success d-flex align-items-center gap-2"
                                            onclick="validateStep1(true)">
                                        <i class="fas fa-save"></i> Enregistrer comme brouillon
                                    </button>

                                    <button type="button"
                                            class="btn btn-primary d-flex align-items-center gap-2"
                                            onclick="validateStep1(false)">
                                        Valider la demande <i class="fas fa-chevron-right"></i>
                                    </button>
                                </div>
                        </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>
    </div>
</main>

<?php include "../../../../layouts/candidat/footer.php"; ?>

<!-- Bootstrap JS Bundle -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script src="main.js"></script>

<script>

    function triggerFileInput(id, event) {
        if (!event.target.closest('.upload-action-buttons')) {
            document.getElementById(id).click();
        }
    }


    function handleFileChange(id) {
        const input = document.getElementById(id);
        const file = input.files[0];

        if (file) {
            const sizeInMB = (file.size / (1024 * 1024)).toFixed(2);


            document.getElementById(`name-${id}`).innerText = file.name;
            document.getElementById(`size-${id}`).innerText = `(${sizeInMB} MB)`;


            document.getElementById(`empty-${id}`).classList.add('d-none');
            document.getElementById(`filled-${id}`).classList.remove('d-none');


            document.getElementById(`actions-${id}`).classList.remove('d-none');
        }
    }


    function clearUploadedFile(id) {
        const input = document.getElementById(id);
        input.value = '';

        document.getElementById(`empty-${id}`).classList.remove('d-none');
        document.getElementById(`filled-${id}`).classList.add('d-none');
        document.getElementById(`actions-${id}`).classList.add('d-none');
    }


    function previewUploadedFile(id) {
        const input = document.getElementById(id);
        const file = input.files[0];

        if (file) {
            const fileURL = URL.createObjectURL(file);
            window.open(fileURL, '_blank');
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        try {
            const candidat = <?php echo json_encode($candidat_data); ?>;
            console.log("Données Candidat :", candidat);

            if (candidat) {
                const nom = candidat.nom || candidat.Nom || '';
                const prenom = candidat.prenom || candidat.Prenom || '';
                const email = candidat.email || candidat.Email || '';
                const cin = candidat.cin || candidat.Cin || candidat.CIN || '';

                if (document.getElementById('nom')) document.getElementById('nom').value = nom;
                if (document.getElementById('prenom')) document.getElementById('prenom').value = prenom;
                if (document.getElementById('email')) document.getElementById('email').value = email;
                if (document.getElementById('cin')) document.getElementById('cin').value = cin;

                window.CANDIDAT_ID = candidat.id || candidat.Id;
            }
        } catch (error) {
            console.error('Error loading candidat data from session:', error);
        }
    });
</script>
</body>
</html>