@using kehati.Models.View
@using kehati.Helpers
@{
    ViewData["Title"] = "Map";
}
<div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
    <div class="max-w-2xl">
        <div class="text-xs font-medium uppercase tracking-widest text-primary">
            Peta Interaktif
        </div>
        <h1 class="mt-3 font-serif text-5xl leading-tight text-foreground">
            Sebaran Lokasi Konservasi
        </h1>
        <p class="mt-4 text-lg text-muted-foreground">
            Titik-titik hijau di peta Jakarta. Klik setiap penanda untuk melihat detail lokasi.
        </p>
    </div>
    <!-- Leaflet -->
    <div class="mt-10 overflow-hidden rounded-2xl border border-border shadow-sm">
        <div id="map" class="h-[600px] w-full"></div>
    </div>
</div>

@section Scripts{

<script>

    var map = L.map('map').setView([-6.2088,106.8456],11);
    var customIcon = L.icon({
        iconUrl: '/images/marker-icon.png',
        iconRetinaUrl: '/images/marker-icon-2x.png',
        shadowUrl: '/images/marker-shadow.png',

        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
    });

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

    @foreach(var l  in ViewBag.lokasiHome)
    {
        <text>

        L.marker([@l.Lat,@l.Long],{
            icon: customIcon
        }).addTo(map)
            .bindPopup(`
                <div style="font-size:11px!important;">
                    <strong>@l.Name</strong> <br />
                    Status Lokasi : @l.Status <br />
                    Flora : @l.LokasiTumbuhan.Count <br />
                    Fauna : @l.LokasiFauna.Count <br /><br />
                    @* <a class="" href="https://www.google.com/maps?q=@l.Lat,@l.Long" target="_blank"> *@
                    <a asp-controller="lokasi"
                    asp-action="detail"
                    asp-route-slug="@Custom.Encode(l.MsLokasiId)"
                    target="_blank">
                        Lihat Detail
                    </a>
                </div>
            `);

        </text>
    }

</script>

}