<?php
// Configurar el idioma español
setlocale(LC_TIME, 'es_ES.UTF-8'); 
// Traducir meses
$meses = [
    "January" => "Enero", "February" => "Febrero", "March" => "Marzo",
    "April" => "Abril", "May" => "Mayo", "June" => "Junio",
    "July" => "Julio", "August" => "Agosto", "September" => "Septiembre",
    "October" => "Octubre", "November" => "Noviembre", "December" => "Diciembre"
];

$destinos_dir = "destinos/";
$destinos = array_diff(scandir($destinos_dir), array('.', '..'));

// Invertir... Los ultimos serán los primeros
$destinos = array_reverse($destinos);
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Blog Personal de Viajes</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="css/index.css" /> 

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

    <!-- Script de Leaflet --> <!--  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> -->
    <!-- Funciona sin problema en local -->
    <script src="js/leaflet.js"></script>

</head>

<body class="container mt-5">
    <h1 class="text-center">🌍 Blog Personal de Viajes</h1>
    <p class="text-center">Recordando nuestras aventuras por el mundo</p>


    <!-- Contenedor del mapa -->
    <div id="mapa" style="width: 85%; height: 500px;"></div>

    <script src="js/mapa.js"></script>

    <br>

    <div class="row">
    <?php foreach ($destinos as $carpeta): ?>
        <?php
        $json_path = $destinos_dir . $carpeta . "/" . $carpeta . ".json";
        $json_path = $destinos_dir . $carpeta . "/" . "destino.json";
        if (!file_exists($json_path)) continue;
        $json = file_get_contents($json_path);
        $destino = json_decode($json, true);
        ?>
        <div class="col-md-4 mb-4 text-center">
            <div class="polaroid">
                <img src="<?= $destinos_dir . $carpeta . "/" . $destino['Foto_Principal']; ?>" alt="Foto de <?= $destino['Destino']; ?>">
                <p style="font-family: 'Caveat', cursive; font-size: 32px;"><?= $destino['Destino']; ?></p>
                
                <?php
                    $fecha = date("d F Y", strtotime($destino['Fecha_Visita']));
                    foreach ($meses as $ingles => $espanol) {
                        $fecha = str_replace($ingles, $espanol, $fecha);
                    }                
                    echo "<p class='text-muted'>📅 Visitado el $fecha</p>";
                ?>

            </div>
            <a href="detalle.php?destino=<?= $carpeta; ?>" class="btn btn-primary mt-2">Ver más</a>

        </div>
    <?php endforeach; ?>
</div>
    
    <footer class="text-center mt-5">
        <p>&copy; 2025 Blog Personal de Viajes | Creado por Luis GuLo 🚀</p>
    </footer>
</body>
</html>
