@{
    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>


    <!-- Daftar Lokasi -->
    <div class="mt-10 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">

        @foreach(LokasiModel loc in Model.FeaturedLocations)
        {
            <div class="rounded-xl border border-border bg-card p-4">

                <div class="font-serif text-lg text-foreground">
                    @loc.Name
                </div>

                <div class="mt-1 text-xs text-muted-foreground">
                    @loc.Region · @loc.FloraCount spesies terdokumentasi
                </div>

            </div>
        }
    </div>
</div>

@section Scripts{

<script>

    var map = L.map('map').setView([-6.2088,106.8456],11);

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

    @foreach(LokasiModel l in Model.FeaturedLocations)
    {
        <text>

        L.marker([@l.Latitude,@l.Longitude])
            .addTo(map)
            .bindPopup(`
                <strong>@l.Name - @l.Region</strong><br>
                @l.FloraCount Flora terdokumentasi <br>
                @l.FaunaCount Fauna terdokumentasi
            `);

        </text>
    }

</script>

}