@extends('layouts.index')
@section('content')

    {{-- Breadcrumb Section --}}
    @php
        $pages = [];
        $page = [];
        $page['title'] = __('lang.home');
        $page['route'] = route('home');
        $page['color'] = 'text_3';
        $pages[] = $page;

        if (isset($activePage) && in_array($activePage, ['categories', 'brands'])) {
            $page['title'] = $account->products_title;
            $page['route'] = route('products');
            $page['color'] = 'text_3';
            $page['id'] = 'products_breadcrumb';
            $pages[] = $page;
        }

        if (isset($activePage) && $activePage == 'categories') {
            if (isset($categories_id) && (!isset($selected_category) || $selected_category == '')) {
                foreach ($categoriesTree as $category) {
                    //  print_r($category->categories_code .'</br>');

                    if ($categories_id == $category->categories_id) {
                        $selected_category = $category;
                        // dd($selected_category);
                        break;
                    } else {
                        foreach ($category->subcategories as $subcategory) {
                            if ($categories_id == $subcategory->categories_id) {
                                $selected_category = $subcategory;
                                break;
                            } else {
                                foreach ($subcategory->subcategories as $sub) {
                                    if ($categories_id == $sub->categories_id) {
                                        $selected_category = $sub;
                                        break;
                                    } else {
                                        foreach ($sub->subcategories as $subcat) {
                                            if ($categories_id == $sub->categories_id) {
                                                $selected_category = $subcat;
                                                break;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            if (isset($selected_category) && $selected_category) {
                $slug = $selected_category->categories_id . '-' . make_slug($selected_category->categories_title);
            } else {
                $slug = isset($categories_id) ? $categories_id : '';
            }

            $page['title'] =
                isset($selected_category) && $selected_category
                    ? $selected_category->categories_title
                    : __('lang.categories');
            $page['route'] = isset($selected_category) && $selected_category ? categoryRoute($selected_category) : '#';
            $page['color'] = 'text_1';
            $page['id'] = 'categories_breadcrumb';
            $pages[] = $page;
        } elseif (isset($activePage) && $activePage == 'offers') {
            $page['title'] = __('lang.offers');
            $page['route'] = route('products', ['is_offers' => 1]);
            $page['color'] = 'text_1';
            $pages[] = $page;
        } elseif (isset($activePage) && $activePage == 'brands') {
            $page['title'] = __('lang.brands');
            $page['route'] = route('brands');
            $page['color'] = 'text_3';
            $pages[] = $page;
            if (isset($activeBrand)) {
                foreach ($activeBrand->translations as $brandTrans) {
                    if ($brandTrans->locale == $locale) {
                        $page['title'] = $brandTrans->brands_name;
                        $page['route'] = '#';
                        $page['color'] = 'text_1';
                        $pages[] = $page;
                    }
                }
            }
        } else {
            $page['title'] = $account->products_title;
            $page['route'] = route('products');
            $page['color'] = 'text_1';
            $page['id'] = 'products_breadcrumb';
            $pages[] = $page;
        }

    @endphp
    @include('components.breadcrumb', $pages)

    <div class="container my-4" x-data="productFilters()" data-active-page="{{ $activePage ?? '' }}"
        data-categories-id="{{ $categories_id ?? '' }}"
        data-brands-id="{{ isset($activeBrand) ? $activeBrand->brands_id : $brands_id ?? '' }}"
        data-initial-meta="{{ json_encode($initialFilterMeta) }}">
        <div class="row ">
            @include('products.filter')

            <div
                class="col-md-{{ env('show_filter', true) ? '9' : '12' }} col-12 div-after-filter h-100 {{ $account && $account->accounts_website_theme == 'theme5' ? 'order-1' : 'order-2' }} ">

                <div
                    class="row g-4 align-items-{{ $account && $account->accounts_website_theme == 'theme5' ? 'start' : 'center' }} justify-content-center mb-2 ">

                    <div
                        class="col-md-8 col-{{ $account && $account->accounts_website_theme == 'theme4' ? '10' : '12' }} m-0 text-start ">
                        @if (isset($activeBrand))
                            {{-- @foreach ($activeBrand->translations as $brandTrans)
                                @if ($brandTrans->locale == $locale)
                                    <h1 class="fb-700 text_1 d-inline font-20">{{ $brandTrans->brands_name }} </h1>
                                @endif
                            @endforeach --}}
                            <img src="{{ $activeBrand->brands_img ? $imagesBaseUrl . 'uploads/' . env('accountId') . '/brands/original/' . $activeBrand->brands_img : $imagesBaseUrl . 'img/no-image.png' }}"
                                alt="{{ $activeBrand->brands_name }}" height="100px" width="auto"
                                class="object-fit-contain" loading="lazy" style="max-width:150px">
                        @endif
                        @if (isset($selected_category) && $selected_category)
                            <h1 class="fb-700 text_1 d-inline font-20">{{ $selected_category->categories_title }} </h1>
                        @endif
                        <h6
                            class="fb-500 text_1 d-inline font-14 {{ $account && $account->accounts_website_theme == 'theme1' ? 'd-none' : '' }} {{ isset($activeBrand) || (isset($selected_category) && $selected_category) ? 'px-3' : '' }}">
                            {{ ucwords(__('lang.numberOfProducts')) }} <span class="showingfrom" x-text="pagination.total">
                            </span> </h6>
                    </div>
                    @if ($account && $account->accounts_website_theme == 'theme4')
                        <div class="col-2 d-md-none d-inline ">
                            @if (isset($activePage) && in_array($activePage, ['products', 'offers', 'ourProducts', 'ourOffers', 'ourCategories']))
                                <span class="input-group-text justify-content-center background_2 "
                                    x-on:click="openFilter()">
                                    <i class="fa fa-filter" aria-hidden="true"></i>
                                </span>
                            @endif
                        </div>
                    @endif
                    <!-- <div class="row px-md-0  col-md-4 col-12 align-items-center  "> -->
                    <div class="col-md-4 col-12 text-end m-0 d-md-inline sortBySelectDiv">
                        {!! Form::select(
                            'sort_by',
                            [
                                'default' => __('lang.popularity'),
                                'recently' => __('lang.recently'),
                                'highest_price' => __('lang.highest_price'),
                                'lowest_price' => __('lang.lowest_price'),
                                'highest_rating' => __('lang.highest_rating'),
                                'best_selling' => __('lang.best_selling'),
                            ],
                            '',
                            ['class' => 'form-select sortBySelect d-block w-100  ', 'id' => 'sort_by', 'x-on:change' => 'onSortChange($event)'],
                        ) !!}
                    </div>
                    <!-- </div> -->

                </div>
                </form>
                <template x-if="loading">
                    <div
                        class=" row products-div-container gx-md-3 gy-md-{{ env('show_filter', true) ? '3' : '1' }}  gx-2 gy-2">
                        <template x-for="n in 12">
                            <div class="col-6 col-md-4">
                                <div class="card border-0 p-2">
                                    <div style="height:260px; background:#eee; border-radius:8px;"></div>
                                    <div
                                        style="height:14px; width:50%; background:#f2f2f2; margin-top:10px; border-radius:4px;">
                                    </div>
                                    <div
                                        style="height:14px; width:100%; background:#f2f2f2; margin-top:6px; border-radius:4px;">
                                    </div>
                                    <div
                                        style="height:14px; width:30%; background:#f2f2f2; margin-top:6px; border-radius:4px;">
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </template>

                <template
                    x-if="!loading && ((pagination.total == 0) || (productsHtml == '' || (productsHtml && productsHtml.trim() === '')))">
                    <div class="w-100 d-flex flex-column align-items-center justify-content-center text-center my-5">
                        <x-empty-images.no-products width="200" height="200" />
                        <h4 class="fb-700 text_1 mt-3">{{ __('lang.noProductFound') }}</h4>
                        <p class="text_4 font-14" style="max-width:720px">
                            {{ __('lang.noProductFoundDesc') }}
                        </p>
                    </div>
                </template>

                <div class=" row products-div-container gx-md-3 gy-md-{{ env('show_filter', true) ? '3' : '1' }}  gx-2 gy-2"
                    x-show="!loading" x-ref="productsContainer" x-html="productsHtml"></div>

                <div class="row  align-items-center justify-content-center mt-4">
                    <div id="filterOverlay" class="" x-ref="filterOverlay">
                        <div class="cv-spinner">
                            <span class="spinner"></span>
                        </div>
                    </div>
                    <div class="col-md-12 col-12 d-flex justify-content-center" id="pagination-form" x-ref="paginationForm"
                        x-html="paginationHtml"></div>
                </div>

            </div>
        </div>
        <div class="row  ">
            <div class="col-md-3"></div>
            <div class="col-md-9 col-12 categories_footer_code mt-2">

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

@endsection
@push('js')
    <script>
        function productFilters() {
            return {
                loading: true,
                productsHtml: '',
                paginationHtml: '',
                pagination: {
                    total: '',
                    current_page: 1,
                    last_page: 1
                },
                stopLoadMore: true,
                disableAutoLoadMoreForClick: false,
                isLoadingMore: false,
                filters: {
                    search: '',
                    products_barcode: '',
                    sort_by: 'recently',
                    price: 0,
                    min_price: null,
                    max_price: null,
                    categories: [],
                    attributes: [],
                    choices: [],
                    offers: [],
                    brands: [],
                    tags: [],
                    home: '',
                    is_offers: ''
                },
                meta: {
                    min: null,
                    max: null,
                    attributes: [],
                    choices: [],
                    offers: [],
                    brands: []
                },
                // مخزن النسخ الكاملة من الميتاداتا يتم ملؤه مرة واحدة من filterData
                fullMeta: {
                    attributes: [],
                    choices: [],
                    offers: [],
                    brands: []
                },
                activePage: '',
                initialCategoryId: '',
                initialBrandId: '',
                init() {
                    this.activePage = (this.$root?.dataset?.activePage || '').trim();
                    this.initialCategoryId = (this.$root?.dataset?.categoriesId || '').trim();
                    this.initialBrandId = (this.$root?.dataset?.brandsId || '').trim();

                    // حاول استخدام البيانات الممررة من السيرفر أولاً لتجنب استدعاء API مكرر
                    let serverMeta = null;
                    try {
                        const rawMeta = this.$root?.dataset?.initialMeta;
                        if (rawMeta) serverMeta = JSON.parse(rawMeta);
                    } catch (e) {
                        console.error('Error parsing initial meta', e);
                    }

                    const afterMeta = () => {
                        this.initializeFromQuery();
                        this.initSectionOpenStates();
                        this.refresh();
                    };

                    if (serverMeta) {
                        this.applyInitialMeta(serverMeta);
                        afterMeta();
                    } else {
                        this.fetchInitialFilterMeta().then(() => {
                            afterMeta();
                        });
                    }

                    // ربط حدث السكرول لمنطق load more المقترن بصفحتين
                    window.addEventListener('scroll', this.onScrollLoadMore.bind(this));
                },
                openFilter() {
                    const filterDiv = this.$refs.filterDiv || document.querySelector('.filter-div');
                    const afterDiv = document.querySelector('.div-after-filter');
                    const saveDiv = document.querySelector('.advanced-search-save-div');
                    const advancedFilterDiv = document.querySelector('.advanced-search-div');
                    const fixedFilter = document.querySelector('.fixed-filter-span');

                    filterDiv && filterDiv.classList.remove('d-none');
                    afterDiv && afterDiv.classList.add('d-none');
                    saveDiv && saveDiv.classList.remove('d-none');
                    // advancedFilterDiv && advancedFilterDiv.classList.add('d-none');
                    fixedFilter && fixedFilter.classList.add('d-none');
                },
                closeFilter() {
                    const filterDiv = this.$refs.filterDiv || document.querySelector('.filter-div');
                    const afterDiv = document.querySelector('.div-after-filter');
                    const saveDiv = document.querySelector('.advanced-search-save-div');
                    const advancedFilterDiv = document.querySelector('.advanced-search-div');
                    const fixedFilter = document.querySelector('.fixed-filter-span');

                    filterDiv && filterDiv.classList.add('d-none');
                    afterDiv && afterDiv.classList.remove('d-none');
                    saveDiv && saveDiv.classList.add('d-none');
                    // advancedFilterDiv && advancedFilterDiv.classList.remove('d-none');
                    fixedFilter && fixedFilter.classList.remove('d-none');
                },
                initSectionOpenStates() {
                    const toggle = (hasItems, iconSelector, contentSelector) => {
                        const icon = document.querySelector(iconSelector);
                        const content = document.querySelector(contentSelector);
                        if (!icon || !content) return;
                        if (hasItems) {
                            content.classList.remove('d-none');
                            icon.classList.add('rotated');
                        } else {
                            content.classList.add('d-none');
                            icon.classList.remove('rotated');
                        }
                    };
                    toggle(this.filters.categories && this.filters.categories.length > 0, '.categories-icon',
                        '.categories-content');
                    toggle(this.filters.offers && this.filters.offers.length > 0, '.offers-icon', '.offers-content');
                    toggle(this.filters.brands && this.filters.brands.length > 0, '.brands-icon', '.brands-content');
                    toggle(this.filters.attributes && this.filters.attributes.length > 0, '.attributes-icon',
                        '.attributes-content');
                    toggle(this.filters.tags && this.filters.tags.length > 0, '.tags-icon', '.tags-content');
                },
                buildParams(page = 1) {
                    const p = new URLSearchParams();
                    if (this.filters.search) p.set('title', this.filters.search);
                    if (this.filters.products_barcode) p.set('products_barcode', this.filters.products_barcode);
                    if (this.filters.sort_by) p.set('sort_by', this.filters.sort_by);
                    if (this.filters.price == 1) {
                        const minEl = document.querySelector('#min');
                        const maxEl = document.querySelector('#max');
                        this.filters.min_price = minEl ? minEl.value : this.filters.min_price;
                        this.filters.max_price = maxEl ? maxEl.value : this.filters.max_price;
                        if (this.filters.min_price) p.set('min_price', this.filters.min_price);
                        if (this.filters.max_price) p.set('max_price', this.filters.max_price);
                        p.set('price', 1);
                    }
                    if (this.filters.categories.length) p.set('categories', this.filters.categories.join(','));
                    if (this.filters.attributes.length) p.set('products_attributes', this.filters.attributes.join(','));
                    if (this.filters.choices.length) p.set('choices', this.filters.choices.join(','));
                    if (this.filters.offers.length) p.set('offers', this.filters.offers.join(','));
                    if (this.filters.brands.length) p.set('brands', this.filters.brands.join(','));
                    if (this.filters.tags && this.filters.tags.length) p.set('tags', this.filters.tags.join(','));
                    if (this.filters.home) p.set('home', this.filters.home);
                    if (this.filters.is_offers) p.set('is_offers', this.filters.is_offers);
                    p.set('page', page);
                    return p.toString();
                },
                updateUrl(page = 1) {
                    const params = this.buildParams(page);
                    const url = new URL(window.location.href);
                    url.search = params;
                    window.history.replaceState({}, '', url.toString());
                },
                async refresh(page = 1) {
                    // حدّث عنوان الصفحة بمعاملات الفلتر الحالية لضمان الاستمرارية بعد التحديث
                    this.updateUrl(page);
                    this.loading = true;
                    this.$refs.filterOverlay && (this.$refs.filterOverlay.style.display = 'block');
                    await this.fetchAllData(page);
                    this.$refs.filterOverlay && (this.$refs.filterOverlay.style.display = 'none');
                    this.loading = false;
                    // Re-enable auto load more after navigation completes
                    this.disableAutoLoadMoreForClick = false;
                },
                async fetchAllData(page = 1) {
                    try {
                        const params = this.buildParams(page);
                        const res = await fetch('{{ URL::route('productsPagination') }}?' + params, {
                            headers: {
                                'Accept': 'application/json'
                            }
                        });
                        const json = await res.json();
                        if (json) {
                            // تحديث بيانات المنتجات والترقيم
                            this.productsHtml = json.products || '';
                            this.paginationHtml = json.pagination_dev || '';
                            this.pagination = json.pagination || this.pagination;
                            // حدّث ظهور/إخفاء الـ pagination تبعًا لزوجية الصفحة
                            this.updatePaginationVisibility();
                            // تحديث قيم السعر الدنيا/العليا
                            if (json.min !== undefined) this.meta.min = json.min;
                            if (json.max !== undefined) this.meta.max = json.max;
                            // تطبيق filterIds على النسخ الكاملة لإظهار العناصر المرئية فقط (التصنيفات تظل كاملة)
                            if (json.filterIds) {
                                this.applyFilterIdsToMeta(json.filterIds);
                            }
                            // عند تحديث الميتا، لو فلتر السعر غير مُفعّل أعِد ضبط السلايدر على قيم الميتا
                            if (this.filters.price !== 1) {
                                this.resetPriceSliderToMeta();
                            }
                            // ربط أحداث الترقيم ليتم التحويل عبر refresh
                            this.$nextTick(() => {
                                document.querySelectorAll('#pagination-form .page-link').forEach(a => {
                                    a.addEventListener('click', (ev) => {
                                        ev.preventDefault();
                                        let pageParam = 1;
                                        try {
                                            const linkUrl = new URL(a.href, window.location
                                                .origin);
                                            pageParam = parseInt(linkUrl.searchParams.get(
                                                'page')) || 1;
                                        } catch (e) {
                                            pageParam = parseInt(a.getAttribute('data-page')) ||
                                                1;
                                        }
                                        this.disableAutoLoadMoreForClick = true;
                                        this.scrollToProductsTop();
                                        setTimeout(() => {
                                            this.refresh(pageParam);
                                        }, 200);
                                    });
                                });
                            });
                        }
                    } catch (e) {
                        console.error('combined data fetch error', e);
                    }
                },
                async fetchFiltersData(page = 1) {
                    try {
                        const params = this.buildParams(page);
                        const res = await fetch('{{ route('products.json') }}?' + params, {
                            headers: {
                                'Accept': 'application/json'
                            }
                        });
                        const json = await res.json();
                        if (json && json.status === 200) {
                            const data = json.data || {};
                            this.pagination = data.pagination || this.pagination;
                            this.meta.min = data.min;
                            this.meta.max = data.max;
                            this.meta.attributes = Array.isArray(data.attributes) ? data.attributes : [];
                            this.meta.choices = Array.isArray(data.choices) ? data.choices : [];
                            this.meta.offers = Array.isArray(data.offers) ? data.offers : [];
                            this.meta.brands = Array.isArray(data.brands) ? data.brands : [];
                            this.meta.tags = Array.isArray(data.tags) ? data.tags : [];
                            // عند تحديث الميتا، لو فلتر السعر غير مُفعّل أعِد ضبط السلايدر على قيم الميتا
                            if (this.filters.price !== 1) {
                                this.resetPriceSliderToMeta();
                            }
                        }
                    } catch (e) {
                        console.error('filters data fetch error', e);
                    }
                },
                async fetchInitialFilterMeta() {
                    try {
                        const params = new URLSearchParams();
                        if (this.filters.search) params.set('title', this.filters.search);
                        const res = await fetch('{{ URL::route('filterData') }}?' + params.toString(), {
                            headers: {
                                'Accept': 'application/json'
                            }
                        });
                        const json = await res.json();
                        if (json && json.status === 200 && json.data) {
                            this.applyInitialMeta(json.data);
                        }
                    } catch (e) {
                        console.error('initial filter meta fetch error', e);
                    }
                },
                applyInitialMeta(data) {
                    // خزن النسخ الكاملة مرة واحدة
                    this.fullMeta.attributes = Array.isArray(data.attributes) ? data.attributes : [];
                    this.fullMeta.choices = Array.isArray(data.choices) ? data.choices : [];
                    this.fullMeta.offers = Array.isArray(data.offers) ? data.offers : [];
                    this.fullMeta.brands = Array.isArray(data.brands) ? data.brands : [];
                    this.fullMeta.tags = Array.isArray(data.tags) ? data.tags : [];
                    // ابدأ بعرض الكاملة أولًا
                    this.meta.attributes = this.fullMeta.attributes;
                    this.meta.choices = this.fullMeta.choices;
                    this.meta.offers = this.fullMeta.offers;
                    this.meta.brands = this.fullMeta.brands;
                    this.meta.tags = this.fullMeta.tags;
                    // قيم السعر إن توفرت
                    if (data.min !== undefined) this.meta.min = data.min;
                    if (data.max !== undefined) this.meta.max = data.max;

                    if (this.filters.price !== 1) {
                        this.resetPriceSliderToMeta();
                    } else {
                        this.resetPriceSliderToSelectedValues();
                    }
                },
                resetPriceSliderToSelectedValues() {
                    const minSlider = document.querySelector('.min_slider');
                    const maxSlider = document.querySelector('.max_slider');
                    if (minSlider) {
                        minSlider.dispatchEvent(new Event('input', {
                            bubbles: true
                        }));
                        minSlider.dispatchEvent(new Event('change', {
                            bubbles: true
                        }));
                    }
                    if (maxSlider) {
                        maxSlider.dispatchEvent(new Event('input', {
                            bubbles: true
                        }));
                        maxSlider.dispatchEvent(new Event('change', {
                            bubbles: true
                        }));
                    }
                },
                applyFilterIdsToMeta(filterIds) {
                    const toStrSet = (arr) => new Set((Array.isArray(arr) ? arr : []).map(v => String(v)));
                    const attrSet = toStrSet(filterIds.attributes_ids);
                    const offerSet = toStrSet(filterIds.offers_ids);
                    const brandSet = toStrSet(filterIds.brands_ids);
                    const choiceSet = toStrSet(filterIds.choices_ids);
                    const tagSet = toStrSet(filterIds.tags_ids);
                    // صفّي Attributes/Offers/Brands بناءً على المجموعات
                    this.meta.attributes = this.fullMeta.attributes.filter(a => attrSet.has(String(a.attributes_id)));
                    this.meta.offers = this.fullMeta.offers.filter(o => offerSet.has(String(o.offers_id)));
                    this.meta.brands = this.fullMeta.brands.filter(b => brandSet.has(String(b.brands_id)));
                    this.meta.tags = (this.fullMeta.tags || []).filter(t => tagSet.has(String(t.id)));

                    // صفّي Subchoices مع الحفاظ على الأب إذا بقي له أبناء مرئيون
                    this.meta.choices = this.fullMeta.choices.map(parent => {
                        const filteredSubs = (Array.isArray(parent.subchoices) ? parent.subchoices : []).filter(
                            sc => choiceSet.has(String(sc.choices_id)));
                        return {
                            ...parent,
                            subchoices: filteredSubs
                        };
                    }).filter(parent => Array.isArray(parent.subchoices) && parent.subchoices.length > 0);
                },
                resetPriceSliderToMeta() {
                    const minVal = parseFloat(this.meta.min) || 0;
                    const maxVal = parseFloat(this.meta.max) || 0;
                    const minSlider = document.querySelector('.min_slider');
                    const maxSlider = document.querySelector('.max_slider');
                    const minInput = document.querySelector('#min');
                    const maxInput = document.querySelector('#max');
                    const minLabel = document.querySelector('.rangeValuesMin');
                    const maxLabel = document.querySelector('.rangeValuesMax');
                    if (minSlider) {
                        minSlider.min = minVal;
                        minSlider.max = maxVal;
                        minSlider.value = minVal;
                    }
                    if (maxSlider) {
                        maxSlider.min = minVal;
                        maxSlider.max = maxVal;
                        maxSlider.value = maxVal;
                    }
                    if (minInput) {
                        minInput.value = minVal;
                    }
                    if (maxInput) {
                        maxInput.value = maxVal;
                    }
                    if (minLabel) {
                        minLabel.textContent = String(minVal);
                    }
                    if (maxLabel) {
                        maxLabel.textContent = String(maxVal);
                    }
                    // أطلق أحداث لتحديث الـ gradient والواجهة فورًا
                    if (minSlider) {
                        minSlider.dispatchEvent(new Event('input', {
                            bubbles: true
                        }));
                        minSlider.dispatchEvent(new Event('change', {
                            bubbles: true
                        }));
                    }
                    if (maxSlider) {
                        maxSlider.dispatchEvent(new Event('input', {
                            bubbles: true
                        }));
                        maxSlider.dispatchEvent(new Event('change', {
                            bubbles: true
                        }));
                    }
                },
                async fetchProductsHtml(page = 1) {
                    try {
                        const params = this.buildParams(page);
                        const res = await fetch('{{ URL::route('productsPagination') }}?' + params, {
                            headers: {
                                'Accept': 'application/json'
                            }
                        });
                        const json = await res.json();
                        if (json) {
                            this.productsHtml = json.products || '';
                            this.paginationHtml = json.pagination_dev || '';
                            this.pagination = json.pagination || this.pagination;
                            this.$nextTick(() => {
                                document.querySelectorAll('#pagination-form .page-link').forEach(a => {
                                    a.addEventListener('click', (ev) => {
                                        ev.preventDefault();
                                        let pageParam = 1;
                                        try {
                                            const linkUrl = new URL(a.href, window.location
                                                .origin);
                                            pageParam = parseInt(linkUrl.searchParams.get(
                                                'page')) || 1;
                                        } catch (e) {
                                            pageParam = parseInt(a.getAttribute('data-page')) ||
                                                1;
                                        }
                                        this.disableAutoLoadMoreForClick = true;
                                        this.scrollToProductsTop();
                                        setTimeout(() => {
                                            this.refresh(pageParam);
                                        }, 200);
                                    });
                                });
                            });
                        }
                    } catch (e) {
                        console.error('products fetch error', e);
                    }
                },
                onSortChange(event) {
                    this.filters.sort_by = event.target.value || 'recently';
                    this.refresh(1);
                },
                onSearchChange(event) {
                    this.filters.search = event.target.value || '';
                    this.refresh(1);
                },
                onBarcodeChange(event) {
                    this.filters.products_barcode = event.target.value || '';
                    this.refresh(1);
                },
                onFilterWrapperClick(event) {
                    const item = event.target.closest('.filter-content .item');
                    if (item) {
                        const id = String(item.getAttribute('data-id'));
                        const type = item.getAttribute('data-type');
                        const choice = item.getAttribute('data-choice');
                        if (type === 'categories') {
                            this.cascadeCategoryToggle(id);
                        } else {
                            this.toggleItem(type, id, choice);
                        }
                        this.refresh(1);
                        return;
                    }
                    // Clicking directly on the plus/minus icon or its container
                    const titleIcon = event.target.closest('.filter-title-icon');
                    if (titleIcon) {
                        const content = titleIcon.getAttribute('data-content');
                        this.toggleFilterSection(content);
                        return;
                    }
                    // Clicking anywhere on the header should also toggle the section
                    const header = event.target.closest(
                        ' .attributes-header, .offers-header, .brands-header, .categories-header, .choices-header, .tags-header'
                    );
                    if (header) {
                        const iconEl = header.querySelector('.filter-title-icon');
                        if (iconEl) {
                            const content = iconEl.getAttribute('data-content');
                            this.toggleFilterSection(content);
                        }
                    }
                },
                // اجمع جميع أبناء التصنيف (بما فيهم الأحفاد) اعتماداً على كلاس category-parent-<id>
                getCategoryDescendantsIds(parentId) {
                    const nodes = document.querySelectorAll(`.filterCategories .item.category-parent-${parentId}`);
                    const ids = Array.from(nodes).map(el => String(el.getAttribute('data-id'))).filter(Boolean);
                    // إزالة التكرارات
                    return Array.from(new Set(ids));
                },
                // عند اختيار الأب: أضف الأب وكل أبنائه، وعند إلغاءه: احذف الأب وكل أبنائه
                cascadeCategoryToggle(id) {
                    const descendants = this.getCategoryDescendantsIds(id);
                    const current = this.filters.categories || [];
                    const isActive = current.includes(id);
                    if (isActive) {
                        this.filters.categories = current.filter(cid => cid !== id && !descendants.includes(cid));
                    } else {
                        const union = new Set(current.concat([id]).concat(descendants));
                        this.filters.categories = Array.from(union);
                    }
                    // حدّث حالة فتح/إغلاق قسم التصنيفات بناءً على وجود عناصر محددة
                    this.$nextTick(() => this.initSectionOpenStates());
                },
                toggleFilterSection(content) {
                    let iconSelector = '.' + content + '-icon';
                    let contentSelector = '.' + content + '-content';
                    // Normalize choices-* to generic selectors used in DOM - REMOVED to support individual toggling
                    // if(content && content.startsWith('choices-')){
                    //     iconSelector = '.choices-icon';
                    //     contentSelector = '.choices-content';
                    // }
                    const icon = document.querySelector(iconSelector);
                    const contentDiv = document.querySelector(contentSelector);
                    if (!contentDiv) return;

                    const isHidden = contentDiv.classList.contains('d-none');
                    if (isHidden) {
                        contentDiv.classList.remove('d-none');
                        if (icon) {
                            icon.classList.add('rotated');
                        }
                    } else {
                        contentDiv.classList.add('d-none');
                        if (icon) {
                            icon.classList.remove('rotated');
                        }
                    }
                },
                clearSection(type) {
                    if (type === 'home') {
                        this.filters.home = '';
                    } else if (Array.isArray(this.filters[type])) {
                        this.filters[type] = [];
                    }
                    this.$nextTick(() => this.initSectionOpenStates());
                    this.refresh(1);
                },
                clearChoice(choiceId) {
                    const choice = (this.meta.choices || []).find(c => String(c.choices_id) === String(choiceId));
                    const subIds = new Set(((choice && choice.subchoices) || []).map(sc => String(sc.choices_id)));
                    this.filters.choices = (this.filters.choices || []).filter(id => !subIds.has(String(id)));
                    this.$nextTick(() => this.initSectionOpenStates());
                    this.refresh(1);
                },
                toggleItem(type, id, choiceId) {
                    if (type === 'home') {
                        this.filters.home = this.filters.home ? '' : '1';
                        return;
                    }
                    const arr = this.filters[type];
                    if (!Array.isArray(arr)) return;
                    const idx = arr.indexOf(id);
                    if (idx >= 0) {
                        arr.splice(idx, 1);
                    } else {
                        arr.push(id);
                    }
                },
                initializeFromQuery() {
                    const params = new URLSearchParams(window.location.search);
                    this.filters.search = params.get('title') || '';
                    this.filters.products_barcode = params.get('products_barcode') || '';
                    this.filters.sort_by = params.get('sort_by') || 'recently';
                    this.filters.home = params.get('home') || '';
                    this.filters.is_offers = params.get('is_offers') || '';
                    const toArray = (key) => {
                        const vals = params.getAll(key);
                        return vals.length ? vals.join(',').split(',').filter(Boolean) : [];
                    };
                    this.filters.categories = toArray('categories');
                    this.filters.attributes = toArray('products_attributes');
                    this.filters.choices = toArray('choices');
                    this.filters.offers = toArray('offers');
                    this.filters.brands = toArray('brands');
                    this.filters.tags = toArray('tags');
                    const price = params.get('price');
                    if (price == '1') {
                        this.filters.price = 1;
                        const qMin = params.get('min_price');
                        const qMax = params.get('max_price');
                        this.filters.min_price = qMin !== null ? qMin : '';
                        this.filters.max_price = qMax !== null ? qMax : '';
                        const minEl = document.querySelector('#min');
                        const maxEl = document.querySelector('#max');
                        if (minEl && this.filters.min_price !== undefined && this.filters.min_price !== null && this.filters
                            .min_price !== '') {
                            minEl.value = this.filters.min_price;
                        }
                        if (maxEl && this.filters.max_price !== undefined && this.filters.max_price !== null && this.filters
                            .max_price !== '') {
                            maxEl.value = this.filters.max_price;
                        }
                        const minSlider = document.querySelector('.min_slider');
                        const maxSlider = document.querySelector('.max_slider');
                        const hasMin = (this.filters.min_price !== undefined && this.filters.min_price !== null && this
                            .filters.min_price !== '');
                        const hasMax = (this.filters.max_price !== undefined && this.filters.max_price !== null && this
                            .filters.max_price !== '');
                        if (minSlider && hasMin) {
                            minSlider.value = this.filters.min_price;
                        }
                        if (maxSlider && hasMax) {
                            maxSlider.value = this.filters.max_price;
                        }
                        // حدّث الليبلز والـ gradient بدون الاعتماد على window.syncPriceSlider
                        const minLabel = document.querySelector('.rangeValuesMin');
                        const maxLabel = document.querySelector('.rangeValuesMax');
                        if (minLabel && hasMin) {
                            minLabel.textContent = String(this.filters.min_price);
                        }
                        if (maxLabel && hasMax) {
                            maxLabel.textContent = String(this.filters.max_price);
                        }
                        if (minSlider) {
                            minSlider.dispatchEvent(new Event('input', {
                                bubbles: true
                            }));
                            minSlider.dispatchEvent(new Event('change', {
                                bubbles: true
                            }));
                        }
                        if (maxSlider) {
                            maxSlider.dispatchEvent(new Event('input', {
                                bubbles: true
                            }));
                            maxSlider.dispatchEvent(new Event('change', {
                                bubbles: true
                            }));
                        }
                    } else {
                        this.filters.price = 0;
                    }

                    // دمج سياق الصفحة (تصنيف/علامة تجارية) في الفلاتر الابتدائية
                    if (this.activePage === 'categories' && this.initialCategoryId) {
                        const cid = String(this.initialCategoryId);
                        if (!this.filters.categories.includes(cid)) this.filters.categories.push(cid);
                    }
                    if (this.activePage === 'brands' && this.initialBrandId) {
                        const bid = String(this.initialBrandId);
                        if (!this.filters.brands.includes(bid)) this.filters.brands.push(bid);
                    }
                },
                filterByPrice(value) {
                    this.filters.price = value;
                    if (value === 1) {
                        const minEl = document.querySelector('#min');
                        const maxEl = document.querySelector('#max');
                        this.filters.min_price = minEl ? minEl.value : null;
                        this.filters.max_price = maxEl ? maxEl.value : null;
                    } else {
                        // إزالة فلتر السعر: أعد ضبط القيم وأرجع السلايدر للوضع الافتراضي حسب الميتا
                        this.filters.min_price = null;
                        this.filters.max_price = null;
                        this.resetPriceSliderToMeta();
                    }
                    this.refresh(1);
                },
                updatePaginationVisibility() {
                    const current = parseInt(this.pagination.current_page || 1);
                    const last = parseInt(this.pagination.last_page || 1);
                    const shouldHide = ((last !== current && current % 2 !== 0) || last <= 2);
                    const form = this.$refs.paginationForm || document.querySelector('#pagination-form');
                    if (form) {
                        if (shouldHide) {
                            form.classList.add('d-none');
                        } else {
                            form.classList.remove('d-none');
                        }
                    }
                    // اسمح بـ load more التلقائي فقط عندما تكون الصفحة الحالية فردية وباقي صفحات
                    this.stopLoadMore = shouldHide;
                },
                scrollToProductsTop() {
                    const productsDiv = this.$refs.productsContainer || document.querySelector('.products-div-container');
                    if (productsDiv) {
                        const top = Math.max(0, productsDiv.offsetTop - 100);
                        window.scrollTo({
                            top,
                            behavior: 'smooth'
                        });
                    } else {
                        window.scrollTo({
                            top: 0,
                            behavior: 'smooth'
                        });
                    }
                },
                onScrollLoadMore() {
                    if (this.disableAutoLoadMoreForClick || this.isLoadingMore) return;
                    const productsDiv = this.$refs.productsContainer || document.querySelector('.products-div-container');
                    if (!productsDiv) return;
                    const nearBottom = window.scrollY >= (productsDiv.offsetTop + productsDiv.offsetHeight - window
                        .innerHeight - 500);
                    if (nearBottom) {
                        if (this.stopLoadMore && (parseInt(this.pagination.last_page || 1) > parseInt(this.pagination
                                .current_page || 1))) {
                            this.stopLoadMore = false; // امنع تكرار الطلب
                            this.isLoadingMore = true;
                            this.loadMoreNext();
                        }
                    }
                },
                async loadMoreNext() {
                    try {
                        const nextPage = (parseInt(this.pagination.current_page || 1) + 1);
                        // حدّث عنوان الصفحة ليتوافق مع السلوك القديم
                        this.updateUrl(nextPage);
                        this.$refs.filterOverlay && (this.$refs.filterOverlay.style.display = 'block');
                        const params = this.buildParams(nextPage);
                        const res = await fetch('{{ URL::route('productsPagination') }}?' + params, {
                            headers: {
                                'Accept': 'application/json'
                            }
                        });
                        const json = await res.json();
                        if (json && json.products) {
                            // ألحِق منتجات الصفحة التالية بدل الاستبدال
                            this.productsHtml = (this.productsHtml || '') + (json.products || '');
                            // حدّث كائن الترقيم بالقيم الجديدة
                            this.pagination = json.pagination || this.pagination;
                            // أعد تقييم ظهور الـ pagination بناءً على زوجية الصفحة
                            this.updatePaginationVisibility();
                        }
                    } catch (e) {
                        console.error('load more next error', e);
                    } finally {
                        this.isLoadingMore = false;
                        this.$refs.filterOverlay && (this.$refs.filterOverlay.style.display = 'none');
                    }
                },
            }
        }
    </script>
@endpush