<div id="deleteModal" class="fixed inset-0 z-[60] hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-center justify-center min-h-screen px-4 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity bg-gray-900/40 backdrop-blur-sm" aria-hidden="true" onclick="closeDeleteModal()"></div>

        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

        <div class="inline-block overflow-hidden text-left align-bottom transition-all transform bg-white shadow-2xl rounded-[2.5rem] sm:my-8 sm:align-middle sm:max-w-lg sm:w-full border border-green-50">
            <div class="px-8 pt-10 pb-8 bg-white">
                <div class="sm:flex sm:items-start">
                    <div class="flex items-center justify-center flex-shrink-0 w-14 h-14 mx-auto bg-red-50 rounded-3xl sm:mx-0 sm:h-12 sm:w-12 border border-red-100">
                        <svg class="w-6 h-6 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                        </svg>
                    </div>
                    <div class="mt-4 text-center sm:mt-0 sm:ml-6 sm:text-left">
                        <h3 class="text-2xl font-black text-gray-800 tracking-tight">Hapus Data?</h3>
                        <div class="mt-3">
                            <p class="text-sm text-gray-500 leading-relaxed">
                                Anda akan menghapus data <span id="deleteItemName" class="font-extrabold text-red-600 uppercase"></span>. Tindakan ini permanen dan tidak dapat dibatalkan.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="px-8 py-6 bg-gray-50/50 flex flex-col sm:flex-row-reverse gap-3">
                <button type="button" id="confirmDeleteBtn" class="w-full sm:w-auto px-8 py-4 bg-red-600 text-white text-xs font-black uppercase tracking-widest rounded-2xl shadow-lg shadow-red-200 hover:bg-red-700 active:scale-95 transition-all">
                    Ya, Hapus Data
                </button>
                <button type="button" onclick="closeDeleteModal()" class="w-full sm:w-auto px-8 py-4 bg-white text-gray-400 text-xs font-black uppercase tracking-widest rounded-2xl border border-gray-200 hover:bg-gray-50 active:scale-95 transition-all">
                    Batalkan
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    let currentDeleteId = null;

    function openDeleteModal(id, name) {
        currentDeleteId = id;
        document.getElementById('deleteItemName').innerText = name;
        document.getElementById('deleteModal').classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function closeDeleteModal() {
        document.getElementById('deleteModal').classList.add('hidden');
        document.body.style.overflow = 'auto';
        currentDeleteId = null;
    }

    document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
        if (currentDeleteId) {
            document.getElementById('form-delete-' + currentDeleteId).submit();
        }
    });

    window.addEventListener('keydown', function (event) {
        if (event.key === 'Escape') closeDeleteModal();
    });
</script>