@extends('layouts.main')

@section('content')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />

   <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: { sans: ['"Plus Jakarta Sans"', 'sans-serif'] },
                    colors: {
                        primary: '#f97316', // orange-500
                        bencanaBanjir: '#3b82f6', // blue-500
                        bencanaLongsor: '#f59e0b', // amber-500
                    }
                }
            }
        }
    </script>

    <!-- ALERT BANNER -->
    <div class=" bg-red-50 border-b border-red-100">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5 flex items-center gap-3">
            <span class="flex h-2.5 w-2.5 relative">
              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
              <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-red-600"></span>
            </span>
            <span class="text-xs sm:text-sm font-semibold text-red-700">INFO TERKINI:</span>
            <div class="overflow-hidden relative flex-1 h-5">
                <p class="text-xs sm:text-sm text-red-600 absolute whitespace-nowrap animate-[marquee_15s_linear_infinite]">
                    Peringatan Dini Cuaca Ekstrem dari BMKG untuk wilayah Masamba, Sabbang, dan Baebunta pada 17 Juli 2026. Warga dihimbau waspada terhadap potensi banjir dan longsor.
                </p>
            </div>
        </div>
    </div>

   <!-- HERO SECTION -->
<section id="beranda" class="relative bg-slate-900 overflow-hidden">

  <!-- Background Image -->
<div class="absolute inset-0">
    <img
        src="https://i.ibb.co.com/tTdtR9MM/Chat-GPT-Image-18-Jul-2026-13-36-29.png"
        alt="Landscape Luwu Utara"
        class="w-full h-full object-cover"
    >

    <!-- Efek Orange -->
    <div class="absolute inset-0 bg-orange-500/50 mix-blend-multiply"></div>

    <!-- Gradient gelap + orange -->
    <div class="absolute inset-0 bg-gradient-to-r from-orange-950/90 via-orange-900/50 to-orange-500/20"></div>
</div>


    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 lg:py-36 z-10 flex flex-col items-start text-white">

        <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/10 border border-white/20 backdrop-blur-sm text-xs font-semibold mb-6 text-orange-300">
            <i class="fa-solid fa-shield-halved"></i>
            Sistem Informasi Kebencanaan Luwu Utara
        </div>

        <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight mb-6 max-w-3xl leading-[1.15]">
            Pantau & Pahami <br>
            <span class="text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-yellow-300">
                Potensi Bencana
            </span>
            di Sekitar Anda.
        </h1>

        <p class="text-lg sm:text-xl text-slate-300 mb-10 max-w-2xl font-medium leading-relaxed">
            Akses informasi geografis, data riwayat kejadian, dan peringatan dini bencana banjir serta tanah longsor di Kabupaten Luwu Utara secara real-time.
        </p>

        <div class="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">

            <a href="{{ route('peta') }}"
               class="flex items-center justify-center gap-2 bg-primary hover:bg-primaryDark text-white px-8 py-4 rounded-xl font-bold text-lg transition-all shadow-lg shadow-orange-500/30">

                <i class="fa-solid fa-map-location-dot"></i>
                Buka Peta Interaktif

            </a>

        </div>

    </div>

</section>

    <section id="beranda" class="pt-8 pb-12 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
<div class="flex flex-col md:flex-row justify-between items-start md:items-end mb-8 gap-4">
            <div>
                <h2 class="text-3xl sm:text-4xl font-extrabold text-slate-900 mb-2 tracking-tight">Pantau Kondisi Terkini.</h2>
                <p class="text-slate-500 text-base">Informasi real-time kejadian bencana dan cuaca di Luwu Utara hari ini.</p>
            </div>
            <div class="text-right">
                <p class="text-sm font-semibold text-slate-900" id="current-date">{{ \Carbon\Carbon::now()->locale('id')->translatedFormat('l, d F Y') }}</p>
                <p class="text-xs text-slate-500 flex items-center gap-1 justify-end mt-1"><i class="fa-solid fa-clock"></i> Diperbarui 10 menit lalu</p>
            </div>
        </div>

        <!-- Quick Status Cards -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
            
            <!-- Card 1: Cuaca -->
            <div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-200 flex items-center gap-4 hover:shadow-md transition-shadow">
                <div class="w-14 h-14 rounded-full bg-sky-100 text-sky-500 flex items-center justify-center text-2xl flex-shrink-0">
                    <i class="fa-solid fa-cloud-showers-heavy"></i>
                </div>
                <div>
                    <p class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-0.5">Cuaca Dominan</p>
                        <h3 class="text-xl font-bold text-slate-900">
                            {{ $cuaca['kondisi'] ?? 'Tidak tersedia' }}
                        </h3>

                        <p class="text-xs text-slate-400 mt-1">
                            Suhu {{ $cuaca['suhu'] ?? '-' }}°C
                        </p>
                </div>
            </div>

            <!-- Card 2: Status Banjir -->
            <div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-200 flex items-center gap-4 hover:shadow-md transition-shadow">
                <div class="w-14 h-14 rounded-full bg-blue-100 text-bencanaBanjir flex items-center justify-center text-2xl flex-shrink-0">
                    <i class="fa-solid fa-water"></i>
                </div>
                <div>
                    <p class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-0.5">Banjir</p>
                    <div class="flex items-baseline gap-2">
                        <h3 class="text-2xl font-extrabold text-slate-900 leading-none"> {{ $jumlahBanjir }}</h3>
                        <span class="text-sm font-semibold text-slate-500">Titik</span>
                    </div>
                
                </div>
            </div>

            <!-- Card 3: Status Longsor -->
            <div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-200 flex items-center gap-4 hover:shadow-md transition-shadow">
                <div class="w-14 h-14 rounded-full bg-amber-100 text-bencanaLongsor flex items-center justify-center text-2xl flex-shrink-0">
                    <i class="fa-solid fa-mountain-city"></i>
                </div>
                <div>
                    <p class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-0.5">Longsor</p>
                    <div class="flex items-baseline gap-2">
                        <h3 class="text-2xl font-extrabold text-slate-900 leading-none"> {{ $jumlahLongsor }}</h3>
                        <span class="text-sm font-semibold text-slate-500">Titik</span>
                    </div>
                   
                </div>
            </div>

            <!-- Card 4: Pengungsi -->
            <div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-200 flex items-center gap-4 hover:shadow-md transition-shadow">
                <div class="w-14 h-14 rounded-full bg-emerald-100 text-emerald-500 flex items-center justify-center text-2xl flex-shrink-0">
                    <i class="fa-solid fa-tents"></i>
                </div>
                <div>
                    <p class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-0.5">Warga Terdampak</p>
                    <div class="flex items-baseline gap-2">
                        <h3 class="text-2xl font-extrabold text-slate-900 leading-none"> {{ number_format($jumlahTerdampak) }}</h3>
                        <span class="text-sm font-semibold text-slate-500">Jiwa</span>
                    </div>
                    <p class="text-xs text-emerald-600 font-medium mt-1">Bantuan didistribusikan</p>
                </div>
            </div>

        </div>
    </section>


    <!-- INTERACTIVE MAP PREVIEW SECTION -->
    <section id="peta" class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-slate-900 mb-4">Peta Administrasi</h2>
                <p class="text-slate-500 max-w-2xl mx-auto">Visualisasi  wilayah Kabupaten Luwu Utara.</p>
            </div>

            <div class="grid lg:grid-cols-3 gap-8 items-start">
                
                <!-- Map Container (Mockup) -->
                <div class="lg:col-span-2 relative  overflow-hidden  rounded-2xl border-4 border-white shadow-xl bg-grid-pattern group cursor-pointer">
               
                    <div id="map" class="w-full h-[500px]"></div>

                                        <div id="miniMap"
                        class="absolute bottom-4 right-4 z-[1000]
                                w-32 h-40 border rounded-lg shadow-lg">
                    </div>
                    
                    <!-- Overlays -->
                    {{-- <div class="absolute inset-0 bg-gradient-to-b from-slate-900/10 to-transparent pointer-events-none"></div>
                    <div class="absolute top-4 left-4 bg-white/90 backdrop-blur px-4 py-2 rounded-lg shadow-sm font-semibold text-sm text-slate-700 flex items-center gap-2">
                        <i class="fa-solid fa-layer-group text-primary"></i> WebGIS Preview
                    </div>
                     --}}

                    <!-- Hover CTA -->
                    {{-- <div class="absolute inset-0 bg-slate-900/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center backdrop-blur-[2px]">
                        <button class="bg-white text-slate-900 px-6 py-3 rounded-full font-bold shadow-xl transform translate-y-4 group-hover:translate-y-0 transition-all">
                            Buka Layar Penuh <i class="fa-solid fa-expand ml-2"></i>
                        </button>
                    </div> --}}
                </div>

                <!-- Recent Incidents List -->
                <div class="bg-white border border-slate-200 rounded-2xl shadow-sm p-6">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="font-bold text-lg text-slate-900">Kejadian Terbaru</h3>
                        {{-- <span class="bg-red-100 text-red-600 text-xs font-bold px-2 py-1 rounded-md">Live</span> --}}
                    </div>

<div class="space-y-4">

@forelse($kejadianTerbaru as $item)

    <div class="flex gap-4 p-3 hover:bg-slate-50 rounded-xl transition-colors border border-transparent hover:border-slate-100 cursor-pointer">

        {{-- Icon berdasarkan jenis bencana --}}
        @if($item->jenis_bencana == 'Banjir')

            <div class="w-12 h-12 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center flex-shrink-0 text-xl">
                <i class="fa-solid fa-water"></i>
            </div>

        @else

            <div class="w-12 h-12 rounded-full bg-orange-100 text-orange-600 flex items-center justify-center flex-shrink-0 text-xl">
                <i class="fa-solid fa-hill-rockslide"></i>
            </div>

        @endif


        <div>

            <h4 class="font-semibold text-slate-800 text-sm">
                {{ $item->jenis_bencana }}
            </h4>


            <p class="text-xs text-slate-500 mt-0.5">
                <i class="fa-solid fa-location-dot mr-1"></i>

                Kec. {{ $item->kecamatan }}
                ({{ $item->lokasi }})
            </p>


            <p class="text-[11px] font-medium text-slate-400 mt-1">

                {{ \Carbon\Carbon::parse($item->tanggal_kejadian)
                    ->locale('id')
                    ->diffForHumans() }}

            </p>

        </div>

    </div>


@empty

<p class="text-sm text-slate-500 text-center">
    Belum ada data kejadian.
</p>

@endforelse

</div>

                    {{-- <button class="w-full mt-6 py-3 border border-slate-200 text-slate-600 font-semibold rounded-xl hover:bg-slate-50 hover:text-slate-900 transition-colors text-sm">
                        Lihat Semua Data
                    </button> --}}
                </div>

            </div>
        </div>
    </section>

    <!-- INFORMASI & STATISTIK -->
    <section id="informasi" class="py-20 bg-slate-50 border-t border-slate-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="mb-12 flex flex-col md:flex-row md:items-end justify-between gap-4">
                <div>
                    <h2 class="text-3xl font-bold text-slate-900 mb-2">Pusat Informasi</h2>
                    <p class="text-slate-500">Informasi pendukung kebencanaan.</p>
                </div>
                <div class="flex gap-2">
                    {{-- <button class="w-10 h-10 rounded-full bg-white border border-slate-200 flex items-center justify-center text-slate-600 hover:text-primary transition-colors"><i class="fa-solid fa-chevron-left"></i></button>
                    <button class="w-10 h-10 rounded-full bg-white border border-slate-200 flex items-center justify-center text-slate-600 hover:text-primary transition-colors"><i class="fa-solid fa-chevron-right"></i></button> --}}
                </div>
            </div>

<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
    @foreach($informasi as $item)
    <div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
        
        <!-- Header -->
        <div class="flex justify-between items-start mb-4">
            <div class="w-12 h-12 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-xl">
                    @php
        $icons = [
        'Cuaca' => 'fa-cloud-sun',
        'Curah Hujan' => 'fa-cloud-showers-heavy', // 🌧️ sudah sesuai
        'Kependudukan' => 'fa-users',
        'Infrastruktur' => 'fa-city', // 🔥 lebih relevan
        'Fasilitas' => 'fa-building',
        'Layanan' => 'fa-phone',
        ];

        $iconClass = $icons[$item->kategori] ?? 'fa-circle-info';
    @endphp

                <i class="fa-solid {{ $iconClass }}"></i>
            </div>
            <span class="text-xs font-bold text-slate-400">
                {{ $item->sumber_data }}
            </span>
        </div>

        <!-- Judul -->
        <h3 class="font-bold text-slate-800 text-lg mb-1">
            {{ $item->judul_informasi }}
        </h3>

        <!-- Kategori -->
        <p class="text-xs text-primary font-semibold mb-2">
            {{ $item->kategori }}
        </p>

        <!-- Deskripsi -->
        <p class="text-sm text-slate-500 mb-4">
            {{ $item->deskripsi_singkat }}
        </p>

        <!-- Link -->
        {{-- <a href="#" class="text-primary font-semibold text-sm hover:underline">
            Lihat Detail <i class="fa-solid fa-arrow-right ml-1"></i>
        </a> --}}
    </div>
    @endforeach
</div>
        </div>
    </section>

    <!-- ACTION BANNER -->
    <section class="py-16 bg-primary relative overflow-hidden">
        <div class="absolute inset-0 opacity-10 bg-grid-pattern mix-blend-overlay"></div>
        <div class="absolute right-0 bottom-0 transform translate-x-1/4 translate-y-1/4">
            <i class="fa-solid fa-bullhorn text-[20rem] text-white opacity-5"></i>
        </div>
        
        <div class="max-w-4xl mx-auto px-4 relative z-10 text-center">
            <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">Melihat Kejadian Bencana di Sekitar Anda?</h2>
            <p class="text-orange-100 text-lg mb-8 max-w-2xl mx-auto">Peran aktif masyarakat sangat membantu respons cepat tanggap darurat BPBD Luwu Utara. Laporkan segera jika Anda melihat tanda-tanda bencana.</p>
            {{-- <button onclick="openModal()" class="bg-white text-primary hover:bg-slate-50 px-8 py-4 rounded-xl font-bold text-lg shadow-xl transition-transform hover:-translate-y-1 flex items-center gap-2 mx-auto">
                <i class="fa-solid fa-pen-to-square"></i> Buat Laporan Warga
            </button> --}}
<a href="https://wa.me/628114180117?text=Halo%20Admin,%20saya%20ingin%20melaporkan%20kejadian%20bencana"
   target="_blank"
   class="inline-flex items-center justify-center gap-3 bg-white text-primary hover:bg-slate-50 px-8 py-4 rounded-xl font-bold text-lg shadow-xl transition-all duration-300 hover:-translate-y-1">

    <i class="fa-brands fa-whatsapp text-green-500 text-2xl"></i>

    <span>
        Buat Laporan Warga
    </span>

</a>
        </div>
    </section>
    <!-- MODAL LAPOR Warga -->
    {{-- <div id="lapor-modal" class="fixed inset-0 z-[100] hidden">
        <!-- Backdrop -->
        <div class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity opacity-0" id="modal-backdrop" onclick="closeModal()"></div>
        
        <!-- Modal Content -->
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
            <div class="relative bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:max-w-lg w-full scale-95 opacity-0" id="modal-panel">
                
                <div class="absolute top-0 right-0 pt-4 pr-4">
                    <button type="button" onclick="closeModal()" class="text-slate-400 hover:text-slate-500 focus:outline-none bg-slate-100 hover:bg-slate-200 rounded-full w-8 h-8 flex items-center justify-center transition-colors">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>
                
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="sm:flex sm:items-start">
                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                            <i class="fa-solid fa-bullhorn text-red-600"></i>
                        </div>
                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                            <h3 class="text-lg leading-6 font-bold text-slate-900 mb-1" id="modal-title">
                                Formulir Laporan Warga
                            </h3>
                            <p class="text-sm text-slate-500 mb-4">
                                Silakan lengkapi data kejadian bencana. Laporan palsu dapat dikenakan sanksi.
                            </p>
                            
                            <form class="space-y-4">
                                <div>
                                    <label class="block text-xs font-semibold text-slate-700 mb-1">Jenis Kejadian <span class="text-red-500">*</span></label>
                                    <select class="w-full border border-slate-300 rounded-lg p-2.5 text-sm focus:ring-primary focus:border-primary outline-none">
                                        <option>Pilih Bencana</option>
                                        <option>Banjir</option>
                                        <option>Tanah Longsor</option>
                                        <option>Pohon Tumbang</option>
                                    </select>
                                </div>
                                
                                <div>
                                    <label class="block text-xs font-semibold text-slate-700 mb-1">Lokasi Detail <span class="text-red-500">*</span></label>
                                    <input type="text" placeholder="Cth: Jl. Trans Sulawesi, Desa Radda..." class="w-full border border-slate-300 rounded-lg p-2.5 text-sm focus:ring-primary focus:border-primary outline-none">
                                </div>

                                <div>
                                    <label class="block text-xs font-semibold text-slate-700 mb-1">Deskripsi & Dampak Singkat</label>
                                    <textarea rows="3" placeholder="Gambarkan kondisi saat ini..." class="w-full border border-slate-300 rounded-lg p-2.5 text-sm focus:ring-primary focus:border-primary outline-none"></textarea>
                                </div>

                                <div>
                                    <label class="block text-xs font-semibold text-slate-700 mb-1">Foto Kejadian</label>
                                    <div class="border-2 border-dashed border-slate-300 rounded-lg p-4 text-center cursor-pointer hover:bg-slate-50 transition-colors">
                                        <i class="fa-solid fa-cloud-arrow-up text-2xl text-slate-400 mb-2"></i>
                                        <p class="text-xs text-slate-500 font-medium">Klik untuk unggah foto (Max 5MB)</p>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="bg-slate-50 px-4 py-4 sm:px-6 sm:flex sm:flex-row-reverse border-t border-slate-100">
                    <button type="button" class="w-full inline-flex justify-center rounded-lg border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white hover:bg-primaryDark focus:outline-none sm:ml-3 sm:w-auto sm:text-sm transition-colors" onclick="submitLaporan()">
                        Kirim Laporan
                    </button>
                    <button type="button" class="mt-3 w-full inline-flex justify-center rounded-lg border border-slate-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-slate-700 hover:bg-slate-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm transition-colors" onclick="closeModal()">
                        Batal
                    </button>
                </div>
            </div>
        </div>
    </div> --}}

    
        
    <link rel="stylesheet"
    href="https://unpkg.com/leaflet-minimap/dist/Control.MiniMap.min.css">
    
    <script src="https://unpkg.com/leaflet-minimap/dist/Control.MiniMap.min.js"></script>
    
                <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>


<script>
const dataBencana = @json($dataBencana);
</script>


<script>
let map;
let markersMap = {};
let kecamatanTerpilih = 'Lokasi';

document.addEventListener('DOMContentLoaded', function () {

    // ==========================
    // INIT MAP
    // ==========================
    if (map) {
        map.remove();
    }

    map = L.map('map', {
        zoomControl: false,
        attributionControl: false
    }).setView([-2.5769, 120.2566], 10);

    L.tileLayer(
        'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png',
        { maxZoom: 20 }
    ).addTo(map);

window.addEventListener('load', () => {
    map.invalidateSize();
});

    document.querySelector('.group').addEventListener('mouseenter', () => {
    map.invalidateSize();
});

    L.control.zoom({ position: 'topleft' }).addTo(map);

    // ==========================
    // ICON FUNCTION
    // ==========================
        const createCustomIcon = (type) => {
            const isBanjir = type === 'banjir';
            const colorClass = isBanjir ? 'bg-bencanaBanjir' : 'bg-bencanaLongsor';
            const iconClass = isBanjir ? 'fa-water' : 'fa-hill-rockslide';
            const shadowColor = isBanjir ? 'rgba(59, 130, 246, 0.5)' : 'rgba(245, 158, 11, 0.5)';

            // return L.divIcon({
            //     className: 'custom-leaflet-marker',
            //     html: `
            //         <div class="relative flex items-center justify-center w-10 h-10 group">
            //             <div class="absolute inset-0 rounded-full ${colorClass} opacity-40 marker-pulse"></div>
            //             <div class="relative w-9 h-9 rounded-full ${colorClass} border-[3px] border-white flex items-center justify-center text-white shadow-md transform transition-transform group-hover:scale-110 z-10" style="box-shadow: 0 4px 10px ${shadowColor};">
            //                 <i class="fa-solid ${iconClass} text-sm"></i>
            //             </div>
            //         </div>
            //     `,
            //     iconSize: [40, 40],
            //     iconAnchor: [20, 20],
            // });
        };

        const iconBanjir = createCustomIcon('banjir');
        const iconLongsor = createCustomIcon('longsor');


    // ==========================
    // BATAS KABUPATEN (BALIK LAGI)
    // ==========================
    fetch("https://gis.bnpb.go.id/server/rest/services/inarisk/batas_administrasi/MapServer/2/query?where=WADMKK%3D%27Luwu%20Utara%27&outFields=*&returnGeometry=true&f=geojson")
    .then(res => res.json())
    .then(data => {
        L.geoJSON(data, {
            style:{
                color:'#ea580c',
                weight:3,
                fillColor:'#fdba74',
                fillOpacity:0.15
            },
            onEachFeature:(f,l)=>{
                l.bindPopup(`<b>Kabupaten ${f.properties.WADMKK}</b>`);
            }
        }).addTo(map);
    });

    // ==========================
    // BATAS KECAMATAN (BALIK LAGI)
    // ==========================
    fetch("https://gis.bnpb.go.id/server/rest/services/inarisk/batas_administrasi/MapServer/3/query?where=WADMKK%3D%27Luwu%20Utara%27&outFields=*&returnGeometry=true&f=geojson")
    .then(res=>res.json())
    .then(data=>{

        const colors = [
            '#ef4444','#f97316','#eab308','#22c55e','#06b6d4',
            '#3b82f6','#8b5cf6','#ec4899','#14b8a6','#84cc16'
        ];

        let i=0;

        const kecLayer = L.geoJSON(data,{
            style:()=>{
                let warna = colors[i++ % colors.length];
                return {
                    color:'#fff',
                    weight:1.5,
                    fillColor:warna,
                    fillOpacity:0.65
                };
            },
            onEachFeature:(f,l)=>{
                let nama = f.properties.WADMKC === "Limbong" ? "Rongkong" : f.properties.WADMKC;

                l.bindPopup(`<b>Kecamatan ${f.properties.WADMKC}</b>`);
                // l.bindTooltip(

                //     nama,

                //     {

                //         permanent:true,

                //         direction:'center',

                //         className:'label-kecamatan'

                //     }

                // );


                l.on({
                    mouseover:e=>e.target.setStyle({weight:3}),
                    mouseout:e=>e.target.setStyle({weight:1.5})
                });
            }
        }).addTo(map);

        if (kecLayer.getBounds().isValid()) {
            map.fitBounds(kecLayer.getBounds());
        }
    });

    // ==========================
    // MARKER CONTOH
    // ==========================
dataBencana.forEach(item => {

    if(!item.latitude || !item.longitude){
        return;
    }

    const jenis = item.jenis_bencana.toLowerCase();

    const icon =
        jenis === 'banjir'
            ? iconBanjir
            : iconLongsor;

    // const marker = L.marker(
    //     [
    //         parseFloat(item.latitude),
    //         parseFloat(item.longitude)
    //     ],
    //     {
    //         icon: icon
    //     }
    // ).addTo(map);

    markersMap[item.id] = {
    marker: marker,
    jenis: jenis,
    tahun: new Date(item.tanggal_kejadian).getFullYear()
};

// marker.bindPopup(`
//     <div style="
//         font-family:sans-serif;
//         width:240px;
//         overflow:hidden;
//     ">

//         ${
//             item.gambar 
//             ? `
//             <div style="width:100%; height:130px; overflow:hidden;">
//                 <img src="${item.gambar}" 
                
//                      style="width:100%; height:100%; object-fit:cover;">
//             </div>
//             `
//             : ''
//         }
            

//         <div style="padding:10px; background:white;">

//             <div style="
//                 font-weight:700;
//                 font-size:14px;
//                 margin-bottom:6px;
//                 color:#111827;
//             ">
//                 ${item.jenis_bencana}
//             </div>

//             <div style="font-size:12px; color:#374151;">
//                 <div><b>Lokasi:</b> ${item.lokasi}</div>
//                 <div><b>Kecamatan:</b> ${item.kecamatan}</div>
//                 <div><b>Tanggal:</b> ${item.tanggal_kejadian}</div>
//             </div>

//             <div>Resiko: 
//             <div style="
//                 margin-top:6px;
//                 font-size:11px;
//                 display:inline-block;
//                 padding:3px 8px;
//                 border-radius:999px;
//                 background:#fee2e2;
//                 color:#991b1b;
//                 font-weight:600;
//             ">
//                  ${item.kelas_risiko_bencana}
//             </div>
//             </div>

//             <hr style="margin:8px 0;">

//             <div style="font-size:12px; color:#374151;">
//                 <div>👥 Terpapar: ${item.penduduk_terpapar ?? '-'}</div>
//                 <div>🧓 Rentan: ${item.kelompok_umur_rentan ?? '-'}</div>
//                 <div>💰 Miskin: ${item.penduduk_miskin ?? '-'}</div>
//                 <div>♿ Disabilitas: ${item.penduduk_disabilitas ?? '-'}</div>
//             </div>

//         </div>
//     </div>
// `);

});
});


</script>


<script>

document.addEventListener('DOMContentLoaded', function(){

    const miniMap = L.map('miniMap', {
        attributionControl:false,
        zoomControl:false,
        dragging:false,
        scrollWheelZoom:false,
        doubleClickZoom:false,
        boxZoom:false,
        keyboard:false,
        touchZoom:false
    }).setView([-3.7, 120.0], 6);

    L.tileLayer(
        'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'
    ).addTo(miniMap);

    // Bounding Box Kabupaten Luwu Utara
    const lutraBounds = [
        [-2.15, 119.85], // Barat Laut
        [-3.10, 120.75]  // Tenggara
    ];

    // Kotak penanda Lutra
    L.rectangle(lutraBounds, {
        color: '#ef4444',
        weight: 2,
        fillColor: '#ef4444',
        fillOpacity: 0.01
    }).addTo(miniMap);

});
</script>
    @endsection