<!-- Toast Notification (Hidden by default) -->
<div class="position-fixed top-0 end-0 p-3" style="z-index: 1111">
    <div id="toast-container" class="toast overflow-hidden mt-3 fade hide" role="alert" aria-live="assertive" aria-atomic="true">
        @if (session('success'))
        <div class="align-items-center text-white bg-success border-0">
            <div class="d-flex">
                <div class="toast-body">
                    {{ session('success') }}
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
        @endif
        @if (session('error'))
        <div class="align-items-center text-white bg-danger border-0">
            <div class="d-flex">
                <div class="toast-body">
                    {{ session('error') }}
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
        @endif
        @if (session('warning'))
        <div class="align-items-center text-white bg-warning border-0">
            <div class="d-flex">
                <div class="toast-body">
                    {{ session('warning') }}
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
        @endif
    </div>
</div>

<!-- Toast JavaScript -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Show the toast when a message is flashed
        const toastTrigger = document.getElementById("toast-container");
        if (toastTrigger) {
            const toast = new bootstrap.Toast(toastTrigger, { delay: 3000 });
            toast.show();
        }
    });
</script>
