<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gestion des Concours - EST</title>
    <link rel="stylesheet" href="../../../css/admin-styles.css">
</head>
<body>
<div class="container">
    <!-- Header -->
    <div class="header">
        <h1>🏆 Gestion des Concours</h1>
        <p>Gérez les concours et leurs comités d'organisation</p>
    </div>


    <!-- Search Section -->
    <div class="search-section">
        <form id="searchForm" class="search-form">
            <div class="form-group">
                <label for="searchCode">Code</label>
                <input type="text" id="searchCode" placeholder="Rechercher par code...">
            </div>
            <div class="form-group">
                <label for="searchLabel">Libellé</label>
                <input type="text" id="searchLabel" placeholder="Rechercher par libellé...">
            </div>
            <div class="form-group">
                <label for="searchFilliere">Filière</label>
                <input type="text" id="searchFilliere" placeholder="Rechercher par filière...">
            </div>
            <div class="form-group">
                <label for="searchEtat">État</label>
                <select id="searchEtat">
                    <option value="">Tous</option>
                    <option value="OUVERT">Ouvert</option>
                    <option value="FERME">Fermé</option>
                    <option value="EN_COURS">En cours</option>
                    <option value="TERMINE">Terminé</option>
                </select>
            </div>
            <div class="form-group">
                <label for="searchActive">Statut</label>
                <select id="searchActive">
                    <option value="">Tous</option>
                    <option value="1">Actif</option>
                    <option value="0">Inactif</option>
                </select>
            </div>
            <div class="search-actions">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-search"></i> Rechercher
                </button>
                <button type="reset" class="btn btn-secondary" onclick="resetSearch()">
                    <i class="fas fa-undo"></i> Réinitialiser
                </button>
                <button type="button" class="btn btn-success" onclick="openCreateModal()">
                    <i class="fas fa-plus"></i> Nouveau Concours
                </button>
            </div>
        </form>
    </div>

    <!-- Table -->
    <div class="table-container">
        <div class="table-wrapper">
            <table>
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Code</th>
                    <th>Libellé</th>
                    <th>Filière</th>
                    <th>Date Lancement</th>
                    <th>Date Fin</th>
                    <th>État</th>
                    <th>Statut</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody id="tableBody">
                <tr>
                    <td colspan="9" style="text-align: center; padding: 40px;">
                        <div class="loading active">
                            <div class="spinner"></div>
                            <p style="margin-top: 10px;">Chargement des données...</p>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="pagination">
            <div class="pagination-info" id="paginationInfo">Affichage de 0 à 0 sur 0</div>
            <div class="pagination-buttons" id="paginationButtons">
                <button onclick="changePage('prev')" id="prevBtn">◀ Précédent</button>
                <span id="pageNumbers"></span>
                <button onclick="changePage('next')" id="nextBtn">Suivant ▶</button>
            </div>
        </div>
    </div>


</div>

<!-- Modal for Create/Update -->
<div class="modal-overlay" id="concoursModal">
    <div class="modal modal-xl">
        <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">
                <button class="tab-btn active" onclick="switchTab('info')" data-tab="info">
                    <i class="fas fa-info-circle"></i> Informations
                </button>
                <button class="tab-btn" onclick="switchTab('committee')" data-tab="committee">
                    <i class="fas fa-users"></i> Comité
                </button>
                <button class="tab-btn" onclick="switchTab('details')" data-tab="details">
                    <i class="fas fa-list"></i> Types de Diplômes
                </button>
            </div>

            <!-- Tab 1: Informations -->
            <div id="tab-info" class="tab-content active">
                <form id="concoursForm">
                    <input type="hidden" id="concoursId">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="code">Code <span class="required">*</span></label>
                            <input type="text" id="code" required placeholder="Ex: CONC2026GI">
                        </div>
                        <div class="form-group">
                            <label for="label">Libellé <span class="required">*</span></label>
                            <input type="text" id="label" required placeholder="Ex: Concours Génie Informatique 2026">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="filliere">Filière <span class="required">*</span></label>
                            <select id="filliere" required>
                                <option value="">Sélectionner une filière</option>
                                <option value="GI">Génie Informatique</option>
                                <option value="GIND">Génie Industriel</option>
                                <option value="GE">Génie Électrique</option>
                                <option value="GC">Génie Civil</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="etat_concours">État <span class="required">*</span></label>
                            <select id="etat_concours" required>
                                <option value="OUVERT">Ouvert</option>
                                <option value="FERME">Fermé</option>
                                <option value="EN_COURS">En cours</option>
                                <option value="TERMINE">Terminé</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="date_lancement">Date de Lancement <span class="required">*</span></label>
                            <input type="datetime-local" id="date_lancement" required>
                        </div>
                        <div class="form-group">
                            <label for="date_fin">Date de Fin <span class="required">*</span></label>
                            <input type="datetime-local" id="date_fin" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="active">Statut</label>
                        <select id="active">
                            <option value="1">Actif</option>
                            <option value="0">Inactif</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="description">Description</label>
                        <textarea id="description" rows="4" placeholder="Description détaillée du concours..."></textarea>
                    </div>
                </form>
            </div>

            <!-- Tab 2: Committee -->
            <div id="tab-committee" class="tab-content">
                <form id="committeeForm">
                    <input type="hidden" id="committeeId">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="committee_code">Code du Comité <span class="required">*</span></label>
                            <input type="text" id="committee_code" required placeholder="Ex: COM001">
                        </div>
                        <div class="form-group">
                            <label for="committee_label">Libellé du Comité <span class="required">*</span></label>
                            <input type="text" id="committee_label" required placeholder="Ex: Comité Génie Informatique">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="committee_description">Description du Comité</label>
                        <textarea id="committee_description" rows="2" placeholder="Description du comité..."></textarea>
                    </div>
                    <div class="form-group">
                        <label for="committee_chef">Chef du Comité</label>
                        <select id="committee_chef">
                            <option value="">Sélectionner un chef</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Membres du Comité</label>
                        <div class="members-container">
                            <div class="members-list" id="membersList">
                                <p style="color: #999; font-size: 14px;">Aucun membre sélectionné</p>
                            </div>
                            <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>
                </form>
            </div>

            <!-- Tab 3: Concours Details (Type Diplôme) -->
            <div id="tab-details" class="tab-content">
                <div class="details-header">
                    <h3><i class="fas fa-graduation-cap"></i> Types de Diplômes</h3>
                    <p>Définissez les pourcentages pour chaque type de diplôme (le total doit être 100%)</p>
                </div>

                <!-- Indicateur de chargement -->
                <div id="loadingTypes" style="display: none; text-align: center; padding: 10px;">
                    <div class="spinner" style="width: 30px; height: 30px;"></div>
                    <p style="margin-top: 5px; font-size: 14px; color: #999;">Chargement des types de diplômes...</p>
                </div>

                <div class="details-container">
                    <!-- Liste des détails -->
                    <div class="details-list" id="detailsList">
                        <p style="color: #999; font-size: 14px;">Aucun type de diplôme sélectionné</p>
                    </div>

                    <!-- Ajouter un détail -->
                    <div class="add-detail">
                        <div class="form-row">
                            <div class="form-group">
                                <label for="detail_type_diplome">Type de Diplôme <span class="required">*</span></label>
                                <select id="detail_type_diplome" required>
                                    <option value="">Sélectionner un type</option>
                                    <!-- Les options seront chargées dynamiquement depuis la BD -->
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="detail_pourcentage">Pourcentage (%) <span class="required">*</span></label>
                                <input type="number" id="detail_pourcentage" step="0.01" min="0" max="100" placeholder="Ex: 30" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="detail_description">Description</label>
                            <input type="text" id="detail_description" placeholder="Description optionnelle">
                        </div>
                        <button type="button" class="btn btn-primary" onclick="addDetail()">
                            <i class="fas fa-plus"></i> Ajouter
                        </button>
                    </div>
                </div>
            </div>

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" onclick="closeModal()">Annuler</button>
            <button type="button" class="btn btn-primary" onclick="saveConcours()">
                <i class="fas fa-save"></i> Enregistrer
            </button>
        </div>
    </div>
</div>

<!-- Detail Modal -->
<div class="modal-overlay" id="detailModal">
    <div class="modal modal-xl">
        <div class="modal-header">
            <h2><i class="fas fa-trophy"></i> Détails du Concours</h2>
            <button class="modal-close" onclick="closeDetailModal()">&times;</button>
        </div>
        <div class="modal-body" id="detailContent">
            <div class="loading active">
                <div class="spinner"></div>
                <p style="margin-top: 10px;">Chargement des détails...</p>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" onclick="closeDetailModal()">Fermer</button>
        </div>
    </div>
</div>


<!-- Toast Container -->
<div class="toast-container" id="toastContainer"></div>

<script src="main.js"></script>
</body>
</html>
