// SIDEBAR DROPDOWN
const allDropdown = document.querySelectorAll('#sidebar .side-dropdown');
const sidebar = document.getElementById('sidebar');

allDropdown.forEach(item=> {
	const a = item.parentElement.querySelector('a:first-child');
	a.addEventListener('click', function (e) {
		e.preventDefault();

		if(!this.classList.contains('active')) {
			allDropdown.forEach(i=> {
				const aLink = i.parentElement.querySelector('a:first-child');

				aLink.classList.remove('active');
				i.classList.remove('show');
			})
		}

		this.classList.toggle('active');
		item.classList.toggle('show');
	})
})





// SIDEBAR COLLAPSE
const toggleSidebar = document.querySelector('nav .toggle-sidebar');
const allSideDivider = document.querySelectorAll('#sidebar .divider');

if(sidebar.classList.contains('hide')) {
	allSideDivider.forEach(item=> {
		item.textContent = '-'
	})
	allDropdown.forEach(item=> {
		const a = item.parentElement.querySelector('a:first-child');
		a.classList.remove('active');
		item.classList.remove('show');
	})
} else {
	allSideDivider.forEach(item=> {
		item.textContent = item.dataset.text;
	})
}

toggleSidebar.addEventListener('click', function () {
	sidebar.classList.toggle('hide');

	if(sidebar.classList.contains('hide')) {
		allSideDivider.forEach(item=> {
			item.textContent = '-'
		})

		allDropdown.forEach(item=> {
			const a = item.parentElement.querySelector('a:first-child');
			a.classList.remove('active');
			item.classList.remove('show');
		})
	} else {
		allSideDivider.forEach(item=> {
			item.textContent = item.dataset.text;
		})
	}
})




sidebar.addEventListener('mouseleave', function () {
	if(this.classList.contains('hide')) {
		allDropdown.forEach(item=> {
			const a = item.parentElement.querySelector('a:first-child');
			a.classList.remove('active');
			item.classList.remove('show');
		})
		allSideDivider.forEach(item=> {
			item.textContent = '-'
		})
	}
})



sidebar.addEventListener('mouseenter', function () {
	if(this.classList.contains('hide')) {
		allDropdown.forEach(item=> {
			const a = item.parentElement.querySelector('a:first-child');
			a.classList.remove('active');
			item.classList.remove('show');
		})
		allSideDivider.forEach(item=> {
			item.textContent = item.dataset.text;
		})
	}
})




// PROFILE DROPDOWN
const profile = document.querySelector('nav .profile');
const imgProfile = profile.querySelector('img');
const dropdownProfile = profile.querySelector('.profile-link');

imgProfile.addEventListener('click', function () {
	dropdownProfile.classList.toggle('show');
})




// MENU
const allMenu = document.querySelectorAll('main .content-data .head .menu');

allMenu.forEach(item=> {
	const icon = item.querySelector('.icon');
	const menuLink = item.querySelector('.menu-link');

	icon.addEventListener('click', function () {
		menuLink.classList.toggle('show');
	})
})



window.addEventListener('click', function (e) {
	if(e.target !== imgProfile) {
		if(e.target !== dropdownProfile) {
			if(dropdownProfile.classList.contains('show')) {
				dropdownProfile.classList.remove('show');
			}
		}
	}

	allMenu.forEach(item=> {
		const icon = item.querySelector('.icon');
		const menuLink = item.querySelector('.menu-link');

		if(e.target !== icon) {
			if(e.target !== menuLink) {
				if (menuLink.classList.contains('show')) {
					menuLink.classList.remove('show')
				}
			}
		}
	})
})





// PROGRESSBAR
const allProgress = document.querySelectorAll('main .card .progress');

allProgress.forEach(item=> {
	item.style.setProperty('--value', item.dataset.value)
})






// APEXCHART
var options = {
  series: [{
  name: 'series1',
  data: [31, 40, 28, 51, 42, 109, 100]
}, {
  name: 'series2',
  data: [11, 32, 45, 32, 34, 52, 41]
}],
  chart: {
  height: 350,
  type: 'area'
},
dataLabels: {
  enabled: false
},
stroke: {
  curve: 'smooth'
},
xaxis: {
  type: 'datetime',
  categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
},
tooltip: {
  x: {
    format: 'dd/MM/yy HH:mm'
  },
},
};

var options2 = {
	series: [{
	name: 'Net Profit',
	data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
  }, {
	name: 'Revenue',
	data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
  }, {
	name: 'Free Cash Flow',
	data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
  }],
	chart: {
	type: 'bar',
	height: 350
  },
  plotOptions: {
	bar: {
	  horizontal: false,
	  columnWidth: '55%',
	  borderRadius: 5,
	  borderRadiusApplication: 'end'
	},
  },
  dataLabels: {
	enabled: false
  },
  stroke: {
	show: true,
	width: 2,
	colors: ['transparent']
  },
  xaxis: {
	categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
  },
  yaxis: {
	title: {
	  text: '$ (thousands)'
	}
  },
  fill: {
	opacity: 1
  },
  tooltip: {
	y: {
	  formatter: function (val) {
		return "$ " + val + " thousands"
	  }
	}
  }
  };

        
  var options3 = {
	series: [
	{
	  data: [
		{
		  x: 'New Delhi',
		  y: 218
		},
		{
		  x: 'Kolkata',
		  y: 149
		},
		{
		  x: 'Mumbai',
		  y: 184
		},
		{
		  x: 'Ahmedabad',
		  y: 55
		},
		{
		  x: 'Bangaluru',
		  y: 84
		},
		{
		  x: 'Pune',
		  y: 31
		},
		{
		  x: 'Chennai',
		  y: 70
		},
		{
		  x: 'Jaipur',
		  y: 30
		},
		{
		  x: 'Surat',
		  y: 44
		},
		{
		  x: 'Hyderabad',
		  y: 68
		},
		{
		  x: 'Lucknow',
		  y: 28
		},
		{
		  x: 'Indore',
		  y: 19
		},
		{
		  x: 'Kanpur',
		  y: 29
		}
	  ]
	}
  ],
	legend: {
	show: false
  },
  chart: {
	height: 350,
	type: 'treemap'
  },
  title: {
	text: 'Basic Treemap'
  }
  };

  var options4 = {
	series: [14, 23, 21, 17, 15, 10, 12, 17, 21],
	chart: {
	type: 'polarArea',
  },
  stroke: {
	colors: ['#fff']
  },
  fill: {
	opacity: 0.8
  },
  responsive: [{
	breakpoint: 480,
	options: {
	  chart: {
		width: 200
	  },
	  legend: {
		position: 'bottom'
	  }
	}
  }]
  };

  var chart = new ApexCharts(document.querySelector("#polar"), options4);
  chart.render();


  var chart = new ApexCharts(document.querySelector("#chart"), options);
  chart.render();

  var chart = new ApexCharts(document.querySelector("#basic"), options2);
  chart.render();

	var basic = new ApexCharts(document.querySelector("#treemap"), options3);
	basic.render();