{% extends 'admin/layout/admin_app.html' %}

{% block content %}
  	{% if messages %}
      	<!--<script>
        	document.addEventListener('DOMContentLoaded', function() {
				{% for message in messages %}
					showSweetAlert("{{ message }}", "{{ message.tags }}");
				{% endfor %}
			});
		</script> -->

		<script>
			document.addEventListener('DOMContentLoaded', function() {
				{% for message in messages %}
					showToastr("{{ message }}", "{{ message.tags }}");
				{% endfor %}
			});
		</script>
	{% endif %}
  	<div class="content-wrapper">
    	<div class="content-header">
			<div class="container-fluid">
				<div class="card">
					<div class="row m-1">
						<div class="col-sm-6">
							<h1 class="ml-2">Dashboard</h1>
						</div>
						<div class="col-sm-6">
							<ol class="breadcrumb float-sm-right mr-2">
								<li class="breadcrumb-item"><a href="#">Home</a></li>
								<li class="breadcrumb-item active">Dashboard</li>
							</ol>
						</div>
          			</div>
        		</div>
      		</div>
    	</div>
		{% if accessDashboard == True %}
			<!-- Dashboard Filter -->
			<section class="content">
				<div class="row">
					<div class="col-md-12">
						<div class="card card-primary collapsed-card" id="dashboardFilterDiv">
							<div class="card-header">
								<h3 class="card-title">Dashboard Filter</h3>
								<div class="card-tools">
									<button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
										<i class="fas fa-plus"></i>
									</button>
								</div>
							</div>
							<div class="card-body">
								<div class="row">
									<div class="col-md-3" id="dashBoardDateRangeDiv">
										<div class="form-group ml-2">
											<label>Date Range</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<span class="input-group-text">
														<i class="far fa-calendar-alt"></i>
													</span>
												</div>
												<input type="text" name="dashBoardDateRange" id="dashBoardDateRange" class="form-control float-right">
											</div>
											<div id="dashBoardDateRangeError" class="error-msg error-msg-font-size"></div>
										</div>
									</div>
									<div class="form-group ml-3">
										<label></label>
										<a href="#" class="dashboardResetFilter">
											<button type="button" class="btn btn-danger btn-block mt-2">Reset</button>
										</a>
									</div>
									<div class="form-group ml-3">
										<label></label>
										<a href="#" class="dashboardFilter">
											<button type="button" class="btn btn-success btn-block mt-2">Apply Filter</button>
										</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			<!-- Content -->
			<section class="content">
				<div class="container-fluid">
					<div class="row">
						<div class="col-lg-3 col-6">
							<div class="small-box bg-info">
								<div class="inner">
									<h3 class="subAdminCount">{{ subAdminCount }}</h3>
									<p>Sub Admins</p>
								</div>
								<div class="icon">
									<i class="ion ion-person"></i>
								</div>
								<a href="/admin/sub-admin-list/" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
							</div>
						</div>
						
						<div class="col-lg-3 col-6">
							<div class="small-box bg-success">
								<div class="inner">
									<h3 class="activeUserCount">{{ activeUserCount }}</h3>
									<p>Live Users</p>
								</div>
								<div class="icon">
									<i class="ion ion-person"></i>
								</div>
								<a href="/admin/user-list/" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
							</div>
						</div>

						<div class="col-lg-3 col-6">
							<div class="small-box bg-danger">
								<div class="inner">
									<h3 class="inActiveUserCount">{{ inActiveUserCount }}</h3>
									<p>Paused Users</p>
								</div>
								<div class="icon">
									<i class="ion ion-person"></i>
								</div>
								<a href="/admin/user-list/" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
							</div>
						</div>
					
						<div class="col-lg-3 col-6">
							<div class="small-box bg-warning">
								<div class="inner">
									<h3 class="waitingUserCount">{{ waitingUserCount }}</h3>
									<p>Waiting Users</p>
								</div>
								<div class="icon">
									<i class="ion ion-person-add"></i>
								</div>
								<a href="/admin/waiting-list/" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
							</div>
						</div>
					</div>
					<!-- User chart -->
					<div class="row">
						<div class="col-md-12">
							<div class="card card-primary">
								<div class="card-header">
									<h3 class="card-title">User Chart</h3>
								</div>
								<div class="card-body">
									<div class="chart">
										<div class="row">
											<div class="col-md-12 d-flex justify-content-between">
												<div class="form-group">
													<label>Year</label>
													<select name="userYear" id="userYear" class="form-control">
														{% for useryear in userYears %} 
															<option value="{{useryear}}">{{useryear}}</option>
														{% endfor %}
													</select>
												</div>
												<div>
													<a href="#" class="exportUser">
														<button type="button" class="btn btn-info btn-block mt-4">
															<i class='fa fa-file-export'></i>Export
														</button>
													</a>
												</div>
											</div>
										</div>
										<canvas id="userBarChart" style="min-height: 400px; height: 400px; max-height: 400px; max-width: 100%;"></canvas>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- Waiting user chart -->
					<div class="row">
						<div class="col-md-12">
							<div class="card card-primary">
								<div class="card-header">
									<h3 class="card-title">Waiting User Chart</h3>
								</div>
								<div class="card-body">
									<div class="chart">
										<div class="row">
											<div class="col-md-12 d-flex justify-content-between">
												<div class="form-group">
													<label>Year</label>
													<select name="waitingUserYear" id="waitingUserYear" class="form-control">
														{% for waitingUserYear in waitingUserYears %} 
															<option value="{{waitingUserYear}}">{{waitingUserYear}}</option>
														{% endfor %}
													</select>
												</div>
												<div>
													<a href="#" class="exportWaitingUser">
														<button type="button" class="btn btn-info btn-block mt-4">
															<i class='fa fa-file-export'></i>Export
														</button>
													</a>
												</div>
											</div>
										</div>
										<canvas id="waitingUserBarChart" style="min-height: 400px; height: 400px; max-height: 400px; max-width: 100%;"></canvas>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- Active user chart -->
					<div class="row">
						<div class="col-md-12">
							<div class="card card-primary">
								<div class="card-header">
									<h3 class="card-title">Active User Chart</h3>
								</div>
								<div class="card-body">
									<div class="chart">
										<div class="row">
											<div class="col-md-12 d-flex justify-content-between">
												<div class="form-group">
													<label>Year</label>
													<select name="activeUserYear" id="activeUserYear" class="form-control">
														{% for activeUserYear in activeUserYears %} 
															<option value="{{activeUserYear}}">{{activeUserYear}}</option>
														{% endfor %}
													</select>
												</div>
												<div>
													<a href="#" class="exportActiveUser">
														<button type="button" class="btn btn-info btn-block mt-4">
															<i class='fa fa-file-export'></i>Export
														</button>
													</a>
												</div>
											</div>
										</div>
										<canvas id="activeUserBarChart" style="min-height: 400px; height: 400px; max-height: 400px; max-width: 100%;"></canvas>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
		{% endif %}
  	</div>
{% endblock %}  

{% block custom_js %}
<script>
	$(function(){
		$('#dashBoardDateRange').val('');
        $("#dashBoardDateRangeError").html('');
		$('#dashBoardDateRange').daterangepicker({
			autoUpdateInput:false,
            locale: {
                cancelLabel: 'Clear',
                format: 'DD/MM/YYYY'
            },
			maxDate:moment(),
        })

		$('#dashBoardDateRange').on('apply.daterangepicker', function(ev, picker) {
			$(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
		});

		$('#dashBoardDateRange').on('cancel.daterangepicker', function(ev, picker) {
			$(this).val('');
		});
	});

	

	/* User Chart */
	document.addEventListener('DOMContentLoaded', function() {
		var userBarChart;
		var data = {{ userData|safe }};
        var labels = {{ userLabel|safe }};
		var dashBoardDateRange = $("#dashBoardDateRange").val();
        showUserChart(data, labels,dashBoardDateRange);


		$("#userYear").on("change",function(){
			$('#dashBoardDateRange').val('');
			fetchUserDataAndShowChart();
		});

		/* Apply Filter */
		$('.dashboardFilter').click(function(){
			fetchUserDataAndShowChart()
		});

		/* Reset Filter */
		$('.dashboardResetFilter').click(function(){
			$('#dashBoardDateRange').val('');
			fetchUserDataAndShowChart()
		});

		function fetchUserDataAndShowChart() {
		
			var userYear = $("#userYear").val();
			var dashBoardDateRange = $("#dashBoardDateRange").val();
			$.ajax({
				type: 'POST',
				url: '{% url "dashboard" %}',
				data: {
					csrfmiddlewaretoken: '{{ csrf_token }}', 
					userYear: userYear,
					dashBoardDateRange: dashBoardDateRange 
				},
				success: function(result) {
					if(result.status == 'success'){
						$(".subAdminCount").html(result.subAdminCount);
						$(".activeUserCount").html(result.activeUserCount);
						$(".inActiveUserCount").html(result.inActiveUserCount);
						$(".waitingUserCount").html(result.waitingUserCount);
						showUserChart(result.data,result.labels,result.dashBoardDateRange)
					}
				},
				error: function(xhr, status, error){
					console.log(error);
				}
			});
		}

		function showUserChart(data, labels, dashBoardDateRange) {
			
			if (!userBarChart) {
				var userBar = document.getElementById('userBarChart');
				if (userBar) {
					userBar = userBar.getContext('2d');
				}
				var userBarData = '';
				
				if(dashBoardDateRange != '' ){
					var userBarData = {
						labels: labels,
						datasets: [{
							label: 'User',
							data: data,
							backgroundColor: 'rgba(60,141,188,0.9)',
							borderWidth: 1
						}]
					};
				} else {
					var userBarData = {
						labels: labels,
						datasets: [{
							label: 'User',
							data: data,
							backgroundColor: 'rgba(60,141,188,0.9)',
							borderWidth: 1
						}]
					};
				}
				
				var userBarOptions = {
					scales: {
						xAxes: [{
							scaleLabel: {
								display: true,
								labelString: 'Month' // Name of x-axis
							},
						}],
						yAxes: [{
							scaleLabel: {
								display: true,
								labelString: 'No. of users' // Name of x-axis
							},
							ticks: {
								beginAtZero: true
							}
						}]
					},
					tooltips: {
						callbacks: {
							label: function(tooltipItem, data) {
								var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
								return value;
							}
						}
					}
				};
	
				userBarChart = new Chart(userBar, {
					type: 'bar',
					data: userBarData,
					options: userBarOptions
				});
			} else {
				userBarChart.data.labels = labels;
				userBarChart.data.datasets[0].data = data;
				userBarChart.update();
			}
		}
	});	

	/* Waiting user chart */
	document.addEventListener('DOMContentLoaded', function() {
		var waitingUserBarChart;
		var data = {{ waitingUserData|safe }};
        var labels = {{ waitingUserLabel|safe }};
		var dashBoardDateRange = $("#dashBoardDateRange").val();
        showWaitingUserChart(data, labels, dashBoardDateRange);

		$("#waitingUserYear").on("change",function(){
			fetchWaitingUserDataAndShowChart();
		});

		/* Apply Filter */
		$('.dashboardFilter').click(function(){
			fetchWaitingUserDataAndShowChart()
		});

		/* Reset Filter */
		$('.dashboardResetFilter').click(function(){
			$('#dashBoardDateRange').val('');
			fetchWaitingUserDataAndShowChart()
		});

		function fetchWaitingUserDataAndShowChart(){
			var waitingUserYear = $("#waitingUserYear").val();
			var dashBoardDateRange = $("#dashBoardDateRange").val();
			$.ajax({
				type: 'POST',
				url: '{% url "dashboard" %}',
				data: {
					csrfmiddlewaretoken: '{{ csrf_token }}', 
					waitingUserYear: waitingUserYear,
					dashBoardDateRange: dashBoardDateRange
				},
				success: function(waitingChartData) {
					if (waitingChartData.status == 'success') {
						var data = waitingChartData.waitingUserData;
						var labels = waitingChartData.waitingUserLabels;
						showWaitingUserChart(data, labels, dashBoardDateRange);
					}
				},
				error: function(xhr, status, error){
					console.log(error);
				}
			});
		}

		function showWaitingUserChart(data, labels, dashBoardDateRange) {
			if (!waitingUserBarChart) {
				var waitingUserBar = document.getElementById('waitingUserBarChart');
				if (waitingUserBar) {
					waitingUserBar = waitingUserBar.getContext('2d');
				}

				var waitingUserBarData = '';

				if(dashBoardDateRange != '' ){
					var waitingUserBarData = {
						labels: labels,
						datasets: [{
							label: 'Waiting User',
							data: data,
							backgroundColor: 'rgba(60,141,188,0.9)',
							borderWidth: 1
						}]
					};
				} else {
					var waitingUserBarData = {
						labels: labels,
						datasets: [{
							label: 'Waiting User',
							data: data,
							backgroundColor: 'rgba(60,141,188,0.9)',
							borderWidth: 1
						}]
					};
				}
				
				var waitingUserBarOptions = {
					scales: {
						xAxes: [{
							scaleLabel: {
								display: true,
								labelString: 'Month' // Name of x-axis
							},
						}],
						yAxes: [{
							scaleLabel: {
								display: true,
								labelString: 'No. of waiting users' // Name of x-axis
							},
							ticks: {
								beginAtZero: true
							}
						}]
					},
					tooltips: {
						callbacks: {
							label: function(tooltipItem, data) {
								var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
								return value;
							}
						}
					}
				};
	
				waitingUserBarChart = new Chart(waitingUserBar, {
					type: 'bar',
					data: waitingUserBarData,
					options: waitingUserBarOptions
				});
			} else {
				waitingUserBarChart.data.labels = labels;
				waitingUserBarChart.data.datasets[0].data = data;
				waitingUserBarChart.update();
			}
		}
	});

	/* Active user chart */
	document.addEventListener('DOMContentLoaded', function() {

		var activeUserBarChart;
		var data = {{ activeUserData|safe }};
        var labels = {{ activeUserLabel|safe }};
		var dashBoardDateRange = $("#dashBoardDateRange").val();
        showActiveUserChart(data, labels, dashBoardDateRange);

		$("#activeUserYear").on("change",function(){
			$('#dashBoardDateRange').val('');
			fetchActiveUserDataAndShowChart();
		});

		/* Apply Filter */
		$('.dashboardFilter').click(function(){
			fetchActiveUserDataAndShowChart()
		});

		/* Reset Filter */
		$('.dashboardResetFilter').click(function(){
			$('#dashBoardDateRange').val('');
			fetchActiveUserDataAndShowChart()
		});

		function fetchActiveUserDataAndShowChart() {
			var activeUserYear = $("#activeUserYear").val();
			var dashBoardDateRange = $("#dashBoardDateRange").val();
			$.ajax({
				type: 'POST',
				url: '{% url "dashboard" %}',
				data: {
					csrfmiddlewaretoken: '{{ csrf_token }}', 
					activeUserYear: activeUserYear,
					dashBoardDateRange: dashBoardDateRange 
				},
				success: function(activeUserChartData) {
					if(activeUserChartData.status == 'success'){
						var data = activeUserChartData.activeUserData;
						var labels = activeUserChartData.activeUserLabels;
						showActiveUserChart(data,labels,dashBoardDateRange)
					}
				},
				error: function(xhr, status, error){
					console.log(error);
				}
			});
		}


		function showActiveUserChart(data, labels, dashBoardDateRange) {
			
			if (!activeUserBarChart) {
				var activeUserBar = document.getElementById('activeUserBarChart');
				if (activeUserBar) {
					activeUserBar = activeUserBar.getContext('2d');
				}
				var activeUserBarData = '';
				
				if(dashBoardDateRange != '' ){
					var activeUserBarData = {
						labels: labels,
						datasets: [{
							label: 'Active User',
							data: data,
							backgroundColor: 'rgba(60,141,188,0.9)',
							borderWidth: 1
						}]
					};
				} else {
					var activeUserBarData = {
						labels: labels,
						datasets: [{
							label: 'Active User',
							data: data,
							backgroundColor: 'rgba(60,141,188,0.9)',
							borderWidth: 1
						}]
					};
				}
				
				var activeUserBarOptions = {
					scales: {
						xAxes: [{
							scaleLabel: {
								display: true,
								labelString: 'Month' // Name of x-axis
							},
						}],
						yAxes: [{
							scaleLabel: {
								display: true,
								labelString: 'No. of users' // Name of x-axis
							},
							ticks: {
								beginAtZero: true
							}
						}]
					},
					tooltips: {
						callbacks: {
							label: function(tooltipItem, data) {
								var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
								return value;
							}
						}
					}
				};
	
				activeUserBarChart = new Chart(activeUserBar, {
					type: 'bar',
					data: activeUserBarData,
					options: activeUserBarOptions
				});
			} else {
				activeUserBarChart.data.labels = labels;
				activeUserBarChart.data.datasets[0].data = data;
				activeUserBarChart.update();
			}
		}

	});

	/* Export user */
	$('.exportUser').click(function(){
		var userYear = $("#userYear").val();
		var dashBoardDateRange = $("#dashBoardDateRange").val();
		window.location.href = '{% url "export_user" %}?userYear=' + userYear +'&dashBoardDateRange=' + dashBoardDateRange;
	});

	/* Export waiting user */ 
	$('.exportWaitingUser').click(function(){
		var waitingUserYear = $("#waitingUserYear").val();
		var dashBoardDateRange = $("#dashBoardDateRange").val();
		window.location.href = '{% url "export_waiting_user" %}?waitingUserYear=' + waitingUserYear +'&dashBoardDateRange=' + dashBoardDateRange;
	});

	/* Export active user */
	$('.exportActiveUser').click(function(){
		var activeUserYear = $("#activeUserYear").val();
		var dashBoardDateRange = $("#dashBoardDateRange").val();
		window.location.href = '{% url "export_active_user" %}?activeUserYear=' + activeUserYear +'&dashBoardDateRange=' + dashBoardDateRange;
	});

	
</script>

{% endblock %}