{{-- $prefix: 'desktop' or 'mobile' — keeps input IDs unique --}}
<div class="filter-items">
    <div class="container-fluid">

        {{-- Search --}}
        <div class="filter-item">
            <h5 class="filter-item-title">جستجو</h5>
            <div class="filter-item-content">
                <div class="search-form">
                    <div class="search-filed">
                        <input type="text" name="q" value="{{ $search ?? '' }}"
                            placeholder="جستجوی محصولات ..."
                            class="form-control search-input">
                        <button type="submit" class="btn search-btn main-color-one-bg rounded-pill">
                            <i class="bi bi-search"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Categories --}}
        <div class="filter-item">
            <h5 class="filter-item-title">دسته‌بندی‌ها</h5>
            <div class="filter-item-content">
                @foreach($categoryTree as $node)
                @php
                    $cat   = $node['item'];
                    $depth = $node['depth'];
                    $indentClass = $depth > 0 ? 'shop-cat-indent-' . min($depth, 3) : '';
                    $isCurrent = isset($currentCategory) && $currentCategory && $currentCategory->id === $cat->id;
                    $checked   = $isCurrent || in_array($cat->id, $catIds ?? []);
                @endphp
                <div class="shop-cat-row {{ $indentClass }}">
                    <div class="form-check">
                        <input type="checkbox" name="categories[]"
                            id="{{ $prefix }}_cat_{{ $cat->id }}"
                            value="{{ $cat->id }}"
                            data-slug="{{ $cat->slug }}"
                            data-url="{{ route('shop.category', $cat->slug) }}"
                            class="form-check-input shop-cat-checkbox"
                            {{ $checked ? 'checked' : '' }}>
                        <label class="form-check-label" for="{{ $prefix }}_cat_{{ $cat->id }}">
                            @if($cat->icon)
                            <i class="bi bi-{{ $cat->icon }} me-1"></i>
                            @endif
                            {{ $cat->name }}
                        </label>
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        {{-- Price range --}}
        {{-- hidden price inputs live in the parent form (shop.blade.php), shared by both desktop/mobile --}}
        <div class="filter-item">
            <h5 class="filter-item-title">قیمت</h5>
            <div class="filter-item-content">
                <div class="filter-price">
                    <div class="filter-slider">
                        <div class="price-slider shop-price-slider"
                            data-max="{{ $maxPrice }}"
                            data-init-min="{{ $priceMin ?? 0 }}"
                            data-init-max="{{ ($priceMax > 0) ? $priceMax : $maxPrice }}">
                        </div>
                    </div>
                    <ul class="filter-range mb-3">
                        <li>
                            <input type="text" class="min-price-filter" disabled>
                            <span>تومان</span>
                        </li>
                        <li class="label fw-bold">تا</li>
                        <li>
                            <input type="text" class="max-price-filter" disabled>
                            <span>تومان</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        {{-- Apply button --}}
        <div class="filter-item text-center">
            <button type="submit" class="btn border-0 rounded-3 main-color-one-bg text-white w-100 py-2">اعمال فیلتر</button>
        </div>

        @if(!empty($catIds) || ($priceMin ?? 0) > 0 || ($priceMax ?? 0) > 0 || ($search ?? '') !== '')
        <div class="filter-item text-center mt-2">
            <a href="{{ route('shop') }}" class="text-muted font-14">
                <i class="bi bi-x-circle me-1"></i> پاک کردن فیلترها
            </a>
        </div>
        @endif

    </div>
</div>
