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

        $message = session($type);

        $styles = [
            'success' => [
                'icon' => '✅',
                'title' => 'Success',
                'color' => 'green',
                'button' => 'OK, Got It',
            ],
            'error' => [
                'icon' => '❌',
                'title' => 'Error',
                'color' => 'red',
                'button' => 'Dismiss',
            ],
            'warning' => [
                'icon' => '⚠️',
                'title' => 'Warning',
                'color' => 'yellow',
                'button' => 'I Understand',
            ],
            'info' => [
                'icon' => 'ℹ️',
                'title' => 'Information',
                'color' => 'blue',
                'button' => 'OK, Thanks',
            ],
        ];

        $style = $styles[$type];
    @endphp

    <div id="cx-popup"
         class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm px-4">

        <div class="bg-white rounded-3xl shadow-2xl max-w-md w-full overflow-hidden animate-popup">

            <div class="p-8 text-center">

                <div class="mx-auto mb-5 w-20 h-20 rounded-full bg-{{ $style['color'] }}-100 flex items-center justify-center text-4xl">
                    {{ $style['icon'] }}
                </div>

                <h2 class="text-2xl font-black text-slate-900">
                    {{ $style['title'] }}
                </h2>

                <p class="text-slate-600 mt-3 leading-relaxed">
                    {{ $message }}
                </p>

            </div>

            <div class="bg-slate-50 px-8 py-5 flex justify-center">
                <button onclick="document.getElementById('cx-popup').remove()"
                        class="px-8 py-3 rounded-xl font-black text-white
                        @if($type == 'success') bg-green-600 hover:bg-green-700
                        @elseif($type == 'error') bg-red-600 hover:bg-red-700
                        @elseif($type == 'warning') bg-yellow-500 hover:bg-yellow-600 text-slate-950
                        @else bg-blue-600 hover:bg-blue-700
                        @endif">
                    {{ $style['button'] }}
                </button>
            </div>

        </div>
    </div>

    <style>
        @keyframes popupFade {
            from {
                opacity: 0;
                transform: scale(.92) translateY(20px);
            }

            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        .animate-popup {
            animation: popupFade .25s ease-out;
        }
    </style>
@endif