{{-- Dark mode toggle --}}
<button type="button"
        class="hdr-btn"
        data-header-action="theme"
        title="{{ __('dashboard.dark_mode') }}"
        aria-pressed="false">
    <i class="fa-solid fa-moon" data-theme-icon></i>
</button>

{{-- Notifications --}}
@unless($isSalesFocusMode)
<div class="relative" data-header-dropdown>
    <button type="button"
            class="hdr-btn relative"
            data-header-dropdown-toggle
            data-notifications-button
            aria-expanded="false"
            title="{{ __('dashboard.Notifications') }}">
        <i class="fa-solid fa-bell"></i>
        @if(Auth::user()->unreadNotifications->count() > 0)
            <span data-notif-badge class="absolute -top-0.5 -end-0.5 w-4 h-4 rounded-full bg-red-500 text-white text-[9px] font-black flex items-center justify-center leading-none">
                {{ Auth::user()->unreadNotifications->count() > 9 ? '9+' : Auth::user()->unreadNotifications->count() }}
            </span>
        @endif
    </button>

    <div class="hdr-dropdown w-80 end-0"
         data-header-dropdown-menu
         style="display:none;">
        <div class="flex items-center justify-between px-4 py-3 border-b border-slate-100 dark:border-slate-800">
            <span class="font-bold text-sm">
                {{ __('dashboard.Notifications') }}
                @if(Auth::user()->unreadNotifications->count() > 0)
                    <span class="ms-1.5 inline-flex items-center justify-center h-4 min-w-4 px-1 rounded-full bg-red-100 text-red-600 text-[10px] font-bold">{{ Auth::user()->unreadNotifications->count() }}</span>
                @endif
            </span>
        </div>

        @forelse(Auth::user()->unreadNotifications->take(7) as $notification)
            <div class="flex items-start gap-3 px-4 py-3 border-b border-slate-100 dark:border-slate-800 last:border-0">
                <div class="w-7 h-7 rounded-lg flex items-center justify-center shrink-0" style="background:var(--c-primary-ghost);color:var(--c-primary)">
                    <i class="fa-solid {{ $notification->data['icon'] ?? 'fa-bell' }} text-xs"></i>
                </div>
                <div class="flex-1 min-w-0">
                    <a href="{{ $notification->data['url'] ?? '#' }}" class="block text-xs font-semibold text-slate-800 dark:text-slate-200 no-underline leading-snug hover:text-blue-600">
                        {{ $notification->data['message'] ?? '' }}
                    </a>
                    <div class="text-[10px] text-slate-400 mt-0.5">{{ $notification->created_at->diffForHumans() }}</div>
                </div>
            </div>
        @empty
            <div class="flex flex-col items-center py-8 text-center">
                <i class="fa-solid fa-bell-slash text-2xl text-slate-300 mb-2"></i>
                <p class="text-xs text-slate-400">{{ __('dashboard.No unread notifications') }}</p>
            </div>
        @endforelse

        <div class="px-4 py-2.5 border-t border-slate-100 dark:border-slate-800">
            <a href="{{ route('dashboard.notifications.index') }}" class="text-xs font-semibold" style="color:var(--c-primary)">
                {{ __('dashboard.View All') }} <i class="fa-solid fa-arrow-left ms-1 text-[10px]"></i>
            </a>
        </div>
    </div>
</div>
@endunless

<div class="hdr-divider hidden sm:block"></div>

{{-- User dropdown --}}
<div class="relative" data-header-dropdown>
    <button type="button"
            class="flex items-center gap-2 rounded-lg p-1 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
            data-header-dropdown-toggle
            aria-expanded="false">
        <div class="w-7 h-7 rounded-lg flex items-center justify-center text-xs font-bold shrink-0 text-white"
             style="background:var(--c-primary)">
            {{ mb_strtoupper(mb_substr(auth()->user()->name, 0, 2)) }}
        </div>
        <div class="hidden sm:block text-start">
            <div class="text-xs font-semibold text-slate-800 dark:text-slate-200 leading-tight max-w-[100px] truncate">
                {{ auth()->user()->name }}
            </div>
        </div>
        <i class="hidden sm:block fa-solid fa-chevron-down text-[9px] text-slate-400 transition-transform duration-200" data-header-dropdown-chevron></i>
    </button>

    <div class="hdr-dropdown w-52 end-0"
         data-header-dropdown-menu
         style="display:none;">
        <div class="px-4 py-3 border-b border-slate-100 dark:border-slate-800">
            <div class="text-sm font-bold text-slate-900 dark:text-white truncate">{{ auth()->user()->name }}</div>
            <div class="text-[11px] text-slate-400 truncate mt-0.5">{{ auth()->user()->email }}</div>
        </div>

        <div class="p-1.5 space-y-0.5">
            {{-- Language --}}
            <div class="flex gap-1.5 px-2 py-1.5">
                <a href="{{ route('switchLanguage', ['locale' => 'ar']) }}"
                   class="flex-1 flex items-center justify-center gap-1 py-1.5 rounded-lg border text-[11px] font-bold transition-all"
                   style="{{ app()->getLocale() === 'ar' ? 'background:var(--c-primary-bg);border-color:var(--c-primary-pale);color:var(--c-primary-dark)' : 'background:#f8fafc;border-color:#e2e8f0;color:#475569' }}">
                    🇪🇬 ع
                </a>
                <a href="{{ route('switchLanguage', ['locale' => 'en']) }}"
                   class="flex-1 flex items-center justify-center gap-1 py-1.5 rounded-lg border text-[11px] font-bold transition-all"
                   style="{{ app()->getLocale() === 'en' ? 'background:var(--c-primary-bg);border-color:var(--c-primary-pale);color:var(--c-primary-dark)' : 'background:#f8fafc;border-color:#e2e8f0;color:#475569' }}">
                    🇺🇸 EN
                </a>
            </div>

            <a href="{{ route('dashboard.profile.edit') }}" class="hdr-menu-item">
                <i class="fa-solid fa-user w-4 text-center text-xs"></i>
                {{ __('dashboard.My Profile') }}
            </a>
            <a href="{{ route('dashboard.profile.security') }}" class="hdr-menu-item">
                <i class="fa-solid fa-key w-4 text-center text-xs"></i>
                {{ __('dashboard.Security Settings') }}
            </a>
        </div>

        <div class="border-t border-slate-100 dark:border-slate-800 p-1.5">
            <a href="{{ route('logout') }}"
               onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
               class="hdr-menu-item text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/30">
                <i class="fa-solid fa-arrow-right-from-bracket w-4 text-center text-xs"></i>
                {{ __('dashboard.Logout') }}
            </a>
            <form id="logout-form" action="{{ route('logout') }}" method="POST" class="hidden">@csrf</form>
        </div>
    </div>
</div>