<section>
    <p class="text-sm text-stone-600 mb-4">
        Setelah akun dihapus, semua data akan dihapus secara permanen. Tindakan ini <strong class="text-rose-600">tidak dapat dibatalkan</strong>.
    </p>

    {{-- Trigger button --}}
    <button type="button" onclick="openDeleteModal()"
            class="inline-flex items-center gap-2 px-5 py-2.5 bg-rose-500 hover:bg-rose-600 text-white text-sm font-bold rounded-xl shadow-sm transition">
        <i class="fas fa-trash"></i> Hapus Akun Saya
    </button>
</section>

{{-- ══ Modal Hapus Akun ══ --}}
<div id="deleteAccountModal" class="fixed inset-0 z-[9999] hidden items-center justify-center bg-black/50 backdrop-blur-sm p-4">
    <div id="deleteAccountModalContent"
         class="bg-white rounded-2xl w-full max-w-md shadow-2xl transform transition-all duration-300 scale-95 opacity-0 overflow-hidden">

        {{-- Header --}}
        <div class="bg-rose-50 border-b border-rose-100 p-5 flex items-center gap-3">
            <div class="w-10 h-10 rounded-xl bg-rose-100 flex items-center justify-center flex-shrink-0">
                <i class="fas fa-triangle-exclamation text-rose-600 text-lg"></i>
            </div>
            <div>
                <h3 class="font-bold text-rose-700">Hapus Akun</h3>
                <p class="text-xs text-rose-500">Tindakan ini tidak dapat dibatalkan</p>
            </div>
            <button onclick="closeDeleteModal()" class="ml-auto text-rose-400 hover:text-rose-600 transition">
                <i class="fas fa-times text-lg"></i>
            </button>
        </div>

        {{-- Body --}}
        <form method="post" action="{{ route('profile.destroy') }}" class="p-5 space-y-4">
            @csrf
            @method('delete')

            <p class="text-sm text-stone-600">
                Apakah kamu yakin ingin menghapus akun ini? Masukkan password untuk konfirmasi.
            </p>

            <div>
                <label for="del_password" class="block text-xs font-semibold text-stone-600 mb-1.5">
                    Password <span class="text-rose-500">*</span>
                </label>
                <div class="relative">
                    <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-stone-400 text-sm">
                        <i class="fas fa-lock"></i>
                    </span>
                    <input id="del_password" name="password" type="password"
                           class="w-full pl-10 pr-4 py-2.5 rounded-xl border border-stone-200 bg-stone-50 text-sm text-stone-800 focus:outline-none focus:ring-2 focus:ring-rose-400 focus:border-transparent transition"
                           placeholder="Masukkan password kamu">
                </div>
                @error('password', 'userDeletion')
                <p class="mt-1 text-xs text-rose-500 flex items-center gap-1"><i class="fas fa-exclamation-circle"></i> {{ $message }}</p>
                @enderror
            </div>

            <div class="flex gap-3 pt-1">
                <button type="button" onclick="closeDeleteModal()"
                        class="flex-1 px-4 py-2.5 bg-stone-100 hover:bg-stone-200 text-stone-700 text-sm font-semibold rounded-xl transition">
                    Batal
                </button>
                <button type="submit"
                        class="flex-1 px-4 py-2.5 bg-rose-500 hover:bg-rose-600 text-white text-sm font-bold rounded-xl transition shadow-sm">
                    <i class="fas fa-trash mr-1"></i> Ya, Hapus
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function openDeleteModal() {
    const modal   = document.getElementById('deleteAccountModal');
    const content = document.getElementById('deleteAccountModalContent');
    modal.classList.remove('hidden');
    modal.classList.add('flex');
    void modal.offsetHeight;
    setTimeout(() => {
        content.classList.remove('scale-95', 'opacity-0');
        content.classList.add('scale-100', 'opacity-100');
    }, 10);
    document.body.style.overflow = 'hidden';
}

function closeDeleteModal() {
    const modal   = document.getElementById('deleteAccountModal');
    const content = document.getElementById('deleteAccountModalContent');
    content.classList.remove('scale-100', 'opacity-100');
    content.classList.add('scale-95', 'opacity-0');
    setTimeout(() => {
        modal.classList.remove('flex');
        modal.classList.add('hidden');
        document.body.style.overflow = '';
    }, 300);
}

document.getElementById('deleteAccountModal')?.addEventListener('click', function(e) {
    if (e.target === this) closeDeleteModal();
});

document.addEventListener('keydown', e => {
    if (e.key === 'Escape' && document.getElementById('deleteAccountModal')?.classList.contains('flex')) {
        closeDeleteModal();
    }
});

// Auto-open jika ada error validasi
@if ($errors->userDeletion->isNotEmpty())
    document.addEventListener('DOMContentLoaded', openDeleteModal);
@endif
</script>
