@extends('user.template')

@section('content')
    <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>
        #mapTPS {
            width: 100%;
            height: 450px;
            border-radius: 14px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
        }

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

        .popup-btn {
            display: inline-block;
            margin-top: 8px;
            padding: 6px 12px;
            background: #198754;
            color: #fff;
            border-radius: 6px;
            font-size: 13px;
            text-decoration: none;
        }

        .popup-btn:hover {
            background: #157347;
            color: #fff;
        }
    </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 di Kabupaten Nganjuk</h1>
            <nav class="breadcrumbs">
                <ol>
                    <li><a href="index.html">Beranda</a></li>
                    <li class="current">Sebaran TPS</li>
                </ol>
            </nav>
        </div>
    </div><!-- End Page Title -->

    <section class="section">
        <div class="container">
            <div id="mapTPS"></div>
        </div>
    </section>

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

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

        function pinIcon(color) {
            return L.divIcon({
                className: '',
                html: `
                <svg width="32" height="32" viewBox="0 0 24 24">
                    <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 dataTPS = [{
                id: 1,
                nama: "TPS Berbek",
                jenis: "TPS",
                alamat: "Kecamatan Berbek",
                lat: -7.5978,
                lng: 111.917,
                icon: pinIcon('#198754')
            },
            {
                id: 2,
                nama: "TPS 3R Loceret",
                jenis: "TPS 3R",
                alamat: "Kecamatan Loceret",
                lat: -7.6280,
                lng: 111.910,
                icon: pinIcon('#0d6efd')
            },
            {
                id: 3,
                nama: "TPA Nganjuk",
                jenis: "TPA",
                alamat: "Kabupaten Nganjuk",
                lat: -7.6140,
                lng: 111.900,
                icon: pinIcon('#dc3545')
            }
        ];

        dataTPS.forEach(item => {
            L.marker([item.lat, item.lng], {
                    icon: item.icon
                })
                .addTo(map)
                .bindPopup(`
                <strong>${item.nama}</strong><br>
                <small>${item.jenis}</small><br>
                <small>${item.alamat}</small><br>
                <a href="/tps/${item.id}" class="popup-btn">
                    Lihat Detail
                </a>
            `);
        });
    </script>
@endsection