function maxLengthCheck(object) {
    if (object.value.length > object.max.length)
        object.value = object.value.slice(0, object.max.length)
}

function isNumeric(evt) {
    let theEvent = evt || window.event;
    let key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode(key);
    let regex = /[0-9]|\./;
    if (!regex.test(key)) {
        theEvent.returnValue = false;
        if (theEvent.preventDefault) theEvent.preventDefault();
    }
}


// 
// 
let heart = document.querySelectorAll('#product-heart-id');

for (let i = 0; i < heart.length; i++) {
    heart[i].addEventListener('click', function() {
        heart[i].classList.toggle('bxs-heart')
    })
}

let search_category_btn = document.querySelector('#search-category');
let fe_search_popup = document.querySelector('.fe-search-popup');
let close_popup_btn = document.querySelector('#close-popup');
let popup_category = document.querySelectorAll('#popup-category');
let arrow = document.querySelector('#search-arrow');
let popup_category_all = document.querySelector('#popup-category-all');

search_category_btn.addEventListener('click', () => {
    fe_search_popup.style.display = 'block';
    document.querySelector('body').style.overflow = 'hidden';
});

close_popup_btn.addEventListener('click', () => {
    fe_search_popup.style.display = 'none';
    document.querySelector('body').style.overflow = 'auto';
});

arrow.addEventListener('click', () => {
    if (arrow.classList.contains('bxs-down-arrow')) {
        fe_search_popup.style.display = 'block';
        document.querySelector('body').style.overflow = 'hidden';
    }
})

window.addEventListener('click', f => {
    const target = f.target;
    if (target.closest('.fe-search-popup')) {
        fe_search_popup.style.display = 'none'
        document.querySelector('body').style.overflow = 'auto';
    }
})

for (let i = 0; i < popup_category.length; i++) {
    popup_category[i].addEventListener('click', () => {
        search_category_btn.innerText = popup_category[i].innerText;
        fe_search_popup.style.display = 'none';
        arrow.classList.remove('bxs-down-arrow');
        arrow.classList.add('bx-x');
        arrow.style.color = '#157DEC';
        arrow.style.fontSize = '1.4rem';
        arrow.style.background = 'white';
        arrow.style.borderRadius = '50%';
        arrow.style.cursor = 'pointer'
    });
    popup_category_all.addEventListener('click', () => {
        search_category_btn.innerText = popup_category_all.innerText;
        arrow.classList.add('bxs-down-arrow');
        arrow.classList.remove('bx-x');
        arrow.style.color = '#fff';
        arrow.style.fontSize = '1rem';
        arrow.style.background = 'none';
        arrow.style.borderRadius = 'none';
    })
    arrow.addEventListener('click', () => {
        arrow.classList.add('bxs-down-arrow');
        arrow.classList.remove('bx-x');
        search_category_btn.innerText = popup_category_all.innerText
        arrow.style.color = '#fff';
        arrow.style.fontSize = '1rem';
        arrow.style.background = 'none';
        arrow.style.borderRadius = 'none';
    })
};
// 
// 
// 
// 

// 
// 
// 
// 

let cat_link = document.querySelectorAll('.fe-categories-link');
let fe_cat = document.querySelectorAll('.fe-dropdown-cat')
let cat_box = document.querySelectorAll('fe-catalog-list-box')
let gray_bg = document.querySelector('.gray-bg')
let hd = document.querySelector('.header');
let back_page = document.querySelectorAll('.back-page-btn')

cat_link.forEach(catlink => {
    fe_cat.forEach(fecat => {
        catlink.addEventListener('click', (event) => {
            let target = event.target
            gray_bg.style.display = 'block'
            document.querySelector('body').style.overflow = 'hidden'
            if (target.id == catlink.id && catlink.id == fecat.id) {
                fecat.style.display = 'block'
            } else {
                fecat.style.display = 'none'
            }
        })
        back_page.forEach(back => {
            back.addEventListener('click', () => {
                fecat.style.display = 'none'
            })
        })
        gray_bg.addEventListener('click', () => {
            gray_bg.style.display = 'none'
            fecat.style.display = 'none'
            document.querySelector('body').style.overflow = 'auto'
            catlink.classList.remove('active-border')
        })
        hd.addEventListener('click', () => {
            gray_bg.style.display = 'none'
            fecat.style.display = 'none'
            catlink.classList.remove('active-border')
        })

    });
})

// 
// 
// 
// 

// 
// 
// 
// 
let log = document.querySelector('.log');
let fe_login_reg = document.querySelector('.fe-login-reg');
let close_lore_popup = document.querySelector('#close-lore-popup');
let code_send_btn = document.querySelector('#code-send-btn');
let fe_popup_code = document.querySelector('.fe-popup-code');
let back_page_btn = document.querySelector('#back-page-btn');
let input_tel = document.querySelector('#input-tel');
let fe_popup_confirm = document.querySelector('.fe-popup-confirm');
let change_num_btn = document.querySelector('#change-num-btn');
let open_login = document.querySelectorAll('#open-login');

change_num_btn.addEventListener('click', () => {
    fe_popup_code.classList.add('active')
    fe_popup_confirm.classList.remove('active')
})


let lit_cat_text = document.querySelectorAll('.fe-lit-cat-text');
let lit_cat_items = document.querySelectorAll('.fe-lit-cat-items');
let bxs_down_arrow = document.querySelectorAll('.bx-down-arrow');

lit_cat_text.forEach(text => {
    lit_cat_items.forEach(items => {
        bxs_down_arrow.forEach(darrow => {
            text.addEventListener('click', () => {
                if (text.id == items.id && text.id == darrow.id) {
                    items.classList.toggle('lit-sub-menu')
                    darrow.classList.toggle('bx-up-arrow')
                }
            })
        })
    })
})

let prod_size = document.querySelectorAll('.fe-prod-size')
let prod_act = document.getElementsByClassName('prod-active')
let prod_num = document.querySelector('#prod-size')

for (let x = 0; prod_size.length > x; x++) {
    prod_size[x].onclick = (event) => {
        let target = event.target
        let cur_prod = prod_act[0]
        if (prod_size[x].classList.contains('prod-none')) {
            return
        }
        if (prod_size[x].classList.contains('prod-active')) {
            return
        }
        if (cur_prod) {
            cur_prod.classList.remove('prod-active');
        }
        if (cur_prod !== target) {
            target.classList.add('prod-active')
        }
        prod_num.innerText = target.innerText

    }

}
open_login.forEach(oplog => {
    oplog.addEventListener('click', () => {
        fe_login_reg.classList.add('active');
        document.querySelector('body').style.overflow = 'hidden'
    });
})

let info = document.querySelectorAll('.fe-prod-detail');
let bx_plus = document.querySelectorAll('.pr-pl');
let prod_detail = document.querySelectorAll('.prod-detail');

info.forEach(more => {
    prod_detail.forEach(detail => {
        bx_plus.forEach(plus => {
            more.addEventListener('click', () => {
                if (more.id == detail.id && more.id == plus.id) {
                    plus.innerText = plus.innerText === '+' ? '-' : '+';
                    detail.style.display = detail.style.display === 'block' ? 'none' : 'block';
                }
            })
        })
    })
})


let ant_clr = document.querySelectorAll('.anthracite-pic')
let anth_act = document.getElementsByClassName('anth-act')

for (let x = 0; ant_clr.length > x; x++) {
    ant_clr[x].onclick = (event) => {
        let target = event.target
        let cur_prod = anth_act[0]
        if (ant_clr[x].classList.contains('anth-act')) {
            return
        }
        if (cur_prod) {
            cur_prod.classList.remove('anth-act');
            cur_prod.classList.add('anth-dct');
        }
        if (cur_prod !== target) {
            target.classList.add('anth-act')
            target.classList.remove('anth-dct')
        }

    }

}

// 
// 
// 
// 

let fav_ord = document.querySelectorAll('#fav-to-ord')


fav_ord.forEach(basket => {
    basket.addEventListener('click', function() {
        basket.classList.toggle('basket-act')
    })
});


let cn = document.querySelectorAll('.counter')
let counterVal = 1

function increment() {
    updateDisplay(++counterVal)
}

function dicrement() {
    if (counterVal < 1) {
        return
    }
    updateDisplay(--counterVal)
}

function updateDisplay(val) {
    for (let i = 0; i < cn.length; i++) {
        cn[i].innerHTML = val;

    }
}

// 
// 
// 
// 


let side = window.matchMedia("(max-width: 1350px)")
let closeSide = window.matchMedia("(min-width: 1350px)")
let main = document.querySelector('.fe-top-header-categories')
let open_sb = document.querySelector('#open-side-bar');
let close_sb = document.querySelector('#close-side-bar');
let list_li = document.querySelectorAll('.fe-header-category-list')
let list_text = document.querySelectorAll('#fe-header-category-list-text');
let cat_list_text = document.querySelectorAll('.category-list-text')

function sidFc(side) {
    if (side.matches) {
        open_sb.addEventListener('click', () => {
            main.classList.add('activated')
            gray_bg.classList.add('activated')
        })
        close_sb.addEventListener('click', () => {
            main.classList.remove('activated')
            gray_bg.classList.remove('activated')
        })
        gray_bg.addEventListener('click', () => {
            main.classList.remove('activated')
            gray_bg.classList.remove('activated')
        })
        for (let j = 0; j < list_text.length; j++) {
            list_text[j].addEventListener('click', event => {
                let target = event.target

                if (!target) {
                    list_text[j].classList.add('diactivated')
                }
                if (target) {
                    cat_list_text[i].classList.remove('diactivated')
                }

            });

        }

    }
}

function clsSD(closeSide) {
    if (closeSide.matches) {
        main.classList.remove('activated')
        gray_bg.classList.remove('activated')
    }
}


sidFc(side)
side.addListener(sidFc)

clsSD(closeSide)
closeSide.addListener(clsSD)

// 
// 
// 
// 

let like_btn = document.querySelector('#like-btn')
// let like_btn_child = like_btn.querySelector('.bx-heart')

// like_btn.addEventListener('click', () => {
//     like_btn_child.classList.toggle('bxs-heart')
// })

// 
//
// 
// 
let stars = document.querySelectorAll('#rate-star');
let rate_count = document.querySelector('#rate-count');

for (let i = 0; i < stars.length; i++) {
    stars[i].addEventListener('click', (e) => {
        let target = e.target
        if (target == stars[0]) {
            stars[0].classList.remove('bx-star')
            stars[0].classList.add('bxs-star')
            stars[1].classList.remove('bxs-star')
            stars[1].classList.add('bx-star')
            stars[2].classList.remove('bxs-star')
            stars[2].classList.add('bx-star')
            stars[3].classList.remove('bxs-star')
            stars[3].classList.add('bx-star')
            stars[4].classList.remove('bxs-star')
            stars[4].classList.add('bx-star')
            rate_count.innerText = '1'
        }
        if (target == stars[1]) {
            stars[0].classList.add('bxs-star')
            stars[1].classList.remove('bx-star')
            stars[1].classList.add('bxs-star')
            stars[2].classList.remove('bxs-star')
            stars[2].classList.add('bx-star')
            stars[3].classList.remove('bxs-star')
            stars[3].classList.add('bx-star')
            stars[4].classList.remove('bxs-star')
            stars[4].classList.add('bx-star')
            rate_count.innerText = '2'
        }
        if (target == stars[2]) {
            stars[0].classList.add('bxs-star')
            stars[1].classList.add('bxs-star')
            stars[2].classList.remove('bx-star')
            stars[2].classList.add('bxs-star')
            stars[3].classList.remove('bxs-star')
            stars[3].classList.add('bx-star')
            stars[4].classList.remove('bxs-star')
            stars[4].classList.add('bx-star')
            rate_count.innerText = '3'
        }
        if (target == stars[3]) {
            stars[0].classList.add('bxs-star')
            stars[1].classList.add('bxs-star')
            stars[2].classList.add('bxs-star')
            stars[3].classList.remove('bx-star')
            stars[3].classList.add('bxs-star')
            stars[4].classList.remove('bxs-star')
            stars[4].classList.add('bx-star')
            rate_count.innerText = '4'
        }
        if (target == stars[4]) {
            stars[0].classList.add('bxs-star')
            stars[1].classList.add('bxs-star')
            stars[2].classList.add('bxs-star')
            stars[3].classList.add('bxs-star')
            stars[4].classList.remove('bx-star')
            stars[4].classList.add('bxs-star')
            rate_count.innerText = '5'
        }

    })
}


// 
//
// 
// 


back_page_btn.addEventListener('click', () => {
    fe_popup_code.classList.add('active')
})