<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File d'attente - Affichage</title>
    <link rel="stylesheet" href="file-ecran.css">
    <script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js"></script>
    <link rel="stylesheet" href="file-display.html">
</head>
<body>
    <div id="queue-container">
        <table id="demande-table">
            <thead>
                <tr>
                    <th>Place</th>
                    <th>Nom de l'élève</th>
                    <th>Professeur</th>
                    <th>Heure</th>
                </tr>
            </thead>
            <tbody id="demande-list">
                <!-- Les demandes seront ajoutées ici dynamiquement -->
            </tbody>
        </table>
    </div>

    <script type="module">
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js";
        import { getFirestore, collection, onSnapshot } from "https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js";
    
        // Configuration Firebase
        const firebaseConfig = {
            apiKey: "AIzaSyBaFwA2kJM8CvlzBBkeCkq1CdlYclcxNZ0",
            authDomain: "sti2d-file-attente.firebaseapp.com",
            projectId: "sti2d-file-attente",
            storageBucket: "sti2d-file-attente.firebasestorage.app",
            messagingSenderId: "861290828360",
            appId: "1:861290828360:web:749ffe7565bd95db273e7d"
        };
    
        // Initialisation Firebase
        const app = initializeApp(firebaseConfig);
        const db = getFirestore(app);
    
        // Référence à la collection des demandes
        const demandesRef = collection(db, "demandes");
    
        // Sélectionner l'élément du tableau
        const tableau = document.getElementById("demande-list");
    
        // Fonction pour afficher les demandes dans le tableau
        onSnapshot(demandesRef, (snapshot) => {
            tableau.innerHTML = ""; // Réinitialise le tableau
            let index = 1; // Utilisé pour afficher un ordre séquentiel
    
            // Log pour vérifier que la snapshot arrive bien
            console.log("Snapshot reçu:", snapshot.docs.length, "demandes");
    
            snapshot.forEach((doc) => {
                const data = doc.data();
    
                // Log les données récupérées
                console.log("Données du document:", data);
    
                // Vérification si les données sont présentes
                const nom = data.nom || "Nom inconnu";
                const prof = data.professeur || "Professeur inconnu";
    
                // Formatage du timestamp
                let heure = "Heure inconnue";
                if (data.timestamp) {
                    const timestamp = data.timestamp.seconds * 1000; // Convertir en millisecondes
                    const dateObj = new Date(timestamp);
                    const hours = dateObj.getHours().toString().padStart(2, '0');
                    const minutes = dateObj.getMinutes().toString().padStart(2, '0');
                    heure = `${hours}:${minutes}`;
                }
    
                // Crée une ligne dans le tableau
                const row = document.createElement("tr");
    
                row.innerHTML = `
                    <td>${index++}</td> <!-- Affiche l'ordre -->
                    <td>${nom}</td>
                    <td>${prof}</td>
                    <td>${heure}</td>
                `;
    
                // Ajoute la ligne au tableau
                tableau.appendChild(row);
            });
        });
    </script>
    
</body>
</html>
