'use strict'

const Nav = document.querySelector("nav");
const BtnNavOpen = document.querySelector(".btn_navopen");
const ContentDiv = document.querySelector(".content")
const BtnNavClose = document.querySelector(".btn_navclose");
const burderMenu = document.querySelector(".btn_burger");

const header = document.querySelector("header");


burderMenu.addEventListener('click', ()=> {
	Nav.classList.toggle("open");
	ContentDiv.classList.toggle("open")
});

BtnNavOpen.addEventListener('click', ()=> {
	Nav.classList.toggle("open");
	ContentDiv.classList.toggle("open")
});

BtnNavClose.addEventListener('click', () => {
	Nav.classList.toggle("open");
	ContentDiv.classList.toggle("open")
});

Nav.addEventListener('click', (e)=> {
	// e.preventDefault();
	const target = e.target;
	// console.log(target);
	const targets = document.querySelectorAll('.has_group');
	if (target.classList.contains('has_group')) {
		if (target.classList.contains('active')) {
			targets.forEach((item) => {
				item.classList.remove('active');
			});
			return false;
		}
		targets.forEach((item) => {
			item.classList.remove('active');
		});
		target.classList.toggle('active');
	}
});

header.addEventListener('click', (e)=> {
	e.preventDefault();
	const target = e.target;
	// console.log(target);
	
	if (target.classList.contains('header_branch_btn')) {
		e.preventDefault();
		target.parentElement.classList.toggle('active');
	}
	
	if (target.parentElement.classList.contains('branch_option')) {
		const optionValue = target.innerText;
		const branchValue = document.querySelector('.branch_value');
		const branchWrap = document.querySelector('.header_branch');
		branchValue.value = optionValue;
		branchWrap.classList.remove('active');
	}
})