@php
    $authUser = Auth::user();
    if ($authUser && ! $authUser->relationLoaded('dealer')) {
        $authUser->load(['dealer', 'branch']);
    }
    $headerDealerName = $authUser?->dealer?->name ?? '—';
    $headerBranchName = $authUser?->branch?->name ?? 'No Branch Assigned';
@endphp
<nav class="fixed top-0 left-0 lg:left-[260px] h-[72px] w-full lg:w-[calc(100%-260px)] bg-[var(--dealer-topbar-color)] border-b border-gray-200 shadow-sm z-50">
    <div class="relative h-full max-w-full pl-6 pr-2 sm:pl-8 sm:pr-2 lg:pl-10 lg:pr-3 flex items-center justify-between">
        {{-- Left cluster: logo + page title + dealer/branch context --}}
        <div class="flex items-end gap-2 min-w-0 pb-1">
            <div class="h-[64px] flex items-end overflow-hidden shrink-0">
                <img
                    src="{{ $dealerLogoUrl ?? asset('images/mega-theron-logo.png') }}"
                    alt="Mega Theron Group"
                    class="h-[64px] w-auto object-contain block"
                />
            </div>

            <div class="flex flex-col items-start min-w-0 max-w-full">
                <h1 class="text-2xl font-semibold text-[var(--dealer-topbar-text-color)] tracking-tight leading-tight truncate">
                    @isset($header)
                        {{ $header }}
                    @else
                        {{ __('Enterprise OS') }}
                    @endisset
                </h1>
                <p class="text-xs text-[var(--dealer-topbar-subtext-color)] truncate max-w-full mt-0.5" aria-label="Dealer and branch context">
                    {{ $headerDealerName }} · {{ $headerBranchName }}
                </p>
            </div>
        </div>

        {{-- Right column: hamburger (mobile) + user dropdown --}}
        <div class="flex items-center justify-end gap-2 min-w-[180px] mr-3">
            <button
                @click="sidebarOpen = !sidebarOpen"
                class="lg:hidden inline-flex items-center justify-center p-2 rounded-md text-[var(--dealer-topbar-text-color)] hover:bg-gray-100"
            >
                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                </svg>
            </button>

            <x-dropdown align="right" width="40">
                <x-slot name="trigger">
                    <button
                        class="inline-flex items-center gap-3 px-4 py-2 rounded-xl border border-neutral-700 bg-[var(--dealer-accent-2-color)] text-sm text-[var(--dealer-accent-2-text-color)] shadow-sm hover:bg-[var(--dealer-accent-hover-color)] focus:outline-none focus:ring-2 focus:ring-[var(--dealer-accent-color)] focus:ring-offset-2 focus:ring-offset-white"
                    >
                        <div class="text-left leading-tight">
                            <div class="text-sm font-semibold text-[var(--dealer-accent-2-text-color)] truncate">
                                {{ trim(Auth::user()->name.' '.(Auth::user()->surname ?? '')) }}
                            </div>
                            <div class="text-xs text-[var(--dealer-accent-2-text-color)]">
                                {{ Auth::user()->hasSystemAdminRole() ? 'System Admin' : (Auth::user()->getRoleNames()->first() ?? 'No Role') }}
                            </div>
                        </div>
                        <svg class="h-4 w-4 text-[var(--dealer-accent-2-text-color)]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                        </svg>
                    </button>
                </x-slot>

                <x-slot name="content">
                    <div class="px-3 py-2 border-b border-gray-100 text-xs text-gray-600 space-y-0.5">
                        <div class="font-medium text-gray-900 text-sm">{{ trim(Auth::user()->name . ' ' . (Auth::user()->surname ?? '')) ?: '—' }}</div>
                        <div>{{ $headerDealerName }}</div>
                        <div>Branch: {{ $headerBranchName }}</div>
                    </div>
                    <x-dropdown-link :href="route('profile.edit')" class="px-3 py-1 text-sm">
                        {{ __('Profile') }}
                    </x-dropdown-link>

                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <x-dropdown-link
                            :href="route('logout')"
                            class="px-3 py-1 text-sm text-red-700 hover:bg-red-50 focus:bg-red-50"
                            onclick="event.preventDefault(); this.closest('form').submit();"
                        >
                            {{ __('Log Out') }}
                        </x-dropdown-link>
                    </form>
                </x-slot>
            </x-dropdown>
        </div>
    </div>
</nav>