@if (session('success') || session('error'))
    <div class="position-fixed top-0 end-0 p-3" style="z-index: 1050; max-width: 100%;">
        <div id="toastMessage" class="toast align-items-center text-white shadow-lg rounded-3 border-0" role="alert"
            aria-live="assertive" aria-atomic="true" data-bs-delay="5000"
            style="min-width: 300px; max-width: 400px; opacity: 0; transform: translateX(100%); transition: opacity 0.5s ease, transform 0.5s ease;">
            <div class="toast-header"
                style="background: {{ session('success') ? '#608ac4' : '#e74c3c' }}; border-radius: 8px 8px 0 0;">
                <strong class="me-auto"><i
                        class="fas {{ session('success') ? 'fa-check-circle' : 'fa-exclamation-circle' }} me-2"></i>{{ session('success') ? 'Success' : 'Error' }}</strong>
                <button type="button" class="btn-close btn-close-white ms-2" data-bs-dismiss="toast"
                    aria-label="Close"></button>
            </div>
            <div class="toast-body p-3">
                <p class="mb-0">{{ session('success') ?? session('error') }}</p>
                <div class="progress mt-2" style="height: 4px;">
                    <div class="progress-bar bg-white" role="progressbar"
                        style="width: 100%; animation: progress 5s linear forwards;" aria-valuenow="100"
                        aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var toastEl = document.getElementById('toastMessage');
            var toast = new bootstrap.Toast(toastEl);
            var autoHideTimeout = null; // Store the timeout ID

            // Show toast with bounce animation
            setTimeout(function() {
                toastEl.style.opacity = "1";
                toastEl.style.transform = "translateX(0) scale(1.05)"; // Slight bounce
                setTimeout(() => {
                    toastEl.style.transform = "translateX(0) scale(1)";
                }, 200); // Reset scale after bounce

                // Start the auto-hide timer (5 seconds as per data-bs-delay)
                autoHideTimeout = setTimeout(hideToast, 5000);
            }, 100);

            toast.show();

            // Pause auto-hide on mouse enter
            toastEl.addEventListener('mouseenter', function() {
                if (autoHideTimeout) {
                    clearTimeout(autoHideTimeout); // Pause the timer
                }
            });

            // Resume auto-hide on mouse leave (restart the 5-second timer)
            toastEl.addEventListener('mouseleave', function() {
                autoHideTimeout = setTimeout(hideToast, 5000); // Restart the timer
            });

            // Function to hide the toast with animation
            function hideToast() {
                toastEl.style.opacity = "0";
                toastEl.style.transform = "translateX(100%)";
                setTimeout(() => toast.hide(), 500); // Wait for animation to complete before hiding
            }

            // CSS Animation for Progress Bar
            const style = document.createElement('style');
            style.textContent = `
                @keyframes progress {
                    from { width: 100%; }
                    to { width: 0; }
                }
            `;
            document.head.appendChild(style);
        });
    </script>

    <style>
        .toast {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(5px);
            /* Subtle glass effect */
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .toast-header {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }

        .toast-body {
            padding: 1rem;
            font-size: 0.95rem;
            color: #333;
        }

        .btn-close-white {
            filter: brightness(10);
        }

        .progress-bar {
            background-color: #ffffff !important;
            animation: progress 5s linear forwards;
        }

        @media (max-width: 576px) {
            .toast {
                min-width: 250px;
                max-width: 90%;
                margin-right: 10px;
            }

            .toast-body {
                font-size: 0.9rem;
            }
        }
    </style>
@endif