@php
    // Prefers a category page's own path-fixed purpose (e.g. /flats-for-sale)
    // over the query string — a category URL never carries ?purpose= at
    // render time anyway (PropertyCategoryUrlBuilder::resolveRedirectTarget()
    // always redirects it into the path first), but this stays correct
    // regardless. $fixedPurpose/$fixedCity are only ever set by
    // PropertyCategoryController — plain /properties never fixes either.
    $selectedPurpose = $fixedPurpose ?? request()->query('purpose');
    $fixedType     = $fixedType ?? null;
    // A category page's own path-fixed type (e.g. /flats-for-sale) always
    // shows as selected — the Property Type checkboxes stay visible and
    // submitted regardless of whether type is fixed by the path or picked
    // via query, so users can always add another type or change/remove
    // their selection from here (previously hidden entirely once fixed,
    // with no way back short of editing the URL by hand).
    $selectedTypes = $fixedType !== null ? [$fixedType] : (array) request()->query('type', []);
    $fixedBhk      = $fixedBhk ?? null;
    $selectedBhk   = $fixedBhk !== null ? [$fixedBhk] : (array) request()->query('bhk', []);
    $selectedTags  = array_map('strval', (array) request()->query('amenities', []));
    // A category page's own path-fixed budget bound(s) (e.g.
    // /flats-for-sale-under-50-lakh, .../above-1-cr, .../between-...) never
    // leave a ?min=/?max= behind in the query string once
    // resolveRedirectTarget() has folded them into the path — mirrors
    // $selectedPurpose/$selectedTypes above.
    $fixedMinBudget = $fixedMinBudget ?? null;
    $fixedMaxBudget = $fixedMaxBudget ?? null;
    $currentMin    = $fixedMinBudget ?? request()->query('min');
    $currentMax    = $fixedMaxBudget ?? request()->query('max');
    // Rent listings live on an entirely different scale than sale listings
    // (monthly rent vs a sale price), so the Budget slider gets its own
    // dedicated range for `for_rent` — see PublicPropertySearchService's
    // RENT_BUDGET_MIN/MAX. "Any"/unset purpose falls back to the sale range,
    // matching PublicPropertySearchService::search()'s own default.
    $isRentBudget  = $selectedPurpose === 'for_rent';
    $budgetMin     = $isRentBudget ? \App\Services\PublicPropertySearchService::RENT_BUDGET_MIN : \App\Services\PublicPropertySearchService::BUDGET_MIN;
    $budgetMax     = $isRentBudget ? \App\Services\PublicPropertySearchService::RENT_BUDGET_MAX : \App\Services\PublicPropertySearchService::BUDGET_MAX;
    $budgetStep    = $isRentBudget ? 500 : 500000;

    // The Budget slider is a genuine dual-handle range — either handle only
    // "counts" once genuinely touched (see the matching data-touched
    // attributes below and PublicPropertySearchService::search()'s own
    // min/max handling, which this label mirrors exactly):
    //   neither touched              -> "Any budget"
    //   only max touched, at ceiling -> "Any budget" (a no-op filter — the
    //                                    ceiling drops the upper bound and
    //                                    there's no minimum either)
    //   only max touched, below it   -> "Up to {max}"
    //   min touched, max untouched
    //     or max touched at ceiling  -> "{min} & above"
    //   both touched, max below it   -> "{min} - {max}"
    $minTouched = $currentMin !== null;
    $maxTouched = $currentMax !== null;
    $maxAtCeiling = $maxTouched && (float) $currentMax >= $budgetMax;
    $formatBudget = fn ($n) => \App\Models\Property::formatIndianCurrency($n);

    if (! $minTouched && (! $maxTouched || $maxAtCeiling)) {
        $budgetLabel = 'Any budget';
    } elseif (! $minTouched) {
        $budgetLabel = 'Up to ' . $formatBudget($currentMax);
    } elseif (! $maxTouched || $maxAtCeiling) {
        $budgetLabel = $formatBudget($currentMin) . ' & above';
    } else {
        $budgetLabel = $formatBudget($currentMin) . ' - ' . $formatBudget($currentMax);
    }

    $bhkOptions    = ['1', '2', '3', '4', '4+'];
    $bhkEnabledTypes = $bhkEnabledTypes ?? [];

    // Bedrooms only makes sense for types that actually have a bhk field
    // (flat/bungalow, not plot/land/commercial — driven by the real, admin-
    // configurable field templates, not a hardcoded type list). With no
    // property type selected yet there's no single template to check
    // against, so it stays hidden rather than defaulting to shown.
    $showBedrooms = count(array_intersect($selectedTypes, $bhkEnabledTypes)) > 0;

    // Which property type(s) the dynamic, admin-configured filters below are
    // drawn from — whatever's currently selected, whether fixed by the URL
    // path or picked via the checkboxes. With nothing selected there's no
    // single template to draw from, so no dynamic filters show (deliberately,
    // to avoid dumping every type's fields into the panel at once — see
    // PropertyFieldTemplate::filterableGroupsForTypes()).
    $dynamicFieldGroups = \App\Models\PropertyFieldTemplate::filterableGroupsForTypes($selectedTypes);

    // fields[select][<key>][], fields[boolean][<key>], fields[number][<key>]
    // (slider fields) or fields[number][<key>][min|max] (year range / generic)
    $dynamicFieldValues = (array) request()->query('fields', []);
    $selectedDynamicSelect  = (array) ($dynamicFieldValues['select'] ?? []);
    $selectedDynamicBoolean = (array) ($dynamicFieldValues['boolean'] ?? []);
    $selectedDynamicNumber  = (array) ($dynamicFieldValues['number'] ?? []);

    $currentYear    = (int) date('Y');
    $yearRangeMin   = \App\Models\PropertyFieldTemplate::yearRangeMinYear();
    $yearRangeStart = \App\Models\PropertyFieldTemplate::yearRangeDefaultMinYear();

    // Everything this form does NOT own gets replayed as hidden inputs, so
    // applying a filter never drops purpose/city/locality/sort/min/page —
    // same "replay whatever's already active" approach as the sort form in
    // _search-results-panel.
    $passthroughKeys = ['purpose', 'type', 'bhk', 'amenities', 'max', 'page', 'fields'];

    // Reset clears every filter, INCLUDING Property Type/Purpose/Bedrooms
    // even when they're baked into the URL PATH (a category page), but
    // keeps the active Location/City exactly as-is — it's the primary
    // search context, not a filter (see the "Reset Filters" spec:
    // "Properties in Indore" stays). Computed once by the controller
    // (PropertyCategoryController/PropertyListingController), since a
    // path-fixed type/city can't be reset by simply dropping the query
    // string the way this used to work — see $resetUrl's own doc comment
    // there for why. Falls back to the plain listing page if a caller
    // somehow doesn't pass one.
    $resetUrl = $resetUrl ?? route('public.properties.index');
@endphp
<aside class="col-12 col-lg-3">
    <form class="filter-panel" method="get" action="{{ url()->current() }}" id="propertyFilterForm">
        @foreach (request()->except($passthroughKeys) as $key => $value)
            @if (is_scalar($value) && filled($value))
                <input type="hidden" name="{{ $key }}" value="{{ $value }}">
            @endif
        @endforeach

        <div class="d-flex align-items-center justify-content-between mb-1">
            <h2 class="h5 fw-bold mb-0">Filters</h2>
            <a href="{{ $resetUrl }}" class="btn btn-link p-0 fw-semibold text-green" style="text-decoration:none;">Reset</a>
        </div>

        @php
            // Purpose is rendered as direct links (like the Bedrooms pills
            // below), not form radios — a category page's fixed purpose
            // never appears in the query string, so a form-radio "Any"
            // option submitting an empty value could never actually clear
            // it (blank vs "not provided" are indistinguishable once
            // submitted). Linking straight to the computed destination
            // sidesteps that entirely and also saves a redirect round-trip.
            $purposeLinkTypeSlug = $fixedType ?? (count($selectedTypes) === 1 ? $selectedTypes[0] : null);
            $purposeLinkCityName = $fixedCity ?? null;
            $purposeLinkBhkBucket = $fixedBhk;
            // Budget's own scale (and Monthly Maintenance's slider, via the
            // same "max means and-above" rule) depends on Purpose, not on
            // type/city/bhk — so min/max are excluded unconditionally,
            // unlike the other keys below, which only drop out when they're
            // already fixed elsewhere. Without this, switching Purpose here
            // silently replayed a stale Buy-scale min/max onto Rent (or vice
            // versa) — see PublicPropertySearchService's BUDGET_*/RENT_BUDGET_*.
            $purposeLinkExclude  = ['purpose', 'page', 'min', 'max'];
            if ($purposeLinkTypeSlug !== null) {
                $purposeLinkExclude[] = 'type';
            }
            if ($purposeLinkCityName !== null) {
                $purposeLinkExclude[] = 'city';
            }
            if ($purposeLinkBhkBucket !== null) {
                $purposeLinkExclude[] = 'bhk';
            }
            $purposeLinkExtraQuery = request()->except($purposeLinkExclude);
            $categoryUrlBuilder = app(\App\Services\PropertyCategoryUrlBuilder::class);
        @endphp
        <div class="filter-group">
            <div class="filter-label">Purpose</div>
            <div class="d-flex flex-wrap gap-2">
                <a href="{{ $categoryUrlBuilder->canonicalPath($purposeLinkTypeSlug, $purposeLinkCityName, null, $purposeLinkExtraQuery, $purposeLinkBhkBucket) }}"
                   class="bhk-pill {{ ! in_array($selectedPurpose, ['for_sale', 'for_rent'], true) ? 'active' : '' }}" style="margin:0;">Any</a>
                <a href="{{ $categoryUrlBuilder->canonicalPath($purposeLinkTypeSlug, $purposeLinkCityName, 'for_sale', $purposeLinkExtraQuery, $purposeLinkBhkBucket) }}"
                   class="bhk-pill {{ $selectedPurpose === 'for_sale' ? 'active' : '' }}" style="margin:0;">Buy</a>
                <a href="{{ $categoryUrlBuilder->canonicalPath($purposeLinkTypeSlug, $purposeLinkCityName, 'for_rent', $purposeLinkExtraQuery, $purposeLinkBhkBucket) }}"
                   class="bhk-pill {{ $selectedPurpose === 'for_rent' ? 'active' : '' }}" style="margin:0;">Rent</a>
            </div>
        </div>

        <div class="filter-group">
            <div class="filter-label">Property type</div>
            {{-- Always present (even value-less) so the request can tell
                 "no type checked" apart from "type wasn't part of this
                 submission at all" — see
                 PropertyCategoryUrlBuilder::resolveRedirectTarget()'s
                 $typeQueryProvided. Without this, unchecking every box on a
                 type-fixed category page would submit no `type` key at all,
                 indistinguishable from a plain reload, so the path's fixed
                 type could never actually be cleared from here. --}}
            <input type="hidden" name="type[]" value="">
            @foreach ($propertyTypes as $slug => $label)
                <div class="form-check">
                    <input class="form-check-input auto-submit-control" type="checkbox" name="type[]" value="{{ $slug }}" id="ft-{{ $slug }}"
                           {{ in_array($slug, $selectedTypes, true) ? 'checked' : '' }}>
                    <label class="form-check-label" for="ft-{{ $slug }}">{{ $label }}</label>
                </div>
            @endforeach
        </div>

        <div class="filter-group">
            <div class="d-flex justify-content-between align-items-baseline mb-2">
                <span class="filter-label mb-0">Budget @if ($isRentBudget)<span class="fw-normal text-muted-2">(monthly)</span>@endif</span>
                <span class="fw-bold text-green" id="budgetOut">{{ $budgetLabel }}</span>
            </div>
            {{-- A genuine dual-handle range: two overlapping native inputs
                 sharing one track (see .dual-range in site.css), with a
                 separate div pair rendering the visible track/fill since two
                 real range inputs would otherwise draw two overlapping
                 native tracks.
                 data-touched tells the JS whether this handle's own value was
                 already present in this request's query string — i.e.
                 genuinely submitted at some point, whether by dragging or
                 replayed from an earlier submission — as opposed to just
                 sitting at its untouched default. Reaching the max handle's
                 ceiling is a real, active filter (see
                 PublicPropertySearchService::search()) rather than "no
                 filter", so untouched-vs-deliberately-set can no longer be
                 told apart by value alone — see disableAtRestSliders()
                 below. --}}
            <div class="dual-range" id="budgetDualRange">
                <div class="dual-range-track"></div>
                <div class="dual-range-fill" id="budgetFill"></div>
                <input type="range" class="auto-submit-control" name="min" min="{{ $budgetMin }}" max="{{ $budgetMax }}" step="{{ $budgetStep }}"
                       value="{{ $currentMin ?: $budgetMin }}" id="budgetMinRange" aria-label="Minimum budget"
                       data-touched="{{ $minTouched ? '1' : '0' }}">
                <input type="range" class="auto-submit-control" name="max" min="{{ $budgetMin }}" max="{{ $budgetMax }}" step="{{ $budgetStep }}"
                       value="{{ $currentMax ?: $budgetMax }}" id="budgetMaxRange" aria-label="Maximum budget"
                       data-touched="{{ $maxTouched ? '1' : '0' }}">
            </div>
            <div class="d-flex justify-content-between small text-muted-2 mt-1"><span>{{ \App\Models\Property::formatIndianCurrency($budgetMin) }}</span><span>{{ \App\Models\Property::formatIndianCurrency($budgetMax) }}</span></div>
        </div>

        <div class="filter-group" id="bedroomsFilterGroup" style="{{ $showBedrooms ? '' : 'display:none;' }}">
            <div class="filter-label">Bedrooms</div>
            <div class="d-flex flex-wrap gap-2">
                {{-- Same reasoning as the Property Type group's hidden
                     placeholder above — lets unchecking every pill actually
                     clear a bhk-fixed URL segment instead of being
                     indistinguishable from a plain reload. --}}
                <input type="hidden" name="bhk[]" value="">
                @foreach ($bhkOptions as $bhk)
                    <label class="bhk-pill {{ in_array($bhk, $selectedBhk, true) ? 'active' : '' }}" style="margin:0;">
                        <input type="checkbox" name="bhk[]" value="{{ $bhk }}" class="visually-hidden"
                               {{ in_array($bhk, $selectedBhk, true) ? 'checked' : '' }}>{{ $bhk }}
                    </label>
                @endforeach
            </div>
        </div>

        @if ($propertyTags->isNotEmpty())
            <div class="filter-group">
                <div class="filter-label">Amenities</div>
                @foreach ($propertyTags as $tag)
                    <div class="form-check">
                        <input class="form-check-input auto-submit-control" type="checkbox" name="amenities[]" value="{{ $tag->id }}" id="am-{{ $tag->id }}"
                               {{ in_array((string) $tag->id, $selectedTags, true) ? 'checked' : '' }}>
                        <label class="form-check-label" for="am-{{ $tag->id }}">{{ $tag->name }}</label>
                    </div>
                @endforeach
            </div>
        @endif

        @if ($dynamicFieldGroups->isNotEmpty())
        <div id="dynamicFilterGroups">
        @foreach ($dynamicFieldGroups as $field)
            <div class="filter-group dynamic-field-group">
                <div class="filter-label">{{ $field->field_label }}</div>

                @if ($field->field_type === 'select')
                    @foreach ($field->options as $option)
                        <div class="form-check">
                            <input class="form-check-input auto-submit-control" type="checkbox"
                                   name="fields[select][{{ $field->field_key }}][]" value="{{ $option }}"
                                   id="fld-{{ $field->field_key }}-{{ Illuminate\Support\Str::slug($option) }}"
                                   {{ in_array($option, (array) ($selectedDynamicSelect[$field->field_key] ?? []), true) ? 'checked' : '' }}>
                            <label class="form-check-label" for="fld-{{ $field->field_key }}-{{ Illuminate\Support\Str::slug($option) }}">{{ $option }}</label>
                        </div>
                    @endforeach
                @elseif ($field->field_type === 'boolean')
                    <div class="form-check">
                        <input class="form-check-input auto-submit-control" type="checkbox"
                               name="fields[boolean][{{ $field->field_key }}]" value="1"
                               id="fld-{{ $field->field_key }}"
                               {{ filled($selectedDynamicBoolean[$field->field_key] ?? null) ? 'checked' : '' }}>
                        <label class="form-check-label" for="fld-{{ $field->field_key }}">{{ $field->field_label }}</label>
                    </div>
                @elseif ($field->field_type === 'number' && ($field->ui['type'] ?? null) === 'slider')
                    @php
                        $sliderMin = $field->ui['min'];
                        $sliderMax = $field->ui['max'];
                        $sliderRest = $field->ui['direction'] === 'min' ? $sliderMin : $sliderMax;
                        $rawValue = $selectedDynamicNumber[$field->field_key] ?? null;
                        $sliderValue = is_scalar($rawValue) ? $rawValue : $sliderRest;
                        $formatBound = fn ($n) => $field->ui['unit'] === 'currency' ? \App\Models\Property::formatIndianCurrency($n) : $n;
                    @endphp
                    <div class="d-flex justify-content-between align-items-baseline mb-2">
                        <span class="fw-bold text-green dynamic-slider-out"></span>
                    </div>
                    <input type="range" class="dynamic-slider auto-submit-control"
                           name="fields[number][{{ $field->field_key }}]"
                           min="{{ $sliderMin }}" max="{{ $sliderMax }}" step="{{ $field->ui['step'] }}"
                           value="{{ $sliderValue }}"
                           data-direction="{{ $field->ui['direction'] }}"
                           data-unit="{{ $field->ui['unit'] }}"
                           {{-- Same reasoning as Budget's own data-touched:
                                a 'max'-direction slider's ceiling is now an
                                active ">=" filter, indistinguishable by
                                position alone from "never touched" — see
                                PublicPropertySearchService::applySliderFilter(). --}}
                           data-touched="{{ is_scalar($rawValue) ? '1' : '0' }}"
                           aria-label="{{ $field->field_label }}">
                    <div class="d-flex justify-content-between small text-muted-2 mt-1">
                        <span>{{ $formatBound($sliderMin) }}</span>
                        <span>{{ $formatBound($sliderMax) }}{{ $field->ui['direction'] === 'min' ? '+' : '' }}</span>
                    </div>
                @elseif ($field->field_type === 'number' && ($field->ui['type'] ?? null) === 'year_range')
                    @php
                        $selectedMinYear = (int) ($selectedDynamicNumber[$field->field_key]['min'] ?? $yearRangeStart);
                        $selectedMaxYear = (int) ($selectedDynamicNumber[$field->field_key]['max'] ?? $currentYear);
                    @endphp
                    <div class="d-flex gap-2">
                        <select class="form-select form-select-sm auto-submit-control" name="fields[number][{{ $field->field_key }}][min]" aria-label="{{ $field->field_label }} from year">
                            @for ($year = $yearRangeMin; $year <= $currentYear; $year++)
                                <option value="{{ $year }}" {{ $selectedMinYear === $year ? 'selected' : '' }}>{{ $year }}</option>
                            @endfor
                        </select>
                        <select class="form-select form-select-sm auto-submit-control" name="fields[number][{{ $field->field_key }}][max]" aria-label="{{ $field->field_label }} to year">
                            @for ($year = $yearRangeMin; $year <= $currentYear; $year++)
                                <option value="{{ $year }}" {{ $selectedMaxYear === $year ? 'selected' : '' }}>{{ $year }}</option>
                            @endfor
                        </select>
                    </div>
                @elseif ($field->field_type === 'number')
                    <div class="d-flex gap-2">
                        <input type="number" class="form-control form-control-sm auto-submit-control" placeholder="Min"
                               aria-label="Minimum {{ $field->field_label }}"
                               name="fields[number][{{ $field->field_key }}][min]"
                               value="{{ $selectedDynamicNumber[$field->field_key]['min'] ?? '' }}">
                        <input type="number" class="form-control form-control-sm auto-submit-control" placeholder="Max"
                               aria-label="Maximum {{ $field->field_label }}"
                               name="fields[number][{{ $field->field_key }}][max]"
                               value="{{ $selectedDynamicNumber[$field->field_key]['max'] ?? '' }}">
                    </div>
                @endif
            </div>
        @endforeach
        </div>
        @endif

        <button type="submit" class="btn btn-brand w-100 mt-2">Apply filters</button>
    </form>
</aside>

@push('scripts')
<script>
(function () {
    var minRange = document.getElementById('budgetMinRange');
    var maxRange = document.getElementById('budgetMaxRange');
    var out      = document.getElementById('budgetOut');
    var fill     = document.getElementById('budgetFill');
    var filterForm = document.getElementById('propertyFilterForm');
    // Whether each handle's own value was already present in the URL this
    // page loaded with (server-rendered — see budgetMinRange/budgetMaxRange's
    // own data-touched) — tracked as real JS state, not re-derived from
    // position, since reaching the max handle's ceiling is now an active
    // ">=" filter (PublicPropertySearchService::search()) rather than "no
    // filter", so a deliberately-maxed handle and a never-touched one sit at
    // the exact same value and can no longer be told apart by position alone.
    var minTouched = !!(minRange && minRange.dataset.touched === '1');
    var maxTouched = !!(maxRange && maxRange.dataset.touched === '1');

    function formatInr(value) {
        value = parseInt(value, 10);
        if (value >= 10000000) return '₹' + (value / 10000000).toFixed(value % 10000000 === 0 ? 0 : 1) + ' Cr';
        if (value >= 100000) return '₹' + (value / 100000).toFixed(value % 100000 === 0 ? 0 : 1) + ' L';
        return '₹' + value;
    }

    // Mirrors PublicPropertySearchService::search()'s own min/max handling
    // exactly (and the identical PHP that renders the initial label — see
    // this partial's own @php block for the full 5-case breakdown).
    function renderBudgetLabel() {
        if (!minRange || !maxRange || !out) return;
        var maxAtCeiling = parseFloat(maxRange.value) >= parseFloat(maxRange.max);

        if (!minTouched && (!maxTouched || maxAtCeiling)) {
            out.textContent = 'Any budget';
        } else if (!minTouched) {
            out.textContent = 'Up to ' + formatInr(maxRange.value);
        } else if (!maxTouched || maxAtCeiling) {
            out.textContent = formatInr(minRange.value) + ' & above';
        } else {
            out.textContent = formatInr(minRange.value) + ' - ' + formatInr(maxRange.value);
        }
    }

    // The two handles share one physical track (see .dual-range in
    // site.css), which draws no native track of its own (background:
    // transparent) — this highlighted bar is the only visible track,
    // spanning between the two current values.
    function renderBudgetFill() {
        if (!minRange || !maxRange || !fill) return;
        var lo = parseFloat(minRange.min);
        var span = parseFloat(minRange.max) - lo || 1;
        var minPct = (parseFloat(minRange.value) - lo) / span * 100;
        var maxPct = (parseFloat(maxRange.value) - lo) / span * 100;
        fill.style.left = minPct + '%';
        fill.style.width = Math.max(0, maxPct - minPct) + '%';
    }

    // Whichever handle sits further right needs the higher z-index so its
    // thumb stays grabbable instead of the other handle's thumb intercepting
    // the click when they're close together or overlapping.
    function updateHandleStacking() {
        if (!minRange || !maxRange) return;
        var lo = parseFloat(minRange.min);
        var span = parseFloat(minRange.max) - lo || 1;
        var minPercent = (parseFloat(minRange.value) - lo) / span;
        if (minPercent > 0.5) {
            minRange.style.zIndex = 5;
            maxRange.style.zIndex = 4;
        } else {
            minRange.style.zIndex = 4;
            maxRange.style.zIndex = 5;
        }
    }

    if (minRange && maxRange && out) {
        minRange.addEventListener('input', function () {
            // Clamp so the min handle can never pass the max handle.
            if (parseFloat(minRange.value) > parseFloat(maxRange.value)) {
                minRange.value = maxRange.value;
            }
            minTouched = true;
            renderBudgetLabel();
            renderBudgetFill();
            updateHandleStacking();
        });
        maxRange.addEventListener('input', function () {
            if (parseFloat(maxRange.value) < parseFloat(minRange.value)) {
                maxRange.value = minRange.value;
            }
            maxTouched = true;
            renderBudgetLabel();
            renderBudgetFill();
            updateHandleStacking();
        });
        renderBudgetFill();
        updateHandleStacking();
    }

    // Every range/slider input always carries SOME value, resting at its own
    // "no filter" bound (a dynamic slider's own min or max depending on
    // direction) when the user hasn't actually touched it. Submitting the
    // form at all — whether by auto-submit from an unrelated control (e.g.
    // checking a Property Type) or the native "Apply filters" button — would
    // otherwise carry that resting value into the query string as if the
    // user had deliberately set it. Disabling an at-rest slider right before
    // submission excludes it from the request entirely (browsers never
    // submit disabled fields); the reload restores it from its own default
    // markup regardless; the page navigates right after, so there's no need
    // to ever re-enable them.
    //
    // A 'min'-direction dynamic slider's rest position (its own bottom) is
    // still a genuine, position-detectable "no filter" state — nothing else
    // submits that same value, so a plain position check is enough. Budget's
    // two handles and 'max'-direction dynamic sliders (e.g. Monthly
    // Maintenance) rest at their TOP, which is now ALSO the active ">=
    // ceiling" value once genuinely touched — position alone can't tell
    // those apart, so both use a real touched flag instead (data-touched,
    // set the moment the user drags — see the render() loop below for
    // dynamic sliders).
    function disableAtRestSliders() {
        if (minRange && !minTouched) {
            minRange.disabled = true;
        }
        if (maxRange && !maxTouched) {
            maxRange.disabled = true;
        }
        document.querySelectorAll('.dynamic-slider').forEach(function (input) {
            if (input.dataset.direction === 'max') {
                if (input.dataset.touched !== '1') {
                    input.disabled = true;
                }
                return;
            }
            if (parseFloat(input.value) <= parseFloat(input.min)) {
                input.disabled = true;
            }
        });
    }

    if (filterForm) {
        filterForm.addEventListener('submit', disableAtRestSliders);
    }

    // Clicking a BHK pill toggles its hidden checkbox and visual state, then
    // submits immediately — same reasoning as Purpose/Property Type below:
    // a checkbox toggled via JS (rather than a native click on the checkbox
    // itself, since it's visually hidden behind the pill) never fires a
    // native 'change' event, so this can't just add the 'auto-submit-control'
    // class and rely on that listener — it has to submit directly here. And
    // because form.submit() called from JS never fires the form's own
    // 'submit' event, it needs its own explicit disableAtRestSliders() call.
    document.querySelectorAll('.bhk-pill').forEach(function (pill) {
        pill.addEventListener('click', function (e) {
            if (e.target.tagName === 'INPUT') return;
            var input = pill.querySelector('input');
            input.checked = !input.checked;
            pill.classList.toggle('active', input.checked);
            disableAtRestSliders();
            pill.closest('form').submit();
        });
    });

    // Single-value sliders for dynamic number fields (Floor Number, Total
    // Floors, Monthly Maintenance). 'min'-direction rests at the slider's
    // lowest value ("Any"); every other value is an exact figure, except the
    // slider's OWN top bound, which is open-ended ("50 or more" — see
    // PublicPropertySearchService::applySliderFilter()).
    // 'max'-direction rests at the highest value ("Any" — but only while
    // genuinely untouched, tracked via data-touched, since the ceiling is
    // now ALSO the active ">=" value once touched, same as Budget); below
    // the ceiling it's a plain "up to this much" cap; at the ceiling it
    // reads "this much or more", mirroring Budget's own label.
    document.querySelectorAll('.dynamic-slider').forEach(function (input) {
        var out = input.closest('.filter-group').querySelector('.dynamic-slider-out');
        if (!out) return;

        function render() {
            var value = parseFloat(input.value);
            var formatted = input.dataset.unit === 'currency' ? formatInr(value) : String(Math.round(value));

            if (input.dataset.direction === 'min') {
                if (value <= parseFloat(input.min)) {
                    out.textContent = 'Any';
                    return;
                }
                out.textContent = value >= parseFloat(input.max) ? formatted + '+' : formatted;
                return;
            }

            if (input.dataset.touched !== '1') {
                out.textContent = 'Any';
                return;
            }
            out.textContent = value >= parseFloat(input.max) ? formatted + ' & above' : 'Up to ' + formatted;
        }

        input.addEventListener('input', function () {
            input.dataset.touched = '1';
            render();
        });
        render();
    });

    // Purpose and Property Type both reshape the whole results set (Purpose
    // also drives Bedrooms' visibility and the dynamic, admin-configured
    // type-specific filters below) — none of that can relabel/regenerate
    // itself client-side. Rather than fake a partial client-side sync (which
    // left the panel looking stale/incomplete until a separate "Apply
    // filters" click), submit the form immediately the moment either changes,
    // the same way the sort dropdown already auto-submits — the reload comes
    // back with everything correct for the new selection.
    var autoSubmitControls = document.querySelectorAll('.auto-submit-control');

    autoSubmitControls.forEach(function (control) {
        control.addEventListener('change', function () {
            disableAtRestSliders();
            filterForm.submit();
        });
    });
}());
</script>
@endpush