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

@{
    Layout = "~/Views/Admin/Transport/SpjDriver/Shared/_Layout.cshtml";
    ViewData["Title"] = "Home Page";
}

 <div class="w-full lg:max-w-sm mx-auto bg-gray-50 min-h-screen">
    
        <div class="absolute top-0 w-full lg:max-w-sm mx-auto bg-gradient-to-r from-cyan-600 to-cyan-500 text-white rounded-b-3xl h-[250px] flex flex-col justify-between px-6 py-6 shadow-lg z-10">
            <div class="flex justify-between items-center">
            <div class="flex flex-col">
                <h1 class="text-xl font-bold text-white mb-1">Bonny Agung Putra</h1>
                <div class="flex items-center gap-2">
                <div class="w-2 h-2 bg-green-300 rounded-full animate-pulse"></div>
                <p class="text-sm font-medium text-cyan-100">Driver</p>
                </div>
            </div>
            <div class="relative">
                <div class="w-12 h-12 rounded-full border-2 border-white overflow-hidden shadow-md flex items-center justify-center cursor-pointer bg-white/20 hover:bg-white/30 transition-all duration-200" id="profileMenuButton">
                <i class="w-6 h-6 text-white" data-lucide="user"></i>
                </div>
                <div id="profileMenuDropdown" class="absolute top-14 right-0 mt-2 w-36 bg-white rounded-lg shadow-xl py-1.5 z-50 hidden border border-gray-100">
                <form method="post" asp-controller="Auth" asp-action="Logout">
                    <button type="submit" class="flex items-center gap-2 w-full text-left px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50 transition">
                    <i class="w-4 h-4" data-lucide="log-out"></i>
                    Logout
                    </button>
                </form>
                </div>
            </div>
            </div>
            
            @* <div class="flex flex-col space-y-2">
                <div class="flex items-center gap-2">
                    <div class="p-1.5 bg-white/20 rounded-lg">
                    <i class="w-4 h-4 text-white" data-lucide="map-pin"></i>
                    </div>
                    <span class="text-sm font-medium text-white/90">Lokasi Anda:</span>
                </div>
                <div class="bg-white/10 rounded-lg p-3 border border-white/20">
                    <p id="userLocation" class="font-medium text-sm cursor-pointer text-white hover:text-cyan-200 transition-colors">
                    Mendeteksi lokasi...
                    </p>
                </div>
            </div> *@
        </div>

        <div class="bg-gradient-to-br from-cyan-700 to-cyan-900 text-white mx-4 px-5 py-5 mt-25 rounded-2xl relative shadow-lg border border-cyan-700/50 z-20">
            <div class="absolute inset-0 opacity-5">
            <div class="absolute -top-5 -right-5 w-24 h-24 bg-white rounded-full"></div>
            <div class="absolute top-20 -left-5 w-12 h-12 bg-white rounded-full"></div>
            </div>
            
            <div class="absolute right-3 bottom-3 opacity-15 pointer-events-none select-none" style="width: 120px; height: 120px;">
            <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-start mb-4">
                <div>
                <h2 class="text-xl font-bold mb-1 text-white">Data SPJ</h2>
                <div class="w-10 h-1 bg-cyan-300 rounded-full"></div>
                </div>
                <div class="flex flex-col items-end gap-2">
                <div class="bg-white text-cyan-800 px-3 py-1.5 rounded-xl text-sm font-bold shadow flex items-center gap-1.5">
                    <i class="w-4 h-4 text-green-600" data-lucide="truck"></i>
                    <span>B 9632 TOR</span>
                </div>
                <div class="bg-cyan-700/70 text-white px-2.5 py-1 rounded-full text-xs font-medium tracking-wide border border-cyan-600/50">
                    JRC 005
                </div>
                </div>
            </div>
            
            <div class="grid grid-cols-2 gap-3 mb-3">
                <div class="bg-white/10 rounded-xl p-3 border border-white/20 col-span-2">
                <p class="text-xs text-cyan-100 mb-1">No. SPJ</p>
                <p class="font-bold text-base text-white">SPJ/07-2025/PKM/000476</p>
                </div>
                <div class=" p-3 col-span-2">
                <p class="text-xs text-cyan-100 mb-1">Tujuan Pembuangan</p>
                <p class="font-bold text-base text-white">BANTAR GEBANG</p>
                </div>
            </div>
            
            <div class="absolute -bottom-3 right-1" id="qrCodeTrigger">
                <div class="bg-white p-2.5 rounded-xl shadow-lg border-2 border-cyan-200 hover:shadow-xl transition-all duration-300 transform hover:scale-105">
                <img src="@Url.Content("~/driver/images/qr.png")" alt="QR Code" class="w-14 h-14 object-contain">
                </div>
            </div>
            </div>
        </div>

        <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">
                    <a href="@Url.Action("DetailPenjemputan", "SpjDriver")" 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>
                    <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>

                    <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>

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

    <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">
            <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>
            
            <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>
            
            <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>
            
            <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>