@extends('user.template')

@section('content')

<!-- ================= LEAFLET ================= -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<style>
    /* ================= MAP SECTION ================= */
    #call-to-action.call-to-action {
        padding: 0 !important;
    }

    /* JARAK KE FOOTER */
    #call-to-action.call-to-action.section {
        margin-top: 40px;
        margin-bottom: 90px;
    }

    .map-wrapper {
        max-width: 1100px;
        width: 100%;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 6px 18px rgba(0,0,0,.15);
    }

    #mapTPS {
        width: 100%;
        height: 450px;
    }

    /* FIX Z-INDEX */
    .leaflet-top,
    .leaflet-bottom {
        z-index: 400 !important;
    }

    #header {
        z-index: 1000 !important;
        position: sticky;
        top: 0;
    }

    /* POPUP */
    .leaflet-popup-content-wrapper {
        border-radius: 12px;
    }

    /* ================= LEGEND ================= */
    .map-legend {
        background: #fff;
        padding: 10px 14px;
        border-radius: 10px;
        box-shadow: 0 4px 14px rgba(0,0,0,.15);
        font-size: 13px;
        line-height: 1.6;
    }

    .map-legend h6 {
        margin: 0 0 6px 0;
        font-size: 14px;
        font-weight: 600;
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 4px;
    }

    .legend-color {
        width: 14px;
        height: 14px;
        border-radius: 50%;
    }
</style>

<!-- ================= PAGE TITLE ================= -->
<div class="page-title">
    <div class="container d-lg-flex justify-content-between align-items-center">
        <h1 class="mb-2 mb-lg-0">Sebaran TPS Kabupaten Nganjuk</h1>
        <nav class="breadcrumbs">
            <ol>
                <li><a href="/">Beranda</a></li>
                <li class="current">Sebaran TPS</li>
            </ol>
        </nav>
    </div>
</div>

<!-- ================= MAP SECTION ================= -->
<section id="call-to-action" class="call-to-action section">
    <div class="container d-flex justify-content-center">
        <div class="map-wrapper">
            <div id="mapTPS"></div>
        </div>
    </div>
</section>

<script>
    /* ================= INIT MAP ================= */
    const map = L.map('mapTPS').setView([-7.6078, 111.903], 12);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: "© OpenStreetMap"
    }).addTo(map);

    /* ================= PIN MODERN (AMAN) ================= */
    function pinIcon(color) {
        return L.divIcon({
            className: '',
            html: `
                <svg width="32" height="32" viewBox="0 0 24 24"
                     xmlns="http://www.w3.org/2000/svg">
                    <path fill="${color}"
                        d="M12 2C8.13 2 5 5.13 5 9
                        c0 5.25 7 13 7 13
                        s7-7.75 7-13
                        c0-3.87-3.13-7-7-7z"/>
                    <circle cx="12" cy="9" r="2.5" fill="white"/>
                </svg>
            `,
            iconSize: [32, 32],
            iconAnchor: [16, 32],
            popupAnchor: [0, -28]
        });
    }

    const iconTPS   = pinIcon('#198754'); // hijau
    const iconTPS3R = pinIcon('#0d6efd'); // biru
    const iconTPA   = pinIcon('#dc3545'); // merah

    /* ================= DATA TPS ================= */
    const dataTPS = [
        {
            nama: "TPS Berbek",
            jenis: "TPS",
            alamat: "Kecamatan Berbek",
            lat: -7.5978,
            lng: 111.917,
            icon: iconTPS
        },
        {
            nama: "TPS 3R Loceret",
            jenis: "TPS 3R",
            alamat: "Kecamatan Loceret",
            lat: -7.6280,
            lng: 111.910,
            icon: iconTPS3R
        },
        {
            nama: "TPA Nganjuk",
            jenis: "TPA",
            alamat: "Kabupaten Nganjuk",
            lat: -7.6140,
            lng: 111.900,
            icon: iconTPA
        }
    ];

    /* ================= MARKER ================= */
    dataTPS.forEach(item => {
        L.marker([item.lat, item.lng], { icon: item.icon })
            .addTo(map)
            .bindPopup(`
                <strong>${item.nama}</strong><br>
                <b>Jenis:</b> ${item.jenis}<br>
                <b>Alamat:</b> ${item.alamat}<br>
                <button style="
                    margin-top:6px;
                    padding:6px 12px;
                    background:#198754;
                    border:none;
                    color:#fff;
                    border-radius:6px;
                    font-size:13px;
                    cursor:pointer;
                ">Lihat Detail</button>
            `);
    });

    /* ================= LEGEND ================= */
    const legend = L.control({ position: 'bottomleft' });

    legend.onAdd = function () {
        const div = L.DomUtil.create('div', 'map-legend');
        div.innerHTML = `
            <h6>Keterangan</h6>
            <div class="legend-item">
                <span class="legend-color" style="background:#198754;"></span>
                TPS
            </div>
            <div class="legend-item">
                <span class="legend-color" style="background:#0d6efd;"></span>
                TPS 3R
            </div>
            <div class="legend-item">
                <span class="legend-color" style="background:#dc3545;"></span>
                TPA
            </div>
        `;
        return div;
    };

    legend.addTo(map);
</script>

@endsection