﻿function addSpaces(el, inpBl){
    if(el) {
        let spEl = "";
        if(isNaN(el.value)) {
            el.value = el.value.toString().replace(/[^0-9.]/g, '');
        }
        spEl =+ el.value;
        let simbolPlus = '';
        if(inpBl.innerHTML.replace(' ','') == el.value+'+' || Number(el.getAttribute('valuebeforechange')) > Number(el.getAttribute('maxbytable'))) {
            simbolPlus = '+';
        }
        spEl = spEl.toString().replace(/(\d)(?=(\d{3})+(\D|$))/g, '$1 ');
        inpBl.innerHTML = spEl+simbolPlus;
        return inpBl;
    }
}

function showInpBlock(a, b){
    a.style.display = "none";
    b.style.display = "block";
    b.style.color = "#000";
}

function hideValBlock(a, b){
    a.style.display = "none";
    b.style.display = "block";
    b.focus();
}
document.addEventListener('DOMContentLoaded', setQuizRangeValues);

let quizBlock = document.querySelector('.quiz');
let inputQuizNum, inputQuizRangeSum, inputQuizDays, inputQuizRangeDays, searchButton, loadSearchButton;

let resetButtonShowing = false;
let multiselectCounterInit = false;

let defaultQuizNum = null;
let defaultQuizDays = null;

if (quizBlock) {
    inputQuizNum = quizBlock.querySelector('.inputQuizNum');
    inputQuizRangeSum = quizBlock.querySelector('.inputQuizRangeSum');
    inputQuizDays = quizBlock.querySelector('.inputQuizDays');
    inputQuizRangeDays = quizBlock.querySelector('.inputQuizRangeDays');

    searchButton = quizBlock.querySelector('button.search-btn');
    loadSearchButton = quizBlock.querySelector('div.search-btn');
}

if (inputQuizNum) {
    defaultQuizNum = inputQuizNum.value;

    formattedNumberInputAction(inputQuizNum);
    initQuizInput(inputQuizNum);

    inputQuizNum.addEventListener('change',function(){
        setQuizInputRangeValue(inputQuizNum);
        updateFilters(0, 'quizRangeSum', inputQuizNum.value);
    });

    if (inputQuizRangeSum) {
        inputQuizRangeSum.addEventListener('change',function(){
            updateFilters(0, 'quizRangeSum', inputQuizRangeSum.value);
        });
    }
}

if (inputQuizDays) {
    defaultQuizDays = inputQuizDays.value;

    formattedNumberInputAction(inputQuizDays);
    initQuizInput(inputQuizDays);
    inputQuizDays.addEventListener('change',function(){
        setQuizInputRangeValue(inputQuizDays);
        updateFilters(0, 'quizRangePeriod', inputQuizRangeDays.value);
    });
    inputQuizRangeDays.addEventListener('change',function(){
        updateFilters(0, 'quizRangePeriod', inputQuizRangeDays.value);
    });
}

let setFilters = {
    listings : {},
    options: {},
    quizRangeSum: {},
    otherFiltersNames: []
}

if (quizBlock) {
    initSelect();
    initQuickFilters();
    initAllFiltersShowing();
    initShowingSelect();
    initMultiselect();
    initResetButton();
    initSearchButton();
    initCurrencySelect();
}

let filtersWithFoundData = JSON.parse(JSON.stringify(setFilters));

let lastFoundData = null;

function updateFilters(filterId, type, value) {

    showResetButton();

    if (!setFilters[type] && type != 'quizRangeSum' && type != 'quizRangePeriod') {
        setFilters['otherFiltersNames'].push(type);
        setFilters[type] = {};
    }

    if (type == 'quizRangeSum' || type == 'quizRangePeriod') {
        setFilters[type] = value;
    } else if (setFilters[type][filterId]) {
        setFilters[type][filterId] = value;
    } else {
        Object.assign(setFilters[type], {[filterId]: value});
    }

    searchButton.classList.add('hiddenStyle');
    loadSearchButton.classList.remove('hiddenStyle');

    cardsDefaultLoad('filter-count', (data) => {
        let cardsCount = data.count;
        cardsCount += data.nextPage > 0 ? data.nextPage : 0;

        if (cardsCount > 0) {
            searchButton.querySelector('.search-btn-count').innerHTML = cardsCount;
            lastFoundData = data;
            filtersWithFoundData = JSON.parse(JSON.stringify(setFilters));

        } else {
            searchButton.querySelector('.search-btn-count').innerHTML = ' похожие';
        }

        searchButton.classList.remove('hiddenStyle');
        loadSearchButton.classList.add('hiddenStyle');
    });
}

function initSearchButton() {
    searchButton.addEventListener('click', () => {
        window.HAS_QUIZ_PARAMS = true;
        window.NUMBER_PAGE = 1;

        setTimeout(function () {
            quizBlock.querySelectorAll('.filters-category.active').forEach(item => {item.classList.remove('active')});
            quizBlock.querySelector('.show-more-filters.active')?.click();
        }, 1000);

        if (lastFoundData) {
            loadCards(lastFoundData);
            setFilters = JSON.parse(JSON.stringify(filtersWithFoundData));
            return;
        }

        cardsDefaultLoad('filter-count', loadCards);
    })

    function loadCards(data) {
        let [day, month, year] = getCurrentDate();
        let countOfCards = Number(data['count']);
        if(data['nextPage'] > 0) {
            countOfCards = Number(data['count']) + Number(data['nextPage']);
        }
        let countOffers = wordDeclension(countOfCards, [' предложение ', ' предложения ', ' предложений ']);
        window.cards_count = countOfCards;
        $$('.quiz-count-cards')[0].innerHTML = 'Подобрано ' + countOfCards + ' ' + countOffers + ' на ' +  day + '.' + month + '.' + year;
        $$('.offers-list')[0].innerHTML = data['code'];
        document.getElementsByClassName('sort')[0].scrollIntoView({behavior: "smooth"});

        updateCardsLoadButton(data['nextPage']);
        addCardsBtnsEvents();

        // cardsDefaultLoad('sorting');
    }
}


function initQuickFilters() {
    quizBlock.querySelectorAll('.quick-filter').forEach(item => {
        item.addEventListener('click', () => {
            item.classList.toggle('active');

            updateFilters(
                item.dataset.filterId,
                item.dataset.filterBy,
                item.classList.contains('active') ? item.dataset.listing : 0
            )
        })
    })
}

function initAllFiltersShowing() {
    let allFiltersBlock = quizBlock.querySelector('.quiz-filters-all');
    let showFiltersBtn = quizBlock.querySelector('.show-more-filters');

    if (!showFiltersBtn) {
        return;
    }

    showFiltersBtn.addEventListener('click', () => {
        showFiltersBtn.classList.toggle('active');
        allFiltersBlock.classList.toggle('active');

        quizBlock.querySelectorAll('.filters-category.active').forEach(item => {item.classList.remove('active')});

        if (!multiselectCounterInit) {
            initMultiselectCounter();
        }
    })
}

function initShowingSelect() {
    quizBlock.querySelectorAll('.filters-category-header').forEach((item, index, items) => {
        let categoryFilter = item.parentElement;
        let multiselect = categoryFilter.querySelector('.category-multi-select');

        let selectCount = item.querySelector('.select-count');
        let selectStatus = item.querySelector('.select-status');

        let defaultLeftValue = null;

        item.addEventListener('click', () => {
            if (!categoryFilter.classList.contains('active')) {
                items.forEach(item => {item.parentElement.classList.remove('active')})
            }

            categoryFilter.classList.toggle('active');

            if (categoryFilter.classList.contains('active') && multiselect) {
                if (defaultLeftValue === null) {
                    defaultLeftValue = selectCount.style.left;
                }

                if (+selectCount.style.left.replace('px', '') < selectStatus.offsetWidth + 30) {
                    selectCount.style.left = selectStatus.offsetWidth + 30 + 'px';
                }
            } else if (multiselect) {
                selectCount.style.left = defaultLeftValue;
            }
        })

        document.addEventListener('click', (event) => {
            if (event.target.closest('.filters-category') == null && quizBlock.querySelectorAll('.filters-category.active').length !== 0) {
                quizBlock.querySelectorAll('.filters-category.active .filters-category-header').forEach(item => {
                    item.dispatchEvent(new Event('click'));
                })
            }
        })
    })
}

function initSelect() {
    quizBlock.querySelectorAll('.filters-category-select').forEach(select => {
        let filtersCategory = select.parentElement;

        select.querySelectorAll('li').forEach((item, index, items) => {
            item.addEventListener('click', () => {
                items.forEach(item => item.classList.remove('hiddenStyle'));
                item.classList.add('hiddenStyle');
                filtersCategory.classList.add('selected');
                filtersCategory.classList.remove('active');
                filtersCategory.querySelector('.select-status').innerHTML = item.innerHTML;

                if (select.dataset.customType && setFilters[select.dataset.customType] && setFilters[select.dataset.customType][select.dataset.filterId]) {
                    setFilters[select.dataset.customType][select.dataset.filterId] = '';
                }

                if (item.dataset.type) {
                    //записываем название последнего установленного фильтра на select для правильного обнуления
                    select.dataset.customType = item.dataset.type;
                    updateFilters(select.dataset.filterId, item.dataset.type, item.dataset.listing);
                } else if (select.dataset.filterBy) {
                    updateFilters(select.dataset.filterId, select.dataset.filterBy, item.dataset.listing);
                } else {
                    updateFilters(select.dataset.filterId, 'listings', item.dataset.listing);
                }
            })
        })
    })
}
function initMultiselect() {
    initMultiselectCounter();

    quizBlock.querySelectorAll('.category-multi-select').forEach(item => {
        let checkboxes = item.querySelectorAll('input');
        let selectStatus = item.parentElement.querySelector('.select-status');
        let selectCount = item.parentElement.querySelector('.select-count');

        let border = item ? item.querySelector('.border') : null;

        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('change', () => {
                let checkedBoxes = Array.from(checkboxes).filter(checkbox => checkbox.checked);

                Array.from(item.querySelectorAll('.filter-checkbox'))
                    .reverse()
                    .filter(checkbox => checkbox.querySelector('input').checked)
                    .forEach((checkbox) => {
                        item.prepend(checkbox);
                    });

                let firstUnchecked = item.querySelector('input:not(:checked)')
                if (firstUnchecked && checkedBoxes.length) {
                    border.classList.remove('hiddenStyle');
                    border.after(firstUnchecked.parentElement);
                } else {
                    border.classList.add('hiddenStyle');
                }

                if (checkedBoxes.length) {
                    selectStatus.innerHTML = 'Выбрано';

                    selectCount.classList.add('active');
                    selectCount.innerHTML = checkedBoxes.length;

                } else {
                    selectStatus.innerHTML = 'Выберите';

                    selectCount.classList.remove('active');
                }

                let options = checkedBoxes.map(checkbox => checkbox.dataset.option);
                updateFilters(item.dataset.filterId, item.dataset.filterBy, options);
            })
        })
    })
}

function initMultiselectCounter() {
    quizBlock.querySelectorAll('.select-count').forEach(item => {
        let addPx = 30;

        item.style.left = item.parentElement.querySelector('.select-title').offsetWidth + addPx + 'px';
    })
}

function initResetButton() {
    let resetButton = quizBlock.querySelector('.reset-button');

    resetButton.addEventListener('click', () => {
        // временно
        location.reload();
        return;


        // reset filters
        quizBlock.querySelectorAll('input').forEach(item => {item.checked = false;})
        quizBlock.querySelectorAll('.active').forEach(item=> {item.classList.remove('active')})
        quizBlock.querySelectorAll('.selected').forEach(item=> {item.classList.remove('selected')})
        quizBlock.querySelectorAll('.border').forEach(item=> {item.classList.add('hiddenStyle')})

        if (inputQuizRangeSum) {
            inputQuizRangeSum.value = defaultQuizNum;
            inputQuizRangeSum.dispatchEvent(new Event('input'));
        }

        if (inputQuizRangeDays) {
            inputQuizRangeDays.value = defaultQuizDays;
            inputQuizRangeDays.dispatchEvent(new Event('input'));
        }

        setFilters = {
            listings : {},
            options: {}
        }

        resetButton.classList.add('hiddenStyle');
    })

}

function showResetButton() {
    if (!resetButtonShowing) {
        quizBlock.querySelector('.reset-button').classList.remove('hiddenStyle');
    }
}

function setQuizRangeValues() {
    if (!quizBlock) return;

    let quizNumInput = quizBlock.querySelectorAll('.quiz-num-value');
    let quizRangeInput = quizBlock.querySelectorAll('.quiz-range-value');

    if (!quizNumInput.length || !quizRangeInput.length) {
        return;
    }

    quizRangeInput.forEach(input => {
        input.addEventListener('input', quizInpChange)
    });
    quizNumInput.forEach(input => {
        input.addEventListener('input', quizInpChange)
    });
    for (let i = 0; i < quizNumInput.length; i++) {
        quizRangeInput[i].style.backgroundSize = (quizRangeInput[i].value - quizRangeInput[i].min) * 100  / (quizRangeInput[i].max - quizRangeInput[i].min) + '% 100%';
    }
}
function quizInpChange(e) {
    let target = e.target;
    let val = parseInputNumber(target.value);
    let min = target.min ? target.min : target.dataset.min;
    let max = target.max ? target.max : target.dataset.max;
    if (e.target.type == 'range') {
        let formattedValue = getFormattedNumber(val, max);

        if (val >= max) {
            formattedValue += '+';
        }

        target.parentElement.getElementsByClassName('quiz-num-value')[0].value = formattedValue;
        setRepeatBlock(target.parentElement.querySelector('.quiz-num-repeat'), formattedValue);
    } else {
        target = target.parentElement.getElementsByClassName('quiz-range-value')[0];
        if(val == '') {
            val = 0;
        }
        target.value = val;
    }
    let backgroundSize = (val - min) * 100 / (max - min);

    if (backgroundSize < 0) {
        backgroundSize = 0
    }

    target.style.backgroundSize = backgroundSize + '% 100%';
}

function addQuizInputsParams(params) {
    if($$('.inputQuizNum').length != 0) {
        if ($$('.inputQuizNum')[0].name) {
            params[$$('.inputQuizNum')[0].name] = 
                ($$('.inputQuizNum')[0].value != 0) ? parseInputNumber($$('.inputQuizNum')[0].value) : '';
        } else {
            params['slf_summ'] = 
                ($$('.inputQuizNum')[0].value != 0) ? parseInputNumber($$('.inputQuizNum')[0].value) : '';
        }
    }
    if($$('.inputQuizDays').length != 0) {
        params['slf_time'] = ($$('.inputQuizDays')[0].value != 0) ? parseInputNumber($$('.inputQuizDays')[0].value) : parseInputNumber($$('.inputQuizDays')[0].dataset.max/2);
    } else if ('quizRangePeriod' in setFilters) {
        params['slf_time'] = setFilters.quizRangePeriod;
    }

    let selectedListrings = Object.values(setFilters.listings).filter(item => item != 0).toString();

    params['listing_id'] =  selectedListrings ? selectedListrings + ',' + window.CATEGORY_ID : -window.CATEGORY_ID;
    params['filters'] = [].concat.apply([], Object.values(setFilters.options)).toString();
    params['is_quiz_count'] = true;

    // others params
    setFilters.otherFiltersNames.forEach(filterName => {
        params[filterName] = [].concat.apply([], Object.values(setFilters[filterName])).toString();
    })
}

function setQuizInputRangeValue(input) {

    let minValue = parseInt(input.getAttribute('data-min'));
    let maxValue = parseInt(input.getAttribute('data-max'));
    let inputValue = parseInputNumber(input.value)
    input.setAttribute('valuebeforechange',inputValue);

    if (inputValue >= maxValue) {
        input.value = getFormattedNumber(maxValue) + '+';
    } else if (inputValue < minValue) {
        input.value = getFormattedNumber(minValue);
    }
}


function formattedNumberInputAction(input) {
    let repeatBlock = input.parentElement.querySelector('.quiz-num-repeat');

    input.addEventListener('input', () => {setFormattedNumberInput(input); setRepeatBlock(repeatBlock, input.value);});
    input.addEventListener('focus', () => {setRepeatBlock(repeatBlock, input.value)});
    input.addEventListener('blur', () => {setRepeatBlock(repeatBlock, input.value)});
}

function setFormattedNumberInput(input) {
    if (!input.value) {
        return;
    }

    input.value = getFormattedNumber(input.value, input.getAttribute('data-max'));
}

function getFormattedNumber(number, max = null, ending = '') {
    number = number.toString().replace(/[^0-9.]/g, '');
    number = Number(number);

    if (max && number > Number(max)) {
        return max.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ") + '+';
    }

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

function parseInputNumber(number) {
    return Number(number.replace(/[ +]/g, ''))
}

function setRepeatBlock(element, value) {
    let ending = element.dataset.ending.split(',');


    if (ending.length === 3) {
        if (value == 1) ending = ending[0];
        else if (value > 1 && value < 5) ending = ending[1];
        else ending = ending[2];
    } else {
        ending = ending[0];
    }

    if (value) {
        element.innerHTML = `<span class="number">${value}</span><span> ${ending}</span>`;
    } else {
        element.innerHTML = '';
    }
}

function initQuizInput(input) {
    if (!input.value) {
        return;
    }

    setFormattedNumberInput(input);
    setRepeatBlock(input.parentElement.querySelector('.quiz-num-repeat'), input.value);
}

function initCurrencySelect() {
    let currencyFilter = quizBlock.querySelector('.currency-filter');

    if (!currencyFilter) {
        return;
    }

    let selector = currencyFilter.querySelector('.filters-category-select');
    let filterId = selector.dataset.filterId;

    setFilters.listings[filterId] = currencyFilter.dataset.defaultListing;
}let elemsForSort = [];
let elemsForSortByAnswer = [];
let selectMenu = document.querySelectorAll('.selected-item');
let indexItem = 3;
selectMenu.forEach(a => {
    a.addEventListener('click', b => {
        let nextEl = b.target.nextElementSibling;
        nextEl.classList.toggle('toggleSelect');
        nextEl.style.zIndex = indexItem++;
        a.classList.toggle('openSelect');
        a.dataset.type = (a.dataset.type == 'up') ? 'down' : 'up';
    })
});
//клиентская сортировка(сли нужна серверная сортировка,подключить файл public\v4\js\sorting-load-cards\load.js)
if($$('.sort').length != 0 && $$('.sort')[0].classList.contains('with-pagination')) {
    var options = $$('.sort')[0].getElementsByClassName('option');
    for(let i =0;i<options.length;i++) {
        options[i].addEventListener('click',function (e) {
            e.target.parentElement.classList.remove('toggleSelect');
            let parentEl = e.target.closest('.select').children[0];
            let dataType = e.target.getAttribute('data-type');
            parentEl.setAttribute('data-type', dataType);
            parentEl.setAttribute('data-field', e.target.getAttribute('data-field'));
            parentEl.innerText = e.target.innerText;
            parentEl.classList.remove('openSelect');
            getSort(e);
        },false)
    }
    var getSort = ({ target }) => {
        target =  target.closest('.option');
        const order = (target.dataset.type == 'up') ? -1 : 1;
        var arrForSort = [];
        var elementsBlock = $$('.offers-list')[0];
        if(window.itemsArr) {
            arrForSort = window.itemsArr;
        } else {
            arrForSort = [].slice.call(elementsBlock.children);
        }
        const collator = new Intl.Collator(['en', 'ru'], { numeric: true });
        const comparator = (order) => (a, b) => {
            var firstItem  = (a.querySelector("[data-"+target.dataset.field+"]") != null) ? a.querySelector("[data-"+target.dataset.field+"]").innerHTML : '0';
            var secondItem = (b.querySelector("[data-"+target.dataset.field+"]") != null) ? b.querySelector("[data-"+target.dataset.field+"]").innerHTML : '0';
            return order * collator.compare(
                firstItem.replace(/\s/g, ''),
                secondItem.replace(/\s/g, '')
            )
        };
        elementsBlock.innerHTML = '';
        var sortedArr = [];
        sortedArr.push(...[...arrForSort].sort(comparator(order)));
        offersListItemsArr = [...sortedArr];
        if($$('.pagination').length != 0) {
            page(1,sortedArr);
        } else {
            sortedArr.forEach((elem)=>{
                elementsBlock.append(elem);
            });
        }
    };
}
//end клиентская сортировка
document.addEventListener('click',function (e) {
    if(e.target.closest('.select') == null) {
        if(document.getElementsByClassName('selected-item').length != 0 && document.getElementsByClassName('selected-dropdown').length != 0) {
            let selectedItem = document.getElementsByClassName('selected-item')[0];
            let selDropdown = document.getElementsByClassName('selected-dropdown')[0];
            selDropdown.classList.remove('toggleSelect');
            selectedItem.classList.remove('openSelect');
            // selectedItem.dataset.type = 'up';
        }
    }
})
var slideShow = (function () {
    return function (data) {
        var arr = [];
        var leftArrow = '<button class="js-slide-btn-left">Previous</button>';
        var rightArrow = '<button class="js-slide-btn-right">Next</button>';
        var slidesCount;
        var k = 0;
        var f = 0;
        var dotNum = 0;
        var circleScroll = true;
        var dataSettings = {};
        var element = '';
        var slideItemWidth;
        var step = 0;
        var addContent = '';
        var arr1 = [];
        var lastElm = '';
        var firstElm = '';
        var selector = '';
        var elementName = '';
        var itemClases = '';
        var arrows = true;
        var reviewItem = false;
        var dots = false;
        var dotsBlock = '';
        var dotsCount = 0;
        var elHeight = '100';
        var customArrows = '';
        var customWidth = '';
        var init = function (data) {
            if (data) {
                dataSettings = data;
                element = getElement(dataSettings.element);
                if(!dataSettings.arr && element) {
                    arr = [].slice.call(element.children);
                    elHeight = element.children[0].offsetHeight+20;
                    dataSettings.arr = arr;
                }
                if(window.sliders) {
                    if(window.sliders.indexOf(dataSettings) == -1) {
                        window.sliders[dataSettings.element] = dataSettings;
                    }
                } else {
                    window.sliders = [];
                    window.sliders[dataSettings.element] = dataSettings;
                }
            }
            let i = 0;

            if (data && dataSettings.element) {
                selector = dataSettings.element.charAt(0);
                elementName = (dataSettings.element).slice(1,dataSettings.element.length);
                if(selector === '#'){
                    element = document.getElementById(elementName);
                } else if(selector === '.') {
                    element = document.getElementsByClassName(elementName)[0];
                }
                if(element != null){
                    element.style.display = 'none';
                } else {
                    return;
                }
                if (dataSettings.windowResize === false) {
                    setSliderData(dataSettings);
                    arr = dataSettings.arr;
                } else {
                    setSliderData(window.sliders[dataSettings.element]);
                    arr = window.sliders[dataSettings.element].arr;
                }
                if (slidesCount == arr.length) {
                    arrows = false;
                } else {
                    arrows = true;
                }
            }
            if (dataSettings.dots !== undefined) {
                setSliderData(dataSettings);
                // dots = dataSettings.dots;
            }
            var slideContent = '';
            for (let i = 0; i < slidesCount; i++) {
                if(arr[i]){
                    itemClases = '';
                    for (let q = 0; q < arr[i].classList.length; q++) {
                        itemClases += arr[i].classList[q]+' ';
                    }
                    if(elementName == 'reviews'){
                        reviewItem = true;
                    }else {
                        reviewItem = false;
                    }
                    if(reviewItem == true){
                        slideContent += '<div class="jsSlideReview" style="width:' + slideItemWidth + '%;min-width:' + slideItemWidth + '%;height: '+elHeight+'px;"> <div class="jsSlideItem '+itemClases+'" >' + arr[i].innerHTML + '</div></div>';
                    }else{
                        slideContent += '<div class="jsSlideItem '+itemClases+'" style="width:' + slideItemWidth + '%;min-width:' + slideItemWidth + '%;height: '+elHeight+'px;">' + arr[i].innerHTML + '</div>';
                    }
                }
            }
            if(element != null) {
                var blockCustomWidth = (customWidth != '') ? 'style = "width: '+customWidth+'%;"' : '';
                element.innerHTML = '<div class="jsSlideContent" '+blockCustomWidth+'>'+slideContent+'</div>';
                element.style.display = 'flex';
                element.classList.add('jsSlideMainBlock');
                element.style.overflow = 'hidden';
                if(arrows == true) {
                    if (circleScroll || (0 < k && k < arr.length)) {
                        addContent = '<div class="arrows-block">'+leftArrow+'</div>' + element.innerHTML + '<div class="arrows-block">'+rightArrow+'</div>';
                    } else {
                        addContent = '<div class="arrows-block"></div>'+element.innerHTML + '<div class="arrows-block">'+rightArrow+'</div>';
                    }
                } else {
                    addContent = element.innerHTML;
                }
                if(dots == true) {
                    circleScroll = false;
                    dotsCount = arr.length/step;
                    for(let i=0; i<dotsCount; i++) {
                        if(i==0){
                            dotsBlock += '<span class="js-slide-dots js-slide-active-dot js-slide-disable" data-dot = '+i+'></span>';
                        } else {
                            dotsBlock += '<span class="js-slide-dots" data-dot = '+i+'></span>';
                        }
                    }
                    addContent = addContent+'<div class="js-slider-dots">'+dotsBlock+'</div>';
                }

                element.innerHTML = addContent;
                element.style.overflow = 'unset';
                showReviewsHiddenPart();
                let arrowsBlocks = element.getElementsByClassName('arrows-block');
                if(arrowsBlocks.length > 0){
                    for (let i=0; i<arrowsBlocks.length;i++){
                        arrowsBlocks[i].style.height = elHeight+'px';
                        if(customArrows != '' && arrowsBlocks[i].children[0]) {
                            arrowsBlocks[i].children[0].style.top = customArrows+'px';
                        }
                    }
                }

                f = slidesCount;
                btnsClickAndDataset(dataSettings.element);
                loadDefBgImg(element);
            }
            customWidth = '';
            customArrows = '';
            if(dots == true || arr.length < slidesCount) {
                if(element.getElementsByClassName('js-slide-btn-right').length != 0){
                    element.getElementsByClassName('js-slide-btn-right')[0].style.display = 'none';
                }
                if(element.getElementsByClassName('js-slide-btn-left').length != 0){
                    element.getElementsByClassName('js-slide-btn-left')[0].style.display = 'none';
                }
            }
        }

        var slideLeft = function (e) {
            var target = e.target;
            if (target.className == 'js-slide-btn-left' || target.className == 'js-slide-dots') {
                element = target.closest('.jsSlideMainBlock');
                element.style.overflow = 'hidden';
                if(target.className == 'js-slide-dots') {
                    element.getElementsByClassName('js-slide-active-dot')[0].classList.remove('js-slide-disable');
                    let dotNum1 = element.getElementsByClassName('js-slide-active-dot')[0].dataset['dot'];
                    element.getElementsByClassName('js-slide-active-dot')[0].classList.remove('js-slide-active-dot');
                    target.classList.add('js-slide-active-dot');
                    target.classList.add('js-slide-disable');
                    let dotNum2 = target.dataset['dot'];
                    dotNum = Number(dotNum1) - Number(dotNum2);
                }
                element.getElementsByClassName('jsSlideContent')[0].style.justifyContent = 'flex-end';
            }
            arr1 = [];
            k = k - step;
            f = f - step;
            setSliderData(window.sliders[target.dataset['parent']]);
            var slideContent = '';
            elementName = target.dataset['parent'];
            element = getElement(elementName);
            var slideContentAll = '';
            for (let i = arr.length-1; i >= slidesCount; i--) {
                itemClases = '';
                for (let q = 0; q < arr[i].classList.length; q++) {
                    itemClases += arr[i].classList[q]+' ';
                }
                if(elementName == '.reviews'){
                    reviewItem = true;
                }else {
                    reviewItem = false;
                }
                if(reviewItem == true){
                    slideContent += '<div class="jsSlideReview" style="width:' + slideItemWidth + '%;min-width:' + slideItemWidth + '%;height: '+elHeight+'px;"> <div class="jsSlideItem '+itemClases+'" >' + arr[i].innerHTML + '</div></div>';
                }else{
                    slideContent += '<div class="jsSlideItem '+itemClases+'" style="width:' + slideItemWidth + '%;min-width:' + slideItemWidth + '%;height: '+elHeight+'px;">' + arr[i].innerHTML + '</div>';
                }
                var parser = new DOMParser();
                var slideItemObject = parser.parseFromString(slideContent, 'text/html');
                element.getElementsByClassName('jsSlideContent')[0].prepend(slideItemObject.body.lastChild);
            }

            var blockCustomWidth = (customWidth != '') ? 'style = "width: '+customWidth+'%;"' : '';
            if(customWidth !== '') {
                element.getElementsByClassName('jsSlideContent')[0].style.width = blockCustomWidth;
            }
            if (dots == true) {
                // element.getElementsByClassName('js-slider-dots')[0].style.display='none';
                element.getElementsByClassName('jsSlideContent')[0].style.transform = 'translatex('+dotNum*step*slideItemWidth+'%)';
            } else {
                element.getElementsByClassName('jsSlideContent')[0].style.transform = 'translatex('+step*slideItemWidth+'%)';
            }
            var leftArrowBlock = (k <= 0 && circleScroll === false) ? '<div class="arrows-block"></div>' : '<div class="arrows-block">'+leftArrow+'</div>';
            if(target.classList.contains('js-slide-dots') && dotNum != 0) {
                for (let j = 0; j < step*dotNum; j++) {
                    lastElm = arr.pop();
                    arr1 = arr.unshift(lastElm);
                }
            } else {
                for (let j = 0; j < step; j++) {
                    lastElm = arr.pop();
                    arr1 = arr.unshift(lastElm);
                }
            }
            setTimeout(function(){
                for (let i = 0; i < slidesCount; i++) {
                    itemClases = '';
                    for (let q = 0; q < arr[i].classList.length; q++) {
                        itemClases += arr[i].classList[q]+' ';
                    }

                    if(elementName == '.reviews'){
                        reviewItem = true;
                    }else {
                        reviewItem = false;
                    }
                    if(reviewItem == true){
                        slideContentAll += '<div class="jsSlideReview" style="width:' + slideItemWidth + '%;min-width:' + slideItemWidth + '%;height: '+elHeight+'px;"> <div class="jsSlideItem '+itemClases+'" >' + arr[i].innerHTML + '</div></div>';
                    }else{
                        slideContentAll += '<div class="jsSlideItem '+itemClases+'" style="width:' + slideItemWidth + '%;min-width:' + slideItemWidth + '%;height: '+elHeight+'px;">' + arr[i].innerHTML + '</div>';
                    }
                }
                var rightArrowBlock = '<div class="arrows-block">'+rightArrow+'</div>';
                if(dots == true) {
                    leftArrowBlock = rightArrowBlock = '<div class="arrows-block"></div>';
                    dotsBlock = element.getElementsByClassName('js-slider-dots')[0].outerHTML;
                }
                addContent = leftArrowBlock + '<div class="jsSlideContent" '+blockCustomWidth+'>'+slideContentAll+'</div>' + rightArrowBlock+dotsBlock;
                element.innerHTML = addContent;
                element.style.overflow = 'unset';
                showReviewsHiddenPart();
                let arrowsBlocks = element.getElementsByClassName('arrows-block');
                if(arrowsBlocks.length > 0){
                    for (let i=0; i<arrowsBlocks.length;i++){
                        arrowsBlocks[i].style.height = elHeight+'px';
                        if(customArrows != '' && arrowsBlocks[i].children[0]) {
                            arrowsBlocks[i].children[0].style.top = customArrows+'px';
                        }
                    }
                }
                loadDefBgImg(element);
                if(element != null) {
                    btnsClickAndDataset(target.dataset['parent']);
                }
            }, 400);

        }

        var slideRight = function (e) {
            var target = e.target;
            element = target.closest('.jsSlideMainBlock');
            element.style.overflow = 'hidden';
            if (target.className == 'js-slide-btn-right' || target.className == 'js-slide-dots') {
                if(target.className == 'js-slide-dots') {
                    element.getElementsByClassName('js-slide-active-dot')[0].classList.remove('js-slide-disable');
                    let dotNum1 = element.getElementsByClassName('js-slide-active-dot')[0].dataset['dot'];
                    element.getElementsByClassName('js-slide-active-dot')[0].classList.remove('js-slide-active-dot');
                    target.classList.add('js-slide-active-dot');
                    target.classList.add('js-slide-disable');
                    let dotNum2 = target.dataset['dot'];
                    dotNum = Number(dotNum2) - Number(dotNum1);
                }
            }
            f = f + step;
            k = k + step;
            setSliderData(window.sliders[target.dataset['parent']]);
            var slideContent = '';
            elementName = target.dataset['parent'];
            element = getElement(elementName);
            var slideContentAll = '';
            var blockCustomWidth = (customWidth != '') ? 'style = "width: '+customWidth+'%;"' : '';
            if(customWidth !== '') {
                element.getElementsByClassName('jsSlideContent')[0].style.width = blockCustomWidth;
            }

            for (let i = slidesCount; i < arr.length; i++) {
                itemClases = '';
                for (let q = 0; q < arr[i].classList.length; q++) {
                    itemClases += arr[i].classList[q]+' ';
                }
                if(elementName == '.reviews'){
                    reviewItem = true;
                }else {
                    reviewItem = false;
                }
                if(reviewItem == true){
                    slideContent += '<div class="jsSlideReview" style="width:' + slideItemWidth + '%;min-width:' + slideItemWidth + '%;height: '+elHeight+'px;"> <div class="jsSlideItem '+itemClases+'" >' + arr[i].innerHTML + '</div></div>';
                }else{
                    slideContent += '<div class="jsSlideItem '+itemClases+'" style="width:' + slideItemWidth + '%;min-width:' + slideItemWidth + '%;height: '+elHeight+'px;">' + arr[i].innerHTML + '</div>';
                }
                var parser = new DOMParser();
                var slideItemObject = parser.parseFromString(slideContent, 'text/html');
                element.getElementsByClassName('jsSlideContent')[0].append(slideItemObject.body.lastChild);
            }
            if(target.classList.contains('js-slide-dots') && dotNum != 0) {
                for (let j = 0; j < step*dotNum; j++) {
                    firstElm = arr.shift();
                    arr1 = arr.push(firstElm);
                }
            } else {
                for (let j = 0; j < step; j++) {
                    firstElm = arr.shift();
                    arr1 = arr.push(firstElm);
                }
            }

            element.getElementsByClassName('jsSlideContent')[0].style.justifyContent = 'flex-start';
            if (dots == true) {
                // element.getElementsByClassName('js-slider-dots')[0].style.display='none';
                element.getElementsByClassName('jsSlideContent')[0].style.transform = 'translatex(-'+dotNum*step*slideItemWidth+'%)';
            } else {
                element.getElementsByClassName('jsSlideContent')[0].style.transform = 'translatex(-'+step*slideItemWidth+'%)';
            }
            var rightArrowBlock = ((f >= arr.length && circleScroll === false)) ? '<div class="arrows-block"></div>' : '<div class="arrows-block">'+rightArrow+'</div>';
            setTimeout(function(){
                for (let i = 0; i < slidesCount; i++) {
                    itemClases = '';
                    for (let q = 0; q < arr[i].classList.length; q++) {
                        itemClases += arr[i].classList[q]+' ';
                    }
                    if(elementName == '.reviews'){
                        reviewItem = true;
                    }else {
                        reviewItem = false;
                    }
                    if(reviewItem == true){
                        slideContentAll += '<div class="jsSlideReview" style="width:' + slideItemWidth + '%;min-width:' + slideItemWidth + '%;height: '+elHeight+'px;"> <div class="jsSlideItem '+itemClases+'" >' + arr[i].innerHTML + '</div></div>';
                    }else{
                        slideContentAll += '<div class="jsSlideItem '+itemClases+'" style="width:' + slideItemWidth + '%;min-width:' + slideItemWidth + '%;height: '+elHeight+'px;">' + arr[i].innerHTML + '</div>';
                    }
                }
                var rightArrowBlock = '<div class="arrows-block">'+rightArrow+'</div>';
                var leftArrowBlock = '<div class="arrows-block">'+leftArrow+'</div>';
                if(dots == true) {
                    leftArrowBlock = rightArrowBlock = '<div class="arrows-block"></div>';
                    dotsBlock = element.getElementsByClassName('js-slider-dots')[0].outerHTML;
                }
                addContent =  leftArrowBlock + '<div class="jsSlideContent" '+blockCustomWidth+'>'+slideContentAll+'</div>' + rightArrowBlock+dotsBlock;
                element.innerHTML = addContent;
                element.style.overflow = 'unset';
                showReviewsHiddenPart();
                let arrowsBlocks = element.getElementsByClassName('arrows-block');
                if(arrowsBlocks.length > 0){
                    for (let i=0; i<arrowsBlocks.length;i++){
                        arrowsBlocks[i].style.height = elHeight+'px';
                        if(customArrows != '' && arrowsBlocks[i].children[0]) {
                            arrowsBlocks[i].children[0].style.top = customArrows+'px';
                        }
                    }
                }
                loadDefBgImg(element);
                if(element != null) {
                    btnsClickAndDataset(target.dataset['parent']);
                }
            }, 400);
        }
        var getElement = function(elementName) {
            selector = elementName.charAt(0);
            elementName = elementName.slice(1,elementName.length);
            if(selector === '#'){
                var elem = document.getElementById(elementName);
            } else if(selector === '.') {
                var elem = document.getElementsByClassName(elementName)[0];
            }
            return elem;
        }
        var setSliderData = function (dataSettings) {
            if (dataSettings && dataSettings.slidesToScroll) {
                step = dataSettings.slidesToScroll;
            } else {
                step = 1;
            }
            if (dataSettings.circleScroll !== undefined) {
                circleScroll = dataSettings.circleScroll;
            }
            if (dataSettings.windowResize === undefined) {
                dataSettings.windowResize = false;
            }
            if (data && dataSettings.slidesToShow) {
                slidesCount = dataSettings.slidesToShow;
                if (slidesCount < step) {
                    console.log('Количество перемотаемых слайдов должно быть больше количества показанных слайдов');
                    return;
                }
            } else {
                slidesCount = 3;
            }
            if(dataSettings && dataSettings.height){
                elHeight = window.sliders[dataSettings.element].height;
            }
            if(dataSettings && dataSettings.blockWidth){
                customWidth = window.sliders[dataSettings.element].blockWidth;
            }
            if(dataSettings && dataSettings.customArrowsTop){
                customArrows = window.sliders[dataSettings.element].customArrowsTop;
            } else {
                customArrows = '';
            }

            dots = dataSettings.dots;
            if (dataSettings.responsive !== undefined) {
                let responsive = dataSettings.responsive;
                for (let q = 0; q < responsive.length; q++) {
                    if (window.innerWidth < responsive[q].breakpoint) {
                        if(responsive[q].settings.slidesToScroll != undefined) {
                            step = responsive[q].settings.slidesToScroll;
                        }
                        if(responsive[q].settings.slidesToShow != undefined) {
                            slidesCount = responsive[q].settings.slidesToShow;
                        }
                        if(responsive[q].settings.dots != undefined) {
                            dots = responsive[q].settings.dots;
                        }
                        if(responsive[q].settings.height !== undefined){
                            elHeight = responsive[q].settings.height;
                        }
                        if(responsive[q].settings.customArrowsTop !== undefined){
                            customArrows = responsive[q].settings.customArrowsTop;
                        } else {
                            customArrows = '';
                        }
                        if(responsive[q].settings.blockWidth !== undefined){
                            customWidth = responsive[q].settings.blockWidth;
                        }
                    }
                }
            }
            arr = window.sliders[dataSettings.element].arr;
            slideItemWidth = (100 / slidesCount);
        }
        var btnsClickAndDataset = function (dataset) {
            element = getElement(dataset);
            if(element.getElementsByClassName('js-slide-btn-left')[0] != null) {
                element.getElementsByClassName('js-slide-btn-left')[0].onclick = slideLeft;
                element.getElementsByClassName('js-slide-btn-left')[0].dataset['parent'] = dataset;
            }
            if(element.getElementsByClassName('js-slide-btn-right')[0] != null) {
                element.getElementsByClassName('js-slide-btn-right')[0].onclick = slideRight;
                element.getElementsByClassName('js-slide-btn-right')[0].dataset['parent'] = dataset;
            }
            let dotsArr = element.getElementsByClassName('js-slide-dots');
            for(let i=0;i<dotsArr.length;i++) {
                if(dotsArr[i].classList.contains('js-slide-active-dot')) {
                    var activeDotIndex = i;
                }
            }
            for(let i=0;i<dotsArr.length;i++) {
                if(i < activeDotIndex) {
                    dotsArr[i].onclick = slideLeft;
                } else if(i > activeDotIndex){
                    dotsArr[i].onclick = slideRight;
                }
                dotsArr[i].dataset['parent'] = dataset;
            }
        }
        var loadDefBgImg = function(element){
            var defBgItems = element.getElementsByClassName('def_bg');
            if (defBgItems.length >0) {
                for (let i = 0; i < defBgItems.length; i++) {
                    defBgItems[i].style.background = "url('" + defBgItems[i].dataset.src + "')";
                    defBgItems[i].removeAttribute('data-src')
                }
            }
        }
        var showReviewsHiddenPart = function(){
            var showReviewsBtns = document.getElementsByClassName('show_the_reviews');
            if(showReviewsBtns.length != 0){
                for(let i=0;i<showReviewsBtns.length;i++){
                    showReviewsBtns[i].addEventListener("click", function (event) {
                        var elem = event.target;
                        elem.closest('.jsSlideItem').style.padding = 0;
                        elem.nextSibling.style.display = 'block';
                        elem.previousElementSibling.style.display = 'none';
                        elem.style.display = 'none';
                        event.stopPropagation();
                    }, false);
                }
            }
        }
        window.addEventListener('resize', function(event) {
            let sldersDetails = window.sliders;
            for (let key in sldersDetails) {
                sldersDetails[key].windowResize = true;
                init(sldersDetails[key]);
            }
        }, true);
        init(data);
    }
}());

function cardSliderInit (elem){
    var cardSliderBlocks = document.querySelectorAll(".card-slider-init:not(.jsSlideMainBlock)");
    for (let i=0; i<cardSliderBlocks.length;i++) {
        cardSliderBlocks[i].classList.add('card-slider'+elem.id);
        slideShow({
            element:'.card-slider'+elem.id,
            slidesToShow:5,
            slidesToScroll:1,
            circleScroll:true,
            height:'113',
            responsive: [
                {
                    breakpoint: 1200,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 1
                    }
                },
                {
                    breakpoint: 992,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 1
                    }
                },
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                }
            ]
        })
    }
}

function  addTabsClick(e) {
    let tabTabs = e.querySelectorAll('.tab .tab-links');
    let tabItems = e.querySelectorAll('.tabs-items .tab-content');
    for(let i =0;i<tabTabs.length;i++) {
        tabTabs[0].click();
        tabTabs[i].onclick = () => {
            tabTabs.forEach((e)  => { e.classList.remove('on') });
            tabItems.forEach((e)  => { e.classList.remove('on') });
            tabTabs[i].classList.add('on');
            tabItems[i].classList.add('on');
        }
    }
}

function addCardsMoreBtnsClick(value) {
    let cardButtonShow = value.querySelector('.card-more'),
        cardButtonHide = value.querySelector('.card-less'),
        hiddenCardInfoBlock = value.querySelector('.hidden-card-info');
    cardButtonShow.addEventListener('click', event => {
        cardButtonHide.style.display = 'flex';
        cardButtonShow.style.display = 'none';
        if(event.target.parentElement.getElementsByClassName('card-slider-block').length != 0) {
            event.target.parentElement.getElementsByClassName('card-slider-block')[0].classList.add('card-slider-init');
        }
        cardSliderInit(event.target.parentElement.closest('.card'));
        hiddenCardInfoBlock.style.display = 'block';
    });
    cardButtonHide.addEventListener('click', event => {
        cardButtonShow.style.display = 'flex';
        cardButtonHide.style.display = 'none';
        hiddenCardInfoBlock.style.display = 'none';
    });
}

function addToCompareBtnsClick (e){
    var elem = e.getElementsByClassName('addToCompare')[0];
    if(elem != undefined) {
        elem.onclick = (e) => {
            var catId = e.target.closest('.card').attributes['data-cat'].value;
            var compareItems = localStorage.getItem('vzo_compare'+ Math.abs(catId));
            if (compareItems == null || compareItems == '') {
                compareItemsArr = Array();
            } else {
                compareItemsArr = compareItems.split(',');
                if(compareItemsArr.length == 10){
                    alert('Нельзя добавлять более 10 карточек одного раздела в сравнение');
                    return;
                }
            }
            var id = elem.attributes['data-id'].value;
            if(elem.closest('.card-icons').classList.contains('addedToCompare')){
                for (i = 0; i < compareItemsArr.length; i++) {
                    if (parseInt(compareItemsArr[i]) == parseInt(id)) {
                        compareItemsArr.splice(i, 1);
                    }
                }
                elem.closest('.card-icons').classList.remove('addedToCompare');
            } else {
                compareItemsArr.push(id);
                elem.closest('.card-icons').classList.add('addedToCompare');
            }
            localStorage.setItem('vzo_compare'+Math.abs(catId),compareItemsArr);
            var compareItemsByCats = null;
            for (let i = 1; i < 15; i++) {
                var compareItemsByCat = localStorage.getItem('vzo_compare' + i);
                if (compareItemsByCat != null && compareItemsByCat != '') {
                    compareItemsByCats += compareItemsByCat.split(',').length;
                }
            }
            if(compareItemsByCats != '') {
                $$('.compare-items-count')[0].innerText = compareItemsByCats;
                $$('.compare-items-count')[0].style.display = 'flex';
            } else {
                $$('.compare-items-count')[0].style.display = 'none';
            }
            if($$('.compare-block').length != 0) {
                setCompareBlockDynamicData(compareItemsByCats,true,elem);
            }
            var logo = elem.closest('.card').querySelectorAll('.logo img')[0].attributes['src'].nodeValue;
        }
    }
}

// печать карточки
function addPrintBtnsClick(card) {
    if(card.getElementsByClassName('print-btn-default').length != 0) {
        var el = card.getElementsByClassName('print-btn')[0];
        el.addEventListener('click', () => {
            let card = el.closest('.card');
            let cardID = card.id;
            if (cardID != null) {
                cardID = cardID.replace('card-', '');
                window.open('/card-print/'+cardID, '_blank').focus();
            }
        });
    }
    if(card.getElementsByClassName('print-btn-insurance').length != 0) {
        var el = card.getElementsByClassName('print-btn')[0];
        el.addEventListener('click', () => {
            let card = el.closest('.card');
            let cardID = card.id;
            if (cardID != null) {
                cardID = cardID.replace('card-', '');
                window.open('/card-insurance-print/'+cardID, '_blank').focus();
            }
        });
    }
}

function addOrRemoveFromFavorites(card) {
    if(card.getElementsByClassName('addToFavorites').length != 0) {
        card.getElementsByClassName('addToFavorites')[0].onclick = function (e) {
            e.preventDefault();
            var elem = e.target.closest('svg');
            var favorites = localStorage.getItem('vzo');
            if (favorites == null) {
                favoritesArr = Array();
            } else {
                favoritesArr = favorites.split(',');
            }
            var id = elem.closest('.card').id.substr(5);
            if(elem.closest('.card-icons').classList.contains('addedToFavorites')){
                for (i = 0; i < favoritesArr.length; i++) {
                    if (parseInt(favoritesArr[i]) == parseInt(id)) {
                        favoritesArr.splice(i, 1);
                    }
                }
            } else {
                favoritesArr.push(id);
            }

            if(favoritesArr && favoritesArr == '') {
                favorites = localStorage.removeItem('vzo');
                if($$('.block-with-back-link').length != 0){
                    $$('.block-with-back-link')[0].style.display = 'block';
                    if($$('.lead').length != 0){
                        $$('.lead')[0].style.display = 'block';
                    }
                    if($$('#favorites-clear').length != 0){
                        $$('#favorites-clear')[0].style.display = 'none';
                    }
                }
            } else {
                favorites = favoritesArr.toString();
                localStorage.setItem('vzo',favorites);
            }

            if($$('.fav-items-count').length != 0) {
                console.log(favoritesArr);
                if(favoritesArr != null && favoritesArr.length != 0) {
                    $$('.fav-items-count')[0].innerText = favoritesArr.length;
                    $$('.fav-items-count')[0].style.display = 'flex';
                    $$('.icon-for-show-notice')[0].classList.add('show-favorites-cards');
                    if ($$('.fav-items-block').length) $$('.fav-items-block')[0].classList.remove('hiddenStyle');
                } else {
                    $$('.fav-items-count')[0].style.display = 'none';
                    $$('.icon-for-show-notice')[0].classList.remove('show-favorites-cards');
                    if ($$('.fav-items-block').length) $$('.fav-items-block')[0].classList.add('hiddenStyle');
                }
            }
            if(window.location.href.indexOf('favorites') != -1) {
                $$('#'+card.id)[0].remove();
            }
            elem.closest('.card-icons').classList.toggle('addedToFavorites')
        }
    }
}

function addCardsBtnsEvents() {
    $$('.card').forEach((card) => {
        addTabsClick(card);
        addOrRemoveFromFavorites(card);
        addCardsMoreBtnsClick(card);
        addToCompareBtnsClick(card);
        addPrintBtnsClick(card);
        if (typeof showModalBlock === "function") {
            showModalBlock();
        }
        let cardIconsBlock = card.getElementsByClassName('card-icons')[0];
        if($$('.compare-block').length != 0) {
            var catId = $$('.compare-block')[0].attributes['data-cat'].value;
            var comparingItems = localStorage.getItem('vzo_compare'+ catId);
            if(comparingItems != null) {
                comparingItems = comparingItems.split(',');
            }
            if(comparingItems != null && comparingItems.indexOf(card.id.substr(5)) != -1) {
                cardIconsBlock.classList.add('addedToCompare')
            } else {
                if(cardIconsBlock.classList.contains('addedToCompare')) {
                    cardIconsBlock.classList.remove('addedToCompare');
                }
            }
        }
        var favorites = localStorage.getItem('vzo');
        if(favorites != null) {
            favorites = favorites.split(',');
        }
        if(favorites != null && favorites.indexOf(card.id.substr(5)) != -1) {
            cardIconsBlock.classList.add('addedToFavorites')
        } else {
            if(cardIconsBlock.classList.contains('addedToFavorites')) {
                cardIconsBlock.classList.remove('addedToFavorites');
            }
        }
        var rkoTabScrollingBlock = card.getElementsByClassName('rko-scrolling-tab-block');
        var rkoTabScrollingRight = card.getElementsByClassName('rko-tab-right-btn');
        var rkoTabScrollingLeft = card.getElementsByClassName('rko-tab-left-btn');
        if(rkoTabScrollingBlock.length !=0 && rkoTabScrollingRight.length != 0 && rkoTabScrollingLeft.length != 0) {
            rkoTabScrollingRight[0].addEventListener('click',function (e){
                rkoTabScrollingBlock[0].scrollLeft += 200;
                rkoTabScrollingRight[0].style.display = 'none';
                rkoTabScrollingLeft[0].style.display = 'block';
            })
            rkoTabScrollingLeft[0].addEventListener('click',function (e){
                rkoTabScrollingBlock[0].scrollLeft -= 200;
                rkoTabScrollingLeft[0].style.display = 'none';
                rkoTabScrollingRight[0].style.display = 'block';
            })
            if(rkoTabScrollingBlock[0].innerText.length < 330) {
                rkoTabScrollingRight[0].style.display = 'none';
            }
        }
    });
}
document.addEventListener('DOMContentLoaded', function(){
    if($$('.card').length != 0) {
        addCardsBtnsEvents();
    }
});



let tabLink = document.querySelector('#tab-link');

$$('.tab-wrap').forEach((e) => {
    let tabTabs = e.querySelectorAll('.tab .tab-links');
    let tabItems = e.querySelectorAll('.tabs-items .tab-content');
    let tabContentTitles = e.querySelectorAll('.tab-content-titles div');
    for(let i =0;i<tabTabs.length;i++) {
        tabTabs[0].classList.add('on');
        tabItems[0].classList.add('on');
        if(tabContentTitles.length != 0) {
            tabContentTitles[0].classList.add('on');
        }
        tabTabs[i].onclick = () => {
            if (tabLink && tabTabs[i].dataset.tabLink) {
                tabLink.href = tabTabs[i].dataset.tabLink;
            }

            tabTabs.forEach((e)  => { e.classList.remove('on') });
            tabItems.forEach((e)  => { e.classList.remove('on') });
            tabTabs[i].classList.add('on');
            tabItems[i].classList.add('on');
            if(tabContentTitles.length != 0) {
                tabContentTitles.forEach((e)  => { e.classList.remove('on') });
                tabContentTitles[i].classList.add('on');
            }
        }
    }
});
if(document.getElementsByClassName('review_slider').length>0){
    slideShow({
        element:'.review_slider',
        slidesToShow:3,
        slidesToScroll:1,
        circleScroll:true,
        height:'400',
        responsive: [
            {
                breakpoint: 1201,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1
                }
            },
            {
                breakpoint: 769,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ]
    })
}
if(document.getElementsByClassName('our_expert_slider').length>0){
    slideShow({
        element:'.our_expert_slider',
        slidesToShow:2,
        slidesToScroll:1,
        circleScroll:true,
        height:'210',
        responsive: [
            {
                breakpoint: 993,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ]
    })
}
if(document.getElementsByClassName('news-slider').length>0){
    slideShow({
        element:'.news-slider',
        slidesToShow:3,
        slidesToScroll:1,
        circleScroll:false,
        // height:'330',
        responsive: [
            {
                breakpoint: 1200,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1,
                }
            },
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ]
    })
}

let videos = $$('.we-compare-insert-video-block');

for (let i = 0; i < videos.length; i++) {
    videos[i].addEventListener('click', function(){
        let link = this.querySelector('.video-img').getAttribute('data-video');
        this.innerHTML = '<div class="iframe-shadow " style="line-height: 0;" ><iframe class="border-radius" style="width: 100%; height: 295px"  src="'+ link +'" ></iframe></div>';
    });
}
if($$('.rating-wrap').length !=0) {
    if(!$$('.rating-wrap')[0].classList.contains('no-rate-poss')){
        var ratingStars = $$('.rating-wrap')[0].getElementsByTagName('svg');
        for(let i=0; i<ratingStars.length;i++){
            ratingStars[i].addEventListener('mouseenter',function (e) {
                var elemIndex = e.target.attributes['data-item'].nodeValue;
                for(let i=0; i< 5;i++) {
                    var fillOffset = ratingStars[i].getElementsByTagName('stop')[0].attributes['offset'].nodeValue;
                    var fillColor = ratingStars[i].getElementsByTagName('stop')[0].attributes['stop-color'].nodeValue;
                    ratingStars[i].setAttribute('fillOffset', fillOffset);
                    ratingStars[i].setAttribute('fillColor', fillColor);
                    ratingStars[i].getElementsByTagName('stop')[0].attributes['offset'].nodeValue = '100%';
                    if(i<elemIndex) {
                        ratingStars[i].getElementsByTagName('stop')[0].attributes['stop-color'].nodeValue = '#FFDC23';
                    } else {
                        ratingStars[i].getElementsByTagName('stop')[0].attributes['stop-color'].nodeValue = '#E5E5E5';
                    }
                }
            })
            ratingStars[i].addEventListener('mouseleave',function () {
                for(let i=0; i< 5;i++) {
                    ratingStars[i].getElementsByTagName('stop')[0].attributes['offset'].nodeValue = ratingStars[i].attributes['fillOffset'].nodeValue;
                    ratingStars[i].getElementsByTagName('stop')[0].attributes['stop-color'].nodeValue = ratingStars[i].attributes['fillColor'].nodeValue;
                }
            })
        }
    }
}
if($$('.rating-wrap').length != 0) {
    var ratingStars = $$('.rating-wrap')[0].getElementsByTagName('svg');
    for(let i=0; i < ratingStars.length; i++) {
        ratingStars[i].addEventListener('click', function (e) {
            var elem = e.target.closest('svg');
            e.preventDefault();
            let data = {
                '_token': document.getElementsByName('csrf-token')[0].attributes[1].nodeValue,
                'rating': elem.attributes['data-item'].value,
                'id': elem.parentElement.attributes['data-id'].value,
                'type' : elem.parentElement.attributes['data-type'].value,
            };
            if(elem.parentElement.attributes['data-id']) {
                fetch('/forms/rating_add', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8'
                    },
                    body: JSON.stringify(data)
                }).then((res) => {
                    return res.text().then((value) => {
                        $$('.rating-area .rating-wrap')[0].remove();
                        $$('.rating-area .rating-val')[0].remove();
                        $$('.rating-area')[0].innerHTML += '<div class="result-rating-vote">' + value + '</div>';
                    }).catch((err) => {
                        console.log(err);
                    });
                });
            }
            return false;
        })
    }
}
document.querySelectorAll('.filters-category-more').forEach(more => {
    let category = more.parentElement;
    let less = category.querySelector('.filters-category-less');

    let hiddenItems = category.querySelectorAll('.filters-category-list .hiddenStyle');
    let groupHiddenItems = [hiddenItems];

    for (let i = 0; i < 4; i++) {
        category = category.nextElementSibling;
        if (!category || category.querySelector('.filters-category-more')) {
            break;
        }
        hiddenItems = category.querySelectorAll('.filters-category-list .hiddenStyle');
        groupHiddenItems.push(hiddenItems);
    }

    more.addEventListener('click', () => {
        groupHiddenItems.forEach(hiddenItems => {
            hiddenItems.forEach(item => {item.classList.remove('hiddenStyle')})
        });

        more.classList.add('hiddenStyle');
        less.classList.remove('hiddenStyle');
    })


    less.addEventListener('click', () => {
        groupHiddenItems.forEach(hiddenItems => {
            hiddenItems.forEach(item => {item.classList.add('hiddenStyle')})
        })

        more.classList.remove('hiddenStyle');
        less.classList.add('hiddenStyle');
    })
})
let jsSelectBody = $$(".claim-select");
for (let i = 0; i < jsSelectBody.length; i++) {
    let selEl = jsSelectBody[i].getElementsByTagName("select")[0];
    let selItem = document.createElement("div");
    selItem.setAttribute("class", "selected-item");
    selItem.innerHTML = selEl.options[selEl.selectedIndex].innerHTML;
    jsSelectBody[i].appendChild(selItem);
    let selItems = document.createElement("div");
    selItems.setAttribute("class", "select-items select-hide");
    for (let j = 1; j < selEl.length; j++) {
        let selItemEl = document.createElement("div");
        selItemEl.innerHTML = selEl.options[j].innerHTML;
        selItemEl.addEventListener("click", function(e) {
            let selItemElPar = this.parentNode.parentNode.getElementsByTagName("select")[0];
            let prevSelItemEl = this.parentNode.previousSibling;
            for (let i = 0; i < selItemElPar.length; i++) {
                if (selItemElPar.options[i].innerHTML === this.innerHTML) {
                    selItemElPar.selectedIndex = i;
                    prevSelItemEl.innerHTML = this.innerHTML;
                    let selectedEl = this.parentNode.getElementsByClassName("same-as-selected");
                    for (let k = 0; k < selectedEl.length; k++) {
                        selectedEl[k].removeAttribute("class");
                    }
                    this.setAttribute("class", "same-as-selected");
                    break;
                }
            }
            prevSelItemEl.click();
        });
        selItems.appendChild(selItemEl);
    }
    jsSelectBody[i].appendChild(selItems);
    selItem.addEventListener("click", function(e) {
        e.stopPropagation();
        closeAllSelect(this);
        this.nextSibling.classList.toggle("select-hide");
        this.classList.toggle("select-arrow-active");
    });
}


function closeAllSelect(el) {
    let arrSel = [];
    let jsSelectItems = $$(".select-items");
    let jsSelectedItem = $$(".selected-item")[0];
    if(jsSelectedItem != undefined && jsSelectedItem.length != 0) {
        for (let i = 0; i < jsSelectedItem.length; i++) {
            if (el == jsSelectedItem[i]) {
                arrSel.push(i)
            } else {
                jsSelectedItem[i].classList.remove("select-arrow-active");
                if (arrSel.indexOf(i)) {
                    jsSelectItems[i].classList.add("select-hide");
                }
            }
        }
    }
}
document.addEventListener("click", closeAllSelect);

if($$('.select-items').length != 0) {
    var selectItemsArr = $$('.select-items')[0].childNodes,
        hiddenBlock = $$('.hidden-claim-el')[0];
    for (let i = 0;i<selectItemsArr.length;i++) {
        selectItemsArr[i].addEventListener('click', function () {
            if (selectItemsArr[i].textContent === 'Другое') {
                hiddenBlock.style.display = 'block';
            } else
                hiddenBlock.style.display = 'none';
        }, false)
    }
}

var modalComplain = $$('#modalComplainForm');
if(modalComplain.length !=0) {
    modalComplain[0].addEventListener('submit',function (e) {
        e.preventDefault();
        var type_complaint = $$('#modal-complain .selected-item')[0].innerText;
        var comment = $$('.hidden-claim-el')[0].value;
        var isEmail = $$('.isEmail')[0].value;
        if (isEmail == ''){
            $$('.email-confirm')[0].style.display = "block";
            return false;
        }

        console.log(type_complaint);

        if (type_complaint === 'Выберите тип жалобы') {
            alert('Выберите тип жалобы');
            return false;
        }

        if (type_complaint === 'Другое' && comment == '') {
            alert('Вы не указали причину жалобы');
            return false;
        }

        grecaptcha.confirmed(function () {
            let data = {
                '_token': document.getElementsByName('csrf-token')[0].attributes[1].nodeValue,
                'g-recaptcha-response': grecaptcha.getResponse(),
                'h1': ($$('.org-title').length != 0) ? $$('.org-title')[0].innerHTML.trim() : '',
                'type_complaint': type_complaint,
                'email': $$('#ttt')[0].value,
                'comment': comment
            };

            fetch('/forms/phone_complaint', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json;charset=utf-8'
                },
                body: JSON.stringify(data)
            }).then((res) => {
                $$('#modal-complain')[0].classList.remove('open');
                var modalBack =  $$('#modal-back')[0];
                modalBack.classList.add('open');
                let exits = [].slice.call(modalBack.getElementsByClassName('modal-exit'));
                exits.forEach(function (exit) {
                    exit.addEventListener('click', function (event) {
                        event.preventDefault();
                        modalBack.classList.remove('open');
                    });
                });
                grecaptcha.reset();
            }).catch((err) => {
                console.log(err);
                grecaptcha.reset();
            });
        })
        
        return false;
    })
}
if($$('.isEmail').length != 0){
    $$('.isEmail')[0].addEventListener('input',function () {
        if ($$('.email-confirm')[0].style.display = "block") {
            $$('.email-confirm')[0].style.display = "none";
        }
    })
}

// $$('.selected-item')[0].addEventListener('click',function () {
//     var compainModalHeight = $$('#modal-complain')[0].getElementsByClassName('select-items')[0].offsetHeight;
//     var windowHeight = window.pageYOffset;
//     var selectItemsBlock = $$('.select-items')[0];
//     if(compainModalHeight+210 > windowHeight) {
//         selectItemsBlock.style.height = compainModalHeight-60+'px';
//         selectItemsBlock.style.overflowY = 'scroll'
//     } else {
//         selectItemsBlock.style.height = 'fit-content';
//         selectItemsBlock.style.overflowY = 'hidden'
//     }
// },false)
//
//

document.addEventListener('DOMContentLoaded', function(){
    $$('.clear-compare')[0].addEventListener('click',function () {
        for (let i = 1; i < 15; i++) {
            localStorage.removeItem("vzo_compare"+ i);
            location.reload();
            $$('.compare-block')[0].style.display = 'none';
        }
    })

})


document.addEventListener('DOMContentLoaded', function(){
    var compareItems = null;
    for (let i = 1; i < 15; i++) {
        var compareItemsByCat = localStorage.getItem('vzo_compare' + i);
        if (compareItemsByCat != null) {
            var compareItemsCatArr = compareItemsByCat.split(',');
            compareItems += compareItemsCatArr.length;
        }
    }
    if(compareItems != null) {
        setCompareBlockDynamicData(compareItems);
    }
    $$('.close-compare-block')[0].addEventListener('click', function () {
        $$('.compare-block')[0].style.display = 'none';
    })
});

function setCompareBlockDynamicData(compareItemsCount,newAdded = false,elem=null) {
    // if(compareItemsCount > 9) {
    //     compareItemsCount = Number(compareItemsCount.toString().slice(-1));
    // }
    var endOfCompareWord = '';
    if(compareItemsCount > 1) {
        $$('.count-of-comparing-items')[0].innerText = '+' + (compareItemsCount-1);
    }
    endOfCompareWord = (compareItemsCount == 1) ? 'ие' : (compareItemsCount <= 4 && compareItemsCount != 0) ? 'ия' : (compareItemsCount == 0 || compareItemsCount >=5 && compareItemsCount <=9) ? 'ий' : '';
    if($$('.compare-block-text').length != 0) {
        $$('.compare-block-text')[0].innerText = compareItemsCount + ' предложен'+endOfCompareWord+' к сравнению';
    }
    if(compareItemsCount > 0 && $$('.compare-block').length != 0 && newAdded == true) {
        $$('.compare-block')[0].style.display = 'flex';
    }else {
        $$('.compare-block')[0].style.display = 'none';
    }
    if(compareItemsCount > 1) {
        if ($$('.compare-items-block').length) $$('.compare-items-block')[0].classList.remove('hiddenStyle');
        $$('.count-of-comparing-items')[0].style.display = 'flex';
    } else {
        if ($$('.compare-items-block').length) $$('.compare-items-block')[0].classList.add('hiddenStyle');
        $$('.count-of-comparing-items')[0].style.display = 'none';
    }
    if($$('.addedToCompare').length != 0) {
        if(elem != null && elem.querySelectorAll('.addedToCompare').length != 0) {
            var firsComparedItem = elem.querySelectorAll('.logo img')[0].src;
        } else {
            var firsComparedItem = $$('.addedToCompare')[0].closest('.card').querySelectorAll('.logo img')[0].src;
        }
        if($$('.compare-block').length != 0) {
            $$('.compare-block .compare-item img')[0].src = firsComparedItem;
        }
    }
}
if(document.getElementsByClassName('flamp-review-slider').length>0){
    slideShow({
        element:'.flamp-review-slider',
        slidesToShow:3,
        slidesToScroll:1,
        circleScroll:true,
        height:'400',
        responsive: [
            {
                breakpoint: 1200,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 1
                }
            },
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ]
    })
}
let getCurrentDate = () => {
    let Data = new Date();
    let year = Data.getFullYear();
    let Month = Data.getMonth();
    let month = Month < 9 ? '0' + (Month + 1) : Month + 1;
    let day = Data.getDate();
    return [day, month, year];
}

let wordDeclension = (val, el) => {
    val = Math.abs(val) % 100;
    let sumVal = val % 10;
    if(val > 10 && val < 20){
        return el[2];
    }
    if(sumVal > 1 && sumVal < 5){
        return el[1];
    }
    if(sumVal === 1){
        return el[0];
    }
    return el[2];
}

if ((document.querySelector('.g-hidden-recaptcha') || document.querySelector('.captcha-submit')) && !document.querySelector(".g-recaptcha[data-size='invisible']")) {
    let hiddenCaptchaElement = document.createElement('div');
    hiddenCaptchaElement.classList.add('g-recaptcha');
    hiddenCaptchaElement.dataset.sitekey = '6LdyDPQjAAAAAApILG4zu-QDa9h4UsVLCzlwrC_Q';
    hiddenCaptchaElement.dataset.callback = 'hiddenRecaptchaCallback';
    hiddenCaptchaElement.dataset.size = 'invisible';
    hiddenCaptchaElement.style.position = 'absolute';
    hiddenCaptchaElement.style.top = '0';
    document.body.appendChild(hiddenCaptchaElement);

    if(typeof grecaptcha === 'undefined') {
        grecaptcha = {};
    }
    grecaptcha.ready = function(cb){
        if(typeof grecaptcha === 'undefined') {
            // window.__grecaptcha_cfg is a global variable that stores reCAPTCHA's
            // configuration. By default, any functions listed in its 'fns' property
            // are automatically executed when reCAPTCHA loads.
            const c = '___grecaptcha_cfg';
            window[c] = window[c] || {};
            (window[c]['fns'] = window[c]['fns']||[]).push(cb);
        } else {
            cb();
        }
    }

    grecaptcha.ready(function () {
        grecaptcha.confirmed = function (callback) {
            hiddenCaptchaElement.style.top = (document.documentElement.scrollTop + 30) + 'px';
            grecaptcha.executed = callback;
            grecaptcha.execute();
        };
    });

    var hiddenRecaptchaCallback = function () {
        grecaptcha.executed();
    };

    document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('.captcha-submit').forEach(button => {
            let form = button.closest('form');

            if (!form) return;

            form.addEventListener('submit', (e) => {
                e.preventDefault();

                grecaptcha.confirmed(function () {
                    let input = document.createElement("input");
                    input.type = "hidden";
                    input.name = "g-recaptcha-response";
                    input.value = grecaptcha.getResponse();
                    form.appendChild(input);

                    form.submit();
                })
            });
        })
    });
}

if ($$(".g-recaptcha").length > 0 || document.querySelector('.g-hidden-recaptcha')) {
    let scriptEl = document.createElement("script");
    scriptEl.src = 'https://www.google.com/recaptcha/api.js';
    document.head.appendChild(scriptEl);
}let fullPage = document.body;
let scrollPageUp = "scroll-page-up";
let scrollPageDown = "scroll-page-down";
let scrollVal = 0;

// window.addEventListener("scroll", () => {
//     let searchBlock = $$('.search-block')[0];
//     scrollSearchBlock = "scroll-search-block";
//
//     let currentScroll = window.pageYOffset;
//     if (currentScroll <= 0) {debugger
//         fullPage.classList.remove(scrollPageUp);
//         searchBlock.classList.remove(scrollSearchBlock);
//         return;
//     }
//     if (currentScroll > scrollVal && !fullPage.classList.contains(scrollPageDown)) {debugger
//         fullPage.classList.remove(scrollPageUp);
//         fullPage.classList.add(scrollPageDown);
//         searchBlock.classList.remove(scrollSearchBlock);
//     } else if (currentScroll < scrollVal && fullPage.classList.contains(scrollPageDown)) {debugger
//         fullPage.classList.remove(scrollPageDown);
//         fullPage.classList.add(scrollPageUp);
//         searchBlock.classList.add(scrollSearchBlock);
//     }
//     scrollVal = currentScroll;
// });

function searchToggle() {
    let searchBlock = $$('.search-block')[0];
    let closeBtn = $$('.search-close-btn')[0];
    let iconSearch = $$('.icon-search')[0];
    let searchInput = document.querySelector('.ya-site-form__input-text');
    if (searchBlock.classList.contains('open-search-block')) {
        searchBlock.closest('.header').classList.remove('search')
        searchBlock.classList.remove('open-search-block');
        closeBtn.style.display = 'none';
        iconSearch.style.display = 'inline-block';
    } else {
        searchBlock.closest('.header').classList.add('search')
        searchBlock.classList.add('open-search-block');
        closeBtn.style.display = 'block';
        iconSearch.style.display = 'none';
        searchInput.focus();
    }
}

document.addEventListener('DOMContentLoaded', function () {
    var favorites = localStorage.getItem('vzo');
    var favoritesBlock = $$('.fav-items-block')[0];

    if (favorites != null && favoritesBlock.length != 0) {

        favorites = favorites.split(',');
        if (favorites.length >= 1) {
            favoritesBlock.classList.remove('hiddenStyle')
            $$('.fav-items-count')[0].innerHTML = favorites.length;
            $$('.fav-items-count')[0].style.display = 'flex';
        } else {
            favoritesBlock.classList.add('hiddenStyle')
        }
    }
    // var compareItems = localStorage.getItem('vzo_compare'+window.CATEGORY_ID);
    var compareItems = null;
    for (let i = 1; i < 15; i++) {
        var compareItemsByCat = localStorage.getItem('vzo_compare' + i);
        if (compareItemsByCat != null) {
            compareItems += compareItemsByCat.split(',').length;
        }
    }
    if ($$('.compare-items-count').length != 0) {
        var compareItemsCountBlock = $$('.compare-items-count')[0];
        if (compareItems != null && Number(compareItems) >= 2 ) {
            compareItemsCountBlock.innerHTML = compareItems;
            compareItemsCountBlock.style.display = 'flex';
            compareItemsCountBlock.closest('.more-info-el').classList.remove('hiddenStyle');
        } else {
            compareItemsCountBlock.closest('.more-info-el').classList.add('hiddenStyle');
            compareItemsCountBlock.style.display = 'none';
        }
    }
});

function menuVisibility(tabName) {
    let headerMenu = $$('.header-bottom-menu');
    if (headerMenu.length != 0 && tabName.length != 0) {
        headerMenu.forEach(function (menu) {
            let menuName = menu.getAttribute('data-menu');
            if (menuName === tabName) {
                menu.classList.remove('h-bottom-hidden');
            } else {
                menu.classList.add('h-bottom-hidden');
            }
        });
    } else {
        console.log('Error header menu.');
    }
}

let headerTabs = $$('.header-top-block .ht-item');
headerTabs.forEach(function (tab) {
    tab.addEventListener('click', function () {
        let tabTitle = tab.querySelector('.ht-item-title');
        headerTabs.forEach(function (hTab) {
            hTab.querySelector('.ht-item-title').classList.remove('ht-active');
        });

        tabTitle.classList.add('ht-active');

        let targetTab = tab.getAttribute('data-target');
        menuVisibility(targetTab);
    })
})

document.querySelector('.search-block__button').addEventListener('click', () => {
    let yandexSearchButton = document.querySelector('.ya-site-form__submit');

    if (yandexSearchButton) yandexSearchButton.click();
})

// $$('#headerMenu a').forEach(function(link){
//     link.addEventListener('click', g('menu'));
// });

$$('.footer-social-link').forEach((el) => {
    el.addEventListener('click', () => {
        let link = el.getAttribute('data-href');
        window.open(link, '_blank').focus();
    });
});
function showModalBlock() {
    let modals = document.querySelectorAll('[data-modal]');
    modals.forEach(function (trigger) {
        trigger.addEventListener('click', function (event) {
            event.preventDefault();
            let modal = document.getElementById(trigger.dataset.modal);
            modal.classList.add('open');
            let exits = document.querySelectorAll('.modal-exit');
            exits.forEach(function (exit) {
                exit.addEventListener('click', function (event) {
                    event.preventDefault();
                    modal.classList.remove('open');
                });
            });
        });
    });
}

function openedModalBlock() {
    document.querySelectorAll('.modal-block.open').forEach(modal => {
        let exits = document.querySelectorAll('.modal-exit');
        exits.forEach(function (exit) {
            exit.addEventListener('click', function (event) {
                event.preventDefault();
                modal.classList.remove('open');
            });
        });
    })
}

document.addEventListener('DOMContentLoaded', showModalBlock);
document.addEventListener('DOMContentLoaded', openedModalBlock);
if($$('#backCallForm').length != 0 && $$('#backCallForm')[0].getElementsByClassName('btn').length != 0) {
    $$('#backCallForm')[0].getElementsByClassName('btn')[0].addEventListener('click',function (e) {

        if (!$$('#backCallForm')[0].checkValidity()) {
            alert('Неверный формат номера телефона');
            return false;
        }

        e.preventDefault();
        var token = document.getElementsByName('csrf-token')[0].attributes[1].nodeValue;
        var name = $$('#cName')[0].value;
        var phone = $$('#cPhone')[0].value;
        var description = $$('#cDescription')[0].value;


        // ^\+?[0-9 ()-]*


        // var email = $$('#c_email')[0].value;
        if (!phone) {
            alert('Вы не заполнили все поля');
            return false;
        }
        // if (!$$('#confirm-checkbox')[0].checked) {
        //     alert('Вы не подтвердили согласие на обработку персональных данных');
        //     return false;
        // }
        grecaptcha.confirmed(function () {
            let data = {
                'g-recaptcha-response': grecaptcha.getResponse(),
                _token: token,
                name: name,
                phone: phone,
                description: description
            };
            fetch('/forms/call_me', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json;charset=utf-8',
                    'X-CSRF-TOKEN': token
                },
                body: JSON.stringify(data)
            }).then((res) => {
                return res.json()
                    .then((data) => {
                        grecaptcha.reset();
                        $$('#modal_call_back')[0].classList.remove('open');
                        if (data.status === 'success' && data.message != null) {
                            let modalNotify = document.getElementById('modal-notify-success');
                            modalNotify.querySelectorAll('.notify-message')[0].innerHTML = data.message;
                            modalNotify.classList.toggle('open')
                            $$('#backCallForm')[0].reset();
                        } else if (data.status === 'error' && data.message != null) {
                            let modalNotify = document.getElementById('modal-notify-error');
                            modalNotify.querySelectorAll('.notify-message')[0].innerHTML = data.message;
                            modalNotify.classList.toggle('open')
                            $$('#backCallForm')[0].reset();
                        }
                    }).catch((err) => {
                        grecaptcha.reset();
                        console.log(err);
                        $$('#modal_call_back')[0].classList.remove('open');
                        let modalNotify = document.getElementById('modal-notify-error');
                        modalNotify.querySelectorAll('.notify-message')[0].innerHTML = "Что-то пошло не так. <br> Пожалуйста, попробуйте снова.";
                        modalNotify.classList.toggle('open');
                    })
            });
        })
    },false);
}

document.querySelectorAll('.modal-exit').forEach(function (exit) {
    exit.addEventListener('click', function (event) {
        event.preventDefault();
        var modal = exit.closest('.modal-block');
        modal.classList.remove('open');
    });
});let toTopBtn = $$('#toTop')[0];
if (toTopBtn !== undefined) {
    window.addEventListener('scroll', () => {
        window.scrollY > 100 ? toTopBtn.style.display = 'inline-block' : toTopBtn.style.display = 'none';
    });

    toTopBtn.addEventListener('click', () => {
        console.log('click');
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });
}
var firstCol = $$('.first-col');
var secondCol = $$('.second-col');

for(let i = 0; i<firstCol.length; i++){
    firstCol[i].addEventListener('mouseenter', function(){
        firstCol[i].style.background = "#D3E4FD";
        secondCol[i].style.background = "#F3F8FF";
    });
    secondCol[i].addEventListener('mouseenter', function(){
        firstCol[i].style.background = "#D3E4FD";
        secondCol[i].style.background = "#F3F8FF";
    });
    firstCol[i].addEventListener('mouseout', function(){
        firstCol[i].style.background = "#E1EDFF";
        secondCol[i].style.background = "#fff";
    });
    secondCol[i].addEventListener('mouseout', function(){
        firstCol[i].style.background = "#E1EDFF";
        secondCol[i].style.background = "#fff";
    });
}

// скрытие таблицы
let addTableWrap = (selector) => {
    selector = document.querySelectorAll('.content table');
    if ((selector).length > 0) {
        (selector).forEach((table) => {
            if (table.classList.contains('total_cards_table_js')) {
                return;
            }
            let tr = table.querySelectorAll('tr');

            let wrapper = document.createElement('div');
            wrapper.className = "table-scroll";
            table.parentNode.insertBefore(wrapper, table);
            wrapper.appendChild(table);

            if(tr.length > 5){
                table.closest('.table-scroll').classList.add('table-toggle-wrap');
                let button = document.createElement('span');
                button.className = 'table-toggle-btn down';
                button.textContent = 'Показать всё';
                table.after(button);
                let i = 0;
                table.querySelectorAll('tr').forEach((tr) => {
                    i++;
                    if (i>5) tr.className = 'hide';
                });
            } else {
                table.closest('.table-scroll').classList.add('without-toggle');
            }
        });
    }
}

if ($$('.content').length > 1) {
    addTableWrap('.content table');

    $$('.table-toggle-btn').forEach((button) => {
        button.addEventListener('click', () => {
            if (button.classList.contains('down')) {
                button.classList.add('up');
                button.classList.remove('down');
                button.textContent = 'Скрыть';
                button.previousSibling.querySelectorAll('tr.hide').forEach((tr) => {
                    tr.classList.add('show');
                    tr.classList.remove('hide');
                });
                if(button.closest('.panel') != null){
                    button.closest('.panel').style.maxHeight = 'fit-content';
                }
            } else {
                button.classList.add('down');
                button.classList.remove('up');
                button.textContent = 'Показать всё';
                button.previousSibling.querySelectorAll('tr.show').forEach((tr) => {
                    tr.classList.add('hide');
                    tr.classList.remove('show');
                });
            }
        });
    });
}
let citiesForCategory = {};

if($$('.modal-list-container a').length != 0) {
    $$('.modal-list-container a').forEach(item => {
        item.addEventListener('click', function () {
            document.cookie = "GEO_CITY=" + this.dataset.city + "; path=/;";
        });
    });

    $$('.modal-list-container .modal-list__el > span').forEach(item => {
        item.addEventListener('click', function () {
            document.cookie = "GEO_CITY=" + this.dataset.city + "; path=/;";
            document.querySelector('#modal-city').classList.remove('open');
        });
    });
}


if($$('.geo_cities_check').length != 0) {
    $$('.geo_cities_check')[0].addEventListener('click',function (e) {
        var elem = e.target;
        document.cookie = "GEO_CITY=" + elem.dataset.value + "; path=/;";
        var pageUrl = document.URL;
        var cityUrl = elem.dataset['url'];
        elem.style.display = 'none';

        if (cityUrl === undefined) {
            return false;
        }

        let data = {
            '_token': document.getElementsByName('csrf-token')[0].attributes[1].nodeValue,
            'action': 'before'
        };

        fetch('/actions/online-proverka-na-koronavirus', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json;charset=utf-8'
            },
            body: JSON.stringify(data)
        }).then((res) => {
        }).catch((err) => {
            console.log(err);
        });

        var re = /\/$/;
        pageUrl = pageUrl.replace(re,'');
        location.href = '/' + cityUrl;
    })
}

if($$('[data-modal="modal-city"]').length != 0) {
    $$('[data-modal="modal-city"]').forEach(item => {
        item.addEventListener('click', function () {
            loadCitiesInStorageByPage();
        })
    });
}

let pageCitiesLoaded = false;
function loadCitiesInStorageByPage() {
    if (window.location.pathname.startsWith('/zalogi')) {
        let params = {};

        if (document.querySelector('#zalogi-geo-modal')) {
            params = {
                breadcrumb: document.querySelector('#zalogi-geo-modal').dataset.breadcrumb
            }
        }
        
        loadCitiesInStorage('/actions/zalogi_cities_new', 'getCitiesZalogi', !pageCitiesLoaded, params);
        pageCitiesLoaded = true;

        return 'getCitiesZalogi';
    }

    loadCitiesInStorage('/actions/zaimy/geo/get_all_cities', 'geoCities');

    return 'geoCities';
}

function loadCitiesInStorage(actionUrl, storageName, update = false, params = {}) {
    if(localStorage.getItem(storageName) == null || localStorage.getItem(storageName) == '' || localStorage.getItem(storageName) == '{}' || update) {
        fetch(actionUrl + '?' + new URLSearchParams(params), {
            method: 'GET',
        }).then((res) => {
            return res.json().then((data) => {
                var geoCities = {};
                data.forEach(function(items) {
                    for (var key in items) {
                        // skip loop if the property is from prototype
                        if (!items.hasOwnProperty(key)) continue;
                        var value = items[key];
                        value.forEach((item) => {
                            geoCities[item[1]] = item;
                        })
                    }
                });
                localStorage.setItem(storageName,JSON.stringify(geoCities));

                loadCitiesForCategory();
            }).catch((err) => {
                console.log(err);
            });
        })
    } else {
        loadCitiesForCategory();
    }

    return false;
}

function loadCitiesForCategory() {
    if (Object.keys(citiesForCategory).length > 0) return;

    if (window.location.pathname.startsWith('/zalogi')) {
        console.log(JSON.parse(localStorage.getItem('getCitiesZalogi')));
        citiesForCategory = JSON.parse(localStorage.getItem('getCitiesZalogi'));
        setCitiesInModal();
        return;
    }

    let pageType = 'listing';

    if (window.location.pathname.includes('business/franchise')) {
        pageType = 'franchise';
    }

    let data = {
        pageType: pageType,
        category: window.CATEGORY_ID
    };
    let token = document.getElementsByName('csrf-token')[0].attributes[1].nodeValue;

    fetch('/actions/geo/get_cities', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json;charset=utf-8',
            'X-CSRF-TOKEN': token
        },
        body: JSON.stringify(data)
    }).then((res) => {
        return res.json().then(value => {

            value.forEach(item => {
                citiesForCategory[item[1]] = item;
            })
            setCitiesInModal();
        });
    }).catch((err) => {
        console.log(err);
    });

}

if($$('#searchCity').length != 0) {
    $$('#searchCity')[0].addEventListener('keyup', function (e) {
        let storageNameByPage = loadCitiesInStorageByPage();

        searchCityInputEvent(e, storageNameByPage);
    },false)
}

function searchCityInputEvent(e, cityStorageName) {
    var elem = e.target;
    var modalBlock = elem.closest('.modal-block');

    var resetSearchHint = modalBlock.querySelector('.reset-search-hint');
    var citySearchIcon = modalBlock.querySelector('.city-search-icon');
    var modalListContainer = modalBlock.querySelector('.modal-list-container');
    if(modalBlock.querySelector('.modal-searched-data-block')) {
        var modalSearchedDataBlock = modalBlock.querySelector('.modal-searched-data-block');
    }
    var searchHint = elem.value;
    if(searchHint.length != 0 && resetSearchHint) {
        citySearchIcon.classList.add('display_none');
        resetSearchHint.classList.remove('display_none');
        resetSearchHint.addEventListener('click',function (){
            elem.value = '';
            elem.classList.remove('focusedInp');
            modalListContainer.style.display = 'flex';
            if(modalSearchedDataBlock != undefined) {
                modalSearchedDataBlock.style.display = 'none';
            }
            citySearchIcon.classList.remove('display_none');
            resetSearchHint.classList.add('display_none');
        })
    }
    if(searchHint && modalSearchedDataBlock) {
        var matchesWithSearch = '';
        var cities = {
            ...JSON.parse(localStorage.getItem(cityStorageName)),
            ...citiesForCategory
        };

        // var counter = 0;
        // var maxElements = 5;

        if(cities != '' || cities != null) {
            for (var key in cities) {
                // skip loop if the property is from prototype
                if (!cities.hasOwnProperty(key)) continue;
                var city = cities[key];
                key = key.trim();
                searchHint = searchHint.trim();
                if(key.toLowerCase().indexOf(searchHint.toLowerCase()) == 0) {
                    var regexp = new RegExp( `(^${searchHint})(.*)`, 'gi' );
                    var matchesCity = [...key.matchAll(regexp)];
                    if(matchesCity.length != 0) {
                        matchesCity = matchesCity[0];

                        if (window.CATEGORY_ID == 1 || citiesForCategory[city[1]]) {
                            matchesWithSearch += `<div class="modal-list__el"><a href="${city[0]}" data-name="${city[1]}" data-city="${city[2]}"><span>${matchesCity[1]}</span><span class="not-matches-with-search">${matchesCity[2]}</span></a></div>`;
                        } else {
                            matchesWithSearch += `<div class="modal-list__el"><span data-name="${city[1]}" data-city="${city[2]}"><span>${matchesCity[1]}</span><span class="not-matches-with-search">${matchesCity[2]}</span></span></div>`;
                        }

                        // counter++;
                        // if (counter == maxElements) break;
                    }
                }
            }
            if(matchesWithSearch != '') {
                modalSearchedDataBlock.innerHTML = matchesWithSearch;
                modalListContainer.style.display = 'none';
                modalSearchedDataBlock.style.display = 'flex';
                elem.classList.add('focusedInp');

                updateEvents();
            }
        }
    } else {
        elem.classList.remove('focusedInp');
        if (resetSearchHint) {
            resetSearchHint.classList.add('display_none');
        }
        if (citySearchIcon) {
            citySearchIcon.classList.remove('display_none');
        }
        modalSearchedDataBlock.style.display = 'none';
        modalListContainer.style.display = 'flex';
    }
}

// Regoin
var YMapsLocal = localStorage.getItem('YMaps');
if (YMapsLocal == null) {
    var script = document.createElement("script");
    script.src = 'https://api-maps.yandex.ru/1.1/index.xml';
    document.head.appendChild(script);
    script.onload = function () {
        localStorage.setItem('YMaps', JSON.stringify(YMaps.location));
        window.city = YMaps.location.city;
    }
} else {
    YMapsLocal = JSON.parse(YMapsLocal);
    window.city = YMapsLocal.city;
}

// MetrikaID
var MetrikaID = localStorage.getItem('MetrikaID');
if (MetrikaID == null) {
    document.addEventListener("DOMContentLoaded", function(event) {
        if (yaCounter38176370 != null) {
            MetrikaID = yaCounter38176370.getClientID();
            window.clientID = MetrikaID;
            localStorage.setItem('MetrikaID', MetrikaID);
        }
    });
} else {
    window.clientID = MetrikaID;
}
document.addEventListener('DOMContentLoaded', function(){
    if (YMapsLocal != null && YMapsLocal.location) {
        window.city = YMapsLocal.location.city;   // Достанем в input регион (область)
    }
    if (window.load_city_from_yandex) {
        fetch("/actions/zaimy/geo/find_city_by_name?name="+window.city, {
            method: 'GET',
        }).then((res) => {
            return res.json().then((data) => {
                if($$('.your-geo-location').length != 0 && $$('.geo_cities_check').length != 0) {
                    var currentCityBlock = $$('.your-geo-location')[0].getElementsByTagName('b')[0];
                    var checkGeoCityBlock = $$('.geo_cities_check')[0];
                    if (data.url !== undefined) {
                        currentCityBlock.innerText = window.city;
                        checkGeoCityBlock.dataset['url'] =  data.url;
                        checkGeoCityBlock.dataset['name'] = data.imenitelny;
                        checkGeoCityBlock.dataset['value'] = data.url;
                    } else {
                        currentCityBlock.innerText = 'Москва';
                        checkGeoCityBlock.dataset['url'] = 'moskva';
                        checkGeoCityBlock.dataset['name'] = 'Москва';
                        checkGeoCityBlock.dataset['value'] = 'moskva';
                    }
                }
            }).catch((err) => {
                console.log(err);
            });
        })
    }
})

function updateEvents() {
    $$('.modal-list-container a').forEach(item => {
        item.addEventListener('click', function () {
            document.cookie = "GEO_CITY=" + this.dataset.city + "; path=/;";
        });
    });

    $$('.modal-list-container .modal-list__el > span').forEach(item => {
        item.addEventListener('click', function () {
            document.cookie = "GEO_CITY=" + this.dataset.city + "; path=/;";
            document.querySelector('.choose-city').innerHTML = this.innerHTML;
            document.querySelector('#modal-city').classList.remove('open');
        });
    });

    $$('.modal-searched-data-block a').forEach(item => {
        item.addEventListener('click', function () {
            document.cookie = "GEO_CITY=" + this.dataset.city + "; path=/;";
        });
    });

    $$('.modal-searched-data-block .modal-list__el > span').forEach(item => {
        item.addEventListener('click', function () {
            document.cookie = "GEO_CITY=" + this.dataset.city + "; path=/;";
            document.querySelector('.choose-city').innerHTML = this.dataset.name;
            document.querySelector('#modal-city').classList.remove('open');
        });
    });
}

function setCitiesInModal() {
    let modalListElements = document.querySelectorAll('.modal-list-container .modal-list__el > *');

    if (!modalListElements.length) return;

    let cities = null;
    if (window.CATEGORY_ID == 1) {
        cities = JSON.parse(localStorage.getItem('geoCities'));
    }

    modalListElements.forEach(modalListElement => {
        let city = citiesForCategory[modalListElement.innerHTML];

        if (cities && !city) {
            city = cities[modalListElement.innerHTML];
        }

        if (!city) return;

        modalListElement.parentElement.innerHTML = `
            <a href="${city[0]}" data-city="${city[2]}">${city[1]}</a>
        `;
    });

    updateEvents();
}

document.addEventListener("DOMContentLoaded", () => {
    let cookiesBlockVisibility = localStorage.getItem('cookies-hide-block');
    let cookiesBlock = $$('.cookies-info');
    if(cookiesBlock.length >0) {
        cookiesBlock = cookiesBlock[0];
        if(cookiesBlockVisibility != undefined && cookiesBlockVisibility == 'true') {
            cookiesBlock.style.display = 'none';
        } else {
            cookiesBlock.style.display = 'block';
            cookiesBlock.getElementsByClassName('btn')[0].addEventListener('click',function (){
                cookiesBlock.style.display = 'none';
                localStorage.setItem('cookies-hide-block',true);
            })
        }
    }
});let expertHiddenBlock = $$('.data-more-less');
    expertHiddenBlock.forEach(function (value, index) {
    let buttonShow = value.querySelector('.button_show'),
        buttonHide = value.querySelector('.button_hide'),
        gradientBlock = value.querySelector('.data-more-less-body');
    buttonShow.addEventListener('click', event => {
        buttonHide.style.display = 'flex';
        buttonShow.style.display = 'none';
        gradientBlock.classList.remove('active');
        gradientBlock.classList.remove('hidden-info');

    });
    buttonHide.addEventListener('click', event => {
        buttonShow.style.display = 'flex';
        buttonHide.style.display = 'none';
        gradientBlock.classList.add('active');
        gradientBlock.classList.add('hidden-info');
    });
});