@php
use Illuminate\Support\Facades\Schema;
$hasTable = Schema::hasTable('notifications');
$unread = (auth()->check() && $hasTable) ? auth()->user()->unreadNotifications()->count() : 0;
$latest = (auth()->check() && $hasTable) ? auth()->user()->notifications()->latest()->limit(5)->get() : collect();
@endphp
<div class="relative group">
    <button type="button" class="relative inline-flex items-center justify-center h-9 w-9 rounded-full bg-gray-100 focus:outline-none" aria-haspopup="true" aria-expanded="false">
        <svg class="h-5 w-5 text-gray-700" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M15 17h5l-1.405-1.405C18.21 14.79 18 13.918 18 13V8a6 6 0 10-12 0v5c0 .918-.21 1.79-.595 2.595L4 17h5" stroke-width="2"/></svg>
        @if($unread>0)<span class="absolute -top-1 -right-1 inline-flex items-center justify-center h-5 min-w-5 px-1 rounded-full bg-red-600 text-white text-xs">{{ $unread }}</span>@endif
    </button>
    <div class="absolute right-0 mt-2 w-72 bg-white border rounded-xl shadow-lg z-20 hidden group-hover:block group-focus-within:block">
        <div class="p-3 border-b flex items-center justify-between">
            <div class="font-semibold">Notifications</div>
            <a href="{{ route('notifications.index') }}" class="text-sm text-[var(--primary)] underline">View all</a>
        </div>
        <div class="max-h-80 overflow-y-auto divide-y">
            @forelse($latest as $n)
                <div class="p-3 {{ $n->read_at ? '' : 'bg-amber-50' }}">
                    <div class="text-sm font-medium">{{ $n->data['title'] ?? 'Notification' }}</div>
                    <div class="text-xs text-gray-600">{{ $n->data['message'] ?? '' }}</div>
                    <div class="text-[10px] text-gray-500 mt-1">{{ $n->created_at->diffForHumans() }}</div>
                </div>
            @empty
                <div class="p-4 text-sm text-gray-500">No notifications</div>
            @endforelse
        </div>
        <form method="POST" action="{{ route('notifications.readAll') }}" class="p-3 border-t text-right">
            @csrf
            <button class="text-sm text-[var(--primary)] underline">Mark all read</button>
        </form>
    </div>
</div>