@if(session('success') || session('error') || session('warning') || session('info'))
    @php
        $type = session('success') ? 'success' : (session('error') ? 'error' : (session('warning') ? 'warning' : 'info'));
        $message = session($type);

        $config = [
            'success' => ['icon' => '✅', 'title' => 'Success', 'bar' => 'bg-green-600'],
            'error' => ['icon' => '❌', 'title' => 'Error', 'bar' => 'bg-red-600'],
            'warning' => ['icon' => '⚠️', 'title' => 'Warning', 'bar' => 'bg-yellow-500'],
            'info' => ['icon' => 'ℹ️', 'title' => 'Info', 'bar' => 'bg-blue-600'],
        ][$type];
    @endphp

    <div id="cx-toast"
         class="fixed top-6 right-6 z-[9999] w-[380px] bg-white rounded-2xl shadow-2xl border overflow-hidden animate-toast">

        <div class="flex items-start gap-4 p-5">
            <div class="text-3xl">{{ $config['icon'] }}</div>

            <div class="flex-1">
                <h3 class="font-black text-slate-900">
                    {{ $config['title'] }}
                </h3>

                <p class="text-sm text-slate-600 mt-1">
                    {{ $message }}
                </p>
            </div>

            <button onclick="document.getElementById('cx-toast').remove()"
                    class="text-slate-400 hover:text-slate-900 text-xl">
                ×
            </button>
        </div>

        <div class="h-1 {{ $config['bar'] }} toast-bar"></div>
    </div>

    <style>
        @keyframes toastSlide {
            from {
                opacity: 0;
                transform: translateX(40px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes toastTimer {
            from {
                width: 100%;
            }

            to {
                width: 0%;
            }
        }

        .animate-toast {
            animation: toastSlide .25s ease-out;
        }

        .toast-bar {
            animation: toastTimer 4s linear forwards;
        }
    </style>

    <script>
        setTimeout(() => {
            const toast = document.getElementById('cx-toast');
            if (toast) toast.remove();
        }, 4000);
    </script>
@endif