<header class="top-header elegant-header erp-app-chrome" id="top-header">
    <div class="container-fluid erp-app-chrome__inner px-2 px-md-3 px-lg-4">
        <div class="header-content d-flex align-items-center flex-nowrap">
            <div class="header-left d-flex align-items-center flex-shrink-0">
                <button type="button" class="btn btn-link d-lg-none p-1 m-0 border-0 erp-chrome-menu-btn" id="erpSidebarToggle"
                    aria-controls="erpSidebar" aria-expanded="false"
                    style="color: {{ config('theme.colors.primary') }};">
                    <i class="fe fe-menu" aria-hidden="true"></i>
                    <span class="visually-hidden">{{ __('nav.sidebar_toggle') }}</span>
                </button>
                <a href="{{ url('/') }}" class="header-logo d-flex align-items-center text-decoration-none">
                    <x-ui.layout.logo context="header" class="logo-img" />
                </a>
            </div>

            <div class="header-nav-links d-none d-lg-flex align-items-center flex-grow-1 min-w-0">
                @include('components.ui.layout.topnav-mega-menu')
            </div>

            <div class="erp-header-toolbar d-flex align-items-center flex-shrink-0">
                <div class="topnav-dropdown-item erp-toolbar-action">
                    <button type="button" class="topnav-icon-btn" id="topnavSearchToggle"
                        title="{{ __('common.search') }}" aria-label="{{ __('common.search') }}">
                        <i class="fe fe-search" aria-hidden="true"></i>
                    </button>
                </div>

                <x-ui.layout.notifications-dropdown />

                <x-ui.layout.language-switcher />

                <a href="{{ Route::has('settings.languages.index') ? route('settings.languages.index') : '#' }}"
                    class="topnav-dropdown-item erp-toolbar-action topnav-settings-btn"
                    title="{{ __('common.settings') }}" aria-label="{{ __('common.settings') }}">
                    <span class="topnav-icon-btn"><i class="fe fe-settings" aria-hidden="true"></i></span>
                </a>

                @php
                    $user = auth()->user();
                    $initial = $user ? mb_strtoupper(mb_substr($user->name, 0, 1)) : 'U';
                @endphp
                <div class="dropdown topnav-dropdown-item topnav-profile-item erp-toolbar-action">
                    <button type="button" class="topnav-profile-avatar-btn" data-bs-toggle="dropdown"
                        aria-expanded="false" aria-label="{{ $user?->name ?? __('nav.account') }}"
                        title="{{ $user?->name ?? __('nav.account') }}">
                        <div class="profile-avatar-circle"><span class="avatar-initials">{{ $initial }}</span></div>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end profile-dropdown shadow-lg">
                        <li class="dropdown-header">
                            <div class="d-flex align-items-center">
                                <div class="profile-avatar-lg me-3"><span class="avatar-initials">{{ $initial }}</span></div>
                                <div>
                                    <h6 class="mb-0">{{ $user?->name ?? __('nav.guest') }}</h6>
                                    <small class="text-muted">{{ $user?->email ?? '' }}</small>
                                </div>
                            </div>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li>
                            <a class="dropdown-item" href="{{ Route::has('profile.edit') ? route('profile.edit') : '#' }}">
                                <i class="fe fe-user me-2"></i>{{ __('nav.profile') }}
                            </a>
                        </li>
                        @auth
                            <li>
                                <form method="POST" action="{{ route('logout') }}" class="d-inline">
                                    @csrf
                                    <button type="submit" class="dropdown-item text-danger">
                                        <i class="fe fe-log-out me-2"></i>{{ __('nav.logout') }}
                                    </button>
                                </form>
                            </li>
                        @endauth
                    </ul>
                </div>
            </div>
        </div>
    </div>
</header>
