@php
    $isCompany = Auth::check() && Auth::user()->hasRole('Company');
    $isAdmin = Auth::check() && Auth::user()->hasRole('Admin');
    $home = $isAdmin ? route('admin_dashboard') : ($isCompany ? route('wallet/dashboard') : url('/'));
    $initial = strtoupper(substr(Auth::user()->fname ?? 'A', 0, 1));
@endphp
<header class="app-topbar">
    <div class="container-fluid topbar-menu">
        <div class="d-flex align-items-center gap-2">
            <div class="logo-topbar">
                <a href="{{ $home }}" class="logo-light">
                    <span class="logo-lg"><img class="ct-mark" src="{{ asset('site/assets/images/ct-mark.png') }}" alt="Currency Touch"><span class="ct-wordmark">currency<span>touch</span></span></span>
                    <span class="logo-sm"><img class="ct-mark" src="{{ asset('site/assets/images/ct-mark.png') }}" alt="Currency Touch"></span>
                </a>
                <a href="{{ $home }}" class="logo-dark">
                    <span class="logo-lg"><img class="ct-mark" src="{{ asset('site/assets/images/ct-mark.png') }}" alt="Currency Touch"><span class="ct-wordmark">currency<span>touch</span></span></span>
                    <span class="logo-sm"><img class="ct-mark" src="{{ asset('site/assets/images/ct-mark.png') }}" alt="Currency Touch"></span>
                </a>
            </div>

            <button class="sidenav-toggle-button btn btn-default btn-icon" type="button">
                <i class="ti ti-menu-4 fs-22"></i>
            </button>

            <div class="topbar-item d-none d-md-flex">
                <form class="app-search" action="{{ $isCompany ? route('users') : ($isAdmin ? route('companies') : $home) }}" method="GET">
                    <div class="input-group">
                        <input type="search" name="search" class="form-control topbar-search rounded-pill" placeholder="Quick Search..." value="{{ request('search') }}" autocomplete="off">
                    </div>
                </form>
            </div>

            <div class="topbar-item d-none d-lg-flex">
                <div class="dropdown">
                    <a class="topbar-link dropdown-toggle drop-arrow-none px-2" href="#" data-bs-toggle="dropdown" role="button">
                        Mega Menu <i class="ti ti-chevron-down ms-1"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-xxl p-0">
                        <div class="row g-0">
                            <div class="col-md-4 p-3">
                                <h6 class="dropdown-header">General</h6>
                                @if($isCompany)
                                    <a class="dropdown-item" href="{{ route('wallet/dashboard') }}"><i class="ti ti-dashboard me-2"></i>Dashboard</a>
                                    <a class="dropdown-item" href="{{ route('users') }}"><i class="ti ti-users me-2"></i>Users</a>
                                    <a class="dropdown-item" href="{{ route('codes') }}"><i class="ti ti-qrcode me-2"></i>Joining Codes</a>
                                @else
                                    <a class="dropdown-item" href="{{ route('admin_dashboard') }}"><i class="ti ti-dashboard me-2"></i>Dashboard</a>
                                    <a class="dropdown-item" href="{{ route('companies') }}"><i class="ti ti-building me-2"></i>Companies</a>
                                    <a class="dropdown-item" href="{{ route('coins') }}"><i class="ti ti-coin me-2"></i>Coins</a>
                                @endif
                            </div>
                            <div class="col-md-4 p-3">
                                <h6 class="dropdown-header">Activity</h6>
                                @if($isCompany)
                                    <a class="dropdown-item" href="{{ route('transactions') }}"><i class="ti ti-arrows-exchange me-2"></i>Transactions</a>
                                    <a class="dropdown-item" href="{{ route('tickets') }}"><i class="ti ti-headset me-2"></i>Support Tickets</a>
                                    <a class="dropdown-item" href="{{ route('withdrawal_requests') }}"><i class="ti ti-cash me-2"></i>Withdrawals</a>
                                @else
                                    <a class="dropdown-item" href="{{ route('admin_transactions') }}"><i class="ti ti-arrows-exchange me-2"></i>Transactions</a>
                                    <a class="dropdown-item" href="{{ route('visitors') }}"><i class="ti ti-users-group me-2"></i>Visitors</a>
                                    <a class="dropdown-item" href="{{ route('messages') }}"><i class="ti ti-message me-2"></i>Messages</a>
                                @endif
                            </div>
                            <div class="col-md-4 p-3">
                                <h6 class="dropdown-header">Account</h6>
                                @if($isCompany)
                                    <a class="dropdown-item" href="{{ route('email.inbox') }}"><i class="ti ti-mail me-2"></i>Email Support</a>
                                    <a class="dropdown-item" href="{{ route('account-settings') }}"><i class="ti ti-settings me-2"></i>Account Settings</a>
                                @else
                                    <a class="dropdown-item" href="{{ route('email.inbox') }}"><i class="ti ti-mail me-2"></i>Email</a>
                                    <a class="dropdown-item" href="{{ route('settings') }}"><i class="ti ti-settings me-2"></i>Settings</a>
                                @endif
                                <a class="dropdown-item" href="{{ url('/') }}"><i class="ti ti-world me-2"></i>Website</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="topbar-item d-none d-lg-flex">
                <div class="dropdown">
                    <a class="topbar-link dropdown-toggle drop-arrow-none px-2" href="#" data-bs-toggle="dropdown" role="button">
                        Apps <i class="ti ti-chevron-down ms-1"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-lg p-2">
                        <div class="row g-1">
                            @if($isCompany)
                                <div class="col-6">
                                    <a class="dropdown-item rounded py-2" href="{{ route('company_wallet') }}"><i class="ti ti-wallet me-2"></i>Wallet</a>
                                </div>
                                <div class="col-6">
                                    <a class="dropdown-item rounded py-2" href="{{ route('users') }}"><i class="ti ti-users me-2"></i>Users</a>
                                </div>
                                <div class="col-6">
                                    <a class="dropdown-item rounded py-2" href="{{ route('email.inbox') }}"><i class="ti ti-mail me-2"></i>Email</a>
                                </div>
                                <div class="col-6">
                                    <a class="dropdown-item rounded py-2" href="{{ route('tickets') }}"><i class="ti ti-headset me-2"></i>Tickets</a>
                                </div>
                            @else
                                <div class="col-6">
                                    <a class="dropdown-item rounded py-2" href="{{ route('companies') }}"><i class="ti ti-building me-2"></i>Companies</a>
                                </div>
                                <div class="col-6">
                                    <a class="dropdown-item rounded py-2" href="{{ route('email.inbox') }}"><i class="ti ti-mail me-2"></i>Email</a>
                                </div>
                                <div class="col-6">
                                    <a class="dropdown-item rounded py-2" href="{{ route('clocker') }}"><i class="ti ti-shield me-2"></i>Clocker</a>
                                </div>
                                <div class="col-6">
                                    <a class="dropdown-item rounded py-2" href="{{ route('settings') }}"><i class="ti ti-settings me-2"></i>Settings</a>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="d-flex align-items-center gap-1">
            <div class="topbar-item">
                <div class="dropdown">
                    <button class="topbar-link" data-bs-toggle="dropdown" type="button">EN</button>
                    <div class="dropdown-menu dropdown-menu-end">
                        <a class="dropdown-item active" href="javascript:void(0);">English</a>
                    </div>
                </div>
            </div>

            <div class="topbar-item">
                <button class="topbar-link" id="light-dark-mode" type="button" title="Theme">
                    <i class="ti ti-moon mode-light-moon topbar-link-icon"></i>
                    <i class="ti ti-sun mode-light-sun topbar-link-icon"></i>
                </button>
            </div>

            <div class="topbar-item d-none d-sm-flex">
                <button class="topbar-link btn-theme-setting" type="button" data-bs-toggle="offcanvas" data-bs-target="#theme-settings-offcanvas" title="Settings">
                    <i class="ti ti-settings topbar-link-icon"></i>
                </button>
            </div>

            <div class="dropdown topbar-item">
                <button class="topbar-link dropdown-toggle drop-arrow-none" data-bs-toggle="dropdown" type="button" title="Notifications">
                    <i class="ti ti-bell topbar-link-icon"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-end dropdown-lg p-0">
                    <div class="p-3 border-bottom">
                        <h6 class="m-0 fw-semibold">Notifications</h6>
                    </div>
                    <div class="p-4 text-center text-muted">
                        <i class="ti ti-bell-off d-block mb-2" style="font-size:1.75rem;"></i>
                        No new notifications
                    </div>
                </div>
            </div>

            <div class="topbar-item d-none d-sm-flex">
                <button class="topbar-link" type="button" onclick="window.location.reload()" title="Refresh">
                    <i class="ti ti-refresh topbar-link-icon"></i>
                </button>
            </div>

            <div class="topbar-item d-none d-sm-flex">
                <button class="topbar-link" data-toggle="fullscreen" type="button" title="Fullscreen">
                    <i class="ti ti-maximize fullscreen topbar-link-icon"></i>
                    <i class="ti ti-minimize fullscreen topbar-link-icon"></i>
                </button>
            </div>

            <div class="dropdown topbar-item nav-user">
                <button class="topbar-link dropdown-toggle drop-arrow-none" data-bs-toggle="dropdown" type="button">
                    <span class="avatar avatar-sm">
                        <span class="avatar-initial rounded-circle bg-label-primary">{{ $initial }}</span>
                    </span>
                </button>
                <div class="dropdown-menu dropdown-menu-end" style="min-width: 240px;">
                    <div class="px-3 py-2">
                        <div class="fw-semibold">{{ Auth::user()->fname }} {{ Auth::user()->lname }}</div>
                        <small class="text-muted">{{ Auth::user()->email }}</small>
                    </div>
                    <div class="dropdown-divider"></div>
                    @if($isCompany)
                        <a class="dropdown-item" href="{{ route('account-settings') }}"><i class="ti ti-settings me-2"></i> Account Settings</a>
                    @elseif($isAdmin)
                        <a class="dropdown-item" href="{{ route('admin_profile') }}"><i class="ti ti-user me-2"></i> My Profile</a>
                        <a class="dropdown-item" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#updateDetailsModal"><i class="ti ti-edit me-2"></i> Update Details</a>
                        <a class="dropdown-item" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#changePasswordModal"><i class="ti ti-lock me-2"></i> Change Password</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-2"></i> Logout
                    </a>
                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">@csrf</form>
                </div>
            </div>
        </div>
    </div>
</header>