@extends('dashboard.layouts.app')

@section('title', 'Peta Masterplan Kabupaten Sidoarjo')

@section('content')
<style>
    /* Info Window Popup - Scaled Down for Dashboard */
    .ol-popup {
        position: absolute;
        background-color: white;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
        padding: 0;
        border-radius: 12px;
        border: 1px solid rgba(15, 23, 42, 0.12);
        bottom: 10px;
        left: -40px;
        min-width: 260px;
        max-width: 320px;
        overflow: hidden;
    }
    .ol-popup:after, .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }
    .ol-popup:after {
        border-top-color: white;
        border-width: 8px;
        left: 38px;
        margin-left: -8px;
    }
    .ol-popup:before {
        border-top-color: rgba(15, 23, 42, 0.12);
        border-width: 9px;
        left: 38px;
        margin-left: -9px;
    }
    .ol-popup-closer {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 1;
        cursor: pointer;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        font-size: 12px;
    }
    .ol-popup-closer:hover {
        background: rgba(255, 0, 0, 0.1);
        transform: rotate(90deg);
    }
    .popup-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 10px 15px;
        font-weight: 600;
        font-size: 13px;
    }
    .popup-content {
        padding: 12px 15px;
    }
    .popup-row {
        display: flex;
        margin-bottom: 8px;
        align-items: flex-start;
    }
    .popup-label {
        font-weight: 600;
        color: #64748b;
        min-width: 75px;
        font-size: 11px;
    }
    .popup-value {
        color: #1e293b;
        flex: 1;
        font-size: 11px;
    }
    .popup-foto {
        margin-top: 10px;
        cursor: pointer;
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.3s ease;
    }
    .popup-foto img {
        width: 100%;
        height: auto;
        max-height: 120px;
        object-fit: contain;
        display: block;
        transition: all 0.3s ease;
    }
    .popup-foto:hover {
        transform: scale(1.02);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    }
    .popup-foto:hover img {
        filter: brightness(1.1);
    }
    .treatment-badge {
        transition: all 0.2s ease;
    }
    .treatment-badge:hover {
        opacity: 0.8;
        transform: scale(1.05);
    }
    .treatment-badge.active {
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.5);
    }
    .popup-foto small {
        font-size: 9px;
    }
    /* Modal Preview Foto */
    .modal-foto {
        display: none;
        position: fixed;
        z-index: 9999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        animation: fadeIn 0.3s ease;
    }
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    .modal-foto-content {
        margin: auto;
        display: block;
        max-width: 90%;
        max-height: 90%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 10px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        animation: zoomIn 0.3s ease;
    }
    @keyframes zoomIn {
        from { transform: translate(-50%, -50%) scale(0.8); }
        to { transform: translate(-50%, -50%) scale(1); }
    }
    .modal-foto-close {
        position: absolute;
        top: 20px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s ease;
        z-index: 10000;
    }
    .modal-foto-close:hover,
    .modal-foto-close:focus {
        color: #ff6b6b;
        transform: rotate(90deg);
    }
    .progress-placeholder {
        background: linear-gradient(90deg, #e2e8f0 0%, #cbd5e1 50%, #e2e8f0 100%);
        background-size: 200% 100%;
        animation: loading 1.5s ease-in-out infinite;
        height: 14px;
        border-radius: 4px;
    }
    @keyframes loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
    .popup-value small.text-muted {
        font-size: 9px;
    }
    /* Layer Control Panel - Scrollable */
    #layer-control-panel {
        position: absolute !important;
        top: 50px !important;
        right: 10px !important;
        left: auto !important;
        width: 280px !important;
        max-height: calc(500px - 60px) !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(10px);
        border-radius: 15px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        border: 1px solid rgba(15, 23, 42, 0.12);
        display: none; /* Default hidden, akan diubah oleh JavaScript */
        flex-direction: column;
        box-sizing: border-box;
        z-index: 1000;
    }
    #layer-control-panel .card-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 12px 15px;
        border-radius: 15px 15px 0 0;
        font-weight: 600;
        flex-shrink: 0;
    }
    #layer-control-panel .card-body {
        flex: 1;
        min-height: 0;
        max-height: calc(500px - 60px - 50px);
        overflow-y: auto;
        overflow-x: hidden;
        padding: 12px 15px;
        padding-right: 20px;
        padding-bottom: 20px;
        box-sizing: border-box;
    }
    /* Custom scrollbar for layer control body */
    #layer-control-panel .card-body::-webkit-scrollbar {
        width: 6px;
    }
    #layer-control-panel .card-body::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05);
        border-radius: 10px;
    }
    #layer-control-panel .card-body::-webkit-scrollbar-thumb {
        background: rgba(102, 126, 234, 0.3);
        border-radius: 10px;
    }
    #layer-control-panel .card-body::-webkit-scrollbar-thumb:hover {
        background: rgba(102, 126, 234, 0.5);
    }
    .basemap-section {
        padding-bottom: 10px;
    }
    .basemap-section .form-check {
        margin-bottom: 8px;
    }
    .jangka-waktu-section {
        padding-bottom: 10px;
    }
    .jangka-waktu-section .form-check {
        margin-bottom: 8px;
    }
    #layer-control-panel .card-body hr {
        border-color: rgba(102, 126, 234, 0.3);
    }
    #layer-control-panel .card-body .form-label {
        color: #667eea;
        font-size: 12px;
        display: block;
    }
    /* ============================================
       LEGENDA KECAMATAN - STANDALONE CSS
       CSS khusus untuk legenda kecamatan, tidak menggunakan class yang sama dengan layer control
       ============================================ */
    #legend-kecamatan-panel {
        position: absolute !important;
        top: 50px !important;
        left: 10px !important;
        right: auto !important;
        width: 220px !important;
        max-height: calc(500px - 60px) !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(10px);
        border-radius: 15px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        border: 1px solid rgba(15, 23, 42, 0.12);
        display: none; /* Default hidden, akan diubah oleh JavaScript */
        flex-direction: column;
        box-sizing: border-box;
        z-index: 1000;
    }
    /* Header legenda kecamatan - tidak menggunakan class card-header */
    #legend-kecamatan-panel .card-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        color: white !important;
        padding: 12px 15px !important;
        border-radius: 15px 15px 0 0 !important;
        font-weight: 600 !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }
    /* Body legenda kecamatan - tidak menggunakan class card-body */
    #legend-kecamatan-panel #legend-body {
        flex: 1 !important;
        min-height: 0 !important;
        max-height: calc(500px - 60px - 50px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 12px !important;
        padding-right: 18px !important;
        padding-bottom: 20px !important;
        box-sizing: border-box !important;
        background: transparent !important;
    }
    /* Custom scrollbar untuk legend kecamatan - standalone */
    #legend-kecamatan-panel #legend-body::-webkit-scrollbar {
        width: 6px !important;
    }
    #legend-kecamatan-panel #legend-body::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05) !important;
        border-radius: 10px !important;
    }
    #legend-kecamatan-panel #legend-body::-webkit-scrollbar-thumb {
        background: rgba(102, 126, 234, 0.3) !important;
        border-radius: 10px !important;
    }
    #legend-kecamatan-panel #legend-body::-webkit-scrollbar-thumb:hover {
        background: rgba(102, 126, 234, 0.5) !important;
    }
    /* Legend item kecamatan - class khusus, tidak menggunakan class umum */
    .legend-item-kecamatan {
        display: flex !important;
        align-items: center !important;
        padding: 6px 8px !important;
        margin-bottom: 5px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 6px !important;
        cursor: pointer !important;
        transition: background-color 0.3s ease, border-color 0.3s ease !important;
        border: 1px solid transparent !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        position: relative !important;
        background: transparent !important;
    }
    .legend-item-kecamatan:hover {
        background: rgba(102, 126, 234, 0.1) !important;
        border-color: rgba(102, 126, 234, 0.3) !important;
    }
    .legend-item-kecamatan.active {
        background: rgba(102, 126, 234, 0.15) !important;
        border-color: rgba(102, 126, 234, 0.5) !important;
        font-weight: 600 !important;
    }
    .legend-item-kecamatan:last-child {
        margin-bottom: 0 !important;
    }
    /* Color box untuk legenda kecamatan - class khusus */
    .legend-color-box {
        width: 20px !important;
        height: 20px !important;
        border-radius: 3px !important;
        margin-right: 8px !important;
        border: 2px solid rgba(0, 0, 0, 0.2) !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
    }
    .legend-color-box-fill {
        width: 100% !important;
        height: 100% !important;
        border-radius: 1px !important;
        box-sizing: border-box !important;
    }
    /* Nama item legenda kecamatan - class khusus */
    .legend-item-name {
        font-size: 12px !important;
        color: #1e293b !important;
        flex: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        line-height: 1.4 !important;
    }
    /* Loading state untuk legenda kecamatan */
    .legend-loading {
        text-align: center !important;
        padding: 15px !important;
        color: #64748b !important;
        font-size: 12px !important;
        background: transparent !important;
    }
</style>

<div class="container-fluid">
    <h1>Peta Masterplan Kabupaten Sidoarjo</h1>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Peta Prioritas Penanganan Program Unggulan Kabupaten Sidoarjo</h5>
                </div>
                <div class="card-body">
                    <div id="map" style="height: 500px; width: 100%; position: relative;">
                        <!-- Zoom Control Buttons -->
                        <div style="position: absolute; bottom: 10px; right: 10px; z-index: 1000; display: flex; flex-direction: column; gap: 5px;">
                            <button id="zoom-in" class="btn btn-primary btn-sm" title="Zoom In">
                                <i class="bi bi-plus-lg"></i>
                            </button>
                            <button id="zoom-out" class="btn btn-primary btn-sm" title="Zoom Out">
                                <i class="bi bi-dash-lg"></i>
                            </button>
                        </div>

                        <!-- Legend Kecamatan Toggle Button -->
                        <button id="legend-kecamatan-toggle" class="btn btn-primary btn-sm" style="position: absolute; top: 10px; left: 10px; z-index: 1000;">
                            <i class="bi bi-map-fill"></i> Legenda Kecamatan
                        </button>

                        <!-- Legend Layer Kecamatan Panel -->
                        <div id="legend-kecamatan-panel" class="card" style="position: absolute; top: 50px; left: 10px; z-index: 1000; width: 220px; display: none;">
                            <div class="card-header">
                                <h6 class="mb-0">
                                    <i class="bi bi-map-fill"></i> Legenda Kecamatan
                                </h6>
                            </div>
                            <div class="card-body" id="legend-body" style="padding: 12px; max-height: calc(500px - 50px); overflow-y: auto;">
                                <div class="legend-loading">
                                    <small class="text-muted">Memuat legenda...</small>
                                </div>
                            </div>
                        </div>

                        <!-- Layer Control Toggle Button -->
                        <button id="layer-control-toggle" class="btn btn-primary btn-sm" style="position: absolute; top: 10px; right: 10px; z-index: 1000;">
                            <i class="bi bi-layers"></i> Layer Control
                        </button>

                        <!-- Layer Control Panel -->
                        <div id="layer-control-panel" class="card" style="position: absolute; top: 50px; right: 10px; z-index: 1000; width: 280px; display: none;">
                            <div class="card-header">
                                <h6 class="mb-0">Layer Control</h6>
                            </div>
                            <div class="card-body">
                                <!-- Basemap Selection -->
                                <div class="basemap-section mb-3">
                                    <label class="form-label fw-bold mb-2" style="font-size: 12px; color: #667eea;">
                                        <i class="bi bi-map"></i> Pilih Basemap
                                    </label>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="basemap" id="basemap-osm" value="osm" checked>
                                        <label class="form-check-label" for="basemap-osm">
                                            <i class="bi bi-globe text-secondary"></i> OpenStreetMap
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="basemap" id="basemap-satellite" value="satellite">
                                        <label class="form-check-label" for="basemap-satellite">
                                            <i class="bi bi-camera-fill text-success"></i> Citra Satelit
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="basemap" id="basemap-hybrid" value="hybrid">
                                        <label class="form-check-label" for="basemap-hybrid">
                                            <i class="bi bi-layers text-warning"></i> Satelit + Label
                                        </label>
                                    </div>
                                </div>
                                <hr class="my-2" style="border-color: rgba(102, 126, 234, 0.3);">
                                <!-- Jangka Waktu Selection -->
                                <div class="jangka-waktu-section mb-3">
                                    <label class="form-label fw-bold mb-2" style="font-size: 12px; color: #667eea;">
                                        <i class="bi bi-calendar-range"></i> Jangka Waktu
                                    </label>
                                    <div class="form-check">
                                        <input class="form-check-input jangka-filter" type="checkbox" id="jangka-pendek" value="Pendek" checked>
                                        <label class="form-check-label" for="jangka-pendek">
                                            <i class="bi bi-circle-fill text-primary" style="font-size: 8px;"></i> Pendek
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input jangka-filter" type="checkbox" id="jangka-pendek-menengah" value="Pendek, Menengah" checked>
                                        <label class="form-check-label" for="jangka-pendek-menengah">
                                            <i class="bi bi-circle-fill text-info" style="font-size: 8px;"></i> Pendek, Menengah
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input jangka-filter" type="checkbox" id="jangka-menengah" value="Menengah" checked>
                                        <label class="form-check-label" for="jangka-menengah">
                                            <i class="bi bi-circle-fill text-warning" style="font-size: 8px;"></i> Menengah
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input jangka-filter" type="checkbox" id="jangka-panjang" value="Panjang" checked>
                                        <label class="form-check-label" for="jangka-panjang">
                                            <i class="bi bi-circle-fill text-success" style="font-size: 8px;"></i> Panjang
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input jangka-filter" type="checkbox" id="jangka-tanpa" value="" checked>
                                        <label class="form-check-label" for="jangka-tanpa">
                                            <i class="bi bi-circle-fill text-secondary" style="font-size: 8px;"></i> N/A
                                        </label>
                                    </div>
                                </div>
                                <hr class="my-2" style="border-color: rgba(102, 126, 234, 0.3);">
                                <!-- Layer Selection -->
                                <label class="form-label fw-bold mb-2" style="font-size: 12px; color: #667eea;">
                                    <i class="bi bi-stack"></i> Layer Data
                                </label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="layer-sekolah" checked>
                                    <label class="form-check-label" for="layer-sekolah">
                                        <i class="bi bi-building text-danger"></i> Sekolah
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="layer-jalan" checked>
                                    <label class="form-check-label" for="layer-jalan">
                                        <i class="bi bi-road text-primary"></i> Jalan
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="layer-drainase" checked>
                                    <label class="form-check-label" for="layer-drainase">
                                        <i class="bi bi-water text-success"></i> Penanganan Banjir
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="layer-taman" checked>
                                    <label class="form-check-label" for="layer-taman">
                                        <i class="bi bi-tree text-warning"></i> Taman
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="layer-kecamatan" checked>
                                    <label class="form-check-label" for="layer-kecamatan">
                                        <i class="bi bi-map text-info"></i> Batas Kecamatan
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- <div class="card-footer">
                    <button class="btn btn-primary">Simpan</button>
                </div> --}}
            </div>
        </div>
    </div>

    <!-- Popup Overlay for Info Window -->
    <div id="popup" class="ol-popup">
        <a href="#" id="popup-closer" class="ol-popup-closer">
            <i class="bi bi-x-lg"></i>
        </a>
        <div id="popup-content"></div>
    </div>

    <!-- Modal for Photo Preview -->
    <div id="modal-foto" class="modal-foto">
        <span class="modal-foto-close" id="modal-foto-close">&times;</span>
        <img class="modal-foto-content" id="modal-foto-img">
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Wait for OpenLayers to be loaded
    document.addEventListener('DOMContentLoaded', function() {
        if (typeof ol === 'undefined') {
            console.error('OpenLayers is not loaded');
            return;
        }

        ol.proj.useGeographic();

        // Define basemap layers
        const osmLayer = new ol.layer.Tile({
            source: new ol.source.OSM(),
            visible: true
        });

        // Esri World Imagery (Satellite)
        const satelliteLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
                attributions: '© Esri, Maxar, Earthstar Geographics'
            }),
            visible: false
        });

        // Esri World Imagery + Labels (Hybrid)
        const satelliteLabelsLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}',
                attributions: '© Esri'
            }),
            visible: false
        });

        const map = new ol.Map({
            target: 'map',
            layers: [
                osmLayer,
                satelliteLayer,
                satelliteLabelsLayer
            ],
            view: new ol.View({
                center: [112.7167, -7.4458],
                zoom: 15
            }),
            controls: []
        });

        // Basemap switcher function
        function switchBasemap(basemapType) {
            osmLayer.setVisible(false);
            satelliteLayer.setVisible(false);
            satelliteLabelsLayer.setVisible(false);
            
            // Hide kecamatan label layer by default
            if (kecamatanLabelLayer) {
                kecamatanLabelLayer.setVisible(false);
            }

            switch(basemapType) {
                case 'osm':
                    osmLayer.setVisible(true);
                    break;
                case 'satellite':
                    satelliteLayer.setVisible(true);
                    break;
                case 'hybrid':
                    satelliteLayer.setVisible(true);
                    satelliteLabelsLayer.setVisible(true);
                    // Show kecamatan label layer for hybrid basemap
                    if (kecamatanLabelLayer) {
                        kecamatanLabelLayer.setVisible(true);
                    }
                    break;
            }
        }

        // Function to get color based on jangka waktu
        function getJangkaWaktuColor(jangka) {
            if (!jangka || jangka === '') {
                return '#6c757d'; // secondary (grey) - Tanpa Jangka Waktu
            }
            const normalizedJangka = jangka.toLowerCase().trim();
            if (normalizedJangka === 'pendek') {
                return '#0d6efd'; // primary (blue)
            } else if (normalizedJangka === 'pendek, menengah' || normalizedJangka === 'pendek,menengah') {
                return '#0dcaf0'; // info (cyan)
            } else if (normalizedJangka === 'menengah') {
                return '#ffc107'; // warning (yellow)
            } else if (normalizedJangka === 'panjang') {
                return '#198754'; // success (green)
            }
            return '#6c757d'; // default (grey)
        }

        // Basemap radio button event listeners
        document.querySelectorAll('input[name="basemap"]').forEach(function(radio) {
            radio.addEventListener('change', function() {
                switchBasemap(this.value);
            });
        });

        // Store layer references for control
        const layerGroups = {
            sekolah: [],
            jalan: [],
            drainase: [],
            taman: [],
            kecamatan: []
        };

        // Store data for info window
        const dataStore = {
            sekolah: {},
            jalan: {},
            drainase: {},
            taman: {}
        };

        // Load sekolah data
        var sekolahData = @json($sekolah);
        var sekolahAsset = '{{ asset('storage/geojson/sekolah') }}';

        sekolahData.forEach(function(item) {
            if (item.geojson_file) {
                // Store jangka waktu for filtering (keep original format from database)
                const jangka = item.jangka ? item.jangka.trim() : '';
                const jangkaColor = getJangkaWaktuColor(jangka);
                
                const vector = new ol.layer.Vector({
                    source: new ol.source.Vector({
                        url: sekolahAsset + '/' + item.geojson_file,
                        format: new ol.format.GeoJSON()
                    }),
                    style: function(feature) {
                        return [
                            // Circle background sebagai bingkai
                            new ol.style.Style({
                                image: new ol.style.Circle({
                                    radius: 15,
                                    fill: new ol.style.Fill({
                                        color: 'rgba(255, 255, 255, 0.8)'
                                    }),
                                    stroke: new ol.style.Stroke({
                                        color: jangkaColor,
                                        width: 3
                                    })
                                })
                            }),
                            // Icon di atas circle
                            new ol.style.Style({
                                image: new ol.style.Icon({
                                    src: '{{ asset('images/sekolah.png') }}',
                                    anchor: [0.5, 0.5],
                                    anchorXUnits: 'fraction',
                                    anchorYUnits: 'fraction',
                                    scale: 0.08
                                })
                            })
                        ];
                    },
                    visible: true
                });
                // Store data with layer reference
                vector.set('layerType', 'sekolah');
                vector.set('itemData', item);
                vector.set('jangka', jangka);
                dataStore.sekolah[item.geojson_file] = item;
                
                map.addLayer(vector);
                layerGroups.sekolah.push(vector);
            }
        });

        // Load jalan data
        var jalanData = @json($jalan);
        var jalanAsset = '{{ asset('storage/geojson/jalan') }}';

        jalanData.forEach(function(item) {
            if (item.geojson_file) {
                // Store jangka waktu for filtering (keep original format from database)
                const jangka = item.jangka ? item.jangka.trim() : '';
                const jangkaColor = getJangkaWaktuColor(jangka);
                
                const vector = new ol.layer.Vector({
                    source: new ol.source.Vector({
                        url: jalanAsset + '/' + item.geojson_file,
                        format: new ol.format.GeoJSON()
                    }),
                    style: new ol.style.Style({
                        stroke: new ol.style.Stroke({
                            color: jangkaColor,
                            width: 3
                        })
                    }),
                    visible: true
                });
                // Store data with layer reference
                vector.set('layerType', 'jalan');
                vector.set('itemData', item);
                vector.set('jangka', jangka);
                dataStore.jalan[item.geojson_file] = item;
                
                map.addLayer(vector);
                layerGroups.jalan.push(vector);
            }
        });

        // Load drainase data
        var drainaseData = @json($drainase);
        var drainaseAsset = '{{ asset('storage/geojson/drainase') }}';

        drainaseData.forEach(function(item) {
            if (item.geojson_file) {
                // Store jangka waktu for filtering (keep original format from database)
                const jangka = item.jangka ? item.jangka.trim() : '';
                const jangkaColor = getJangkaWaktuColor(jangka);
                
                const vector = new ol.layer.Vector({
                    source: new ol.source.Vector({
                        url: drainaseAsset + '/' + item.geojson_file,
                        format: new ol.format.GeoJSON()
                    }),
                    style: function(feature) {
                        return [
                            // Circle background sebagai bingkai
                            new ol.style.Style({
                                image: new ol.style.Circle({
                                    radius: 15,
                                    fill: new ol.style.Fill({
                                        color: 'rgba(255, 255, 255, 0.8)'
                                    }),
                                    stroke: new ol.style.Stroke({
                                        color: jangkaColor,
                                        width: 3
                                    })
                                })
                            }),
                            // Icon di atas circle
                            new ol.style.Style({
                                image: new ol.style.Icon({
                                    src: '{{ asset('images/drainase.png') }}',
                                    anchor: [0.5, 0.5],
                                    anchorXUnits: 'fraction',
                                    anchorYUnits: 'fraction',
                                    scale: 0.08
                                })
                            })
                        ];
                    },
                    visible: true
                });
                // Store data with layer reference
                vector.set('layerType', 'drainase');
                vector.set('itemData', item);
                vector.set('jangka', jangka);
                dataStore.drainase[item.geojson_file] = item;
                
                map.addLayer(vector);
                layerGroups.drainase.push(vector);
            }
        });

        // Load taman data
        var tamanData = @json($taman);
        var tamanAsset = '{{ asset('storage/geojson/taman') }}';

        tamanData.forEach(function(item) {
            if (item.geojson_file) {
                // Store jangka waktu for filtering (keep original format from database)
                const jangka = item.jangka ? item.jangka.trim() : '';
                const jangkaColor = getJangkaWaktuColor(jangka);
                
                const vector = new ol.layer.Vector({
                    source: new ol.source.Vector({
                        url: tamanAsset + '/' + item.geojson_file,
                        format: new ol.format.GeoJSON()
                    }),
                    style: function(feature) {
                        return [
                            // Circle background sebagai bingkai
                            new ol.style.Style({
                                image: new ol.style.Circle({
                                    radius: 15,
                                    fill: new ol.style.Fill({
                                        color: 'rgba(255, 255, 255, 0.8)'
                                    }),
                                    stroke: new ol.style.Stroke({
                                        color: jangkaColor,
                                        width: 3
                                    })
                                })
                            }),
                            // Icon di atas circle
                            new ol.style.Style({
                                image: new ol.style.Icon({
                                    src: '{{ asset('images/taman.png') }}',
                                    anchor: [0.5, 0.5],
                                    anchorXUnits: 'fraction',
                                    anchorYUnits: 'fraction',
                                    scale: 0.08
                                })
                            })
                        ];
                    },
                    visible: true
                });
                // Store data with layer reference
                vector.set('layerType', 'taman');
                vector.set('itemData', item);
                vector.set('jangka', jangka);
                dataStore.taman[item.geojson_file] = item;
                
                map.addLayer(vector);
                layerGroups.taman.push(vector);
            }
        });

        // Load batas kecamatan dengan konfigurasi warna
        var kecamatanAsset = '{{ asset('storage/geojson/layer/batas_kecamatan.geojson') }}';
        var kecamatanColorConfig = {};
        var kecamatanLayer = null;
        var kecamatanSource = null;
        var kecamatanLabelLayer = null;
        var highlightLayer = null;
        var currentlyHighlighted = null;
        
        // Create highlight layer
        highlightLayer = new ol.layer.Vector({
            source: new ol.source.Vector(),
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: '#ff6b6b',
                    width: 4
                }),
                fill: new ol.style.Fill({
                    color: 'rgba(255, 107, 107, 0.2)'
                })
            }),
            zIndex: 1000
        });
        map.addLayer(highlightLayer);
        
        // Load color configuration and GeoJSON
        Promise.all([
            fetch('{{ route("layer.get-colors.public") }}').then(response => response.json()),
            fetch(kecamatanAsset).then(response => response.json())
        ])
            .then(([colors, geojson]) => {
                kecamatanColorConfig = colors;
                
                kecamatanSource = new ol.source.Vector({
                    features: new ol.format.GeoJSON().readFeatures(geojson)
                });
                
                kecamatanLayer = new ol.layer.Vector({
                    source: kecamatanSource,
                    style: function(feature) {
                        const properties = feature.getProperties();
                        const kecamatan = properties.KECAMATAN || properties.kecamatan;
                        const colorConfig = kecamatanColorConfig[kecamatan] || {
                            fill: 'rgba(231, 76, 60, 0.1)',
                            stroke: '#e74c3c',
                            strokeWidth: 2
                        };
                        
                        return new ol.style.Style({
                            stroke: new ol.style.Stroke({
                                color: colorConfig.stroke,
                                width: colorConfig.strokeWidth
                            }),
                            fill: new ol.style.Fill({
                                color: colorConfig.fill
                            })
                        });
                    }
                });
                kecamatanLayer.set('layerType', 'kecamatan');
                map.addLayer(kecamatanLayer);
                layerGroups.kecamatan.push(kecamatanLayer);
                
                // Create label layer for kecamatan
                // Create a new source with point features at the center of each polygon
                const labelSource = new ol.source.Vector();
                const features = kecamatanSource.getFeatures();
                
                features.forEach(function(feature) {
                    const properties = feature.getProperties();
                    const kecamatan = properties.KECAMATAN || properties.kecamatan;
                    
                    if (!kecamatan) return;
                    
                    const geometry = feature.getGeometry();
                    let center;
                    
                    if (geometry.getType() === 'Polygon' || geometry.getType() === 'MultiPolygon') {
                        const extent = geometry.getExtent();
                        center = [
                            (extent[0] + extent[2]) / 2,
                            (extent[1] + extent[3]) / 2
                        ];
                    } else {
                        center = geometry.getCoordinates();
                    }
                    
                    const pointFeature = new ol.Feature({
                        geometry: new ol.geom.Point(center),
                        name: kecamatan
                    });
                    labelSource.addFeature(pointFeature);
                });
                
                kecamatanLabelLayer = new ol.layer.Vector({
                    source: labelSource,
                    style: function(feature, resolution) {
                        const kecamatan = feature.get('name');
                        if (!kecamatan) return null;
                        
                        // Only show labels at appropriate zoom levels (zoom >= 12)
                        const zoom = map.getView().getZoom();
                        if (zoom < 12) return null;
                        
                        return new ol.style.Style({
                            text: new ol.style.Text({
                                text: kecamatan,
                                font: 'bold 14px Inter, Arial, sans-serif',
                                fill: new ol.style.Fill({
                                    color: '#ffffff'
                                }),
                                stroke: new ol.style.Stroke({
                                    color: '#1f2933',
                                    width: 3
                                }),
                                offsetY: 0,
                                textAlign: 'center',
                                textBaseline: 'middle',
                                placement: 'point',
                                maxAngle: 0,
                                overflow: true
                            })
                        });
                    },
                    visible: false,
                    zIndex: 100
                });
                kecamatanLabelLayer.set('layerType', 'kecamatan-label');
                map.addLayer(kecamatanLabelLayer);
                
                // Update label visibility when zoom changes
                map.getView().on('change:resolution', function() {
                    if (kecamatanLabelLayer && kecamatanLabelLayer.getVisible()) {
                        kecamatanLabelLayer.changed();
                    }
                });
                
                // Render legend setelah layer dimuat
                renderKecamatanLegend();
            })
            .catch(error => {
                console.error('Error loading data:', error);
                // Fallback to default style - load GeoJSON directly
                fetch(kecamatanAsset)
                    .then(response => response.json())
                    .then(geojson => {
                        kecamatanSource = new ol.source.Vector({
                            features: new ol.format.GeoJSON().readFeatures(geojson)
                        });
                        
                        kecamatanLayer = new ol.layer.Vector({
                            source: kecamatanSource,
                            style: new ol.style.Style({
                                stroke: new ol.style.Stroke({
                                    color: '#e74c3c',
                                    width: 2
                                }),
                                fill: new ol.style.Fill({
                                    color: 'rgba(231, 76, 60, 0.1)'
                                })
                            })
                        });
                        kecamatanLayer.set('layerType', 'kecamatan');
                        map.addLayer(kecamatanLayer);
                        layerGroups.kecamatan.push(kecamatanLayer);
                        
                        // Create label layer for kecamatan
                        // Create a new source with point features at the center of each polygon
                        const labelSource = new ol.source.Vector();
                        const features = kecamatanSource.getFeatures();
                        
                        features.forEach(function(feature) {
                            const properties = feature.getProperties();
                            const kecamatan = properties.KECAMATAN || properties.kecamatan;
                            
                            if (!kecamatan) return;
                            
                            const geometry = feature.getGeometry();
                            let center;
                            
                            if (geometry.getType() === 'Polygon' || geometry.getType() === 'MultiPolygon') {
                                const extent = geometry.getExtent();
                                center = [
                                    (extent[0] + extent[2]) / 2,
                                    (extent[1] + extent[3]) / 2
                                ];
                            } else {
                                center = geometry.getCoordinates();
                            }
                            
                            const pointFeature = new ol.Feature({
                                geometry: new ol.geom.Point(center),
                                name: kecamatan
                            });
                            labelSource.addFeature(pointFeature);
                        });
                        
                        kecamatanLabelLayer = new ol.layer.Vector({
                            source: labelSource,
                            style: function(feature, resolution) {
                                const kecamatan = feature.get('name');
                                if (!kecamatan) return null;
                                
                                // Only show labels at appropriate zoom levels (zoom >= 12)
                                const zoom = map.getView().getZoom();
                                if (zoom < 12) return null;
                                
                                return new ol.style.Style({
                                    text: new ol.style.Text({
                                        text: kecamatan,
                                        font: 'bold 14px Inter, Arial, sans-serif',
                                        fill: new ol.style.Fill({
                                            color: '#ffffff'
                                        }),
                                        stroke: new ol.style.Stroke({
                                            color: '#1f2933',
                                            width: 3
                                        }),
                                        offsetY: 0,
                                        textAlign: 'center',
                                        textBaseline: 'middle',
                                        placement: 'point',
                                        maxAngle: 0,
                                        overflow: true
                                    })
                                });
                            },
                            visible: false,
                            zIndex: 100
                        });
                        
                        // Update label visibility when zoom changes
                        map.getView().on('change:resolution', function() {
                            if (kecamatanLabelLayer && kecamatanLabelLayer.getVisible()) {
                                kecamatanLabelLayer.changed();
                            }
                        });
                        kecamatanLabelLayer.set('layerType', 'kecamatan-label');
                        map.addLayer(kecamatanLabelLayer);
                        
                        // Render legend dengan default colors
                        renderKecamatanLegend();
                    })
                    .catch(err => {
                        console.error('Error loading GeoJSON:', err);
                    });
            });
        
        // Function to render kecamatan legend
        function renderKecamatanLegend() {
            const legendBody = document.getElementById('legend-body');
            if (!legendBody || !kecamatanSource) {
                return;
            }
            
            const features = kecamatanSource.getFeatures();
            
            if (features.length === 0) {
                legendBody.innerHTML = '<div class="legend-loading"><small class="text-muted">Tidak ada data kecamatan</small></div>';
                return;
            }
            
            const kecamatanMap = new Map();
            
            // Get unique kecamatan names
            features.forEach(function(feature) {
                const properties = feature.getProperties();
                const kecamatan = properties.KECAMATAN || properties.kecamatan;
                if (kecamatan && !kecamatanMap.has(kecamatan)) {
                    const colorConfig = kecamatanColorConfig[kecamatan] || {
                        fill: 'rgba(231, 76, 60, 0.1)',
                        stroke: '#e74c3c',
                        strokeWidth: 2
                    };
                    kecamatanMap.set(kecamatan, {
                        name: kecamatan,
                        color: colorConfig,
                        feature: feature
                    });
                }
            });
            
            // Sort kecamatan names
            const sortedKecamatans = Array.from(kecamatanMap.values()).sort((a, b) => 
                a.name.localeCompare(b.name)
            );
            
            // Render legend items
            let legendHTML = '';
            sortedKecamatans.forEach(function(item) {
                legendHTML += `
                    <div class="legend-item-kecamatan" data-kecamatan="${item.name}">
                        <div class="legend-color-box" style="border-color: ${item.color.stroke};">
                            <div class="legend-color-box-fill" style="background-color: ${item.color.fill};"></div>
                        </div>
                        <div class="legend-item-name">${item.name}</div>
                    </div>
                `;
            });
            
            legendBody.innerHTML = legendHTML;
            
            // Add click event listeners
            const legendItems = legendBody.querySelectorAll('.legend-item-kecamatan');
            legendItems.forEach(function(item) {
                item.addEventListener('click', function() {
                    const kecamatanName = this.getAttribute('data-kecamatan');
                    zoomToKecamatan(kecamatanName, this);
                });
            });
        }
        
        // Function to zoom to kecamatan
        function zoomToKecamatan(kecamatanName, legendElement) {
            if (!kecamatanSource) return;
            
            // Find feature with matching kecamatan name
            const features = kecamatanSource.getFeatures();
            let targetFeature = null;
            
            features.forEach(function(feature) {
                const properties = feature.getProperties();
                const kecamatan = properties.KECAMATAN || properties.kecamatan;
                if (kecamatan === kecamatanName) {
                    targetFeature = feature;
                    return;
                }
            });
            
            if (targetFeature) {
                const geometry = targetFeature.getGeometry();
                if (geometry) {
                    // Remove previous highlight
                    if (currentlyHighlighted) {
                        highlightLayer.getSource().clear();
                        const prevLegendItem = document.querySelector('.legend-item-kecamatan.active');
                        if (prevLegendItem) {
                            prevLegendItem.classList.remove('active');
                        }
                    }
                    
                    // Add highlight
                    highlightLayer.getSource().addFeature(targetFeature.clone());
                    currentlyHighlighted = targetFeature;
                    
                    // Update legend active state
                    const allLegendItems = document.querySelectorAll('.legend-item-kecamatan');
                    allLegendItems.forEach(function(item) {
                        item.classList.remove('active');
                    });
                    if (legendElement) {
                        legendElement.classList.add('active');
                    }
                    
                    // Zoom to feature
                    const extent = geometry.getExtent();
                    map.getView().fit(extent, {
                        padding: [50, 50, 50, 50],
                        duration: 1000,
                        maxZoom: 16
                    });
                }
            }
        }

        // Layer control toggle functionality
        const toggleButton = document.getElementById('layer-control-toggle');
        const layerPanel = document.getElementById('layer-control-panel');
        let isPanelVisible = false;

        toggleButton.addEventListener('click', function() {
            if (isPanelVisible) {
                layerPanel.style.display = 'none';
                toggleButton.innerHTML = '<i class="bi bi-layers"></i> Layer Control';
                isPanelVisible = false;
            } else {
                // On small screens, close legend panel if open to prevent overlap
                if (window.innerWidth < 1024 && isLegendVisible) {
                    legendPanel.style.display = 'none';
                    legendToggleButton.innerHTML = '<i class="bi bi-map-fill"></i> Legenda Kecamatan';
                    isLegendVisible = false;
                }
                layerPanel.style.display = 'flex';
                toggleButton.innerHTML = '<i class="bi bi-x-circle"></i> Tutup';
                isPanelVisible = true;
            }
        });

        // Zoom control functionality
        document.getElementById('zoom-in').addEventListener('click', function() {
            const view = map.getView();
            const currentZoom = view.getZoom();
            view.animate({
                zoom: currentZoom + 1,
                duration: 250
            });
        });

        document.getElementById('zoom-out').addEventListener('click', function() {
            const view = map.getView();
            const currentZoom = view.getZoom();
            view.animate({
                zoom: currentZoom - 1,
                duration: 250
            });
        });

        // Legend kecamatan toggle functionality
        const legendToggleButton = document.getElementById('legend-kecamatan-toggle');
        const legendPanel = document.getElementById('legend-kecamatan-panel');
        let isLegendVisible = false;

        legendToggleButton.addEventListener('click', function() {
            if (isLegendVisible) {
                legendPanel.style.display = 'none';
                legendToggleButton.innerHTML = '<i class="bi bi-map-fill"></i> Legenda Kecamatan';
                isLegendVisible = false;
            } else {
                // On small screens, close layer control panel if open to prevent overlap
                if (window.innerWidth < 1024 && isPanelVisible) {
                    layerPanel.style.display = 'none';
                    toggleButton.innerHTML = '<i class="bi bi-layers"></i> Layer Control';
                    isPanelVisible = false;
                }
                legendPanel.style.display = 'flex';
                legendToggleButton.innerHTML = '<i class="bi bi-x-circle"></i> Tutup';
                isLegendVisible = true;
            }
        });

        // Function to filter layers by jangka waktu
        function filterByJangkaWaktu() {
            // Get selected jangka waktu values
            const selectedJangka = [];
            let showTanpaJangka = false;
            document.querySelectorAll('.jangka-filter:checked').forEach(function(checkbox) {
                if (checkbox.value === '') {
                    showTanpaJangka = true;
                } else {
                    selectedJangka.push(checkbox.value);
                }
            });

            // Filter all layer groups except kecamatan
            const layerTypes = ['sekolah', 'jalan', 'drainase', 'taman'];
            
            layerTypes.forEach(function(layerType) {
                const layerCheckbox = document.getElementById('layer-' + layerType);
                const isLayerChecked = layerCheckbox ? layerCheckbox.checked : false;
                
                layerGroups[layerType].forEach(function(layer) {
                    const layerJangka = layer.get('jangka') || '';
                    
                    // If layer checkbox is not checked, hide it
                    if (!isLayerChecked) {
                        layer.setVisible(false);
                        return;
                    }
                    
                    // If layer has no jangka waktu, show if "N/A" checkbox is checked
                    if (!layerJangka || layerJangka === '') {
                        layer.setVisible(showTanpaJangka);
                        return;
                    }
                    
                    // Normalize layer jangka for comparison (case-insensitive)
                    const normalizedLayerJangka = layerJangka.trim();
                    
                    // Check if layer jangka matches any selected jangka
                    // If no jangka filter is selected, hide all layers with jangka
                    const matchesJangka = selectedJangka.length > 0 && selectedJangka.some(function(selected) {
                        const normalizedSelected = selected.trim();
                        // Case-insensitive comparison
                        return normalizedLayerJangka.toLowerCase() === normalizedSelected.toLowerCase();
                    });
                    
                    // Layer is visible only if jangka matches
                    layer.setVisible(matchesJangka);
                });
            });
        }

        // Helper function to update layer visibility considering both layer checkbox and jangka filter
        function updateLayerVisibility(layerType, isChecked) {
            // If layer checkbox is not checked, hide all layers of this type
            if (!isChecked) {
                layerGroups[layerType].forEach(function(layer) {
                    layer.setVisible(false);
                });
                return;
            }
            
            // Get selected jangka waktu values
            const selectedJangka = [];
            let showTanpaJangka = false;
            document.querySelectorAll('.jangka-filter:checked').forEach(function(checkbox) {
                if (checkbox.value === '') {
                    showTanpaJangka = true;
                } else {
                    selectedJangka.push(checkbox.value);
                }
            });
            
            layerGroups[layerType].forEach(function(layer) {
                const layerJangka = layer.get('jangka') || '';
                
                // If layer has no jangka waktu, show if "N/A" checkbox is checked
                if (!layerJangka || layerJangka === '') {
                    layer.setVisible(showTanpaJangka);
                    return;
                }
                
                // Normalize layer jangka for comparison (case-insensitive)
                const normalizedLayerJangka = layerJangka.trim();
                
                // Check if layer jangka matches any selected jangka
                // If no jangka filter is selected, hide all layers with jangka
                const matchesJangka = selectedJangka.length > 0 && selectedJangka.some(function(selected) {
                    const normalizedSelected = selected.trim();
                    // Case-insensitive comparison
                    return normalizedLayerJangka.toLowerCase() === normalizedSelected.toLowerCase();
                });
                
                // Layer is visible only if jangka matches
                layer.setVisible(matchesJangka);
            });
        }

        // Layer control functionality
        document.getElementById('layer-sekolah').addEventListener('change', function() {
            updateLayerVisibility('sekolah', this.checked);
        });

        document.getElementById('layer-jalan').addEventListener('change', function() {
            updateLayerVisibility('jalan', this.checked);
        });

        document.getElementById('layer-drainase').addEventListener('change', function() {
            updateLayerVisibility('drainase', this.checked);
        });

        document.getElementById('layer-taman').addEventListener('change', function() {
            updateLayerVisibility('taman', this.checked);
        });

        document.getElementById('layer-kecamatan').addEventListener('change', function() {
            layerGroups.kecamatan.forEach(function(layer) {
                layer.setVisible(this.checked);
            }.bind(this));
        });

        // Jangka waktu filter event listeners
        document.querySelectorAll('.jangka-filter').forEach(function(checkbox) {
            checkbox.addEventListener('change', function() {
                filterByJangkaWaktu();
            });
        });

        // Apply initial filter after all layers are loaded
        // Wait for all layers to be fully loaded before applying filter
        setTimeout(function() {
            // Apply jangka waktu filter which will handle both layer checkbox and jangka filter
            filterByJangkaWaktu();
        }, 1000);

        // Create popup overlay for info window
        const popupContainer = document.getElementById('popup');
        const popupContent = document.getElementById('popup-content');
        const popupCloser = document.getElementById('popup-closer');

        const overlay = new ol.Overlay({
            element: popupContainer,
            autoPan: {
                animation: {
                    duration: 250
                }
            }
        });
        map.addOverlay(overlay);

        // Close popup
        popupCloser.onclick = function() {
            overlay.setPosition(undefined);
            popupCloser.blur();
            return false;
        };

        // Format currency
        function formatRupiah(angka) {
            if (!angka) return 'Tidak tersedia';
            const numberString = angka.toString().replace(/[^,\d]/g, '');
            const split = numberString.split(',');
            const sisa = split[0].length % 3;
            let rupiah = split[0].substr(0, sisa);
            const ribuan = split[0].substr(sisa).match(/\d{3}/gi);

            if (ribuan) {
                const separator = sisa ? '.' : '';
                rupiah += separator + ribuan.join('.');
            }

            rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
            return 'Rp ' + rupiah;
        }

        // Function to create popup content
        function createPopupContent(layerType, data, jangka) {
            let title = '';
            let nama = '';
            let anggaran = data.anggaran || 'Tidak tersedia';
            let durasi = data.durasi || 'Tidak tersedia';
            let foto = data.foto || null;
            let fotoPath = '';
            
            // Get name and foto path based on layer type
            switch(layerType) {
                case 'sekolah':
                    title = 'Informasi Sekolah';
                    nama = data.nama_sekolah || 'Tidak tersedia';
                    fotoPath = 'foto/sekolah/';
                    break;
                case 'jalan':
                    title = 'Informasi Jalan';
                    nama = data.nama_jalan || 'Tidak tersedia';
                    fotoPath = 'foto/jalan/';
                    break;
                case 'drainase':
                    title = 'Informasi Penanganan Banjir';
                    nama = data.nama_saluran || data.lokasi || 'Tidak tersedia';
                    fotoPath = 'foto/drainase/';
                    break;
                case 'taman':
                    title = 'Informasi Taman';
                    nama = data.nama_taman || data.nama_lokasi || 'Tidak tersedia';
                    fotoPath = 'foto/taman/';
                    break;
            }

            // Get color based on jangka waktu
            const jangkaColor = getJangkaWaktuColor(jangka || '');
            const headerStyle = `background: ${jangkaColor};`;

            let html = `
                <div class="popup-header" style="${headerStyle}">
                    ${title}
                </div>
                <div class="popup-content">
                    <div class="popup-row">
                        <div class="popup-label">Nama:</div>
                        <div class="popup-value"><strong>${nama}</strong></div>
                    </div>
                    <div class="popup-row">
                        <div class="popup-label">Anggaran:</div>
                        <div class="popup-value">${formatRupiah(anggaran)}</div>
                    </div>
                    <div class="popup-row">
                        <div class="popup-label">Durasi:</div>
                        <div class="popup-value">${durasi}</div>
                    </div>
            `;

            // Add Treatment section for sekolah
            if (layerType === 'sekolah') {
                const treatments = [];
                if ((data.rusak_ringan || '').toLowerCase() === 'ya') {
                    treatments.push({key: 'rusak_ringan', label: 'Rusak Ringan', color: 'warning', custom: false});
                }
                if ((data.rusak_sedang || '').toLowerCase() === 'ya') {
                    treatments.push({key: 'rusak_sedang', label: 'Rusak Sedang', color: 'warning', custom: true, bg: '#ff9800'});
                }
                if ((data.rusak_berat || '').toLowerCase() === 'ya') {
                    treatments.push({key: 'rusak_berat', label: 'Rusak Berat', color: 'danger', custom: false});
                }
                if ((data.kelas_baru || '').toLowerCase() === 'ya') {
                    treatments.push({key: 'kelas_baru', label: 'Kelas Baru', color: 'success', custom: false});
                }
                if ((data.air_garam || '').toLowerCase() === 'ya') {
                    treatments.push({key: 'air_garam', label: 'Air Garam', color: 'info', custom: false});
                }

                if (treatments.length > 0) {
                    html += `
                        <div class="popup-row">
                            <div class="popup-label">Treatment:</div>
                            <div class="popup-value">
                                <div class="d-flex flex-wrap gap-1" id="popup-treatment-badges">
                    `;
                    treatments.forEach(function(treatment, index) {
                        const badgeClass = treatment.custom ? 'badge' : `badge bg-${treatment.color}`;
                        const badgeStyle = treatment.custom 
                            ? `background-color: ${treatment.bg}; cursor: pointer;` 
                            : `cursor: pointer;`;
                        html += `
                            <span class="treatment-badge ${badgeClass}" data-treatment="${treatment.key}" style="${badgeStyle}">
                                ${treatment.label}
                            </span>
                        `;
                    });
                    html += `
                                </div>
                            </div>
                        </div>
                    `;
                }
            }

            html += `
                    <div class="popup-row">
                        <div class="popup-label">Progress:</div>
                        <div class="popup-value">
                            <div class="progress-placeholder"></div>
                            <small class="text-muted">Data progress akan segera tersedia</small>
                        </div>
                    </div>
            `;

            // Handle foto based on layer type
            if (layerType === 'sekolah') {
                // For sekolah, foto will be shown based on treatment badge click
                // Get first treatment or default
                const treatments = [];
                if ((data.rusak_ringan || '').toLowerCase() === 'ya') {
                    treatments.push({key: 'rusak_ringan', label: 'Rusak Ringan'});
                }
                if ((data.rusak_sedang || '').toLowerCase() === 'ya') {
                    treatments.push({key: 'rusak_sedang', label: 'Rusak Sedang'});
                }
                if ((data.rusak_berat || '').toLowerCase() === 'ya') {
                    treatments.push({key: 'rusak_berat', label: 'Rusak Berat'});
                }
                if ((data.kelas_baru || '').toLowerCase() === 'ya') {
                    treatments.push({key: 'kelas_baru', label: 'Kelas Baru'});
                }
                if ((data.air_garam || '').toLowerCase() === 'ya') {
                    treatments.push({key: 'air_garam', label: 'Air Garam'});
                }

                if (treatments.length > 0) {
                    const defaultTreatment = treatments[0].key;
                    const fotoUrl = '{{ asset('images') }}/' + defaultTreatment + '.png';
                    html += `
                        <div class="popup-row">
                            <div class="popup-label">Foto:</div>
                            <div class="popup-value">
                                <div class="popup-foto" id="popup-foto-container" onclick="previewFoto('${fotoUrl}')">
                                    <img id="popup-foto-img" src="${fotoUrl}" alt="Foto ${nama}" style="max-height: 120px;">
                                    <small class="text-muted d-block text-center mt-1">
                                        <i class="bi bi-zoom-in"></i> Klik untuk memperbesar
                                    </small>
                                </div>
                            </div>
                        </div>
                    `;
                }
            } else if (foto) {
                // For other layers, use existing foto logic
                const fotoUrl = '{{ asset('storage') }}/' + fotoPath + foto;
                html += `
                    <div class="popup-row">
                        <div class="popup-label">Foto:</div>
                        <div class="popup-value">
                            <div class="popup-foto" onclick="previewFoto('${fotoUrl}')">
                                <img src="${fotoUrl}" alt="Foto ${nama}" style="max-height: 120px;">
                                <small class="text-muted d-block text-center mt-1">
                                    <i class="bi bi-zoom-in"></i> Klik untuk memperbesar
                                </small>
                            </div>
                        </div>
                    </div>
                `;
            }

            html += `</div>`;
            return html;
        }

        // Click event handler for map
        map.on('click', function(evt) {
            let clickedFeature = null;
            let clickedLayer = null;
            
            // Find feature, but exclude kecamatan layer using layerFilter
            // Iterate through layers in reverse (top to bottom) to get the topmost feature
            const layers = map.getLayers().getArray().slice().reverse();
            for (let i = 0; i < layers.length; i++) {
                const layer = layers[i];
                if (!(layer instanceof ol.layer.Vector)) {
                    continue;
                }
                
                const layerType = layer.get('layerType');
                const itemData = layer.get('itemData');
                
                // Skip kecamatan layer and layers without itemData
                if (layerType === 'kecamatan' || !itemData) {
                    continue;
                }
                
                // Check if this layer has a feature at the clicked pixel
                map.forEachFeatureAtPixel(evt.pixel, function(feature) {
                    const source = layer.getSource();
                    if (source && source.getFeatures().includes(feature)) {
                        clickedFeature = feature;
                        clickedLayer = layer;
                    }
                }, {
                    layerFilter: function(l) {
                        return l === layer;
                    },
                    hitTolerance: 5
                });
                
                // Stop at the first found feature (topmost)
                if (clickedFeature) {
                    break;
                }
            }

            if (clickedFeature && clickedLayer) {
                const layerType = clickedLayer.get('layerType');
                const itemData = clickedLayer.get('itemData');
                const jangka = clickedLayer.get('jangka') || '';
                
                if (layerType && itemData) {
                    // Get coordinate for popup
                    let coordinate;
                    const geometry = clickedFeature.getGeometry();
                    
                    if (geometry.getType() === 'Point') {
                        coordinate = geometry.getCoordinates();
                    } else if (geometry.getType() === 'LineString') {
                        // For lines, show popup at clicked position
                        coordinate = evt.coordinate;
                    } else if (geometry.getType() === 'MultiLineString') {
                        coordinate = evt.coordinate;
                    } else {
                        // For other geometries, use center
                        const extent = geometry.getExtent();
                        coordinate = [
                            (extent[0] + extent[2]) / 2,
                            (extent[1] + extent[3]) / 2
                        ];
                    }

                    // Create and show popup
                    popupContent.innerHTML = createPopupContent(layerType, itemData, jangka);
                    overlay.setPosition(coordinate);
                    
                    // Add event listeners for treatment badges (only for sekolah)
                    if (layerType === 'sekolah') {
                        const treatmentBadges = popupContent.querySelectorAll('.treatment-badge');
                        const fotoImg = popupContent.querySelector('#popup-foto-img');
                        const fotoContainer = popupContent.querySelector('#popup-foto-container');
                        
                        if (treatmentBadges.length > 0 && fotoImg && fotoContainer) {
                            treatmentBadges.forEach(function(badge) {
                                badge.addEventListener('click', function(e) {
                                    e.stopPropagation();
                                    const treatment = this.getAttribute('data-treatment');
                                    const fotoUrl = '{{ asset('images') }}/' + treatment + '.png';
                                    
                                    // Update foto
                                    fotoImg.src = fotoUrl;
                                    fotoImg.alt = 'Foto ' + (itemData.nama_sekolah || 'Sekolah');
                                    
                                    // Update onclick for foto container
                                    fotoContainer.setAttribute('onclick', "previewFoto('" + fotoUrl + "')");
                                    
                                    // Remove active class from all badges
                                    treatmentBadges.forEach(function(b) {
                                        b.classList.remove('active');
                                    });
                                    // Add active class to clicked badge
                                    this.classList.add('active');
                                });
                                
                                // Set first badge as active by default
                                if (badge === treatmentBadges[0]) {
                                    badge.classList.add('active');
                                }
                            });
                        }
                    }
                }
            } else {
                // Close popup if clicked outside features or on kecamatan layer
                overlay.setPosition(undefined);
            }
        });

        // Change cursor on hover (excluding kecamatan layer)
        map.on('pointermove', function(evt) {
            const pixel = map.getEventPixel(evt.originalEvent);
            let hit = false;
            map.forEachFeatureAtPixel(pixel, function(feature, layer) {
                const layerType = layer.get('layerType');
                const itemData = layer.get('itemData');
                // Only consider layers with itemData (exclude kecamatan)
                if (itemData && layerType !== 'kecamatan') {
                    hit = true;
                }
            }, {
                layerFilter: function(layer) {
                    if (!(layer instanceof ol.layer.Vector)) {
                        return false;
                    }
                    const layerType = layer.get('layerType');
                    return layerType !== 'kecamatan';
                },
                hitTolerance: 5
            });
            map.getTarget().style.cursor = hit ? 'pointer' : '';
        });
    });

    // Function to preview photo in modal
    function previewFoto(fotoUrl) {
        const modal = document.getElementById('modal-foto');
        const modalImg = document.getElementById('modal-foto-img');
        modal.style.display = 'block';
        modalImg.src = fotoUrl;
    }

    // Close modal when clicking close button
    document.getElementById('modal-foto-close').onclick = function() {
        document.getElementById('modal-foto').style.display = 'none';
    };

    // Close modal when clicking outside the image
    document.getElementById('modal-foto').onclick = function(event) {
        if (event.target === this) {
            this.style.display = 'none';
        }
    };
</script>
@endpush