@php
    $notifications = auth()->user()->unreadNotifications()->latest()->take(10)->get() ?? collect();
    $notificationCount = auth()->user()->unreadNotifications()->count() ?? 0;
@endphp
<header class="top-header bg-body border-bottom sticky-top z-sticky">
    <div class="d-flex align-items-center justify-content-between px-3 py-2">
        <div class="d-flex align-items-center">
            <button class="btn btn-link text-body me-2 p-1 d-lg-none" id="sidebarToggleMobile">
                <i class="bi bi-list fs-4"></i>
            </button>
            <button class="btn btn-link text-body me-3 p-1 d-none d-lg-inline-block" id="sidebarToggle">
                <i class="bi bi-list fs-5"></i>
            </button>

            <div class="header-search d-none d-md-block position-relative">
                <div class="input-group">
                    <span class="input-group-text bg-body border-end-0 text-muted"><i class="bi bi-search"></i></span>
                    <input type="text" id="globalSearch" class="form-control border-start-0 bg-body" placeholder="Search modules, records... (Ctrl+K)" style="width:320px;">
                </div>
            </div>
        </div>

        <div class="d-flex align-items-center gap-2">
            @if((auth()->user()->branches_count ?? 0) > 1)
                <div class="dropdown d-none d-md-block">
                    <button class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown">
                        <i class="bi bi-building me-1"></i>
                        <span id="currentBranchName">{{ session('current_branch_name', 'All Branches') }}</span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><h6 class="dropdown-header">Select Branch</h6></li>
                        @foreach(auth()->user()->branches ?? [] as $branch)
                            <li>
                                <a href="{{ route('branch.switch', $branch->id) }}" class="dropdown-item {{ session('current_branch_id') == $branch->id ? 'active' : '' }}">
                                    <i class="bi bi-building me-2"></i>{{ $branch->name }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="dropdown d-none d-md-block">
                <button class="btn btn-link text-body p-1 position-relative" data-bs-toggle="dropdown">
                    <i class="bi bi-bell fs-5"></i>
                    @if($notificationCount > 0)
                        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" style="font-size:0.6rem;" id="notificationBadge">
                            {{ $notificationCount > 99 ? '99+' : $notificationCount }}
                        </span>
                    @endif
                </button>
                <div class="dropdown-menu dropdown-menu-end notification-dropdown" style="width:360px;max-height:480px;overflow-y:auto;">
                    <div class="d-flex align-items-center justify-content-between px-3 py-2 border-bottom">
                        <h6 class="mb-0 fw-semibold">Notifications</h6>
                        @if($notificationCount > 0)
                            <a href="{{ route('notifications.mark-all-read') }}" class="text-primary text-decoration-none" style="font-size:0.8rem;" id="markAllReadBtn">Mark all read</a>
                        @endif
                    </div>
                    <div id="notificationList">
                        @forelse($notifications as $notification)
                            <a href="{{ $notification->data['url'] ?? '#' }}" class="dropdown-item px-3 py-2 border-bottom notification-item {{ !$notification->read_at ? 'bg-light bg-opacity-50' : '' }}" data-id="{{ $notification->id }}">
                                <div class="d-flex">
                                    <div class="me-2">
                                        <i class="bi bi-{{ $notification->data['icon'] ?? 'bell' }} text-{{ $notification->data['color'] ?? 'primary' }}"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <p class="mb-0" style="font-size:0.82rem;">{{ $notification->data['message'] ?? 'Notification' }}</p>
                                        <small class="text-muted">{{ $notification->created_at->diffForHumans() }}</small>
                                    </div>
                                </div>
                            </a>
                        @empty
                            <div class="text-center py-4 text-muted">
                                <i class="bi bi-bell-slash fs-3 d-block mb-2"></i>
                                <p class="mb-0" style="font-size:0.85rem;">No new notifications</p>
                            </div>
                        @endforelse
                    </div>
                    @if($notificationCount > 5)
                        <div class="text-center py-2 border-top">
                            <a href="{{ route('notifications.index') }}" class="text-primary text-decoration-none" style="font-size:0.82rem;">View all notifications</a>
                        </div>
                    @endif
                </div>
            </div>

            <div class="dropdown">
                <button class="btn btn-link text-body p-1 d-flex align-items-center dropdown-toggle" data-bs-toggle="dropdown">
                    @if(auth()->user()->avatar ?? false)
                        <img src="{{ asset('storage/' . auth()->user()->avatar) }}" class="rounded-circle me-2" width="32" height="32" alt="{{ auth()->user()->name }}">
                    @else
                        <div class="bg-primary bg-gradient rounded-circle d-flex align-items-center justify-content-center text-white fw-semibold me-2" style="width:32px;height:32px;font-size:0.8rem;">
                            {{ strtoupper(substr(auth()->user()->name ?? 'U', 0, 2)) }}
                        </div>
                    @endif
                    <span class="d-none d-md-inline fw-medium" style="font-size:0.875rem;">{{ auth()->user()->name ?? 'User' }}</span>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li class="px-3 py-2 d-md-none">
                        <div class="fw-semibold">{{ auth()->user()->name ?? 'User' }}</div>
                        <small class="text-muted">{{ auth()->user()->email ?? '' }}</small>
                    </li>
                    <li class="d-md-none"><hr class="dropdown-divider"></li>
                    <li><a href="{{ route('profile.show') }}" class="dropdown-item"><i class="bi bi-person me-2"></i>My Profile</a></li>
                    <li><a href="{{ route('profile.settings') }}" class="dropdown-item"><i class="bi bi-gear me-2"></i>Settings</a></li>
                    <li>
                        <a href="#" class="dropdown-item d-flex align-items-center justify-content-between" id="darkModeToggle">
                            <span><i class="bi bi-moon me-2"></i>Dark Mode</span>
                            <div class="form-check form-switch mb-0">
                                <input class="form-check-input" type="checkbox" id="darkModeSwitch" {{ session('dark_mode') ? 'checked' : '' }}>
                            </div>
                        </a>
                    </li>
                    <li><hr class="dropdown-divider"></li>
                    <li>
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <button type="submit" class="dropdown-item text-danger"><i class="bi bi-box-arrow-right me-2"></i>Logout</button>
                        </form>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="header-search-mobile d-md-none px-3 pb-2">
        <div class="input-group input-group-sm">
            <span class="input-group-text bg-body border-end-0"><i class="bi bi-search"></i></span>
            <input type="text" class="form-control border-start-0 bg-body" placeholder="Search...">
        </div>
    </div>
</header>