@php
    $lowStock = \App\Models\Product::active()->lowStock()->count();
    $expiring = \App\Models\Batch::expiringSoon(config('pharma.expiring_soon_days'))->count();
    $count = $lowStock + $expiring;
@endphp

<div x-data="{ open: false }" class="relative">
    <button @click="open = !open" class="relative rounded-lg p-2 text-slate-500 hover:bg-slate-100">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0a3 3 0 11-6 0"/></svg>
        @if ($count > 0)
            <span class="absolute -right-0.5 -top-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white">{{ $count > 9 ? '9+' : $count }}</span>
        @endif
    </button>
    <div x-show="open" x-cloak @click.outside="open = false"
         class="absolute right-0 mt-2 w-72 rounded-lg bg-white p-2 shadow-lg ring-1 ring-slate-100">
        <p class="px-2 py-1 text-xs font-semibold uppercase text-slate-400">{{ __('Alerts') }}</p>
        <a href="{{ route('products.low-stock') }}" class="flex items-center justify-between rounded px-2 py-2 text-sm hover:bg-slate-50">
            <span>{{ __('Low stock products') }}</span>
            <span class="badge bg-amber-100 text-amber-700">{{ $lowStock }}</span>
        </a>
        <a href="{{ route('products.expiring-soon') }}" class="flex items-center justify-between rounded px-2 py-2 text-sm hover:bg-slate-50">
            <span>{{ __('Expiring soon') }}</span>
            <span class="badge bg-red-100 text-red-700">{{ $expiring }}</span>
        </a>
    </div>
</div>