@{
    Layout = "~/Views/Admin/Transport/SpjDriver/Shared/_Layout.cshtml";
    ViewData["Title"] = "Submit Struk";
}

@section Styles {
    <link rel="stylesheet" href="@Url.Content("~/driver/css/scanner.css")" asp-append-version="true" />
}

<div class="max-w-sm mx-auto container bg-white min-h-screen">
    <div class="bg-upst text-white px-6 pt-10 pb-16 rounded-b-[40px] shadow-lg relative overflow-hidden">
        <div class="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full -mr-16 -mt-16"></div>
            <div class="flex items-center justify-between relative z-10">
                <a href="@Url.Action("Index", "Home")" class="w-10 h-10 flex items-center justify-center bg-white/20 hover:bg-white/30 rounded-xl transition-colors">
                    <i class="w-5 h-5" data-lucide="arrow-left"></i>
                </a>
                <div class="text-center">
                    <h1 class="text-lg font-bold tracking-wide uppercase">Submit Struk</h1>
                    <p class="text-[10px] text-white/70 font-medium">Upload Struk SPJ</p>
                </div>
                <img src="@Url.Content("~/driver/upst_white.svg")" alt="UPST Logo" class="absolute top-6 left-8 w-20 h-auto opacity-20">
                <div class="w-10"></div>
            </div>
        </div>

        <div class="px-6 py-6">
            <div class="mb-6">
                <h2 class="text-xl font-semibold text-slate-900">Pilih Tempat Pembuangan</h2>
                <p class="mt-1 text-sm text-slate-500">Lanjutkan ke halaman upload sesuai tempat pembuangan</p>
            </div>

            <div class="grid grid-cols-1 gap-4">
                
                <a asp-controller="Submit" asp-action="StrukBG"
                class="group relative overflow-hidden rounded-2xl border border-slate-200 bg-white p-5 transition-all duration-200 hover:-translate-y-0.5 hover:border-blue-300 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                    
                    <div class="flex items-start justify-between gap-4">
                        <div class="flex items-start gap-4">
                            <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-upst text-white ring-1 ring-blue-100">
                                <i class="h-5 w-5" data-lucide="building-2"></i>
                            </div>

                            <div>
                                <div class="mb-2 inline-flex items-center rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-600">
                                    Input Struk
                                </div>
                                <h3 class="text-base font-semibold text-slate-900">Titik Buang</h3>
                            </div>
                        </div>

                        <div class="mt-1 text-slate-300 transition-transform duration-200 group-hover:translate-x-1 group-hover:text-blue-500">
                            <i class="h-5 w-5" data-lucide="arrow-right"></i>
                        </div>
                    </div>
                </a>

                <a asp-controller="Submit" asp-action="StrukRDF"
                class="group relative overflow-hidden rounded-2xl border border-slate-200 bg-white p-5 transition-all duration-200 hover:-translate-y-0.5 hover:border-emerald-300 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2">
                    
                    <div class="flex items-start justify-between gap-4">
                        <div class="flex items-start gap-4">
                            <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-upst text-white ring-1 ring-emerald-100">
                                <i class="h-5 w-5" data-lucide="receipt-text"></i>
                            </div>

                            <div>
                                <div class="mb-2 inline-flex items-center rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-600">
                                    Input Struk
                                </div>
                                <h3 class="text-base font-semibold text-slate-900">RDF</h3>
                            </div>
                        </div>

                        <div class="mt-1 text-slate-300 transition-transform duration-200 group-hover:translate-x-1 group-hover:text-emerald-500">
                            <i class="h-5 w-5" data-lucide="arrow-right"></i>
                        </div>
                    </div>
                </a>
            </div>
        </div>
        
        <partial name="~/Views/Admin/Transport/SpjDriverUpst/Shared/Components/_Navigation.cshtml" />

    </div>
</div>