@extends('partial.layout')
@section('content')
    <div class="category__product sp_top_20 sp_bottom_80">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    @if(isset($searchQuery) && strlen($searchQuery) > 0)
                        <p class="h4 mb-3 p-4 pe-0">نتایج جستجو برای "{{ $searchQuery }}"</p>
                    @endif
                </div>
                <div class="col-12 col-md-3">
                    <form action="{{ route('search.index') }}" method="get" id="filter-form">
                        <input type="hidden" name="q" value="{{ $searchQuery }}">
                        <div class="filters-section">
                            <div class="row">
                                <div class="col-6 text-end"><span class="filter-title">فیلتر ها</span></div>
                                <div class="col-6 text-start"><a
                                        href="{{ route('search.index', ['q' => $searchQuery]) }}"
                                        class="brands-home">حذف فیلتر ها</a></div>

                                <div class="col-12 mt-3">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" role="switch"
                                               id="switchCheckDefault" name="available"
                                               value="1" {{ request('available') == 1 ? 'checked' : '' }}>
                                        <label class="form-check-label" for="switchCheckDefault">فقط کالاهای
                                            موجود</label>
                                    </div>
                                </div>

                                <!-- Categories Filter -->
                                <div class="col-12 mt-3">
                                    <div class="accordion" id="accordionExample">
                                        <div class="accordion-item">
                                            <h2 class="accordion-header">
                                                <button class="accordion-button collapsed prd-categories-search"
                                                        type="button" data-bs-toggle="collapse"
                                                        data-bs-target="#collapseOne" aria-expanded="false"
                                                        aria-controls="collapseOne">دسته بندی محصولات
                                                </button>
                                            </h2>
                                            <div id="collapseOne" class="accordion-collapse collapse"
                                                 data-bs-parent="#accordionExample">
                                                <div class="accordion-body">
                                                    <ul class="category-list">
                                                        @php
                                                            $selectedCategories = (array) request('category_id');
                                                            $parentCategories = $categories->whereNull('parent_id');
                                                        @endphp
                                                        <div class="mb-2 mt-2">
                                                            <button type="button" class="btn btn-sm btn-primary me-2"
                                                                    onclick="checkAllCategories()">انتخاب همه
                                                            </button>
                                                            <button type="button" class="btn btn-sm btn-secondary"
                                                                    onclick="uncheckAllCategories()">حذف انتخاب
                                                            </button>
                                                        </div>

                                                        @foreach($parentCategories as $parentCat)
                                                            <li class="list-group-item categories-filter mt-2">
                                                                <div class="d-flex align-items-center">
                                                                    <input name="category_id[]" type="checkbox"
                                                                           id="category_{{ $parentCat->id }}"
                                                                           value="{{ $parentCat->id }}"
                                                                           class="ms-2 category-checkbox parent-category"
                                                                        {{ in_array($parentCat->id, $selectedCategories) ? 'checked' : '' }}>
                                                                    <label for="category_{{ $parentCat->id }}"
                                                                           class="mb-0">{{ $parentCat->title }}</label>
                                                                    @if($parentCat->children->count() > 0)
                                                                        <button class="btn btn-link btn-sm ms-auto p-0"
                                                                                type="button"
                                                                                data-bs-toggle="collapse"
                                                                                data-bs-target="#subcategories_{{ $parentCat->id }}">
                                                                            <i class="fas fa-chevron-down category-collapse-icon"></i>
                                                                        </button>
                                                                    @endif
                                                                </div>

                                                                @if($parentCat->children->count() > 0)
                                                                    <div class="collapse mt-2"
                                                                         id="subcategories_{{ $parentCat->id }}">
                                                                        <ul class="list-unstyled ps-1">
                                                                            @foreach($parentCat->children as $childCat)
                                                                                <li class="mb-2">
                                                                                    <input name="category_id[]"
                                                                                           type="checkbox"
                                                                                           id="category_{{ $childCat->id }}"
                                                                                           value="{{ $childCat->id }}"
                                                                                           class="ms-2 category-checkbox child-category"
                                                                                           data-parent="{{ $parentCat->id }}"
                                                                                        {{ in_array($childCat->id, $selectedCategories) ? 'checked' : '' }}>
                                                                                    <label
                                                                                        for="category_{{ $childCat->id }}">{{ $childCat->title }}</label>
                                                                                </li>
                                                                            @endforeach
                                                                        </ul>
                                                                    </div>
                                                                @endif
                                                            </li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 mt-3">
                                    <div class="accordion" id="accordionJewelry">
                                        <div class="accordion-item">
                                            <h2 class="accordion-header">
                                                <button class="accordion-button collapsed" type="button"
                                                        data-bs-toggle="collapse" data-bs-target="#collapseJewelry"
                                                        aria-expanded="false" aria-controls="collapseJewelry">جواهر باشد
                                                </button>
                                            </h2>
                                            <div id="collapseJewelry" class="accordion-collapse collapse"
                                                 data-bs-parent="#accordionJewelry">
                                                <div class="accordion-body">
                                                    <div class="form-check form-switch p-1">
                                                        <div class="form-check form-check-inline w-100">
                                                            <input class="form-check-input" type="radio"
                                                                   name="is_jewelry"
                                                                   id="is_jewelry_yes"
                                                                   value="1" {{ request('is_jewelry') == 1 ? 'checked' : '' }}>
                                                            <label class="form-check-label"
                                                                   for="is_jewelry_yes">بله</label>
                                                        </div>
                                                        <div class="form-check form-check-inline w-100">
                                                            <input class="form-check-input" type="radio"
                                                                   name="is_jewelry"
                                                                   id="is_jewelry_no"
                                                                   value="0" {{ request('is_jewelry') !== null && request('is_jewelry') == 0 ? 'checked' : '' }}>
                                                            <label class="form-check-label"
                                                                   for="is_jewelry_no">خیر</label>
                                                        </div>
                                                        <div class="form-check form-check-inline w-100">
                                                            <input class="form-check-input" type="radio"
                                                                   name="is_jewelry"
                                                                   id="is_jewelry_all"
                                                                   value="3" {{ request('is_jewelry') == null || request('is_jewelry') == 3 ? 'checked' : '' }}>
                                                            <label class="form-check-label" for="is_jewelry_all">همه
                                                                موارد</label>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 mt-2">
                                    <div class="accordion mt-3" id="karatFilter">
                                        <div class="accordion-item">
                                            <h2 class="accordion-header">
                                                <button class="accordion-button collapsed" type="button"
                                                        data-bs-toggle="collapse" data-bs-target="#karatCollapseOne"
                                                        aria-expanded="false" aria-controls="karatCollapseOne">جنس
                                                </button>
                                            </h2>
                                            <div id="karatCollapseOne" class="accordion-collapse collapse"
                                                 data-bs-parent="#karatFilter">
                                                <div class="accordion-body">
                                                    <ul class="category-list">
                                                        @foreach($karats as $karat)
                                                            <li class="list-group-item mt-2">
                                                                <input type="radio" name="karat_id"
                                                                       id="karat_{{ $karat->id }}"
                                                                       value="{{ $karat->id }}"
                                                                       class="ms-2" {{ request('karat_id') == $karat->id ? 'checked' : '' }}>
                                                                <label
                                                                    for="karat_{{ $karat->id }}">{{ $karat->title }}</label>
                                                            </li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 mt-2">
                                    <div class="accordion mt-3" id="colorFilter">
                                        <div class="accordion-item">
                                            <h2 class="accordion-header">
                                                <button class="accordion-button collapsed" type="button"
                                                        data-bs-toggle="collapse" data-bs-target="#colorCollapseOne"
                                                        aria-expanded="false" aria-controls="colorCollapseOne">رنگ
                                                </button>
                                            </h2>
                                            <div id="colorCollapseOne" class="accordion-collapse collapse"
                                                 data-bs-parent="#colorFilter">
                                                <div class="accordion-body">
                                                    <ul class="category-list">
                                                        @foreach($colors as $color)
                                                            <li class="list-group-item mt-2">
                                                                <input type="radio" name="color_id"
                                                                       id="color_{{ $color->id }}"
                                                                       value="{{ $color->id }}"
                                                                       class="ms-2" {{ request('color_id') == $color->id ? 'checked' : '' }}>
                                                                <label
                                                                    for="color_{{ $color->id }}">{{ $color->title }}</label>
                                                            </li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 mt-2">
                                    <div class="accordion mt-3" id="brandFilter">
                                        <div class="accordion-item">
                                            <h2 class="accordion-header">
                                                <button class="accordion-button collapsed" type="button"
                                                        data-bs-toggle="collapse" data-bs-target="#brandCollapseOne"
                                                        aria-expanded="false" aria-controls="brandCollapseOne">برند
                                                </button>
                                            </h2>
                                            <div id="brandCollapseOne" class="accordion-collapse collapse"
                                                 data-bs-parent="#brandFilter">
                                                <div class="accordion-body">
                                                    <ul class="category-list">
                                                        @foreach($brands as $brand)
                                                            <li class="list-group-item mt-2">
                                                                <input type="radio" name="brand_id"
                                                                       id="brand_{{ $brand->id }}"
                                                                       value="{{ $brand->id }}"
                                                                       class="ms-2" {{ request('brand_id') == $brand->id ? 'checked' : '' }}>
                                                                <label
                                                                    for="brand_{{ $brand->id }}">{{ $brand->title }}</label>
                                                            </li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 mt-2">
                                    <div class="accordion mt-3" id="usageFilter">
                                        <div class="accordion-item">
                                            <h2 class="accordion-header">
                                                <button class="accordion-button collapsed" type="button"
                                                        data-bs-toggle="collapse" data-bs-target="#usageCollapseOne"
                                                        aria-expanded="false" aria-controls="usageCollapseOne">مناسب
                                                    برای
                                                </button>
                                            </h2>
                                            <div id="usageCollapseOne" class="accordion-collapse collapse"
                                                 data-bs-parent="#usageFilter">
                                                <div class="accordion-body">
                                                    <ul class="category-list">
                                                        @foreach($productUsages as $usage)
                                                            <li class="list-group-item mt-2">
                                                                <input type="radio" name="product_usage_id"
                                                                       id="usage_{{ $usage->id }}"
                                                                       value="{{ $usage->id }}"
                                                                       class="ms-2" {{ request('product_usage_id') == $usage->id ? 'checked' : '' }}>
                                                                <label
                                                                    for="usage_{{ $usage->id }}">{{ $usage->title }}</label>
                                                            </li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 mt-2">
                                    <div class="accordion mt-3" id="priceFilter">
                                        <div class="accordion-item">
                                            <h2 class="accordion-header">
                                                <button class="accordion-button collapsed" type="button"
                                                        data-bs-toggle="collapse" data-bs-target="#priceCollapseOne"
                                                        aria-expanded="false" aria-controls="priceCollapseOne">محدوده
                                                    قیمت
                                                </button>
                                            </h2>
                                            <div id="priceCollapseOne" class="accordion-collapse collapse"
                                                 data-bs-parent="#priceFilter">
                                                <div class="accordion-body">
                                                    <div class="row ">
                                                        <div class="col-12 price-filter d-flex">
                                                            <span class="price-filter-label ms-2">از</span>
                                                            <input type="text" id="amount-from" name="min_price"
                                                                   class="form-control price-custom-input"
                                                                   value="{{ request('min_price') ?? $priceRange['min_price'] }}">
                                                            <span class="price-filter-label me-2">ریال</span>
                                                        </div>
                                                        <div class="col-12 price-filter d-flex mt-3">
                                                            <span class="price-filter-label ms-2">تا</span>
                                                            <input type="text" id="amount-to" name="max_price"
                                                                   class="form-control price-custom-input"
                                                                   value="{{ request('max_price') ?? $priceRange['max_price'] }}">
                                                            <span class="price-filter-label me-2">ریال</span>
                                                        </div>
                                                    </div>
                                                    <div class="mt-3">
{{--                                                        <div class="input-group mb-2">--}}
{{--                                                            <input type="text" id="amount" class="form-control" readonly--}}
{{--                                                                   style="background:#fff; border:none; font-weight:bold; text-align:center;"/>--}}
{{--                                                            <div class="input-group-text w-100 text-center">--}}
{{--                                                                <p class="w-100 text-center">ریال</p>--}}
{{--                                                            </div>--}}
{{--                                                        </div>--}}
                                                        <div id="slider-range" class="mt-4"></div>
                                                        <input type="hidden" id="price-min" name="min_price">
                                                        <input type="hidden" id="price-max" name="max_price">                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 mt-2">
                                    <div class="accordion mt-3" id="weightFilter">
                                        <div class="accordion-item">
                                            <h2 class="accordion-header">
                                                <button class="accordion-button collapsed" type="button"
                                                        data-bs-toggle="collapse" data-bs-target="#weightCollapseOne"
                                                        aria-expanded="false" aria-controls="weightCollapseOne">محدوده
                                                    وزن
                                                </button>
                                            </h2>

                                            <div id="weightCollapseOne" class="accordion-collapse collapse"
                                                 data-bs-parent="#weightFilter">
                                                <div class="accordion-body">
                                                    <div class="row">
                                                        <div class="col-12 price-filter d-flex">
                                                            <span class="price-filter-label ms-2">از</span>
                                                            <input type="text" id="weight-min" name="min_weight"
                                                                   class="form-control price-custom-input"
                                                                   value="{{ request('min_weight') ?? $weightRange['min_weight'] }}">
                                                            <span class="price-filter-label me-2">گرم</span>
                                                        </div>
                                                        <div class="col-12 price-filter d-flex mt-3">
                                                            <span class="price-filter-label ms-2">تا</span>
                                                            <input type="text" id="weight-max" name="max_weight"
                                                                   class="form-control price-custom-input"
                                                                   value="{{ request('max_weight') ?? $weightRange['max_weight'] }}">
                                                            <span class="price-filter-label me-2">گرم</span>
                                                        </div>
                                                    </div>
                                                    <div class="mt-3">
                                                        <div id="slider-range-weight" class="mt-4"></div>
                                                        <!-- Hidden inputs to submit in form -->
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 mt-3">
                                    <button type="submit" class="btn primary-button w-100">اعمال فیلتر</button>
                                </div>
                            </div>
                        </div>
                    </form>

                </div>
                <div class="col-12 col-md-9">
                    <!-- Products Section -->
                    @if($products->count() > 0)
                        <div class="row mb-4">
                            <div class="col-12">
                                <h3>محصولات</h3>
                            </div>
                            <div class="col-12 col-md-2 text-end search-sort-title">مرتب سازی بر اساس</div>
                            <div class="col-12 col-md-7">
                                <div class="d-flex flex-wrap justify-content-start gap-1">
                                    @php
                                        $currentQuery = request()->query();
                                        unset($currentQuery['page']);
                                    @endphp

                                    @php $currentQuery['sort'] = 'newest'; @endphp
                                    <a href="{{ route('search.index', array_merge(['q' => $searchQuery], $currentQuery)) }}"
                                       class="btn btn-outline-secondary {{ request('sort') == 'newest' ? 'active brands-home' : '' }}">
                                        جدیدترین
                                    </a>

                                    @php $currentQuery['sort'] = 'cheapest'; @endphp
                                    <a href="{{ route('search.index', array_merge(['q' => $searchQuery], $currentQuery)) }}"
                                       class="btn btn-outline-secondary {{ request('sort') == 'cheapest' ? 'active brands-home' : '' }}">
                                        ارزان‌ترین
                                    </a>

                                    @php $currentQuery['sort'] = 'expensive'; @endphp
                                    <a href="{{ route('search.index', array_merge(['q' => $searchQuery], $currentQuery)) }}"
                                       class="btn btn-outline-secondary {{ request('sort') == 'expensive' ? 'active brands-home' : '' }}">
                                        گران‌ترین
                                    </a>

                                    @php $currentQuery['sort'] = 'popular'; @endphp
                                    <a href="{{ route('search.index', array_merge(['q' => $searchQuery], $currentQuery)) }}"
                                       class="btn btn-outline-secondary {{ request('sort') == 'popular' ? 'active brands-home' : '' }}">
                                        پربازدیدترین
                                    </a>

                                    @php $currentQuery['sort'] = 'bestseller'; @endphp
                                    <a href="{{ route('search.index', array_merge(['q' => $searchQuery], $currentQuery)) }}"
                                       class="btn btn-outline-secondary {{ request('sort') == 'bestseller' ? 'active brands-home' : '' }}">
                                        پرفروش‌ترین
                                    </a>
                                </div>
                            </div>
                            <div class="col-3 text-start search-sort-title">
                                <p class="product-count">{{ $products->total() }} کالا</p>
                            </div>
                        </div>
                        <div class="row">
                            @foreach($products as $product)
                                <div class="col-md-4 p-1">
                                    <x-front.product.slider-item :product="$product"/>
                                </div>
                            @endforeach
                            <div class="col-12 prd-pagination">
                                <div class="d-flex justify-content-center mt-4">
                                    {!! $products->appends(request()->query())->links('vendor.pagination.default') !!}
                                </div>
                            </div>
                        </div>
                    @endif
                    <!-- Articles Section -->
                    @if(isset($articles) && $articles->count() > 0)
                        <div class="row mt-5">
                            <div class="col-12">
                                <h3 class="pt-3 pb-3">مقالات و اخبار</h3>
                            </div>
                            @foreach($articles as $article)
                                <div class="col-md-4 p-1">
                                    <div class="card">
                                        <div class="card-body search-cart-body">
                                            <div class="text-center">
                                                @if($article->attachments->count() > 0)
                                                    <img
                                                        src="{{ asset('storage/attachments/' . json_decode($article->attachments->first()->sizes)->thumbnail) }}"
                                                        class="article-img-thumbnail" alt="{{ $article->title }}">

                                                @else
                                                    <img src="/theme/img/banners-temp/article-item.png" alt="">
                                                @endif
                                            </div>
                                            <h5 class="search-card-title">{{ $article->title }}</h5>
                                            <p class="card-text">{!!  Str::limit($article->short_description, 100)  !!}</p>
                                            @if($article->type == 'article')

                                                <a href="{{ route('articles.show', $article->slug) }}"
                                                   class="btn primary-button">ادامه مطلب</a>
                                            @elseif($article->type == 'news')
                                                <a href="{{ route('news.show', $article->slug) }}"
                                                   class="btn primary-button">ادامه مطلب</a>
                                            @else
                                                <a href="{{ route('front.page', $article->slug) }}"
                                                   class="btn primary-button">ادامه مطلب</a>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                            <div class="col-12 prd-pagination">
                                <div class="d-flex justify-content-center mt-4">
                                    {!! $articles->appends(request()->query())->links('vendor.pagination.default') !!}
                                </div>
                            </div>
                        </div>
                    @endif

                    @if($products->count() == 0 && (!isset($articles) || $articles->count() == 0))
                        <div class="alert alert-danger mt-3">
                            هیچ نتیجه‌ای برای جستجوی "{{ $searchQuery }}" یافت نشد.
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        function checkAllCategories() {
            document.querySelectorAll('.category-checkbox').forEach(cb => cb.checked = true);
        }

        function uncheckAllCategories() {
            document.querySelectorAll('.category-checkbox').forEach(cb => cb.checked = false);
        }

        document.addEventListener('DOMContentLoaded', function () {
            // Handle parent checkbox changes
            document.querySelectorAll('.parent-category').forEach(parentCheckbox => {
                parentCheckbox.addEventListener('change', function () {
                    const childCheckboxes = document.querySelectorAll(`.child-category[data-parent="${this.value}"]`);
                    childCheckboxes.forEach(child => {
                        child.checked = this.checked;
                    });
                });
            });

            // Handle child checkbox changes
            document.querySelectorAll('.child-category').forEach(childCheckbox => {
                childCheckbox.addEventListener('change', function () {
                    const parentId = this.dataset.parent;
                    const parentCheckbox = document.querySelector(`#category_${parentId}`);
                    const siblings = document.querySelectorAll(`.child-category[data-parent="${parentId}"]`);
                    const allChecked = Array.from(siblings).every(sibling => sibling.checked);
                    const someChecked = Array.from(siblings).some(sibling => sibling.checked);

                    parentCheckbox.checked = allChecked;
                    parentCheckbox.indeterminate = someChecked && !allChecked;
                });
            });

            // Initialize parent checkboxes state
            document.querySelectorAll('.parent-category').forEach(parentCheckbox => {
                const parentId = parentCheckbox.value;
                const siblings = document.querySelectorAll(`.child-category[data-parent="${parentId}"]`);
                const allChecked = Array.from(siblings).every(sibling => sibling.checked);
                const someChecked = Array.from(siblings).some(sibling => sibling.checked);

                parentCheckbox.checked = allChecked;
                parentCheckbox.indeterminate = someChecked && !allChecked;
            });

            // Handle collapse button rotation
            document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(button => {
                button.addEventListener('click', function () {
                    const icon = this.querySelector('i');
                    icon.style.transition = 'transform 0.3s ease';
                    icon.style.transform = this.getAttribute('aria-expanded') === 'true' ?
                        'rotate(0deg)' : 'rotate(180deg)';
                });
            });
        });

        function numberWithCommas(x) {
            return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }

        $(function () {
            $("#slider-range-weight").slider({
                range: true,
                min: {{$weightRange['min_weight']}},
                max: {{$weightRange['max_weight']}},
                step: 0.1,
                values: [{{ request('min_weight') ?? $weightRange['min_weight'] }}, {{ request('max_weight') ?? $weightRange['max_weight'] }}],
                slide: function (event, ui) {
                    $("#weight").val(ui.values[0] + " - " + ui.values[1] + " گرم");
                    $("#weight-min").val(ui.values[0]);
                    $("#weight-max").val(ui.values[1]);
                }
            });

            // مقدار اولیه
            let valuesWeight = $("#slider-range-weight").slider("values");
            $("#weight").val(valuesWeight[0] + " - " + valuesWeight[1] + " گرم");
            $("#weight-min").val(valuesWeight[0]);
            $("#weight-max").val(valuesWeight[1]);

            // وقتی کاربر مقدار رو توی اینپوت دستی تغییر داد
            $("#weight-min, #weight-max").on("input change", function () {
                let minVal = parseFloat($("#weight-min").val()) || {{$weightRange['min_weight']}};
                let maxVal = parseFloat($("#weight-max").val()) || {{$weightRange['max_weight']}};

                // مطمئن بشه min <= max
                if (minVal > maxVal) {
                    [minVal, maxVal] = [maxVal, minVal];
                }

                // آپدیت اسلایدر
                $("#slider-range-weight").slider("values", [minVal, maxVal]);

                // آپدیت لیبل
                $("#weight").val(minVal + " - " + maxVal + " گرم");
            });
        });
        $(function () {
            $("#slider-range").slider({
                range: true,
                min: {{$priceRange['min_price']}},
                max: {{$priceRange['max_price']}},
                step: 1000000,
                values: [
                    {{ request('min_price') ?? $priceRange['min_price'] }},
                    {{ request('max_price') ?? $priceRange['max_price'] }}
                ],
                slide: function (event, ui) {
                    // نمایش مقدار فرمت شده
                    $("#amount-from").val(numberWithCommas(ui.values[0]));
                    $("#amount-to").val(numberWithCommas(ui.values[1]));

                    // ست کردن روی اینپوت‌های hidden
                    $("#price-min").val(ui.values[0]);
                    $("#price-max").val(ui.values[1]);
                }
            });

            // ست اولیه
            let values = $("#slider-range").slider("values");
            $("#amount-from").val(numberWithCommas(values[0]));
            $("#amount-to").val(numberWithCommas(values[1]));
            $("#price-min").val(values[0]);
            $("#price-max").val(values[1]);

            // وقتی کاربر دستی مقدار وارد کنه
            $("#amount-from, #amount-to").on("input change", function () {
                let minVal = parseInt($("#amount-from").val().replace(/,/g, "")) || {{$priceRange['min_price']}};
                let maxVal = parseInt($("#amount-to").val().replace(/,/g, "")) || {{$priceRange['max_price']}};

                // جلوگیری از خطا: اگر min > max جابجا بشن
                if (minVal > maxVal) {
                    [minVal, maxVal] = [maxVal, minVal];
                }

                // آپدیت اسلایدر
                $("#slider-range").slider("values", [minVal, maxVal]);

                // آپدیت hidden ها
                $("#price-min").val(minVal);
                $("#price-max").val(maxVal);

                // فرمت نمایش
                $("#amount-from").val(numberWithCommas(minVal));
                $("#amount-to").val(numberWithCommas(maxVal));
            });
        });
    </script>
@endpush
@push('styles')
    <style>
        .category-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .category-list .list-group-item {
            border: none;
            padding: 0.5rem 0;
        }

        .category-list .btn-link {
            color: #6c757d;
            text-decoration: none;
        }

        .category-list .btn-link:hover {
            color: #495057;
        }

        .category-list .btn-link i {
            transition: transform 0.3s ease;
        }

        .category-list .btn-link i {
            transition: transform 0.3s ease;
        }

        .category-list .collapse {
            border-right: 2px solid #e9ecef;
            margin-right: 1rem;
        }

        .category-list .child-category {
            margin-right: 0.5rem;
        }

        .category-list label {
            cursor: pointer;
            user-select: none;
        }

        .category-list input[type="checkbox"] {
            cursor: pointer;
        }

        .category-list .parent-category {
            font-weight: 500;
        }

        .category-list .child-category {
            font-weight: normal;
        }

        .category-collapse-icon {
            position: absolute;
            left: 0;
            top: 10px;
        }

        .accordion-body {
            padding: 0 !important;
        }

        .categories-filter li {
            width: 100%;
        }
    </style>
@endpush