<?php
// Inclure le fichier de connexion à la base de données
include 'connexion.php';

// Requête pour sélectionner toutes les villes et leurs coordonnées
$query = "SELECT DISTINCT ville, latitude, longitude FROM bddgmed WHERE latitude IS NOT NULL AND longitude IS NOT NULL";
$result = $conn->query($query);

$villes = [];

if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $villes[] = [
            'ville' => $row['ville'],
            'latitude' => $row['latitude'],
            'longitude' => $row['longitude']
        ];
    }
}

// Requête pour sélectionner les valeurs uniques pour les menus déroulants
$types = [];
$departements = [];
$hopitaux = [];
$genres = [];

$query = "SELECT DISTINCT Type FROM bddgmed";
$result = $conn->query($query);
while ($row = $result->fetch_assoc()) {
    $types[] = $row['Type'];
}

$query = "SELECT DISTINCT Departement FROM bddgmed ORDER BY CAST(Departement AS UNSIGNED)";
$result = $conn->query($query);
while ($row = $result->fetch_assoc()) {
    $departements[] = $row['Departement'];
}

$query = "SELECT DISTINCT nom_de_l_hopital FROM bddgmed ORDER BY nom_de_l_hopital";
$result = $conn->query($query);
while ($row = $result->fetch_assoc()) {
    $hopitaux[] = $row['nom_de_l_hopital'];
}

$query = "SELECT DISTINCT Genre FROM bddgmed";
$result = $conn->query($query);
while ($row = $result->fetch_assoc()) {
    $genres[] = $row['Genre'];
}

// Requête pour sélectionner toutes les villes disponibles
$all_villes = [];
$query = "SELECT DISTINCT ville FROM bddgmed WHERE latitude IS NOT NULL AND longitude IS NOT NULL ORDER BY ville";
$result = $conn->query($query);
while ($row = $result->fetch_assoc()) {
    $all_villes[] = $row['ville'];
}

// Fermer la connexion à la base de données
$conn->close();
?>

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-fullscreen/dist/leaflet.fullscreen.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-gesture-handling/dist/leaflet-gesture-handling.min.css" />
    <link rel="stylesheet" href="carte.css" />
    <link rel="stylesheet" href="carteresponsive.css" />
    <link rel="stylesheet" href="custom-leaflet.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
    <script src="https://unpkg.com/leaflet-fullscreen/dist/Leaflet.fullscreen.min.js"></script>
    <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
    <script src="https://unpkg.com/leaflet-gesture-handling/dist/leaflet-gesture-handling.min.js"></script>
</head>
<body>
    <div id="container">
        <div id="map"></div>
        <div id="sidebar" class="hidden">
            <div class="results">
                <h2>Archives hospitalières</h2>

                <div class="moteurfiltre">
                    <div class="search-container">
                        <div class="search-wrapper">
                            <input type="text" id="search" placeholder="Rechercher...">
                            <div class="search-icon">
                                <i class="fas fa-search"></i>
                            </div>
                        </div>

                        <!-- Ajouter l'icône Font Awesome pour ouvrir/fermer le panneau des filtres -->
                        <div id="toggle-filters-btn" class="toggle-filters-btn">
                            <span id="toggle-filters-text">Afficher les filtres</span>
                            <i class="fa-solid fa-chevron-up"></i>
                        </div>

                        <div class="zonefiltre">
                            <div class="filtres">
                                <select id="type-filter">
                                    <option value="">Type</option>
                                    <?php foreach ($types as $type) { ?>
                                        <option value="<?php echo $type; ?>"><?php echo $type; ?></option>
                                    <?php } ?>
                                </select>
                                <select id="departement-filter">
                                    <option value="">Département</option>
                                    <?php foreach ($departements as $departement) { ?>
                                        <option value="<?php echo $departement; ?>"><?php echo $departement; ?></option>
                                    <?php } ?>
                                </select>
                                <select id="ville-filter">
                                    <option value="">Ville</option>
                                </select>
                                <select id="hopital-filter">
                                    <option value="">Hôpital</option>
                                    <?php foreach ($hopitaux as $hopital) { ?>
                                        <option value="<?php echo $hopital; ?>"><?php echo $hopital; ?></option>
                                    <?php } ?>
                                </select>
                                <select id="genre-filter">
                                    <option value="">Genre</option>
                                    <?php foreach ($genres as $genre) { ?>
                                        <option value="<?php echo $genre; ?>"><?php echo $genre; ?></option>
                                    <?php } ?>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="sidebar-content"></div>
            </div>
        </div>
    </div>

    <script>
        // Initialiser la carte avec la gestion des gestes tactiles
        var map = L.map('map', {
            fullscreenControl: true,
            fullscreenControlOptions: {
                position: 'topleft'
            },
            gestureHandling: true
        }).setView([46.603354, 1.888334], 6); // Coordonnées centrées sur la France

        // Ajouter une couche de tuiles OpenStreetMap
        L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">Stia | OpenStreetMap</a> contributors'
        }).addTo(map);

        // Définir une icône Font Awesome
        var fontAwesomeIcon = L.divIcon({
            className: 'fa-icon',
            html: '<i class="fas fa-map-marker-alt" style="color: #C52A6D; font-size: 35px;"></i>',
            iconSize: [24, 24],
            iconAnchor: [12, 24]
        });

        // Initialiser le groupe de clusters avec une couleur personnalisée
        var markers = L.markerClusterGroup({
            iconCreateFunction: function(cluster) {
                var childCount = cluster.getChildCount();

                var c = ' marker-cluster-';
                if (childCount < 10) {
                    c += 'small';
                } else if (childCount < 100) {
                    c += 'medium';
                } else {
                    c += 'large';
                }

                return new L.DivIcon({
                    html: '<div><span>' + childCount + '</span></div>',
                    className: 'marker-cluster' + c,
                    iconSize: new L.Point(40, 40)
                });
            }
        });

        // Ajouter des marqueurs pour chaque ville avec l'icône Font Awesome
        <?php foreach ($villes as $ville) { ?>
            var marker = L.marker([<?php echo $ville['latitude']; ?>, <?php echo $ville['longitude']; ?>], {
                icon: fontAwesomeIcon
            })
            .bindPopup('<a href="#" onclick="showRegistres(\'<?php echo $ville['ville']; ?>\')"><?php echo $ville['ville']; ?></a>');
            markers.addLayer(marker);
        <?php } ?>

        // Ajouter le groupe de clusters à la carte
        map.addLayer(markers);

        // Ajouter le contrôle de géocodage
        L.Control.geocoder({
            defaultMarkGeocode: false
        })
        .on('markgeocode', function(e) {
            var bbox = e.geocode.bbox;
            var poly = L.polygon([
                bbox.getSouthEast(),
                bbox.getNorthEast(),
                bbox.getNorthWest(),
                bbox.getSouthWest()
            ]).addTo(map);
            map.fitBounds(poly.getBounds());
        })
        .addTo(map);

        // Fonction pour afficher les registres disponibles pour une ville
        function showRegistres(ville) {
            // Requête AJAX pour obtenir les registres disponibles pour la ville
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'get_registres.php?ville=' + encodeURIComponent(ville), true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById('sidebar-content').innerHTML = xhr.responseText;
                    document.getElementById('sidebar').classList.remove('hidden');
                    document.getElementById('sidebar').classList.add('results-with-margin'); // Ajouter la classe pour la marge
                }
            };
            xhr.send();
        }

        // Fonction pour gérer la recherche
        function performSearch() {
            var query = document.getElementById('search').value;
            var type = document.getElementById('type-filter').value;
            var departement = document.getElementById('departement-filter').value;
            var ville = document.getElementById('ville-filter').value;
            var hopital = document.getElementById('hopital-filter').value;
            var genre = document.getElementById('genre-filter').value;

            if (query.length > 0 || type || departement || ville || hopital || genre) {
                var xhr = new XMLHttpRequest();
                xhr.open('GET', 'search.php?query=' + encodeURIComponent(query) +
                                '&type=' + encodeURIComponent(type) +
                                '&departement=' + encodeURIComponent(departement) +
                                '&ville=' + encodeURIComponent(ville) +
                                '&hopital=' + encodeURIComponent(hopital) +
                                '&genre=' + encodeURIComponent(genre), true);
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        document.getElementById('sidebar-content').innerHTML = xhr.responseText;
                        document.getElementById('sidebar').classList.remove('hidden');
                        document.getElementById('sidebar').classList.add('results-with-margin'); // Ajouter la classe pour la marge
                    }
                };
                xhr.send();
            } else {
                document.getElementById('sidebar-content').innerHTML = '';
                document.getElementById('sidebar').classList.add('hidden');
                document.getElementById('sidebar').classList.remove('results-with-margin'); // Retirer la classe pour la marge
            }
        }

        // Fonction pour mettre à jour les options des filtres "Ville" et "Nom de l'hôpital"
        function updateFilters(departement) {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'get_villes_hopitaux.php?departement=' + encodeURIComponent(departement), true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var response = JSON.parse(xhr.responseText);
                    var villeFilter = document.getElementById('ville-filter');
                    var hopitalFilter = document.getElementById('hopital-filter');

                    // Vider les options actuelles
                    villeFilter.innerHTML = '<option value="">Ville</option>';
                    hopitalFilter.innerHTML = '<option value="">Nom de l\'hôpital</option>';

                    // Ajouter les nouvelles options pour les villes
                    response.villes.forEach(function(ville) {
                        var option = document.createElement('option');
                        option.value = ville;
                        option.text = ville;
                        villeFilter.add(option);
                    });

                    // Ajouter les nouvelles options pour les hôpitaux
                    response.hopitaux.forEach(function(hopital) {
                        var option = document.createElement('option');
                        option.value = hopital;
                        option.text = hopital;
                        hopitalFilter.add(option);
                    });
                }
            };
            xhr.send();
        }

        // Fonction pour mettre à jour les options du filtre "Nom de l'hôpital" en fonction de la ville sélectionnée
        function updateHopitauxByVille(ville) {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'get_hopitaux_par_ville.php?ville=' + encodeURIComponent(ville), true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var response = JSON.parse(xhr.responseText);
                    var hopitalFilter = document.getElementById('hopital-filter');

                    // Vider les options actuelles
                    hopitalFilter.innerHTML = '<option value="">Nom de l\'hôpital</option>';

                    // Ajouter les nouvelles options
                    response.forEach(function(hopital) {
                        var option = document.createElement('option');
                        option.value = hopital;
                        option.text = hopital;
                        hopitalFilter.add(option);
                    });
                }
            };
            xhr.send();
        }

        // Fonction pour ajouter ou retirer la classe de sélection aux filtres
        function toggleSelectedClass(element) {
            if (element.value !== "") {
                element.classList.add('filtre-selected');
            } else {
                element.classList.remove('filtre-selected');
            }
        }

        // Ajouter des écouteurs d'événements change aux éléments de sélection
        document.getElementById('type-filter').addEventListener('change', function() {
            toggleSelectedClass(this);
            performSearch();
        });
        document.getElementById('departement-filter').addEventListener('change', function() {
            toggleSelectedClass(this);
            var departement = this.value;
            updateFilters(departement);
            performSearch();
        });
        document.getElementById('ville-filter').addEventListener('change', function() {
            toggleSelectedClass(this);
            var ville = this.value;
            updateHopitauxByVille(ville);
            performSearch();
        });
        document.getElementById('hopital-filter').addEventListener('change', function() {
            toggleSelectedClass(this);
            performSearch();
        });
        document.getElementById('genre-filter').addEventListener('change', function() {
            toggleSelectedClass(this);
            performSearch();
        });

        // Ajouter un écouteur d'événement input à l'élément de recherche
        document.getElementById('search').addEventListener('input', performSearch);

        // Initialiser le menu déroulant des villes avec toutes les villes disponibles
        var allVilles = <?php echo json_encode($all_villes); ?>;
        var villeFilter = document.getElementById('ville-filter');
        allVilles.forEach(function(ville) {
            var option = document.createElement('option');
            option.value = ville;
            option.text = ville;
            villeFilter.add(option);
        });

        // Ajouter le gestionnaire d'événements pour l'icône de basculement des filtres
        document.addEventListener('DOMContentLoaded', function() {
            const toggleFiltersBtn = document.getElementById('toggle-filters-btn');
            const filtersPanel = document.querySelector('.zonefiltre');
            const toggleFiltersText = document.getElementById('toggle-filters-text');
            const toggleFiltersIcon = toggleFiltersBtn.querySelector('i');

            // Vérifier la taille de l'écran et définir l'état initial des filtres
            if (window.matchMedia("(max-width: 1024px)").matches) {
                filtersPanel.classList.add('hidden');
            } else {
                filtersPanel.classList.remove('hidden');
            }

            toggleFiltersBtn.addEventListener('click', function() {
                if (filtersPanel.classList.contains('hidden')) {
                    filtersPanel.classList.remove('hidden');
                    toggleFiltersText.textContent = 'Masquer les filtres';
                    toggleFiltersIcon.classList.remove('fa-chevron-up');
                    toggleFiltersIcon.classList.add('fa-chevron-down');
                } else {
                    filtersPanel.classList.add('hidden');
                    toggleFiltersText.textContent = 'Afficher les filtres';
                    toggleFiltersIcon.classList.remove('fa-chevron-down');
                    toggleFiltersIcon.classList.add('fa-chevron-up');
                }
            });

            // Ajouter un écouteur d'événement pour détecter les changements de taille de l'écran
            window.addEventListener('resize', function() {
                if (window.matchMedia("(max-width: 1024px)").matches) {
                    filtersPanel.classList.add('hidden');
                } else {
                    filtersPanel.classList.remove('hidden');
                }
            });
        });
    </script>
</body>
</html>
