{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<title>FitnessIQ | Dashboard</title>
<div class="main-content pt-0">
	<div class="content-wrapper">
		<h2 class="f-22 mb-0 bold">Dashboard</h2>
		<p class="gray f-14 mb-2">Welcome to Fitness IQ</p>
		<div class="row">
			<div class="col-12">
				<div class="row dashboard-users mt-3 mb-3">
					<div class="col-12 col-md-6 col-lg-4" onclick="location.href='/client-listing' " style="cursor: pointer;">
						<div class="dash-total-users relative">
							<div class="usericons pink">
								<img class="total-lefticon" src="{% static 'admin/images/client.svg' %}">
							</div>
							<div class="user-total-right">
								<h5 class="bold f-20 mb-0">{{total_clients}}</h5>
								<p class="gray f-14 mb-0">Total Clients</p>							
							</div>						
						</div>
					</div>
					<div class="col-12 col-md-6 col-lg-4" onclick="location.href='/trainer-listing' " style="cursor: pointer;">
						<div class="dash-total-users relative">
							<div class="usericons purple">
								<img class="total-lefticon" src="{% static 'admin/images/coach.svg' %}">
							</div>
							<div class="user-total-right">								
								<h5 class="bold f-20 mb-0">{{total_trainers}}</h5>
								<p class="gray f-14 mb-0">Total Trainers</p>
							</div>						
						</div>
					</div>
					<!-- <div class="col-12 col-md-6 col-lg-3" onclick="location.href='#' " style="cursor: pointer;">
						<div class="dash-total-users relative">
							<div class="usericons blue">
								<img class="total-lefticon" src="{% static 'admin/images/box.svg' %}">
							</div>
							<div class="user-total-right">								
								<h5 class="bold f-20 mb-0">0</h5>
								<p class="gray f-14 mb-0">Total Products</p>
							</div>							
						</div>
					</div> -->
					<div class="col-12 col-md-6 col-lg-4" onclick="location.href='/exercise-listing' " style="cursor: pointer;">
						<div class="dash-total-users relative">
							<div class="usericons pinkk">
								<img class="total-lefticon" src="{% static 'admin/images/exercise.svg' %}">
							</div>
							<div class="user-total-right">
								<h5 class="bold f-20 mb-0">{{total_exercise}}</h5>
								<p class="gray f-14 mb-0">Total Exercise</p>								
							</div>						
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-12 col-md-12 col-lg-6">
				<div class="card dashboard-card">
					<div class="top-card d-flex justify-content-between mb-3">
						<div class="book-card">
							<p class="bold mb-0"><strong>Clients</strong></p>
						</div>
						
					</div>
					
					<figure class="highcharts-figure">
						 <div id="container" style="width: 100%; height: 400px;"></div>
					</figure>
				</div>
			</div>
			<div class="col-12 col-md-12 col-lg-6">
				<div class="card user-card p-3">
					<div class="top-card d-flex justify-content-between mb-3">
						<div class="book-card">
							<p class="bold mb-0"><strong>Trainers</strong></p>
						</div>
					</div>
					<figure class="highcharts-figure">
						<div id="container_trainer" style="width: 100%; height: 400px;"></div>
					</figure>
				</div>
			</div>
		</div>

		<!-- Trainer table -->
		<div class="row manage-user-data table-customer border-0 mt-4">
			<div class="col-12">
				<div class="card px-4 py-3">
				   <div class="table-header bg-white d-flex justify-content-between align-items-center border-btm">
					  <h2 class="f-20 bold">Trainer </h2>
					  <div class="view-all"><a class="view-txt dark text-decoration-none " href="/trainer-listing">View All</a></div>
				   </div>
				   <div class="manage-user-table">
					  <div class="table-responsive">
						 <table class="table" id="dataTable" width="100%" cellspacing="0">
							<thead>
							   <tr>
								<th>Sr. No.</th>
								<th>Trainer Name</th>
								<th>Email</th>
							   </tr>
							</thead>
							<tbody>
								{% for trainer in trainers_listing %}
								<tr>
									<td>{{forloop.counter}}</td>
									  <td>
										<div class="user-table-icon">
											<img src="{% if trainer.image %}{{ trainer.image }}{% else %}/static/admin/images/user-default.png{% endif %}" alt="user" />
											<span>{{ trainer.full_name }}</span>
										</div>
									  </td>
									   <td>
										<div class="user-table-icon">								
											<span>{{ trainer.email }}</span>
										</div>
									  </td>
									  <!-- <td>
										<div class="user-table-icon">
											<img src="{% if booking.user.avatar %}{{ booking.user.avatar }}{% else %}/static/admin/images/user.png{% endif %}" alt="user" />
											<span>Francesca Metts</span>
										</div>
									  </td> -->
									
								   </tr>
							   {% endfor %}
							  
							</tbody>
						 </table>
					  </div>
				   </div>
				</div>
			</div>
		</div>

		<div class="row mt-4">
			<div class="col-12 col-md-12 col-lg-5">
				<div class="card dashboard-card">
					<div class="top-card d-flex justify-content-between mb-3">
						<div class="book-card">
							<p class="bold mb-0"><strong>Total Client Genders</strong></p>						
						</div>						
					</div>					
					<figure class="highcharts-figure">
							<div id="container_gender" style="width: 100%; height: 400px;"></div>
					  </figure>
				</div>
			</div>
			<div class="col-12 col-md-12 col-lg-7">
				<div class="card user-card p-3">
					<div class="top-card d-flex justify-content-between mb-3">
						<div class="book-card">
							<p class="bold mb-0"><strong>Top 5 Exercises</strong></p>
							<p class="f-13 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
						</div>
						<!-- <select class="chart-select">
							<option>Weekly</option>
							<option>Monthly</option>
						</select> -->
					</div>
					<figure class="highcharts-figure">
						<div id="exercisechart"></div>
					</figure>
				</div>
			</div>
		</div>

		<!-- Client table -->
		<div class="row manage-user-data table-customer border-0 mt-4">
				<div class="col-12 col-md-7">
					<div class="card px-4 py-3">
					   <div class="table-header bg-white d-flex justify-content-between align-items-center border-btm">
						  <h2 class="f-20 bold">Client </h2>
						  <div class="view-all"><a class="view-txt dark text-decoration-none " href="/client-listing">View All</a></div>
					   </div>
					   <div class="manage-user-table">
						  <div class="table-responsive">
							 <table class="table" id="dataTable" width="100%" cellspacing="0">
								<thead>
								   <tr>
									<th>Sr. No.</th>
									<th>Clients Name</th>
									<th>Email</th>
								   </tr>
								</thead>
								<tbody>
									{%for user in client_listing %}
									<tr>
									 <td>{{forloop.counter}}</td>
									   <td>
										 <div class="user-table-icon">
											 <img src="{% if user.image %}{{ user.image }}{% else %}/static/admin/images/user-default.png{% endif %}" alt="user" />
											 <span>{{ user.full_name }}</span>
										 </div>
									   </td>
										<td>
										 <div class="user-table-icon">								
											 <span>{{ user.email }}</span>
										 </div>
									   </td>
									</tr>
									{% endfor %}
								  
								</tbody>
							 </table>
						  </div>
					   </div>
					</div>
				</div>
				<div class="col-12 col-md-12 col-lg-5">
					<div class="card user-card p-3">
						<div class="top-card d-flex justify-content-between mb-3">
							<div class="book-card">
								<p class="bold mb-0"><strong>Logins and Registers Analytics</strong></p>
								<p class="f-13 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
							</div>
						</div>
						<figure class="highcharts-figure">
							<div id="analyticchart"></div>
						</figure>
					</div>
				</div>
		</div>
		
		<!-- <div class="row mt-4">
			<div class="col-12 col-md-12 col-lg-6">
				<div class="card dashboard-card">
					<div class="top-card d-flex justify-content-between mb-3">
						<div class="book-card">
							<p class="bold mb-0"><strong>Time Spent On Application</strong></p>		
							<p class="mb-0 f-13">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>				
						</div>	 -->
						<!-- <select class="chart-select">
							<option>Weekly</option>
							<option>Monthly</option>
						</select>					 -->
					<!-- </div>					
					<figure class="highcharts-figure">
						<div id="timechart"></div>
					</figure>
				</div>
			</div> -->
			
		</div>

	</div>
</div>

{%endblock%}

{%block js%}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/variable-pie.js"></script>

<!-- revenue chart -->
<script>
	document.addEventListener('DOMContentLoaded', function () {
		   const data = JSON.parse('{{ formatted_data_json|escapejs }}');



			Highcharts.chart('container', {
				title: {
					text: 'Clients Count by Month'
				},
				xAxis: {
					categories: data.months,
					title: {
						text: 'Month'
					}
				},
				yAxis: {
					title: {
						text: 'Clients Count'
					}
				},
				series: [{
					name: 'Clients Count',
					data: data.counts
				}]
			});
		});
</script>


<script>
	document.addEventListener('DOMContentLoaded', function () {
		   const data = JSON.parse('{{ formatted_data_json_trainer|escapejs }}');



			Highcharts.chart('container_trainer', {
				title: {
					text: 'Trainer Count by Month'
				},
				xAxis: {
					categories: data.months,
					title: {
						text: 'Month'
					}
				},
				yAxis: {
					title: {
						text: 'Trainer Count'
					}
				},
				series: [{
					name: 'Trainer Count',
					data: data.counts,
					color: '#FF0000'  // Change this to your desired color
				}]
			});
		});
</script>

<!-- Gender chart-->
<script>
		document.addEventListener('DOMContentLoaded', function () {
			const data = JSON.parse('{{ gender_data|escapejs }}');

			Highcharts.chart('container_gender', {
				chart: {
					type: 'pie'
				},
				title: {
					text: 'Gender Distribution'
				},
				tooltip: {
					pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
				},
				accessibility: {
					point: {
						valueSuffix: '%'
					}
				},
				plotOptions: {
					pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						dataLabels: {
							enabled: true,
							format: '{point.name}: {point.percentage:.1f} %'
						}
					}
				},
				series: [{
					name: 'Gender',
					colorByPoint: true,
					data: data
				}]
			});
		});
	</script>
<!-- Exercise chart -->
<script>
	const names = JSON.parse('{{ exercise_names_json|escapejs }}')
	const counts = JSON.parse('{{ exercise_counts_json|escapejs }}')

	Highcharts.chart('exercisechart', {
		title: {
			text: ''
		},

		xAxis: {
			categories: names,
			accessibility: {
				rangeDescription: 'Exercise names'
			}
		},

		yAxis: {
			type: 'logarithmic',
			minorTickInterval: 0.1,
			accessibility: {
				rangeDescription: 'Range: 0.1 to 1000'
			}
		},

		tooltip: {
			headerFormat: '<b>{series.name}</b><br />',
			pointFormat: 'Exercise: {point.category}, Likes: {point.y}'
		},

		series: [{
			data: counts,
			name: 'Exercise Counts'
		}]
	});
</script>


<!-- time chart-->
<script>
	// Data retrieved from https://www.vikjavev.no/ver/#2020-04-15,2020-04-16

Highcharts.chart('timechart', {
	chart: {
		type: 'spline',
		scrollablePlotArea: {
			minWidth: 600,
			scrollPositionX: 1
		}
	},
	title: {
		text: '',
		align: 'left'
	},
   
	xAxis: {
		type: 'datetime',
		labels: {
			overflow: 'justify'
		}
	},
	colors: ['#DF4272', '#1733C1'],
	yAxis: {
		title: {
			text: ''
		},
		minorGridLineWidth: 0,
		gridLineWidth: 0,
		alternateGridColor: null,
		plotBands: [{ // Light air
			from: 0.3,
			to: 1.5,
			color: 'rgba(68, 170, 213, 0.1)',
			label: {
				text: '',
				style: {
					color: '#606060'
				}
			}
		}, { // Light breeze
			from: 1.5,
			to: 3.3,
			color: 'rgba(0, 0, 0, 0)',
			label: {
				text: '',
				style: {
					color: '#606060'
				}
			}
		}, { // Gentle breeze
			from: 3.3,
			to: 5.5,
			color: 'rgba(68, 170, 213, 0.1)',
			label: {
				text: '',
				style: {
					color: '#606060'
				}
			}
		}, { // Moderate breeze
			from: 5.5,
			to: 8,
			color: 'rgba(0, 0, 0, 0)',
			label: {
				text: '',
				style: {
					color: '#606060'
				}
			}
		}, { // Fresh breeze
			from: 8,
			to: 11,
			color: 'rgba(68, 170, 213, 0.1)',
			label: {
				text: '',
				style: {
					color: '#606060'
				}
			}
		}, { // Strong breeze
			from: 11,
			to: 14,
			color: 'rgba(0, 0, 0, 0)',
			label: {
				text: '',
				style: {
					color: '#606060'
				}
			}
		}, { // Near Gale
			from: 14,
			to: 17,
			color: 'rgba(68, 170, 213, 0.1)',
			label: {
				text: '',
				style: {
					color: '#606060'
				}
			}
		}, { // Fresh Gale
			from: 17,
			to: 20.5,
			color: 'rgba(0, 0, 0, 0)',
			label: {
				text: '',
				style: {
					color: '#606060'
				}
			}
		}, { // Strong Gale
			from: 20.5,
			to: 24,
			color: 'rgba(68, 170, 213, 0.1)',
			label: {
				text: '',
				style: {
					color: '#606060'
				}
			}
		}]
	},
	tooltip: {
		valueSuffix: ' m/s'
	},
	plotOptions: {
		spline: {
			lineWidth: 4,
			states: {
				hover: {
					lineWidth: 5
				}
			},
			marker: {
				enabled: false
			},
			pointInterval: 3600000, // one hour
			pointStart: Date.UTC(2020, 3, 15, 0, 0, 0)
		}
	},
	series: [{
		name: 'Clients',
		data: [5.4, 5.2, 5.7, 6.3, 5.2, 5.6, 6.1,
			5.6, 5.9, 7.1, 8.6, 7.8, 8.6,
			8.0, 9.7, 11.2, 12.5, 13.1, 10.6,
			10.9, 8.9, 9.5, 7.5, 3.5, 4.2]

	}, {
		name: 'Trainers',
		data: [0.2, 0.1, 0.1, 0.5, 0.3, 0.2, 0.1,
			0.1, 0.1, 0.1, 0.2, 1.1, 1.3,
			2.0, 1.5, 1.5, 1.5, 1.4, 1.7,
			2.0, 2.9, 2.1, 2.1, 3.5, 2.9]
	}],
	navigation: {
		menuItemStyle: {
			fontSize: '10px'
		}
	}
});

</script>

<!-- analytic chart-->
<script>
	const loginUsers = {{ login_users }};
	const signupUsers = {{ signup_users }};

	Highcharts.chart('analyticchart', {
		chart: {
			type: 'variablepie'
		},
		title: {
			text: '',
			align: 'left'
		},
		tooltip: {
			headerFormat: '',
			pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b><br/>' +
				'Count: <b>{point.y}</b><br/>'
		},
		
		series: [{
			minPointSize: 10,
			innerSize: '20%',
			zMin: 0,
			name: 'details',
			borderRadius: 5,
			data: [{
				name: 'Login',
				y: loginUsers,
				z:52
			}, {
				name: 'Signup',
				y: signupUsers,
				z:52
			}],
			colors: [
				'#92d8ff',
				'#258dff'
			]
		}]
	});
</script>
{% endblock %}