{{-- included in top_nav component --}}
{{-- <div class="container"> --}}
    @if (session()->has('success'))
        <div class="alert alert-success border-0 d-flex align-items-center" role="alert">
            <div class="bg-success me-3 icon-item"><span class="fas fa-check-circle text-white fs-6"></span></div>
            <p class="mb-0 flex-1">{{ session()->get('success') }} .</p><button class="btn-close" type="button"
                data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @elseif (session()->has('info'))
        <div class="alert alert-info border-0 d-flex align-items-center" role="alert">
            <div class="bg-info me-3 icon-item"><span class="fas fa-info-circle text-white fs-6"></span></div>
            <p class="mb-0 flex-1">{{ session()->get('info') }} </p><button class="btn-close" type="button"
                data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @elseif (session()->has('warning'))
        <div class="alert alert-warning border-0 d-flex align-items-center" role="alert">
            <div class="bg-warning me-3 icon-item"><span class="fas fa-exclamation-circle text-white fs-6"></span></div>
            <p class="mb-0 flex-1">{{ session()->get('warning') }} </p><button class="btn-close" type="button"
                data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @elseif (session()->has('danger'))
        <div class="alert alert-danger border-0 d-flex align-items-center" role="alert">
            <div class="bg-danger me-3 icon-item"><span class="fas fa-times-circle text-white fs-6"></span></div>
            <p class="mb-0 flex-1">{{ session()->get('danger') }} </p><button class="btn-close" type="button"
                data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
{{-- </div> --}}

<style>
    .fade-out {
        opacity: 0;
        transition: opacity 1s ease-out;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const alertElement = document.querySelector('.alert');
        if (alertElement) {
            setTimeout(() => {
                alertElement.classList.add('fade-out');
                setTimeout(() => {
                    const bsAlert = new bootstrap.Alert(alertElement);
                    bsAlert.close();
                }, 1000); // Match this with the CSS transition duration
            }, 5000); // 5000 milliseconds = 5 seconds
        }
    });
</script>