@php
    $authUser = auth()->user();
    $avatarUrl = $authUser?->image ? asset('storage/'.$authUser->image) : null;
    $userInitial = strtoupper(substr((string) ($authUser?->name ?? 'U'), 0, 1));
@endphp

<nav class="navbar-custom">
    <div class="d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center" style="gap: 14px;">
            <button type="button" class="button-menu-mobile waves-effect" aria-label="Toggle sidebar">
                <i class="mdi mdi-menu"></i>
            </button>
            <div>
                <div class="topbar-title">
                    {{ breadcrumb_name_modify(Route::currentRouteName() ?? 'dashboard') }}
                </div>
                <div class="topbar-subtitle d-none d-md-flex align-items-center flex-wrap" style="gap: 8px;">
                    <span>{{ get_setting('site_name') }}</span>
                    @if(!empty($headerBranchLabel))
                        <span class="topbar-branch-pill">
                            <i class="mdi mdi-office-building-outline"></i>
                            {{ $headerBranchLabel }}
                        </span>
                    @endif
                </div>
            </div>

            <div class="topbar-search d-none d-lg-block">
                <span class="icon">
                    <i class="dripicons-search"></i>
                </span>
                <input type="text" class="form-control" placeholder="Search… (UI only)">
            </div>
        </div>

        <ul class="list-inline mb-0 header-actions header-notice-reload">
            <li class="list-inline-item">
                <form action="{{ route('admin.cache.clear') }}" method="POST" class="header-cache-form">
                    @csrf
                    <button type="submit"
                            class="header-action-btn"
                            title="{{ __('Clear cache') }}"
                            aria-label="{{ __('Clear cache') }}"
                            onclick="return confirm(@json(__('Clear application cache now?')))">
                        <i class="mdi mdi-broom"></i>
                        <span class="d-none d-xl-inline">{{ __('Clear cache') }}</span>
                    </button>
                </form>
            </li>

            <li class="list-inline-item dropdown notification-list header-notify-dropdown">
                <a class="header-action-btn header-notify-trigger dropdown-toggle arrow-none"
                   data-toggle="dropdown"
                   href="#"
                   role="button"
                   aria-haspopup="true"
                   aria-expanded="false"
                   aria-label="{{ __('Notifications') }}">
                    <span class="header-notify-bell">
                        <i class="mdi mdi-bell-outline"></i>
                        @if(($headerNotificationCount ?? 0) > 0)
                            <span class="header-notify-badge">{{ $headerNotificationCount > 99 ? '99+' : $headerNotificationCount }}</span>
                        @endif
                    </span>
                </a>

                <div class="dropdown-menu dropdown-menu-right header-notify-menu">
                    <div class="header-notify-head">
                        <div>
                            <div class="header-notify-title">{{ __('Notifications') }}</div>
                            <div class="header-notify-subtitle">
                                @if(!empty($headerBranchLabel))
                                    {{ __('Branch') }}: {{ $headerBranchLabel }}
                                @else
                                    {{ __('Unread updates from your team') }}
                                @endif
                            </div>
                        </div>
                        @if(($headerNotificationCount ?? 0) > 0)
                            <span class="header-notify-count-pill">{{ $headerNotificationCount }}</span>
                        @endif
                    </div>

                    <div class="header-notify-body">
                        @forelse($headerNotifications ?? [] as $notify)
                            @php
                                $visual = $headerNotificationService->visualForType($notify->type);
                                $employeeName = $notify->staff?->user?->name;
                                $branchName = $notify->staff?->warehouse?->name;
                            @endphp
                            <button type="button"
                                    class="header-notify-item"
                                    onclick="Notification_read({{ $notify->id }}, this)">
                                <span class="header-notify-icon tone-{{ $visual['tone'] }}">
                                    <i class="mdi {{ $visual['icon'] }}"></i>
                                </span>
                                <span class="header-notify-content">
                                    <span class="header-notify-item-title">{{ $notify->type ?: __('Notification') }}</span>
                                    <span class="header-notify-item-text">{{ $notify->content }}</span>
                                    <span class="header-notify-meta">
                                        @if($employeeName)
                                            <span>{{ $employeeName }}</span>
                                        @endif
                                        @if(($headerShowBranchOnItems ?? false) && $branchName)
                                            <span class="header-notify-branch">{{ $branchName }}</span>
                                        @endif
                                        @if($notify->created_at)
                                            <span>{{ $notify->created_at->diffForHumans() }}</span>
                                        @endif
                                    </span>
                                </span>
                            </button>
                        @empty
                            <div class="header-notify-empty">
                                <i class="mdi mdi-bell-off-outline"></i>
                                <p>{{ __('No new notifications') }}</p>
                                <small class="text-muted">{{ __('You are all caught up for now.') }}</small>
                            </div>
                        @endforelse
                    </div>

                    @if(($headerNotificationCount ?? 0) > 0)
                        <div class="header-notify-foot">
                            <a href="{{ route('notification.show') }}" class="header-notify-view-all">
                                {{ __('View all notifications') }}
                                <i class="mdi mdi-arrow-right"></i>
                            </a>
                        </div>
                    @endif
                </div>
            </li>

            <li class="list-inline-item dropdown notification-list">
                <a class="header-user-trigger dropdown-toggle arrow-none"
                   data-toggle="dropdown"
                   href="#"
                   role="button"
                   aria-haspopup="false"
                   aria-expanded="false">
                    <span class="header-user-avatar">
                        @if($avatarUrl)
                            <img src="{{ $avatarUrl }}"
                                 alt="{{ $authUser->name }}"
                                 class="header-user-photo"
                                 onerror="this.classList.add('d-none'); this.nextElementSibling.classList.remove('d-none');">
                            <span class="header-user-fallback d-none">{{ $userInitial }}</span>
                        @else
                            <span class="header-user-fallback">{{ $userInitial }}</span>
                        @endif
                    </span>
                    <span class="header-user-meta d-none d-md-block">
                        <span class="header-user-name">{{ $authUser->name }}</span>
                        <span class="header-user-role">{{ __('Administrator') }}</span>
                    </span>
                    <i class="mdi mdi-chevron-down header-user-caret d-none d-md-block"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-right profile-dropdown header-profile-menu">
                    <div class="header-profile-head">
                        <span class="header-user-fallback header-profile-avatar">{{ $userInitial }}</span>
                        <div>
                            <div class="header-profile-name">{{ $authUser->name }}</div>
                            <div class="header-profile-email">{{ $authUser->email }}</div>
                        </div>
                    </div>
                    @if($authUser->staff)
                        <a class="dropdown-item" href="{{ route('staffs.show', $authUser->staff->id) }}">
                            <i class="mdi mdi-account-circle m-r-5 text-muted"></i> {{ __('Profile') }}
                        </a>
                    @endif
                    <a class="dropdown-item" href="{{ route('website.settings') }}">
                        <i class="mdi mdi-settings m-r-5 text-muted"></i> {{ __('Settings') }}
                    </a>
                    <a class="dropdown-item" href="{{ route('lock-screen.show') }}">
                        <i class="mdi mdi-lock-open-outline m-r-5 text-muted"></i> {{ __('Lock screen') }}
                    </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item text-danger" href="{{ route('logout') }}">
                        <i class="mdi mdi-logout m-r-5"></i> {{ __('Logout') }}
                    </a>
                </div>
            </li>
        </ul>
    </div>
</nav>