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

@section Styles {
    <link rel="stylesheet" href="@Url.Content("~/driver/css/scanner.css")" asp-append-version="true" />
}

<div class="max-w-sm mx-auto container bg-white min-h-screen">
    <div class="bg-upst text-white px-6 pt-10 pb-16 rounded-b-[40px] shadow-lg relative overflow-hidden">
        <div class="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full -mr-16 -mt-16"></div>
            <div class="flex items-center justify-between relative z-10">
                <a href="@Url.Action("Index", "Home")" class="w-10 h-10 flex items-center justify-center bg-white/20 hover:bg-white/30 rounded-xl transition-colors">
                    <i class="w-5 h-5" data-lucide="arrow-left"></i>
                </a>
                <div class="text-center">
                    <h1 class="text-lg font-bold tracking-wide uppercase">Submit Struk</h1>
                    <p class="text-[10px] text-white/70 font-medium">Upload Struk SPJ</p>
                </div>
                <img src="@Url.Content("~/driver/upst_white.svg")" alt="UPST Logo" class="absolute top-6 left-8 w-20 h-auto opacity-20">
                <div class="w-10"></div>
            </div>
        </div>

        <div class="px-6 py-6 space-y-4">
            <div id="loadingState" class="text-center py-8">
                <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-upst"></div>
                <p class="mt-2 text-sm text-gray-600">Memeriksa data dari API...</p>
            </div>

            <div id="errorState" class="hidden">
                <div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
                    <div class="flex items-center gap-3">
                        <i class="w-5 h-5 text-red-500" data-lucide="alert-circle"></i>
                        <div>
                            <p class="text-sm font-medium text-red-800">Data tidak ditemukan</p>
                            <p class="text-xs text-red-600">Gagal mengambil data dari API Titik Buang</p>
                        </div>
                    </div>
                </div>
                <a href="@Url.Action("StrukRDF", "Submit")" class="block w-full py-3 bg-upst text-white rounded-lg font-medium  transition-colors text-center">
                    Upload Struk Manual
                </a>
            </div>

            <div id="formState" class="hidden space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Nomor Struk</label>
                    <input type="text" id="nomorStruk" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-upst focus:border-transparent" placeholder="Masukkan nomor struk">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Berat Sampah (kg)</label>
                    <input type="number" id="beratSampah" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-upst focus:border-transparent" placeholder="Masukkan berat sampah">
                </div>
                <button type="submit" class="w-full py-3 bg-upst text-white rounded-lg font-medium hover:bg-upst-dark transition-colors">
                    Simpan
                </button>
            </div>
        </div>
        
        <partial name="~/Views/Admin/Transport/SpjDriverUpst/Shared/Components/_Navigation.cshtml" />

    </div>
</div>

@section Scripts {
    <script>
        document.addEventListener('DOMContentLoaded', async function() {
            const loadingState = document.getElementById('loadingState');
            const errorState = document.getElementById('errorState');
            const formState = document.getElementById('formState');

            try {
                const urlParams = new URLSearchParams(window.location.search);
                const doorId = urlParams.get('door_id') || '0744 U';

                const formData = new FormData();
                formData.append('door_id', doorId);

                const response = await fetch('https://bgmiota.upstdlh.id/bgmiota/public/api/get-spj', {
                    method: 'POST',
                    body: formData
                });

                if (!response.ok) {
                    throw new Error('API request failed');
                }

                const data = await response.json();

                if (!data || (Array.isArray(data) && data.length === 0)) {
                    throw new Error('No data found');
                }

                loadingState.classList.add('hidden');
                formState.classList.remove('hidden');

                if (data && typeof data === 'object') {
                    if (data.id_struk) {
                        document.getElementById('nomorStruk').value = data.id_struk;
                    }
                    if (data.weight && data.weight_after) {
                        const beratNetto = data.weight - data.weight_after;
                        document.getElementById('beratSampah').value = beratNetto;
                    }
                }

            } catch (error) {
                console.error('API Error:', error);
                loadingState.classList.add('hidden');
                errorState.classList.remove('hidden');
            }
        });
    </script>
}