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

<div class="w-full lg:max-w-sm mx-auto bg-gray-50 min-h-screen">
    <!-- Header -->
    <div class="bg-gradient-to-r from-orange-500 to-orange-600 text-white px-4 py-4 sticky top-0 z-10 shadow-lg">
        <div class="flex items-center justify-between">
            <a href="@Url.Action("Index", "History")" class="p-2 hover:bg-white/10 rounded-full transition-all duration-200">
                <i class="w-5 h-5" data-lucide="chevron-left"></i>
            </a>
            <h1 class="text-lg font-bold">Detail Perjalanan</h1>
            <div class="w-9"></div>
        </div>
    </div>

    <div class="px-4 py-4 space-y-4">
        <!-- SPJ Information Card -->
        <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
                    <i class="w-5 h-5 text-orange-600" data-lucide="file-text"></i>
                </div>
                <div>
                    <h2 class="text-lg font-bold text-gray-900">Data SPJ</h2>
                    <p class="text-xs text-gray-500">Surat Perintah Jalan</p>
                </div>
            </div>
            
            <div class="space-y-3">
                <div class="flex justify-between items-center py-2 border-b border-gray-50">
                    <span class="text-sm text-gray-600">No. SPJ</span>
                    <span class="font-semibold text-gray-900 text-sm">SPJ/07-2025/PKM/000476</span>
                </div>
                <div class="flex justify-between items-center py-2 border-b border-gray-50">
                    <span class="text-sm text-gray-600">Plat Nomor</span>
                    <span class="bg-orange-50 text-orange-700 px-3 py-1 rounded-full text-sm font-medium">B 9632 TOR</span>
                </div>
                <div class="flex justify-between items-center py-2 border-b border-gray-50">
                    <span class="text-sm text-gray-600">Nomer Pintu</span>
                    <span class="font-mono text-sm text-gray-700">JRC 005</span>
                </div>
                <div class="flex justify-between items-center py-2">
                    <span class="text-sm text-gray-600">Tujuan Pembuangan</span>
                    <span class="font-semibold text-gray-900 text-sm">Taman Barito</span>
                </div>
            </div>
        </div>

        
        <!-- Summary Card -->
        <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
                    <i class="w-5 h-5 text-orange-600" data-lucide="bar-chart-3"></i>
                </div>
                <div>
                    <h2 class="text-lg font-bold text-gray-900">Ringkasan</h2>
                    <p class="text-xs text-gray-500">Informasi perjalanan</p>
                </div>
            </div>
            
            <div class="grid grid-cols-4 gap-3">
                <div class="text-center p-3 bg-gray-50 rounded-xl">
                    <div class="text-xl font-bold text-gray-900">3</div>
                    <div class="text-xs text-gray-600">Total</div>
                </div>
                <div class="text-center p-3 bg-green-50 rounded-xl">
                    <div class="text-xl font-bold text-green-600">1</div>
                    <div class="text-xs text-gray-600">Selesai</div>
                </div>
                <div class="text-center p-3 bg-yellow-50 rounded-xl">
                    <div class="text-xl font-bold text-yellow-600">1</div>
                    <div class="text-xs text-gray-600">Proses</div>
                </div>
                <div class="text-center p-3 bg-red-50 rounded-xl">
                    <div class="text-xl font-bold text-red-600">1</div>
                    <div class="text-xs text-gray-600">Batal</div>
                </div>
            </div>
        </div>

        <!-- Pickup Locations -->
        <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
                    <i class="w-5 h-5 text-orange-600" data-lucide="map-pin"></i>
                </div>
                <div>
                    <h2 class="text-lg font-bold text-gray-900">Lokasi Pengangkutan</h2>
                    <p class="text-xs text-gray-500">Daftar lokasi yang dikunjungi</p>
                </div>
            </div>

            <div class="space-y-4">
                <!-- Location 1 - In Progress -->
                <div class="border border-yellow-200 bg-yellow-50 rounded-xl p-4">
                    <div class="flex items-start gap-3">
                        <div class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
                            <i class="w-4 h-4 text-white" data-lucide="clock"></i>
                        </div>
                        <div class="flex-1">
                            <div class="flex items-center gap-2 mb-2">
                                <span class="bg-yellow-400 text-white text-xs font-semibold px-2 py-1 rounded-full">Pengangkutan</span>
                                <span class="text-xs text-gray-500">Lokasi 1</span>
                            </div>
                            <h4 class="font-bold text-gray-900 mb-1">CV Tri Mitra Utama</h4>
                            <p class="text-sm text-gray-600 mb-1">Shell Radio Dalam</p>
                            <p class="text-sm text-gray-600 mb-2">Alamat:</p>
                            <p class="text-sm text-gray-700 leading-relaxed">
                                Jl. Radio Dalam Raya No.6C Gandaria Utara, Kecamatan Kebayoran Baru, Kota Jakarta Selatan 12140
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Location 2 - Completed -->
                <div class="border border-green-200 bg-green-100 rounded-xl p-4">
                    <div class="flex items-start gap-3">
                        <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
                            <i class="w-4 h-4 text-white" data-lucide="check"></i>
                        </div>
                        <div class="flex-1">
                            <div class="flex items-center gap-2 mb-2">
                                <span class="bg-green-500 text-white text-xs font-semibold px-2 py-1 rounded-full">Sudah Diangkut</span>
                                <span class="text-xs text-gray-500">Lokasi 2</span>
                            </div>
                            <h4 class="font-bold text-gray-900 mb-1">CV Tri Berkah Sejahtera</h4>
                            <p class="text-sm text-gray-600 mb-2">Alamat:</p>
                            <p class="text-sm text-gray-700 leading-relaxed">
                                Kp. Pertanian II Rt.004 Rw.001 Kel. Klender Kec, Duren Sawit, Kota Adm. Jakarta Timur 13470
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Location 3 - Cancelled -->
                <div class="border border-red-200 bg-red-100 rounded-xl p-4">
                    <div class="flex items-start gap-3">
                        <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
                            <i class="w-4 h-4 text-white" data-lucide="x"></i>
                        </div>
                        <div class="flex-1">
                            <div class="flex items-center gap-2 mb-2">
                                <span class="bg-red-500 text-white text-xs font-semibold px-2 py-1 rounded-full">Batal Angkut</span>
                                <span class="text-xs text-gray-500">Lokasi 3</span>
                            </div>
                            <h4 class="font-bold text-gray-900 mb-1">CV Tri Berkah Sejahtera</h4>
                            <p class="text-sm text-gray-600 mb-2">Alamat:</p>
                            <p class="text-sm text-gray-700 leading-relaxed">
                                Kp. Pertanian II Rt.004 Rw.001 Kel. Klender Kec, Duren Sawit, Kota Adm. Jakarta Timur 13470
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

        <!-- Bottom Navigation -->
        <partial name="~/Views/Admin/Transport/SpjDriver/Shared/Components/_Navigation.cshtml" />
</div>