{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<title>FitnessIQ | Report</title>
<div class="main-content pt-0">
	<div class="content-wrapper">
		<h2 class="f-22 mb-0 bold">Report</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_users}}</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 Coaches</p>
							</div>						
						</div>
					</div>
					<!-- <div class="col-12 col-md-6 col-lg-3" onclick="location.href='/trip-listing?completed_trips=true' " 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_exercises}}</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>Revenue</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="revenueChart"></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>New Client Statictics</strong></p>
							<p class="f-13 mb-0">Here is the data of new clients added every month</p>
						</div>
						<div class="see-al"><a class="bold" href="#">See All</a></div>
					</div>
					<figure class="highcharts-figure">
						<div id="clientStatChart"></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>Logins and Registers Analytics</strong></p>
							<p class="f-13 mb-0">Here is the total logins and signups of the users</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-4">
				<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 Genders</strong></p>						
						</div>						
					</div>					
					<figure class="highcharts-figure">
						<div id="parent-container">
						  <div id="play-controls">
							<button id="play-pause-button" class="fa fa-play" title="play"></button>
							<input id="play-range" type="range" value="1965" min="1965" max="2021" />
						  </div>
						  <div id="container_gender"></div>
						</div>
					  </figure>
				</div>
			</div>
			<div class="col-12 col-md-12 col-lg-8">
				<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 Exercises</strong></p>
							<p class="f-13 mb-0">Here is graph of top liked exercises.</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>

		<!-- <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>
	// Data retrieved from https://www.vikjavev.no/ver/#2020-04-15,2020-04-16

Highcharts.chart('revenueChart', {
	chart: {
		type: 'spline',
		scrollablePlotArea: {
			minWidth: 600,
			scrollPositionX: 1
		}
	},
	title: {
		text: '',
		align: 'left'
	},
	xAxis: {
		type: 'datetime',
		labels: {
			overflow: 'justify'
		}
	},
	yAxis: {
		title: {
			text: ''
		},
		colors: ['#F9714A', '#F9714A'],
		minorGridLineWidth: 0,
		gridLineWidth: 0,
		alternateGridColor: null,
		plotBands: [{ // Light air
			from: 0.3,
			to: 1.5,
			color: 'rgba(68, 170, 213, 0.1)',
		   
		}, { // Light breeze
			from: 1.5,
			to: 3.3,
			color: 'rgba(0, 0, 0, 0)',
			label: {
				text: 'Light breeze',
			}
		}, { // Gentle breeze
			from: 3.3,
			to: 5.5,
			color: 'rgba(68, 170, 213, 0.1)',
		   
		}, { // Moderate breeze
			from: 5.5,
			to: 8,
			color: 'rgba(0, 0, 0, 0)',
		   
		}, { // Fresh breeze
			from: 8,
			to: 11,
			color: 'rgba(68, 170, 213, 0.1)',
		   
		}, { // Strong breeze
			from: 11,
			to: 14,
			color: 'rgba(0, 0, 0, 0)',
		   
		}, { // Near Gale
			from: 14,
			to: 17,
			color: 'rgba(68, 170, 213, 0.1)',
		   
		}, { // Fresh Gale
			from: 17,
			to: 20.5,
			color: 'rgba(0, 0, 0, 0)',
		   
		}, { // Strong Gale
			from: 20.5,
			to: 24,
			color: 'rgba(68, 170, 213, 0.1)',
			
		}]
	},
	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: 'Hestavollane',
		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]

	}],
	navigation: {
		menuItemStyle: {
			fontSize: '10px'
		}
	}
});

</script> -->


<!-- client stats chart -->
<script>
	// Data retrieved from https://www.vikjavev.no/ver/#2020-04-15,2020-04-16
	const count_list = {{ count_list|safe }};
	const month_list = {{ date_list|safe }};

	Highcharts.chart('clientStatChart', {
		chart: {
			type: 'spline',
			scrollablePlotArea: {
				minWidth: 600,
				scrollPositionX: 1
			}
		},
		title: {
			text: '',
			align: 'left'
		},
		xAxis: {
			type: 'category',
			categories: month_list,
			labels: {
				overflow: 'justify'
			}
		},
		yAxis: {
			title: {
				text: ''
			},
			colors: ['#F9714A', '#F9714A'],
			minorGridLineWidth: 0,
			gridLineWidth: 0,
			alternateGridColor: null,
			plotBands: [
				// ... (your existing plotBands configuration)
			]
		},
		tooltip: {
			valueSuffix: ' m/s'
		},
		plotOptions: {
			spline: {
				lineWidth: 4,
				states: {
					hover: {
						lineWidth: 5
					}
				},
				marker: {
					enabled: false
				}
			}
		},
		series: [{
			name: 'Hestavollane',
			data: count_list
		}],
		navigation: {
			menuItemStyle: {
				fontSize: '10px'
			}
		}
	});
</script>


<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>

<!-- /*
 * Pause the timeline, either when the range is ended, or when clicking the pause button.
 * Pausing stops the timer and resets the button to play mode.
 */
function pause(button) {
	button.title = 'play';
	button.className = 'fa fa-play';
	clearTimeout(chart.sequenceTimer);
	chart.sequenceTimer = undefined;
}

/*
 * Update the chart. This happens either on updating (moving) the range input,
 * or from a timer when the timeline is playing.
 */
function update(increment) {
	if (increment) {
		input.value = parseInt(input.value, 10) + increment;
	}
	if (input.value >= endYear) {
		// Auto-pause
		pause(btn);
	}

	chart.update(
		{
			subtitle: {
				text: getSubtitle()
			}
		},
		false,
		false,
		false
	);

	chart.series[0].update({
		name: input.value,
		data: getData(input.value)[1]
	});
}

/*
 * Play the timeline.
 */
function play(button) {
	button.title = 'pause';
	button.className = 'fa fa-pause';
	chart.sequenceTimer = setInterval(function () {
		update(1);
	}, 500);
}

btn.addEventListener('click', function () {
	if (chart.sequenceTimer) {
		pause(this);
	} else {
		play(this);
	}
});
/*
 * Trigger the update on the range bar click.
 */
input.addEventListener('input', function () {
	update();
}); -->

</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 %}