@php
    $activePlace      = $this->getActivePlace();
    $placeOptions     = $this->getAccessiblePlaceOptions();
    $quickLinks       = $this->getV2QuickNavigationLinks();
    $placeInfoUrl     = $this->getPlaceInformationUrl();
    $contextSelector  = $this->getShellContextSelector();
@endphp

{{-- Reusable Alpine combobox macro rendered as an inline component --}}
@php
/**
 * Outputs a searchable combobox that:
 *  - shows the currently selected label
 *  - opens a filterable dropdown on click
 *  - emits a Livewire $set(model, value) when an option is chosen
 *
 * Expects: $cbId (unique string), $cbLabel (heading), $cbModel (wire prop name),
 *          $cbSelected (current value), $cbOptions (assoc array value=>label),
 *          $cbEmpty (empty placeholder)
 */
@endphp

<section class="cs-v2-hero p-5 text-white shadow-sm sm:p-7">
    <div class="flex flex-col gap-7 2xl:flex-row 2xl:items-start 2xl:justify-between">

        {{-- Left: title + context chips --}}
        <div class="space-y-4">
            <div class="inline-flex items-center rounded-full border border-white/20 bg-white/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-100">
                Champions Spirit &middot; Admin V2
            </div>
            <h2 class="text-2xl font-semibold leading-tight sm:text-3xl">{{ $pageHeading }}</h2>
            <p class="max-w-2xl text-sm text-slate-300 sm:text-base">{{ $pageDescription }}</p>

            <div class="flex flex-wrap gap-2">
                <div class="inline-flex items-center rounded-full border border-white/20 bg-white/10 px-3 py-1.5 text-xs font-medium text-slate-100">
                    @if ($activePlace)
                        Place: <span class="ml-1 font-semibold">{{ $activePlace->name }}</span>
                    @else
                        No place assigned
                    @endif
                </div>
                <div class="inline-flex items-center rounded-full border border-white/20 bg-white/10 px-3 py-1.5 text-xs font-medium text-slate-100">
                    Date: <span class="ml-1 font-semibold">{{ $activeDate }}</span>
                </div>
            </div>
        </div>

        {{-- Right: controls --}}
        <div class="grid gap-3 2xl:w-[42rem] {{ $contextSelector ? 'sm:grid-cols-3' : 'sm:grid-cols-2' }}">

            {{-- Place combobox --}}
            @include('filament.v2.partials.shell-combobox', [
                'cbId'       => 'place-selector',
                'cbLabel'    => 'Place',
                'cbModel'    => 'activePlacePublicId',
                'cbSelected' => $activePlacePublicId,
                'cbOptions'  => $placeOptions,
                'cbEmpty'    => 'No place available',
            ])

            {{-- Date (plain input — no search needed) --}}
            <label class="block">
                <span class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-300">Date</span>
                <input
                    type="date"
                    wire:model="activeDate"
                    class="cs-v2-hero-control w-full px-3 py-2 text-sm shadow-sm"
                />
            </label>

            {{-- Optional third context selector (user / family / coach / employee) --}}
            @if ($contextSelector)
                @include('filament.v2.partials.shell-combobox', [
                    'cbId'       => 'context-selector',
                    'cbLabel'    => $contextSelector['label'],
                    'cbModel'    => $contextSelector['model'],
                    'cbSelected' => $this->{$contextSelector['model']} ?? null,
                    'cbOptions'  => $contextSelector['options'],
                    'cbEmpty'    => $contextSelector['empty_label'] ?? 'No record available',
                ])
            @endif

            {{-- Place info link --}}
            <div class="{{ $contextSelector ? 'sm:col-span-3' : 'sm:col-span-2' }}">
                @if ($placeInfoUrl)
                    <a
                        href="{{ $placeInfoUrl }}"
                        class="inline-flex w-full items-center justify-center rounded-xl border border-cyan-300/60 bg-cyan-400/20 px-3 py-2.5 text-sm font-semibold text-cyan-100 transition hover:bg-cyan-400/30"
                    >
                        Open Current Place Information
                    </a>
                @else
                    <div class="rounded-xl border border-white/10 bg-white/5 px-3 py-2.5 text-sm text-slate-400">
                        Select a place to view its information.
                    </div>
                @endif
            </div>
        </div>
    </div>

    <nav class="mt-6 flex flex-wrap gap-2 border-t border-white/10 pt-4">
        @foreach ($quickLinks as $quickLink)
            <a
                href="{{ $quickLink['url'] }}"
                class="rounded-full border px-3 py-1.5 text-xs font-semibold transition
                    {{ $quickLink['active']
                        ? 'border-white bg-white text-slate-900'
                        : 'border-white/20 bg-white/10 text-white hover:bg-white/20' }}"
            >
                {{ $quickLink['label'] }}
            </a>
        @endforeach
    </nav>
</section>