@php
    /* Auto-breadcrumb from the sidebar menu config (sections are skipped). */
    $autoCrumbs = [];
    foreach (config('menu', []) as $item) {
        if (isset($item['section'])) continue;
        if (! empty($item['route']) && \Route::has($item['route']) && request()->routeIs($item['route'])) {
            $autoCrumbs[] = ['label' => $item['title'], 'url' => route($item['route'])];
            break;
        }
    }
@endphp

<header class="foa-topbar d-print-none">
    {{-- Mobile sidebar toggle --}}
    <button class="foa-tb-btn d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar-menu"
            aria-label="Open navigation" style="flex-shrink:0;">
        <i class="ti ti-menu-2"></i>
    </button>

    {{-- Breadcrumbs --}}
    <div class="foa-tb-crumbs">
        <a href="{{ route('dashboard') }}" class="foa-crumb-home"><i class="ti ti-home"></i></a>
        @foreach ($autoCrumbs as $crumb)
            <span class="foa-crumb-sep">/</span>
            <span class="foa-crumb-current">{{ $crumb['label'] }}</span>
        @endforeach
    </div>

    <div class="foa-tb-spacer"></div>

    {{-- Download Desktop App --}}
    <button type="button" class="foa-tb-download" data-bs-toggle="modal" data-bs-target="#download-app">
        <i class="ti ti-brand-windows"></i>
        <i class="ti ti-brand-apple"></i>
        <span>Download Desktop App</span>
    </button>

    {{-- Viewing preferences: display timezone + day boundary --}}
    @include('layouts.partials.view-preferences')

    {{-- Active-company switcher --}}
    @include('layouts.partials.company-switcher')

    {{-- Actions --}}
    <div class="foa-tb-actions">
        <button type="button" class="foa-tb-btn" id="foa-theme-toggle" title="Toggle theme" aria-label="Toggle theme">
            <i class="ti ti-moon"></i>
        </button>
    </div>
</header>

@php
    /* The links used to be hardcoded here, which meant a code deploy every time
       a build moved. They now live in `settings` and are pasted by the Super
       Admin in the form at the bottom of this modal. A missing link greys its
       card out rather than linking nowhere. */
    $downloadMacUrl      = \App\Models\Setting::get(\App\Models\Setting::DOWNLOAD_MAC_URL);
    $downloadMacIntelUrl = \App\Models\Setting::get(\App\Models\Setting::DOWNLOAD_MAC_INTEL_URL);
    $downloadWinUrl      = \App\Models\Setting::get(\App\Models\Setting::DOWNLOAD_WIN_URL);
    /* Not shown in this modal — they render as players on the public download
       page. Read here only so the Super Admin form below can edit them. */
    $tutorialMacUrl      = \App\Models\Setting::get(\App\Models\Setting::TUTORIAL_MAC_URL);
    $tutorialWinUrl      = \App\Models\Setting::get(\App\Models\Setting::TUTORIAL_WIN_URL);
    $canEditDownloads    = auth()->user()?->isSuperAdmin() ?? false;
@endphp

{{-- Download Desktop App modal --}}
<div class="modal modal-blur fade" id="download-app" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="ti ti-download me-2"></i>Download the Worklance Desktop App</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="text-secondary mb-3">Pick your platform to download the tracker.</p>
                <div class="row g-3">
                    <div class="col-4">
                        <a href="{{ $downloadMacUrl ?: '#' }}" target="_blank" rel="noopener"
                           class="card card-link text-center h-100 text-decoration-none {{ $downloadMacUrl ? '' : 'disabled pe-none opacity-50' }}">
                            <div class="card-body d-flex flex-column align-items-center px-2">
                                <i class="ti ti-brand-apple" style="font-size:2.75rem;"></i>
                                <div class="fw-bold mt-2">macOS</div>
                                <div class="text-secondary small">Apple Silicon</div>
                                <span class="btn btn-dark btn-sm mt-3"><i class="ti ti-download me-1"></i> Download</span>
                            </div>
                        </a>
                    </div>
                    <div class="col-4">
                        {{-- Hand-distributed build: not in the auto-update path,
                             because the server has no arch column to tell the
                             two Macs apart. See build-dmg-intel.sh. --}}
                        <a href="{{ $downloadMacIntelUrl ?: '#' }}" target="_blank" rel="noopener"
                           class="card card-link text-center h-100 text-decoration-none {{ $downloadMacIntelUrl ? '' : 'disabled pe-none opacity-50' }}">
                            <div class="card-body d-flex flex-column align-items-center px-2">
                                <i class="ti ti-brand-apple" style="font-size:2.75rem;"></i>
                                <div class="fw-bold mt-2">macOS</div>
                                <div class="text-secondary small">Intel</div>
                                <span class="btn btn-dark btn-sm mt-3"><i class="ti ti-download me-1"></i> Download</span>
                            </div>
                        </a>
                    </div>
                    <div class="col-4">
                        <a href="{{ $downloadWinUrl ?: '#' }}" target="_blank" rel="noopener"
                           class="card card-link text-center h-100 text-decoration-none {{ $downloadWinUrl ? '' : 'disabled pe-none opacity-50' }}">
                            <div class="card-body d-flex flex-column align-items-center px-2">
                                <i class="ti ti-brand-windows" style="font-size:2.75rem;color:#0078d4;"></i>
                                <div class="fw-bold mt-2">Windows 11</div>
                                <div class="text-secondary small">64-bit</div>
                                <span class="btn btn-primary btn-sm mt-3"><i class="ti ti-download me-1"></i> Download</span>
                            </div>
                        </a>
                    </div>
                </div>

                <div class="mt-3 text-secondary small">
                    <i class="ti ti-link me-1"></i>
                    Shareable page: <a href="{{ route('download') }}" target="_blank" rel="noopener">{{ route('download') }}</a>
                </div>

                @if ($canEditDownloads)
                    {{-- Super Admin only: these are instance-wide, so one edit
                         changes what every company (and the public page, and
                         every invite email) points at. --}}
                    <hr class="my-3">
                    <details @if (! $downloadMacUrl && ! $downloadWinUrl) open @endif>
                        <summary class="text-secondary small" style="cursor:pointer;">
                            <i class="ti ti-settings me-1"></i>Edit download links (Super Admin)
                        </summary>
                        <form method="POST" action="{{ route('admin.settings.download-links') }}" class="mt-3">
                            @csrf
                            <div class="mb-2">
                                <label class="form-label mb-1 small">macOS link — Apple Silicon</label>
                                <input type="url" name="mac_url" class="form-control form-control-sm @error('mac_url') is-invalid @enderror"
                                       value="{{ old('mac_url', $downloadMacUrl) }}" placeholder="https://…">
                                @error('mac_url')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="mb-2">
                                <label class="form-label mb-1 small">
                                    macOS link — Intel
                                    <span class="text-secondary">· hand-updated, no auto-update</span>
                                </label>
                                <input type="url" name="mac_intel_url" class="form-control form-control-sm @error('mac_intel_url') is-invalid @enderror"
                                       value="{{ old('mac_intel_url', $downloadMacIntelUrl) }}" placeholder="https://…">
                                @error('mac_intel_url')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="mb-2">
                                <label class="form-label mb-1 small">Windows link</label>
                                <input type="url" name="win_url" class="form-control form-control-sm @error('win_url') is-invalid @enderror"
                                       value="{{ old('win_url', $downloadWinUrl) }}" placeholder="https://…">
                                @error('win_url')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            {{-- Install walkthroughs embedded on the public page.
                                 Any YouTube link shape works — the id is parsed
                                 out of it. Empty simply drops that video. --}}
                            <hr class="my-3">
                            <div class="mb-2">
                                <label class="form-label mb-1 small">
                                    macOS install tutorial
                                    <span class="text-secondary">· YouTube</span>
                                </label>
                                <input type="url" name="tutorial_mac_url" class="form-control form-control-sm @error('tutorial_mac_url') is-invalid @enderror"
                                       value="{{ old('tutorial_mac_url', $tutorialMacUrl) }}" placeholder="https://www.youtube.com/watch?v=…">
                                @error('tutorial_mac_url')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="mb-2">
                                <label class="form-label mb-1 small">
                                    Windows install tutorial
                                    <span class="text-secondary">· YouTube</span>
                                </label>
                                <input type="url" name="tutorial_win_url" class="form-control form-control-sm @error('tutorial_win_url') is-invalid @enderror"
                                       value="{{ old('tutorial_win_url', $tutorialWinUrl) }}" placeholder="https://www.youtube.com/watch?v=…">
                                @error('tutorial_win_url')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="d-flex align-items-center gap-2">
                                <button class="btn btn-primary btn-sm"><i class="ti ti-device-floppy me-1"></i>Save links</button>
                                <span class="text-secondary small">Leave a field empty to hide that platform.</span>
                            </div>
                        </form>
                    </details>
                @endif
            </div>
        </div>
    </div>
</div>

<style>
/* The bar is a sibling of the sidebar, so it is built the same way: a floating
   glass card over the page background rather than an opaque strip welded to the
   top. Same recipe as aside.navbar-vertical > .container-fluid in
   settings-sidebar.blade.php — 40% surface, blur(12px), 1px border, 8px radius,
   soft shadow — and the same 10px gutter, so the two line up rather than merely
   coexisting. */
.foa-topbar {
    min-height: 52px;
    margin: 10px 10px 0;
    padding: 0 14px;
    background: color-mix(in srgb, var(--tblr-bg-surface) 40%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--tblr-border-color);
    border-radius: 8px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, .05);
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 10px;
    z-index: 1020;
}
/* The dock is the element that sticks. Its own 10px of gutter above the card is
   frosted too, so page content scrolling underneath passes behind glass instead
   of flickering through the gap. */
.foa-topbar-dock {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
[data-bs-theme="dark"] .foa-topbar {
    background: color-mix(in srgb, var(--tblr-bg-surface) 55%, transparent);
    box-shadow: 0 8px 12px rgba(0, 0, 0, .25);
}
@media (max-width: 1200px) { .foa-tb-crumbs { display: none !important; } }
.foa-tb-crumbs {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
    color: var(--tblr-secondary, #78716c); flex-shrink: 0;
}
.foa-crumb-home { color: var(--tblr-secondary, #78716c); text-decoration: none; display: inline-flex; opacity: .7; }
.foa-crumb-home:hover { opacity: 1; }
.foa-crumb-sep { color: var(--tblr-border-color, #d1ccc4); }
.foa-crumb-current { color: var(--tblr-body-color, #1c1b18); font-weight: 600; }
.foa-tb-spacer { flex: 1; }
.foa-tb-download {
    display: inline-flex; align-items: center; gap: 7px;
    height: 32px; padding: 0 12px; flex-shrink: 0; cursor: pointer;
    background: var(--tblr-primary, #10b981); border: none; border-radius: 6px;
    color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap;
    transition: filter .1s, transform .05s;
}
.foa-tb-download:hover { filter: brightness(1.06); }
.foa-tb-download:active { transform: translateY(1px); }
.foa-tb-download i { font-size: 15px; }
@media (max-width: 640px) { .foa-tb-download span { display: none; } }
.foa-tb-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.foa-tb-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 6px;
    background: transparent; border: none; cursor: pointer; font-size: 16px; text-decoration: none;
    color: var(--tblr-secondary, #78716c); transition: background .06s, color .06s;
}
.foa-tb-btn:hover { background: var(--tblr-bg-surface-secondary, #f5f4f1); color: var(--tblr-body-color, #1c1b18); }

.foa-tb-view { flex-shrink: 0; }
.foa-tb-pill {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 10px; cursor: pointer; white-space: nowrap;
    background: color-mix(in srgb, var(--tblr-bg-surface) 55%, transparent);
    border: 1px solid var(--tblr-border-color);
    border-radius: 6px;
    color: var(--tblr-body-color);
    font-size: 12.5px; font-weight: 600;
    transition: background .06s, border-color .06s;
}
.foa-tb-pill:hover { background: var(--tblr-bg-surface); border-color: var(--tblr-primary); }
.foa-tb-pill i { font-size: 15px; color: var(--tblr-secondary); }
.foa-tb-pill-caret { font-size: 13px !important; opacity: .6; }
.foa-tb-dot { color: var(--tblr-secondary); font-weight: 400; }
.foa-tb-view-menu { max-width: 20rem; }
/* Below this the bar has to choose: the icon still opens the same menu. */
@media (max-width: 900px) {
    .foa-tb-pill-text, .foa-tb-pill-caret { display: none; }
    .foa-tb-pill { padding: 0 8px; }
}
</style>
{{-- Theme toggle (#foa-theme-toggle) is wired in layouts/partials/scripts.blade.php --}}