{{--
    Shared header + filter for the hub-based report pages.
    Expects: $active (route name), $title, $subtitle, $mode ('range'|'date')
             $from,$to (range) or $date (date)
--}}
@php
    $baseParams = match ($mode) {
        'date'  => ['date' => $date],
        'none'  => [],
        default => ['from' => $from, 'to' => $to],
    };
    $printParams = $baseParams + ['print' => 1];
@endphp
<div class="mb-5">
    <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
        <div>
            <a href="{{ route('reports.index') }}"
               class="inline-flex items-center gap-1.5 text-xs text-gray-400 hover:text-gray-600 transition-colors mb-1.5">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
                All Reports
            </a>
            <h2 class="text-lg font-bold text-gray-900 leading-tight">{{ $title }}</h2>
            @if(!empty($subtitle))<p class="text-xs text-gray-400 mt-0.5">{{ $subtitle }}</p>@endif
        </div>

        <div class="flex items-center gap-2 flex-wrap">
            @if($mode === 'none')
            {{-- live snapshot — no date filter --}}
            @elseif($mode === 'date')
            <form method="GET" action="{{ route($active) }}" class="flex items-center gap-2 flex-wrap">
                <label class="text-xs text-gray-500 flex-shrink-0">As of</label>
                <input type="date" name="date" value="{{ $date }}"
                       class="text-xs border-[0.5px] border-gray-200 rounded-lg px-2.5 py-1.5 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 transition-colors">
                <button type="submit" class="px-3 py-1.5 text-xs font-medium bg-teal-600 hover:bg-teal-700 text-white rounded-lg transition-colors">Go</button>
                @if($date !== now()->toDateString())
                <a href="{{ route($active) }}" class="px-3 py-1.5 text-xs font-medium text-teal-600 hover:text-teal-800 bg-teal-50 border-[0.5px] border-teal-200 rounded-lg hover:bg-teal-100 transition-colors">Today</a>
                @endif
            </form>
            @else
            <form method="GET" action="{{ route($active) }}" class="flex items-center gap-2 flex-wrap">
                <label class="text-xs text-gray-500 flex-shrink-0">From</label>
                <input type="date" name="from" value="{{ $from }}"
                       class="text-xs border-[0.5px] border-gray-200 rounded-lg px-2.5 py-1.5 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 transition-colors">
                <label class="text-xs text-gray-500 flex-shrink-0">To</label>
                <input type="date" name="to" value="{{ $to }}"
                       class="text-xs border-[0.5px] border-gray-200 rounded-lg px-2.5 py-1.5 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 transition-colors">
                <button type="submit" class="px-3 py-1.5 text-xs font-medium bg-teal-600 hover:bg-teal-700 text-white rounded-lg transition-colors">Apply</button>
                <div class="flex flex-wrap gap-1">
                    @php
                    $presets = [
                        'This Month' => ['from' => now()->startOfMonth()->toDateString(), 'to' => now()->toDateString()],
                        'Last Month' => ['from' => now()->subMonth()->startOfMonth()->toDateString(), 'to' => now()->subMonth()->endOfMonth()->toDateString()],
                        'Last 30d'   => ['from' => now()->subDays(29)->toDateString(), 'to' => now()->toDateString()],
                    ];
                    @endphp
                    @foreach($presets as $label => $params)
                    @php $isActive = $from === $params['from'] && $to === $params['to']; @endphp
                    <a href="{{ route($active, $params) }}"
                       class="px-2.5 py-1.5 text-[10px] font-medium rounded-lg border-[0.5px] transition-colors {{ $isActive ? 'bg-teal-50 border-teal-200 text-teal-700' : 'bg-white border-gray-200 text-gray-500 hover:border-gray-300 hover:text-gray-700' }}">{{ $label }}</a>
                    @endforeach
                </div>
            </form>
            @endif
            <a href="{{ route($active, $baseParams + ['export' => 'csv']) }}"
               class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-600 bg-white border-[0.5px] border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-2-2m2 2l2-2M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                </svg>
                CSV
            </a>
            <a href="{{ route($active, $baseParams + ['export' => 'xlsx']) }}"
               class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-green-700 bg-green-50 border-[0.5px] border-green-200 rounded-lg hover:bg-green-100 transition-colors">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
                Excel
            </a>
            <a href="{{ route($active, $printParams) }}" target="_blank"
               class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-600 bg-white border-[0.5px] border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
                </svg>
                Print
            </a>
        </div>
    </div>
</div>