<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gestion des Documents du Dossier Administratif - EST</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/espace-prof-config/nav-second-level.php" ?>

<main class="main-content">
    <div class="container">

        <!-- Stats Cards -->
        <div class="stats-grid" id="statsGrid">
            <div class="stat-card">
                <div class="stat-icon">📄</div>
                <div class="stat-info">
                    <span class="stat-label">Total Documents</span>
                    <span class="stat-value" id="statTotalDocuments">0</span>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">📂</div>
                <div class="stat-info">
                    <span class="stat-label">Types de Documents</span>
                    <span class="stat-value" id="statTotalTypes">0</span>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">📊</div>
                <div class="stat-info">
                    <span class="stat-label">États</span>
                    <span class="stat-value" id="statTotalEtats">0</span>
                </div>
            </div>
        </div>

        <!-- Search Section -->
        <div class="search-section">
            <form id="searchDocumentForm" class="search-form">
                <div class="form-row">
                    <div class="form-group">
                        <label for="searchDocId">ID</label>
                        <input type="text" id="searchDocId" placeholder="Rechercher par ID...">
                    </div>
                    <div class="form-group">
                        <label for="searchDocLibelle">Libellé</label>
                        <input type="text" id="searchDocLibelle" placeholder="Rechercher par libellé...">
                    </div>
                    <div class="form-group">
                        <label for="searchDocCode">Code</label>
                        <input type="text" id="searchDocCode" placeholder="Rechercher par code...">
                    </div>
                    <div class="form-group">
                        <label for="searchDocProfesseur">Professeur</label>
                        <input type="text" id="searchDocProfesseur" placeholder="Rechercher par professeur...">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="searchDocType">Type de Document</label>
                        <select id="searchDocType">
                            <option value="">Tous les types</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="searchDocEtat">État</label>
                        <select id="searchDocEtat">
                            <option value="">Tous les états</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="searchDocDateDossier">Date Dossier</label>
                        <input type="date" id="searchDocDateDossier">
                    </div>
                    <div class="form-group">
                        <label for="searchDocDescription">Description</label>
                        <input type="text" id="searchDocDescription" placeholder="Rechercher par description...">
                    </div>
                </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="resetDocumentSearch()">
                        <i class="fas fa-undo"></i> Réinitialiser
                    </button>
                    <button type="button" class="btn btn-success" onclick="openCreateDocumentModal()">
                        <i class="fas fa-plus"></i> Nouveau Document
                    </button>
                    <button type="button" class="btn btn-info" onclick="exportDocuments()">
                        <i class="fas fa-file-export"></i> Exporter
                    </button>
                </div>
            </form>
        </div>

        <!-- Table -->
        <div class="table-container">
            <div class="table-wrapper">
                <table>
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>Libellé</th>
                        <th>Code</th>
                        <th>Type</th>
                        <th>État</th>
                        <th>Professeur</th>
                        <th>Date Dossier</th>
                        <th>Créé le</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody id="documentTableBody">
                    <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="documentPaginationInfo">Affichage de 0 à 0 sur 0</div>
                <div class="pagination-buttons" id="documentPaginationButtons">
                    <button onclick="changeDocumentPage('prev')" id="docPrevBtn">◀ Précédent</button>
                    <span id="documentPageNumbers"></span>
                    <button onclick="changeDocumentPage('next')" id="docNextBtn">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" ?>

<!-- Toast Container -->
<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>