<div class="modal-overlay" id="concoursModal">

    <div class="modal modal-xl">

        <!-- ===================== -->
        <!-- MODAL HEADER -->
        <!-- ===================== -->

        <div class="modal-header">

            <h2 id="modalTitle">

                Nouveau Concours

            </h2>

            <button
                    class="modal-close"
                    onclick="closeModal()">

                &times;

            </button>

        </div>


        <div class="modal-body">

            <!-- ===================== -->
            <!-- TABS -->
            <!-- ===================== -->

            <div class="tabs">

                <!-- Informations -->

                <button
                        class="tab-btn active"
                        onclick="switchTab('info')"
                        data-tab="info">

                    <span class="tab-icon">📋</span> Informations

                </button>

                <!-- Membres -->

                <button
                        class="tab-btn"
                        onclick="switchTab('committee')"
                        data-tab="committee">

                    <span class="tab-icon">👥</span> Membres

                </button>

                <!-- Types de Diplômes -->

                <button
                        class="tab-btn"
                        onclick="switchTab('details')"
                        data-tab="details">

                    <span class="tab-icon">🎓</span> Types de Diplômes
                </button>

                <!-- Calendrier -->

                <button
                        class="tab-btn"
                        onclick="switchTab('calendrier')"
                        data-tab="calendrier">

                    <span class="tab-icon">📅</span> Calendrier

                </button>

            </div>
            <!-- ===================== -->
            <!-- TAB INFORMATIONS -->
            <!-- ===================== -->

            <div id="tab-info" class="tab-content active">

                <form id="concoursForm">

                    <input
                            type="hidden"
                            id="concoursId">

                    <!-- Ligne 1 -->

                    <div class="form-row">

                        <div class="form-group">

                            <label>
                                Code
                                <span class="required">*</span>
                            </label>

                            <input
                                    type="text"
                                    id="code"
                                    required>

                        </div>

                        <div class="form-group">

                            <label>
                                Libellé
                                <span class="required">*</span>
                            </label>

                            <input
                                    type="text"
                                    id="label"
                                    required>

                        </div>

                    </div>

                    <!-- Ligne 2 -->

                    <div class="form-row">

                        <div class="form-group">

                            <label>
                                Filière
                                <span class="required">*</span>
                            </label>

                            <select id="filliere">

                                <option value="">Sélectionner</option>

                                <option value="GI">GI</option>
                                <option value="GIND">GIND</option>
                                <option value="GE">GE</option>
                                <option value="GC">GC</option>

                            </select>

                        </div>

                        <div class="form-group">

                            <label>Etat</label>

                            <select id="etat_concours">

                                <option value="OUVERT">OUVERT</option>
                                <option value="EN_COURS">EN_COURS</option>
                                <option value="FERME">FERME</option>
                                <option value="TERMINE">TERMINE</option>

                            </select>

                        </div>

                    </div>

                    <!-- Ligne 3 -->
<div class="form-row">

    <div class="form-group">

        <label>Statut</label>

        <select id="active">
            <option value="1">Actif</option>
            <option value="0">Inactif</option>
        </select>

    </div>

    <div class="form-group">

        <label>Chef du comité d'organisation</label>

        <select id="chef_commite_organisation">
            <option value="">Sélectionner</option>
        </select>

    </div>

</div>

                    <!-- Description -->

                    <div class="form-group">

                        <label>Description</label>

                        <textarea
                                id="description"
                                rows="4"></textarea>

                    </div>

                </form>

            </div>
            <!-- ===================== -->
            <!-- TAB MEMBRES -->
            <!-- ===================== -->

            <div id="tab-committee" class="tab-content">

                <div class="form-group">

                    <label>

                        Membres du comité

                    </label>

                    <div class="members-container">

                        <!-- Liste des membres -->

                        <div
                                class="members-list"
                                id="membersList">

                            <p style="color:#999;">

                                Aucun membre sélectionné

                            </p>

                        </div>

                        <!-- Ajouter un membre -->

                        <div class="add-member">

                            <select id="memberSelect">

                                <option value="">

                                    Sélectionner un membre

                                </option>

                            </select>

                            <button
                                    type="button"
                                    class="btn btn-primary btn-sm"
                                    onclick="addMember()">

                                <i class="fas fa-plus"></i>

                                Ajouter

                            </button>

                        </div>

                    </div>

                </div>

            </div>
            <!-- ===================== -->
            <!-- TAB TYPES DE DIPLÔMES -->
            <!-- ===================== -->

            <div id="tab-details" class="tab-content">

                <div class="details-header">

                    <h3>

                        <i class="fas fa-graduation-cap"></i>

                        Types de diplômes

                    </h3>

                </div>

                <!-- Loading -->

                <div id="loadingTypes"
                     style="display:none;text-align:center;">

                    Chargement...

                </div>

                <!-- Liste -->

                <div class="details-container">

                    <div
                            class="details-list"
                            id="detailsList">

                        <p style="color:#999;">

                            Aucun type ajouté

                        </p>

                    </div>

                    <!-- Formulaire -->

                    <div class="add-detail">

                        <div class="form-row">

                            <div class="form-group">

                                <label>

                                    Type diplôme

                                </label>

                                <select id="detail_type_diplome">

                                    <option value="">

                                        Sélectionner

                                    </option>

                                </select>

                            </div>

                            <div class="form-group">

                                <label>

                                    Pourcentage

                                </label>

                                <input
                                        type="number"
                                        id="detail_pourcentage"
                                        min="0"
                                        max="100"
                                        placeholder="%">

                            </div>

                        </div>

                        <div class="form-group">

                            <label>

                                Description

                            </label>

                            <input
                                    type="text"
                                    id="detail_description"
                                    placeholder="Description">

                        </div>

                        <button
                                type="button"
                                class="btn btn-primary"
                                onclick="addDetail()">

                            <i class="fas fa-plus"></i>

                            Ajouter

                        </button>

                    </div>

                </div>

            </div>
            <!-- ===================== -->
            <!-- TAB CALENDRIER -->
            <!-- ===================== -->

            <div id="tab-calendrier" class="tab-content">

                <h3 class="section-title">

                    <i class="fas fa-calendar-alt"></i>

                    Calendrier du concours

                </h3>

                <!-- ===================== -->
                <!-- INSCRIPTIONS -->
                <!-- ===================== -->

                <div class="form-row">

                    <div class="form-group">

                        <label>Date lancement</label>

                        <input
                                type="datetime-local"
                                id="date_lancement">

                    </div>

                    <div class="form-group">

                        <label>Date fin inscription</label>

                        <input
                                type="datetime-local"
                                id="date_fin_inscription">

                    </div>

                </div>

                <!-- ===================== -->
                <!-- ÉPREUVE ÉCRITE -->
                <!-- ===================== -->

                <div class="form-row">

                    <div class="form-group">

                        <label>Date affichage liste des admis à l'écrit</label>

                        <input
                                type="datetime-local"
                                id="date_affichage_ecrit">

                    </div>

                    <div class="form-group">

                        <label>Date épreuve écrite</label>

                        <input
                                type="datetime-local"
                                id="date_ecrit">

                    </div>

                </div>

                <!-- ===================== -->
                <!-- ÉPREUVE ORALE -->
                <!-- ===================== -->

                <div class="form-row">

                    <div class="form-group">

                        <label>Date affichage liste des admis à l'oral</label>

                        <input
                                type="datetime-local"
                                id="date_affichage_orale">

                    </div>

                    <div class="form-group">

                        <label>Date épreuve orale</label>

                        <input
                                type="datetime-local"
                                id="date_orale">

                    </div>

                </div>

                <!-- ===================== -->
                <!-- RÉSULTAT -->
                <!-- ===================== -->

                <div class="form-row">

                    <div class="form-group">

                        <label>Date affichage résultats finaux</label>

                        <input
                                type="datetime-local"
                                id="date_affichage_resultat">

                    </div>

                    <div class="form-group">

                        <label>Date clôture du concours</label>

                        <input
                                type="datetime-local"
                                id="date_fin">

                    </div>

                </div>

            </div>
            <!-- ===================== -->
            <!-- MODAL FOOTER -->
            <!-- ===================== -->
        </div>

            <div class="modal-footer">

                <button
                        type="button"
                        class="btn btn-secondary"
                        onclick="closeModal()">

                    <i class="fas fa-times"></i>

                    Annuler

                </button>

                <button
                        type="button"
                        class="btn btn-primary"
                        onclick="saveConcours()">

                    <i class="fas fa-save"></i>

                    Enregistrer

                </button>

            </div>

        </div>

    </div>
