<?php $__env->startSection('title', 'Pusat Komando Nasional'); ?>

<?php $__env->startSection('content'); ?>
<?php $__env->startPush('styles'); ?>
<style>
    .map-icon i {
        width: 16px;
        height: 16px;
        display: inline-block;
    }
    .map-marker {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #0b0e14;
        border-radius: 999px;
        box-shadow: 0 0 15px rgba(0,0,0,0.35);
    }
    .map-marker--critical {
        background-color: #ef4444;
        color: #fff;
        width: 40px;
        height: 40px;
    }
    .map-marker--warning {
        background-color: #f59e0b;
        color: #111827;
        width: 34px;
        height: 34px;
    }
    .map-marker--info {
        background-color: #2563eb;
        color: #fff;
        width: 34px;
        height: 34px;
    }
</style>
<?php $__env->stopPush(); ?>
<?php
    $stats = $stats ?? [];
    if (empty($stats)) {
        $stats = [
            'total_complaints' => 1287,
            'processing_complaints' => 24,
            'active_officers' => 342,
            'average_response' => '3m 47s',
        ];
    }

    $recentComplaints = $recentComplaints ?? collect();
    if ($recentComplaints->isEmpty()) {
        $recentComplaints = collect([
            (object)[
                'ticket_number' => 'ADU-20250101-XF91',
                'location' => (object)['address' => 'Jl. MH Thamrin, Jakarta Pusat'],
                'category' => 'emergency_police',
                'dispatches' => collect([(object)['unit_type' => 'Patroli Sabhara']]),
                'status' => 'processing',
            ],
            (object)[
                'ticket_number' => 'ADU-20250101-YZ12',
                'location' => (object)['address' => 'Jl. Raya Bogor KM 25'],
                'category' => 'emergency_fire',
                'dispatches' => collect([(object)['unit_type' => 'Damkar']]),
                'status' => 'dispatched',
            ],
            (object)[
                'ticket_number' => 'ADU-20250101-ZP77',
                'location' => (object)['address' => 'Jl. Sudirman, Bandung'],
                'category' => 'emergency_medical',
                'dispatches' => collect([(object)['unit_type' => 'Ambulans PSC']]),
                'status' => 'pending',
            ],
        ]);
    }

    $heatmapData = $heatmapData ?? [
        [
            'lat' => -6.2088,
            'lng' => 106.8456,
            'count' => 32,
            'category' => 'emergency_police',
            'icon' => 'flame',
            'label' => 'Kebakaran Gedung',
            'description' => 'Jl. Sudirman No. 45 (Zone B2)',
            'status' => 'Critical • ETA 2m',
            'color' => 'red',
        ],
        [
            'lat' => -6.1380,
            'lng' => 106.8317,
            'count' => 18,
            'category' => 'panic_button',
            'icon' => 'bell-ring',
            'label' => 'Panic Button Bank',
            'description' => 'Bank BCA Mangga Dua',
            'status' => 'Verifikasi CCTV',
            'color' => 'amber',
        ],
        [
            'lat' => -6.2000,
            'lng' => 106.9167,
            'count' => 12,
            'category' => 'patrol_unit',
            'icon' => 'car',
            'label' => 'Unit 801',
            'description' => 'Patroli Sabhara - Rute Thamrin',
            'status' => 'On Scene',
            'color' => 'blue',
        ],
    ];

    $incomingAlerts = [
        [
            'label' => 'Call 110 • Darurat',
            'type' => 'phone',
            'icon' => 'phone-call',
            'icon_color' => 'text-red-400',
            'level' => 'critical',
            'desc' => 'Suara teriakan, indikasi KDRT atau penganiayaan.',
            'location' => 'Tanah Abang, Jakpus',
            'time' => 'Baru saja',
        ],
        [
            'label' => 'Panic Button • Bank',
            'type' => 'panic',
            'icon' => 'alert-triangle',
            'icon_color' => 'text-amber-400',
            'level' => 'warning',
            'desc' => 'BCA KCP Mangga Dua. Tombol Teller 2.',
            'location' => 'Mangga Dua, Jakut',
            'time' => '2m lalu',
        ],
        [
            'label' => 'WhatsApp Official',
            'type' => 'chat',
            'icon' => 'message-square',
            'icon_color' => 'text-green-400',
            'level' => 'info',
            'desc' => 'Laporan kemacetan akibat pohon tumbang.',
            'location' => 'Jl. Ahmad Yani',
            'time' => '5m lalu',
        ],
    ];
?>

<!-- Header -->
<div class="flex flex-wrap gap-4 justify-between items-center">
    <div>
        <p class="text-xs text-gray-500">Nasional • Polda → Polres → Polsek</p>
        <h2 class="text-3xl font-bold tracking-tight text-white">Pusat Komando Nasional</h2>
    </div>
    <div class="flex gap-2 text-xs text-gray-400">
        <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span> Sistem aktif</span>
        <span>•</span>
        <span>Level akses: <?php echo e(auth()->check() ? ucfirst(auth()->user()->role) : 'Publik'); ?></span>
    </div>
</div>

<!-- Stats -->
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
    <div class="bg-surface border border-border rounded-xl p-4">
        <div class="flex justify-between items-center mb-2">
            <div class="p-2 bg-blue-500/10 text-blue-400 rounded-lg"><i data-lucide="phone-call" class="w-4 h-4"></i></div>
            <span class="text-[10px] text-green-400">+12%</span>
        </div>
        <p class="text-3xl font-semibold text-white"><?php echo e(number_format($stats['total_complaints'] ?? 0)); ?></p>
        <p class="text-xs text-gray-500 mt-1">Total aduan (24 jam)</p>
    </div>
    <div class="bg-surface border border-border rounded-xl p-4">
        <div class="flex justify-between items-center mb-2">
            <div class="p-2 bg-red-500/10 text-red-400 rounded-lg"><i data-lucide="siren" class="w-4 h-4"></i></div>
            <span class="text-[10px] text-red-400 animate-pulse">Live</span>
        </div>
        <p class="text-3xl font-semibold text-white"><?php echo e($stats['processing_complaints'] ?? 0); ?></p>
        <p class="text-xs text-gray-500 mt-1">Insiden kritis aktif</p>
    </div>
    <div class="bg-surface border border-border rounded-xl p-4">
        <div class="flex justify-between items-center mb-2">
            <div class="p-2 bg-indigo-500/10 text-indigo-400 rounded-lg"><i data-lucide="shield" class="w-4 h-4"></i></div>
        </div>
        <p class="text-3xl font-semibold text-white"><?php echo e($stats['active_officers'] ?? 0); ?></p>
        <p class="text-xs text-gray-500 mt-1">Personil on-duty</p>
    </div>
    <div class="bg-surface border border-border rounded-xl p-4">
        <div class="flex justify-between items-center mb-2">
            <div class="p-2 bg-amber-500/10 text-amber-400 rounded-lg"><i data-lucide="clock" class="w-4 h-4"></i></div>
        </div>
        <p class="text-3xl font-semibold text-white"><?php echo e($stats['average_response'] ?? '4m 12s'); ?></p>
        <p class="text-xs text-gray-500 mt-1">Rata-rata respon</p>
    </div>
</div>

<!-- Main grid -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 h-full">
    <!-- Map -->
    <div class="lg:col-span-2 bg-surface border border-border rounded-2xl relative overflow-hidden">
        <div class="absolute top-4 left-4 glass-panel px-3 py-2 rounded-lg flex items-center gap-3 text-xs">
            <span class="flex items-center gap-1 text-white"><span class="w-2 h-2 rounded-full bg-red-500 animate-ping"></span> Live tracking</span>
            <span class="text-gray-500">Radius nasional</span>
        </div>
        <div id="map" class="w-full h-[420px]"></div>
    </div>

    <!-- Alerts -->
    <div class="flex flex-col gap-4">
        <div class="bg-surface border border-border rounded-2xl flex-1 overflow-hidden">
            <div class="px-4 py-3 border-b border-border flex justify-between">
                <h3 class="text-xs font-semibold text-gray-300 uppercase tracking-wide">Aduan Real-time</h3>
                <span class="text-[10px] text-blue-400 bg-blue-500/10 px-2 py-0.5 rounded-full border border-blue-500/20">Auto tracking aktif</span>
            </div>
            <div class="p-3 space-y-2 max-h-[280px] overflow-y-auto">
                <?php $__currentLoopData = $incomingAlerts; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $alert): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <button type="button"
                            class="js-alert-card w-full text-left p-3 rounded-xl border border-white/5 bg-white/5 hover:border-<?php echo e($alert['level'] === 'critical' ? 'red' : ($alert['level'] === 'warning' ? 'amber' : 'blue')); ?>-500/30 transition focus:outline-none focus:ring-2 focus:ring-<?php echo e($alert['level'] === 'critical' ? 'red' : ($alert['level'] === 'warning' ? 'amber' : 'blue')); ?>-500/40"
                            data-alert="<?php echo e($alert['label']); ?>"
                            data-location="<?php echo e($alert['location']); ?>"
                            data-type="<?php echo e($alert['type']); ?>">
                        <div class="flex justify-between items-start text-xs mb-1">
                            <div class="flex items-center gap-2 text-white">
                                <span class="<?php echo e($alert['icon_color']); ?>">
                                    <i data-lucide="<?php echo e($alert['icon']); ?>" class="w-3.5 h-3.5"></i>
                                </span>
                                <span><?php echo e($alert['label']); ?></span>
                            </div>
                            <span class="text-gray-500"><?php echo e($alert['time']); ?></span>
                        </div>
                        <p class="text-xs text-gray-400"><?php echo e($alert['desc']); ?></p>
                        <p class="text-[10px] text-indigo-400 mt-1"><?php echo e($alert['location']); ?></p>
                    </button>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </div>

        <div class="bg-surface border border-border rounded-2xl p-4">
            <div class="flex justify-between items-center mb-3">
                <h3 class="text-xs font-semibold text-gray-300 uppercase tracking-wide">CCTV Gateway</h3>
                <span class="text-[10px] text-red-400 flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-red-500 animate-pulse"></span> REC</span>
            </div>
            <div class="bg-black rounded-xl h-40 flex items-center justify-center text-gray-500 text-xs border border-gray-800">
                Live feed akan tampil di sini (CAM-042)
            </div>
        </div>
    </div>
</div>

<!-- Dispatch table -->
<div class="bg-surface border border-border rounded-2xl overflow-hidden">
    <div class="px-5 py-4 border-b border-border flex justify-between items-center">
        <h3 class="text-sm font-semibold text-white">Status Dispatch & Koordinasi</h3>
        <span class="text-xs text-indigo-400 opacity-60 cursor-not-allowed">Lihat semua →</span>
    </div>
    <div class="overflow-x-auto">
        <table class="min-w-full text-left text-xs">
            <thead class="bg-white/5 text-gray-400 uppercase">
                <tr>
                    <th class="px-5 py-3 font-medium">Ticket</th>
                    <th class="px-5 py-3 font-medium">Lokasi</th>
                    <th class="px-5 py-3 font-medium">Kategori</th>
                    <th class="px-5 py-3 font-medium">Unit</th>
                    <th class="px-5 py-3 font-medium">Status</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-white/5 text-gray-300">
                <?php $__currentLoopData = $recentComplaints->take(3); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $complaint): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <tr class="hover:bg-white/5 transition">
                        <td class="px-5 py-3 font-mono text-gray-400 text-[11px]"><?php echo e($complaint->ticket_number); ?></td>
                        <td class="px-5 py-3"><?php echo e($complaint->location->address ?? '-'); ?></td>
                        <td class="px-5 py-3 flex items-center gap-2">
                            <span class="w-2 h-2 rounded-full bg-red-500"></span>
                            <?php echo e(ucfirst(str_replace('_', ' ', $complaint->category))); ?>

                        </td>
                        <td class="px-5 py-3 text-gray-400"><?php echo e($complaint->dispatches->first()->unit_type ?? '-'); ?></td>
                        <td class="px-5 py-3">
                            <span class="px-2 py-1 rounded-full text-[10px] border border-white/10 bg-white/5">
                                <?php echo e(ucfirst($complaint->status)); ?>

                            </span>
                        </td>
                    </tr>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </tbody>
        </table>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
    if (document.getElementById('map')) {
        var map = L.map('map', {zoomControl: false}).setView([-6.2000, 106.8167], 11);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; OpenStreetMap'}).addTo(map);
        var iconMap = {
            'flame': L.divIcon({
                className: 'map-icon map-icon--critical',
                html: '<div class="map-marker map-marker--critical"><i data-lucide="flame"></i></div>',
                iconSize: [36, 36],
                iconAnchor: [18, 18]
            }),
            'bell-ring': L.divIcon({
                className: 'map-icon map-icon--warning',
                html: '<div class="map-marker map-marker--warning"><i data-lucide="bell-ring"></i></div>',
                iconSize: [32, 32],
                iconAnchor: [16, 16]
            }),
            'car': L.divIcon({
                className: 'map-icon map-icon--info',
                html: '<div class="map-marker map-marker--info"><i data-lucide="car"></i></div>',
                iconSize: [32, 32],
                iconAnchor: [16, 16]
            })
        };
        <?php $__currentLoopData = $heatmapData ?? []; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $point): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            var iconKey = '<?php echo e($point['icon']); ?>';
            var marker = L.marker([<?php echo e($point['lat']); ?>, <?php echo e($point['lng']); ?>], {
                icon: iconMap[iconKey] || iconMap['car']
            }).addTo(map).bindPopup(`
                <div class="space-y-1">
                    <p class="font-semibold text-sm text-white"><?php echo e($point['label']); ?></p>
                    <p class="text-xs text-gray-400"><?php echo e($point['description']); ?></p>
                    <span class="inline-flex items-center text-[10px] px-2 py-1 rounded-full bg-white/5 border border-white/10 text-gray-300"><?php echo e($point['status']); ?></span>
                </div>
            `);
            marker.on('popupopen', function () {
                if (window.lucide) {
                    lucide.createIcons();
                }
            });
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

        if (window.lucide) {
            lucide.createIcons();
        }
    }

    document.querySelectorAll('.js-alert-card').forEach(function(card) {
        card.addEventListener('click', function () {
            const label = this.dataset.alert;
            const location = this.dataset.location;
            alert(`${label}\nLokasi: ${location}`);
        });
    });
</script>
<?php $__env->stopPush(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\callcenter\resources\views/dashboard.blade.php ENDPATH**/ ?>