<layered-navigation
    attribute-src="{{ route('admin.catalog.products.get-filter-attributes', $category->id ?? null) }}"
    max-price-src="{{ route('admin.catalog.products.get-category-product-maximum-price', $category->id ?? null) }}">
</layered-navigation>
@push('scripts')
    <script type="text/x-template" id="layered-navigation-template">
        <div  class="item-section-filter-menu">
            <filter-attribute-item v-for='(attribute, index) in attributes'
                                   :attribute="attribute"
                                   :key="index"
                                   :index="index"
                                   :max-price-src="maxPriceSrc"
                                   @onFilterAdded="addFilters(attribute.code, $event)"
                                   :appliedFilterValues="appliedFilters[attribute.code]">
            </filter-attribute-item>
        </div>
    </script>

    <script type="text/x-template" id="filter-attribute-item-template">
        <div class="item-section-filter-brands">
            <h3 class="item-section-filter-brands-title"> @{{ attribute.name ? attribute.name : attribute.admin_name }}</h3>
            <div class="item-section-filter-brands-checkbox" v-if="attribute.type != 'price'">
                <div class="item-section-filter-element" v-for='(option, index) in attribute.options' v-bind:class="{'showed':isChecked(option)}">
                    <input class="checkbox" type="checkbox"
                           :id="option.id"
                           v-bind:value="option.id"
                           v-model="appliedFilters"
                           @change="addFilter($event)" />
                    <label :for="option.id" class="item-section-brand">@{{ option.label ? option.label : option.admin_name }}</label>
{{--                    <label :for="option.id" class="item-section-quantity">(52)</label>--}}
                </div>
            </div>
            <form class="item-section-filter-price-range item-section-filter-brands-checkbox" v-if="attribute.type == 'price'">
                <input type="text" placeholder="от" v-model="sliderConfig.value[0]">
                <span>—</span>
                <input type="text" placeholder="до" v-model="sliderConfig.value[1]">
                <button type="button" class="search-button" @click="priceRangeUpdated()">
                    <img src="{{bagisto_asset('icons/search.svg')}}" alt="Search">
                </button>
                <vue-slider
                    ref="slider"
                    v-model="sliderConfig.value"
                    :process-style="sliderConfig.processStyle"
                    :tooltip-style="sliderConfig.tooltipStyle"
                    :max="sliderConfig.max"
                    :lazy="true"
                    @change="priceRangeUpdated($event)">
                </vue-slider>
            </form>

        </div>
    </script>

    <script>
        Vue.component('layered-navigation', {
            template: '#layered-navigation-template',

            props: [
                'attributeSrc',
                'maxPriceSrc',
            ],

            data: function() {
                return {
                    appliedFilters: {},
                    attributes: [],
                };
            },

            created: function () {
                this.setFilterAttributes();

                this.setAppliedFilters();
                // console.log(this.appliedFilters);
            },

            methods: {

                setFilterAttributes: function () {
                    axios
                        .get(this.attributeSrc)
                        .then((response) => {
                            this.attributes = response.data.filter_attributes;
                        });
                },

                setAppliedFilters: function () {
                    let urlParams = new URLSearchParams(window.location.search);

                    urlParams.forEach((value, index) => {
                        this.appliedFilters[index] = value.split(',');
                    });
                },

                addFilters: function (attributeCode, filters) {
                    if (filters.length) {
                        this.appliedFilters[attributeCode] = filters;
                    } else {
                        delete this.appliedFilters[attributeCode];
                    }

                    this.applyFilter();
                },

                applyFilter: function () {
                    let params = [];

                    for(key in this.appliedFilters) {
                        if (key != 'page') {
                            params.push(key + '=' + this.appliedFilters[key].join(','));
                        }
                    }

                    window.location.href = "?" + params.join('&');
                }
            }
        });

        Vue.component('filter-attribute-item', {
            template: '#filter-attribute-item-template',

            props: [
                'index',
                'attribute',
                'appliedFilterValues',
                'maxPriceSrc',
            ],

            data: function() {
                return {
                    appliedFilters: [],
                    active: false,
                    sliderConfig: {
                        value: [0, 0],
                        max: 500,
                        processStyle: {
                            "backgroundColor": "#FF6472"
                        },
                        tooltipStyle: {
                            "backgroundColor": "#FF6472",
                            "borderColor": "#FF6472"
                        }
                    }
                }
            },

            created: function () {
                if (! this.index) this.active = true;

                if (this.appliedFilterValues && this.appliedFilterValues.length) {
                    this.appliedFilters = this.appliedFilterValues;

                    if (this.attribute.type == 'price') {
                        this.sliderConfig.value = this.appliedFilterValues;
                    }

                    this.active = true;
                }

                this.setMaxPrice();
            },

            methods: {
                isChecked(option) {
                    // console.log(this.appliedFilters);
                    // console.log('text',option.id);
                    return this.appliedFilters.includes(option.id.toString());
                },
                setMaxPrice: function () {
                    axios
                        .get(this.maxPriceSrc)
                        .then((response) => {
                            let maxPrice  = response.data.max_price;

                            this.sliderConfig.max = maxPrice ? ((parseInt(maxPrice) !== 0 || maxPrice) ? parseInt(maxPrice) : 500) : 500;
                        });
                },

                addFilter: function (e) {
                    this.$emit('onFilterAdded', this.appliedFilters);
                },

                priceRangeUpdated: function () {
                    this.appliedFilters = this.sliderConfig.value;
                    // console.log( this.appliedFilters);
                    // console.log(this.maxPriceFilter);
                    // console.log(this.minPriceFilter);

                    this.$emit('onFilterAdded', this.appliedFilters);
                },

                clearFilters: function () {
                    if (this.attribute.type == 'price') {
                        this.sliderConfig.value = [0, 0];
                    }

                    this.appliedFilters = [];

                    this.$emit('onFilterAdded', this.appliedFilters);
                }
            }
        });
    </script>
@endpush
