@php
    $notifService = app(\App\Services\NotificacionService::class);
    $notifCount = $notifService->contarNoLeidas(Auth::user());
    $notifItems = $notifService->noLeidas(Auth::user(), 6);
@endphp

<div class="eva-notif-wrap" x-data="{ open: false }" @click.outside="open = false">
    <button type="button"
            @click="open = !open"
            class="eva-notif-btn"
            :aria-expanded="open"
            aria-haspopup="true"
            aria-label="Notificaciones">
        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.4-1.4A2 2 0 0118 14.2V11a6 6 0 10-12 0v3.2a2 2 0 01-.6 1.4L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
        </svg>
        @if($notifCount > 0)
            <span class="absolute -top-1 -right-1 min-w-[1.15rem] h-[1.15rem] px-1 rounded-full bg-rose-500 text-white text-[10px] font-bold flex items-center justify-center">
                {{ $notifCount > 9 ? '9+' : $notifCount }}
            </span>
        @endif
    </button>

    <div x-show="open"
         x-cloak
         x-transition:enter="transition ease-out duration-150"
         x-transition:enter-start="opacity-0 scale-95"
         x-transition:enter-end="opacity-100 scale-100"
         x-transition:leave="transition ease-in duration-100"
         x-transition:leave-start="opacity-100 scale-100"
         x-transition:leave-end="opacity-0 scale-95"
         class="eva-notif-panel"
         style="display: none;"
         role="menu"
         aria-label="Notificaciones recientes">
        <div class="px-3 py-2.5 border-b border-slate-100 flex items-center justify-between bg-slate-50">
            <p class="text-sm font-bold text-slate-800">Notificaciones</p>
            <a href="{{ route('notificaciones.index') }}" class="text-xs font-semibold text-[var(--eva-primary)]">Ver todas</a>
        </div>
        <div class="max-h-80 overflow-y-auto">
            @forelse($notifItems as $n)
                <a href="{{ route('notificaciones.leer', $n) }}" class="block px-3 py-2.5 hover:bg-slate-50 border-b border-slate-50">
                    <p class="text-sm font-medium text-slate-800 line-clamp-1">{{ $n->titulo }}</p>
                    <p class="text-xs text-slate-500 mt-0.5">{{ $n->created_at->diffForHumans() }}</p>
                </a>
            @empty
                <p class="px-3 py-6 text-sm text-slate-500 text-center">Sin notificaciones nuevas</p>
            @endforelse
        </div>
        @if($notifCount > 0)
            <form method="POST" action="{{ route('notificaciones.leer-todas') }}" class="border-t border-slate-100">
                @csrf
                <button type="submit" class="w-full text-center text-xs font-semibold text-[var(--eva-primary)] py-2.5 hover:bg-slate-50">Marcar todas como leídas</button>
            </form>
        @endif
    </div>
</div>