From 909621e9be1c5913ea64f419f9edfdac29dc4e82 Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Mon, 24 Nov 2025 22:27:36 +0000
Subject: [PATCH] Auto commit: 2025-11-24T22:27:36.668Z

---
 api.php          |  17 +++++++
 localizacion.php | 117 +++++++++++++++++++++++++++--------------------
 2 files changed, 85 insertions(+), 49 deletions(-)
 create mode 100644 api.php

diff --git a/api.php b/api.php
new file mode 100644
index 0000000..1f627bb
--- /dev/null
+++ b/api.php
@@ -0,0 +1,17 @@
+<?php
+header('Content-Type: application/json');
+require_once 'db/config.php';
+
+try {
+    $pdo = db();
+    $stmt = $pdo->query("SELECT t.matricula, t.modelo, lt.latitud, lt.longitud, lt.ultima_actualizacion
+                           FROM localizacion_taxis lt
+                           JOIN taxis t ON lt.id_taxi = t.id
+                           ORDER BY lt.ultima_actualizacion DESC");
+    $localizaciones = $stmt->fetchAll(PDO::FETCH_ASSOC);
+    echo json_encode($localizaciones);
+} catch (PDOException $e) {
+    http_response_code(500);
+    echo json_encode(['error' => 'Error de base de datos: ' . $e->getMessage()]);
+}
+?>
\ No newline at end of file
diff --git a/localizacion.php b/localizacion.php
index 435909c..2c0df26 100644
--- a/localizacion.php
+++ b/localizacion.php
@@ -64,25 +64,30 @@ try {
     $taxis_stmt = $pdo->query("SELECT id, matricula, modelo FROM taxis ORDER BY matricula");
     $taxis = $taxis_stmt->fetchAll(PDO::FETCH_ASSOC);
 
-    // Fetch all locations
-    $stmt = $pdo->query("SELECT lt.id, t.matricula, t.modelo, lt.latitud, lt.longitud, lt.ultima_actualizacion 
-                           FROM localizacion_taxis lt
-                           JOIN taxis t ON lt.id_taxi = t.id
-                           ORDER BY lt.ultima_actualizacion DESC");
-    $localizaciones = $stmt->fetchAll(PDO::FETCH_ASSOC);
-
 } catch (PDOException $e) {
     die("Error de base de datos: " . $e->getMessage());
 }
 ?>
 
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
+
 <div class="container-fluid px-4">
-    <h1 class="mt-4">Localización de Taxis</h1>
+    <h1 class="mt-4">Localización de Taxis en Tiempo Real</h1>
     <ol class="breadcrumb mb-4">
         <li class="breadcrumb-item"><a href="index.php">Dashboard</a></li>
         <li class="breadcrumb-item active">Localización</li>
     </ol>
 
+    <div class="card mb-4">
+        <div class="card-header">
+            <i class="fas fa-map-marked-alt me-1"></i>
+            Mapa de Taxis
+        </div>
+        <div class="card-body">
+            <div id="map" style="height: 500px;"></div>
+        </div>
+    </div>
+
     <div class="row">
         <div class="col-xl-6">
             <div class="card mb-4">
@@ -150,48 +155,62 @@ try {
             </div>
         </div>
     </div>
-
-    <div class="card mb-4">
-        <div class="card-header">
-            <i class="fas fa-map-marker-alt me-1"></i>
-            Últimas Localizaciones Registradas
-        </div>
-        <div class="card-body">
-            <table id="datatablesSimple" class="table table-striped">
-                <thead>
-                    <tr>
-                        <th>ID</th>
-                        <th>Taxi</th>
-                        <th>Latitud</th>
-                        <th>Longitud</th>
-                        <th>Última Actualización</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <?php if (!empty($localizaciones)):
-                        foreach ($localizaciones as $localizacion):
-                    ?>
-                            <tr>
-                                <td><?php echo htmlspecialchars($localizacion['id']); ?></td>
-                                <td><?php echo htmlspecialchars($localizacion['matricula'] . ' (' . $localizacion['modelo'] . ')'); ?></td>
-                                <td><?php echo htmlspecialchars($localizacion['latitud']); ?></td>
-                                <td><?php echo htmlspecialchars($localizacion['longitud']); ?></td>
-                                <td><?php echo htmlspecialchars($localizacion['ultima_actualizacion']); ?></td>
-                            </tr>
-                    <?php 
-                        endforeach;
-                    else: 
-                    ?>
-                        <tr>
-                            <td colspan="5" class="text-center">No hay localizaciones registradas.</td>
-                        </tr>
-                    <?php endif; ?>
-                </tbody>
-            </table>
-        </div>
-    </div>
 </div>
 
+<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        // Coordenadas iniciales para centrar el mapa (ej. Madrid)
+        const initialCoords = [40.416775, -3.703790];
+        const map = L.map('map').setView(initialCoords, 12);
+
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            maxZoom: 19,
+            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        }).addTo(map);
+
+        let markers = {};
+
+        function updateMap() {
+            fetch('api.php')
+                .then(response => response.json())
+                .then(data => {
+                    // Limpiar marcadores que ya no existen
+                    Object.keys(markers).forEach(matricula => {
+                        if (!data.find(taxi => taxi.matricula === matricula)) {
+                            map.removeLayer(markers[matricula]);
+                            delete markers[matricula];
+                        }
+                    });
+
+                    data.forEach(taxi => {
+                        const lat = parseFloat(taxi.latitud);
+                        const lon = parseFloat(taxi.longitud);
+                        const matricula = taxi.matricula;
+
+                        if (!isNaN(lat) && !isNaN(lon)) {
+                            const popupContent = `<b>Taxi:</b> ${matricula}<br><b>Modelo:</b> ${taxi.modelo || 'N/A'}<br><b>Última vez:</b> ${taxi.ultima_actualizacion}`;
+
+                            if (markers[matricula]) {
+                                markers[matricula].setLatLng([lat, lon]).setPopupContent(popupContent);
+                            } else {
+                                markers[matricula] = L.marker([lat, lon]).addTo(map)
+                                    .bindPopup(popupContent);
+                            }
+                        }
+                    });
+                })
+                .catch(error => console.error('Error al cargar las localizaciones:', error));
+        }
+
+        // Actualizar el mapa cada 5 segundos
+        setInterval(updateMap, 5000);
+
+        // Carga inicial
+        updateMap();
+    });
+</script>
+
 <?php
 require_once 'footer.php';
-?>
+?>
\ No newline at end of file