<div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 9999;">
    <div id="liveToast"
         class="bs-toast toast fade 
         @if(session('toast_type') === 'success') bg-primary
         @elseif(session('toast_type') === 'error') bg-danger
         @else bg-secondary @endif"
         role="alert" aria-live="assertive" aria-atomic="true">

        <div class="toast-header text-white">
            <i class="icon-base me-2
                @if(session('toast_type') === 'success') bx bx-check-circle
                @elseif(session('toast_type') === 'error') bx bx-x-circle
                @else bx bx-bell @endif"></i>
            <div class="me-auto fw-medium">Website</div>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>

        <div class="toast-body text-white">
            {{ session('toast_message') }}
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        @if(session('toast_message'))
            const toastEl = document.getElementById('liveToast');
            const toast = new bootstrap.Toast(toastEl);
            toast.show();
        @endif
    });
</script>

