eSPJ/Views/Admin/Transport/SpjDriver/Submit/Struk.cshtml

82 lines
3.6 KiB
Plaintext

@{
Layout = "~/Views/Admin/Transport/SpjDriver/Shared/_Layout.cshtml";
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/Admin/Transport/SpjDriver/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>