{{-- Notification Bell Dropdown --}}
<div class="relative" x-data="notificationBell()" @click.outside="open = false">
    <button @click="open = !open; if(open) fetchNotifications()"
            class="relative p-2 text-gray-500 hover:text-gray-700 transition">
        <i class="fas fa-bell text-lg"></i>
        @if(auth()->user()->unreadNotifications->count() > 0)
        <span class="absolute -top-0.5 -right-0.5 w-5 h-5 bg-red-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center">
            {{ min(auth()->user()->unreadNotifications->count(), 99) }}
        </span>
        @endif
    </button>

    {{-- Dropdown --}}
    <div x-show="open" x-transition
         class="absolute right-0 mt-2 w-80 bg-white rounded-xl shadow-2xl ring-1 ring-gray-200 z-50 overflow-hidden">
        <div class="px-4 py-3 bg-gray-50 border-b border-gray-100 flex items-center justify-between">
            <span class="text-sm font-semibold text-gray-800">Notifications</span>
            <a href="{{ route('notifications.index') }}" class="text-xs text-primary-600 hover:text-primary-800 font-medium">View All</a>
        </div>

        <div class="max-h-80 overflow-y-auto divide-y divide-gray-50">
            @forelse(auth()->user()->notifications()->take(8)->get() as $n)
            @php $d = $n->data; @endphp
            <div class="px-4 py-3 hover:bg-gray-50 transition {{ $n->read_at ? '' : 'bg-primary-50/30' }}">
                <div class="flex items-start gap-3">
                    @php
                        $iconColors = [
                            'red' => 'text-red-500',
                            'green' => 'text-green-500',
                            'blue' => 'text-blue-500',
                            'yellow' => 'text-yellow-500',
                            'orange' => 'text-orange-500',
                        ];
                    @endphp
                    <i class="fas {{ $d['icon'] ?? 'fa-bell' }} mt-0.5 {{ $iconColors[$d['color'] ?? 'blue'] ?? 'text-blue-500' }}"></i>
                    <div class="flex-1 min-w-0">
                        <p class="text-xs font-semibold text-gray-800 {{ $n->read_at ? 'text-gray-600' : '' }}">{{ $d['title'] ?? 'Notification' }}</p>
                        <p class="text-xs text-gray-500 mt-0.5 line-clamp-2">{{ $d['message'] ?? '' }}</p>
                        <span class="text-[10px] text-gray-400 mt-1 block">{{ $n->created_at->diffForHumans() }}</span>
                    </div>
                    @if(!$n->read_at)
                    <span class="w-2 h-2 bg-primary-500 rounded-full mt-1.5 shrink-0"></span>
                    @endif
                </div>
            </div>
            @empty
            <div class="px-4 py-8 text-center text-gray-500">
                <i class="fas fa-bell-slash text-2xl mb-2 block text-gray-300"></i>
                <p class="text-xs">No notifications</p>
            </div>
            @endforelse
        </div>

        @if(auth()->user()->unreadNotifications->count() > 0)
        <div class="px-4 py-2 bg-gray-50 border-t border-gray-100 text-center">
            <form method="POST" action="{{ route('notifications.mark-all-read') }}" class="inline">
                @csrf
                <button class="text-xs text-primary-600 hover:text-primary-800 font-medium">
                    <i class="fas fa-check-double mr-1"></i> Mark all as read
                </button>
            </form>
        </div>
        @endif
    </div>
</div>

<script>
function notificationBell() {
    return {
        open: false,
        fetchNotifications() {
            // Notifications are server-rendered, no AJAX needed
        }
    }
}
</script>