<?php
include("config/config.php");

// Consulta para obtener la cantidad de resúmenes por país
$query = "SELECT pais, COUNT(*) AS cantidad_resumenes FROM ttrabajo GROUP BY pais";
$result = $conexion->query($query);
$resumenes_por_pais = [];

while ($row = $result->fetch_assoc()) {
    $resumenes_por_pais[$row['pais']] = $row['cantidad_resumenes'];
}

$conexion->close();
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mapa de Resúmenes por País</title>

    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />

    <!-- Estilo para el mapa -->
    <style>
        #map {
            height: 500px;
            width: 100%;
        }
    </style>
</head>
<body>

<div class="card mb-4">
    <!-- Card header -->
    <div class="card-header">
        <h4 class="card-title">Mapa de Resúmenes por País</h4>
    </div>

    <!-- Card body -->
    <div class="card-body">
        <div id="map"></div>
    </div>
</div>

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

<!-- GeoJSON de países -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geojson/1.0.0/leaflet-geojson.min.js"></script>

<script>
    // Datos de resúmenes por país
    var resumenesPorPais = <?php echo json_encode($resumenes_por_pais); ?>;

    // Crear el mapa
    var map = L.map('map').setView([20, 0], 2);  // Vista inicial (latitud, longitud) y nivel de zoom

    // Agregar capa de mapa base (OpenStreetMap)
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    // Cargar el archivo GeoJSON para las fronteras de los países
    fetch('https://raw.githubusercontent.com/PublicaMundi/MappingAPI/master/data/geojson/countries.geojson')
        .then(response => response.json())
        .then(geojson => {
            L.geoJSON(geojson, {
                style: function(feature) {
                    var pais = feature.properties.name;  // Nombre del país
                    var cantidad = resumenesPorPais[pais] || 0;  // Cantidad de resúmenes por país

                    // Asignar colores específicos según la cantidad de resúmenes
                    return {
                        fillColor: getColor(cantidad),  // Color según la cantidad de resúmenes
                        weight: 1,
                        opacity: 1,
                        color: 'white',
                        fillOpacity: 0.7
                    };
                },
                onEachFeature: function(feature, layer) {
                    var pais = feature.properties.name;
                    var cantidad = resumenesPorPais[pais] || 0;

                    layer.bindPopup('<b>' + pais + '</b><br>Resúmenes: ' + cantidad);
                }
            }).addTo(map);
        });

    // Función para determinar el color específico de acuerdo a la cantidad de resúmenes
    function getColor(cantidad) {
        // Asignación de colores según el número de resúmenes
        if (cantidad > 100) return '#800026'; // Rojo intenso
        if (cantidad > 50) return '#BD0026'; // Rojo
        if (cantidad > 20) return '#E31A1C'; // Rojo medio
        if (cantidad > 10) return '#FC4E2A'; // Naranja
        if (cantidad > 5) return '#FD8D3C'; // Naranja claro
        if (cantidad > 0) return '#FEB24C'; // Amarillo
        return '#FFEDA0'; // Amarillo pálido para países sin resúmenes
    }
</script>

</body>
</html>
