@extends('layouts.main')

@section('content')

    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>

    <!-- Tailwind Config -->
    <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>

    <style>
        body { font-family: 'Plus Jakarta Sans', sans-serif; }
        
        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

        /* Memastikan peta mengambil sisa tinggi layar */
        .map-container { height: calc(100vh - 72px); }

        /* Kustomisasi Popup Leaflet agar bergaya Modern/Tailwind */
      
    </style>

    <!-- MAIN CONTENT -->
<div class="bg-slate-100 min-h-screen">

    <!-- HERO -->
    <div class="w-full bg-gradient-to-r from-slate-900 to-slate-700 text-white px-6 md:px-10 py-10 md:py-14">
        <div class="max-w-6xl mx-auto">
            <h1 class="text-3xl md:text-4xl font-extrabold mb-3">
                Peta Bencana Luwu Utara
            </h1>
            <p class="text-slate-200 max-w-2xl">
                Pantau kejadian banjir dan longsor secara real-time untuk mendukung mitigasi dan respons cepat.
            </p>
        </div>
    </div>

    <!-- CONTENT -->
<div class="p-4 md:p-6 mt-6">

    <!-- CARD UTAMA -->
    <div class="flex overflow-hidden relative w-full
                bg-white
                rounded-3xl
                shadow-xl
                border border-slate-200
                h-[calc(100vh-3rem)]">
        
        <!-- SIDEBAR (Panel Kiri - List Bencana & Filter) -->
<aside
    class="w-full md:w-[320px] bg-white flex flex-col z-[500]
           absolute md:relative h-full transition-transform duration-300
           transform -translate-x-full md:translate-x-0
           border-r border-slate-200"
    id="sidebar-panel">

    <!-- CLOSE MOBILE -->
    <button class="md:hidden absolute top-4 right-4 w-8 h-8 bg-slate-100 rounded-full flex items-center justify-center text-slate-600 z-10" onclick="toggleSidebar()">
        <i class="fa-solid fa-xmark"></i>
    </button>

    <!-- HEADER -->
    <div class="p-5 h-full border-b border-slate-100 bg-slate-50">
        <h2 class="font-extrabold text-lg text-slate-900 mb-1">
            Legenda 
        </h2>
        <p class="text-xs text-slate-500 mb-4">
            Pilih kategori dan tahun kejadian
        </p>

        <!-- 🔥 FILTER TAHUN -->
        <div class="mb-4 ">
            <label class="text-xs font-semibold text-slate-600 mb-1 block">
                Filter Tahun
            </label>
            <select id="filter-tahun"
                class="w-full text-sm border border-slate-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary"
                onchange="updateMapFilters()">

                <option value="all">Semua Tahun</option>
                <option value="2021">2021</option>
                <option value="2022">2022</option>
                <option value="2023">2023</option>
                <option value="2024">2024</option>
                <option value="2025">2025</option>
                {{-- <option value="2022">2022</option> --}}
            </select>
        </div>

        <!-- 🔥 LEGEND + FILTER -->
        <div class="space-y-3 gap-3">

            <!-- BANJIR -->
            

            <label class="cursor-pointer mb-3">
                        <input type="checkbox" id="filter-banjir" class="peer sr-only" checked onchange="updateMapFilters()">
                        <div class="mb-4 flex items-center gap-2 p-3 bg-white border border-slate-200 rounded-xl peer-checked:border-bencanaBanjir peer-checked:bg-blue-50 transition-all shadow-sm">
                            <div class="w-8 h-8 rounded-full bg-blue-100 text-bencanaBanjir flex items-center justify-center text-sm">
                                <i class="fa-solid fa-water"></i>
                            </div>
                            <div>
                                <p class="text-xs font-bold text-slate-700">Banjir</p>
                                <p class="text-[10px] text-slate-500" id="count-banjir">{{ $jumlahBanjir }} Titik</p>
                            </div>
                        </div>
                    </label>

                    <label class="cursor-pointer">
                        <input type="checkbox" id="filter-longsor" class="peer sr-only" checked onchange="updateMapFilters()">
                        <div class="flex items-center gap-2 p-3 bg-white border border-slate-200 rounded-xl peer-checked:border-bencanaLongsor peer-checked:bg-amber-50 transition-all shadow-sm">
                            <div class="w-8 h-8 rounded-full bg-amber-100 text-bencanaLongsor flex items-center justify-center text-sm">
                                <i class="fa-solid fa-hill-rockslide"></i>
                            </div>
                            <div>
                                <p class="text-xs font-bold text-slate-700">Longsor</p>
                                <p class="text-[10px] text-slate-500" id="count-longsor">{{ $jumlahLongsor }} Titik</p>
                            </div>
                        </div>
                    </label>

            <!-- LONGSOR -->
            
        </div>
    </div>

</aside>

        <!-- AREA MAP LEAFLET -->
                <main class="flex-1 relative bg-slate-50">

            <!-- Leaflet Target Div -->
            <div id="map" class="w-full h-full "></div>

            <div id="miniMap"
                class="absolute bottom-4 right-4 z-[1000]
                                w-32 h-40 border rounded-lg shadow-lg">
            </div>

                           <div class="absolute bottom-4 left-4 z-[1000]">
                        <div class="flex items-end text-[10px] font-medium text-slate-700 mb-1">
                            <span class="w-8">0</span>
                            <span class="w-8 text-center">5</span>
                            <span class="w-8 text-center">10</span>
                            <span class="text-right flex-1">20 km</span>
                        </div>
                        <div class="h-2 w-32 bg-white flex border border-slate-800">
                            <div class="flex-1 bg-slate-800 border-r border-white"></div>
                            <div class="flex-1 bg-white border-r border-slate-800"></div>
                            <div class="flex-1 bg-slate-800 border-r border-white"></div>
                            <div class="flex-1 bg-white"></div>
                        </div>
                    </div>

            <!-- Tombol Floating untuk Buka Sidebar di Mobile -->
            <button class="md:hidden absolute bottom-6 left-1/2 -translate-x-1/2 bg-slate-900 text-white px-6 py-3 rounded-full font-bold text-sm shadow-2xl z-[400] flex items-center gap-2" onclick="toggleSidebar()">
                <i class="fa-solid fa-list-ul"></i> Lihat Daftar Bencana
            </button>
        </main>

    </div>

    </div>

</div>

    <!-- Leaflet JS -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<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>
    function updateMapFilters() {
    const banjir = document.getElementById('filter-banjir').checked;
    const longsor = document.getElementById('filter-longsor').checked;
    const tahun = document.getElementById('filter-tahun').value;

    console.log("Filter aktif:", {
        banjir,
        longsor,
        tahun
    });

    // 👉 nanti kamu pakai ini untuk:
    // - show/hide marker
    // - filter data dari database
}
</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);

    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.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>
 function updateMapFilters() {

    const showBanjir =
        document.getElementById('filter-banjir').checked;

    const showLongsor =
        document.getElementById('filter-longsor').checked;

    const tahun =
        document.getElementById('filter-tahun').value;

    Object.values(markersMap).forEach(item => {

        const jenisMatch =
            (item.jenis === 'banjir' && showBanjir) ||
            (item.jenis === 'longsor' && showLongsor);

        const tahunMatch =
            tahun === 'all' || item.tahun == tahun;

        const visible = jenisMatch && tahunMatch;

        if (visible) {

            if (!map.hasLayer(item.marker)) {
                item.marker.addTo(map);
            }

        } else {

            if (map.hasLayer(item.marker)) {
                map.removeLayer(item.marker);
            }

        }

    });

}


document.getElementById('filter-banjir')
    ?.addEventListener('change', updateMapFilters);

document.getElementById('filter-longsor')
    ?.addEventListener('change', updateMapFilters);

document.getElementById('filter-tahun')
    ?.addEventListener('change', updateMapFilters);
</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