<!-- Toast Notification (Hidden by default) -->
@if (session()->has('success') || session()->has('error') || session()->has('warning'))
    <div class="position-fixed top-0 end-0 p-3" style="z-index: 1111">
        <div id="toastContainer" class="toast fade hide mt-3 overflow-hidden" role="alert" aria-live="assertive" aria-atomic="true">
            @foreach (['success' => 'bg-success', 'error' => 'bg-danger', 'warning' => 'bg-warning'] as $type => $class)
                @if (session()->has($type))
                    <div class="align-items-center text-white {{ $class }} border-0">
                        <div class="d-flex">
                            <div class="toast-body">
                                {{ session($type) }}
                            </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
            @endforeach
        </div>
    </div>
@endif

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