@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">
                    <p class="h4 mb-3 p-4 pe-0">محصولات
                        @if (Request::is('brand/*'))
                            برند                          {{$brand->title}}
                        @elseif(Request::is('category/*'))
                            دسته بندی                          {{$category->title}}
                        @endif
                    </p>
                </div>
                <div class="col-12 col-md-3">
                    <form action="{{
    Request::is('brand/*') ? route('brand.show', $brand->slug) : route('category.show', $category->slug)
    }}" method="get" id="filter-form">
                        <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="{{
    Request::is('brand/*') ? route('brand.show', $brand->slug) : route('category.show', $category->slug)
    }}"
                                                                 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>

                                <div class="col-12 mt-3">
                                    <div class="accordion" id="accordionExample">
                                        <div class="accordion-item">
                                            <h2 class="accordion-header">
                                                <button class="accordion-button collapsed" 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');
                                                        @endphp
                                                        <div class="mb-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($categories as $cat)
                                                            <li class="list-group-item mt-2">
                                                                <input name="category_id[]" type="checkbox"
                                                                       id="category_{{ $cat->id }}"
                                                                       value="{{ $cat->id }}"
                                                                       class="ms-2 category-checkbox" {{ in_array($cat->id, $selectedCategories) ? 'checked' : '' }}>
                                                                <label
                                                                    for="category_{{ $cat->id }}">{{ $cat->title }}</label>
                                                            </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>
                                @if(!Request::is('brand/*'))
                                    <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>
                                @endif
                                <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 p-0">
                                                    <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 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="weight-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="weight-filter-label me-2">گرم</span>
                                                        </div>
                                                        <div class="col-12 price-filter d-flex mt-3">
                                                            <span class="weight-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="weight-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">
                    <div class="row">
                        <div class="col-3 text-end">مرتب سازی بر اساس</div>
                        <div class="col-6">
                            @php
                                $currentQuery = request()->query();
                                // Remove the 'page' parameter for sort links
                                unset($currentQuery['page']);
                                $currentQuery['sort'] = 'newest';
                            @endphp
                            <a href="{{ Request::is('brand/*') ? route('brand.show', array_merge([$brand->slug], $currentQuery)) : route('category.show', array_merge([$category->slug], $currentQuery)) }}"
                               class="m-2 {{ request('sort') == 'newest' ? 'brands-home' : '' }}">جدید ترین</a>

                            @php
                                $currentQuery = request()->query();
                                // Remove the 'page' parameter for sort links
                                unset($currentQuery['page']);
                                $currentQuery['sort'] = 'cheapest';
                            @endphp
                            <a href="
                            {{ Request::is('brand/*') ? route('brand.show', array_merge([$brand->slug], $currentQuery)) : route('category.show', array_merge([$category->slug], $currentQuery)) }}
                            "
                               class="m-2 {{ request('sort') == 'cheapest' ? 'brands-home' : '' }}">ارزانترین</a>

                            @php
                                $currentQuery = request()->query();
                                // Remove the 'page' parameter for sort links
                                unset($currentQuery['page']);
                                $currentQuery['sort'] = 'expensive';
                            @endphp
                            <a href="{{ Request::is('brand/*') ? route('brand.show', array_merge([$brand->slug], $currentQuery)) : route('category.show', array_merge([$category->slug], $currentQuery)) }}"
                               class="m-2 {{ request('sort') == 'expensive' ? 'brands-home' : '' }}">گرانترین</a>

                            @php
                                $currentQuery = request()->query();
                                // Remove the 'page' parameter for sort links
                                unset($currentQuery['page']);
                                $currentQuery['sort'] = 'popular';
                            @endphp
                            <a href="{{ Request::is('brand/*') ? route('brand.show', array_merge([$brand->slug], $currentQuery)) : route('category.show', array_merge([$category->slug], $currentQuery)) }}"
                               class="m-2 {{ request('sort') == 'popular' ? 'brands-home' : '' }}">پر بازدیدترین</a>

                            @php
                                $currentQuery = request()->query();
                                // Remove the 'page' parameter for sort links
                                unset($currentQuery['page']);
                                $currentQuery['sort'] = 'bestseller';
                            @endphp
                            <a href="{{ Request::is('brand/*') ? route('brand.show', array_merge([$brand->slug], $currentQuery)) : route('category.show', array_merge([$category->slug], $currentQuery)) }}"
                               class="m-2 {{ request('sort') == 'bestseller' ? 'brands-home' : '' }}">پرفروش ترین</a>
                        </div>
                        <div class="col-3 text-start">
                            <p class="product-count">{{ $products->total() }} کالا</p>
                        </div>
                    </div>
                    <div class="row">
                        @foreach($products as $productItem)
                            <div class="col-md-4 p-1">
                                <x-front.product.slider-item :product="$productItem"/>
                            </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>
                </div>
            </div>
            @if(isset($category))
                <div class="row category-list mt-5">
                    <h3>{{$category->title}}</h3>
                    <div class="row">
                        <div class="col-12 col-md-8 ">
                            {!! $category->description !!}
                        </div>
                        <div class="col-12 col-md-4">
                            <img class="w-100"
                                 src="{{ $category->attachments->first() ? asset('storage/attachments/' . json_decode($category->attachments->first()->sizes)->large) : '' }}"
                                 alt="{{$category->title}}">
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
    <!-- single__product__end -->

@endsection
@push('scripts')
    <script>
        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));
            });
        });
        function checkAllCategories() {
            document.querySelectorAll('.category-checkbox').forEach(cb => cb.checked = true);
        }

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