106 lines
4.7 KiB
Plaintext
106 lines
4.7 KiB
Plaintext
@{
|
|
Layout = "~/Views/Admin/Transport/SpjDriver/Shared/_Layout.cshtml";
|
|
ViewData["Title"] = "Detail Batal Penjemputan";
|
|
}
|
|
|
|
<div class="w-full lg:max-w-sm mx-auto bg-gray-50 min-h-screen">
|
|
<div class="bg-gradient-to-r from-cyan-500 to-cyan-600 text-white px-4 py-4 sticky top-0 z-10 shadow-lg">
|
|
<div class="flex items-center justify-between">
|
|
<a href="@Url.Action("Index", "Home")" class="p-2 hover:bg-white/10 rounded-full transition-all duration-200">
|
|
<i class="w-5 h-5" data-lucide="chevron-left"></i>
|
|
</a>
|
|
<h1 class="text-lg font-bold">Pembatalan Penjemputan</h1>
|
|
<div class="w-9"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-4 pt-4">
|
|
<div class="bg-white rounded-2xl p-4 shadow-sm border border-gray-100 mb-4">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<div class="w-10 h-10 bg-cyan-100 rounded-full flex items-center justify-center">
|
|
<i class="w-5 h-5 text-cyan-600" data-lucide="map-pin"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-bold text-gray-900">CV Tri Berkah Sejahtera</h3>
|
|
<p class="text-xs text-gray-500">Lokasi yang dibatalkan</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-gray-700 leading-relaxed">
|
|
Kp. Pertanian II Rt.004 Rw.001 Kel. Klender Kec, Duren Sawit, Kota Adm. Jakarta Timur 13470
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-4 pb-6">
|
|
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-10 h-10 bg-cyan-100 rounded-full flex items-center justify-center">
|
|
<i class="w-5 h-5 text-cyan-600" data-lucide="file-text"></i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-lg font-bold text-gray-900">Form Pembatalan</h2>
|
|
<p class="text-xs text-gray-500">Berikan keterangan</p>
|
|
</div>
|
|
</div>
|
|
|
|
<form asp-action="Batal" method="post" class="space-y-5">
|
|
<!-- Alasan Pembatalan -->
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-3">Alasan Pembatalan</label>
|
|
<textarea name="AlasanPembatalan"
|
|
class="w-full rounded-xl text-sm border border-gray-300 focus:border-red-500 focus:ring-2 focus:ring-red-200 p-4 text-gray-700 resize-none transition-all duration-200"
|
|
rows="5"
|
|
placeholder="Jelaskan alasan pembatalan penjemputan..."
|
|
required></textarea>
|
|
<div class="text-red-500 text-sm mt-2" id="validation-message" style="display: none;">
|
|
Harap isi alasan pembatalan
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-3 pt-4">
|
|
<a href="@Url.Action("Index", "Home")"
|
|
class="flex-1 bg-gray-200 text-gray-700 font-semibold py-3 rounded-xl text-center hover:bg-gray-300 transition-colors">
|
|
Batal
|
|
</a>
|
|
<button type="submit"
|
|
class="flex-1 bg-gradient-to-r from-cyan-500 to-cyan-600 text-white font-semibold py-3 rounded-xl hover:from-cyan-600 hover:to-cyan-700 transition-all duration-200 shadow-lg">
|
|
Konfirmasi
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom Navigation -->
|
|
<partial name="~/Views/Admin/Transport/SpjDriver/Shared/Components/_Navigation.cshtml" />
|
|
</div>
|
|
|
|
<register-block dynamic-section="scripts" key="jsDetailBatal">
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const alasanTextarea = document.querySelector('textarea[name="AlasanPembatalan"]');
|
|
const form = document.querySelector('form');
|
|
const validationMessage = document.getElementById('validation-message');
|
|
|
|
form.addEventListener('submit', function(e) {
|
|
if (!alasanTextarea.value.trim()) {
|
|
e.preventDefault();
|
|
validationMessage.style.display = 'block';
|
|
alasanTextarea.focus();
|
|
alasanTextarea.style.borderColor = '#ef4444';
|
|
return false;
|
|
}
|
|
|
|
validationMessage.style.display = 'none';
|
|
return true;
|
|
});
|
|
|
|
alasanTextarea.addEventListener('input', function() {
|
|
if (this.value.trim()) {
|
|
validationMessage.style.display = 'none';
|
|
this.style.borderColor = '';
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</register-block> |