@php
    $unread = auth()->user()->unreadNotifications()->latest()->take(8)->get();
    $unreadCount = auth()->user()->unreadNotifications()->count();
@endphp

<li class="nav-item dropdown">
    <a class="nav-link position-relative" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Notifications">
        <i class="bi bi-bell fs-5"></i>
        @if ($unreadCount > 0)
            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-danger">
                {{ $unreadCount > 9 ? '9+' : $unreadCount }}
                <span class="visually-hidden">unread notifications</span>
            </span>
        @endif
    </a>
    <ul class="dropdown-menu dropdown-menu-end shadow" style="min-width: 320px; max-width: 360px;">
        <li class="dropdown-header d-flex justify-content-between align-items-center">
            <span>Notifications</span>
            @if ($unreadCount > 0)
                <span class="badge text-bg-danger">{{ $unreadCount }} new</span>
            @endif
        </li>
        <li><hr class="dropdown-divider"></li>

        @forelse ($unread as $notification)
            @php $data = $notification->data; @endphp
            <li>
                <form method="POST" action="{{ route('notifications.read', $notification->id) }}">
                    @csrf
                    @method('PATCH')
                    <button type="submit" class="dropdown-item d-flex align-items-start gap-2 text-wrap">
                        <i class="bi {{ $data['icon'] ?? 'bi-bell' }} text-primary mt-1"></i>
                        <span>
                            <span class="d-block fw-semibold small">{{ $data['title'] ?? 'Notification' }}</span>
                            <span class="d-block text-muted small">{{ \Illuminate\Support\Str::limit($data['message'] ?? '', 60) }}</span>
                        </span>
                    </button>
                </form>
            </li>
        @empty
            <li><span class="dropdown-item-text text-muted small">You're all caught up.</span></li>
        @endforelse

        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item text-center small" href="{{ route('notifications.index') }}">View all notifications</a></li>
    </ul>
</li>