{{-- ============================================ --}}
{{-- GLOBAL FLASH POPUP NOTIFICATION              --}}
{{-- Reusable: include in any layout / page       --}}
{{-- ============================================ --}}
<style>
    @keyframes flash-shrink-bar {
        from { width: 100%; }
        to { width: 0%; }
    }
    .flash-shrink-bar {
        animation: flash-shrink-bar 5s linear forwards;
    }
</style>

@php
    // Susun semua flash messages dari berbagai sumber
    $flashMessages = [];

    // Error - dari validation errors
    if($errors->any()){
        $title = 'Validasi Gagal!';
        $msg = $errors->first();

        if($errors->has('login_as')){
            $title = 'Role Tidak Sesuai!';
        } elseif($errors->has('password')){
            $title = 'Password Salah!';
        } elseif($errors->has('email')){
            $emailMsg = $errors->first('email');
            if(stripos($emailMsg, 'attempts') !== false || stripos($emailMsg, 'second') !== false || stripos($emailMsg, 'menit') !== false || stripos($emailMsg, 'detik') !== false){
                $title = 'Terlalu Banyak Percobaan!';
            } elseif(stripos($emailMsg, 'credentials') !== false || stripos($emailMsg, 'tidak cocok') !== false || stripos($emailMsg, 'invalid') !== false || stripos($emailMsg, 'failed') !== false){
                $title = 'Email atau Password Salah!';
                $msg = 'Email atau password yang Anda masukkan tidak cocok.';
            } else {
                $title = 'Login Gagal!';
            }
        }
        $flashMessages[] = ['type' => 'error', 'title' => $title, 'message' => $msg];
    }

    // Error dari session
    if(session('error')){
        $flashMessages[] = ['type' => 'error', 'title' => 'Terjadi Kesalahan!', 'message' => session('error')];
    }

    // Success
    if(session('success')){
        $flashMessages[] = ['type' => 'success', 'title' => 'Berhasil!', 'message' => session('success')];
    }

    // Status (Laravel default)
    if(session('status') && !in_array(session('status'), ['verification-link-sent', 'profile-updated', 'password-updated'])){
        $flashMessages[] = ['type' => 'success', 'title' => 'Berhasil!', 'message' => session('status')];
    }

    // Warning
    if(session('warning')){
        $flashMessages[] = ['type' => 'warning', 'title' => 'Peringatan!', 'message' => session('warning')];
    }

    // Info
    if(session('info')){
        $flashMessages[] = ['type' => 'info', 'title' => 'Informasi', 'message' => session('info')];
    }
@endphp

@if(count($flashMessages) > 0)
    <div class="fixed top-4 left-1/2 -translate-x-1/2 z-[200] space-y-2 w-auto max-w-sm pointer-events-none">
        @foreach($flashMessages as $idx => $flash)
            @php
                $colors = match($flash['type']){
                    'error' => [
                        'bg' => 'from-red-600 to-rose-600',
                        'border' => 'border-red-400/30',
                        'shadow' => 'shadow-red-900/40',
                        'text' => 'text-red-50',
                        'icon' => 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',
                    ],
                    'success' => [
                        'bg' => 'from-emerald-600 to-teal-600',
                        'border' => 'border-emerald-400/30',
                        'shadow' => 'shadow-emerald-900/40',
                        'text' => 'text-emerald-50',
                        'icon' => 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
                    ],
                    'warning' => [
                        'bg' => 'from-amber-500 to-orange-500',
                        'border' => 'border-amber-400/30',
                        'shadow' => 'shadow-amber-900/40',
                        'text' => 'text-amber-50',
                        'icon' => 'M12 9v2m0 4h.01M5.07 19h13.86c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',
                    ],
                    'info' => [
                        'bg' => 'from-blue-600 to-indigo-600',
                        'border' => 'border-blue-400/30',
                        'shadow' => 'shadow-blue-900/40',
                        'text' => 'text-blue-50',
                        'icon' => 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
                    ],
                    default => [
                        'bg' => 'from-gray-600 to-gray-700',
                        'border' => 'border-gray-400/30',
                        'shadow' => 'shadow-gray-900/40',
                        'text' => 'text-gray-50',
                        'icon' => 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
                    ],
                };
            @endphp
            <div x-data="{ show: true }"
                 x-show="show"
                 x-init="setTimeout(() => show = false, 5000)"
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0 transform -translate-y-4"
                 x-transition:enter-end="opacity-100 transform translate-y-0"
                 x-transition:leave="transition ease-in duration-200"
                 x-transition:leave-start="opacity-100 transform translate-y-0"
                 x-transition:leave-end="opacity-0 transform -translate-y-4"
                 class="pointer-events-auto"
                 style="animation-delay: {{ $idx * 100 }}ms;">
                <div class="bg-gradient-to-r {{ $colors['bg'] }} rounded-lg shadow-xl {{ $colors['shadow'] }} border {{ $colors['border'] }} overflow-hidden">
                    <div class="px-3 py-2 flex items-center gap-2">
                        <div class="flex-shrink-0 w-6 h-6 rounded-full bg-white/20 flex items-center justify-center">
                            <svg class="w-3.5 h-3.5 text-white" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="{{ $colors['icon'] }}"/>
                            </svg>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-[11px] font-bold text-white leading-tight">{{ $flash['title'] }}</p>
                            <p class="text-[10px] {{ $colors['text'] }} leading-tight">{{ $flash['message'] }}</p>
                        </div>
                        <button @click="show = false" class="flex-shrink-0 text-white/80 hover:text-white transition">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                            </svg>
                        </button>
                    </div>
                    <div class="h-0.5 bg-white/20 overflow-hidden">
                        <div class="h-full bg-white flash-shrink-bar"></div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
@endif