@extends('layouts.app')

@section('title', 'GIS Command Center')

@section('content')
<div class="w-full h-full flex flex-col gap-5 max-w-[1800px] mx-auto">
    
    <!-- Command Center Header -->
    <header class="flex items-center justify-between px-1">
        <div class="flex items-center gap-4">
            <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-900/50 to-zinc-900 border border-blue-500/20 flex items-center justify-center shadow-[0_0_20px_-5px_rgba(59,130,246,0.3)]">
                <span class="text-blue-400 font-bold text-sm tracking-tighter">110</span>
            </div>
            <div>
                <h2 class="text-sm font-semibold text-zinc-100 tracking-tight leading-tight">National Command Center</h2>
                <div class="flex items-center gap-2 mt-0.5">
                    <span class="relative flex h-2 w-2">
                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                        <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
                    </span>
                    <span class="text-[10px] text-zinc-500 font-mono uppercase tracking-wider">System Operational</span>
                </div>
            </div>
        </div>
        
        <div class="flex items-center gap-6">
            <div class="hidden lg:flex items-center gap-6 px-6 border-r border-zinc-800/50 h-8">
                <div class="flex items-center gap-3">
                    <div class="icon-box w-7 h-7 rounded-lg flex items-center justify-center text-zinc-500">
                        <i data-lucide="users" class="w-3.5 h-3.5"></i>
                    </div>
                    <div>
                        <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-medium">Active Units</p>
                        <p class="text-xs font-mono text-zinc-200" id="active-units-count">0</p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <div class="icon-box w-7 h-7 rounded-lg flex items-center justify-center text-emerald-500/80">
                        <i data-lucide="clock" class="w-3.5 h-3.5"></i>
                    </div>
                    <div>
                        <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-medium">Avg Response</p>
                        <p class="text-xs font-mono text-emerald-400">04:12</p>
                    </div>
                </div>
            </div>
            <div class="flex items-center gap-3">
                <button class="w-9 h-9 rounded-full bg-zinc-900 border border-zinc-800 hover:border-zinc-700 flex items-center justify-center hover:bg-zinc-800 transition shadow-sm group" onclick="toggleFilters()">
                    <i data-lucide="filter" class="w-4 h-4 text-zinc-400 group-hover:text-zinc-200 transition-colors"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- Main Grid Content -->
    <div class="flex-1 grid grid-cols-1 lg:grid-cols-12 gap-5 min-h-0">
        
        <!-- Left Sidebar: Incoming Feed (3 Columns) -->
        <div class="lg:col-span-3 glass-panel rounded-2xl flex flex-col overflow-hidden shadow-2xl shadow-black/20">
            <div class="p-4 border-b border-white/5 bg-zinc-900/30 flex justify-between items-center">
                <div class="flex items-center gap-2">
                    <i data-lucide="radio" class="w-3.5 h-3.5 text-zinc-500"></i>
                    <h3 class="text-xs font-medium text-zinc-200 uppercase tracking-wider">Incoming Feed</h3>
                </div>
                <span class="text-[10px] bg-red-500/10 text-red-500 px-2 py-0.5 rounded-full border border-red-500/20 animate-pulse">LIVE</span>
            </div>
            
            <div class="flex-1 overflow-y-auto p-3 space-y-2" id="incoming-feed">
                <!-- Will be populated by JavaScript -->
                <div class="text-center py-8 text-gray-500 text-sm">
                    <i data-lucide="loader" class="w-6 h-6 mx-auto mb-2 animate-spin"></i>
                    <p>Memuat data...</p>
                </div>
            </div>
        </div>

        <!-- Center: Map Visualization (6 Columns) -->
        <div class="lg:col-span-6 flex flex-col gap-4">
            <div class="flex-1 bg-[#0c0c0e] border border-zinc-800 rounded-2xl relative overflow-hidden group shadow-2xl" style="min-height: 500px; height: calc(100vh - 300px); position: relative;">
                <!-- Map Grid Background -->
                <div class="absolute inset-0 opacity-[0.08] z-0 pointer-events-none" style="background-image: linear-gradient(#52525b 1px, transparent 1px), linear-gradient(90deg, #52525b 1px, transparent 1px); background-size: 40px 40px;"></div>
                
                <!-- Map Container -->
                <div id="map" class="absolute inset-0 w-full h-full" style="z-index: 10;"></div>
                
                <!-- Map UI Overlays -->
                <div class="absolute top-4 left-4 z-20 flex gap-2" id="map-overlay-info">
                    <!-- Will be populated by JavaScript -->
                </div>

                <!-- Radar Effect Overlay (shown when complaint selected) -->
                <div id="radar-overlay" class="absolute inset-0 flex items-center justify-center pointer-events-none z-15 hidden">
                    <!-- Radar Sweep -->
                    <div class="absolute w-[400px] h-[400px] rounded-full radar-scan opacity-30"></div>
                    
                    <!-- Concentric Circles -->
                    <div class="absolute w-[500px] h-[500px] border border-zinc-800/40 rounded-full"></div>
                    <div class="absolute w-[300px] h-[300px] border border-zinc-700/30 rounded-full border-dashed"></div>
                    <div class="absolute w-40 h-40 bg-red-500/5 rounded-full animate-pulse border border-red-500/20"></div>
                    
                    <!-- The Dot -->
                    <div class="relative w-3 h-3 bg-red-500 rounded-full shadow-[0_0_20px_rgba(239,68,68,1)] ring-4 ring-black/50 z-20"></div>
                    
                    <!-- Target UI -->
                    <div class="absolute w-12 h-12 border-x border-red-500/30"></div>
                    <div class="absolute w-12 h-12 border-y border-red-500/30"></div>
                </div>
            </div>
            
            <!-- Bottom Info Panel -->
            <div class="h-44 grid grid-cols-2 gap-4">
                <!-- CCTV Feed -->
                <div class="glass-panel rounded-2xl p-4 flex flex-col gap-3">
                    <div class="flex justify-between items-center">
                        <span class="text-xs font-medium text-zinc-300 flex items-center gap-2">
                            <i data-lucide="cctv" class="w-3.5 h-3.5 text-zinc-500"></i>
                            Nearest CCTV
                        </span>
                        <span class="text-[9px] text-emerald-400 font-mono bg-emerald-500/10 px-2 py-0.5 rounded-full border border-emerald-500/20 flex items-center gap-1" id="cctv-status">
                            <div class="w-1 h-1 rounded-full bg-emerald-500"></div> CONNECTED
                        </span>
                    </div>
                    <div class="grid grid-cols-2 gap-3 h-full" id="cctv-feeds">
                        <!-- Will be populated by JavaScript -->
                        <div class="bg-black/50 border border-white/5 rounded-lg flex items-center justify-center relative overflow-hidden group cursor-pointer">
                            <i data-lucide="eye" class="w-5 h-5 text-zinc-700 group-hover:text-zinc-500 transition-colors"></i>
                        </div>
                        <div class="bg-black/50 border border-white/5 rounded-lg flex items-center justify-center relative overflow-hidden group cursor-pointer">
                            <i data-lucide="eye" class="w-5 h-5 text-zinc-700 group-hover:text-zinc-500 transition-colors"></i>
                        </div>
                    </div>
                </div>

                <!-- AI Analysis -->
                <div class="glass-panel rounded-2xl p-4 flex flex-col justify-between">
                    <div class="flex items-center gap-2 mb-2">
                        <div class="p-1 rounded bg-indigo-500/10 border border-indigo-500/20">
                            <i data-lucide="sparkles" class="w-3.5 h-3.5 text-indigo-400"></i>
                        </div>
                        <span class="text-xs font-medium text-zinc-200">AI Situation Analysis</span>
                    </div>
                    <div class="space-y-3" id="ai-analysis">
                        <div>
                            <div class="flex justify-between text-[10px] text-zinc-500 mb-1">
                                <span>Crowd Density</span>
                                <span class="text-zinc-300 font-mono">NORMAL</span>
                            </div>
                            <div class="w-full h-1.5 bg-zinc-800 rounded-full overflow-hidden">
                                <div class="w-[30%] h-full bg-indigo-500 rounded-full"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between text-[10px] text-zinc-500 mb-1">
                                <span>Traffic Status</span>
                                <span class="text-zinc-300 font-mono">NORMAL</span>
                            </div>
                            <div class="w-full h-1.5 bg-zinc-800 rounded-full overflow-hidden">
                                <div class="w-[40%] h-full bg-green-500 rounded-full"></div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-2 p-2 bg-zinc-800/30 rounded border border-white/5 text-[10px] text-zinc-400 leading-relaxed" id="ai-suggestion">
                        <span class="text-indigo-400 font-medium">Status:</span> Monitoring active incidents.
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Sidebar: Details (3 Columns) -->
        <div class="lg:col-span-3 glass-panel rounded-2xl p-5 flex flex-col gap-6 shadow-2xl">
            <div>
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-xs font-medium text-zinc-400 uppercase tracking-widest">Selected Incident</h3>
                    <button class="p-1 hover:bg-zinc-800 rounded transition" onclick="clearSelection()"><i data-lucide="x" class="w-4 h-4 text-zinc-500"></i></button>
                </div>
                
                <div id="selected-incident-info" class="space-y-4">
                    <div class="text-center py-8 text-gray-500 text-sm">
                        <i data-lucide="map-pin" class="w-8 h-8 mx-auto mb-2 text-zinc-600"></i>
                        <p>Pilih insiden dari peta atau feed</p>
                    </div>
                </div>
            </div>

            <!-- Filters Panel (Collapsible) -->
            <div id="filters-panel" class="hidden space-y-4 pt-4 border-t border-white/5">
                <h3 class="text-xs font-medium text-zinc-400 uppercase tracking-widest">Filters</h3>
                
                <div>
                    <label class="block text-xs font-medium text-zinc-400 mb-2">Status Petugas</label>
                    <select id="officer-status-filter" class="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-md text-xs text-zinc-200 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <option value="">Semua</option>
                        <option value="available">Tersedia</option>
                        <option value="on_duty">Bertugas</option>
                        <option value="busy">Sibuk</option>
                    </select>
                </div>

                <div>
                    <label class="block text-xs font-medium text-zinc-400 mb-2">Rentang Waktu Heatmap</label>
                    <select id="heatmap-time-range" class="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-md text-xs text-zinc-200 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <option value="24h">24 Jam Terakhir</option>
                        <option value="7d">7 Hari Terakhir</option>
                        <option value="30d">30 Hari Terakhir</option>
                    </select>
                </div>

                <div>
                    <label class="block text-xs font-medium text-zinc-400 mb-2">Layer Peta</label>
                    <div class="space-y-2">
                        <label class="flex items-center gap-2 text-xs text-zinc-300 cursor-pointer">
                            <input type="checkbox" id="show-officers" checked class="w-4 h-4 rounded bg-white/5 border-white/10 text-indigo-600 focus:ring-indigo-500">
                            <span>Tampilkan Petugas</span>
                        </label>
                        <label class="flex items-center gap-2 text-xs text-zinc-300 cursor-pointer">
                            <input type="checkbox" id="show-complaints" checked class="w-4 h-4 rounded bg-white/5 border-white/10 text-indigo-600 focus:ring-indigo-500">
                            <span>Tampilkan Aduan</span>
                        </label>
                        <label class="flex items-center gap-2 text-xs text-zinc-300 cursor-pointer">
                            <input type="checkbox" id="show-phone-locations" checked class="w-4 h-4 rounded bg-white/5 border-white/10 text-indigo-600 focus:ring-indigo-500">
                            <span>Tampilkan Lokasi Mobile</span>
                        </label>
                        <label class="flex items-center gap-2 text-xs text-zinc-300 cursor-pointer">
                            <input type="checkbox" id="show-heatmap" class="w-4 h-4 rounded bg-white/5 border-white/10 text-indigo-600 focus:ring-indigo-500">
                            <span>Tampilkan Heatmap</span>
                        </label>
                        <label class="flex items-center gap-2 text-xs text-zinc-300 cursor-pointer">
                            <input type="checkbox" id="show-geofences" class="w-4 h-4 rounded bg-white/5 border-white/10 text-indigo-600 focus:ring-indigo-500">
                            <span>Tampilkan Geo-fences</span>
                        </label>
                    </div>
                </div>
            </div>

            <div class="mt-auto space-y-3">
                <button id="dispatch-btn" class="w-full py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-lg text-xs font-medium transition-all shadow-[0_0_20px_-5px_rgba(37,99,235,0.4)] flex items-center justify-center gap-2 group hidden">
                    <i data-lucide="radio" class="w-3.5 h-3.5 group-hover:scale-110 transition"></i>
                    Dispatch Unit
                </button>
                <div class="grid grid-cols-2 gap-3">
                    <button id="audio-btn" class="py-3 bg-zinc-800 hover:bg-zinc-700 text-zinc-200 rounded-lg text-xs font-medium transition border border-white/5 flex items-center justify-center gap-2 hidden">
                        <i data-lucide="mic" class="w-3.5 h-3.5"></i> Audio
                    </button>
                    <button id="escalate-btn" class="py-3 bg-zinc-800 hover:bg-zinc-700 text-zinc-200 rounded-lg text-xs font-medium transition border border-white/5 flex items-center justify-center gap-2 hidden">
                        <i data-lucide="shield-alert" class="w-3.5 h-3.5"></i> Escalate
                    </button>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- Officer Info Modal -->
<div id="officer-info-modal" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity" aria-hidden="true" onclick="closeOfficerModal()"></div>
        <div class="inline-block align-bottom glass-panel rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="px-6 py-4 border-b border-white/10 flex items-center justify-between">
                <h3 class="text-lg font-semibold text-white" id="modal-title">Informasi Petugas</h3>
                <button onclick="closeOfficerModal()" class="text-gray-400 hover:text-white">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>
            <div id="officer-info-content" class="px-6 py-4">
                <!-- Will be populated by JavaScript -->
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
    
    .font-mono { font-family: 'JetBrains Mono', monospace; }

    /* Custom Scrollbar */
    ::-webkit-scrollbar { width: 4px; height: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: #52525b; }

    /* Radar Animation */
    @keyframes radar {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    .radar-scan {
        background: conic-gradient(from 0deg, transparent 0%, transparent 60%, rgba(239, 68, 68, 0.1) 80%, rgba(239, 68, 68, 0.4) 100%);
        animation: radar 3s linear infinite;
    }

    .glass-panel {
        background: rgba(24, 24, 27, 0.6);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .icon-box {
        background: linear-gradient(180deg, rgba(39, 39, 42, 0.5) 0%, rgba(24, 24, 27, 0.5) 100%);
        border: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }

    .fade-in { animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
    @keyframes fadeIn { 
        from { opacity: 0; transform: translateY(10px) scale(0.98); } 
        to { opacity: 1; transform: translateY(0) scale(1); } 
    }

    /* Map Container Styles */
    #map {
        position: relative !important;
        z-index: 10;
    }
    
    /* Radar Overlay Styles */
    #radar-overlay {
        z-index: 30 !important;
        pointer-events: none !important;
    }
    
    #radar-overlay > * {
        pointer-events: none !important;
    }
    
    /* Ensure Leaflet map tiles are visible */
    .leaflet-container {
        background: #0c0c0e !important;
        font-family: 'Inter', sans-serif;
    }
    
    .leaflet-tile-container img {
        max-width: none !important;
    }

    /* Map Marker Styles */
    .map-marker {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid white;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
    .map-marker--officer {
        background-color: #2563eb;
        color: white;
        width: 36px;
        height: 36px;
    }
    .map-marker--complaint {
        background-color: #dc2626;
        color: white;
        width: 32px;
        height: 32px;
    }
    .map-marker i {
        width: 18px;
        height: 18px;
    }
    .map-marker--complaint i {
        width: 16px;
        height: 16px;
    }

    /* Radar Marker Styles for Emergency Calls */
    .radar-marker-container {
        position: relative;
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .radar-marker-pulse {
        position: absolute;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 3px solid #ef4444;
        background: rgba(239, 68, 68, 0.2);
        animation: radarPulse 2s ease-out infinite;
    }
    
    .radar-marker-pulse:nth-child(2) {
        animation-delay: 0.5s;
        width: 80px;
        height: 80px;
        border-width: 2px;
        opacity: 0.6;
    }
    
    .radar-marker-pulse:nth-child(3) {
        animation-delay: 1s;
        width: 100px;
        height: 100px;
        border-width: 1px;
        opacity: 0.4;
    }
    
    .radar-marker-icon {
        position: relative;
        z-index: 10;
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        border-radius: 50%;
        border: 3px solid white;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 20px rgba(239, 68, 68, 0.8), 0 4px 12px rgba(0,0,0,0.4);
        animation: radarIconPulse 1.5s ease-in-out infinite;
    }
    
    .radar-marker-icon i {
        width: 20px;
        height: 20px;
        color: white;
        animation: radarIconRotate 2s linear infinite;
    }
    
    @keyframes radarPulse {
        0% {
            transform: scale(0.8);
            opacity: 1;
        }
        100% {
            transform: scale(1.5);
            opacity: 0;
        }
    }
    
    @keyframes radarIconPulse {
        0%, 100% {
            transform: scale(1);
            box-shadow: 0 0 20px rgba(239, 68, 68, 0.8), 0 4px 12px rgba(0,0,0,0.4);
        }
        50% {
            transform: scale(1.1);
            box-shadow: 0 0 30px rgba(239, 68, 68, 1), 0 4px 16px rgba(0,0,0,0.5);
        }
    }
    
    @keyframes radarIconRotate {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    /* Incident Card Styles */
    .incident-card {
        transition: all 0.2s;
    }
    .incident-card:hover {
        transform: translateX(2px);
    }
    .incident-card.critical {
        background: linear-gradient(to right, rgba(239, 68, 68, 0.05), transparent);
        border-color: rgba(239, 68, 68, 0.2);
    }
    .incident-card.critical:hover {
        border-color: rgba(239, 68, 68, 0.4);
    }

    /* Leaflet Popup Styles - Ensure readable text on white background */
    .leaflet-popup-content-wrapper {
        background: white !important;
        color: #1f2937 !important;
    }
    .leaflet-popup-content {
        color: #1f2937 !important;
    }
    .leaflet-popup-content strong {
        color: #111827 !important;
    }
    .leaflet-popup-content span {
        color: #374151 !important;
    }
    .leaflet-popup-content p {
        color: #111827 !important;
    }
    /* Override text-white, text-gray-400, text-gray-300 in popups */
    .leaflet-popup-content .text-white,
    .leaflet-popup-content .text-gray-400,
    .leaflet-popup-content .text-gray-300 {
        color: #111827 !important;
    }
    /* Override badge styles in popups */
    .leaflet-popup-content .bg-white\/5 {
        background-color: #f3f4f6 !important;
        border-color: #d1d5db !important;
    }
    .leaflet-popup-content .border-white\/10 {
        border-color: #d1d5db !important;
    }
    .leaflet-popup-tip {
        background: white !important;
    }
</style>
@endpush

@push('scripts')
<script>
let map;
let officerMarkers = {};
let complaintMarkers = [];
let phoneLocationMarkers = {}; // Store phone location markers from Flutter app
let emergencyRadarMarkers = {}; // Store emergency radar markers separately
let heatmapLayer = null;
let geoFenceLayers = [];
let selectedComplaint = null;
let currentComplaints = [];

// Function to initialize map
function initializeMap() {
    const mapContainer = document.getElementById('map');
    if (!mapContainer) {
        console.error('Map container not found');
        return false;
    }

    // Check if Leaflet is loaded
    if (typeof L === 'undefined') {
        console.error('Leaflet library not loaded. Waiting...');
        return false;
    }

    // Ensure map container has explicit dimensions
    const mapParent = mapContainer.parentElement;
    if (mapParent) {
        // Force layout calculation
        mapParent.style.display = 'block';
        const parentHeight = mapParent.offsetHeight || window.innerHeight - 300 || 500;
        const parentWidth = mapParent.offsetWidth || window.innerWidth || 800;
        
        mapContainer.style.height = Math.max(parentHeight, 500) + 'px';
        mapContainer.style.width = parentWidth + 'px';
        mapContainer.style.position = 'absolute';
        mapContainer.style.top = '0';
        mapContainer.style.left = '0';
        mapContainer.style.right = '0';
        mapContainer.style.bottom = '0';
    }

    // Initialize map
    try {
        if (map) {
            map.remove();
        }
        
        map = L.map('map', {
            zoomControl: true,
            attributionControl: true,
            preferCanvas: false
        }).setView([-6.2088, 106.8456], 13);

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

        console.log('Map initialized successfully');
        return true;
    } catch (error) {
        console.error('Error initializing map:', error);
        return false;
    }
}

// Initialize map when DOM and Leaflet are ready
function waitForLeafletAndInit() {
    if (typeof L !== 'undefined') {
        // Wait for DOM to be ready
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', function() {
                setTimeout(() => {
                    if (initializeMap()) {
                        setupMapEventListeners();
                        // Trigger map resize multiple times to ensure it renders correctly
                        setTimeout(() => {
                            if (map) {
                                map.invalidateSize();
                            }
                        }, 200);
                        setTimeout(() => {
                            if (map) {
                                map.invalidateSize();
                            }
                        }, 500);
                        // Load initial data
                        loadMapData();
                    }
                }, 100);
            });
        } else {
            setTimeout(() => {
                if (initializeMap()) {
                    setupMapEventListeners();
                    setTimeout(() => {
                        if (map) {
                            map.invalidateSize();
                        }
                    }, 200);
                    setTimeout(() => {
                        if (map) {
                            map.invalidateSize();
                        }
                    }, 500);
                    loadMapData();
                }
            }, 100);
        }
    } else {
        // Retry after a short delay if Leaflet is not loaded yet
        setTimeout(waitForLeafletAndInit, 100);
    }
}

// Start initialization
waitForLeafletAndInit();

// Also try on window load as fallback
window.addEventListener('load', function() {
    if (!map) {
        setTimeout(() => {
            if (initializeMap()) {
                setupMapEventListeners();
                setTimeout(() => {
                    if (map) {
                        map.invalidateSize();
                    }
                }, 200);
                loadMapData();
            }
        }, 200);
    }
});

// Setup event listeners after map is initialized
function setupMapEventListeners() {

    // Filter event listeners
    const officerStatusFilter = document.getElementById('officer-status-filter');
    if (officerStatusFilter) {
        officerStatusFilter.addEventListener('change', function() {
            loadMapData();
        });
    }

    const heatmapTimeRange = document.getElementById('heatmap-time-range');
    if (heatmapTimeRange) {
        heatmapTimeRange.addEventListener('change', function() {
            loadMapData();
        });
    }

    // Toggle layer event listeners
    const showOfficers = document.getElementById('show-officers');
    if (showOfficers) {
        showOfficers.addEventListener('change', function() {
            if (this.checked) {
                loadMapData();
            } else {
                Object.values(officerMarkers).forEach(marker => map.removeLayer(marker));
                officerMarkers = {};
            }
        });
    }

    const showComplaints = document.getElementById('show-complaints');
    if (showComplaints) {
        showComplaints.addEventListener('change', function() {
            if (this.checked) {
                loadMapData();
            } else {
                complaintMarkers.forEach(marker => map.removeLayer(marker));
                complaintMarkers = [];
                // Also hide emergency radar markers
                Object.values(emergencyRadarMarkers).forEach(marker => map.removeLayer(marker));
                emergencyRadarMarkers = {};
            }
        });
    }

    const showPhoneLocations = document.getElementById('show-phone-locations');
    if (showPhoneLocations) {
        showPhoneLocations.addEventListener('change', function() {
            // Toggle phone location markers visibility
            Object.values(phoneLocationMarkers).forEach(marker => {
                if (this.checked) {
                    marker.addTo(map);
                } else {
                    map.removeLayer(marker);
                }
            });
        });
    }

    const showHeatmap = document.getElementById('show-heatmap');
    if (showHeatmap) {
        showHeatmap.addEventListener('change', function() {
            if (this.checked) {
                loadMapData();
            } else {
                if (heatmapLayer) {
                    map.removeLayer(heatmapLayer);
                    heatmapLayer = null;
                }
            }
        });
    }

    const showGeofences = document.getElementById('show-geofences');
    if (showGeofences) {
        showGeofences.addEventListener('change', function() {
            if (this.checked) {
                loadMapData();
            } else {
                geoFenceLayers.forEach(layer => map.removeLayer(layer));
                geoFenceLayers = [];
            }
        });
    }

    // Auto-refresh every 5 seconds
    setInterval(loadMapData, 5000);

    // Dispatch button event listener
    const dispatchBtn = document.getElementById('dispatch-btn');
    if (dispatchBtn) {
        dispatchBtn.addEventListener('click', function() {
            if (!selectedComplaint) {
                alert('Pilih insiden terlebih dahulu');
                return;
            }
            handleDispatchUnit(selectedComplaint);
        });
    }

    // Audio button event listener
    const audioBtn = document.getElementById('audio-btn');
    if (audioBtn) {
        audioBtn.addEventListener('click', function() {
            if (!selectedComplaint) {
                alert('Pilih insiden terlebih dahulu');
                return;
            }
            handleAudioPlayback(selectedComplaint);
        });
    }

    // Escalate button event listener
    const escalateBtn = document.getElementById('escalate-btn');
    if (escalateBtn) {
        escalateBtn.addEventListener('click', function() {
            if (!selectedComplaint) {
                alert('Pilih insiden terlebih dahulu');
                return;
            }
            handleEscalate(selectedComplaint);
        });
    }

    // Re-initialize icons when map is ready
    if (map) {
        map.whenReady(function() {
            setTimeout(() => {
                if (window.lucide) {
                    lucide.createIcons();
                }
            }, 500);
        });
    }
}

// WebSocket connection for real-time updates
@if(config('broadcasting.default') === 'pusher' && config('broadcasting.connections.pusher.key'))
document.addEventListener('DOMContentLoaded', function() {
    if (typeof Echo !== 'undefined') {
        // Listen for officer location updates
        Echo.channel('officer-locations')
            .listen('.officer.location.updated', (e) => {
                updateOfficerMarker(e);
            });
        
        // Listen for emergency SOS alerts from Flutter
        Echo.channel('emergency-sos-alerts')
            .listen('.emergency.sos.activated', (e) => {
                console.log('Emergency SOS activated:', e);
                handleEmergencySosAlert(e);
            });
        
        // Also listen to private channels based on user's access level
        // This will be handled by Laravel Echo authentication
    }
});
@endif

// Handle emergency SOS alert from Flutter
function handleEmergencySosAlert(event) {
    if (!map) return;
    
    const location = event.location;
    if (!location || !location.latitude || !location.longitude) {
        console.warn('Emergency SOS alert missing location data');
        return;
    }
    
    // Create emergency complaint object
    const emergencyComplaint = {
        id: event.complaint_id,
        ticket_number: event.ticket_number || 'SOS-' + Date.now(),
        category: 'emergency_police',
        priority: 'critical',
        status: 'pending',
        source: 'mobile_app',
        latitude: location.latitude,
        longitude: location.longitude,
        address: location.address || 'Lokasi darurat',
        is_silent_mode: event.is_silent_mode || false,
        is_anonymous: event.is_anonymous || false,
        activated_at: event.activated_at || new Date().toISOString()
    };
    
    // Add to current complaints if not already present
    const existingIndex = currentComplaints.findIndex(c => c.id === emergencyComplaint.id);
    if (existingIndex >= 0) {
        currentComplaints[existingIndex] = emergencyComplaint;
    } else {
        currentComplaints.unshift(emergencyComplaint); // Add to beginning
    }
    
    // Render emergency radar marker
    renderEmergencyRadarMarker(emergencyComplaint);
    
    // Update incoming feed
    renderIncomingFeed(currentComplaints);
    
    // Auto-select emergency location (without auto-zoom)
    setTimeout(() => {
        selectComplaint(emergencyComplaint);
        
        // Show notification
        showEmergencyNotification(emergencyComplaint);
    }, 300);
}

// Show emergency notification
function showEmergencyNotification(complaint) {
    // Create notification element
    const notification = document.createElement('div');
    notification.className = 'fixed top-4 right-4 z-50 glass-panel p-4 rounded-xl border border-red-500/30 shadow-2xl max-w-sm animate-fade-in';
    notification.innerHTML = `
        <div class="flex items-start gap-3">
            <div class="radar-marker-icon" style="width: 32px; height: 32px; flex-shrink: 0;">
                <i data-lucide="radio" class="w-4 h-4"></i>
            </div>
            <div class="flex-1">
                <div class="flex items-center gap-2 mb-1">
                    <span class="text-xs font-bold text-red-400 uppercase tracking-wider">Emergency SOS</span>
                    <span class="text-[10px] text-zinc-500 font-mono">${complaint.is_silent_mode ? 'SILENT' : 'ACTIVE'}</span>
                </div>
                <p class="text-sm font-semibold text-zinc-100 mb-1">${complaint.ticket_number}</p>
                <p class="text-xs text-zinc-400">${complaint.address || 'Lokasi darurat terdeteksi'}</p>
            </div>
            <button onclick="this.parentElement.parentElement.remove()" class="text-zinc-500 hover:text-zinc-300">
                <i data-lucide="x" class="w-4 h-4"></i>
            </button>
        </div>
    `;
    
    document.body.appendChild(notification);
    
    // Initialize icons
    if (window.lucide) {
        lucide.createIcons();
    }
    
    // Auto-remove after 10 seconds
    setTimeout(() => {
        if (notification.parentElement) {
            notification.style.opacity = '0';
            notification.style.transition = 'opacity 0.3s';
            setTimeout(() => notification.remove(), 300);
        }
    }, 10000);
}

function loadMapData() {
    if (!map) return;
    // Get filter values
    const heatmapTimeRange = document.getElementById('heatmap-time-range')?.value || '24h';
    
    // Build query string
    const params = new URLSearchParams();
    if (heatmapTimeRange) {
        params.append('heatmap_time_range', heatmapTimeRange);
    }

    const url = '/api/realtime-map/data' + (params.toString() ? '?' + params.toString() : '');
    
    // Get CSRF token from meta tag
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
    
    fetch(url, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            ...(csrfToken ? { 'X-CSRF-TOKEN': csrfToken } : {}),
        },
        credentials: 'same-origin', // Include cookies for session authentication
    })
        .then(response => {
            if (!response.ok) {
                // If unauthorized, try to get more info
                if (response.status === 401) {
                    return response.json().then(data => {
                        throw new Error(data.message || 'Unauthorized: Please login again');
                    }).catch(() => {
                        throw new Error('Unauthorized: Please login again');
                    });
                }
                // For other errors, try to get message from response
                return response.json().then(data => {
                    throw new Error(data.message || `Error loading map data: HTTP ${response.status}`);
                }).catch(() => {
                    throw new Error(`Error loading map data: HTTP ${response.status} ${response.statusText}`);
                });
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                currentComplaints = data.data.complaints || [];
                renderOfficers(data.data.officers || []);
                renderPhoneLocations(data.data.phone_locations || []); // Render phone locations from Flutter
                renderComplaints(currentComplaints);
                renderIncomingFeed(currentComplaints);
                renderHeatmap(data.data.heatmap || []);
                renderGeoFences(data.data.geo_fences || []);
                updateActiveUnitsCount(data.data.officers || []);
            } else {
                console.error('API returned success=false:', data);
            }
        })
        .catch(error => {
            console.error('Error loading map data:', error);
            // Show user-friendly error message
            const feedContainer = document.getElementById('incoming-feed');
            if (feedContainer) {
                feedContainer.innerHTML = `
                    <div class="text-center py-8 text-red-400 text-sm">
                        <i data-lucide="alert-circle" class="w-6 h-6 mx-auto mb-2"></i>
                        <p>Error memuat data: ${error.message}</p>
                        <p class="text-xs text-zinc-500 mt-2">Pastikan Anda sudah login</p>
                    </div>
                `;
                if (window.lucide) lucide.createIcons();
            }
        });
}

function renderOfficers(officers) {
    if (!map) return;
    
    // Clear existing markers
    Object.values(officerMarkers).forEach(marker => map.removeLayer(marker));
    officerMarkers = {};

    // Check if officers layer is visible
    const showOfficers = document.getElementById('show-officers');
    if (!showOfficers || !showOfficers.checked) return;

    // Render officer markers
    officers.forEach(officer => {
        // Apply status filter
        const statusFilter = document.getElementById('officer-status-filter').value;
        if (statusFilter && officer.status !== statusFilter) {
            return;
        }

        // Convert to numbers to ensure they're numeric
        const lat = parseFloat(officer.latitude);
        const lng = parseFloat(officer.longitude);
        
        if (isNaN(lat) || isNaN(lng)) {
            console.warn('Invalid latitude/longitude for officer:', officer);
            return;
        }

        const icon = L.divIcon({
            className: 'map-marker map-marker--officer',
            html: `<div class="map-marker map-marker--officer">
                <i data-lucide="shield"></i>
            </div>`,
            iconSize: [36, 36],
            iconAnchor: [18, 18]
        });

        const marker = L.marker([lat, lng], { icon })
            .addTo(map)
            .bindPopup(`
                <div class="text-sm">
                    <strong class="text-gray-900">${officer.name}</strong><br>
                    <span class="text-gray-600">Status: ${officer.status}</span>
                </div>
            `)
            .on('click', () => showOfficerInfo(officer))
            .on('popupopen', function() {
                if (window.lucide) {
                    lucide.createIcons();
                }
            });
        
        // Initialize icon after marker is added
        marker.on('add', function() {
            setTimeout(() => {
                if (window.lucide) {
                    lucide.createIcons();
                }
            }, 100);
        });
        
        officerMarkers[officer.id] = marker;
    });

    // Initialize icons
    if (window.lucide) {
        lucide.createIcons();
    }

    // Update officer list
    updateOfficerList(officers);
}

function renderPhoneLocations(phoneLocations) {
    if (!map) return;
    
    // Clear existing phone location markers
    Object.values(phoneLocationMarkers).forEach(marker => map.removeLayer(marker));
    phoneLocationMarkers = {};

    // Check if phone locations layer is visible
    const showPhoneLocations = document.getElementById('show-phone-locations');
    if (!showPhoneLocations || !showPhoneLocations.checked) return;

    // Render phone location markers (from Flutter app)
    phoneLocations.forEach(location => {
        const lat = parseFloat(location.latitude);
        const lng = parseFloat(location.longitude);
        
        if (isNaN(lat) || isNaN(lng)) {
            console.warn('Invalid latitude/longitude for phone location:', location);
            return;
        }

        // Use different icon for phone locations (mobile device icon)
        const icon = L.divIcon({
            className: 'map-marker map-marker--phone',
            html: `<div class="map-marker map-marker--phone" style="background: ${location.is_emergency_call ? '#ef4444' : '#3b82f6'};">
                <i data-lucide="${location.is_emergency_call ? 'alert-circle' : 'smartphone'}"></i>
            </div>`,
            iconSize: [32, 32],
            iconAnchor: [16, 16]
        });

        const phoneLabel = location.phone_number 
            ? (location.is_anonymous ? 'Anonymous' : location.phone_number)
            : 'Unknown Device';

        const marker = L.marker([lat, lng], { icon })
            .addTo(map)
            .bindPopup(`
                <div class="text-sm">
                    <strong class="text-gray-900">${phoneLabel}</strong><br>
                    <span class="text-gray-600">Status: ${location.status || 'active'}</span><br>
                    ${location.is_emergency_call ? '<span class="text-red-600 font-semibold">🚨 Emergency</span><br>' : ''}
                    ${location.accuracy ? `<span class="text-gray-500 text-xs">Accuracy: ${location.accuracy.toFixed(0)}m</span><br>` : ''}
                    ${location.speed ? `<span class="text-gray-500 text-xs">Speed: ${location.speed.toFixed(1)} km/h</span><br>` : ''}
                    <span class="text-gray-500 text-xs">Updated: ${location.recorded_at ? new Date(location.recorded_at).toLocaleString() : 'Just now'}</span>
                </div>
            `)
            .on('popupopen', function() {
                if (window.lucide) {
                    lucide.createIcons();
                }
            });
        
        // Initialize icon after marker is added
        marker.on('add', function() {
            setTimeout(() => {
                if (window.lucide) {
                    lucide.createIcons();
                }
            }, 100);
        });
        
        // Use phone_number or user_id as key, fallback to id
        const key = location.phone_number || location.user_id || location.id;
        phoneLocationMarkers[key] = marker;
    });

    // Initialize icons
    if (window.lucide) {
        lucide.createIcons();
    }

    console.log(`Rendered ${phoneLocations.length} phone location(s) from Flutter app`);
}

function updateOfficerList(officers) {
    const list = document.getElementById('officer-list');
    if (!list) return;
    
    if (officers.length === 0) {
        list.innerHTML = '<div class="text-center py-4 text-gray-500 text-sm">Tidak ada petugas aktif</div>';
        return;
    }

    list.innerHTML = officers.map(officer => `
        <div class="p-2 bg-white/5 rounded border border-white/5 hover:bg-white/10 cursor-pointer transition" onclick="showOfficerInfo(${JSON.stringify(officer).replace(/"/g, '&quot;')})">
            <div class="flex items-center justify-between">
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-medium text-white truncate">${officer.name}</p>
                    <p class="text-xs text-gray-400">${officer.status}</p>
                </div>
                <span class="w-2 h-2 rounded-full bg-green-500 ml-2"></span>
            </div>
        </div>
    `).join('');
}

function showOfficerInfo(officer) {
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
    
    fetch(`/api/realtime-map/officers/${officer.id}/details`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            ...(csrfToken ? { 'X-CSRF-TOKEN': csrfToken } : {}),
        },
        credentials: 'same-origin',
    })
        .then(response => {
            if (!response.ok) {
                // Try to get error message from response
                if (response.status === 401) {
                    return response.json().then(data => {
                        throw new Error(data.message || 'Unauthorized: Please login again');
                    }).catch(() => {
                        throw new Error('Unauthorized: Please login again');
                    });
                }
                if (response.status === 404) {
                    return response.json().then(data => {
                        throw new Error(data.message || 'Officer not found');
                    }).catch(() => {
                        throw new Error('Officer not found');
                    });
                }
                // For other errors, try to get message from response
                return response.json().then(data => {
                    throw new Error(data.message || `Error loading officer details: HTTP ${response.status}`);
                }).catch(() => {
                    throw new Error(`Error loading officer details: HTTP ${response.status} ${response.statusText}`);
                });
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                const content = `
                    <div class="space-y-3 text-sm">
                        <div>
                            <span class="text-gray-400">Nama:</span>
                            <span class="text-white ml-2">${data.data.name || officer.name}</span>
                        </div>
                        <div>
                            <span class="text-gray-400">NIP:</span>
                            <span class="text-white ml-2">${data.data.nip || '-'}</span>
                        </div>
                        <div>
                            <span class="text-gray-400">Status:</span>
                            <span class="text-white ml-2">${data.data.status || officer.status}</span>
                        </div>
                        <div>
                            <span class="text-gray-400">Baterai:</span>
                            <span class="text-white ml-2">${data.data.battery_level || '-'}%</span>
                        </div>
                        <div>
                            <span class="text-gray-400">Kecepatan:</span>
                            <span class="text-white ml-2">${data.data.speed || '-'} km/h</span>
                        </div>
                        <div>
                            <span class="text-gray-400">Arah:</span>
                            <span class="text-white ml-2">${data.data.heading || '-'}°</span>
                        </div>
                    </div>
                `;
                const officerInfoContent = document.getElementById('officer-info-content');
                const officerInfoModal = document.getElementById('officer-info-modal');
                if (officerInfoContent) {
                    officerInfoContent.innerHTML = content;
                }
                if (officerInfoModal) {
                    officerInfoModal.classList.remove('hidden');
                }
                if (window.lucide) lucide.createIcons();
            }
        })
        .catch(error => {
            console.error('Error loading officer details:', error);
            // Show user-friendly error message
            const officerInfoContent = document.getElementById('officer-info-content');
            if (officerInfoContent) {
                officerInfoContent.innerHTML = `
                    <div class="text-center py-4 text-red-400 text-sm">
                        <i data-lucide="alert-circle" class="w-6 h-6 mx-auto mb-2"></i>
                        <p>${error.message || 'Error loading officer details'}</p>
                    </div>
                `;
                if (window.lucide) lucide.createIcons();
            }
        });
}

function closeOfficerModal() {
    const officerInfoModal = document.getElementById('officer-info-modal');
    if (officerInfoModal) {
        officerInfoModal.classList.add('hidden');
    }
}

function renderComplaints(complaints) {
    if (!map) return;
    
    // Clear existing complaint markers
    complaintMarkers.forEach(marker => map.removeLayer(marker));
    complaintMarkers = [];
    
    // Clear existing emergency radar markers
    Object.values(emergencyRadarMarkers).forEach(marker => map.removeLayer(marker));
    emergencyRadarMarkers = {};

    // Check if complaints layer is visible
    const showComplaints = document.getElementById('show-complaints');
    if (!showComplaints || !showComplaints.checked) return;

    // Render complaint markers
    complaints.forEach(complaint => {
        if (!complaint.latitude || !complaint.longitude) return;

        // Check if this is an emergency call from Flutter (mobile_app with critical/high priority)
        const isEmergencyCall = (complaint.source === 'mobile_app' && 
                                (complaint.priority === 'critical' || complaint.priority === 'high')) ||
                                complaint.category === 'emergency_police';

        if (isEmergencyCall) {
            // Use radar marker for emergency calls
            renderEmergencyRadarMarker(complaint);
        } else {
            // Use regular marker for normal complaints
            // Convert to numbers to ensure they're numeric
            const lat = parseFloat(complaint.latitude);
            const lng = parseFloat(complaint.longitude);
            
            if (isNaN(lat) || isNaN(lng)) {
                console.warn('Invalid latitude/longitude for complaint:', complaint);
                return;
            }
            
            const isCritical = complaint.priority === 'high' || complaint.status === 'pending';
            const icon = L.divIcon({
                className: 'map-marker map-marker--complaint',
                html: `<div class="map-marker map-marker--complaint">
                    <i data-lucide="alert-circle"></i>
                </div>`,
                iconSize: [32, 32],
                iconAnchor: [16, 16]
            });

            const marker = L.marker([lat, lng], { icon })
                .addTo(map)
                .bindPopup(`
                    <div class="text-sm" style="color: #1f2937;">
                        <strong style="color: #111827; font-weight: 600;">${complaint.ticket_number || 'N/A'}</strong><br>
                        <span style="color: #374151;">${formatCategory(complaint.category)}</span><br>
                        <span style="color: #6b7280; font-size: 0.75rem;">${formatStatus(complaint)}</span>
                    </div>
                `)
                .on('click', function() {
                    selectComplaint(complaint);
                    this.openPopup();
                })
                .on('popupopen', function() {
                    if (window.lucide) {
                        lucide.createIcons();
                    }
                });
            
            // Initialize icon after marker is added
            marker.on('add', function() {
                setTimeout(() => {
                    if (window.lucide) {
                        lucide.createIcons();
                    }
                }, 100);
            });
            
            complaintMarkers.push(marker);
        }
    });

    // Initialize icons
    if (window.lucide) {
        lucide.createIcons();
    }
}

// Function to render emergency radar marker
function renderEmergencyRadarMarker(complaint) {
    if (!map || !complaint.latitude || !complaint.longitude) return;
    
    // Convert to numbers to ensure they're numeric
    const lat = parseFloat(complaint.latitude);
    const lng = parseFloat(complaint.longitude);
    
    if (isNaN(lat) || isNaN(lng)) {
        console.warn('Invalid latitude/longitude for emergency complaint:', complaint);
        return;
    }
    
    // Create radar marker HTML
    const radarIcon = L.divIcon({
        className: 'radar-marker-wrapper',
        html: `
            <div class="radar-marker-container">
                <div class="radar-marker-pulse"></div>
                <div class="radar-marker-pulse"></div>
                <div class="radar-marker-pulse"></div>
                <div class="radar-marker-icon">
                    <i data-lucide="radio"></i>
                </div>
            </div>
        `,
        iconSize: [100, 100],
        iconAnchor: [50, 50]
    });

    const marker = L.marker([lat, lng], { 
        icon: radarIcon,
        zIndexOffset: 1000 // Ensure emergency markers are on top
    })
        .addTo(map)
        .bindPopup(`
            <div class="text-sm" style="color: #1f2937;">
                <div class="flex items-center gap-2 mb-2">
                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-800">
                        <i data-lucide="radio" class="w-3 h-3 mr-1"></i>
                        EMERGENCY SOS
                    </span>
                </div>
                <strong style="color: #111827; font-weight: 600;">${complaint.ticket_number || 'N/A'}</strong><br>
                <span style="color: #374151;">${formatCategory(complaint.category)}</span><br>
                <span style="color: #dc2626; font-size: 0.75rem; font-weight: 600;">Priority: ${(complaint.priority || 'critical').toUpperCase()}</span><br>
                <span style="color: #6b7280; font-size: 0.75rem;">${formatStatus(complaint)}</span>
            </div>
        `)
        .on('click', function() {
            selectComplaint(complaint);
            this.openPopup();
            // Note: Auto-zoom disabled to prevent map movement
        })
        .on('popupopen', function() {
            if (window.lucide) {
                lucide.createIcons();
            }
        });
    
    // Initialize icon after marker is added
    marker.on('add', function() {
        setTimeout(() => {
            if (window.lucide) {
                lucide.createIcons();
            }
        }, 100);
    });
    
    // Store marker for emergency calls
    emergencyRadarMarkers[complaint.id] = marker;
    
    // Auto-select emergency call if it's new (without auto-zoom)
    if (complaint.status === 'pending' && complaint.priority === 'critical') {
        setTimeout(() => {
            selectComplaint(complaint);
            // Note: Auto-zoom disabled to prevent map movement
        }, 500);
    }
}

function renderIncomingFeed(complaints) {
    const feedContainer = document.getElementById('incoming-feed');
    if (!feedContainer) return;

    if (complaints.length === 0) {
        feedContainer.innerHTML = '<div class="text-center py-8 text-gray-500 text-sm">Tidak ada insiden aktif</div>';
        return;
    }

    // Sort by priority and time (emergency calls first)
    const sortedComplaints = [...complaints].sort((a, b) => {
        // Emergency calls (critical priority from mobile_app) get highest priority
        const aIsEmergency = (a.source === 'mobile_app' && (a.priority === 'critical' || a.priority === 'high')) || a.category === 'emergency_police';
        const bIsEmergency = (b.source === 'mobile_app' && (b.priority === 'critical' || b.priority === 'high')) || b.category === 'emergency_police';
        
        if (aIsEmergency && !bIsEmergency) return -1;
        if (!aIsEmergency && bIsEmergency) return 1;
        
        const priorityOrder = { 'critical': -1, 'high': 0, 'medium': 1, 'low': 2 };
        return (priorityOrder[a.priority] ?? 2) - (priorityOrder[b.priority] ?? 2);
    });

    feedContainer.innerHTML = sortedComplaints.map((complaint, index) => {
        const isEmergency = (complaint.source === 'mobile_app' && (complaint.priority === 'critical' || complaint.priority === 'high')) || complaint.category === 'emergency_police';
        const isCritical = complaint.priority === 'high' || complaint.priority === 'critical' || complaint.status === 'pending';
        const timeAgo = getTimeAgo(complaint.created_at || complaint.activated_at || new Date());
        const complaintId = complaint.id || index;
        
        return `
            <div class="incident-card ${isEmergency || isCritical ? 'critical' : ''} group p-3.5 rounded-xl border ${isEmergency || isCritical ? 'border-red-500/20' : 'border-white/5'} hover:bg-zinc-800/50 hover:border-white/10 transition-all cursor-pointer" onclick="selectComplaintById(${complaintId})">
                ${isEmergency || isCritical ? '<div class="absolute left-0 top-0 bottom-0 w-1 bg-red-500 rounded-l-xl"></div>' : ''}
                <div class="flex justify-between items-start mb-1.5 ${isEmergency || isCritical ? 'pl-2' : ''}">
                    <span class="text-xs font-semibold ${isEmergency ? 'text-red-400' : isCritical ? 'text-red-400' : 'text-orange-300'} flex items-center gap-1.5">
                        ${isEmergency ? '<i data-lucide="radio" class="w-3.5 h-3.5 animate-spin"></i>' : isCritical ? '<i data-lucide="siren" class="w-3.5 h-3.5"></i>' : '<div class="w-1.5 h-1.5 rounded-full bg-orange-400"></div>'}
                        ${isEmergency ? 'EMERGENCY SOS' : isCritical ? 'SOS ALERT' : 'Voice Call 110'}
                    </span>
                    <span class="text-[10px] font-mono ${isEmergency || isCritical ? 'text-red-400/70' : 'text-zinc-500'}">${timeAgo}</span>
                </div>
                <p class="text-xs text-zinc-100 mb-2 ${isEmergency || isCritical ? 'pl-2' : ''} font-medium">${complaint.ticket_number || 'N/A'} • ${complaint.address || 'Lokasi tidak diketahui'}</p>
                ${isEmergency ? `
                    <div class="flex gap-2 pl-2">
                        <span class="text-[9px] font-mono text-red-400 bg-red-500/10 px-1.5 py-0.5 rounded border border-red-500/20">EMERGENCY</span>
                        <span class="text-[9px] font-mono text-zinc-400 bg-zinc-900/50 px-1.5 py-0.5 rounded border border-white/5">${complaint.is_silent_mode ? 'SILENT MODE' : 'ACTIVE'}</span>
                        <span class="text-[9px] font-mono text-zinc-400 bg-zinc-900/50 px-1.5 py-0.5 rounded border border-white/5">STATUS: ${(complaint.status || 'pending').toUpperCase()}</span>
                    </div>
                ` : isCritical ? `
                    <div class="flex gap-2 pl-2">
                        <span class="text-[9px] font-mono text-zinc-400 bg-zinc-900/50 px-1.5 py-0.5 rounded border border-white/5">PRIORITY: ${(complaint.priority || 'high').toUpperCase()}</span>
                        <span class="text-[9px] font-mono text-zinc-400 bg-zinc-900/50 px-1.5 py-0.5 rounded border border-white/5">STATUS: ${(complaint.status || 'pending').toUpperCase()}</span>
                    </div>
                ` : ''}
            </div>
        `;
    }).join('');

    // Initialize icons
    if (window.lucide) {
        lucide.createIcons();
    }
}

function getTimeAgo(dateString) {
    const date = new Date(dateString);
    const now = new Date();
    const diffMs = now - date;
    const diffMins = Math.floor(diffMs / 60000);
    const diffHours = Math.floor(diffMs / 3600000);
    const diffDays = Math.floor(diffMs / 86400000);

    if (diffMins < 1) return 'Baru saja';
    if (diffMins < 60) return `${diffMins}m ago`;
    if (diffHours < 24) return `${diffHours}h ago`;
    return `${diffDays}d ago`;
}

function formatCategory(category) {
    if (!category) return 'N/A';
    return category
        .split('_')
        .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
        .join(' ');
}

function formatStatus(complaint) {
    const status = (complaint.status || 'pending').charAt(0).toUpperCase() + (complaint.status || 'pending').slice(1).toLowerCase();
    const priority = complaint.priority === 'critical' ? ' • Critical' : '';
    return status + priority;
}

function selectComplaintById(complaintId) {
    const complaint = currentComplaints.find(c => c.id === complaintId);
    if (!complaint) return;
    selectComplaint(complaint);
}

function selectComplaint(complaint) {
    if (!map) return;
    
    selectedComplaint = complaint;
    
    // Update right sidebar
    const infoContainer = document.getElementById('selected-incident-info');
    if (infoContainer) {
        infoContainer.innerHTML = `
            <div class="flex items-center gap-4 mb-5 p-3 rounded-xl bg-zinc-800/30 border border-white/5">
                <div class="w-10 h-10 rounded-full bg-zinc-700 flex items-center justify-center text-zinc-400 border border-zinc-600">
                    <i data-lucide="alert-circle" class="w-5 h-5"></i>
                </div>
                <div>
                    <p class="text-sm font-semibold text-zinc-100">${complaint.ticket_number || 'N/A'}</p>
                    <p class="text-xs text-zinc-500 font-mono">${formatCategory(complaint.category)}</p>
                </div>
            </div>

            <div class="space-y-2">
                <div class="flex justify-between items-center p-2.5 bg-zinc-900/40 rounded-lg text-xs border border-white/5">
                    <span class="text-zinc-500 flex items-center gap-2"><i data-lucide="map-pin" class="w-3 h-3"></i> Lokasi</span>
                    <span class="text-zinc-300 text-right max-w-[60%] truncate">${complaint.address || 'Tidak diketahui'}</span>
                </div>
                <div class="flex justify-between items-center p-2.5 bg-zinc-900/40 rounded-lg text-xs border border-white/5">
                    <span class="text-zinc-500 flex items-center gap-2"><i data-lucide="flag" class="w-3 h-3"></i> Priority</span>
                    <span class="text-${complaint.priority === 'high' ? 'red' : complaint.priority === 'medium' ? 'yellow' : 'blue'}-400 font-mono">${(complaint.priority || 'low').toUpperCase()}</span>
                </div>
                <div class="flex justify-between items-center p-2.5 bg-zinc-900/40 rounded-lg text-xs border border-white/5">
                    <span class="text-zinc-500 flex items-center gap-2"><i data-lucide="activity" class="w-3 h-3"></i> Status</span>
                    <span class="text-zinc-300">${(complaint.status || 'pending').toUpperCase()}</span>
                </div>
            </div>
        `;
        
        if (window.lucide) lucide.createIcons();
    }

    // Show action buttons
    document.getElementById('dispatch-btn')?.classList.remove('hidden');
    document.getElementById('audio-btn')?.classList.remove('hidden');
    document.getElementById('escalate-btn')?.classList.remove('hidden');

    // Show radar effect (without auto-zoom)
    if (complaint.latitude && complaint.longitude) {
        // Convert to numbers to ensure they're numeric
        const lat = parseFloat(complaint.latitude);
        const lng = parseFloat(complaint.longitude);
        
        if (!isNaN(lat) && !isNaN(lng)) {
            // Note: Auto-zoom disabled to prevent map movement
            // map.setView([lat, lng], 15);
            
            // Show radar overlay
            const radarOverlay = document.getElementById('radar-overlay');
            if (radarOverlay) {
                radarOverlay.classList.remove('hidden');
            }

            // Update map overlay info
            const overlayInfo = document.getElementById('map-overlay-info');
            if (overlayInfo) {
                overlayInfo.innerHTML = `
                    <div class="glass-panel px-3 py-2 rounded-lg flex items-center gap-3 shadow-lg">
                        <div class="bg-red-500/10 p-1.5 rounded-md text-red-500 border border-red-500/20">
                            <i data-lucide="map-pin" class="w-3.5 h-3.5"></i>
                        </div>
                        <div>
                            <p class="text-xs font-semibold text-zinc-200 tracking-tight">${complaint.ticket_number || 'Incident'}</p>
                            <p class="text-[10px] text-zinc-500 font-mono">Lat: ${lat.toFixed(4)} • Lon: ${lng.toFixed(4)}</p>
                        </div>
                    </div>
                `;
                if (window.lucide) lucide.createIcons();
            }

            // Load nearby CCTV
            loadNearbyCCTV(lat, lng);
        }
    }
}

function clearSelection() {
    selectedComplaint = null;
    
    // Reset right sidebar
    const infoContainer = document.getElementById('selected-incident-info');
    if (infoContainer) {
        infoContainer.innerHTML = `
            <div class="text-center py-8 text-gray-500 text-sm">
                <i data-lucide="map-pin" class="w-8 h-8 mx-auto mb-2 text-zinc-600"></i>
                <p>Pilih insiden dari peta atau feed</p>
            </div>
        `;
        if (window.lucide) lucide.createIcons();
    }

    // Hide action buttons
    document.getElementById('dispatch-btn')?.classList.add('hidden');
    document.getElementById('audio-btn')?.classList.add('hidden');
    document.getElementById('escalate-btn')?.classList.add('hidden');

    // Hide radar overlay
    const radarOverlay = document.getElementById('radar-overlay');
    if (radarOverlay) {
        radarOverlay.classList.add('hidden');
    }

    // Clear map overlay
    const overlayInfo = document.getElementById('map-overlay-info');
    if (overlayInfo) {
        overlayInfo.innerHTML = '';
    }

    // Clear CCTV feeds
    const cctvFeeds = document.getElementById('cctv-feeds');
    if (cctvFeeds) {
        cctvFeeds.innerHTML = `
            <div class="bg-black/50 border border-white/5 rounded-lg flex items-center justify-center relative overflow-hidden group cursor-pointer">
                <i data-lucide="eye" class="w-5 h-5 text-zinc-700 group-hover:text-zinc-500 transition-colors"></i>
            </div>
            <div class="bg-black/50 border border-white/5 rounded-lg flex items-center justify-center relative overflow-hidden group cursor-pointer">
                <i data-lucide="eye" class="w-5 h-5 text-zinc-700 group-hover:text-zinc-500 transition-colors"></i>
            </div>
        `;
        if (window.lucide) lucide.createIcons();
    }
}

function loadNearbyCCTV(latitude, longitude) {
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
    
    fetch(`/api/cctvs/nearby?latitude=${latitude}&longitude=${longitude}&radius=500`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            ...(csrfToken ? { 'X-CSRF-TOKEN': csrfToken } : {}),
        },
        credentials: 'same-origin',
    })
        .then(response => {
            if (!response.ok) {
                // Try to get error message from response
                if (response.status === 401) {
                    return response.json().then(data => {
                        throw new Error(data.message || 'Unauthorized: Please login again');
                    }).catch(() => {
                        throw new Error('Unauthorized: Please login again');
                    });
                }
                if (response.status === 404) {
                    // 404 is OK for CCTV - just means no CCTV found
                    return { success: true, cctvs: [] };
                }
                // For other errors, try to get message from response
                return response.json().then(data => {
                    throw new Error(data.message || `Error loading CCTV: HTTP ${response.status}`);
                }).catch(() => {
                    // If response is not JSON, just log and continue silently
                    console.warn(`Error loading CCTV: HTTP ${response.status} ${response.statusText}`);
                    return { success: true, cctvs: [] };
                });
            }
            return response.json();
        })
        .then(data => {
            if (data.success && data.cctvs && data.cctvs.length > 0) {
                const cctvFeeds = document.getElementById('cctv-feeds');
                if (cctvFeeds) {
                    const cctvs = data.cctvs.slice(0, 2); // Show max 2 CCTV
                    cctvFeeds.innerHTML = cctvs.map((cctv, index) => `
                        <div class="bg-black/50 border border-white/5 rounded-lg flex items-center justify-center relative overflow-hidden group cursor-pointer">
                            <div class="absolute top-2 left-2 px-1 bg-black/60 rounded text-[8px] font-mono text-white/50">CAM-${index + 1}</div>
                            <i data-lucide="eye" class="w-5 h-5 text-zinc-700 group-hover:text-zinc-500 transition-colors"></i>
                            <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-2">
                                <span class="text-[8px] text-white/70">${cctv.name || 'CCTV'}</span>
                            </div>
                        </div>
                    `).join('');
                    if (window.lucide) lucide.createIcons();
                }
            }
        })
        .catch(error => {
            // Only log if it's not a handled error
            if (error.message && !error.message.includes('HTTP')) {
                console.error('Error loading CCTV:', error);
            }
        });
}

function updateActiveUnitsCount(officers) {
    const countElement = document.getElementById('active-units-count');
    if (countElement) {
        countElement.textContent = officers.length.toLocaleString();
    }
}

function toggleFilters() {
    const panel = document.getElementById('filters-panel');
    if (panel) {
        panel.classList.toggle('hidden');
    }
}

function renderHeatmap(heatmapData) {
    if (!map) return;
    
    // Remove existing heatmap layer
    if (heatmapLayer) {
        map.removeLayer(heatmapLayer);
        heatmapLayer = null;
    }

    // Check if heatmap layer is visible
    const showHeatmap = document.getElementById('show-heatmap');
    if (!showHeatmap || !showHeatmap.checked || !heatmapData || heatmapData.length === 0) {
        return;
    }

    // Create heatmap points array for Leaflet.heat plugin
    // If Leaflet.heat is not available, use circle markers as fallback
    const heatmapPoints = heatmapData.map(point => {
        // Intensity determines the weight (0-1 scale)
        // Count determines the radius
        return [point.lat, point.lng, point.intensity * 100];
    });

    // Try to use Leaflet.heat if available, otherwise use circle markers
    if (typeof L.heatLayer !== 'undefined') {
        heatmapLayer = L.heatLayer(heatmapPoints, {
            radius: 25,
            blur: 15,
            maxZoom: 17,
            gradient: {
                0.0: 'blue',
                0.3: 'cyan',
                0.5: 'lime',
                0.7: 'yellow',
                1.0: 'red'
            }
        }).addTo(map);
    } else {
        // Fallback: Use circle markers with color based on intensity
        const heatmapGroup = L.layerGroup();
        
        heatmapData.forEach(point => {
            const intensity = point.intensity;
            let color = '#3b82f6'; // blue
            if (intensity > 0.7) color = '#dc2626'; // red
            else if (intensity > 0.5) color = '#f59e0b'; // yellow
            else if (intensity > 0.3) color = '#10b981'; // green
            else color = '#3b82f6'; // blue

            const radius = Math.max(50, point.count * 10);
            
            L.circle([point.lat, point.lng], {
                radius: radius,
                color: color,
                fillColor: color,
                fillOpacity: 0.4,
                weight: 2
            })
            .bindPopup(`
                <div class="text-sm">
                    <strong>Insiden: ${point.count}</strong><br>
                    <span>Kategori: ${point.category || 'N/A'}</span><br>
                    <span>Intensitas: ${(intensity * 100).toFixed(1)}%</span>
                </div>
            `)
            .addTo(heatmapGroup);
        });
        
        heatmapLayer = heatmapGroup;
        heatmapLayer.addTo(map);
    }
}

function renderGeoFences(geoFences) {
    if (!map) return;
    
    // Clear existing geo-fence layers
    geoFenceLayers.forEach(layer => map.removeLayer(layer));
    geoFenceLayers = [];

    // Check if geo-fences layer is visible
    const showGeoFences = document.getElementById('show-geofences');
    if (!showGeoFences || !showGeoFences.checked) return;

    // Render geo-fence polygons/circles
    geoFences.forEach(fence => {
        let layer = null;
        
        if (fence.shape === 'circle' && fence.center_latitude && fence.center_longitude) {
            layer = L.circle([fence.center_latitude, fence.center_longitude], {
                radius: fence.radius_meters || 100,
                color: '#3b82f6',
                fillColor: '#3b82f6',
                fillOpacity: 0.2,
                weight: 2
            }).bindPopup(`
                <div class="text-sm">
                    <strong>${fence.name}</strong><br>
                    <span>Tipe: ${fence.type || 'N/A'}</span>
                </div>
            `);
        } else if (fence.shape === 'polygon' && fence.boundary && Array.isArray(fence.boundary)) {
            // Convert boundary to array of [lat, lng] pairs if needed
            const coordinates = fence.boundary.map(coord => {
                if (Array.isArray(coord) && coord.length >= 2) {
                    return [coord[0], coord[1]];
                }
                return null;
            }).filter(coord => coord !== null);

            if (coordinates.length > 0) {
                layer = L.polygon(coordinates, {
                    color: '#3b82f6',
                    fillColor: '#3b82f6',
                    fillOpacity: 0.2,
                    weight: 2
                }).bindPopup(`
                    <div class="text-sm">
                        <strong>${fence.name}</strong><br>
                        <span>Tipe: ${fence.type || 'N/A'}</span>
                    </div>
                `);
            }
        }

        if (layer) {
            layer.addTo(map);
            geoFenceLayers.push(layer);
        }
    });
}

function updateOfficerMarker(event) {
    if (officerMarkers[event.officer_id]) {
        const marker = officerMarkers[event.officer_id];
        marker.setLatLng([event.latitude, event.longitude]);
        
        // Update popup if it's open
        if (marker.isPopupOpen()) {
            marker.setPopupContent(`
                <div class="text-sm">
                    <strong class="text-gray-900">${event.name || 'Petugas'}</strong><br>
                    <span class="text-gray-600">Status: ${event.status || 'N/A'}</span>
                </div>
            `);
        }
    }
}

// Handle dispatch unit
async function handleDispatchUnit(complaint) {
    if (!complaint || !complaint.id) {
        alert('Data insiden tidak valid');
        return;
    }

    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
    const dispatchBtn = document.getElementById('dispatch-btn');
    
    if (dispatchBtn) {
        dispatchBtn.disabled = true;
        dispatchBtn.innerHTML = '<i data-lucide="loader-2" class="w-3.5 h-3.5 animate-spin"></i> Memproses...';
        if (window.lucide) lucide.createIcons();
    }

    try {
        const response = await fetch(`/api/complaints/${complaint.id}/dispatch`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                ...(csrfToken ? { 'X-CSRF-TOKEN': csrfToken } : {}),
            },
            credentials: 'same-origin',
        });

        const data = await response.json();

        if (data.success) {
            alert('Unit berhasil di-dispatch!');
            // Reload map data to show updated status
            loadMapData();
            // Refresh selected complaint info
            if (selectedComplaint && selectedComplaint.id === complaint.id) {
                selectComplaint(complaint);
            }
        } else {
            alert(data.message || 'Gagal melakukan dispatch unit');
        }
    } catch (error) {
        console.error('Error dispatching unit:', error);
        alert('Terjadi kesalahan saat melakukan dispatch unit');
    } finally {
        if (dispatchBtn) {
            dispatchBtn.disabled = false;
            dispatchBtn.innerHTML = '<i data-lucide="radio" class="w-3.5 h-3.5 group-hover:scale-110 transition"></i> Dispatch Unit';
            if (window.lucide) lucide.createIcons();
        }
    }
}

// Handle audio playback
async function handleAudioPlayback(complaint) {
    if (!complaint || !complaint.id) {
        alert('Data insiden tidak valid');
        return;
    }

    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
    const audioBtn = document.getElementById('audio-btn');
    
    if (audioBtn) {
        audioBtn.disabled = true;
        audioBtn.innerHTML = '<i data-lucide="loader-2" class="w-3.5 h-3.5 animate-spin"></i> Memuat...';
        if (window.lucide) lucide.createIcons();
    }

    try {
        const response = await fetch(`/api/complaints/${complaint.id}/audio`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                ...(csrfToken ? { 'X-CSRF-TOKEN': csrfToken } : {}),
            },
            credentials: 'same-origin',
        });

        const data = await response.json();

        if (data.success && data.data && data.data.length > 0) {
            // Show audio player modal
            showAudioPlayerModal(data.data, complaint);
        } else {
            alert('Tidak ada rekaman audio untuk insiden ini');
        }
    } catch (error) {
        console.error('Error loading audio:', error);
        alert('Terjadi kesalahan saat memuat rekaman audio');
    } finally {
        if (audioBtn) {
            audioBtn.disabled = false;
            audioBtn.innerHTML = '<i data-lucide="mic" class="w-3.5 h-3.5"></i> Audio';
            if (window.lucide) lucide.createIcons();
        }
    }
}

// Show audio player modal
function showAudioPlayerModal(recordings, complaint) {
    const modal = document.createElement('div');
    modal.className = 'fixed inset-0 bg-black/70 backdrop-blur-sm z-50 flex items-center justify-center p-4';
    modal.innerHTML = `
        <div class="glass-panel rounded-xl border border-white/10 p-6 max-w-2xl w-full max-h-[80vh] overflow-y-auto">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-zinc-100">Rekaman Audio - ${complaint.ticket_number || 'N/A'}</h3>
                <button onclick="this.closest('.fixed').remove()" class="text-zinc-400 hover:text-zinc-200">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>
            <div class="space-y-3">
                ${recordings.map((recording, index) => `
                    <div class="bg-zinc-900/50 rounded-lg p-4 border border-white/5">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm font-medium text-zinc-300">Rekaman ${index + 1}</span>
                            <span class="text-xs text-zinc-500">${recording.created_at ? new Date(recording.created_at).toLocaleString('id-ID') : 'N/A'}</span>
                        </div>
                        ${recording.file_path ? `
                            <audio controls class="w-full mt-2">
                                <source src="${recording.file_path}" type="audio/mpeg">
                                Browser Anda tidak mendukung pemutaran audio.
                            </audio>
                        ` : '<p class="text-xs text-zinc-500">File audio tidak tersedia</p>'}
                        ${recording.transcription ? `
                            <div class="mt-2 p-2 bg-zinc-800/50 rounded text-xs text-zinc-400">
                                <strong>Transkripsi:</strong> ${recording.transcription}
                            </div>
                        ` : ''}
                    </div>
                `).join('')}
            </div>
        </div>
    `;
    document.body.appendChild(modal);
    if (window.lucide) lucide.createIcons();
    
    // Close on backdrop click
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            modal.remove();
        }
    });
}

// Handle escalate
async function handleEscalate(complaint) {
    if (!complaint || !complaint.id) {
        alert('Data insiden tidak valid');
        return;
    }

    // First, try to get dispatch from complaint data
    let dispatchId = null;
    
    // Check if complaint has dispatches array
    if (complaint.dispatches && Array.isArray(complaint.dispatches) && complaint.dispatches.length > 0) {
        // Get the most recent active dispatch
        const activeDispatch = complaint.dispatches.find(d => 
            ['pending', 'accepted', 'in_progress'].includes(d.status)
        ) || complaint.dispatches[0];
        dispatchId = activeDispatch.id;
    }
    
    // If no dispatch found, try to fetch complaint details to get dispatches
    if (!dispatchId) {
        try {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            const response = await fetch(`/api/complaints/${complaint.id}`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    ...(csrfToken ? { 'X-CSRF-TOKEN': csrfToken } : {}),
                },
                credentials: 'same-origin',
            });
            
            if (response.ok) {
                const data = await response.json();
                if (data.complaint && data.complaint.dispatches && data.complaint.dispatches.length > 0) {
                    const activeDispatch = data.complaint.dispatches.find(d => 
                        ['pending', 'accepted', 'in_progress'].includes(d.status)
                    ) || data.complaint.dispatches[0];
                    dispatchId = activeDispatch.id;
                }
            }
        } catch (error) {
            console.error('Error fetching complaint details:', error);
        }
    }
    
    if (!dispatchId) {
        alert('Insiden ini belum memiliki dispatch. Silakan dispatch unit terlebih dahulu.');
        return;
    }

    const reason = prompt('Masukkan alasan eskalasi:');
    if (!reason || reason.trim() === '') {
        return;
    }

    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
    const escalateBtn = document.getElementById('escalate-btn');
    
    if (escalateBtn) {
        escalateBtn.disabled = true;
        escalateBtn.innerHTML = '<i data-lucide="loader-2" class="w-3.5 h-3.5 animate-spin"></i> Memproses...';
        if (window.lucide) lucide.createIcons();
    }

    try {
        const response = await fetch(`/api/dispatches/${dispatchId}/escalate`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                ...(csrfToken ? { 'X-CSRF-TOKEN': csrfToken } : {}),
            },
            credentials: 'same-origin',
            body: JSON.stringify({ reason: reason.trim() }),
        });

        const data = await response.json();

        if (data.success) {
            alert('Eskalasi berhasil dilakukan!');
            // Reload map data
            loadMapData();
            // Refresh selected complaint info
            if (selectedComplaint && selectedComplaint.id === complaint.id) {
                selectComplaint(complaint);
            }
        } else {
            alert(data.message || 'Gagal melakukan eskalasi');
        }
    } catch (error) {
        console.error('Error escalating:', error);
        alert('Terjadi kesalahan saat melakukan eskalasi');
    } finally {
        if (escalateBtn) {
            escalateBtn.disabled = false;
            escalateBtn.innerHTML = '<i data-lucide="shield-alert" class="w-3.5 h-3.5"></i> Escalate';
            if (window.lucide) lucide.createIcons();
        }
    }
}

// Make functions globally available
window.selectComplaint = selectComplaint;
window.selectComplaintById = selectComplaintById;
window.clearSelection = clearSelection;
window.toggleFilters = toggleFilters;
window.showOfficerInfo = showOfficerInfo;
window.closeOfficerModal = closeOfficerModal;
window.handleDispatchUnit = handleDispatchUnit;
window.handleAudioPlayback = handleAudioPlayback;
window.handleEscalate = handleEscalate;

// Initialize icons after page load
if (window.lucide) {
    lucide.createIcons();
}
</script>
@endpush