<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gestion des Types de Diplômes</title>

    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

    <link rel="stylesheet" href="../../../../../css/admin-styles.css">
</head>
<body>
<?php include "../../../../../layouts/admin/header.php" ?>

<?php include "../../../../../layouts/admin/concours/nav-second-level.php" ?>

<main class="main-content">

    <div class="container">

        <!-- Stats -->

        <div class="stats-grid">

            <div class="stat-card">

                <div class="stat-icon">🎓</div>

                <div class="stat-info">

                    <span class="stat-label">
                        Total Types de Diplômes
                    </span>

                    <span class="stat-value"
                          id="statTotal">
                        0
                    </span>

                </div>

            </div>

            <div class="stat-card">

                <div class="stat-icon">📊</div>

                <div class="stat-info">

                    <span class="stat-label">
                        Types par Année
                    </span>

                    <span class="stat-value"
                          id="statByYear">
                        -
                    </span>

                </div>

            </div>

        </div>


        <!-- Recherche -->

        <div class="search-section">

            <form id="searchForm"
                  class="search-form">

                <div class="form-group">

                    <label>ID</label>

                    <input
                            type="text"
                            id="searchId"
                            placeholder="ID">

                </div>


                <div class="form-group">

                    <label>Libellé</label>

                    <input
                            type="text"
                            id="searchLibelle"
                            placeholder="Libellé">

                </div>


                <div class="form-group">

                    <label>Code</label>

                    <input
                            type="text"
                            id="searchCode"
                            placeholder="Code">

                </div>


                <div class="form-group">

                    <label>Années après Bac</label>

                    <input
                            type="number"
                            id="searchAnneeApresBac"
                            placeholder="Ex: 5"
                            min="0">

                </div>


                <div class="search-actions">

                    <button
                            class="btn btn-primary"
                            type="submit">

                        <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

                    </button>


                    <button
                            type="button"
                            class="btn btn-info"
                            onclick="exportData()">

                        <i class="fas fa-file-export"></i>

                        Exporter

                    </button>

                </div>

            </form>

        </div>


        <!-- Tableau -->

        <div class="table-container">

            <div class="table-wrapper">

                <table>

                    <thead>

                    <tr>

                        <th>ID</th>

                        <th>Libellé</th>

                        <th>Code</th>

                        <th>Années après Bac</th>

                        <th>Actions</th>

                    </tr>

                    </thead>

                    <tbody id="tableBody">

                    <tr>

                        <td colspan="5"
                            style="text-align:center;padding:40px;">

                            <div class="loading active">

                                <div class="spinner"></div>

                                <p>

                                    Chargement...

                                </p>

                            </div>

                        </td>

                    </tr>

                    </tbody>

                </table>

            </div>


            <div class="pagination">

                <div id="paginationInfo">

                    Affichage de 0 à 0 sur 0

                </div>

                <div id="paginationButtons">

                    <button
                            id="prevBtn"
                            onclick="changePage('prev')">

                        ◀ Précédent

                    </button>

                    <span id="pageNumbers"></span>

                    <button
                            id="nextBtn"
                            onclick="changePage('next')">

                        Suivant ▶

                    </button>

                </div>

            </div>

        </div>

    </div>

</main>


<?php include "../../../../../layouts/admin/footer.php" ?>

<!-- Modals -->
<?php include "../create-edit/modal.php" ?>
<?php include "../view/modal.php" ?>


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


<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>

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

</body>
</html>
