@{
    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" id="history-page" data-history-api="@Url.Action("GetHistory", "History")" data-history-detail-base="@Url.Action("Details", "History", new { id = "__id__" })">
   <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>
    <div class="px-5 -mt-8 space-y-4 relative z-20 pb-28">
        <div class="bg-white rounded-3xl p-4 border border-gray-100 shadow-sm space-y-3">
            <div class="flex items-center justify-between gap-3">
                <div>
                    <p class="text-[10px] font-black text-gray-400 uppercase tracking-widest">Filter Riwayat</p>
                    <h2 class="text-sm font-black text-gray-900">Range Tanggal Perjalanan</h2>
                </div>
                <button id="history-reset-filter" type="button" class="text-[11px] font-bold text-upst px-3 py-2 rounded-xl bg-orange-50 border border-orange-100">Reset</button>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                <input id="history-from-date-filter" type="date" class="w-full rounded-2xl border border-gray-200 px-4 py-3 text-sm font-medium text-gray-700 bg-gray-50" />
                <input id="history-to-date-filter" type="date" class="w-full rounded-2xl border border-gray-200 px-4 py-3 text-sm font-medium text-gray-700 bg-gray-50" />
            </div>
            <div class="flex items-center justify-end">
                <button id="history-apply-filter" type="button" class="rounded-2xl bg-upst text-white px-4 py-3 text-xs font-black uppercase tracking-wide">Terapkan</button>
            </div>
        </div>

        <div id="history-loading" class="bg-white rounded-3xl p-5 border border-gray-100 text-center text-sm font-medium text-gray-500 shadow-sm">
            Memuat riwayat perjalanan...
        </div>

        <div id="history-empty" class="hidden bg-white rounded-3xl p-6 border border-gray-100 shadow-sm text-center">
            <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="w-8 h-8 text-gray-400" data-lucide="clock-3"></i>
            </div>
            <h3 class="text-base font-black text-gray-900 mb-1">Belum Ada Riwayat</h3>
            <p class="text-sm text-gray-500">Coba ubah filter tanggal atau tunggu data perjalanan masuk.</p>
        </div>

        <div id="history-list" class="space-y-5"></div>

        <div id="history-pagination" class="hidden bg-white rounded-3xl p-4 border border-gray-100 shadow-sm space-y-3">
            <div class="flex items-center justify-between text-[11px] font-bold text-gray-500 uppercase tracking-wide">
                <span id="history-page-info">Page 1</span>
                <span id="history-total-info">0 data</span>
            </div>
            <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
                <button id="history-prev-page" type="button" class="sm:flex-1 rounded-2xl border border-gray-200 px-4 py-3 text-xs font-black text-gray-700 disabled:opacity-50 disabled:cursor-not-allowed">Sebelumnya</button>
                <div class="max-w-full overflow-x-auto">
                    <div id="history-page-buttons" class="flex items-center gap-2 min-w-max"></div>
                </div>
                <button id="history-next-page" type="button" class="sm:flex-1 rounded-2xl border border-gray-200 px-4 py-3 text-xs font-black text-gray-700 disabled:opacity-50 disabled:cursor-not-allowed">Berikutnya</button>
            </div>
        </div>
    </div>


    <partial name="~/Views/Admin/Transport/SpjDriverUpst/Shared/Components/_Navigation.cshtml" />
   
</div>

@section Scripts {
    <script src="@Url.Content("~/driver/js/history-upst.js")" asp-append-version="true"></script>
}