@php($leadAccess = app(\App\Services\LeadAccessService::class))
<header class="app-topbar">
    <div class="container-fluid topbar-menu">

        {{-- ── Left: Logo + Sidebar toggle ──────────────────────────────── --}}
        <div class="d-flex align-items-center gap-2">
            <div class="logo-topbar">
                <a href="{{ route('crm.dashboard') }}" class="logo-light">
                    <span class="logo-lg"><img src="{{ asset('assets/branding/ast_logo_gold.png') }}" alt="{{ config('app.name') }}" class="logo-img-header"></span>
                    <span class="logo-sm"><img src="{{ asset('assets/branding/ast_favicon.png?v=2') }}" alt="{{ config('app.name') }}"></span>
                </a>
                <a href="{{ route('crm.dashboard') }}" class="logo-dark">
                    <span class="logo-lg"><img src="{{ asset('assets/branding/ast_logo_gold.png') }}" alt="{{ config('app.name') }}" class="logo-img-header"></span>
                    <span class="logo-sm"><img src="{{ asset('assets/branding/ast_favicon.png?v=2') }}" alt="{{ config('app.name') }}"></span>
                </a>
            </div>
            <button class="sidenav-toggle-button btn btn-default btn-icon" type="button">
                <i class="ti ti-menu-4"></i>
            </button>
            {{-- Global search stays beside the navigation controls instead of floating in the centre. --}}
            <div class="d-none d-md-flex align-items-center ms-2 topbar-search-wrap">
                <div class="topbar-search-box">
                    <span class="topbar-search-icon">
                        <i class="ti ti-search text-muted"></i>
                    </span>
                    <input type="text" id="topbarSearchInput" class="topbar-search-input"
                           placeholder="Search {{ $leadAccess->canViewClients(Auth::user()) && !$leadAccess->canViewLeads(Auth::user()) ? 'clients' : 'leads' }} by name, email, phone…"
                           autocomplete="off">
                </div>
                <div id="topbarSearchResults" class="dropdown-menu w-100 shadow-lg p-0" style="display:none; top:calc(100% + 4px); left:0; right:0; max-height:320px; overflow-y:auto; z-index:1100;">
                    {{-- populated by JS --}}
                </div>
            </div>
        </div>

        {{-- ── Right: icon actions ───────────────────────────────────────── --}}
        <div class="d-flex align-items-center gap-1">

            <div class="server-clock d-none d-lg-flex" id="serverClock"
                 data-server-time="{{ now()->toIso8601String() }}"
                 title="Current application server time">
                <i class="ti ti-clock"></i>
                <span id="serverClockValue">{{ now()->format('M j, Y H:i:s') }} UTC</span>
            </div>

            {{-- Mobile search toggle --}}
            <button class="d-md-none topbar-link btn btn-icon btn-default" id="mobileSearchToggle" title="Search" type="button">
                <i class="ti ti-search"></i>
            </button>

            {{-- Calendar --}}
            <a class="topbar-link btn btn-icon btn-default" href="{{ route('calendar') }}" title="Calendar">
                <i class="ti ti-calendar"></i>
            </a>

            {{-- Dark / Light mode toggle --}}
            <button id="darkModeToggle" class="topbar-link btn btn-icon btn-default" type="button" title="Toggle dark mode">
                <i class="ti ti-moon" id="darkModeIcon"></i>
            </button>

            {{-- Quick Navigation --}}
            <div class="dropdown topbar-item">
                <button class="topbar-link btn btn-icon btn-default" data-bs-toggle="dropdown" type="button" title="Quick navigation">
                    <i class="ti ti-layout-grid"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-end p-2" style="min-width:260px;">
                    <h6 class="dropdown-header fw-semibold fs-xs text-uppercase mb-2">Quick Navigation</h6>
                    <div class="row g-1">
                        <div class="col-6">
                            <a href="{{ route('crm.dashboard') }}" class="dropdown-item rounded d-flex align-items-center gap-2 py-2">
                                <i class="ti ti-dashboard text-primary fs-5"></i>
                                <span class="fs-sm">Dashboard</span>
                            </a>
                        </div>
                        <div class="col-6">
                            <a href="{{ $leadAccess->canViewLeads(Auth::user()) && !$leadAccess->canViewClients(Auth::user()) ? route('leads') : route('clients') }}" class="dropdown-item rounded d-flex align-items-center gap-2 py-2">
                                <i class="ti ti-users text-info fs-5"></i>
                                <span class="fs-sm">{{ $leadAccess->canViewLeads(Auth::user()) && !$leadAccess->canViewClients(Auth::user()) ? 'Leads' : 'Clients' }}</span>
                            </a>
                        </div>
                        <div class="col-6">
                            <a href="{{ route('calendar') }}" class="dropdown-item rounded d-flex align-items-center gap-2 py-2">
                                <i class="ti ti-calendar text-success fs-5"></i>
                                <span class="fs-sm">Calendar</span>
                            </a>
                        </div>
                        <div class="col-6">
                            <a href="{{ route('trading.deposits') }}" class="dropdown-item rounded d-flex align-items-center gap-2 py-2">
                                <i class="ti ti-cash text-success fs-5"></i>
                                <span class="fs-sm">Deposits</span>
                            </a>
                        </div>
                        @if($leadAccess->canViewClients(Auth::user()))
                        <div class="col-6">
                            <a href="{{ route('crm.tickets') }}" class="dropdown-item rounded d-flex align-items-center gap-2 py-2">
                                <i class="ti ti-ticket text-warning fs-5"></i>
                                <span class="fs-sm">Tickets</span>
                            </a>
                        </div>
                        <div class="col-6">
                            <a href="{{ route('trading.binary') }}" class="dropdown-item rounded d-flex align-items-center gap-2 py-2">
                                <i class="ti ti-chart-candle text-secondary fs-5"></i>
                                <span class="fs-sm">Binary Options</span>
                            </a>
                        </div>
                        @endif
                        @if(Auth::user()->access_level === 'Admin' || Auth::user()->access_level === 'Office Manager')
                        <div class="col-6">
                            <a href="{{ route('settings') }}" class="dropdown-item rounded d-flex align-items-center gap-2 py-2">
                                <i class="ti ti-settings text-muted fs-5"></i>
                                <span class="fs-sm">Settings</span>
                            </a>
                        </div>
                        @endif
                        <div class="col-6">
                            <a href="{{ route('crm.chat') }}" class="dropdown-item rounded d-flex align-items-center gap-2 py-2">
                                <i class="ti ti-messages text-primary fs-5"></i>
                                <span class="fs-sm">Chat</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Messages (internal chat badge) --}}
            <button class="topbar-link btn btn-icon btn-default position-relative" type="button" id="agentChatHeaderBtn" title="Messages">
                <i class="ti ti-messages"></i>
                <span class="agent-chat-header-badge" id="agentChatHeaderBadge" data-chat-badge hidden>0</span>
            </button>

            {{-- Notification Bell --}}
            <div class="dropdown topbar-item">
                <button class="topbar-link btn btn-icon btn-default position-relative"
                        data-bs-toggle="dropdown"
                        data-bs-auto-close="outside"
                        type="button"
                        id="notifBellBtn"
                        title="Notifications">
                    <i class="ti ti-bell" id="notifBellIcon"></i>
                    <span class="badge text-bg-danger badge-circle topbar-badge" id="notifBadge" style="display:none;">0</span>
                </button>
                <div class="dropdown-menu dropdown-menu-end p-0 shadow" id="notifDropdown"
                     style="min-width:340px; max-width:380px;">
                    {{-- Header --}}
                    <div class="px-3 py-2 border-bottom d-flex align-items-center justify-content-between">
                        <span class="fw-semibold fs-sm">Notifications</span>
                        <span class="badge badge-soft-primary fs-xs" id="notifCountLabel">—</span>
                    </div>
                    {{-- Body (scrollable) --}}
                    <div id="notifList" style="max-height:320px; overflow-y:auto;">
                        <div class="text-center text-muted py-4 fs-sm" id="notifEmpty">
                            <i class="ti ti-bell-off d-block mb-1" style="font-size:1.5rem;"></i>
                            No new notifications
                        </div>
                    </div>
                    {{-- Footer --}}
                    <div class="border-top text-center py-2">
                        <a href="{{ route('crm.tickets') }}" class="fs-xs text-muted text-decoration-none">View all tickets</a>
                    </div>
                </div>
            </div>

            {{-- User Menu --}}
            <div class="dropdown topbar-item">
                <button class="topbar-link btn btn-icon btn-default" data-bs-toggle="dropdown" type="button">
                    <i class="ti ti-user"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-end">
                    <div class="dropdown-header">{{ Auth::user()->name }}</div>
                    <a class="dropdown-item" href="{{ route('profile') }}"><i class="ti ti-user me-1"></i> Profile</a>
                    @if(Auth::user()->access_level == 'Admin' || Auth::user()->access_level == 'Office Manager')
                    <a class="dropdown-item" href="{{ route('settings') }}"><i class="ti ti-settings me-1"></i> Settings</a>
                    @endif
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item text-danger" href="{{ route('logout') }}"
                       onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                        <i class="ti ti-logout me-1"></i> Sign out
                    </a>
                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">@csrf</form>
                </div>
            </div>

        </div>{{-- /right --}}
    </div>
</header>

{{-- Mobile search bar (hidden by default, shown under topbar) --}}
<div id="mobileSearchBar" class="d-md-none border-bottom px-3 py-2" style="display:none!important;">
    <div class="topbar-search-box">
        <span class="topbar-search-icon">
            <i class="ti ti-search text-muted"></i>
        </span>
        <input type="text" id="mobileSearchInput" class="topbar-search-input"
               placeholder="Search leads…" autocomplete="off">
    </div>
    <div id="mobileSearchResults" class="dropdown-menu w-100 shadow-lg p-0" style="display:none; max-height:280px; overflow-y:auto;"></div>
</div>