{% extends "admin_base.html" %}

{% block title %}Peta Lokasi{% endblock %}
{% block page_title %}PETA LOKASI{% endblock %}

{% block head_extra %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<style>
    /* Styling for the central map container */
    #live-map { 
        height: 600px; 
        border-radius: 2rem; 
        border: 2px solid #1f4068; 
        box-shadow: 0 25px 50px -12px rgba(6, 182, 212, 0.25);
        z-index: 10;
    }
    
    /* Custom popup styles */
    .leaflet-popup-content-wrapper {
        background: #0a192f;
        color: white;
        border: 1px solid #1f4068;
        border-radius: 1rem;
    }
    .leaflet-popup-tip {
        background: #0a192f;
        border-top: 1px solid #1f4068;
        border-left: 1px solid #1f4068;
    }

    /* Coordinate label style */
    .coord-label {
        background: rgba(10, 25, 47, 0.95);
        border: 1px solid #06b6d4;
        border-radius: 0.75rem;
        padding: 6px 12px;
        color: #06b6d4;
        font-family: 'Outfit', monospace;
        font-size: 11px;
        font-weight: 700;
        white-space: nowrap;
        box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3);
    }
</style>
{% endblock %}

{% block content %}
<div class="space-y-6">
    <div class="bg-[#0a192f]/80 p-8 rounded-[2.5rem] border border-[#1f4068] shadow-2xl relative overflow-hidden">
        <!-- Glow effects -->
        <div class="absolute -right-20 -top-20 w-80 h-80 bg-cyan-600/10 blur-[100px] rounded-full pointer-events-none"></div>
        
        <div class="flex justify-between items-end mb-6">
            <div>
                <h2 class="text-xl font-black text-white uppercase tracking-tight">Peta Lokasi</h2>
                <p class="text-[10px] text-gray-500 font-bold uppercase tracking-widest mt-1">Titik koordinat lokasi Mako Polda Kalsel ditandai pada peta</p>
                <div class="mt-4 flex items-center gap-4 flex-wrap">
                    <div class="flex items-center gap-2">
                        <span class="relative flex h-3 w-3">
                          <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75"></span>
                          <span class="relative inline-flex rounded-full h-3 w-3 bg-cyan-500"></span>
                        </span>
                        <span class="text-[10px] font-black text-cyan-400 uppercase tracking-widest" id="last-update">Memuat peta...</span>
                    </div>
                    <div class="bg-gray-900/60 px-3 py-1.5 rounded-lg border border-[#1f4068] flex items-center gap-2">
                        <i class="fa-solid fa-location-crosshairs text-cyan-500 text-xs"></i>
                        <span class="text-[10px] font-bold text-gray-300 font-mono" id="coord-display">-</span>
                    </div>
                </div>
            </div>
            
            <div class="bg-gray-900/50 px-4 py-2 rounded-xl border border-[#1f4068] flex items-center gap-3">
                <i class="fa-solid fa-users text-cyan-500"></i>
                <div>
                    <p class="text-[8px] text-gray-500 font-bold uppercase tracking-widest">Personil Terdeteksi</p>
                    <p class="text-sm font-black text-white" id="personil-count">0</p>
                </div>
            </div>
        </div>

        <div id="live-map"></div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    // Get coordinates from settings
    const poldaLat = parseFloat("{{ settings.get('polda_lat', '-3.488661') }}");
    const poldaLon = parseFloat("{{ settings.get('polda_lon', '114.831166') }}");
    const radius = parseFloat("{{ settings.get('geofence_radius', '200') }}");

    // Show coordinates in the header
    document.getElementById('coord-display').textContent = `${poldaLat.toFixed(6)}, ${poldaLon.toFixed(6)}`;

    // Initialize map
    const map = L.map('live-map').setView([poldaLat, poldaLon], 16);
    
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '© OpenStreetMap - Polda Kalsel Presensi'
    }).addTo(map);

    // Draw the main geofence circle
    L.circle([poldaLat, poldaLon], {
        color: '#06b6d4',
        fillColor: '#06b6d4',
        fillOpacity: 0.12,
        weight: 2,
        dashArray: '8, 6',
        radius: radius
    }).addTo(map);

    // Custom icon for the central Polda marker
    const poldaIcon = L.divIcon({
        className: 'custom-polda-marker',
        html: `<div style="
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
        ">
            <div style="
                background: linear-gradient(135deg, #dc2626, #b91c1c);
                width: 36px;
                height: 36px;
                border-radius: 50% 50% 50% 0;
                transform: rotate(-45deg);
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 4px 15px rgba(220, 38, 38, 0.5);
                border: 3px solid white;
            ">
                <i class="fa-solid fa-location-dot" style="
                    color: white;
                    font-size: 16px;
                    transform: rotate(45deg);
                "></i>
            </div>
            <div style="
                width: 8px;
                height: 8px;
                background: rgba(220, 38, 38, 0.3);
                border-radius: 50%;
                margin-top: 2px;
            "></div>
        </div>`,
        iconSize: [36, 46],
        iconAnchor: [18, 46],
        popupAnchor: [0, -46]
    });

    // Add central marker for Polda location
    const mainMarker = L.marker([poldaLat, poldaLon], { icon: poldaIcon }).addTo(map);
    mainMarker.bindPopup(`
        <div class="text-center py-2 px-1">
            <p class="text-xs font-black uppercase tracking-tight leading-tight mb-1" style="color: #fff;">POLDA KALIMANTAN SELATAN</p>
            <p class="text-[10px] font-bold uppercase" style="color: #06b6d4;">Mako Polda Kalsel</p>
            <div style="margin-top: 8px; padding-top: 8px; border-top: 1px solid #1f4068;">
                <p class="text-[9px] font-bold" style="color: #94a3b8;">KOORDINAT</p>
                <p class="text-[11px] font-black" style="color: #22d3ee; font-family: monospace;">${poldaLat.toFixed(6)}, ${poldaLon.toFixed(6)}</p>
            </div>
            <div style="margin-top: 4px;">
                <p class="text-[9px] font-bold" style="color: #94a3b8;">RADIUS GEOFENCE</p>
                <p class="text-[11px] font-black" style="color: #34d399;">${radius} meter</p>
            </div>
        </div>
    `).openPopup();

    // Add coordinate label on the map near the marker
    const coordLabel = L.divIcon({
        className: 'coord-label-marker',
        html: `<div class="coord-label">
            <i class="fa-solid fa-crosshairs" style="margin-right: 4px;"></i>
            ${poldaLat.toFixed(6)}, ${poldaLon.toFixed(6)}
        </div>`,
        iconSize: [220, 30],
        iconAnchor: [-20, 15]
    });
    L.marker([poldaLat, poldaLon], { icon: coordLabel, interactive: false }).addTo(map);

    let markersLayer = L.layerGroup().addTo(map);

    async function fetchLiveLocations() {
        try {
            const resp = await fetch('/admin/api/live-locations');
            const data = await resp.json();
            
            // Clear all existing presence markers to avoid duplicates
            markersLayer.clearLayers();
            
            if(data.markers && data.markers.length > 0) {
                document.getElementById('personil-count').textContent = data.markers.length;
                
                data.markers.forEach(m => {
                    // Marker Icon customization based on status
                    let color = 'blue';
                    if(m.status === 'Terlambat') color = 'orange';
                    if(m.status === 'Sakit' || m.status === 'Ijin') color = 'red';
                    
                    const markerIcon = new L.Icon({
                        iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-${color}.png`,
                        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
                        iconSize: [25, 41],
                        iconAnchor: [12, 41],
                        popupAnchor: [1, -34],
                        shadowSize: [41, 41]
                    });

                    // Build popup with coordinate info
                    let popupHtml = `
                        <div class="flex items-center gap-3 p-1 min-w-[200px]">
                            ${m.foto ? `<img src="${m.foto}" class="h-10 w-10 object-cover rounded bg-gray-900 border border-gray-700">` : `<div class="h-10 w-10 rounded bg-gray-800 flex items-center justify-center text-[8px] text-gray-500">NO IMG</div>`}
                            <div>
                                <p class="text-xs font-black uppercase tracking-tight leading-none mb-1">${m.nama}</p>
                                <p class="text-[9px] font-bold text-gray-400 uppercase">WAKTU: <span class="text-cyan-400">${m.waktu}</span></p>
                                <p class="text-[9px] font-bold text-gray-400 uppercase mt-0.5">STATUS: <span class="text-${color === 'blue' ? 'emerald' : 'amber'}-400">${m.status}</span></p>
                                <p class="text-[9px] font-bold text-gray-400 uppercase mt-0.5">KOORDINAT: <span style="color: #22d3ee; font-family: monospace;">${m.lat.toFixed(6)}, ${m.lon.toFixed(6)}</span></p>
                            </div>
                        </div>
                    `;

                    L.marker([m.lat, m.lon], {icon: markerIcon})
                        .bindPopup(popupHtml)
                        .addTo(markersLayer);
                });
            } else {
                document.getElementById('personil-count').textContent = "0";
            }
            
            // Update timestamp
            const now = new Date();
            document.getElementById('last-update').textContent = "Pembaruan Terakhir: " + now.toLocaleTimeString('id-ID');
            
        } catch (error) {
            console.error('Error fetching live locations:', error);
            document.getElementById('last-update').textContent = "Gagal memuat koneksi";
            document.getElementById('last-update').classList.replace('text-cyan-400', 'text-rose-500');
        }
    }

    // Polling every 10 seconds for updates
    fetchLiveLocations();
    setInterval(fetchLiveLocations, 10000);
});
</script>
{% endblock %}