<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes">
    <meta name="theme-color" content="#99412a">
    <title>RichterMap</title>
    <link rel="icon" type="icon/svg" href="logo.png">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
</head>
<body>

<div class="controlbox" id="controlbox">
    <div class="controls">
        <div class="top">
            <div class="header">
                <div><h2><img src="logo.png" alt="">RichterMap</h2></div>
                <div class="headerrightbutton" id="headerrightbutton"><button type="button" onclick="viewMap()">Map <span>-></span></button></div>
            </div>
            <div class="earthquakelist" id="earthquakelist">

            </div>
        </div>

        <div class="bottom">
            <!--
            <div class="formmode">
                <div class="modebox">
                    <button type="button" id="btnmodeperiod" onclick="changeMode('period')"><img src="move-horizontal.svg" alt="">Period</button>
                    <button type="button" id="btnmodelocation" onclick="changeMode('location')"><img src="map-pinned.svg" alt="">Location</button>
                </div>
            </div>-->

            <div class="form" id="formlocation" style="margin-bottom: 0;">
                <div class="form2">
                    <label for="locatecoord">Location</label>
                </div>
                <div class="form1">
                    <input type="text" placeholder="34.003342, -118.485832" id="locatecoord">
                    <button type="button" title="My position" onclick="getMyPosition()"><img src="locate.svg" alt=""></button>
                </div>
                <div class="form2">
                    <label for="locateradius">Radius</label>
                </div>
                <div class="form1">
                    <select name="" id="locateradius">
                        <option value="5" selected>5km</option>
                        <option value="10">10km</option>
                        <option value="50">50km</option>
                        <option value="100">100km</option>
                        <option value="500">500km</option>
                    </select>
                </div>
            </div>
            <div class="form" id="formperiod">
                <div class="form2">
                    <label for="startDate">Start</label>
                    <label for="endDate">End</label>    
                </div>
            
                <div class="form2">
                    <input type="date" id="startDate" onchange="validateDates()">
                    <input type="date" id="endDate" onchange="validateDates()">        
                </div>
                
                <div class="form2">
                    <label for="minMag">Min Magnitude</label>
                    <label for="maxMag">Max Magnitude</label>
                </div>
                
                <div class="form2">
                    <input type="number" id="minMag" placeholder="0" step="0.1" min="0" max="10">
                    <input type="number" id="maxMag" placeholder="10" step="0.1" min="0" max="10">
                </div>
            </div>           
            <div class="formsearch">
                <button onclick="loadEarthquakes()"><img src="search.svg" alt="">Search</button>
            </div> 
        </div>
    </div>
</div>

<div class="mapbox">
    <div id="map">
        <div class="loadingbox" id="loadingbox">
            <div class="loader"></div>
        </div>
        <div class="coordinates" id="coordinates"></div>
        <div class="parambox" id="parambox">
            <button type="button" onclick="displayControl()"><img src="sliders-horizontal.svg" alt=""></button>
        </div>
        <div class="kofibox" id="kofibox">
            <div class="kofiboxbutton">
                <button type="button" onclick="closeDonate()"><img src="x.svg" alt=""></button>
            </div>
            <iframe id='kofiframe' src='https://ko-fi.com/torrextension/?hidefeed=true&widget=true&embed=true&preview=true' style='border:none;width:100%;padding:4px;background:#f9f9f9;' height='712' title='torrextension'></iframe>
        </div>
        <div class="kofi">
            <button type="button" onclick="openDonate()" title="Support Me"><img src="kofi_symbol.png" alt="kofi logo"></button>
        </div>
    </div>
    <div class="legend" id="legend" title="Magnitude scale">
        <div><span style="background:#A11252;">9</span></div>
        <div><span style="background:#EA1C29;">8</span></div>
        <div><span style="background:#F0452B;">7</span></div>
        <div><span style="background:#F46F2C;">6</span></div>
        <div><span style="background:#F7941F;">5</span></div>
        <div><span style="background:#FFC20F;">4</span></div>
        <div><span style="background:#C0D731;">3</span></div>
        <div><span style="background:#79AB4A;">2</span></div>
        <div><span style="background:#79AB4A;">1</span></div>
    </div>
</div>

<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>

    var searchmode;
    let locationCircle;


    // Initialisation de la carte
    const map = L.map('map', {
        zoomControl: false // Désactive les contrôles par défaut
    }).setView([0, 0], 2);

    // Définir les deux couches de cartes
    const cartoDBLayerLight = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
        maxZoom: 19,
        attribution: '© OpenStreetMap contributors, © CartoDB, @ USGS'
    });

    const cartoDBLayerDark = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
        maxZoom: 19,
        attribution: '© OpenStreetMap contributors, © CartoDB, @ USGS'
    });

    const openTopoMapLayer = L.tileLayer('https://tile.opentopomap.org/{z}/{x}/{y}.png', {
        maxZoom: 15,
        attribution: '© OpenStreetMap contributors, © OpenTopoMap, @ USGS'
    });

    // Ajouter une couche initiale (par défaut)
    cartoDBLayerLight.addTo(map);

    // Contrôle de bascule entre les couches
    const baseMaps = {
        "Light": cartoDBLayerLight,
        "Dark": cartoDBLayerDark,
        "Relief": openTopoMapLayer
    };

    L.control.layers(baseMaps).addTo(map);

    // Ajout des contrôles de zoom à droite
    L.control.zoom({
        position: 'topright' // Positionne les boutons de zoom en haut à droite
    }).addTo(map);

    // Validation des dates pour limiter à 1 an maximum
    function validateDates() {
        const startDateInput = document.getElementById('startDate');
        const endDateInput = document.getElementById('endDate');

        const startDate = new Date(startDateInput.value);
        const endDate = new Date(endDateInput.value);


        if (startDate && (endDate != "Invalid Date")) {
            const diffTime = Math.abs(endDate - startDate);
            const diffDays = diffTime / (1000 * 60 * 60 * 24);
        }
        else if(startDate != "Invalid Date" && (endDate == "Invalid Date")){
            const date = new Date(startDate);
            date.setDate(date.getDate() + 1);

            // Formate la date en "YYYY-MM-DD"
            const formattedDate = date.toISOString().split('T')[0];

            endDateInput.value = formattedDate;
        }
    }


    // Fonction pour déterminer la couleur en fonction de la magnitude
    function getColor(magnitude) {
        return magnitude >= 9 ? '#A11252' :
            magnitude >= 8.9 ? '#A11252' :
            magnitude >= 7.9 ? '#EA1C29' :
            magnitude >= 6.9 ? '#F0452B' :
            magnitude >= 5.9 ? '#F46F2C' :
            magnitude >= 4.9 ? '#F7941F' :
            magnitude >= 3.9 ? '#FFC20F' :
            magnitude >= 2.9 ? '#C0D731' :
            magnitude >= 1.9 ? '#79AB4A' :
            '#79AB4A';
    }

    // Fonction pour charger les séismes
    async function loadEarthquakes() {
        if (document.getElementById("locatecoord").value == "") {
            const startDate = document.getElementById('startDate').value;
            const endDate = document.getElementById('endDate').value;
            const minMag = parseFloat(document.getElementById('minMag').value) || 0; // Valeur par défaut : 0
            const maxMag = parseFloat(document.getElementById('maxMag').value) || 10; // Valeur par défaut : 10

            if (!startDate || !endDate) {
                alert('Please select start date and end date.');
                return;
            }

            const url = `https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=${startDate}&endtime=${endDate}`;

            try {
                document.getElementById("loadingbox").style.display = "flex";
                if (isMobile()) {
                    document.getElementById("controlbox").style.display = "none";
                }

                const response = await fetch(url);
                const data = await response.json();

                // Supprimer les anciennes couches
                map.eachLayer((layer) => {
                    if (layer instanceof L.Circle || layer instanceof L.CircleMarker) {
                        map.removeLayer(layer);
                    }
                });

                const earthquakeList = document.getElementById('earthquakelist');
                earthquakeList.innerHTML = ""; // Réinitialiser la liste des séismes

                // Trier les séismes par magnitude décroissante
                const sortedFeatures = data.features
                    .filter((earthquake) => {
                        const magnitude = earthquake.properties.mag;
                        return magnitude >= minMag && magnitude <= maxMag;
                    })
                    .sort((a, b) => b.properties.mag - a.properties.mag); // Tri par magnitude décroissante

                // Ajouter les séismes triés à la carte et à la liste
                sortedFeatures.forEach((earthquake) => {
                    const coords = earthquake.geometry.coordinates;
                    const magnitude = earthquake.properties.mag;
                    const place = earthquake.properties.place;
                    const time = new Date(earthquake.properties.time).toLocaleString(); // Date et heure

                    // Fonction pour afficher un séisme avec un cercle
                    const circleMarker = L.circleMarker([coords[1], coords[0]], {
                        radius: 4, // Taille en pixels, visible à tous les niveaux de zoom
                        color: getColor(magnitude), // Couleur de la bordure
                        fillOpacity: 0.3 // Transparence
                    }).bindPopup(
                        `<strong>Location :</strong> ${place}<br>` +
                        `<strong>Magnitude :</strong> ${magnitude}<br>` +
                        `<strong>Depth :</strong> ${coords[2].toFixed(0)} km<br>` +
                        `<strong>Date :</strong> ${time}`,
                        {
                            className: 'custom-popup' // Ajoute une classe personnalisée
                        }
                    ).addTo(map);

                    // Ajouter un élément à la liste des séismes
                    const listItem = document.createElement('div');
                    listItem.innerHTML = `
                        <h2>${place}</h2>
                        <h3>Date: ${time}</h3>
                        <h3>Magnitude: ${magnitude}</h3>
                    `;
                    listItem.classList.add("earthquakeitem");
                    earthquakeList.appendChild(listItem);
                });

                document.getElementById("loadingbox").style.display = "none";

            } catch (error) {
                console.error('Erreur lors du chargement des données :', error);
                alert("Error: The selected period has more than 20,000 earthquakes.");
                document.getElementById("loadingbox").style.display = "none";
            }
        }
        else {
            const usercoords = document.getElementById("locatecoord").value.split(",", 2);
            const userlatitude = usercoords[0].trim();
            const userlongitude = usercoords[1].trim();
            const userradius = document.getElementById("locateradius").value || 50; // Rayon par défaut : 50 km
            const minMag = document.getElementById("minMag").value || 0; // Valeur par défaut : 0
            const maxMag = document.getElementById("maxMag").value || 10; // Valeur par défaut : 10
            const startDate = document.getElementById('startDate').value;
            const endDate = document.getElementById('endDate').value;

            if (isNaN(userlatitude) || isNaN(userlongitude)) {
                alert('Please enter valid latitude and longitude.');
                return;
            }

            if (!startDate || !endDate) {
                alert('Please select start date and end date.');
                return;
            }

            const url = `https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&latitude=${userlatitude}&longitude=${userlongitude}&maxradiuskm=${userradius}&starttime=${startDate}&endtime=${endDate}`;

            try {
                document.getElementById("loadingbox").style.display = "flex";

                if (isMobile()) {
                    document.getElementById("controlbox").style.display = "none";
                }

                const response = await fetch(url);
                const data = await response.json();

                // Supprimer les anciennes couches
                map.eachLayer((layer) => {
                    if (layer instanceof L.Circle || layer instanceof L.CircleMarker) {
                        map.removeLayer(layer);
                    }
                });

                console.log(data);

                const earthquakeList = document.getElementById('earthquakelist');
                earthquakeList.innerHTML = ""; // Réinitialiser la liste des séismes

                // Trier les séismes par magnitude décroissante
                const sortedFeatures = data.features
                    .filter((earthquake) => {
                        const magnitude = earthquake.properties.mag;
                        return magnitude >= minMag && magnitude <= maxMag;
                    })
                    .sort((a, b) => b.properties.mag - a.properties.mag); // Tri par magnitude décroissante

                // Ajouter les séismes triés à la carte et à la liste
                sortedFeatures.forEach((earthquake) => {
                    const coords = earthquake.geometry.coordinates;
                    const magnitude = earthquake.properties.mag;
                    const place = earthquake.properties.place;
                    const time = new Date(earthquake.properties.time).toLocaleString();

                    // Fonction pour afficher un séisme avec un cercle
                    const circleMarker = L.circleMarker([coords[1], coords[0]], {
                        radius: 4, // Taille en pixels, visible à tous les niveaux de zoom
                        color: getColor(magnitude), // Couleur de la bordure
                        fillOpacity: 0.3 // Transparence
                    }).bindPopup(
                        `<strong>Location :</strong> ${place}<br>` +
                        `<strong>Magnitude :</strong> ${magnitude}<br>` +
                        `<strong>Depth :</strong> ${coords[2].toFixed(0)} km<br>` +
                        `<strong>Date :</strong> ${time}`,
                        {
                            className: 'custom-popup' // Ajoute une classe personnalisée
                        }
                    ).addTo(map);

                    // Ajouter un élément à la liste des séismes
                    const listItem = document.createElement('div');
                    listItem.innerHTML = `
                        <h2>${place}</h2>
                        <h3>Date: ${time}</h3>
                        <h3>Magnitude: ${magnitude}</h3>
                    `;
                    listItem.classList.add("earthquakeitem");
                    earthquakeList.appendChild(listItem);
                });

                document.getElementById("loadingbox").style.display = "none";

            } catch (error) {
                console.error('Erreur lors du chargement des données :', error);
                alert("Error: Unable to retrieve earthquake data for the specified location.");
                document.getElementById("loadingbox").style.display = "none";
            }
        }
    }


   /* function changeMode(mode){
        if(mode == "period"){
            //searchmode = "period";

            document.getElementById("btnmodeperiod").style.backgroundColor = "rgb(108 108 108)";
            document.getElementById("btnmodeperiod").style.filter = "opacity(1)";

            document.getElementById("btnmodelocation").style.backgroundColor = "#313131";
            document.getElementById("btnmodelocation").style.filter = "opacity(0.5)";


        }
        else{
            //searchmode = "location";

            document.getElementById("btnmodelocation").style.backgroundColor = "rgb(108 108 108)";
            document.getElementById("btnmodelocation").style.filter = "opacity(1)";

            document.getElementById("btnmodeperiod").style.backgroundColor = "#313131";
            document.getElementById("btnmodeperiod").style.filter = "opacity(0.5)";

        }
    }
    changeMode('period');*/

    // Cibler le conteneur des coordonnées
    const coordinatesDiv = document.getElementById('coordinates');

    // Écouter les mouvements de la souris sur la carte
    map.on('mousemove', (e) => {
        const lat = e.latlng.lat.toFixed(4); // Latitude avec 4 décimales
        const lng = e.latlng.lng.toFixed(4); // Longitude avec 4 décimales

        // Mettre à jour le conteneur avec les coordonnées
        coordinatesDiv.textContent = `${lat}, ${lng}`;
    });

    // Écouter l'événement 'click' sur la carte
    map.on('click', (e) => {
        const lat = e.latlng.lat.toFixed(4); // Latitude
        const lng = e.latlng.lng.toFixed(4); // Longitude

        // Met à jour l'input avec les coordonnées
        document.getElementById("locatecoord").value = `${lat},${lng}`;

        const radius = parseInt(document.getElementById("locateradius").value, 10) || 50; // Rayon par défaut : 50 km

        // Supprimer le cercle précédent
        if (locationCircle) {
            map.removeLayer(locationCircle);
        }

        // Ajouter un nouveau cercle à l'emplacement cliqué
        locationCircle = L.circle([lat, lng], {
            radius: radius * 1000, // Convertir le rayon en mètres
            color: 'gray', // Bordure grise
            fillColor: '#cccccc', // Fond gris clair
            fillOpacity: 0.3
        }).addTo(map);
    });


    document.getElementById("locateradius").addEventListener("change", () => {
        const radius = parseInt(document.getElementById("locateradius").value, 10) || 50; // Rayon par défaut : 50 km

        if (locationCircle) {
            locationCircle.setRadius(radius * 1000); // Met à jour le rayon du cercle
        }
    });


    function getMyPosition(){
        // Vérifiez si la géolocalisation est prise en charge par le navigateur
        if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    (position) => {
                        const latitude = position.coords.latitude.toFixed(6);
                        const longitude = position.coords.longitude.toFixed(6);

                        // Affichez les coordonnées
                        document.getElementById("locatecoord").value = latitude + "," + longitude;

                        const radius = parseInt(document.getElementById("locateradius").value, 10) || 50; // Rayon par défaut : 50 km

                        // Supprimer le cercle précédent
                        if (locationCircle) {
                            map.removeLayer(locationCircle);
                        }

                        // Ajouter un nouveau cercle à l'emplacement cliqué
                        locationCircle = L.circle([latitude, longitude], {
                            radius: radius * 1000, // Convertir le rayon en mètres
                            color: 'gray', // Bordure grise
                            fillColor: '#cccccc', // Fond gris clair
                            fillOpacity: 0.3
                        }).addTo(map);
                    },
                    (error) => {
                        // Gestion des erreurs
                        switch (error.code) {
                            case error.PERMISSION_DENIED:
                                console("User denied the request for Geolocation.");
                                break;
                            case error.POSITION_UNAVAILABLE:
                                alert("Location information is unavailable.");
                                break;
                            case error.TIMEOUT:
                                alert("The request to get user location timed out.");
                                break;
                            default:
                                alert("An unknown error occurred.");
                                break;
                        }
                    }
                );
            } else {
                alert("Geolocation is not supported by your browser.");
            }
    }

    function isMobile() {
        return /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    }

    function displayControl(){
        document.getElementById("controlbox").style.display = "block";
    }

    if (isMobile()) {
        document.getElementById("parambox").style.display = "block";
    }



    function viewMap(){
        document.getElementById("controlbox").style.display = "none";
    }

    function openDonate(){
        document.getElementById("kofibox").style.display = "flex";
    }

    function closeDonate(){
        document.getElementById("kofibox").style.display = "none";
    }


</script>



</body>
</html>
