@using kehati.Models.View
@{
    ViewData["Title"] = "Lokasi Detail";
    var statusColor = new Dictionary<string, string>
    {
        { "Aman", "bg-primary/10 text-primary border-primary/20" },
        { "Rentan", "bg-amber-100 text-amber-800 border-amber-200" },
        { "Terancam", "bg-orange-100 text-orange-800 border-orange-200" },
        { "Kritis", "bg-red-100 text-red-800 border-red-200" },
        { "Dilindungi", "bg-emerald-100 text-emerald-800 border-emerald-200" }
    };
}

<div>
    <div class="relative h-[45vh] min-h-[320px] overflow-hidden">
        <img src="~/images/@ViewBag.data.Image" asp-append-version="true" alt="@ViewBag.data.Name" class="h-full w-full object-cover"/>
        <div class="absolute inset-0 bg-gradient-to-t from-background via-background/40 to-background/10"></div>
    </div>
</div>

<div class="mx-auto mt-24 max-w-5xl px-4 sm:px-6 lg:px-8">
    <div class="rounded-2xl border border-border bg-card p-8 shadow-sm sm:p-10">
        <a asp-controller="lokasi"
           asp-action="index"
           class="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground">
            <i data-lucide="arrow-left" class="h-4 w-4"></i>
            Semua lokasi
        </a>
        <h1 class="mt-4 font-serif text-4xl leading-tight text-foreground sm:text-5xl">
            @ViewBag.data.Name
        </h1>
        <div class="mt-4 flex flex-wrap gap-x-6 gap-y-2 text-sm text-muted-foreground">
            <span class="inline-flex items-center gap-1.5">
                <i data-lucide="map-pin" class="h-4 w-4 text-primary"></i>
                @ViewBag.data.Region
            </span>
            <span class="inline-flex items-center gap-1.5">
                <i data-lucide="ruler" class="h-4 w-4 text-primary"></i>
                @ViewBag.data.Area
            </span>
        </div>
        <p class="mt-6 max-w-3xl text-base leading-relaxed text-muted-foreground">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, praesentium at. Asperiores quasi explicabo, reiciendis ut nulla distinctio numquam labore dignissimos enim quisquam error et deleniti corrupti possimus nihil! Libero?
        </p>
        <div class="mt-6 flex gap-8 text-sm">
            <div>
                <div class="font-serif text-3xl text-primary">
                    @ViewBag.lokasiTumbuhan.Count
                </div>
                <div class="text-xs uppercase tracking-widest text-muted-foreground">
                    Flora
                </div>
            </div>
            <div>
                <div class="font-serif text-3xl text-primary">
                    @ViewBag.lokasiFauna.Count
                </div>
                <div class="text-xs uppercase tracking-widest text-muted-foreground">
                    Fauna
                </div>
            </div>
        </div>
    </div>
</div>

<div class="mx-auto max-w-5xl px-4 py-16 sm:px-6 lg:px-8">

    <div class="flex flex-wrap gap-3">
        <button class="tab-btn hover:cursor-pointer" data-tab="flora">
            Flora (@ViewBag.lokasiTumbuhan.Count)
        </button>
        <button class="tab-btn hover:cursor-pointer" data-tab="fauna">
            Fauna (@ViewBag.lokasiFauna.Count)
        </button>
    </div>

    <div id="tab-flora" class="tab-content mt-8">

        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">

            @foreach(var s in ViewBag.lokasiTumbuhan)
            {
                <a asp-controller="katalog" asp-action="detail" asp-route-slug="@s.Tumbuhan.Slug" class="group block overflow-hidden rounded-2xl border border-border bg-card transition-all hover:-translate-y-1 hover:shadow-lg">
                    <!-- Image -->
                    <div class="relative aspect-[4/3] overflow-hidden bg-muted">
                        <img src="~/images/@s.Tumbuhan.Image"
                            alt="@s.Tumbuhan.Name"
                            loading="lazy"
                            asp-append-version="true"
                            class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" />
                    </div>
                    <!-- Content -->
                    <div class="p-4">
                        <div class="flex items-start justify-between gap-2">
                            <h3 class="font-serif text-lg leading-tight text-foreground">
                                @s.Tumbuhan.Name
                            </h3>
                        </div>
                        <p class="mt-0.5 text-xs italic text-muted-foreground">
                            @s.Tumbuhan.NamaIlmiah
                        </p>
                        <!-- Status Badge -->
                        <div class="mt-3">
                            <span class="inline-flex items-center rounded-md border px-2.5 py-1 text-xs font-medium
                                @(statusColor.ContainsKey(s.Tumbuhan.StatusPerlindungan)
                                    ? statusColor[s.Tumbuhan.StatusPerlindungan]
                                    : "")">
                                @s.Tumbuhan.StatusPerlindungan
                            </span>
                        </div>
                    </div>
                </a>
            }

        </div>

    </div>

    <div id="tab-fauna" class="tab-content mt-8 hidden">

        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">

            @foreach(var s in ViewBag.lokasiFauna)
            {
                <a asp-controller="katalog" asp-action="detail" asp-route-slug="@s.Fauna.Slug" class="group block overflow-hidden rounded-2xl border border-border bg-card transition-all hover:-translate-y-1 hover:shadow-lg">
                    <!-- Image -->
                    <div class="relative aspect-[4/3] overflow-hidden bg-muted">
                        <img src="~/images/@s.Fauna.Image"
                            alt="@s.Fauna.Name"
                            loading="lazy"
                            asp-append-version="true"
                            class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" />

                        <!-- Type Badge -->
                        <div class="absolute left-3 top-3 flex items-center gap-1.5 rounded-full bg-background/90 px-2.5 py-1 text-[11px] font-medium capitalize backdrop-blur">
                            <i data-lucide="bird" class="h-3 w-3"></i> Fauna
                        </div>
                    </div>
                    <!-- Content -->
                    <div class="p-4">
                        <div class="flex items-start justify-between gap-2">
                            <h3 class="font-serif text-lg leading-tight text-foreground">
                                @s.Fauna.Name
                            </h3>
                        </div>
                        <p class="mt-0.5 text-xs italic text-muted-foreground">
                            @s.Fauna.NamaIlmiah
                        </p>
                        <!-- Status Badge -->
                        <div class="mt-3">
                            <span class="inline-flex items-center rounded-md border px-2.5 py-1 text-xs font-medium
                                @(statusColor.ContainsKey(s.Fauna.Status)
                                    ? statusColor[s.Fauna.Status]
                                    : "")">
                                @s.Fauna.Status
                            </span>
                        </div>
                    </div>
                </a>
            }

        </div>

    </div>
</div>

@section Scripts{

<script>

document.querySelectorAll(".tab-btn").forEach(btn=>{

    btn.addEventListener("click",function(){

        document.querySelectorAll(".tab-btn")
            .forEach(x=>x.classList.remove("active"));

        this.classList.add("active");

        document.querySelectorAll(".tab-content")
            .forEach(x=>x.classList.add("hidden"));

        document
            .getElementById("tab-"+this.dataset.tab)
            .classList.remove("hidden");

    });

});

</script>

}