@php
    // Breadcrumbs come from the route name, e.g. orders.show -> Orders › <page title>
    $routeName = request()->route()?->getName() ?? '';
    $prefix = explode('.', $routeName)[0] ?? '';
    $sections = [
        'clients' => ['Clients', 'clients.index'], 'orders' => ['Orders', 'orders.index'],
        'vendors' => ['Vendors', 'vendors.index'], 'vendor-bills' => ['Vendor bills', 'vendor-bills.index'], 'vendor-assignments' => ['Assignments', 'vendor-assignments.index'], 'my-work' => ['My work', 'my-work.index'],
        'payments' => ['Payments', 'payments.index'], 'expenses' => ['Expenses', 'expenses.index'],
        'expense-categories' => ['Expense categories', 'expense-categories.index'], 'reports' => ['Reports', null], 'ledger' => ['Ledger', null],
        'users' => ['Users', 'users.index'], 'roles' => ['Roles', 'roles.index'],
    ];
    $crumbs = [];
    if (isset($sections[$prefix])) {
        [$secLabel, $secRoute] = $sections[$prefix];
        $isIndex = str_ends_with($routeName, '.index');
        $crumbs[] = [$secLabel, $isIndex || ! $secRoute ? null : route($secRoute)];
        if (! $isIndex || $prefix === 'ledger') {
            $crumbs[] = [trim(View::yieldContent('title')), null];
        }
    }

    // Phone app bar: detail and form pages get a back arrow, top-level pages show the logo.
    $pageTitle = trim(View::yieldContent('title')) ?: 'Dashboard';
    $isDetail = in_array(last(explode('.', $routeName)), ['show', 'create', 'edit', 'invoice'], true);
    $backUrl = ($crumbs[0][1] ?? null) ?: match (true) {
        str_starts_with($routeName, 'ledger.journal') => route('ledger.journal.index'),
        str_starts_with($routeName, 'ledger.accounts') => route('ledger.accounts.index'),
        default => route('dashboard'),
    };
    $creates = quick_create_actions();
@endphp
<header class="app-topbar d-print-none">
    {{-- desktop: collapse the sidebar --}}
    <button class="icon-btn d-none d-lg-inline-grid" type="button" data-sidebar-toggle aria-label="Toggle navigation" aria-controls="sidebar">
        <i class="bi bi-layout-sidebar-inset" aria-hidden="true"></i>
    </button>

    {{-- phone: back arrow on detail pages, logo elsewhere --}}
    @if ($isDetail)
        <a href="{{ $backUrl }}" class="icon-btn d-lg-none appbar-lead" data-back aria-label="Back"><i class="bi bi-chevron-left" aria-hidden="true"></i></a>
    @else
        <a href="{{ route('dashboard') }}" class="appbar-logo d-lg-none" aria-label="{{ config('erp.company_name') }} home"><i class="bi bi-grid-3x3-gap-fill" aria-hidden="true"></i></a>
    @endif
    <div class="appbar-title d-lg-none">{{ $pageTitle }}</div>

    <nav aria-label="Breadcrumb" class="breadcrumb-wrap min-w-0 d-none d-lg-block">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i class="bi bi-house-door" aria-hidden="true"></i><span class="visually-hidden">Home</span></a></li>
            @forelse ($crumbs as $i => [$label, $href])
                @if ($href)
                    <li class="breadcrumb-item"><a href="{{ $href }}">{{ $label }}</a></li>
                @else
                    <li class="breadcrumb-item active" aria-current="page">{{ $label }}</li>
                @endif
            @empty
                <li class="breadcrumb-item active" aria-current="page">{{ $routeName === 'dashboard' ? 'Dashboard' : $pageTitle }}</li>
            @endforelse
        </ol>
    </nav>

    {{-- search: a box on desktop, a full-screen overlay on phones --}}
    <div class="global-search" role="search">
        <i class="bi bi-search search-icon" aria-hidden="true"></i>
        <input id="global-search" type="search" class="form-control" placeholder="Search clients, orders, vendors…" autocomplete="off"
               data-url="{{ route('search') }}" aria-label="Search" aria-controls="search-results" enterkeyhint="search">
        <span class="kbd-hint d-none d-md-inline"><kbd class="kbd">Ctrl K</kbd></span>
        <button type="button" class="btn btn-link search-cancel d-lg-none" data-search-close>Cancel</button>
        <div id="search-results" class="search-results" hidden></div>
    </div>
    <button class="icon-btn d-lg-none ms-auto" type="button" data-search-toggle aria-label="Search"><i class="bi bi-search" aria-hidden="true"></i></button>

    @if ($creates)
    <div class="dropdown d-none d-lg-block">
        <button class="btn btn-primary d-inline-flex align-items-center gap-2" data-bs-toggle="dropdown" aria-expanded="false" type="button">
            <i class="bi bi-plus-lg" aria-hidden="true"></i><span>New</span>
        </button>
        <ul class="dropdown-menu dropdown-menu-end">
            <li><h6 class="dropdown-header">Create</h6></li>
            @foreach ($creates as [$label, $url, $icon])
                @if (in_array($label, ['Client', 'Vendor']) && ($loop->first || ! in_array($creates[$loop->index - 1][0], ['Client'])) && $label === 'Client')
                    <li><hr class="dropdown-divider"></li>
                @elseif ($label === 'Vendor' && $loop->first)
                    <li><hr class="dropdown-divider"></li>
                @endif
                <li><a class="dropdown-item" href="{{ $url }}"><i class="bi bi-{{ $icon }}"></i>{{ $label }}</a></li>
            @endforeach
        </ul>
    </div>
    @endif

    <button class="icon-btn d-none d-lg-inline-grid" type="button" data-theme-toggle aria-label="Toggle dark mode"><i class="bi bi-moon-stars" data-theme-icon aria-hidden="true"></i></button>

    <div class="dropdown">
        <button class="icon-btn p-0" data-bs-toggle="dropdown" aria-expanded="false" type="button" aria-label="Account menu">
            <span class="avatar" style="--size:34px">{{ initials(auth()->user()->name) }}</span>
        </button>
        <ul class="dropdown-menu dropdown-menu-end" style="min-width:220px">
            <li class="px-3 py-2">
                <div class="fw-semibold">{{ auth()->user()->name }}</div>
                <div class="small text-muted text-break">{{ auth()->user()->email }}</div>
                <div class="small mt-1"><span class="badge-soft badge-soft-primary no-dot">{{ auth()->user()->role->name ?? 'No role' }}</span></div>
            </li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="{{ route('account.edit') }}"><i class="bi bi-person-gear"></i>My account</a></li>
            <li><hr class="dropdown-divider"></li>
            <li>
                <form method="POST" action="{{ route('logout') }}">@csrf
                    <button class="dropdown-item"><i class="bi bi-box-arrow-right"></i>Sign out</button>
                </form>
            </li>
        </ul>
    </div>
</header>