@{
    Layout = "~/Views/Admin/Transport/SpjDriverUpst/Shared/_Layout.cshtml";
    ViewData["Title"] = "History - DLH";
}

<div class="w-full lg:max-w-sm mx-auto bg-gray-50 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", "History")" 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">History Perjalanan</h1>
                <p class="text-[10px] text-white/70 font-medium">Riwayat Lengkap Perjalanan</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>
    
    @{
        var spjList = new[]
        {
            new {
                Id = 1,
                NoSpj = "SPJ/07-2025/PKM/000478",
                Plat = "B 5678 ABC",
                Kode = "JRC 007",
                Tujuan = "Bantar Gebang",
                Status = "In Progress",
                Tanggal = "28 Jul 2025",
                Waktu = "16:45"
            },
            new {
                Id = 2,
                NoSpj = "SPJ/07-2025/PKM/000476",
                Plat = "B 9632 TOR",
                Kode = "JRC 005",
                Tujuan = "RDF Rorotan",
                Status = "Completed",
                Tanggal = "27 Jul 2025",
                Waktu = "14:30"
            },
            new {
                Id = 3,
                NoSpj = "SPJ/07-2025/PKM/000477",
                Plat = "B 1234 XYZ",
                Kode = "JRC 006",
                Tujuan = "RDF Pesanggarahan",
                Status = "Completed",
                Tanggal = "26 Jul 2025",
                Waktu = "09:15"
            },
            new {
                Id = 4,
                NoSpj = "SPJ/07-2025/PKM/000479",
                Plat = "B 9876 DEF",
                Kode = "JRC 008",
                Tujuan = "RDF Sunter",
                Status = "Completed",
                Tanggal = "25 Jul 2025",
                Waktu = "11:20"
            },
            new {
                Id = 5,
                NoSpj = "SPJ/07-2025/PKM/000480",
                Plat = "B 4321 GHI",
                Kode = "JRC 009",
                Tujuan = "Bantar Gebang",
                Status = "Completed",
                Tanggal = "24 Jul 2025",
                Waktu = "08:45"
            }
        };
    }

    <div class="px-5 -mt-8 space-y-5 relative z-20">
        @foreach (var spj in spjList)
        {
            <a href="@Url.Action("Details", "History", new { id = spj.Id })" class="block group">
                <div class="bg-white rounded-3xl p-5 shadow-sm border border-gray-100 group-hover:shadow-md group-hover:-translate-y-1 transition-all duration-300">
                    
                    <div class="flex justify-between items-start mb-4">
                        <div class="space-y-0.5">
                            <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Nomor Dokumen</p>
                            <p class="text-sm font-black text-gray-800">@spj.NoSpj</p>
                        </div>
                        
                        @if (spj.Status == "Completed")
                        {
                            <span class="bg-green-50 text-green-600 px-3 py-1 rounded-lg text-[10px] font-black uppercase border border-green-100">
                                Selesai
                            </span>
                        }
                        else
                        {
                            <span class="bg-blue-50 text-blue-600 px-3 py-1 rounded-lg text-[10px] font-black uppercase border border-blue-100 animate-pulse">
                                Proses
                            </span>
                        }
                    </div>

                    <div class="flex items-center gap-4 bg-gray-50/80 p-3 rounded-2xl border border-dashed border-gray-200">
                        <div class="w-12 h-12 bg-upst rounded-xl flex items-center justify-center shadow-inner">
                            <i class="w-6 h-6 text-white" data-lucide="truck"></i>
                        </div>
                        <div class="flex-1">
                            <div class="flex justify-between items-baseline">
                                <h2 class="font-black text-gray-900 leading-tight">@spj.Plat</h2>
                                <span class="text-[11px] font-bold text-upst">@spj.Waktu</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-xs text-gray-500 font-medium">@spj.Kode</span>
                                <span class="text-[10px] text-gray-400 font-semibold">@spj.Tanggal</span>
                            </div>
                        </div>
                    </div>

                    <div class="mt-4 flex items-center justify-between">
                        <div class="flex items-center gap-2">
                            <div class="w-2 h-2 rounded-full bg-upst/40"></div>
                            <div class="flex flex-col">
                                <span class="text-[10px] text-gray-400 font-bold uppercase">Tujuan Akhir</span>
                                <span class="text-sm font-bold text-gray-700">@spj.Tujuan</span>
                            </div>
                        </div>
                        <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center group-hover:bg-upst transition-colors">
                            <i class="w-4 h-4" data-lucide="chevron-right"></i>
                        </div>
                    </div>

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


    <partial name="~/Views/Admin/Transport/SpjDriverUpst/Shared/Components/_Navigation.cshtml" />
    
    <!-- Kalau butuh tampilan kosong (jika tidak ada data) -->

    @* <div class="flex flex-col items-center justify-center py-16 px-4">
        <div class="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mb-4">
            <i class="w-12 h-12 text-gray-400" data-lucide="clock"></i>
        </div>
        <h3 class="text-lg font-semibold text-gray-900 mb-2">Belum Ada Riwayat</h3>
        <p class="text-gray-500 text-center text-sm">Riwayat perjalanan Anda akan muncul di sini setelah melakukan perjalanan pertama.</p>
    </div> *@
   
</div>