<!DOCTYPE html>
<html>

<%- include("../includes/head") %>

<!-- bootstrap datepicker -->
<link rel="stylesheet" href="/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">

<body class="hold-transition skin-red sidebar-mini">

	<div class="wrapper">

		<!-- The header is the topbar -->
		<%- include("../includes/header") %>

		<!-- The sidebar includes the menu -->
		<%- include("../includes/sidebar") %>

		<!-- Content Wrapper. Contains page content -->
		<div class="content-wrapper">

			<!-- Content Header (Page header) -->
			<section class="content-header">
				<h1> <%= translate("common:STATS") %> <i> <%= bot.guilds.cache.get(guildID).name %> </i> <small> Dashboard v1.1 </small> </h1>
			</section>

			<!-- Main content -->
			<section class="content">
				<!-- Main row -->
				<div class="row">
					<!-- Left col -->
					<section class="col-lg-8 col-sm-2 connectedSortable">
						<!-- Custom tabs (Charts with tabs)-->
						<div class="nav-tabs-custom">
							<!-- Tabs within a box -->
							<ul class="nav nav-tabs pull-right">
								<li class="active"><a href="#rank-money" data-toggle="tab">
										<%= translate("common:CREDITS") %></a></li>
								<li><a href="#rank-level" data-toggle="tab">
										<%= translate("common:LEVEL") %></a></li>
								<li class="pull-left header"><i class="fa fa-trophy"></i>
									<%= "Таблица лидеров" %></li>
							</ul>
							<div class="tab-content">
								<div class="tab-pane active" id="rank-money" style="position: relative; height: 300px;">
									<div class="chart">
										<canvas id="Crank-money" style="height:230px"></canvas>
									</div>
								</div>
								<div class="tab-pane active" id="rank-level" style="position: relative; height: 300px;">
									<div class="chart">
										<canvas id="Crank-level" style="height:230px"></canvas>
									</div>
								</div>
							</div>
						</div>
						<!-- /.nav-tabs-custom -->
						<div class="col-md-6 col-sm-6 col-xs-12">
							<div class="info-box">
								<span class="info-box-icon bg-yellow"><i class="fa fa-refresh"></i></span>
								<div class="info-box-content">
									<span class="info-box-text"><%= translate("dashboard:COOLDOWNS") %></span>
									<span class="info-box-number"><%= translate("dashboard:REP") %>: <%= user.cooldowns.rep > Date.now() ? convertTime(user.cooldowns.rep) : translate("dashboard:CAN_USE") %></span>
									<% for (const c in memberData.cooldowns) { %>
										<% if (c !== "rob") { %>
											<span class="info-box-number"><%= translate("dashboard:" + c.toUpperCase()) %>: <%= memberData.cooldowns[c] > Date.now() ? convertTime(memberData.cooldowns[c]) : translate("dashboard:CAN_USE") %></span>
										<% } else { %>
											<span class="info-box-number"><%= translate("dashboard:" + c.toUpperCase()) %>: <%= memberData.cooldowns[c] > Date.now() ? convertTime(memberData.cooldowns[c]) : translate("dashboard:NO_DEFENCE") %></span>
										<% }; %>
									<% }; %>
								</div>
								<!-- /.info-box-content -->
							</div>
							<!-- /.info-box -->
						</div>
						<!-- /.col -->
					</section>
					<!-- /.col -->
					<div class="col-md-4">
						<!-- Widget: user widget style 1 -->
						<div class="box box-widget widget-user-2">
							<!-- Add the bg color to the header using any of the bg-* classes -->
							<div class="widget-user-header bg-yellow">
								<div class="widget-user-image">
									<img class="img-circle" src="<%= stats.money[0].displayAvatarURL %>"
										alt="User Avatar">
								</div>
								<!-- /.widget-user-image -->
								<h3 class="widget-user-username"><a href="/user/<%= stats.money[0].id %>/<%= guildID %>"
										style="color:white"><%= stats.money[0].username %></a></h3>
								<h5 class="widget-user-desc"><%= translate("dashboard:TOP_CREDITS") %></h5>
							</div>
						</div>
						<!-- /.widget-user -->
					</div>
					<!-- /.col -->
					<div class="col-md-4">
						<!-- Widget: user widget style 1 -->
						<div class="box box-widget widget-user-2">
							<!-- Add the bg color to the header using any of the bg-* classes -->
							<div class="widget-user-header bg-red">
								<div class="widget-user-image">
									<img class="img-circle" src="<%= stats.level[0].displayAvatarURL %>"
										alt="User Avatar">
								</div>
								<!-- /.widget-user-image -->
								<h3 class="widget-user-username"><a href="/user/<%= stats.level[0].id %>/<%= guildID %>"
										style="color:white"><%= stats.level[0].username %></a></h3>
								<h5 class="widget-user-desc"><%= translate("dashboard:TOP_LEVEL") %></h5>
							</div>
						</div>
						<!-- /.widget-user -->
					</div>
					<!-- ./box -->
				</div>
			</section>
			<!-- /.content -->
		</div>
		<!-- /.content-wrapper -->
		<%- include("../includes/footer") %>
	</div>
	<!-- ./wrapper -->
	<!-- bootstrap datepicker -->
	<script src="/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
	<!-- ChartJS -->
	<script src="/bower_components/chart.js/Chart.js"></script>
	<script>
		$(function () {
			$("#datepicker").datepicker({
				autoclose: true
			});

			/* LEADERBOARD */
			let values = ["money", "level"];
			values.forEach((value) => {
				let members = JSON.parse(`<%- JSON.stringify(stats) %>`)[value].sort((a, b) => a - b);
				let data = {
						labels: members.map(a => a.username),
						datasets: [{
							label: "Leaderboard " + value,
							fillColor: "#00a65a",
							strokeColor: "#00a65a",
							pointColor: "#00a65a",
							pointStrokeColor: "rgba(60,141,188,1)",
							pointHighlightFill: "#fff",
							pointHighlightStroke: "rgba(60,141,188,1)",
							data: members.map(a => a[value])
						}]
					},
					leaderboardCanvas = $("#Crank-" + value).get(0).getContext("2d"),
					leaderboard = new Chart(leaderboardCanvas),
					leaderboardData = data,
					leaderboardOptions = {
						scaleBeginAtZero: !0,
						scaleShowGridLines: !0,
						scaleGridLineColor: "rgba(0,0,0,.05)",
						scaleGridLineWidth: 1,
						scaleShowHorizontalLines: !0,
						scaleShowVerticalLines: !0,
						barShowStroke: !0,
						barStrokeWidth: 2,
						barValueSpacing: 5,
						barDatasetSpacing: 1,
						responsive: !0,
						maintainAspectRatio: !0
					};
				leaderboardOptions.datasetFill = false
				leaderboard.Bar(leaderboardData, leaderboardOptions);
			});

			$(`.tab-content > div[class="tab-pane active"]`).slice(1, 23).removeClass("active");
		});
	</script>
</body>

</html>