@{
    ViewData["Title"] = "Submit Struk";
}


<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 Struk</h1>
            <div class="w-8"></div>
        </div>
    </div>

     <form action="/submit-struk" method="post" class="px-8 py-8 space-y-6 bg-white rounded-xl mt-2">
            <div class="flex flex-col items-center space-y-2">
                <div class="bg-orange-100 rounded-full p-3">
                    <i data-lucide="file-text" class="w-7 h-7 text-orange-500"></i>
                </div>
                <h2 class="text-xl font-bold text-orange-500">Isi Data Struk</h2>
                <p class="text-sm text-gray-500 text-center">Masukkan nomor struk dan berat muatan dengan benar.</p>
            </div>
            
            <div>
                <label for="NomorStruk" class="block text-sm font-medium text-gray-700 mb-1">Nomor Struk</label>
                <input 
                    type="text" 
                    id="NomorStruk" 
                    name="NomorStruk" 
                    inputmode="numeric" 
                    pattern="[0-9]*"
                    class="mt-1 block w-full rounded-lg border border-orange-300 shadow-sm focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all duration-150 px-4 py-2" 
                    required 
                    placeholder="1234567890" 
                />
            </div>
            
            <div>
                <label for="BeratMuatan" class="block text-sm font-medium text-gray-700 mb-1">Berat Muatan (kg)</label>
                <input 
                    type="text" 
                    id="BeratMuatan" 
                    name="BeratMuatan" 
                    inputmode="decimal" 
                    pattern="[0-9]*\.?[0-9]*"
                    class="mt-1 block w-full rounded-lg border border-orange-300 shadow-sm focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all duration-150 px-4 py-2" 
                    required 
                    placeholder="1500" 
                />
            </div>
            
            <button type="submit" class="w-full bg-gradient-to-r from-orange-500 to-orange-400 text-white py-3 rounded-lg font-semibold shadow hover:from-orange-600 hover:to-orange-500 transition-all duration-150 flex items-center justify-center gap-2">
                <i data-lucide="send" class="w-5 h-5"></i>
                Submit
            </button>
        </form>
    
    <!-- Bottom Navigation -->
    <partial name="~/Views/Shared/Components/_Navigation.cshtml" />

</div>

<register-block dynamic-section="scripts" key="jsSubmitStruk">
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const nomorStrukInput = document.getElementById('NomorStruk');
        const beratMuatanInput = document.getElementById('BeratMuatan');

        nomorStrukInput.addEventListener('input', function() {
            this.value = this.value.replace(/[^0-9]/g, '');
        });

        beratMuatanInput.addEventListener('input', function() {
            this.value = this.value.replace(/[^0-9.]/g, '');
        });
    });
</script>
</register-block>