@php
    $channel = core()->getCurrentChannel();
@endphp
<!-- SEO Meta Content -->
@push('meta')
    <meta name="title" content="{{ $channel->home_seo['meta_title'] ?? '' }}" />
    <meta name="description" content="{{ $channel->home_seo['meta_description'] ?? '' }}" />
    <meta name="keywords" content="{{ $channel->home_seo['meta_keywords'] ?? '' }}" />
@endPush
@php
    $url = url()->current();
    $slug_url = explode('product-category/', $url);
    if (count($slug_url) > 1) {
        $slug_key = $slug_url[1];
    } else {
        $slug_key = '';
    }
@endphp
<x-shop::layouts>
    <x-slot:title>
        {{ $channel->home_seo['meta_title'] ?? '' }}
    </x-slot>
    <div>
        <div class="relative w-full flex items-center justify-center " style="height: 600px">
            <img class="aspect-[4/1] absolute object-cover w-full h-full "
                src="{{ str_replace('/storage', '', Storage::url('')) . str_replace('storage', 'cache/original', $bannerData['banner_img']) }}"
                alt="Recipies Image Failed" />
            <div
                class="absolute inset-0 bg-opacity-0 bg-[rgb(0,0,0,0.3)] flex items-center justify-center transition-all duration-300">
            </div>

            <div class="relative text-center text-white px-4 max-w-4xl mx-auto mt-6">
                <div class="flex justify-center">
                    <img src="{{ bagisto_asset('images/Heading.svg') }}"
                        class="h-[250px] sm:h-full md:h-[250px] absolute mx-auto -top-32" alt="the chef its you"
                        width="400" />
                </div>
    
                <div class="relative text-center text-white px-4 max-w-4xl mx-auto mt-6">
                    <div class="flex justify-center">
                        <img src="{{ bagisto_asset('images/Heading.svg') }}" class="h-[250px] sm:h-full md:h-[250px] absolute mx-auto -top-32"
                            alt="the chef its you" width="400" />
                    </div>
                    <div class="w-full max-w-[600px] px-10 flex flex-col">
                        <h1 class=" tracking-[16px] text-[66px] latest_recipes_title text-white  uppercase font-stritch ">
                            {{$bannerData['title']}}
                        </h1>
                        <span class="text-[16px] max-w-[458px] text-center font-[500] text-[#FFFFFF]">
                            {{ strip_tags($bannerData['short_description']) }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <v-category> </v-category>
    </div>
    @pushOnce('scripts')
        <script type="text/x-template" id="v-category-template">


            <div class="container px-[60px] max-lg:px-8 max-md:px-4 product_and_category_padding">
            <div class="flex w-full pt-3 justify-between 2xl:max-w-[95%] gap-2 mt-3 our_product_reduce_top_padding layout_flex_col">
                <div class="w-full flex justify-between">
                <v-filters @filter-applied="setFilters('filter', $event)" @filter-clear="clearFilters('filter', $event)"
                        :total_products="total_products">
                        <!-- Category Filter Shimmer Effect -->
                        <x-shop::shimmer.categories.filters />
                    </v-filters>
                </div>
                <div class="flex gap-1 item-center sort_by">
                <p class="text-[#303030] relative flex items-center font-[400] text-[18px] leading-[24px] w-[70px] font-bold">
                        Sort By: </p>
                  <div class="flex items-center">
                      @include('shop::categories.toolbar')
                     </div>   
                </div>

                </div>
                <div class="flex items-start gap-10 max-lg:gap-5 product_listing">
                    <!-- Product Listing Filters -->
            <!-- Parent Category -->
            <div class="flex flex-col w-full py-5 gap-10 min-h-[fit-content] w-[250px] category_width_full max-sm:w-full product_category_padding_reduce">
            <div class="flex flex-col gap-2">
                        <div class="flex justify-between cursor-pointer">
                            <span class="text-[20px]">
                            Category
                            </span>
                      </div>
                 <div  class="accordion-content bg-[#f0f0f0] block h-[120px] flex overflow-auto sm:h-[120px] md:h-full sm:flex sm:overflow-auto md:block lg:block">
                    <div v-if="categories_list.length" class="flex flex-col gap-2 font-semibold category_home_page_content category_content_display_row">
                        <div v-for="(pcat,pindex) in categories_list" class="div_width_full" >
                            <a @click="redirectToCategory(pcat.slug)">
                                <div
                                    class="flex form-group gap-3 items-start sm:max-w-[400px] md:max-w-full text-graypink cursor-pointer hover:text-black tracking-[3px] uppercase font-stritch text-left category_home_page_content">
                                    <input
                                        :id="pcat.name"
                                        type="checkbox"

                                        :checked="pcat.slug == compare_slug"
                                        :value="pcat.slug"
                                        class="min-w-4 min-h-4 mt-[2px] cursor-pointer border border-[#50a14f] bg-gray-100 text-white checked:accent-gray-800 accent-gray-800"
                                    />
                                    <label v-if="compare_slug===pcat.slug" class="text-black font-extrabold" >@{{
                                        pcat.name}}</label>
                                    <label class="flex gap-1 w-[95%]" id="categoryName" v-else>@{{ pcat.name }}</label>
                                    <span v-if="compare_slug===pcat.slug" ></span>
                                    <!-- <span v-else class="bg-[#7E7071] w-[1px] h-[20px] hover:bg-black hidden sm:block category_items"></span> -->
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
              </div>
            </div>
                    <!-- Product Listing Container -->
                    <div class="flex-1">
                        <!-- Desktop Product Listing Toolbar -->
                        <!-- <div class="max-md:hidden">
                                    @include('shop::categories.toolbar')
                                </div> -->

                        <!-- Product List Card Container -->
                        <div class="mt-8 grid grid-cols-1 category_list_page_search gap-6" v-if="filters.toolbar.mode === 'list'">
                            <!-- Product Card Shimmer Effect -->
                            <template v-if="isLoading">
                                <x-shop::shimmer.products.cards.list count="12" />
                            </template>

                            <!-- Product Card Listing -->
                            {!! view_render_event('bagisto.shop.categories.view.list.product_card.before') !!}

                            <template v-else>
                                <template v-if="products.length">
                                    <x-shop::products.card ::mode="'list'" :slug_url="$slug_key" v-for="product in products" />
                                </template>

                                <!-- Empty Products Container -->
                                <template v-else>
                                    <div
                                        class="m-auto grid w-full place-content-center items-center justify-items-center py-32 text-center">
                                        <img class="max-md:h-[100px] max-md:w-[100px] image_width_set_full"
                                            src="{{ bagisto_asset('images/thank-you.png') }}"
                                            alt="@lang('shop::app.categories.view.empty')" />

                                        <p class="text-xl max-md:text-sm" role="heading">
                                            @lang('shop::app.categories.view.empty')
                                        </p>
                                    </div>
                                </template>
                            </template>

                            {!! view_render_event('bagisto.shop.categories.view.list.product_card.after') !!}
                        </div>

                        <!-- Product Grid Card Container -->
                        <div v-else class="my-[60px] mb-6">
                            <!-- Product Card Shimmer Effect -->
                            <template v-if="isLoading">
                                <div
                                    class="grid grid-cols-3 gap-8 max-1060:grid-cols-2 max-md:justify-items-center max-md:gap-x-4">
                                    <x-shop::shimmer.products.cards.grid count="12" />
                                </div>
                            </template>

                            {!! view_render_event('bagisto.shop.categories.view.grid.product_card.before') !!}

                            <!-- Product Card Listing -->
                            <template v-else>
                                <template v-if="products.length">
                                    <div
                                        class="grid category_list_page lg:grid-cols-3 2xl:max-w-[90%] 2xl:mx-auto gap-8 md:gap-2 lg:gap-2 md:grid-cols-2 sm:grid-cols-2 max-md:justify-items-center max-md:gap-x-4">
                                        <x-shop::products.card ::mode="'grid'" :slug_url="$slug_key" v-for="product in products" />
                                    </div>

                                    <!-- Pagination UI -->
                                    <div class="flex justify-center items-center space-x-2 mt-10 paggination_flex_wrap"
                                        v-if="paginationLinks.length > 3">

                                        <div v-for="(link, index) in paginationLinks" :key="link.label">
                                            <!-- First Button (Index 0) with SVG -->
                                            <button v-if="index === 0"
                                                class="text-[17px] font-[400] flex justify-center items-center w-[40px] h-[40px] rounded-full hover:text-[#FFFF] hover:bg-gray-400"
                                                :class="link.active ? 'text-[#FFFF] bg-[#121F2C]' : 'border border-[#121F2C1A] text-[#121F2C]'"
                                                @click="loadPage(link)">
                                                <svg width="7" height="10" class="transform rotate-180" viewBox="0 0 7 10"
                                                    fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path
                                                        d="M1.675 0L0.5 1.175L4.31667 5L0.5 8.825L1.675 10L6.675 5L1.675 0Z"
                                                        fill="#121F2C" />
                                                </svg>
                                            </button>

                                            <!-- Middle Buttons (Without SVG) -->
                                            <button v-else-if="index > 0 && index < paginationLinks.length - 1"
                                                class="text-[17px] font-[400] flex justify-center items-center w-[40px] h-[40px] rounded-full hover:text-[#FFFF] hover:bg-gray-400"
                                                :class="link.active ? 'text-[#FFFF] bg-[#121F2C]' : 'border border-[#121F2C1A] text-[#121F2C]'"
                                                @click="loadPage(link)">
                                                @{{ link.label }}
                                            </button>

                                            <!-- Last Button with SVG -->
                                            <button v-else-if="index === paginationLinks.length - 1"
                                                class="text-[17px] font-[400] flex justify-center items-center w-[40px] h-[40px] rounded-full hover:text-[#FFFF] hover:bg-gray-400"
                                                :class="link.active ? 'text-[#FFFF] bg-[#121F2C]' : 'border border-[#121F2C1A] text-[#121F2C]'"
                                                @click="loadPage(link)">
                                                <svg width="7" height="10" viewBox="0 0 7 10" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <path
                                                        d="M1.675 0L0.5 1.175L4.31667 5L0.5 8.825L1.675 10L6.675 5L1.675 0Z"
                                                        fill="#121F2C" />
                                                </svg>
                                            </button>
                                        </div>


                                    </div>


                                </template>

                                <!-- Empty Products Container -->
                                <template v-else>
                                    <div
                                        class="m-auto grid w-full place-content-center items-center justify-items-center py-32 text-center">
                                        <img class="max-md:h-[100px] max-md:w-[100px]"
                                            src="{{ bagisto_asset('images/thank-you.png') }}"
                                            alt="@lang('shop::app.categories.view.empty')" />

                                        <p class="text-xl max-md:text-sm" role="heading">
                                            @lang('shop::app.categories.view.empty')
                                        </p>
                                    </div>
                                </template>
                            </template>

                            {!! view_render_event('bagisto.shop.categories.view.grid.product_card.after') !!}
                        </div>

                        {!! view_render_event('bagisto.shop.categories.view.load_more_button.before') !!}

                        <!-- Load More Button -->
                        <!-- <button
                                class="secondary-button mx-auto mt-14 block w-max rounded-2xl px-11 py-3 text-center text-base max-md:rounded-lg max-sm:mt-6 max-sm:px-6 max-sm:py-1.5 max-sm:text-sm"
                                @click="loadMoreProducts" v-if="links.next && ! loader">
                                @lang('shop::app.categories.view.load-more')
                            </button> -->

                        <!-- <button v-else-if="links.next"
                                class="secondary-button mx-auto mt-14 block w-max rounded-2xl px-[74.5px] py-3.5 text-center text-base max-md:rounded-lg max-md:py-3 max-sm:mt-6 max-sm:px-[50.8px] max-sm:py-1.5">
                                <img class="h-5 w-5 animate-spin text-[#121F2C]" src="{{ bagisto_asset('images/spinner.svg') }}"
                                    alt="Loading" />
                            </button> -->

                        {!! view_render_event('bagisto.shop.categories.view.grid.load_more_button.after') !!}
                    </div>
                </div>
            </div>
        </script>
        <script type="module">
            app.component('v-category', {
                template: '#v-category-template',
                props: ["slug", "category"],
                data() {
                    return {
                        isMobile: window.innerWidth <= 767,

                        isLoading: true,

                        compare_slug: this.slug,

                        isDrawerActive: {
                            toolbar: false,

                            filter: false,
                        },

                        filters: {
                            toolbar: {},

                            filter: {},
                        },

                        products: [],

                        links: {},

                        loader: false,

                        categories_list: [],

                        subcategory_loader: false,
                        total_products: 0,
                        paginationLinks: [],

                        isOpen: '', // Track whether the accordion is open or closed
                    }
                },

                computed: {
                    queryParams() {
                        let queryParams = Object.assign({}, this.filters.filter, this.filters.toolbar);

                        return this.removeJsonEmptyValues(queryParams);
                    },

                    queryString() {
                        return this.jsonToQueryString(this.queryParams);
                    },
                },
                mounted() {
                    this.get();
                    this.getProducts();

                    console.log("categories_list", this.categories_list)
                    console.log("subcategories_list", this.subcategories_list)

                    window.addEventListener('scroll', () => {
                        const overlay = document.getElementById('header_overlay');

                        if (overlay) {
                            window.addEventListener('scroll', function() {
                                const scrollPosition = window.scrollY || document.documentElement
                                    .scrollTop;

                                if (scrollPosition >= 5) {
                                    overlay.classList.add('header-onscroll');
                                } else {
                                    overlay.classList.remove('header-onscroll');
                                }
                            });
                        } else {}
                    });
                },


                watch: {
                    queryParams() {
                        this.getProducts();
                    },
                    queryString() {
                        window.history.pushState({}, '', '?' + this.queryString);
                    },
                },

                methods: {

                    redirectToSubCategory(slug) {
                        window.location.href =
                            `{{ route('shop.products_or_category.index', '') }}/${this.compare_slug}/${slug}`
                    },

                    redirectToCategory(slug) {

                        window.location.href = `{{ route('shop.products_or_category.index', '') }}/${slug}`

                    },

                    get() {
                        this.subcategory_loader = true;
                        this.$axios.get("{{ route('shop.api.products.menu.categories') }}")
                            .then(response => {
                                this.isLoading = false;
                                this.categories = response.data.data;
                                this.categories_list = response.data.data?.categories;
                                const currentCategoryID = this.categories_list.filter(item => item.slug === this
                                    .slug);
                                const compare_category_slug = this.categories_list.filter(item => item.slug ===
                                    this.slug)
                                this.compare_slug = JSON.parse(this.category)?.parent_id == 1 ? this.slug : this
                                    .categories_list.filter(item => item.id === JSON.parse(this.category)
                                        ?.parent_id)[0]?.slug


                            }).catch(error => {
                                console.log(error);
                                this.isLoading = false;
                            });


                    },
                    setFilters(type, filters) {
                        this.filters[type] = filters;
                    },

                    clearFilters(type, filters) {
                        this.filters[type] = {};
                    },

                    getProducts() {
                        this.isDrawerActive = {
                            toolbar: false,
                            filter: false,
                        };
                        this.$axios.get(
                                "{{ route('shop.api.products.index') }}", {
                                    params: this.queryParams
                                })
                            .then(response => {
                                this.isLoading = false;
                                this.products = response.data.data;
                                console.log("products", this.products)
                                this.links = response.data.links;
                                this.total_products = response.data.meta.total;
                                this.paginationLinks = response.data.meta.links;
                            }).catch(error => {
                                console.log(error);
                            });
                    },

                    loadMoreProducts() {
                        if (!this.links.next) {
                            return;
                        }

                        this.loader = true;

                        this.$axios.get(this.links.next)
                            .then(response => {
                                this.loader = false;

                                this.products = [...this.products, ...response.data.data];

                                this.links = response.data.links;
                            }).catch(error => {
                                console.log(error);
                            });
                    },
                    loadPage(link) {
                        if (!link?.url) {
                            return;
                        } else {
                            this.isLoading = true;
                            this.$axios.get(link?.url)
                                .then(response => {


                                    this.products = response.data.data;

                                    this.paginationLinks = response.data.meta.links;

                                    this.isLoading = false;

                                }).catch(error => {
                                    console.log(error);
                                });
                        }
                    },

                    removeJsonEmptyValues(params) {
                        Object.keys(params).forEach(function(key) {
                            if ((!params[key] && params[key] !== undefined)) {
                                delete params[key];
                            }

                            if (Array.isArray(params[key])) {
                                params[key] = params[key].join(',');
                            }
                        });

                        return params;
                    },

                    jsonToQueryString(params) {
                        let parameters = new URLSearchParams();

                        for (const key in params) {
                            parameters.append(key, params[key]);
                        }

                        return parameters.toString();
                    },
                    
                },
            });
        </script>
    @endPushOnce

    @pushOnce('scripts')
        <!-- Filters Vue template -->
        <script type="text/x-template" id="v-filters-template">
            <!-- Filter Shimmer Effect -->
            <template v-if="isLoading">
                <div></div>
            </template>

            <!-- Filters Container -->
            <template v-else>
                <div class="panel-side w-full journal-scroll grid max-h-[1320px] grid-cols-[1fr] ">
                    <!-- Filters Header Container -->
                    <div class="flex h-[50px] items-center justify-between our_product_remove_bottom_padding">

                        <p v-if="total_products" class="text-[#303030] font-[400] text-[18px] leading-[24px]">
                            We have @{{total_products}} products for you
                        </p>
                        <p v-else></p>

                        <p
                            class="text-[#303030] relative flex justify-end gap-1 items-center font-bold text-[18px] leading-[24px]">
                            @lang('shop::app.categories.filters.filters')

                            <svg @click.stop="toggleFilterDropdown"  v-if="!showing_filter" class="cursor-pointer "
                                width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 6V18" stroke="#161616" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M6 12H18" stroke="#161616" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            <svg @click="showing_filter = !showing_filter" v-if="showing_filter" class="cursor-pointer "
                                width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M6 12H18" stroke="#161616" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>


                        <div ref="filterDropdown" class="absolute top-[25px] p-[15px] right-0 bg-[#f0f0f0] min-w-[345px] z-[99]"
                            v-if="showing_filter">
                            
                            <v-filter-item ref="filterItemComponent" :key="filterIndex" :filter="filter"
                                v-for='(filter, filterIndex) in filters.available'
                                @values-applied="applyFilter(filter, $event)">
                            </v-filter-item>
                            <p class="cursor-pointer text-[#121f2c] text-[14px] font-[400] hover:text-gray-500 border-b border-[#121f2c] w-[fit-content]"
                            tabindex="0"
                            @click="clear()">
                                @lang('shop::app.categories.filters.clear-all')
                            </p>
                        </div>


                        </p>

                    </div>

                    <!-- Filters Items Vue Component -->


                </div>
            </template>
        </script>

        <!-- Filter Item Vue template -->
        <script type="text/x-template" id="v-filter-item-template">
            <template v-if="filter.type === 'price' || filter.options.length">
                    <x-shop::accordion class="last:border-b-0">
                        <!-- Filter Item Header -->
                        <x-slot:header class="px-0 py-2.5 max-sm:!pb-1.5">
                            <div class="flex items-center justify-between">
                                <p class="text-lg font-semibold max-sm:text-base max-sm:font-medium">
                                    @{{ filter.name }}
                                </p>
                            </div>
                        </x-slot>

                        <!-- Filter Item Content -->
                        <x-slot:content class="p-[15px]">
                            <!-- Price Range Filter -->
                            <ul v-if="filter.type === 'price'">
                                <li>
                                    <v-price-filter
                                        :key="refreshKey"
                                        :default-price-range="appliedValues"
                                        @set-price-range="applyValue($event)"
                                    >
                                    </v-price-filter>
                                </li>
                            </ul>

                            <!-- Checkbox Filter Options -->
                            <ul class="pb-3 text-base text-gray-700" v-else>
                                <li
                                    :key="option.id"
                                    v-for="(option, optionIndex) in filter.options"
                                >
                                    <div class="flex select-none items-center gap-x-4 rounded hover:bg-gray-100 max-sm:gap-x-1 max-sm:!p-0 ltr:pl-2 rtl:pr-2">
                                        <input
                                            type="checkbox"
                                            :id="'option_' + option.id"
                                            class="peer hidden"
                                            :value="option.id"
                                            v-model="appliedValues"
                                            @change="applyValue"
                                        />

                                        <label
                                            class="icon-uncheck peer-checked:icon-check-box cursor-pointer text-2xl text-[#121F2C] peer-checked:text-[#121F2C] max-sm:text-xl"
                                            role="checkbox"
                                            aria-checked="false"
                                            :aria-label="option.name"
                                            :aria-labelledby="'label_option_' + option.id"
                                            tabindex="0"
                                            :for="'option_' + option.id"
                                        >
                                        </label>

                                        <label
                                            class="w-full cursor-pointer p-2 text-base text-gray-900 max-sm:p-1 max-sm:text-sm ltr:pl-0 rtl:pr-0"
                                            :id="'label_option_' + option.id"
                                            :for="'option_' + option.id"
                                            role="button"
                                            tabindex="0"
                                        >
                                            @{{ option.name }}
                                        </label>
                                    </div>
                                </li>
                            </ul>
                        </x-slot>
                    </x-shop::accordion>
                </template>
            </script>

        <script type="text/x-template" id="v-price-filter-template">
            <div>
                    <!-- Price range filter shimmer -->
                    <template v-if="isLoading">
                        <x-shop::shimmer.range-slider />
                    </template>

                    <template v-else>
                        <x-shop::range-slider
                            ::key="refreshKey"
                            default-type="price"
                            ::default-allowed-max-range="allowedMaxPrice"
                            ::default-min-range="minRange"
                            ::default-max-range="maxRange"
                            @change-range="setPriceRange($event)"
                        />
                    </template>
                </div>
            </script>

        <script type='module'>
            app.component('v-filters', {
                template: '#v-filters-template',
                props: ["total_products"],
                data() {
                    return {
                        isLoading: true,

                        filters: {
                            available: {},

                            applied: {},
                        },
                        showing_filter: false
                    };
                },

                mounted() {
                    this.getFilters();

                    this.setFilters();
                    console.log("HAllo ggg !!");
                    // Add click event listener for outside clicks
                    window.addEventListener('click', this.handleOutsideClick);
                },

                methods: {
                    handleOutsideClick(event) {
            const dropdown = this.$refs.filterDropdown;
            
            // Check if the clicked element is outside the dropdown
            if (dropdown && !dropdown.contains(event.target)) {
                this.showing_filter = false;
            }
        },
        toggleFilterDropdown() {
            this.showing_filter = !this.showing_filter;
        },
                    getFilters() {
                        this.$axios.get(`{{ route('shop.api.categories.attributes') }}`, {
                                params: {
                                    category_id: "{{ isset($category) ? $category->id : '' }}",
                                }
                            })
                            .then((response) => {
                                this.isLoading = false;

                                this.filters.available = response.data.data;
                            })
                            .catch((error) => {
                                console.log(error);
                            });
                    },

                    setFilters() {
                        
                        let queryParams = new URLSearchParams(window.location.search);

                        queryParams.forEach((value, filter) => {
                            /**
                             * Removed all toolbar filters in order to prevent key duplication.
                             */
                            if (!['sort', 'limit', 'mode'].includes(filter)) {
                                this.filters.applied[filter] = value.split(',');
                            }
                        });

                        this.$emit('filter-applied', this.filters.applied);
                    },

                    applyFilter(filter, values) {
                        if (values.length) {
                            const cleanedValues = values
                                .split(',')
                                .map(value => Math.floor(Number(value
                                    .trim())));
                            this.filters.applied[filter.code] = cleanedValues;
                        } else {
                            delete this.filters.applied[filter.code];
                        }

                        this.$emit('filter-applied', this.filters.applied);
                    },

                    clear() {
                        /**
                         * Clearing parent component.
                         */
                        this.filters.applied = {};

                        /**
                         * Clearing child components. Improvisation needed here.
                         */
                        this.$refs.filterItemComponent.forEach((filterItem) => {
                            if (filterItem.filter.code === 'price') {
                                filterItem.$data.appliedValues = null;
                            } else {
                                filterItem.$data.appliedValues = [];
                            }
                        });

                        this.$emit('filter-applied', this.filters.applied);
                    },
                },
            });

            app.component('v-filter-item', {
                template: '#v-filter-item-template',

                props: ['filter'],

                data() {
                    return {
                        active: true,

                        appliedValues: null,

                        refreshKey: 0,
                    }
                },

                watch: {
                    appliedValues() {
                        if (this.filter.code === 'price' && !this.appliedValues) {
                            ++this.refreshKey;
                        }
                    },
                },

                mounted() {
                    if (this.filter.code === 'price') {
                        /**
                         * Improvisation needed here for `this.$parent.$data`.
                         */
                        this.appliedValues = this.$parent.$data.filters.applied[this.filter.code]?.join(',');

                        ++this.refreshKey;

                        return;
                    }

                    /**
                     * Improvisation needed here for `this.$parent.$data`.
                     */
                    this.appliedValues = this.$parent.$data.filters.applied[this.filter.code] ?? [];
                },

                methods: {
                    applyValue($event) {
                        if (this.filter.code === 'price') {
                            this.appliedValues = $event;

                            this.$emit('values-applied', this.appliedValues);

                            return;
                        }

                        this.$emit('values-applied', this.appliedValues);
                    },
                },
            });

            app.component('v-price-filter', {
                template: '#v-price-filter-template',

                props: ['defaultPriceRange'],

                data() {
                    return {
                        refreshKey: 0,

                        isLoading: true,

                        allowedMaxPrice: 100,

                        priceRange: this.defaultPriceRange ?? [0, 100].join(','),
                    };
                },

                computed: {
                    minRange() {
                        let priceRange = this.priceRange.split(',');

                        return priceRange[0];
                    },

                    maxRange() {
                        let priceRange = this.priceRange.split(',');

                        return priceRange[1];
                    }
                },

                mounted() {
                    this.getMaxPrice();
                },

                methods: {
                    getMaxPrice() {
                        this.$axios.get(`{{ route('shop.api.categories.max_price', $category->id ?? '') }}`)
                            .then((response) => {
                                this.isLoading = false;

                                /**
                                 * If data is zero, then default price will be displayed.
                                 */
                                if (response.data.data.max_price) {
                                    this.allowedMaxPrice = response.data.data.max_price;
                                }

                                if (!this.defaultPriceRange) {
                                    this.priceRange = [0, this.allowedMaxPrice].join(',');
                                }

                                ++this.refreshKey;
                            })
                            .catch((error) => {
                                console.log(error);
                            });
                    },

                    setPriceRange($event) {
                        this.priceRange = [$event.minRange, $event.maxRange].join(',');

                        this.$emit('set-price-range', this.priceRange);
                    },
                },
            });
        </script>
    @endPushOnce







</x-shop::layouts>