@extends('layouts.app')

@section('content')

<style>
    
.panel {
    position: absolute;
    top: 10px;
    right: 10px;
    background: white;
    padding: 15px;
    border-radius: 8px;
    width: 250px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    z-index: 1000; /* 🔥 tambahin ini */
}

.panel h3 {
    margin-top: 0;
}

.leaflet-control-minimap {
    border: 2px solid white !important;
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

.leaflet-control-minimap .leaflet-container {
    border-radius: 8px;
}

</style>

    <!-- Map Area (Fills remaining height) -->
    <main class="flex-1 w-full relative z-0">
        
        <!-- MAP -->
        <div id="map" class="absolute inset-0 w-full h-full bg-slate-900"></div>

        <!-- Tombol Layer -->
        <div class="absolute top-4 right-4 z-[1000]">
            <button id="layerBtn"
                class="w-11 h-11 bg-white rounded-xl shadow-lg border border-slate-200 flex items-center justify-center hover:bg-slate-50 transition">
                <i class="fas fa-layer-group text-slate-700 text-lg"></i>
            </button>

            <!-- Panel Layer -->
            <div id="layerPanel"
                class="hidden mt-3 w-72 bg-white rounded-2xl shadow-2xl border border-slate-200 overflow-hidden">

                <!-- Header -->
                <div class="px-5 py-4 border-b bg-slate-50">
                    <h3 class="font-semibold text-slate-800">
                        Layer Control
                    </h3>
                    <p class="text-xs text-slate-500">
                        Pilih basemap dan layer yang ingin ditampilkan.
                    </p>
                </div>

                <div class="max-h-[350px] overflow-y-auto">

                    <!-- Basemap -->
                    <div class="p-5 border-b">

                        <h4 class="text-sm font-semibold text-slate-700 mb-3">
                            Basemap
                        </h4>

                        <label class="flex items-center gap-2 mb-2 cursor-pointer">
                            <input type="radio" name="basemap" id="osm" checked>
                            <span>OpenStreetMap</span>
                        </label>

                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="radio" name="basemap" id="satellite">
                            <span>Satellite</span>
                        </label>

                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="radio" name="basemap" id="topo">
                            <span>Topografi</span>
                        </label>
                    </div>

                    <!-- Layer -->
                    <div class="p-5">

                        <h4 class="text-sm font-semibold text-slate-700 mb-3">
                            Layer Peta
                        </h4>

                        <div class="space-y-2 text-sm">

                            <label class="flex items-center gap-2">
                                <input type="checkbox" id="kecamatan" checked>
                                <span>Batas Kecamatan</span>
                            </label>

                            <label class="flex items-center gap-2">
                                <input type="checkbox" id="desa" checked>
                                <span>Batas Desa</span>
                            </label>

                            <label class="flex items-center gap-2">
                                <input type="checkbox" id="jalan">
                                <span>Jalan</span>
                            </label>

                            <label class="flex items-center gap-2">
                                <input type="checkbox" id="resiko">
                                <span class="font-semibold">Risiko</span>
                            </label>

                            <label class="flex items-center gap-2">
                                <input type="checkbox" id="ancaman">
                                <span class="font-semibold">Ancaman</span>
                            </label>

                            <label class="flex items-center gap-2">
                                <input type="checkbox" id="hujan">
                                <span>Curah Hujan</span>
                            </label>

                            <label class="flex items-center gap-2">
                                <input type="checkbox" id="kemiringan">
                                <span>Kemiringan Lereng</span>
                            </label>

                            <label class="flex items-center gap-2">
                                <input type="checkbox" id="tanah">
                                <span>Jenis Tanah</span>
                            </label>

                            <label class="flex items-center gap-2">
                                <input type="checkbox" id="geologi">
                                <span>Geologi</span>
                            </label>

                            <label class="flex items-center gap-2">
                                <input type="checkbox" id="tutupan">
                                <span>Tutupan Lahan</span>
                            </label>

                            <label class="flex items-center gap-2">
                                <input type="checkbox" id="kapasitas">
                                <span class="font-semibold">Kapasitas</span>
                            </label>

                            <label class="flex items-center gap-2">
                                <input type="checkbox" id="dana">
                                <span>Dana Bencana</span>
                            </label>

                            <label class="flex items-center gap-2">
                                <input type="checkbox" id="jalur">
                                <span>Jalur Evakuasi</span>
                            </label>

                            <label class="flex items-center gap-2">
                                <input type="checkbox" id="pengetahuan">
                                <span>Pengetahuan Longsor</span>
                            </label>

                            <label class="flex items-center gap-2">
                                <input type="checkbox" id="sosialisasi">
                                <span>Sosialisasi Bencana</span>
                            </label>

                            <label class="flex items-center gap-2">
                                <input type="checkbox" id="tempat">
                                <span>Tempat Evakuasi</span>
                            </label>

                            <label class="flex items-center gap-2">
                                <input type="checkbox" id="tim">
                                <span>Tim Penanggulangan</span>
                            </label>

                            <label class="flex items-center gap-2">
                                <input type="checkbox" id="kerentanan">
                                <span class="font-semibold">Kerentanan</span>
                            </label>

                            <label class="flex items-center gap-2">
                                <input type="checkbox" id="fasilitas">
                                <span>Fasilitas Umum</span>
                            </label>

                            <label class="flex items-center gap-2">
                                <input type="checkbox" id="jumlah">
                                <span>Jumlah Penduduk</span>
                            </label>

                            <label class="flex items-center gap-2">
                                <input type="checkbox" id="kemiskinan">
                                <span>Kemiskinan</span>
                            </label>

                            <label class="flex items-center gap-2">
                                <input type="checkbox" id="usia">
                                <span>Usia Rentan</span>
                            </label>

                        </div>

                    </div>

                </div>
            </div>
        </div>
        
        <!-- Custom Map Controls (Top Left) -->
        {{-- <div class="absolute top-4 left-4 z-[1000] flex flex-col shadow-md rounded bg-white">
            <button onclick="map.zoomIn()" class="w-8 h-8 flex items-center justify-center hover:bg-slate-100 border-b border-slate-200 text-slate-700 transition" title="Perbesar">
                <i class="fas fa-plus text-sm"></i>
            </button>
            <button onclick="map.zoomOut()" class="w-8 h-8 flex items-center justify-center hover:bg-slate-100 border-b border-slate-200 text-slate-700 transition" title="Perkecil">
                <i class="fas fa-minus text-sm"></i>
            </button>
            <button class="w-8 h-8 flex items-center justify-center hover:bg-slate-100 border-b border-slate-200 text-slate-700 transition" title="Pencarian">
                <i class="fas fa-search text-sm"></i>
            </button>
            <button class="w-8 h-8 flex items-center justify-center hover:bg-slate-100 border-b border-slate-200 text-slate-700 transition" title="Alat Ukur">
                <!-- Using a polygon draw icon as seen in the image -->
                <i class="fas fa-draw-polygon text-sm"></i>
            </button>
            <button class="w-8 h-8 flex items-center justify-center hover:bg-slate-100 text-slate-700 rounded-b transition" title="Cetak Peta">
                <i class="fas fa-print text-sm"></i>
            </button>
        </div> --}}
        <!-- Custom Scale Bar (Bottom Left) -->
        <div class="absolute bottom-6 left-4 z-[1000] bg-white border border-slate-300 p-1 rounded-sm shadow text-[10px] font-medium text-slate-800 w-16">
            <div class="border-b-2 border-l-2 border-black text-center pb-0.5 mb-1 leading-none">5 km</div>
            <div class="text-center pt-0.5 leading-none">3 mi</div>
        </div>

        <!-- Bottom Right Area (Legend & Minimap) -->
     <div class="absolute bottom-4 right-60 right-4 z-[1000] flex items-end gap-3 pointer-events-none">

    <!-- Legend -->
    <div class="bg-white p-4 rounded-lg shadow-xl border border-slate-200 pointer-events-auto">
        <div class="flex gap-6 text-[11px] text-slate-800">

            <!-- Zona -->
            <div>
                <div class="font-bold mb-3 uppercase tracking-wide">
                    Zona Rawan Longsor
                </div>

                <div class="space-y-2 mb-4">
                    <div class="flex items-center">
                        <span class="w-4 h-4 bg-[#5c9818] rounded mr-2"></span>
                        Rendah
                    </div>

                    <div class="flex items-center">
                        <span class="w-4 h-4 bg-[#facc15] rounded mr-2"></span>
                        Sedang
                    </div>

                    <div class="flex items-center">
                        <span class="w-4 h-4 bg-[#f97316] rounded mr-2"></span>
                        Tinggi
                    </div>

                    <div class="flex items-center">
                        <span class="w-4 h-4 bg-[#dc2626] rounded mr-2"></span>
                        Sangat Tinggi
                    </div>
                </div>
            </div>

            <!-- Marker -->
            <div>
                {{-- <div class="space-y-2 mt-7">

                    <div class="flex items-center">
                        <i class="fas fa-circle text-red-600 w-5"></i>
                        Titik Longsor
                    </div>

                    <div class="flex items-center">
                        <i class="fas fa-mosque text-green-700 w-5"></i>
                        Masjid
                    </div>

                    <div class="flex items-center">
                        <i class="fas fa-graduation-cap text-blue-600 w-5"></i>
                        Sekolah
                    </div>

                    <div class="flex items-center">
                        <i class="fas fa-building text-orange-500 w-5"></i>
                        Kantor Desa
                    </div>

                    <div class="flex items-center">
                        <i class="fas fa-plus-circle text-purple-600 w-5"></i>
                        Pustu
                    </div>

                </div> --}}
            </div>

        </div>
    </div>

</div>
    </main>

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/esri-leaflet"></script>
<script src="https://unpkg.com/terraformer@1.0.12"></script>
<script src="https://unpkg.com/terraformer-arcgis-parser@1.0.5"></script>
<script src="https://unpkg.com/leaflet-minimap/dist/Control.MiniMap.min.js"></script>

    <script>
        const layerBtn = document.getElementById('layerBtn');
        const layerPanel = document.getElementById('layerPanel');

        layerBtn.addEventListener('click', function (e) {
            e.stopPropagation();
            layerPanel.classList.toggle('hidden');
        });

        document.addEventListener('click', function (e) {
            if (!layerPanel.contains(e.target) && !layerBtn.contains(e.target)) {
                layerPanel.classList.add('hidden');
            }
        });
        

        // document.addEventListener('DOMContentLoaded', () => {
        //     // 1. Inisialisasi Peta Leaflet (Koordinat wilayah Sulawesi Selatan/Luwu)
            
        //     // 3. Konfigurasi Ikon Kustom FontAwesome
        //     const createCustomIcon = (iconClass, bgColorClass, textColorClass = 'text-white') => {
        //         return L.divIcon({
        //             html: `<div class="w-6 h-6 rounded-full flex items-center justify-center shadow-md border-[1.5px] border-white ${bgColorClass}">
        //                      <i class="${iconClass} ${textColorClass} text-[10px]"></i>
        //                    </div>`,
        //             className: 'custom-leaflet-icon',
        //             iconSize: [24, 24],
        //             iconAnchor: [12, 12]
        //         });
        //     };

        //     const iconMosque = createCustomIcon('fas fa-mosque', 'bg-green-600');
        //     const iconSchool = createCustomIcon('fas fa-graduation-cap', 'bg-blue-600');
        //     const iconOffice = createCustomIcon('fas fa-building', 'bg-orange-500');
        //     const iconPostu = createCustomIcon('fas fa-plus', 'bg-purple-600');
            
        //     // Ikon khusus untuk titik longsor (hanya dot merah)
        //     const iconLandslide = L.divIcon({
        //         html: '<div class="w-3.5 h-3.5 bg-red-600 rounded-full border border-white shadow-sm"></div>',
        //         className: 'custom-leaflet-icon',
        //         iconSize: [14, 14],
        //         iconAnchor: [7, 7]
        //     });

        //     // 4. Sebar Titik Penanda (Dummy Data) untuk mempercantik dan mereplikasi gambar
        //     const markersData = [
        //         { pos: [-3.31, 120.15], type: iconMosque },
        //         { pos: [-3.32, 120.18], type: iconSchool },
        //         { pos: [-3.34, 120.20], type: iconOffice },
        //         { pos: [-3.37, 120.16], type: iconPostu },
        //         { pos: [-3.36, 120.22], type: iconMosque },
        //         { pos: [-3.35, 120.14], type: iconSchool },
        //         { pos: [-3.38, 120.19], type: iconOffice },
        //         { pos: [-3.33, 120.24], type: iconPostu },
        //         // Titik Longsor
        //         { pos: [-3.32, 120.16], type: iconLandslide },
        //         { pos: [-3.34, 120.18], type: iconLandslide },
        //         { pos: [-3.36, 120.20], type: iconLandslide },
        //         { pos: [-3.31, 120.21], type: iconLandslide },
        //         { pos: [-3.39, 120.17], type: iconLandslide }
        //     ];

        //     markersData.forEach(data => {
        //         L.marker(data.pos, { icon: data.type }).addTo(map);
        //     });

        //     // Simulasi overlay Heatmap Polygon (Untuk demo agar terlihat mirip gambar)
        //     // Memasang overlay kotak warna-warni yang transparan di atas map
        //     const bounds = [[-3.4, 120.1], [-3.3, 120.3]];
        //     L.rectangle(bounds, {color: "#000000", weight: 0, fillOpacity: 0.1}).addTo(map);
        // });
    </script>

    


<script>

// INIT MAP
var map = L.map('map').setView([-3.3469, 120.2366], 13);

var osmMini = L.tileLayer(
    'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
    {
        attribution: '&copy; OpenStreetMap &copy; CARTO'
    }
);

new L.Control.MiniMap(osmMini, {
    position: 'bottomright',
    width: 180,
    height: 160,
    toggleDisplay: false,
    minimized: false,
    zoomLevelOffset: -5
}).addTo(map);

// BASEMAP
var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var sat = L.tileLayer('https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
    subdomains:['mt0','mt1','mt2','mt3']
});
// Topografi
var topo = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
    {
        attribution: '&copy; OpenTopoMap',
        maxZoom:17
    }
);

osm.addTo(map);


var jalanLayer = L.geoJSON(null, {
    style: function(feature){
        return {
            color: "#000",
            weight: 3,
            opacity: 1
        };
    }
});
var resikoLayer = L.geoJSON(null, {color:"orange"});
// ======================= layer ancaman =======================
var ancamanLayer = L.geoJSON(null);
var hujanLayer = L.geoJSON(null);
var geologiLayer = L.geoJSON(null);
var kemiringanLayer = L.geoJSON(null);
var tutupanLayer = L.geoJSON(null);
var tanahLayer = L.geoJSON(null);
// ====================== end layer ancaman =======================
// ===================== layer kapasitas =======================
var kapasitasLayer = L.geoJSON(null);
var danaLayer = L.geoJSON(null);
var jalurLayer = L.geoJSON(null);
var pengetahuanLayer = L.geoJSON(null);
var sosialisasiLayer = L.geoJSON(null);
var tempatLayer = L.geoJSON(null);
var timLayer = L.geoJSON(null);
// ===================== end layer kapasitas =======================
// ====================== layer kerentanan =======================
var kerentananLayer = L.geoJSON(null);
var fasilitasLayer = L.geoJSON(null);
var pendudukLayer = L.geoJSON(null);
var usiaLayer = L.geoJSON(null);
var kemiskinanLayer = L.geoJSON(null);

// ===================== end layer kerentanan =======================


// ====================== layer resiko =======================
function getColor(kelas) {
    return kelas === "Sangat Tinggi" ? "red" :
            kelas === "Tinggi" ? "orange" :
           kelas === "Sedang" ? "yellow" :
           kelas === "Rendah" ? "green" :
           "gray"; // default
}

var resikoLayer = L.geoJSON(null, {
    style: function(feature) {
        return {
            color: getColor(feature.properties.kelas),
            fillColor: getColor(feature.properties.kelas),
            fillOpacity: 0.6,
            weight: 1
        };
    }
});
// ====================== end layer resiko =======================


// ======================= layer ancaman =======================
function getColorHujan(Skor) {
    return Skor == 5 ? "red" :   // sangat tinggi
           Skor == 4 ? "orange" :   // tinggi
           Skor == 3 ? "yellow" :   // sedang
           Skor == 2 ? "green" :   // rendah
           "#cccccc";               // default
}

var hujanLayer = L.geoJSON(null, {
    style: function(feature) {
        return {
            color: "#333",
            weight: 1,
            fillColor: getColorHujan(feature.properties.Skor),
            fillOpacity: 0.7
        };
    },
    onEachFeature: function(feature, layer) {
        layer.bindPopup(`
            <b>Skor</b> : ${feature.properties.Skor}<br>
            
        `);
    }
});

function getColorAncaman(DN) {
    return DN == 4 ? "#ff0000" :   // tinggi
           DN == 3 ? "rgba(255, 255, 0, 8)" :   // sedang
           DN == 2 ? "rgba(0, 255, 0, 8)" :   // rendah
           "#cccccc";               // default
}

var ancamanLayer = L.geoJSON(null, {
    style: function(feature) {
        return {
            color: "#333",
            weight: 1,
            fillColor: getColorAncaman(feature.properties.DN),
            fillOpacity: 0.7
        };
    }
});

function getColorGeologi(nama) {
    switch (nama) {
        case "Alluvium":
            return "#ffff99";   // kuning muda

        case "Batuan Terobosan":
            return "#ff6666";   // merah

        case "Lava":
            return "#ff9900";   // oranye


        default:
            return "#cccccc";   // warna default
    }
}

var geologiLayer = L.geoJSON(null, {
    style: function(feature) {
        return {
            color: "#333",
            weight: 1,
            fillColor: getColorGeologi(feature.properties.NAME),
            fillOpacity: 0.7
        };
    },
    onEachFeature: function(feature, layer) {
        layer.bindPopup(`
            <b>Nama</b> : ${feature.properties.NAME}<br>
            <b>Formasi</b> : ${feature.properties.FORMATION}<br>
            <b>Litologi</b> : ${feature.properties.CLASS_LITH}<br>
            
        `);
    }
});

function getColorTanah(jenis) {
    switch (jenis) {
        case "Gleisol Eutrik":
            return "#4CAF50"; // hijau

        case "Kambisol Eutrik":
            return "#FFD54F"; // kuning

        case "Oksisol Eutrik":
            return "#FF9800"; // oranye

        case "Oksisol Haplik":
            return "#F44336"; // merah

        case "Pulau-pulau kecil":
            return "#2196F3"; // biru

        default:
            return "#BDBDBD"; // abu-abu
    }
}

var tanahLayer = L.geoJSON(null, {
    style: function(feature) {
        return {
            color: "#333",
            weight: 1,
            fillColor: getColorTanah(feature.properties.jntnh1),
            fillOpacity: 0.7
        };
    },
    onEachFeature: function(feature, layer) {
        layer.bindPopup(`
            <b>Jenis Tanah:</b> ${feature.properties.jntnh1}<br>
        `);
    }
});

function getColorKemiringan(kelas) {
    switch (kelas) {
        case "Datar":
            return "#00b050"; // hijau

        case "Landai":
            return "#92d050"; // hijau muda

        case "Agak Curam":
            return "#ffff00"; // kuning

        case "Curam":
            return "#ff9900"; // oranye

        case "Sangat Curam":
            return "#ff0000"; // merah

        default:
            return "#cccccc"; // abu-abu
    }
}

var kemiringanLayer = L.geoJSON(null, {
    style: function(feature) {
        return {
            color: "#333",
            weight: 1,
            fillColor: getColorKemiringan(feature.properties.kelas),
            fillOpacity: 0.7
        };
    },
    onEachFeature: function(feature, layer) {
        layer.bindPopup(`
            <b>Kemiringan Lereng:</b> ${feature.properties.kelas}<br>
        `);
    }
});

function getColorTutupan(gunaLahan) {
    switch (gunaLahan) {
        case "Badan Air":
            return "#2196F3"; // Biru

        case "Hutan":
            return "#006400"; // Hijau tua

        case "Semak Belukar":
            return "#7CB342"; // Hijau muda

        case "Lahan Terbuka":
            return "#8B4513"; // Coklat muda

        case "Pemukiman":
            return "#E53935"; // Merah

        case "Peranian":
        case "Pertanian":
            return "#FFD54F"; // Kuning

        default:
            return "#BDBDBD"; // Abu-abu
    }
}

var tutupanLayer = L.geoJSON(null, {
    style: function(feature) {
        return {
            color: "#333",
            weight: 1,
            fillColor: getColorTutupan(feature.properties.guna_lahan),
            fillOpacity: 0.7
        };
    },
    onEachFeature: function(feature, layer) {
        layer.bindPopup(`
            <b>Tutupan Lahan:</b> ${feature.properties.guna_lahan}
        `);
    }
});

// ======================= end layer ancaman =======================

// ======================= layer kapasitas =======================
function getColorDesa(nama) {
    switch (nama) {
        case "Tumbubara":
            return "#e41a1c"; // merah

        case "Sampeang":
            return "#377eb8"; // biru

        case "Bonelemo":
            return "#4daf4a"; // hijau

        case "Kadong-Kadong":
            return "#984ea3"; // ungu

        case "Tettekang":
            return "#ff7f00"; // oranye

        case "Saronda":
            return "#ffff33"; // kuning

        case "Marinding":
            return "#a65628"; // coklat

        case "Bonelemo Barat":
            return "#f781bf"; // pink

        case "Bonelemo Utara":
            return "#999999"; // abu-abu

        default:
            return "#cccccc";
    }
}

function getColorKapasitas(OBJECTID) {
    return OBJECTID == 3 ? "#ff0000" :   // tinggi
           OBJECTID == 2 ? "rgba(255, 255, 0, 8)" :   // sedang
           OBJECTID == 1 ? "rgba(0, 255, 0, 8)" :   // rendah
           "#cccccc";               // default
}

var kapasitasLayer = L.geoJSON(null, {
    style: function(feature) {
        return {
            color: "#333",
            weight: 1,
            fillColor: getColorKapasitas(feature.properties.OBJECTID),
            fillOpacity: 0.7
        };
    },
    onEachFeature: function(feature, layer) {
        layer.bindPopup(`
            <b>Desa:</b> ${feature.properties.NAMOBJ}<br>
            <b>Kapasitas:</b> ${feature.properties.kapasitas}<br>
        `);
    }
});

function getColorDana(DANA) {
    return DANA === "Tinggi" ? "#ff0000" :   // tinggi
           DANA === "Sedang" ? "rgba(255, 255, 0, 8)" :   // sedang
           DANA === "Rendah" ? "rgba(0, 255, 0, 8)" :   // rendah
           "#cccccc";               // default
}

var danaLayer = L.geoJSON(null, {
    style: function(feature) {
        return {
            color: "#333",
            weight: 1,
            fillColor: getColorDana(feature.properties.DANA),
            fillOpacity: 0.7
        };
    },
    onEachFeature: function(feature, layer) {
        layer.bindPopup(`
            <b>Desa:</b> ${feature.properties.NAMOBJ}<br>
            <b>Dana:</b> ${feature.properties.DANA}
        `);
    }
});

function getColorJalur(JALUR_EV) {
    return JALUR_EV === "Tinggi" ? "#ff0000" :   // tinggi
           JALUR_EV === "Sedang" ? "rgba(255, 255, 0, 8)" :   // sedang
           JALUR_EV === "Rendah" ? "rgba(0, 255, 0, 8)" :   // rendah
           "#cccccc";               // default
}

var jalurLayer = L.geoJSON(null, {
    style: function(feature) {
        return {
            color: "#333",
            weight: 1,
            fillColor: getColorJalur(feature.properties.JALUR_EV),
            fillOpacity: 0.7
        };
    },
    onEachFeature: function(feature, layer) {
        layer.bindPopup(`
            <b>Desa:</b> ${feature.properties.NAMOBJ}<br>
            <b>Jalur Evakuasi:</b> ${feature.properties.JALUR_EV}
        `);
    }
});

var pengetahuanLayer = L.geoJSON(null, {
        style: function(feature) {
        return {
            color: "#333",
            weight: 1,
            fillColor: getColorJalur(feature.properties.PENGET),
            fillOpacity: 0.7
        };
    },
    onEachFeature: function(feature, layer) {
        layer.bindPopup(`
            <b>Desa:</b> ${feature.properties.NAMOBJ}<br>
            <b>Pengetahuan Longsor:</b> ${feature.properties.PENGET}
        `);
    }
});

var sosialisasiLayer = L.geoJSON(null, {
    style: function(feature) {
        return {
            color: "#333",
            weight: 1,
            fillColor: getColorJalur(feature.properties.SOSIAL),
            fillOpacity: 0.7
        };
    },
    onEachFeature: function(feature, layer) {
        layer.bindPopup(`
            <b>Desa:</b> ${feature.properties.NAMOBJ}<br>
            <b>Sosialisasi Bencana:</b> ${feature.properties.SOSIAL}
        `);
    }
});

var tempatLayer = L.geoJSON(null, {
    style: function(feature) {
        return {
            color: "#333",
            weight: 1,
            fillColor: getColorJalur(feature.properties.TMP_EVAK),
            fillOpacity: 0.7
        };
    },
    onEachFeature: function(feature, layer) {
        layer.bindPopup(`
            <b>Desa:</b> ${feature.properties.NAMOBJ}<br>
            <b>Tempat Evakuasi:</b> ${feature.properties.TMP_EVAK}
        `);
    }
});

var timLayer = L.geoJSON(null, {
    style: function(feature) {
        return {
            color: "#333",
            weight: 1,
            fillColor: getColorJalur(feature.properties.TIM_BENC),
            fillOpacity: 0.7
        };
    },
    onEachFeature: function(feature, layer) {
        layer.bindPopup(`
            <b>Desa:</b> ${feature.properties.NAMOBJ}<br>
            <b>Tim Penanggulangan:</b> ${feature.properties.TIM_BENC}
        `);
    }
});
// ====================== end layer kapasitas =======================

// ====================== layer kerentanan =======================
function getColorRentan(kelas) {
    return kelas === "Tinggi" ? "#ff0000" :   // tinggi
           kelas === "Sedang" ? "rgba(255, 255, 0, 8)" :   // sedang
           kelas === "Rendah" ? "rgba(0, 255, 0, 8)" :   // rendah
           "#cccccc";               // default
}

var kerentananLayer = L.geoJSON(null, {
    style: function(feature) {
        return {
            color: "#333",
            weight: 1,
            fillColor: getColorRentan(feature.properties.kelas),
            fillOpacity: 0.7
        };
    },
    // onEachFeature: function(feature, layer) {
    //     layer.bindPopup(`
    //         <b>Desa:</b> ${feature.properties.NAMOBJ}<br>
    //         <b>Kerentanan:</b> ${feature.properties.DN}
    //     `);
    // }
});

var fasilitasLayer = L.geoJSON(null, {
    style: function(feature) {
        return {
            color: "#333",
            weight: 1,
            fillColor: getColorDesa(feature.properties.NAMOBJ),
            fillOpacity: 0.7
        };
    },
    onEachFeature: function(feature, layer) {
        layer.bindPopup(`
            <b>Desa:</b> ${feature.properties.NAMOBJ}<br>
            <b>Fasilitas Umum:</b> ${feature.properties.FASUM}
        `);
    }
});

var pendudukLayer = L.geoJSON(null, {
    style: function(feature) {
        return {
            color: "#333",
            weight: 1,
            fillColor: getColorDesa(feature.properties.NAMOBJ),
            fillOpacity: 0.7
        };
    },
    onEachFeature: function(feature, layer) {
        layer.bindPopup(`
            <b>Desa:</b> ${feature.properties.NAMOBJ}<br>
            <b>Jumlah Penduduk:</b> ${feature.properties.JML_PDDK}
        `);
    }
});

var kemiskinanLayer = L.geoJSON(null, {
    style: function(feature) {
        return {
            color: "#333",
            weight: 1,
            fillColor: getColorDesa(feature.properties.NAMOBJ),
            fillOpacity: 0.7
        };
    },
    onEachFeature: function(feature, layer) {
        layer.bindPopup(`
            <b>Desa:</b> ${feature.properties.NAMOBJ}<br>
            <b>Kemiskinan:</b> ${feature.properties.MISKIN}
        `);
    }
});

var usiaLayer = L.geoJSON(null, {
    style: function(feature) {
        return {
            color: "#333",
            weight: 1,
            fillColor: getColorDesa(feature.properties.NAMOBJ),
            fillOpacity: 0.7
        };
    },
    onEachFeature: function(feature, layer) {
        layer.bindPopup(`
            <b>Desa:</b> ${feature.properties.NAMOBJ}<br>
            <b>Usia Rentan:</b> ${feature.properties.USIA_RT}
        `);
    }
});

// ====================== end layer kerentanan =======================
// ====================== layer kecamatan =======================
var kecamatanLayer = L.geoJSON(null, {

        filter: function(feature) {
        return feature.properties.NAMOBJ === "Bajo Barat";
    },

    style: function(feature) {
        return {
            color: "blue",
            weight: 2,
fill: false
        };
    },


}).addTo(map);


fetch("{{ asset('assets/kecamatan2.geojson') }}")
.then(response => response.json())
.then(data => {

    kecamatanLayer.addData(data);

    map.fitBounds(kecamatanLayer.getBounds());



});
// ===================== layer desa =======================
var desaLayer = L.geoJSON(null, {

    style: function(feature) {
        return {
            color: "red",
            weight: 2,
            fillColor: getColorDesa(feature.properties.NAMOBJ),
            fillOpacity: 0
        };
    },

    onEachFeature: function(feature, layer) {

        const namaDesa = feature.properties.NAMOBJ || feature.properties.nama_desa || "Desa";

        layer.bindPopup("<b>" + namaDesa + "</b>");

    }

}).addTo(map);


fetch("{{ asset('assets/desa.geojson') }}")
.then(response => response.json())
.then(data => {

    desaLayer.addData(data);

    map.fitBounds(desaLayer.getBounds());



});

fetch("{{ asset('assets/jalan.geojson') }}").then(r=>r.json()).then(d=>jalanLayer.addData(d));
fetch("{{ asset('assets/resiko.geojson') }}").then(r=>r.json()).then(d=>resikoLayer.addData(d));
// ====================== layer ancaman =======================
fetch("{{ asset('assets/ancaman/ancaman.json') }}").then(r=>r.json()).then(d=>ancamanLayer.addData(d));
fetch("{{ asset('assets/ancaman/hujan.geojson') }}").then(r=>r.json()).then(d=>hujanLayer.addData(d));
fetch("{{ asset('assets/ancaman/geologi.geojson') }}").then(r=>r.json()).then(d=>geologiLayer.addData(d));
fetch("{{ asset('assets/ancaman/tutupanlahan.geojson') }}").then(r=>r.json()).then(d=>tutupanLayer.addData(d));
fetch("{{ asset('assets/ancaman/kemiringanlereng.geojson') }}").then(r=>r.json()).then(d=>kemiringanLayer.addData(d));
fetch("{{ asset('assets/ancaman/jenistanah.geojson') }}").then(r=>r.json()).then(d=>tanahLayer.addData(d));
// ====================== end layer ancaman =======================

// ====================== layer kapasitas =======================

fetch("{{ asset('assets/kapasitas/kapasitas1.geojson') }}").then(r=>r.json()).then(d=>kapasitasLayer.addData(d));
fetch("{{ asset('assets/kapasitas/Dana_Bencana.geojson') }}").then(r=>r.json()).then(d=>danaLayer.addData(d));
fetch("{{ asset('assets/kapasitas/Jalur_Evakuasi.geojson') }}").then(r=>r.json()).then(d=>jalurLayer.addData(d));
fetch("{{ asset('assets/kapasitas/Pengetahuan_Longsor.geojson') }}").then(r=>r.json()).then(d=>pengetahuanLayer.addData(d));
fetch("{{ asset('assets/kapasitas/Sosialisasi_Bencana.geojson') }}").then(r=>r.json()).then(d=>sosialisasiLayer.addData(d));
fetch("{{ asset('assets/kapasitas/Tempat_Evakuasi.geojson') }}").then(r=>r.json()).then(d=>tempatLayer.addData(d));
fetch("{{ asset('assets/kapasitas/Tim_Penanggulangan.geojson') }}").then(r=>r.json()).then(d=>timLayer.addData(d));

// ===================== end layer kapasitas =======================

// ===================== layer kerentanan =======================

fetch("{{ asset('assets/kerentanan/kerentanan3.geojson') }}").then(r=>r.json()).then(d=>kerentananLayer.addData(d));
fetch("{{ asset('assets/kerentanan/Fasilitas_Umum.geojson') }}").then(r=>r.json()).then(d=>fasilitasLayer.addData(d));
fetch("{{ asset('assets/kerentanan/Jumlah_Penduduk.geojson') }}").then(r=>r.json()).then(d=>pendudukLayer.addData(d));
fetch("{{ asset('assets/kerentanan/Kemiskinan.geojson') }}").then(r=>r.json()).then(d=>kemiskinanLayer.addData(d));
fetch("{{ asset('assets/kerentanan/Usia_Rentan.geojson') }}").then(r=>r.json()).then(d=>usiaLayer.addData(d));
// ===================== end layer kerentanan =======================

// =======================
// BASEMAP SWITCH
// =======================
document.getElementById("osm").onclick = function () {
    if (map.hasLayer(sat)) map.removeLayer(sat);
    if (map.hasLayer(topo)) map.removeLayer(topo);

    if (!map.hasLayer(osm)) {
        osm.addTo(map);
    }
};

document.getElementById("satellite").onclick = function () {
    if (map.hasLayer(osm)) map.removeLayer(osm);
    if (map.hasLayer(topo)) map.removeLayer(topo);

    if (!map.hasLayer(sat)) {
        sat.addTo(map);
    }
};

document.getElementById("topo").onclick = function () {
    if (map.hasLayer(osm)) map.removeLayer(osm);
    if (map.hasLayer(sat)) map.removeLayer(sat);

    if (!map.hasLayer(topo)) {
        topo.addTo(map);
    }
};

// =======================
// TOGGLE LAYER
// =======================
document.getElementById("desa").onchange = function(){
    this.checked ? map.addLayer(desaLayer) : map.removeLayer(desaLayer);
}
document.getElementById("kecamatan").onchange = function(){
    this.checked ? map.addLayer(kecamatanLayer) : map.removeLayer(kecamatanLayer);
}
document.getElementById("jalan").onchange = function(){
    this.checked ? map.addLayer(jalanLayer) : map.removeLayer(jalanLayer);
}
document.getElementById("resiko").onchange = function(){
    this.checked ? map.addLayer(resikoLayer) : map.removeLayer(resikoLayer);
}

// ======================= layer ancaman =======================
document.getElementById("ancaman").onchange = function(){
    this.checked ? map.addLayer(ancamanLayer) : map.removeLayer(ancamanLayer);
}
document.getElementById("hujan").onchange = function(){
    this.checked ? map.addLayer(hujanLayer) : map.removeLayer(hujanLayer);
}
document.getElementById("tutupan").onchange = function(){
    this.checked ? map.addLayer(tutupanLayer) : map.removeLayer(tutupanLayer);
}
document.getElementById("geologi").onchange = function(){
    this.checked ? map.addLayer(geologiLayer) : map.removeLayer(geologiLayer);
}
document.getElementById("kemiringan").onchange = function(){
    this.checked ? map.addLayer(kemiringanLayer) : map.removeLayer(kemiringanLayer);
}
document.getElementById("tanah").onchange = function(){
    this.checked ? map.addLayer(tanahLayer) : map.removeLayer(tanahLayer);
}

// ======================= layer kapasitas =======================
document.getElementById("kapasitas").onchange = function(){
    this.checked ? map.addLayer(kapasitasLayer) : map.removeLayer(kapasitasLayer);
}
document.getElementById("dana").onchange = function(){
    this.checked ? map.addLayer(danaLayer) : map.removeLayer(danaLayer);
}
document.getElementById("jalur").onchange = function(){
    this.checked ? map.addLayer(jalurLayer) : map.removeLayer(jalurLayer);
}
document.getElementById("pengetahuan").onchange = function(){
    this.checked ? map.addLayer(pengetahuanLayer) : map.removeLayer(pengetahuanLayer);
}
document.getElementById("sosialisasi").onchange = function(){
    this.checked ? map.addLayer(sosialisasiLayer) : map.removeLayer(sosialisasiLayer);
}
document.getElementById("tempat").onchange = function(){
    this.checked ? map.addLayer(tempatLayer) : map.removeLayer(tempatLayer);
}
document.getElementById("tim").onchange = function(){
    this.checked ? map.addLayer(timLayer) : map.removeLayer(timLayer);
}
// ====================== end layer kapasitas =======================

// ======================= layer kerentanan =======================
document.getElementById("kerentanan").onchange = function(){
    this.checked ? map.addLayer(kerentananLayer) : map.removeLayer(kerentananLayer);
}
document.getElementById("fasilitas").onchange = function(){
    this.checked ? map.addLayer(fasilitasLayer) : map.removeLayer(fasilitasLayer);
}
document.getElementById("jumlah").onchange = function(){
    this.checked ? map.addLayer(pendudukLayer) : map.removeLayer(pendudukLayer);
}
document.getElementById("kemiskinan").onchange = function(){
    this.checked ? map.addLayer(kemiskinanLayer) : map.removeLayer(kemiskinanLayer);
}
document.getElementById("usia").onchange = function(){
    this.checked ? map.addLayer(usiaLayer) : map.removeLayer(usiaLayer);
}
// ======================= end layer kerentanan =======================




</script>

@endsection