@extends('training.inc.master')

@section('title','Training Dashboard')

@section('content')


<main class="content">
	<div class="container-fluid p-0">

		<div class="row mb-2 mb-xl-3">
			<div class="col-auto d-none d-sm-block">
				<h3><strong>Training Analytics</strong> Dashboard</h3>
			</div>

			@include('training.alerts.alert')
		
			<div class="col-auto ml-auto text-right mt-n1">
				<nav aria-label="breadcrumb">
					<ol class="breadcrumb bg-transparent p-0 mt-1 mb-0">
						<li class="breadcrumb-item"><a href="#">Training Home</a></li>
						<li class="breadcrumb-item"><a href="#">Dashboards</a></li>
						
					</ol>
				</nav>
			</div>
		</div>

		<div class="col-md-12">
			<div class="row ">
				<div class="col-xl-4 col-lg-6" data-tilt>
					<div class="card l-bg-cherry">
						<div class="card-statistic-3 p-4">
							<div class="card-icon card-icon-large"><i class="fas fa-user-alt"></i></div>
							<div class="mb-4">
								<h5 class="card-title mb-0" style="color: white;">Students Registered</h5>
							</div>
							<div class="row align-items-center mb-2 d-flex">
								<div class="col-8">
									<h2 class="d-flex align-items-center mb-0" style="color: white;">
										{{ number_format($totalStudentsRegistered) }} Students
									</h2>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-xl-4 col-lg-6" data-tilt>
					<div class="card l-bg-cherry">
						<div class="card-statistic-3 p-4">
							<div class="card-icon card-icon-large"><i class="fas fa-ticket-alt"></i></div>
							<div class="mb-4">
								<h5 class="card-title mb-0" style="color: white;">Revenue Earnings</h5>
							</div>
							<div class="row align-items-center mb-2 d-flex">
								<div class="col-8">
									<h2 class="d-flex align-items-center mb-0" style="color: white;">
										KSh {{ number_format($contributions, 2) }}
									</h2>
								</div>
								
							</div>
							
						</div>
					</div>
				</div>
				

				

				<div class="col-xl-4 col-lg-6" data-tilt>
					<div class="card l-bg-orange-dark">
						<div class="card-statistic-3 p-4">
							<div class="card-icon card-icon-large"><i class="fas fa-mobile-alt"></i></div>
							<div class="mb-4">
								<h5 class="card-title mb-0" style="color: white;">Training Station</h5>
							</div>
							<div class="row align-items-center mb-2 d-flex">
								<div class="col-8">
									<h2 class="d-flex align-items-center mb-0" style="color: white;">
									{{ number_format($trainingStations) }}
									</h2>
								</div>
								
							</div>
							
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="col-md-12">
			<div class="row ">
				<div class="col-xl-4 col-lg-6" data-tilt>
					<div class="card l-bg-cherry">
						<div class="card-statistic-3 p-4">
							<div class="card-icon card-icon-large"><i class="fas fa-user-alt"></i></div>
							<div class="mb-4">
								<h5 class="card-title mb-0" style="color: white;">Students Enrolments</h5>
							</div>
							<div class="row align-items-center mb-2 d-flex">
								<div class="col-8">
									<h2 class="d-flex align-items-center mb-0" style="color: white;">
										{{ number_format($enrollments) }} Students
									</h2>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-xl-4 col-lg-6" data-tilt>
					<div class="card l-bg-cherry">
						<div class="card-statistic-3 p-4">
							<div class="card-icon card-icon-large"><i class="fas fa-ticket-alt"></i></div>
							<div class="mb-4">
								<h5 class="card-title mb-0" style="color: white;">Certificates offered</h5>
							</div>
							<div class="row align-items-center mb-2 d-flex">
								<div class="col-8">
									<h2 class="d-flex align-items-center mb-0" style="color: white;">
										 {{ number_format($certified_members) }}
									</h2>
								</div>
								
							</div>
							
						</div>
					</div>
				</div>
				

				

				<div class="col-xl-4 col-lg-6" data-tilt>
					<div class="card l-bg-green-dark">
						<div class="card-statistic-3 p-4">
							<div class="card-icon card-icon-large"><i class="fas fa-mobile-alt"></i></div>
							<div class="mb-4">
								<h5 class="card-title mb-0" style="color: white;">Courses Registered</h5>
							</div>
							<div class="row align-items-center mb-2 d-flex">
								<div class="col-8">
									<h2 class="d-flex align-items-center mb-0" style="color: white;">
									{{ number_format($courses_registered) }}
									</h2>
								</div>
								
							</div>
							
						</div>
					</div>
				</div>
			</div>
		</div>

	
		<div class="col-12 col-lg-12 col-xxl-12 d-flex">
			<div class="card flex-fill w-100">
				<div class="card-header">
					<div class="card-actions float-right">
						<div class="dropdown show">
							<a href="#" data-toggle="dropdown" data-display="static">
								<i class="align-middle" data-feather="more-horizontal"></i>
							</a>

							<div class="dropdown-menu dropdown-menu-right">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
							</div>
						</div>
					</div>
					<h5 class="card-title mb-0"><strong>Certification Summary {{$currentYear}}</strong></h5>
				</div>
				<script>
					document.addEventListener("DOMContentLoaded", function() {
						var chartData = @json(array_values($monthlyData));
						// Bar chart
						new Chart(document.getElementById("chartjs-dashboard-bar"), {
							type: "bar",
							data: {
								labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
								datasets: [{
									label: "Certifications",
									backgroundColor: window.theme.success,
									borderColor: window.theme.warning,
									hoverBackgroundColor: window.theme.secondary,
									hoverBorderColor: window.theme.success,
									data: chartData,
									barPercentage: .85,
									categoryPercentage: .5
								}]
							},
							options: {
								maintainAspectRatio: false,
								legend: {
									display: false
								},
								scales: {
									yAxes: [{
										gridLines: {
											display: false
										},
										stacked: false,
										ticks: {
											stepSize: 20
										}
									}],
									xAxes: [{
										stacked: false,
										gridLines: {
											color: "transparent"
										}
									}]
								}
							}
						});
					});
				</script>
				<div class="card-body d-flex w-100">
					<div class="align-self-center chart chart-lg">
						<canvas id="chartjs-dashboard-bar"></canvas>
					</div>
				</div>
			</div>
	</div>

			<div class="card mt-4">
				<div class="card-header">
					<h5>Certifications Issued in {{ $currentYear }}</h5>
				</div>
				<div class="card-body">
					<div id="certificationsChart"></div>
				</div>
			</div>

			<!-- Highcharts CDN -->
			<script src="https://code.highcharts.com/highcharts.js"></script>
			<script src="https://code.highcharts.com/modules/exporting.js"></script>
			<script src="https://code.highcharts.com/modules/export-data.js"></script>
			<script src="https://code.highcharts.com/modules/accessibility.js"></script>

			<script>
				document.addEventListener('DOMContentLoaded', function () {
					Highcharts.chart('certificationsChart', {
						chart: {
							type: 'line'
						},
						title: {
							text: 'Monthly Certifications ({{ $currentYear }})'
						},
						xAxis: {
							categories: [
								'January', 'February', 'March', 'April', 'May', 'June',
								'July', 'August', 'September', 'October', 'November', 'December'
							]
						},
						yAxis: {
							title: {
								text: 'Number of Certifications'
							}
						},
						series: [{
							name: 'Certifications',
							data: @json($chartData),
							color: '#007bff'
						}],
						credits: {
							enabled: false
						}
					});
				});
			</script>

		<div class="row">
			<div class="col-12 col-lg-12 col-xxl-10 d-flex">
				<div class="card flex-fill">
					<div class="card-header">
						
						<h5 class="card-title mb-0">Training Distributions</h5>
					</div>
					<table class="table table-hover my-0">
						<thead>
							<tr>
								<th>#</th>
								<th class="d-none d-xl-table-cell">Course Name</th>
								<th class="d-none d-xl-table-cell">Year</th>						
								<th class="d-none d-md-table-cell">Total Trainings</th>
							</tr>
						</thead>
						<tbody>
							@foreach ($trainings as $index => $training)
								<tr>
									<td class="d-none d-xl-table-cell">{{ $index + 1 }}</td> <!-- Row number -->
									<td class="d-none d-xl-table-cell">{{ $training->course_name }}</td>
									<td class="d-none d-xl-table-cell">{{ $training->training_year }}</td>
									<td class="d-none d-xl-table-cell">{{ $training->total_trainings }}</td>
								</tr>
							@endforeach
							
						</tbody>
					</table>
				</div>
			</div>

			<div class="col-12 col-lg-12 col-xxl-10 d-flex">
				<div class="card flex-fill">
					<div class="card-header">
						
						<h5 class="card-title mb-0">Trainers Performance</h5>
					</div>
					<table class="table table-hover my-0">
						<thead>
							<tr>
								<th>#</th>
								<th class="d-none d-xl-table-cell">Trainer Name</th>
								<th class="d-none d-xl-table-cell">Pin</th>						
								<th class="d-none d-md-table-cell">Total Certifications</th>
							</tr>
						</thead>
						<tbody>
							@foreach ($trainersPerformance  as $index => $trainer)
								<tr>
									<td class="d-none d-xl-table-cell">{{ $index + 1 }}</td> <!-- Row number -->
									<td class="d-none d-xl-table-cell">{{ $trainer->name }}</td>
									<td class="d-none d-xl-table-cell">{{ $trainer->pin }}</td>
									<td class="d-none d-xl-table-cell">{{ $trainer->total_certifications  }}</td>
								</tr>
							@endforeach
							
						</tbody>
					</table>
				</div>
			</div>
			
		</div>

	</div>
</main>



@endsection