{{-- Faceted filter sidebar (ТЗ §19). GET form: checkboxes for select/multiselect,
     two number inputs for a range. Submitting reloads with ?f[...] applied.
     Оформление — по UI-kit редизайна: панель с хайрлайном, чекбоксы 16px,
     поля 36px, длинный список значений сворачивается после шести. --}}
@php($hasFilters = ! empty($selected) || ! empty($price))
@php($rub = fn ($v) => $v !== null ? number_format((float) $v, 0, '.', ' ') : null)
@php($collapseAfter = 6)

<form method="GET" action="{{ route('catalog.category', $category->path) }}"
      class="rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white">
    {{-- Preserve the current sort across a filter submit. --}}
    @if (($sort ?? 'default') !== 'default')
        <input type="hidden" name="sort" value="{{ $sort }}">
    @endif

    <div class="flex items-center justify-between px-4 pb-1 pt-3.5">
        <span class="text-[11px] font-bold uppercase tracking-[1.2px] text-[var(--color-disabled)]">Фильтры</span>
        @if ($hasFilters)
            <a href="{{ route('catalog.category', $category->path) }}{{ ($sort ?? 'default') !== 'default' ? '?sort='.$sort : '' }}"
               class="text-xs font-semibold text-[var(--color-primary)] hover:text-[var(--color-primary-dark)]">Сбросить</a>
        @endif
    </div>

    <div class="divide-y divide-[var(--color-divider)]">
        {{-- Цена — первой: ей пользуются чаще любой характеристики. Подсказки в
             полях — цены «от» и «до» по всему разделу. --}}
        <div class="px-4 py-3">
            <div class="mb-2 text-[13px] font-semibold text-[var(--color-ink)]">Цена<span class="font-normal text-[var(--color-muted)]">, ₽</span></div>
            <div class="flex items-center gap-2">
                <input type="number" inputmode="numeric" min="0" step="1" name="price[min]"
                       value="{{ $price['min'] ?? '' }}"
                       placeholder="от {{ $rub($stats['price_from'] ?? null) ?? '0' }}"
                       aria-label="Цена от"
                       class="h-9 w-full min-w-0 rounded-[var(--radius-md)] border border-[var(--color-line)] px-2.5 text-[13px] outline-none transition placeholder:text-[var(--color-disabled)] focus:border-[var(--color-primary)]">
                <span class="text-[var(--color-disabled)]">—</span>
                <input type="number" inputmode="numeric" min="0" step="1" name="price[max]"
                       value="{{ $price['max'] ?? '' }}"
                       placeholder="до {{ $rub($stats['price_to'] ?? null) ?? '' }}"
                       aria-label="Цена до"
                       class="h-9 w-full min-w-0 rounded-[var(--radius-md)] border border-[var(--color-line)] px-2.5 text-[13px] outline-none transition placeholder:text-[var(--color-disabled)] focus:border-[var(--color-primary)]">
            </div>
        </div>
        @foreach ($facets as $facet)
            <div class="px-4 py-3">
                <div class="mb-2 text-[13px] font-semibold text-[var(--color-ink)]">
                    {{ $facet['name'] }}@if ($facet['unit'])<span class="font-normal text-[var(--color-muted)]">, {{ $facet['unit'] }}</span>@endif
                </div>

                @if ($facet['type'] === 'number')
                    <div class="flex items-center gap-2">
                        <input type="number" inputmode="decimal" step="any" name="f[{{ $facet['id'] }}][min]"
                               value="{{ $facet['selected_min'] }}"
                               placeholder="от {{ rtrim(rtrim((string) $facet['min'], '0'), '.') }}"
                               aria-label="{{ $facet['name'] }} от"
                               class="h-9 w-full min-w-0 rounded-[var(--radius-md)] border border-[var(--color-line)] px-2.5 text-[13px] outline-none transition placeholder:text-[var(--color-disabled)] focus:border-[var(--color-primary)]">
                        <span class="text-[var(--color-disabled)]">—</span>
                        <input type="number" inputmode="decimal" step="any" name="f[{{ $facet['id'] }}][max]"
                               value="{{ $facet['selected_max'] }}"
                               placeholder="до {{ rtrim(rtrim((string) $facet['max'], '0'), '.') }}"
                               aria-label="{{ $facet['name'] }} до"
                               class="h-9 w-full min-w-0 rounded-[var(--radius-md)] border border-[var(--color-line)] px-2.5 text-[13px] outline-none transition placeholder:text-[var(--color-disabled)] focus:border-[var(--color-primary)]">
                    </div>
                @else
                    {{-- Отмеченные значения держим видимыми и в свёрнутом списке —
                         иначе выбранный фильтр прячется, и его не снять. --}}
                    @php($values = collect($facet['values']))
                    <div x-data="{ expanded: false }" class="flex flex-col gap-0.5">
                        @foreach ($values as $i => $value)
                            @php($hidden = $i >= $collapseAfter && ! $value['selected'])
                            <label @if ($hidden) x-show="expanded" x-cloak @endif
                                   class="-mx-1.5 flex cursor-pointer items-center gap-2.5 rounded-[var(--radius-sm)] px-1.5 py-1 text-[13px] text-[var(--color-slate)] transition hover:bg-[var(--color-canvas)]">
                                <input type="checkbox" name="f[{{ $facet['id'] }}][]" value="{{ $value['key'] }}"
                                       @checked($value['selected'])
                                       class="h-4 w-4 shrink-0 accent-[var(--color-primary)]">
                                <span class="min-w-0 flex-1 break-words">{{ $value['label'] }}</span>
                                <span class="text-xs text-[var(--color-disabled)]">{{ $value['count'] }}</span>
                            </label>
                        @endforeach
                        @php($hiddenCount = $values->slice($collapseAfter)->reject(fn ($v) => $v['selected'])->count())
                        @if ($hiddenCount > 0)
                            <button type="button" @click="expanded = !expanded"
                                    class="mt-1 w-fit text-[12.5px] font-semibold text-[var(--color-primary)] hover:text-[var(--color-primary-dark)]">
                                <span x-show="!expanded">Ещё {{ $hiddenCount }}</span>
                                <span x-show="expanded" x-cloak>Свернуть</span>
                            </button>
                        @endif
                    </div>
                @endif
            </div>
        @endforeach
    </div>

    <div class="border-t border-[var(--color-divider)] p-3">
        <button type="submit"
                class="h-10 w-full rounded-[var(--radius-md)] bg-[var(--color-primary)] text-[13.5px] font-semibold text-white transition hover:bg-[var(--color-primary-dark)]">
            Показать
        </button>
    </div>
</form>