<!-- Flash Messages -->
<?php foreach (['success', 'error', 'info', 'warning'] as $type): ?>
    <?php if (session()->getFlashdata($type)): ?>
        <div class="alert alert-<?= esc($type) ?> alert-dismissible fade show" role="alert">
            <?= session()->getFlashdata($type) ?>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    <?php endif; ?>
<?php endforeach; ?>

<!-- Auto-hide Flash Messages -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const alerts = document.querySelectorAll('.alert');

        alerts.forEach(function (alert) {
            setTimeout(() => {
                alert.classList.add('fade');
                alert.classList.remove('show');
                setTimeout(() => {
                    alert.remove();
                }, 500);
            }, 4000);
        });
    });
</script>
