@if (session('success') || session('error'))
    {{-- Ubah z-index menjadi z-30 agar berada di bawah Top Bar (z-40/50) --}}
    {{-- Tambahkan margin-top atau padding agar tidak tertutup sepenuhnya oleh Top Bar jika posisinya fixed --}}
    <div id="alert-wrapper" class="relative z-30"> 
        <div id="alert-box"
            class="flex items-center p-4 mb-6 rounded-2xl shadow-lg border-t-4 transition-all duration-500 ease-in-out {{ session('success') ? 'text-emerald-800 border-emerald-400 bg-emerald-50' : 'text-red-800 border-red-400 bg-red-50' }}"
            role="alert">

            {{-- Icon Dinamis --}}
            <div class="flex-shrink-0 w-10 h-10 {{ session('success') ? 'bg-emerald-100 text-emerald-600' : 'bg-red-100 text-red-600' }} rounded-xl flex items-center justify-center mr-4">
                <i class="fas {{ session('success') ? 'fa-check-double' : 'fa-exclamation-circle' }} text-lg"></i>
            </div>

            {{-- Pesan --}}
            <div class="flex-1">
                <p class="text-[10px] uppercase font-bold tracking-widest opacity-60 mb-0.5">Notifikasi Sistem</p>
                <p class="text-sm font-bold tracking-tight">{{ session('success') ?? session('error') }}</p>
            </div>

            {{-- Tombol Close --}}
            <button type="button" onclick="closeAlert()"
                class="ml-4 p-2 rounded-xl hover:bg-black/5 text-slate-400 hover:text-slate-600 transition">
                <i class="fas fa-times text-sm"></i>
            </button>
        </div>
    </div>

    <style>
        .alert-fade-out {
            opacity: 0;
            transform: translateY(-20px);
            pointer-events: none;
        }
    </style>

    <script>
        function closeAlert() {
            const alertBox = document.getElementById('alert-box');
            if (alertBox) {
                alertBox.classList.add('alert-fade-out');
                setTimeout(() => {
                    alertBox.remove();
                }, 500);
            }
        }
        
        document.addEventListener('DOMContentLoaded', function() {
            const alertBox = document.getElementById('alert-box');
            if (alertBox) {
                // Hilang otomatis dalam 5 detik
                setTimeout(() => {
                    closeAlert();
                }, 5000);
            }
        });
    </script>
@endif