<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portal Monitoring Sensus Ekonomi 2026</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');
        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
        }
        .bg-login-gradient {
            background: radial-gradient(circle at 80% 20%, #fffbf5 0%, #f7ebd9 100%);
        }
        /* Custom styling untuk marker angka (cluster) agar presisi sesuai mockup */
        .custom-cluster-blue {
            background: #2563eb;
            color: white;
            font-weight: bold;
            font-size: 11px;
            border: 2px solid white;
            border-radius: 50%;
            text-align: center;
            line-height: 24px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        .custom-cluster-orange {
            background: #ea580c;
            color: white;
            font-weight: bold;
            font-size: 11px;
            border: 2px solid white;
            border-radius: 50%;
            text-align: center;
            line-height: 24px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        /* Override style kustom khusus filter dropdown di samping peta */
        .filter-select-box {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid #d1d5db;
            border-radius: 0.375rem;
            background-color: #fff;
            font-size: 0.875rem;
            color: #374151;
            outline: none;
            transition: border-color 0.2s;
        }
        .filter-select-box:focus {
            border-color: #2563eb;
        }
        .filter-select-box:disabled {
            background-color: #f3f4f6;
            color: #9ca3af;
            cursor: not-allowed;
        }
    </style>
</head>
<body class="bg-gray-50 flex h-screen overflow-hidden">

    <aside class="w-64 bg-slate-900 text-slate-300 flex flex-col justify-between hidden md:flex shrink-0">
        <div>
            <div class="p-5 flex items-center gap-3 border-b border-slate-800">
                <div class="bg-blue-600 p-2 rounded-lg text-white">
                    <i class="fa-solid fa-chart-line text-lg"></i>
                </div>
                <div>
                    <h1 class="text-white font-bold text-sm tracking-wide">SE2026 MONITOR</h1>
                    <p class="text-xs text-slate-500">BPS Kota Samarinda</p>
                </div>
            </div>

            <nav class="p-4 space-y-1">
                <a href="#" class="flex items-center gap-3 px-4 py-3 bg-slate-800 text-white rounded-lg font-medium transition-all text-sm">
                    <i class="fa-solid fa-house text-blue-500"></i> Dashboard Utama
                </a>
                <a href="#" class="flex items-center gap-3 px-4 py-3 hover:bg-slate-800 hover:text-white rounded-lg font-medium transition-all text-sm text-slate-400">
                    <i class="fa-solid fa-map-location-dot"></i> Peta Wilayah Kerja
                </a>
                <a href="#" class="flex items-center gap-3 px-4 py-3 hover:bg-slate-800 hover:text-white rounded-lg font-medium transition-all text-sm text-slate-400">
                    <i class="fa-solid fa-users-viewfinder"></i> Manajemen Petugas
                </a>
                <a href="#" class="flex items-center gap-3 px-4 py-3 hover:bg-slate-800 hover:text-white rounded-lg font-medium transition-all text-sm text-slate-400">
                    <i class="fa-solid fa-file-waveform"></i> Laporan Progres
                </a>
            </nav>
        </div>

        <div class="p-4 border-t border-slate-800 bg-slate-950/50 flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="w-9 h-9 bg-slate-700 rounded-full flex items-center justify-center text-white font-semibold text-sm">
                    AD
                </div>
                <div>
                    <h4 class="text-white font-medium text-xs">Admin BPS</h4>
                    <p class="text-[10px] text-slate-500">Super Administrator</p>
                </div>
            </div>
            <a href="#" class="text-slate-500 hover:text-rose-400 p-2 rounded transition-all">
                <i class="fa-solid fa-arrow-right-from-bracket"></i>
            </a>
        </div>
    </aside>

    <main class="flex-1 flex flex-col min-w-0 overflow-y-auto">
        <header class="h-16 bg-white border-b border-gray-200 px-6 flex items-center justify-between shrink-0">
            <div class="flex items-center gap-4">
                <button class="md:hidden text-gray-600 hover:text-gray-900">
                    <i class="fa-solid fa-bars text-xl"></i>
                </button>
                <h2 class="text-lg font-bold text-gray-800">Dashboard Monitoring Wilayah SLS</h2>
            </div>
            <div class="flex items-center gap-4">
                <span class="text-xs bg-emerald-50 text-emerald-700 px-2.5 py-1 rounded-full font-medium flex items-center gap-1.5 border border-emerald-200">
                    <span class="w-1.5 h-1.5 bg-emerald-500 rounded-full animate-pulse"></span> Server Terhubung
                </span>
                <div class="h-4 w-px bg-gray-200"></div>
                <div class="text-sm text-gray-500 font-medium" id="current-date">Rabu, 24 Juni 2026</div>
            </div>
        </header>

        <div class="p-6 space-y-6">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <div class="bg-white p-5 rounded-xl border border-gray-200 shadow-sm flex items-center justify-between">
                    <div>
                        <p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Total SLS Terdata</p>
                        <h3 class="text-2xl font-bold text-gray-800 mt-1">2,481</h3>
                        <p class="text-xs text-emerald-600 font-medium mt-1"><i class="fa-solid fa-arrow-up"></i> +12 wilayah baru</p>
                    </div>
                    <div class="bg-blue-50 p-3 rounded-xl text-blue-600"><i class="fa-solid fa-layer-group text-xl"></i></div>
                </div>
                <div class="bg-white p-5 rounded-xl border border-gray-200 shadow-sm flex items-center justify-between">
                    <div>
                        <p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Progres Selesai</p>
                        <h3 class="text-2xl font-bold text-gray-800 mt-1">64.2%</h3>
                        <p class="text-xs text-gray-500 font-medium mt-1">1,593 / 2,481 SLS</p>
                    </div>
                    <div class="bg-emerald-50 p-3 rounded-xl text-emerald-600"><i class="fa-solid fa-circle-check text-xl"></i></div>
                </div>
                <div class="bg-white p-5 rounded-xl border border-gray-200 shadow-sm flex items-center justify-between">
                    <div>
                        <p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Sedang Berjalan</p>
                        <h3 class="text-2xl font-bold text-gray-800 mt-1">732</h3>
                        <p class="text-xs text-amber-600 font-medium mt-1"><i class="fa-solid fa-spinner animate-spin"></i> Lapangan aktif</p>
                    </div>
                    <div class="bg-amber-50 p-3 rounded-xl text-amber-600"><i class="fa-solid fa-trowel-bricks text-xl"></i></div>
                </div>
                <div class="bg-white p-5 rounded-xl border border-gray-200 shadow-sm flex items-center justify-between">
                    <div>
                        <p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Belum Tersentuh</p>
                        <h3 class="text-2xl font-bold text-gray-800 mt-1">156</h3>
                        <p class="text-xs text-rose-600 font-medium mt-1">Perlu alokasi petugas</p>
                    </div>
                    <div class="bg-rose-50 p-3 rounded-xl text-rose-600"><i class="fa-solid fa-triangle-exclamation text-xl"></i></div>
                </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
                <div class="lg:col-span-3 bg-white p-4 rounded-xl border border-gray-200 shadow-sm flex flex-col">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center gap-2">
                            <i class="fa-solid fa-earth-southeast text-blue-600"></i>
                            <h3 class="font-bold text-gray-800">Spasial Pemetaan Geografis</h3>
                        </div>
                        <div class="flex items-center gap-2 text-xs text-gray-500">
                            <span class="w-3 h-3 border-2 border-red-500 rounded-sm inline-block"></span> Batas SLS Merah Sedang
                        </div>
                    </div>
                    <div id="leafletMap" class="w-100 rounded-lg border border-gray-200" style="height: 520px; z-index: 1;"></div>
                </div>

                <div class="bg-white p-5 rounded-xl border border-gray-200 shadow-sm flex flex-col justify-between">
                    <div>
                        <div class="flex items-center gap-2 border-b border-gray-100 pb-3 mb-4">
                            <i class="fa-solid fa-filter text-amber-500"></i>
                            <h3 class="font-bold text-gray-800 text-sm">Filter Hierarki Wilayah</h3>
                        </div>

                        <div class="space-y-4">
                            <div>
                                <label class="block text-xs font-bold text-gray-500 mb-1.5 uppercase tracking-wider">Provinsi</label>
                                <select id="filter-prov" class="filter-select-box">
                                    <option value="">-- Semua Provinsi --</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-xs font-bold text-gray-500 mb-1.5 uppercase tracking-wider">Kabupaten / Kota</label>
                                <select id="filter-kab" class="filter-select-box" disabled>
                                    <option value="">-- Semua Kab/Kota --</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-xs font-bold text-gray-500 mb-1.5 uppercase tracking-wider">Kecamatan</label>
                                <select id="filter-kec" class="filter-select-box" disabled>
                                    <option value="">-- Semua Kecamatan --</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-xs font-bold text-gray-500 mb-1.5 uppercase tracking-wider">Desa / Kelurahan</label>
                                <select id="filter-desa" class="filter-select-box" disabled>
                                    <option value="">-- Semua Desa/Kel --</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-xs font-bold text-gray-500 mb-1.5 uppercase tracking-wider">SLS / RT</label>
                                <select id="filter-sls" class="filter-select-box" disabled>
                                    <option value="">-- Semua SLS --</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-xs font-bold text-gray-500 mb-1.5 uppercase tracking-wider">Kode Sub SLS</label>
                                <select id="filter-subsls" class="filter-select-box" disabled>
                                    <option value="">-- Semua Sub SLS --</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="mt-6 border-t border-gray-100 pt-4">
                        <button type="button" id="btn-reset-filter" class="w-full py-2.5 bg-rose-600 hover:bg-rose-700 text-white rounded-lg font-bold text-xs shadow-sm transition-all flex items-center justify-center gap-2">
                            <i class="fa-solid fa-arrow-rotate-left"></i> Reset Filter Wilayah
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    
    <script>
        // Global variables
        let map;
        let geojsonLayer;
        let originalGeojsonData = null;

        // Inisialisasi Peta & Layer Pendukung setelah DOM siap
        document.addEventListener("DOMContentLoaded", function() {
            
            // 1. Inisialisasi Peta Dasar (Base Maps)
            const osmMap = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '&copy; OpenStreetMap'
            });

            const satelliteMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
                maxZoom: 19,
                attribution: 'Esri'
            });

            const darkMap = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
                maxZoom: 20,
                attribution: 'CARTO'
            });

            // Memusatkan koordinat di pusat Kota Samarinda
            map = L.map('leafletMap', {
                center: [-0.4948, 117.1436],
                zoom: 12,
                layers: [osmMap] // Default tampilan awal peta jalan terang
            });

            // Kontrol Pilihan Peta Dasar (Diletakkan di Pojok Kiri Bawah agar tidak menutupi panel kanan)
            const baseMaps = {
                "Tampilan Jalan": osmMap,
                "Tampilan Satelit": satelliteMap,
                "Tampilan Gelap": darkMap
            };
            L.control.layers(baseMaps, null, { position: 'bottomleft', collapsed: false }).addTo(map);

            // 2. Tambahkan Data Marker Kluster Bawaan Berdasarkan Mock-up Visual Anda
            const markersData = [
                { coords: [-0.4920, 117.1350], count: 45, colorClass: 'custom-cluster-blue' },
                { coords: [-0.4710, 117.1650], count: 21, colorClass: 'custom-cluster-orange' },
                { coords: [-0.5180, 117.1560], count: 38, colorClass: 'custom-cluster-blue' },
                { coords: [-0.5520, 117.1620], count: 2,  colorClass: 'custom-cluster-orange' }
            ];

            markersData.forEach(item => {
                let customIcon = L.divIcon({
                    html: `<div>${item.count}</div>`,
                    className: item.colorClass,
                    iconSize: [24, 24],
                    iconAnchor: [12, 12]
                });
                L.marker(item.coords, { icon: customIcon }).addTo(map);
            });

            // 3. Muat file Spasial GeoJSON Batas SLS
            fetch('./js/batas_sls_samarinda.geojson')
                .then(response => {
                    if (!response.ok) throw new Error('Gagal membaca database spasial.');
                    return response.json();
                })
                .then(data => {
                    originalGeojsonData = data; 
                    renderGeoJson(data);
                    populateDropdowns();
                })
                .catch(error => {
                    console.error('Error Spasial:', error);
                });
        });

        // 4. Pengaturan Tampilan Garis Batas Wilayah Poligon (Merah Sedang Transparan)
        function styleFeature(feature) {
            return {
                fillColor: 'transparent', 
                weight: 1.5,              // Ukuran ketebalan sedang
                opacity: 0.65,            // Kepadatan warna merah sedang
                color: '#e74c3c',         // Merah Alizarin yang elegan di mata
                dashArray: '',
                fillOpacity: 0            
            };
        }

        // 5. Setup Jendela Informasi (Pop-up) saat wilayah di klik
        function onEachFeature(feature, layer) {
            if (feature.properties) {
                const props = feature.properties;
                const popupContent = `
                    <div style="font-family: sans-serif; font-size:11.5px; min-width:160px;">
                        <strong style="font-size:13px; color:#1e293b;">${props.nmsls || 'Tanpa Nama'}</strong><br>
                        <hr style="margin:6px 0; border:0; border-top:1px solid #e2e8f0;">
                        <b>Desa/Kel:</b> ${props.nmdesa || '-'}<br>
                        <b>Kecamatan:</b> ${props.nmkec || '-'}<br>
                        <b>ID SLS:</b> ${props.idsls || '-'}<br>
                        <b>Kode Sub SLS:</b> ${props.kdsubsls || '-'}<br>
                        <b>Luas Wilayah:</b> ${props.luas ? parseFloat(props.luas).toFixed(2) + ' Ha' : '-'}
                    </div>
                `;
                layer.bindPopup(popupContent);
            }
            
            layer.on({
                mouseover: function (e) {
                    e.target.setStyle({ weight: 2.5, color: '#c0392b', fillColor: '#e74c3c', fillOpacity: 0.15 });
                },
                mouseout: function (e) {
                    if(geojsonLayer) geojsonLayer.resetStyle(e.target);
                }
            });
        }

        function renderGeoJson(data) {
            if (geojsonLayer) {
                map.removeLayer(geojsonLayer);
            }
            
            geojsonLayer = L.geoJSON(data, {
                style: styleFeature,
                onEachFeature: onEachFeature
            }).addTo(map);
        }

        // 6. Logika Relasi Dropdown Berjenjang Komplet
        function populateDropdowns() {
            const provSelect = document.getElementById('filter-prov');
            const kabSelect = document.getElementById('filter-kab');
            const kecSelect = document.getElementById('filter-kec');
            const desaSelect = document.getElementById('filter-desa');
            const slsSelect = document.getElementById('filter-sls');
            const subslsSelect = document.getElementById('filter-subsls');
            const resetBtn = document.getElementById('btn-reset-filter');

            if (!provSelect) return;

            function loadInitialProvinces() {
                provSelect.innerHTML = '<option value="">-- Semua Provinsi --</option>';
                const provinces = [...new Set(originalGeojsonData.features.map(f => f.properties.nmprov).filter(Boolean))].sort();
                provinces.forEach(prov => provSelect.options.add(new Option(prov, prov)));
            }

            loadInitialProvinces();

            provSelect.addEventListener('change', function() {
                resetSelect(kabSelect, '-- Semua Kab/Kota --');
                resetSelect(kecSelect, '-- Semua Kecamatan --');
                resetSelect(desaSelect, '-- Semua Desa/Kel --');
                resetSelect(slsSelect, '-- Semua SLS --');
                resetSelect(subslsSelect, '-- Semua Sub SLS --');

                if (this.value) {
                    const filtered = originalGeojsonData.features.filter(f => f.properties.nmprov === this.value);
                    const kabs = [...new Set(filtered.map(f => f.properties.nmkab).filter(Boolean))].sort();
                    kabs.forEach(kab => kabSelect.options.add(new Option(kab, kab)));
                    kabSelect.disabled = false;
                }
                applyFilter();
            });

            kabSelect.addEventListener('change', function() {
                resetSelect(kecSelect, '-- Semua Kecamatan --');
                resetSelect(desaSelect, '-- Semua Desa/Kel --');
                resetSelect(slsSelect, '-- Semua SLS --');
                resetSelect(subslsSelect, '-- Semua Sub SLS --');

                if (this.value) {
                    const filtered = originalGeojsonData.features.filter(f => f.properties.nmprov === provSelect.value && f.properties.nmkab === this.value);
                    const kecs = [...new Set(filtered.map(f => f.properties.nmkec).filter(Boolean))].sort();
                    kecs.forEach(kec => kecSelect.options.add(new Option(kec, kec)));
                    kecSelect.disabled = false;
                }
                applyFilter();
            });

            kecSelect.addEventListener('change', function() {
                resetSelect(desaSelect, '-- Semua Desa/Kel --');
                resetSelect(slsSelect, '-- Semua SLS --');
                resetSelect(subslsSelect, '-- Semua Sub SLS --');

                if (this.value) {
                    const filtered = originalGeojsonData.features.filter(f => 
                        f.properties.nmprov === provSelect.value && 
                        f.properties.nmkab === kabSelect.value && 
                        f.properties.nmkec === this.value
                    );
                    const desas = [...new Set(filtered.map(f => f.properties.nmdesa).filter(Boolean))].sort();
                    desas.forEach(desa => desaSelect.options.add(new Option(desa, desa)));
                    desaSelect.disabled = false;
                }
                applyFilter();
            });

            desaSelect.addEventListener('change', function() {
                resetSelect(slsSelect, '-- Semua SLS --');
                resetSelect(subslsSelect, '-- Semua Sub SLS --');

                if (this.value) {
                    const filtered = originalGeojsonData.features.filter(f => 
                        f.properties.nmprov === provSelect.value && 
                        f.properties.nmkab === kabSelect.value && 
                        f.properties.nmkec === kecSelect.value && 
                        f.properties.nmdesa === this.value
                    );
                    const uniqueSls = [];
                    const mapSls = new Map();
                    filtered.forEach(f => {
                        if(f.properties.nmsls && !mapSls.has(f.properties.nmsls)) {
                            mapSls.set(f.properties.nmsls, true);
                            uniqueSls.push(f.properties.nmsls);
                        }
                    });
                    uniqueSls.sort().forEach(sls => slsSelect.options.add(new Option(sls, sls)));
                    slsSelect.disabled = false;
                }
                applyFilter();
            });

            slsSelect.addEventListener('change', function() {
                resetSelect(subslsSelect, '-- Semua Sub SLS --');

                if (this.value) {
                    const filtered = originalGeojsonData.features.filter(f => 
                        f.properties.nmprov === provSelect.value && 
                        f.properties.nmkab === kabSelect.value && 
                        f.properties.nmkec === kecSelect.value && 
                        f.properties.nmdesa === desaSelect.value &&
                        f.properties.nmsls === this.value
                    );
                    const subslss = [...new Set(filtered.map(f => f.properties.kdsubsls).filter(f => f !== null && f !== undefined))].sort();
                    subslss.forEach(subsls => subslsSelect.options.add(new Option(subsls, subsls)));
                    subslsSelect.disabled = false;
                }
                applyFilter();
            });

            subslsSelect.addEventListener('change', applyFilter);

            if (resetBtn) {
                resetBtn.addEventListener('click', function() {
                    provSelect.value = "";
                    resetSelect(kabSelect, '-- Semua Kab/Kota --');
                    resetSelect(kecSelect, '-- Semua Kecamatan --');
                    resetSelect(desaSelect, '-- Semua Desa/Kel --');
                    resetSelect(slsSelect, '-- Semua SLS --');
                    resetSelect(subslsSelect, '-- Semua Sub SLS --');
                    applyFilter();
                    map.setView([-0.4948, 117.1436], 12);
                });
            }

            function resetSelect(selectElement, defaultText) {
                if(selectElement) {
                    selectElement.innerHTML = `<option value="">${defaultText}</option>`;
                    selectElement.disabled = true;
                }
            }

            function applyFilter() {
                if (!originalGeojsonData) return;

                const provVal = provSelect.value;
                const kabVal = kabSelect.value;
                const kecVal = kecSelect.value;
                const desaVal = desaSelect.value;
                const slsVal = slsSelect.value;
                const subslsVal = subslsSelect.value;

                let filteredFeatures = originalGeojsonData.features;

                if (provVal) filteredFeatures = filteredFeatures.filter(f => f.properties.nmprov === provVal);
                if (kabVal) filteredFeatures = filteredFeatures.filter(f => f.properties.nmkab === kabVal);
                if (kecVal) filteredFeatures = filteredFeatures.filter(f => f.properties.nmkec === kecVal);
                if (desaVal) filteredFeatures = filteredFeatures.filter(f => f.properties.nmdesa === desaVal);
                if (slsVal) filteredFeatures = filteredFeatures.filter(f => f.properties.nmsls === slsVal);
                if (subslsVal) filteredFeatures = filteredFeatures.filter(f => f.properties.kdsubsls === subslsVal);

                const dataPack = { type: "FeatureCollection", features: filteredFeatures };
                renderGeoJson(dataPack);

                if (filteredFeatures.length > 0 && geojsonLayer) {
                    try {
                        map.fitBounds(geojsonLayer.getBounds(), { padding: [20, 20] });
                    } catch(e) {}
                }
            }
        }
    </script>
</body>
</html>