@php $user = auth()->user(); @endphp
<header class="app-topbar d-flex align-items-center justify-content-between px-3 py-2">
    <div class="d-flex align-items-center gap-3">
        <button type="button" class="btn btn-sm btn-outline-secondary d-lg-none" data-sidebar-toggle>
            <i class="bi bi-list"></i>
        </button>
        <h1 class="h6 mb-0 fw-semibold">@yield('page-title', 'Dashboard')</h1>
    </div>

    <div class="d-flex align-items-center gap-2">
        <div class="dropdown">
            <button class="btn btn-light position-relative notification-bell" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="bi bi-bell fs-5"></i>
                @if($unreadNotificationsCount > 0)
                    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                        {{ $unreadNotificationsCount > 9 ? '9+' : $unreadNotificationsCount }}
                    </span>
                @endif
            </button>
            <div class="dropdown-menu dropdown-menu-end p-0" style="width: 320px;">
                <div class="px-3 py-2 border-bottom fw-semibold small">Notifications</div>
                @forelse($unreadNotifications as $notification)
                    <a href="{{ route('notifications.index') }}" class="dropdown-item small py-2 border-bottom text-wrap">
                        {{ $notification->data['message'] ?? 'New notification' }}
                        <div class="text-secondary" style="font-size:.7rem;">{{ $notification->created_at->diffForHumans() }}</div>
                    </a>
                @empty
                    <div class="px-3 py-3 text-secondary small">No unread notifications</div>
                @endforelse
                <a href="{{ route('notifications.index') }}" class="dropdown-item text-center small py-2">View all</a>
            </div>
        </div>

        <div class="dropdown">
            <button class="btn btn-light d-flex align-items-center gap-2" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="bi bi-person-circle fs-5"></i>
                <span class="d-none d-md-inline small">{{ $user->name }}</span>
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
                <li><span class="dropdown-item-text small text-secondary">{{ $user->getRoleNames()->first() ? ucwords(str_replace('_', ' ', $user->getRoleNames()->first())) : '' }}</span></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="{{ route('profile.edit') }}"><i class="bi bi-person"></i> Profile</a></li>
                <li>
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="dropdown-item"><i class="bi bi-box-arrow-right"></i> Logout</button>
                    </form>
                </li>
            </ul>
        </div>
    </div>
</header>