@{
    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 gap-1">
                @* <div class="flex items-center gap-2 text-base font-medium">
                    <span>Hallo</span>
                    <span>👋</span>
                </div>
                <h1 class="text-xl font-bold leading-tight">Bonny Agung Putra</h1>
                <p class="text-base opacity-90">Driver UPST</p> *@
                <!-- Your Location -->
            <p class="text-sm mt-2 opacity-90">Your Location:</p>
               <p id="userLocation" class="font-semibold text-sm tracking-wide cursor-pointer underline">
                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-32 rounded-2xl relative overflow-hidden shadow-lg z-21">
            <!-- Background pattern -->
            <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>

        <!-- Pickup Locations -->
        <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>
                <button class="bg-gray-400 text-white px-4 py-1 rounded-full text-sm">
                    Selesai
                </button>
            </div>

            <!-- Location 1 - Completed -->
            <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 2 - Pending -->
                <div class="bg-white border border-gray-200 rounded-lg p-4 mb-6 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</h4>
                            <p class="text-sm text-gray-600 mb-1">Shell Radio Dalam</p>
                            <p class="text-sm text-gray-600 mb-1">Alamat</p>
                            <p class="text-sm text-gray-700">
                                Jl. Radio Dalam Raya No.6C Gandaria Utara, Kecamatan Kebayoran Baru, Kota Jakarta Selatan 12140
                            </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>
        </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";
        }
    }

    // Ambil dari localStorage jika ada
    const savedAddress = localStorage.getItem("user_address");
    if (savedAddress) {
        userLocationEl.textContent = savedAddress;
    } else {
        getLocationUpdate(); // Pertama kali ambil lokasi
    }

    // ✅ Klik untuk update lokasi
    userLocationEl.addEventListener("click", function () {
        getLocationUpdate();
    });
});
</script>
</register-block>