@{
    ViewData["Title"] = "Submit Foto Muatan";
}


<div class="max-w-sm mx-auto bg-white min-h-screen">
    <!-- Header with Orange Background -->
    <div class="bg-orange-500 text-white px-3 py-4 rounded-b-2xl relative pb-12">
        <div class="flex items-center justify-between">
            <a href="@Url.Action("Index", "Home")" class="p-1 hover:bg-white/10 rounded-full transition-colors">
                <i class="w-5 h-5" data-lucide="chevron-left"></i>
            </a>
            <h1 class="text-lg font-bold">Unggah Foto Muatan</h1>
            <div class="w-8"></div>
        </div>
    </div>


    <!-- Upload -->
    <div class="px-4 py-6">
        <div class="bg-white rounded-2xl p-5 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">Foto Muatan Kendaraan</h2>
                <p class="text-xs text-gray-500">Optional</p>
            </div>
        </div>
        <div class="border-2 border-dashed border-gray-300 rounded-xl p-6 text-center hover:border-red-400 transition-colors">
            <input type="file" name="FotoKondisiKendaraan" accept="image/*" class="hidden" id="foto-upload">
            <label for="foto-upload" class="cursor-pointer">
                <div class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="w-6 h-6 text-gray-400" data-lucide="camera"></i>
                </div>
                <p class="text-sm text-gray-600">Tap untuk unggah foto</p>
                <p class="text-xs text-gray-400 mt-1">JPG, PNG maksimal 5MB</p>
            </label>
        </div>

        <!-- Lokasi User -->
        <div class="mt-6 mb-2">
            <div class="flex items-center gap-2">
                <i class="w-4 h-4 text-orange-500" data-lucide="map-pin"></i>
                <span class="text-sm text-gray-700">Lokasi Anda:</span>
            </div>
            <p id="userLocationSubmit" class="font-semibold text-xs tracking-wide cursor-pointer underline text-orange-600 hover:text-orange-800 transition mt-1">
                Mendeteksi lokasi...
            </p>
            <p class="text-xs text-gray-400 mt-1">Klik lokasi di atas untuk update posisi Anda</p>
        </div>

        <div>
            <form asp-action="UploadFotoMuatan" method="post" class="mt-6">

                    <div class="flex gap-3 pt-4">
                        <button type="submit"
                                class="flex-1 bg-gradient-to-r from-orange-500 to-orange-600 text-white font-semibold py-3 rounded-xl hover:from-orange-600 hover:to-orange-700 transition-all duration-200 shadow-lg">
                            Unggah
                        </button>
                    </div>
            </form>
        </div>
    </div>

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


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

    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
    userLocationEl.addEventListener("click", function () {
        getLocationUpdate();
    });
});
</script>
</register-block>