@{
    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-orange-500 to-orange-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-orange-100 rounded-full flex items-center justify-center">
                    <i class="w-5 h-5 text-orange-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-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">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-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">
                        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>