@if (session('success') || session('error'))
    <div id="toast-alert" class="fixed top-20 right-5 z-50 flex items-center w-full max-w-sm p-4 space-x-3 text-black rounded-lg shadow-xl transition-opacity duration-500 ease-in-out {{ session('success') ? 'bg-green-500 border border-green-800/50' : 'bg-red-500 border border-red-800/50' }}" role="alert">
        <div class="ml-2 text-md font-normal">
            <span class="font-bold">{{ session('success') ? '¡Éxito!' : 'Error:' }}</span> 
            {{ session('success') ?? session('error') }}
        </div>
        <button type="button" onclick="closeToastAlert()" class="ml-auto -mx-1.5 -my-1.5 bg-transparent text-black hover:text-gray-800 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 inline-flex h-8 w-8 justify-center items-center" aria-label="Close">
            <span class="sr-only">Cerrar</span>
            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
            </svg>
        </button>
    </div>

    <script>
        function closeToastAlert() {
            const alertElement = document.getElementById('toast-alert');
            if (alertElement) {
                alertElement.classList.add('opacity-0');
                setTimeout(() => alertElement.remove(), 500);
            }
        }

        setTimeout(() => {
            closeToastAlert();
        }, 5000); // 5 seconds
    </script>
@endif