@if(session('success'))
<div class="alert alert-success auto-hide">{{ session('success') }}</div>
@endif

@if(session('danger'))
<div class="alert alert-danger auto-hide">{{ session('danger') }}</div>
@endif

@if(session('error'))
<div class="alert alert-danger auto-hide">{{ session('error') }}</div>
@endif

@if ($errors->any())
<div class="alert alert-danger small">
    <ul class="m-0">
        @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif


<style>
    .alert {
        transition: opacity 1s ease-out, height 0.5s ease-out, padding 0.5s ease-out;
        height: auto;
        padding: 10px;
        overflow: hidden;
    }

    .alert.fade-out {
        opacity: 0;
        height: 0;  /* Hace que la alerta se colapse */
        padding: 0; /* Elimina el relleno */
        overflow: hidden; /* Asegura que el contenido no sea visible */
    }
</style>

<script>
    setTimeout(function() {
        // Solo ocultar alerts que tengan la clase 'auto-hide'
        let alerts = document.querySelectorAll('.alert.auto-hide');
        alerts.forEach(alert => {
            alert.classList.add('fade-out');
        });
    }, 5000); // 5000 milisegundos = 5 segundos
</script>