@{
    ViewData["Title"] = "Home Page";
}

 <div class="container max-w-sm mx-auto bg-white min-h-screen">
    
        <!-- Header -->
        <div class="absolute top-0 max-w-sm container mx-auto bg-orange-500 text-white rounded-br-[125px] h-[250px] flex flex-row justify-between items-start px-6 py-6 shadow-lg z-20">
            <div class="flex flex-col">
                <h1 class="text-md font-bold leading-tight text-white">Bonny Agung Putra</h1>
                <p class="text-xs opacity-90 font-medium text-orange-100">Driver UPST</span></p>
                <!-- Your Location -->
                <div class="mt-5 flex items-center gap-2">
                    <i class="w-4 h-4 text-white" data-lucide="map-pin"></i>
                    <span class="text-sm opacity-90">Lokasi Anda:</span>
                </div>
                <p id="userLocation" class="font-semibold text-xs tracking-wide cursor-pointer underline text-white hover:text-orange-200 transition">
                    Mendeteksi lokasi...
                </p>
            </div>
            <div class="flex items-center justify-center">
                <div class="w-14 h-14 rounded-full border-4 border-white overflow-hidden shadow-md">
                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face" alt="Profile" class="w-full h-full object-cover">
                </div>
            </div>
        </div>

        <!-- SPJ Data Card -->
        <div class="bg-green-500 text-white mx-4 px-6 py-6 mt-40 rounded-2xl relative overflow-hidden shadow-lg z-21">
            <div class="absolute right-0 bottom-0 opacity-30 pointer-events-none select-none" style="width: 160px; height: 160px;">
                <img src="@Url.Content("~/tree.svg")" alt="tree" class="w-full h-full object-contain">
            </div>
            <div class="relative z-10">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-bold">Data SPJ</h2>
                    <div class="flex flex-col items-end">
                        <div class="bg-white text-green-600 px-4 py-2 rounded-full text-base font-bold shadow-md flex items-center gap-2">
                            <span>B 9632 TOR</span>
                        </div>
                        <div class="text-xs text-white mt-1 font-semibold tracking-wide opacity-80">(JRC 005)</div>
                    </div>
                </div>
                <div class="space-y-1 mt-2">
                    <p class="text-sm opacity-90">No. SPJ</p>
                    <p class="font-bold text-lg tracking-wide">SPJ/07-2025/PKM/000476</p>
                    <p class="text-sm opacity-90 mt-3">Tujuan Pembuangan</p>
                    <p class="font-bold text-lg tracking-wide">Taman Barito</p>
                </div>
                <!-- DLH logo -->
                <div class="absolute bottom-2 right-4 opacity-80" style="width: 48px; height: 48px;">
                    <img src="@Url.Content("~/dlh_type.svg")" alt="DLH Logo" class="w-full h-full object-contain">
                </div>
            </div>
        </div>

        <!-- Lokasi Pengangkutan -->
        <div class="px-4 mt-8">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-800">Lokasi Pengangkutan</h3>
                <div class="relative group">
                    <i class="w-5 h-5 cursor-pointer text-gray-500" data-lucide="info"></i>
                    <div class="absolute right-full top-1/2 -translate-y-1/2 mr-2 w-max px-3 py-2 bg-gray-800 text-white text-xs rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-30">
                        Selesaikan semua lokasi <br> penjemputan untuk mengakhiri SPJ
                    </div>
                </div>
            </div>
            <div class="flex flex-col gap-2">
                    <!-- Location 1 - Berlangsung -->
                    <a href="@Url.Action("Index", "DetailPenjemputan")" class="hover:cursor-pointer">
                       <div class="bg-white border border-gray-200 rounded-lg p-4 mb-3 relative">
                            <div class="flex justify-between items-start">
                                <div class="flex-1">
                                    <span class="inline-block bg-yellow-400 text-white text-xs font-semibold px-3 py-1 rounded-full mb-1">Pengangkutan</span>
                                    <h4 class="font-semibold text-gray-800 mb-2">CV Tri Mitra Utama - Shell Radio Dalam</h4>
                                    <p class="text-sm text-gray-600 mb-1">Alamat</p>
                                    <p class="text-sm text-gray-700">
                                        Kp. Pertanian II Rt.004 Rw.001 Kel. Klender Kec, Duren Sawit, Kota Adm. Jakarta Timur 13470
                                    </p>
                                </div>
                                <div class="ml-4">
                                <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center">
                                    <i class="w-5 h-5 text-gray-400" data-lucide="circle-ellipsis"></i>
                                </div>
                                </div>
                            </div>
                        </div>
                    </a>
                    <!-- Location 2 - Selesai -->
                    <a href="@Url.Action("Index", "DetailPenjemputan")" class="hover:cursor-pointer">
                        <div class="bg-green-100 border border-green-200 rounded-lg p-4 mb-3 relative">
                            <div class="flex justify-between items-start">
                                <div class="flex-1">
                                    <span class="inline-block bg-green-500 text-white text-xs font-semibold px-3 py-1 rounded-full mb-1">Sudah Diangkut</span>
                                    <h4 class="font-semibold text-gray-800 mb-2">CV Tri Berkah Sejahtera</h4>
                                    <p class="text-sm text-gray-600 mb-1">Alamat</p>
                                    <p class="text-sm text-gray-700">
                                        Kp. Pertanian II Rt.004 Rw.001 Kel. Klender Kec, Duren Sawit, Kota Adm. Jakarta Timur 13470
                                    </p>
                                </div>
                                <div class="ml-4">
                                    <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
                                        <i class="w-5 h-5 text-white" data-lucide="circle-check"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>

                    <!-- Location 3 - Batal -->
                    <a href="@Url.Action("Batal", "DetailPenjemputan")" class="hover:cursor-pointer">
                        <div class="bg-red-100 border border-red-200 rounded-lg p-4 mb-3 relative">
                            <div class="flex justify-between items-start">
                                <div class="flex-1">
                                    <span class="inline-block bg-red-500 text-white text-xs font-semibold px-3 py-1 rounded-full mb-1">Batal Angkut</span>
                                    <h4 class="font-semibold text-gray-800 mb-2">CV Tri Berkah Sejahtera</h4>
                                    <p class="text-sm text-gray-600 mb-1">Alamat</p>
                                    <p class="text-sm text-gray-700">
                                        Kp. Pertanian II Rt.004 Rw.001 Kel. Klender Kec, Duren Sawit, Kota Adm. Jakarta Timur 13470
                                    </p>
                                </div>
                                <div class="ml-4">
                                    <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center">
                                        <i class="w-5 h-5 text-white" data-lucide="circle-x"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>

                </div>
         </div>

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


<register-block dynamic-section="scripts" key="jsHomeIndex">
<script>
document.addEventListener("DOMContentLoaded", function () {
    const userLocationEl = document.getElementById("userLocation");

    function reverseGeocode(lat, lng) {
        fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}`)
            .then(res => res.json())
            .then(data => {
                const address = data.display_name || `${lat}, ${lng}`;
                userLocationEl.textContent = address;
                localStorage.setItem("user_latitude", lat);
                localStorage.setItem("user_longitude", lng);
                localStorage.setItem("user_address", address);
            })
            .catch(() => {
                userLocationEl.textContent = `${lat}, ${lng}`;
            });
    }

    function getLocationUpdate() {
        if ("geolocation" in navigator) {
            userLocationEl.textContent = "Mendeteksi lokasi baru...";
            navigator.geolocation.getCurrentPosition(
                function (position) {
                    const lat = position.coords.latitude.toFixed(6);
                    const lng = position.coords.longitude.toFixed(6);
                    reverseGeocode(lat, lng);
                },
                function () {
                    userLocationEl.textContent = "Lokasi tidak diizinkan";
                }
            );
        } else {
            userLocationEl.textContent = "Browser tidak mendukung lokasi";
        }
    }

    const savedAddress = localStorage.getItem("user_address");
    if (savedAddress) {
        userLocationEl.textContent = savedAddress;
    } else {
        getLocationUpdate();
    }

    // Update Lokasi cuy
    userLocationEl.addEventListener("click", function () {
        getLocationUpdate();
    });
});
</script>
</register-block>