function numerator(elClass, givenClass, startNr, giveInnerText) {
    let obj = document.querySelectorAll(`.${elClass}`);
    let counter = startNr;
    obj.forEach((el) => {
        el.classList.add(`${givenClass}-${counter}`);
        if (giveInnerText) {
            el.innerText = counter;
        }
        counter++;
    });
}
numerator('number', 'number', 1, true);

// CAT DROPDOWN

const catParent = document.querySelector('.service-li.active');
const cat = document.querySelector('.cat-dropdown');

const lis = document.querySelectorAll('.cat-li');
const catBlock = document.querySelectorAll('.cat-data-block');

const numerator1 = (className) => {
    const items = document.querySelectorAll(`.${className}`);
    items.forEach((el, i) => {
        el.classList.add(`${className}-${i + 1}`);
        el.setAttribute('data-index', i + 1);
    });
};

numerator1('cat-li');
numerator1('cat-bg');
numerator1('cat-data-block');

let checker = true;
let last;

catBlock.forEach((el) => {
    const imgPath = el.getAttribute('data-img');
    el.style.background = `linear-gradient(
        to right,
        rgba(255, 255, 255, 1),
        rgba(255, 255, 255, 0.4)
    ),
    url(${imgPath}), center, no-repeat`;
    el.style.backgroundSize = 'cover';
});

catParent.addEventListener('click', () => {
    cat.classList.toggle('active');
    if (checker) {
        catBlock[0].classList.toggle('active');
        lis[0].classList.toggle('active');
        checker = false;
    } else {
        if (last) {
            catBlock[last].classList.toggle('active');
            lis[last].classList.toggle('active');
        } else {
            catBlock[0].classList.toggle('active');
            lis[0].classList.toggle('active');
        }
    }
});

lis.forEach((el) => {
    el.addEventListener('click', () => {
        last = el.getAttribute('data-index') - 1;
        catBlock.forEach((el) => {
            el.classList.remove('active');
        });
        catBlock[last].classList.add('active');
        lis.forEach((el) => {
            el.classList.remove('active');
        });
        el.classList.add('active');
    });
});
