<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Déviations des lignes L1, L5, 18, 14, CITL et NVL pour le 3 avril 2025</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        h1 {
            color: #333;
        }
        .perturbation {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
        }
        .perturbation h2 {
            margin: 0;
            font-size: 1.2em;
            color: #d9534f;
        }
        .perturbation p {
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <h1>Déviations des lignes L1, L5, 18, 14, CITL et NVL pour le 3 avril 2025</h1>
    <div id="perturbations">
        Chargement des données en cours...
    </div>

    <script>
        const apiUrl = 'https://data.lillemetropole.fr/data/ogcapi/collections/ilevia:perturbations/items?f=geojson&limit=-1';
        const lignesCibles = ['L1', 'L5', '18', '14', 'CITL', 'NVL'];
        const dateCible = new Date('2025-04-03');

        fetch(apiUrl)
            .then(response => response.json())
            .then(data => {
                const perturbations = data.features.filter(feature => {
                    const ligne = feature.properties.cible.split('::')[2];
                    const heureFinPrevue = new Date(feature.properties.heure_fin_prevue);
                    return lignesCibles.includes(ligne) && heureFinPrevue >= dateCible;
                });

                const container = document.getElementById('perturbations');
                container.innerHTML = '';

                if (perturbations.length > 0) {
                    perturbations.forEach(perturbation => {
                        const div = document.createElement('div');
                        div.className = 'perturbation';
                        div.innerHTML = `
                            <h2>Ligne ${perturbation.properties.cible.split('::')[2]}</h2>
                            <p><strong>Type de perturbation :</strong> ${perturbation.properties.type_perturbation}</p>
                            <p><strong>Message :</strong> ${perturbation.properties.message}</p>
                            <p><strong>Heure de fin prévue :</strong> ${new Date(perturbation.properties.heure_fin_prevue).toLocaleString('fr-FR')}</p>
                        `;
                        container.appendChild(div);
                    });
                } else {
                    container.innerHTML = '<p>Aucune déviation prévue pour les lignes spécifiées le 3 avril 2025.</p>';
                }
            })
            .catch(error => {
                console.error('Erreur lors de la récupération des données :', error);
                document.getElementById('perturbations').innerHTML = '<p>Erreur lors de la récupération des données.</p>';
            });
    </script>
</body>
</html>