{{-- Shared filter card for the lock billing + analytics pages.
     Expects: $filters, $apis, $selectedApis, $properties.
     Optional: $pageRoute (reset target), $showExports (CSV/Excel buttons). --}}
@php
    $activeFilterCount = 0;
    if (!empty($filters['from_month']))                        $activeFilterCount++;
    if (!empty($filters['to_month']))                          $activeFilterCount++;
    if (!empty($filters['property_id']))                       $activeFilterCount++;
    if (!empty($filters['property_name']))                     $activeFilterCount++;
    if (!empty($filters['only_billable']))                     $activeFilterCount++;
    if (count($selectedApis) !== count($apis))                 $activeFilterCount++;
@endphp
    {{-- ══════════════════ COLLAPSIBLE FILTER ════════════════════════════════ --}}
    <div class="card mb-4 shadow-sm border">
        <div class="card-header pb-0">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <button class="btn btn-link text-dark text-decoration-none fw-semibold p-0 filter-toggle-btn"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#filterCardBody"
                            aria-expanded="{{ $activeFilterCount > 0 ? 'true' : 'false' }}"
                            aria-controls="filterCardBody">
                        <i class="material-icons text-sm align-middle filter-chevron">expand_more</i>
                        Filters
                    </button>
                    @if($activeFilterCount > 0)
                        <span class="badge bg-gradient-primary">{{ $activeFilterCount }} active</span>
                        @if(!empty($filters['from_month']))
                            <span class="badge bg-gradient-info">From: {{ $filters['from_month'] }}</span>
                        @endif
                        @if(!empty($filters['to_month']))
                            <span class="badge bg-gradient-info">To: {{ $filters['to_month'] }}</span>
                        @endif
                        @if(!empty($filters['property_id']))
                            <span class="badge bg-gradient-info">ID: {{ $filters['property_id'] }}</span>
                        @endif
                        @if(!empty($filters['property_name']))
                            <span class="badge bg-gradient-info">Name: {{ $filters['property_name'] }}</span>
                        @endif
                        @if(!empty($filters['only_billable']))
                            <span class="badge bg-gradient-info">Billable &gt; 0</span>
                        @endif
                        @if(count($selectedApis) !== count($apis))
                            <span class="badge bg-gradient-info">APIs: {{ implode(', ', $selectedApis) }}</span>
                        @endif
                    @else
                        <span class="text-xs text-muted">No active filters — showing all data</span>
                    @endif
                </div>
                <a href="{{ route($pageRoute ?? 'locks-by-month') }}" class="btn btn-outline-secondary btn-sm mb-0">
                    <i class="material-icons text-sm align-middle me-1">clear</i>Reset
                </a>
            </div>
        </div>
        <div id="filterCardBody" class="collapse {{ $activeFilterCount > 0 ? 'show' : '' }}">
            <div class="card-body border-top">
                <form method="GET">
                    <div class="row g-3">
                        <div class="col-lg-3 col-md-6">
                            {{-- Month inputs always use is-filled: the browser renders a date widget regardless of value --}}
                            <div class="input-group input-group-outline is-filled">
                                <label class="form-label" for="from_month">From month</label>
                                <input type="month" id="from_month" name="from_month" class="form-control" value="{{ $filters['from_month'] ?? '' }}">
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="input-group input-group-outline is-filled">
                                <label class="form-label" for="to_month">To month</label>
                                <input type="month" id="to_month" name="to_month" class="form-control" value="{{ $filters['to_month'] ?? '' }}">
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            {{-- Selects always use is-filled: they always show a selected option --}}
                            <div class="input-group input-group-outline is-filled">
                                <label class="form-label" for="PropertyID">Property</label>
                                @php
                                    // Inactive / superseded / never-billed properties go to a group at the bottom.
                                    $settingsForFilter = $propertySettingsMap ?? collect();
                                    $nowMonth = now()->format('Y-m');
                                    $filterInactive = function ($p) use ($settingsForFilter, $nowMonth) {
                                        $s = $settingsForFilter[trim((string) $p->PropertyID)] ?? null;
                                        return $s && (!empty($s->billing_disabled) || !empty($s->superseded_by) || (!empty($s->inactive_from) && $s->inactive_from <= $nowMonth));
                                    };
                                    [$inactiveProps, $activeProps] = $properties->partition($filterInactive);
                                @endphp
                                <select id="PropertyID" name="PropertyID" class="form-control">
                                    <option value="">All properties</option>
                                    @foreach($activeProps as $property)
                                        <option value="{{ $property->PropertyID }}" {{ (string) ($filters['property_id'] ?? '') === (string) $property->PropertyID ? 'selected' : '' }}>
                                            {{ $property->PropertyName }} ({{ $property->PropertyID }}) · {{ $property->API ?? 'unknown' }}
                                        </option>
                                    @endforeach
                                    @if($inactiveProps->isNotEmpty())
                                        <optgroup label="Inactive / superseded ({{ $inactiveProps->count() }})">
                                            @foreach($inactiveProps as $property)
                                                <option value="{{ $property->PropertyID }}" {{ (string) ($filters['property_id'] ?? '') === (string) $property->PropertyID ? 'selected' : '' }}>
                                                    {{ $property->PropertyName }} ({{ $property->PropertyID }}) · {{ $property->API ?? 'unknown' }}
                                                </option>
                                            @endforeach
                                        </optgroup>
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="input-group input-group-outline {{ !empty($filters['property_name']) ? 'is-filled' : '' }}" id="outline-property-name">
                                <label class="form-label" for="PropertyName">Property name search</label>
                                <input type="text" id="PropertyName" name="PropertyName" class="form-control" value="{{ $filters['property_name'] ?? '' }}">
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <div class="d-flex align-items-center gap-2 mb-2">
                            <label class="form-label mb-0">API sources</label>
                            <button type="button" id="api-select-all" class="btn btn-link text-xs p-0 mb-0">all</button>
                            <span class="text-muted text-xs">/</span>
                            <button type="button" id="api-deselect-all" class="btn btn-link text-xs p-0 mb-0">none</button>
                        </div>
                        @foreach($apis as $api)
                            <div class="form-check form-check-inline me-3 mb-2">
                                <input class="form-check-input" type="checkbox" name="api[]" id="api_{{ $api }}" value="{{ $api }}" {{ in_array($api, $selectedApis) ? 'checked' : '' }}>
                                <label class="form-check-label" for="api_{{ $api }}">{{ $api }}</label>
                            </div>
                        @endforeach
                    </div>
                    <div class="mt-2 form-check">
                        <input class="form-check-input" type="checkbox" name="only_billable" id="only_billable" value="1" {{ !empty($filters['only_billable']) ? 'checked' : '' }}>
                        <label class="form-check-label" for="only_billable">Only rows with billable amount &gt; 0</label>
                    </div>
                    <div class="mt-3 d-flex gap-2 flex-wrap">
                        <button type="submit" class="btn bg-gradient-primary btn-sm mb-0">
                            <i class="material-icons text-sm align-middle me-1">search</i>Apply filters
                        </button>
                        @if(!empty($showExports))
                            <a href="{{ route('locks-by-month.export', request()->query()) }}" class="btn btn-outline-primary btn-sm mb-0">Export CSV</a>
                            <a href="{{ route('locks-by-month.export-excel', request()->query()) }}" class="btn btn-outline-success btn-sm mb-0">Export Excel</a>
                        @endif
                    </div>
                </form>
            </div>
        </div>
    </div>