@extends('layouts.app')

@section('title', 'Geolocalización de Guardias - Ojo de Águila')
@section('header_title', 'Monitoreo de Guardias (GPS)')

@section('content')
<div class="dashboard-grid full-width-grid">
    <!-- Map Card -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">🗺️ Mapa de Patrullaje en Tiempo Real</h3>
            <span class="badge badge-info" style="font-size: 11px;">Actualización: cada 10 segs</span>
        </div>
        <div class="card-body" style="padding: 0; position: relative;">
            <div id="tracking-map" class="map-container" style="height: 480px;"></div>
        </div>
    </div>
</div>

<!-- Bottom Section: Historial de Ubicaciones -->
<div class="card">
    <div class="card-header">
        <h3 class="card-title">📝 Historial de ubicaciones de hoy</h3>
    </div>
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>Hora</th>
                    <th>Guardia</th>
                    <th>Latitud</th>
                    <th>Longitud</th>
                    <th>Precisión</th>
                </tr>
            </thead>
            <tbody>
                @forelse($locations as $loc)
                    <tr>
                        <td style="font-weight: 600;">
                            {{ $loc->recorded_at instanceof \Carbon\Carbon ? $loc->recorded_at->format('H:i:s A') : \Carbon\Carbon::parse($loc->recorded_at)->format('H:i:s A') }}
                        </td>
                        <td style="font-weight: 700; color: var(--text-primary);">
                            {{ $loc->guardUser->name }}
                        </td>
                        <td style="font-family: monospace;">{{ number_format($loc->latitude, 6) }}</td>
                        <td style="font-family: monospace;">{{ number_format($loc->longitude, 6) }}</td>
                        <td>
                            <span class="badge {{ $loc->accuracy <= 15 ? 'badge-success' : 'badge-warning' }}" style="font-size: 11px;">
                                ± {{ number_format($loc->accuracy, 1) }} metros
                            </span>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" style="text-align: center; color: var(--text-light); padding: 40px;">
                            No se registran ubicaciones hoy todavía.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Inicializar mapa de Leaflet
        // Coordenadas fijas en Santiago de Chile
        var map = L.map('tracking-map').setView([-33.4489, -70.6693], 17);

        // Capa de OpenStreetMap
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '© OpenStreetMap'
        }).addTo(map);

        var guardMarkers = {};

        function updateGuardPositions() {
            fetch('{{ url("/api/tracking/active-guards") }}')
                .then(res => res.json())
                .then(response => {
                    if (response.success) {
                        const activeGuards = response.data;

                        activeGuards.forEach(function(guard) {
                            const name = guard.name;
                            const lat = guard.lat;
                            const lng = guard.lng;
                            const time = guard.time;

                            const popupContent = `
                                <b>👮 Guardia: ${name}</b><br>
                                📞 Teléfono: ${guard.phone ?? 'N/A'}<br>
                                ⏱️ Último reporte: ${time}<br>
                                🎯 Precisión GPS: ±${guard.accuracy}m
                            `;

                            if (guardMarkers[name]) {
                                // Mover marcador existente con transición suave
                                guardMarkers[name].setLatLng([lat, lng]);
                                guardMarkers[name].setPopupContent(popupContent);
                            } else {
                                // Crear nuevo marcador
                                // Crear icono de escudo azul personalizado para el guardia
                                var guardIcon = L.divIcon({
                                    html: '<div style="background-color: var(--accent-color); border: 2px solid white; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.3);">👮</div>',
                                    className: 'custom-guard-icon',
                                    iconSize: [28, 28],
                                    iconAnchor: [14, 14]
                                });

                                guardMarkers[name] = L.marker([lat, lng], { icon: guardIcon })
                                    .addTo(map)
                                    .bindPopup(popupContent);
                            }
                        });
                    }
                })
                .catch(err => console.error('Error fetching GPS positions:', err));
        }

        // Consultar inmediatamente y luego cada 10 segundos
        updateGuardPositions();
        setInterval(updateGuardPositions, 10000);
    });
</script>
@endsection