// DESKTOP LANGUAGE SELECT ===================
let langList = document.querySelector('.language-list');
let langBlock = document.querySelector('.language-select');

langBlock.addEventListener('mouseover', function () {
    langList.classList.remove('hidden');
});
langBlock.addEventListener('mouseout', function () {
    langList.classList.add('hidden');
});
// DESKTOP LANGUAGE SELECT end ===================
// ACCORDION SCRIPT ==========================
let accordionTrigger = document.querySelectorAll('.footer-title-wrapper');
let accordionElement = document.querySelectorAll('.footer-content');

for (let i = 0; i < accordionTrigger.length; i++) {
    accordionTrigger[i].addEventListener('click', function () {
        accordionTrigger.forEach(function (item) {
            if (item !== accordionTrigger[i]) {
                item.classList.remove('active');
            }
        });
        accordionElement.forEach(function (el) {
            if (el !== accordionElement[i]) {
                el.classList.remove('visible');
            }
        });
        accordionTrigger[i].classList.toggle('active');
        accordionElement[i].classList.toggle('visible');
    });
}
// ACCORDION SCRIPT end ==========================

// BURGER SCRIPT ===============================
let burgerTrigger = document.querySelector('.burger');
let burgerElement = document.querySelector('.nav-inner-burger-container');
let body = document.querySelector('body');

burgerTrigger.addEventListener('click', function () {
    burgerElement.classList.remove('hidden-burger');
    body.style.overflow = 'hidden';
});

let burgerTriggerClose = document.querySelector('.burger-close');

burgerTriggerClose.addEventListener('click', function () {
    burgerElement.classList.add('hidden-burger');
    body.style.overflow = 'auto';
});
// BURGER LANGUAGE ================================
let langTrig = document.querySelector('.language-trig');
langTrig.addEventListener('click', () => {
    langTrig.classList.toggle('triggered');
    currencyTrig.classList.remove('triggered');
});
let currencyTrig = document.querySelector('.price-view');
currencyTrig.addEventListener('click', () => {
    langTrig.classList.remove('triggered');
    currencyTrig.classList.toggle('triggered');
});
// BURGER LANGUAGE end ===========================
// BURGER SCRIPT end ===============================

// CHECKBOX ========================================
function indexer(
    elClassName,
    addedElClassName,
    triggerClassName,
    addedTriggerClassName,
    startNumber
) {
    let counter = startNumber;
    let obj = document.querySelectorAll(`.${elClassName}`);
    obj.forEach((el) => {
        el.classList.add(`${addedElClassName}-${counter}`);
        counter++;
    });
    counter = startNumber;
    let trig = document.querySelectorAll(`.${triggerClassName}`);
    trig.forEach((el) => {
        el.classList.add(`${addedTriggerClassName}-${counter}`);
        counter++;
    });
}
indexer('option-checkbox', 'option-checkbox', 'option', 'option', 1);

let trig = document.querySelectorAll('.option');
let obj = document.querySelectorAll('.option-checkbox');

for (let i = 0; i < document.querySelectorAll('.option').length; i++) {
    trig[i].addEventListener('click', () => {
        trig.forEach((el) => {
            el.classList.remove('option-checked');
        });
        obj.forEach((el) => {
            el.classList.remove('option-checkbox-checked');
        });

        trig[i].classList.add('option-checked');
    });
}
// CHECKBOX end ===================================

// LOGIN/SIGNUP ======================================
let loginBtn = document.querySelector('.logged-false');
let loginFormSection = document.querySelector('.sign-up');
let loginForm = document.querySelector('.login-form');
let regBtn = document.querySelector('.sign-up-btn');
let regForm = document.querySelector('.registration-form');
let loginCloseBtn = document.querySelectorAll('.sign-up-exit-img');
let loginBtnReturnLink = document.querySelector('.sign-up-btn-return');
let forgottenPass = document.querySelector('.forgot-pass');
let passRecNr = document.querySelector('.password-recovery-nr');
let passRecSMS = document.querySelector('.password-recovery-sms');
let smsTrig = document.querySelector('.sms-trigger');
let signUpWrapper = document.querySelector('.sign-up-wrapper');
let signUpContainer = document.querySelector('.sign-up-container');
let burgerSignIn = document.querySelector('.burger-sign-in');
let burgerSignUp = document.querySelector('.burger-sign-up');

burgerSignIn.addEventListener('click', () => {
    burgerElement.classList.add('hidden-burger');
    regForm.style.display = 'none';
    passRecNr.style.display = 'none';
    passRecSMS.style.display = 'none';
    loginFormSection.style.display = 'block';
    body.style.overflowY = 'hidden';
});

burgerSignUp.addEventListener('click', () => {
    burgerElement.classList.add('hidden-burger');
    regForm.style.display = 'block';
    passRecNr.style.display = 'none';
    passRecSMS.style.display = 'none';
    loginFormSection.style.display = 'block';
    loginForm.style.display = 'none';
    body.style.overflowY = 'hidden';
});

signUpContainer.addEventListener('click', (event) => {
    let isClickInsideElement = signUpWrapper.contains(event.target);
    if (!isClickInsideElement) {
        loginFormSection.style.display = 'none';
        regForm.style.display = 'none';
        passRecNr.style.display = 'none';
        passRecSMS.style.display = 'none';
        loginForm.style.display = 'block';
        body.style.overflowY = 'auto';
    }
});

loginBtn.addEventListener('click', () => {
    regForm.style.display = 'none';
    passRecNr.style.display = 'none';
    passRecSMS.style.display = 'none';
    loginFormSection.style.display = 'block';
    body.style.overflowY = 'hidden';
});

loginCloseBtn.forEach((el) => {
    el.addEventListener('click', () => {
        loginFormSection.style.display = 'none';
        regForm.style.display = 'none';
        passRecNr.style.display = 'none';
        passRecSMS.style.display = 'none';
        loginForm.style.display = 'block';
        body.style.overflowY = 'auto';
    });
});

regBtn.addEventListener('click', (event) => {
    regForm.style.display = 'block';
    loginForm.style.display = 'none';
});
loginBtnReturnLink.addEventListener('click', () => {
    regForm.style.display = 'none';
    loginForm.style.display = 'block';
});

forgottenPass.addEventListener('click', () => {
    passRecNr.style.display = 'block';
    loginForm.style.display = 'none';
});
smsTrig.addEventListener('click', () => {
    passRecNr.style.display = 'none';
    passRecSMS.style.display = 'block';
});
// LOGIN/SIGNUP end ==================================

// 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 numerator = (className) => {
    const items = document.querySelectorAll(`.${className}`);
    items.forEach((el, i) => {
        el.classList.add(`${className}-${i + 1}`);
        el.setAttribute('data-index', i + 1);
    });
};

numerator('cat-li');
numerator('cat-bg');
numerator('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');
    });
});
