eSPJ/Views/Admin/Transport/SpjDriver/Home/Index.cshtml

@{
    Layout = "~/Views/Admin/Transport/SpjDriver/Shared/_Layout.cshtml";
    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="relative flex flex-col items-center justify-center">
                    <div class="w-12 h-12 rounded-full border-3 border-white overflow-hidden shadow-md flex items-center justify-center cursor-pointer group" id="profileMenuButton">
                        <i class="w-8 h-8 text-white" data-lucide="user"></i>
                    </div>
                    <!-- Dropdown Menu -->
                    <div id="profileMenuDropdown" class="absolute top-12 right-0 mt-2 w-32 bg-white rounded shadow-lg py-2 z-50 hidden">
                        <form method="post" asp-controller="Auth" asp-action="Logout">
                            <button type="submit" class="hover:cursor-pointer flex items-center gap-2 w-full text-left px-4 py-2 text-sm font-semibold text-red-600 hover:bg-red-50 transition rounded-md">
                                <i class="w-4 h-4" data-lucide="log-out"></i>
                                Logout
                            </button>
                        </form>
                    </div>
                </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("~/driver/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 cursor-pointer" style="width: 60px; height: 60px;" id="qrCodeTrigger">
                    <div class="bg-white p-2 rounded-xl hover:shadow-lg transition-shadow">
                      <img src="@Url.Content("~/driver/images/qr.png")" alt="DLH Logo" class="w-full h-full object-contain">
                    </div>
                </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/Admin/Transport/SpjDriver/Shared/Components/_Navigation.cshtml" />
      
    </div>

    <!-- QR Code Popup Modal -->
    <div id="qrCodeModal" class="fixed inset-0 bg-black/75 items-center justify-center z-50 hidden">
        <div class="bg-white rounded-2xl p-6 mx-4 max-w-sm relative">
            <!-- Close Button -->
            <button id="closeQrModal" class="absolute top-3 right-3 w-8 h-8 bg-gray-200 hover:bg-gray-300 rounded-full flex items-center justify-center transition-colors">
                <i class="w-4 h-4 text-gray-600" data-lucide="x"></i>
            </button>
            
            <!-- Modal Header -->
            <div class="text-center mb-4">
                <h3 class="text-lg font-bold text-gray-800">QR Code SPJ</h3>
                <p class="text-sm text-gray-600">SPJ/07-2025/PKM/000476</p>
            </div>
            
            <!-- QR Code Display -->
            <div class="bg-white p-4 rounded-xl border-2 border-gray-200 flex items-center justify-center">
                <img src="@Url.Content("~/driver/images/qr.png")" alt="QR Code SPJ" class="w-64 h-64 object-contain">
            </div>
            
            <!-- Instructions -->
            <div class="mt-4 text-center">
                <p class="text-xs text-gray-500">Arahkan QR Code ke scanner untuk verifikasi</p>
            </div>
        </div>
    </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>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const btn = document.getElementById("profileMenuButton");
        const dropdown = document.getElementById("profileMenuDropdown");

        btn.addEventListener("click", function (e) {
            e.stopPropagation();
            dropdown.classList.toggle("hidden");
        });

        document.addEventListener("click", function () {
            dropdown.classList.add("hidden");
        });
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const qrTrigger = document.getElementById("qrCodeTrigger");
        const qrModal = document.getElementById("qrCodeModal");
        const closeModal = document.getElementById("closeQrModal");
        let originalBrightness = null;
        let wakeLock = null;

        async function setMaxBrightness() {
            try {
                if ('wakeLock' in navigator) {
                    wakeLock = await navigator.wakeLock.request('screen');
                }

                if ('screen' in navigator && 'brightness' in navigator.screen) {
                    originalBrightness = navigator.screen.brightness;
                    navigator.screen.brightness = 1.0;
                }
            } catch (err) {
                console.log('Brightness control not supported:', err);
            }
        }

        async function restoreOriginalBrightness() {
            try {
                if (wakeLock) {
                    await wakeLock.release();
                    wakeLock = null;
                }

                if ('screen' in navigator && 'brightness' in navigator.screen && originalBrightness !== null) {
                    navigator.screen.brightness = originalBrightness;
                }
            } catch (err) {
                console.log('Error restoring brightness:', err);
            }
        }

        qrTrigger.addEventListener("click", function () {
            qrModal.classList.remove("hidden");
            qrModal.classList.add("flex");
            setMaxBrightness();
            
            if ('vibrate' in navigator) {
                navigator.vibrate(50);
            }
        });

        function closeQrCodeModal() {
            qrModal.classList.add("hidden");
            qrModal.classList.remove("flex");
            restoreOriginalBrightness();
        }

        closeModal.addEventListener("click", closeQrCodeModal);

        qrModal.addEventListener("click", function (e) {
            if (e.target === qrModal) {
                closeQrCodeModal();
            }
        });

        document.addEventListener("keydown", function (e) {
            if (e.key === "Escape" && !qrModal.classList.contains("hidden")) {
                closeQrCodeModal();
            }
        });

        document.addEventListener("visibilitychange", function () {
            if (document.hidden && !qrModal.classList.contains("hidden")) {
                restoreOriginalBrightness();
            } else if (!document.hidden && !qrModal.classList.contains("hidden")) {
                setMaxBrightness();
            }
        });
    });
</script>
</register-block>