{{-- Shared layout for every ported report (App\Filament\Pages\Reports\*).
     The native Filament table ({{ $this->table }}) handles rows, search,
     pagination, filters and the CSV/PDF/Print header actions; this view adds
     the summary cards, the branch selector and any report-specific controls
     (extraFilters) on top. --}}
<x-filament-panels::page>
    @php
        $viewData = $this->getViewData();
        $reportSummary = $viewData['reportSummary'] ?? [];
        $branchOptions = $viewData['branchOptions'] ?? [
            'branches' => [],
            'selected' => 'all',
            'show_selector' => false,
        ];
    @endphp

    {{-- ── Branch selector + report-specific controls ────────────────── --}}
    @if ($branchOptions['show_selector'] || trim($this->extraFilters()) !== '')
        <div class="mb-4 flex flex-wrap items-end gap-3 rounded-xl border border-gray-200 bg-white p-4 dark:border-white/10 dark:bg-gray-900">
            @if ($branchOptions['show_selector'])
                <label class="text-sm">
                    <span class="mb-1 block text-gray-500">Branch</span>
                    <select wire:model.live="branchId"
                            class="fi-input rounded-lg border-gray-300 text-sm dark:bg-gray-800">
                        <option value="all">All branches</option>
                        @foreach ($branchOptions['branches'] as $branch)
                            <option value="{{ $branch['id'] }}" @selected($branch['id'] == $branchOptions['selected'])>{{ $branch['name'] }}</option>
                        @endforeach
                    </select>
                </label>
            @endif

            {!! $this->extraFilters() !!}
        </div>
    @endif

    {{-- ── Summary cards ──────────────────────────────────────────────── --}}
    @if (count($reportSummary))
        <div class="mb-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
            @foreach ($reportSummary as $label => $value)
                <div class="rounded-xl border border-t-4 border-t-primary-500 border-gray-200 bg-white p-4 shadow-sm dark:border-white/10 dark:border-t-primary-400 dark:bg-gray-900">
                    <div class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ $label }}</div>
                    <div class="mt-1 text-xl font-bold tabular-nums text-gray-900 dark:text-white">{{ $value }}</div>
                </div>
            @endforeach
        </div>
    @endif

    {{-- ── Native Filament table (rows, search, filters, exports) ─────── --}}
    {{ $this->table }}
</x-filament-panels::page>
