@php
    // Only the 5 newest unread notifications are shown; load just those instead of
    // hydrating every notification of the user (tie-break on id keeps the old stable order).
    $navbarUnreadNotifications = auth()->user()->notifications()->whereNull('read_at')
        ->orderByDesc('created_at')->orderBy('id')->take(5)->get();
    $navbarUnreadCount = auth()->user()->notifications()->whereNull('read_at')->count();
@endphp
<header id="page-topbar">
    <div class="navbar-header">
        <div class="d-flex">
            <!-- LOGO -->
            <div class="navbar-brand-box">
                <a href="{{ url('/admin') }}" class="logo logo-dark">
                    <span class="logo-sm">
                        <img src="{{ url($system_settings->logo) }}" alt="" height="22">
                    </span>
                    <span class="logo-lg">
                        <img src="{{ url($system_settings->logo) }}" alt="" height="17">
                    </span>
                </a>

                <a href="{{ url('/admin') }}" class="logo logo-light">
                    <span class="logo-sm">
                        <img src="{{ url($system_settings->logo) }}" alt="" height="22">
                    </span>
                    <span class="logo-lg">
                        <img src="{{ url($system_settings->logo) }}" alt="" height="45">
                    </span>
                </a>
            </div>

            <button type="button" class="btn btn-sm px-3 font-size-24 header-item waves-effect vertical-menu-btn">
                <i class="mdi mdi-menu"></i>
            </button>
            <div class="d-none d-sm-block">
                <div class="dropdown dropdown-topbar pt-3 mt-1 d-inline-block">
                    <a class="btn btn-light dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        @Lang('admin.add') <i class="mdi mdi-chevron-down"></i>
                    </a>

                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink" style="">
                        @can('admin.invoice_sale.add', App\Helpers\Helpers::removePermssions())
                            <a class="dropdown-item" href="{{ route('invoice_sale.add') }}">@lang('admin.Sale_invoices')</a>
                        @endcan
                        @can('admin.sale_order.add')
                            <a class="dropdown-item" href="{{ route('sale_order.add') }}">@lang('admin.sale_order')</a>
                        @endcan
                        @can('admin.sale_offer.add')
                            <a class="dropdown-item" href="{{ route('sale_offer.add') }}">@lang('admin.sale_offer')</a>
                        @endcan
                        @can('admin.invoice_purchase.add', App\Helpers\Helpers::removePermssions())
                            <a class="dropdown-item" href="{{ route('invoice_purchase.add') }}">@lang('admin.pinvoices_no')</a>
                        @endcan
                        @can('admin.items.add')
                            <a class="dropdown-item" href="{{ route('items.add') }}">@lang('admin.items')</a>
                        @endcan
                    </div>
                </div>
            </div>
        </div>
        <div class="d-flex">
            <div class="dropdown d-none d-md-block ms-2">