@extends('layouts.app')
@section('titlePage', 'Student Wise Reports')
@section('content')
<style>
	[data-theme-color=default] h5{
		color: #ada4a4;
	}
	[data-theme-color=default] th{
		color:#ada4a4;
	}
	[data-theme-color=default] .table-striped>tbody>tr:nth-of-type(odd)>*{
		color:#ada4a4;
	}
	[data-theme-color=default].table-striped tbody tr:nth-of-type(even){
		background-color: transparent;
	}
</style>
<script>
    document.getElementById("kts-14").classList.add("is-expanded");
    document.getElementById("ktss-14").classList.add("active","is-expanded");
    document.getElementById("reports-14").classList.add("active");
</script>
<div class="page-wrapper">
	<!-- [ breadcrumb ] start -->
	<div class="breadcrumb-header justify-content-between">
		<div class="left-content">
			<span class="main-content-title text-primary mg-b-0 mg-b-lg-1">Student Wise Reports</span>
		</div>
		<div class="justify-content-center mt-2">
			<ol class="breadcrumb breadcrumb-style3">
				<li class="breadcrumb-item tx-15"><a href=""><i class="feather icon-home"></i></a></li>
				<li class="breadcrumb-item active">Reports</li>
			</ol>
		</div>
	</div>
	<!-- [ breadcrumb ] end -->
	<!-- [ Main Content ] start -->
	<div class="row">
		<div class="col-xl-12">
			@if(session()->has('message.level'))
			<div class="mt-2 alert alert-{{session('message.level')}} alert-dismissible" role="alert">
				<button type="button" class="close" data-dismiss="alert">&times;</button>
				{!! session('message.content') !!}
			</div>
			@endif
			<div class="card">
				<div class="card-header align-items-center">
					<div class="row">
						<!-- product profit end -->
						<div class="col-md-2 mt-3" >
							<h5>Search Student</h5>
						</div>
						<div class="col-md-8 mt-2">
							<div class="card-block">
								<div class="row card-active">
									<div class="col-12">
										<form method="GET" action="">
											<div class="input-group mb-3" style="width: 100%;">
												<input name="search" id="search" placeholder="Enter Name, Email or USN" class="form-control" value="{{request()->get('search')}}" />
												<a class="btn btn-danger text-white" href="{{ _route('client.reports.student-wise-report') }}">X</a>
											</div>
										</form>
										@if (request()->has('student_id'))
										<center><button type="button" class="btn btn-primary" id="get-pdf" onclick="getPDF();">Download as PDF</button></center>
										@endif
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="card-body" <div class="row" id="budgeting-pdf">
					@if (request()->has('student_id'))

					<div class="col-md-12">
							<h5 class="text-primary">STUDENT DETAILS</h5>
						</div>
						<div class="table-responsive">
							<table class="table table-bordered table-striped mg-b-0 text-md-nowrap" id="student_data">
								<thead>
									<tr>
										<th>Student Name</th>
										<th>Campus Details</th>
										<th>Batch</th>
										<th>Department</th>
										<th>Registration Number</th>
										<th>Student Email ID</th>
									</tr>
								</thead>
								<tbody>
									@forelse ($students as $student)
									<tr>
										<td scope="row">{{ $student->fullname }}</td>
										<td>{{ $student->campus->campus_title }},<br>{{ $student->campus->campus_location }}</td>
										<td>{{ $student->batch->batch_title }}</td>
										<td>{{ $student->department->d_name }}</td>
										<td>{{ $student->registration_number }}</td>
										<td>{{ $student->email }}</td>
									</tr>
									@empty
									<tr>
										<td scope="row" colspan="6">No results...</td>
									</tr>
									@endforelse
								</tbody>
							</table>
						</div>

					<div class="col-md-12 test_report">
						<div class="col text-center">
							<h5>Tests/Assignments Details</h5>
						</div>
						<div class="table-responsive">
							<table class="table table-striped table-inverse">
								<thead class="thead-inverse">
									<tr>
										<th>Details</th>
										<th>Scheduled</th>
										<th>Attended</th>
									</tr>
								</thead>
								<tbody>

									<tr>
										<td>Monitored Tests</td>
										<td>{{ $scheduled["test"] }}</td>
										<td>{{ $attended["test"] }}</td>
									</tr>
									<tr>
										<td>Company Specific Tests</td>
										<td>{{ $company["test"] }}</td>
										<td>{{ $company["assignment"] }}</td>
									</tr>
									<tr>
										<td>Assignments</td>
										<td>{{ $scheduled["assignment"] }}</td>
										<td>{{ $attended["assignment"] }}</td>
									</tr>

								</tbody>
							</table>
						</div>
					</div>
					@if($attended["test"]>0)
					<div class="col-md-12 test_report">
						<div class="col text-center">
							<h5>Tests Report</h5>
						</div>
						<div id="canvas-holder-t" style="width:100%">
							<canvas id="chart-test"></canvas>
						</div>
					</div>
					@endif

					@else

					<div class="col-md-12">
							<h5 class="text-primary">STUDENT DETAILS</h5>
						</div>
						<div class="table-responsive">
							<table class="table table-bordered table-striped mg-b-0 text-md-nowrap" id="student_data">
								<thead>
									<tr>
										<th>Student Name</th>
										<th>Campus Details</th>
										<th>Batch</th>
										<th>Department</th>
										<th>Registration Number</th>
										<th>Student Email ID</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td scope="row" colspan="7">
											<center>No results...</center>
										</td>
									</tr>
								</tbody>
							</table>
						</div>

					@endif
				</div>
			</div>
		</div>
	</div>
</div>
<!-- [ Main Content ] end -->
</div>

@endsection
@push('script')
@if (!empty($tests_attend))
@php
$marks_obtained = $tests_attend->pluck('marks_obtained')->all();
$labels = $tests_attend->pluck('test.title')->all();
$subject_analysis = $tests_attend->pluck('subject_analysis')->all();
$subject_id = array();
$array_subject = array();
$bg_color = array('#B8255f','#DB4035','#ff9933','#fad000','#afb83b','#7ecc49','#299438','#158fad','#14aaf5','#4073ff','#884dff','#af38eb','#eb96eb','#e05194');
foreach($subject_analysis as $key => $subjects){
$json_subject = array_values(json_decode($subjects, true));
array_push($array_subject,$json_subject);
foreach($json_subject as $value){
if(!in_array(($value['subject_id']),$subject_id)){
array_push($subject_id,$value['subject_id']);
}
}
}

/* collect all subjects ids */
$data_list = array();
$data_sub_label = array();
foreach($subject_id as $value){
$data = array();
$data_label = array();
foreach($test_attend_mark as $key => $val){
$score = null;
$sub_label = null;
if(array_key_exists($value,$val)){
$score = $val[$value]["score"];
$sub_label = $labels[$key]." - Mark: ".$val[$value]["sub_label"];
}
array_push($data,$score);
array_push($data_label,$sub_label);

}
$data_list[$value] = $data;
$data_sub_label[] = $data_label;
}
//dd($data_sub_label);
/* get all subject lables */
$datasets = '';
$label_section = '';
foreach($data_list as $key => $value){
$key_subject = array_search($key, array_column($subject, 'id'));
$label_section .= "'".$subject[$key_subject]["subject_title"]."',";
}
//dd($labels);
/* select dataset based on test */
foreach($labels as $key => $value){
$color_key = $key%10;
$datasets .= "{
label: ['".$value." ( Total marks ".$tests_attend[$key]->marks_obtained." / ".$tests_attend[$key]->total_marks." )'],
data: [";
foreach($data_list as $data_mark){
if(!is_null($data_mark[$key])){
$datasets .= "'".round($data_mark[$key],1)."',";
}else{
$datasets .= "'null',";
}
}
$datasets .= "],
backgroundColor: '".$bg_color[$color_key]."',
minBarLength: 10,
}, ";
}

@endphp


<script>
	const data = {
		labels: [{!!$label_section!!}],
		datasets: [{!!$datasets!!}]
	};
	var sub_label = @json($data_sub_label);

	const config = {
		type: 'bar',
		data: data,
		options: {
			skipNull: true,
			tooltips: {
				enabled: false
			},
			hover: {
				mode: null
			},
			responsive: true,
			legend: {
				position: 'bottom' // place legend on the bottom of chart
			},

			scales: {
				x: {
					stacked: false
				},
				y: {
					ticks: {
						min: 0,
						max: 100,
						callback: function(value) {
							return value + "%";
						}
					},
					grid: {
						display: true,
						color: function(value) {
							var index_value = value.tick.value;
							if (index_value === 0) {
								return "black";
							} else {
								return "lightgray";
							}
						},

					},

					stacked: false
				}
			},
			plugins: {
				display: true,
				datalabels: {
					display: true,
					formatter: function(value, context) {
						return value;
					},
				},
				tooltip: {
					callbacks: {
						label: function(context) {
							let sub_label_subject = sub_label[context.dataIndex][context.datasetIndex];
							let label = context.raw || '';
							if (label) {
								label = sub_label_subject + " (" + label + '%)';
							}

							return label;
						}
					}
				}
			},
			animation: {
				duration: 0,
				onComplete: function() {
					ctx = this.ctx;
					ctx.font = Chart.helpers.fontString(Chart.defaults.font.size, Chart.defaults.font.style, Chart.defaults.font.family);
					ctx.textAlign = 'center';
					ctx.textBaseline = 'top';
					chartinst = this;
					this.data.datasets.forEach(function(dataset, i) {
						if (chartinst.isDatasetVisible(i)) {
							var meta = chartinst.getDatasetMeta(i);
							meta.data.forEach(function(bar, index) {
								var data = dataset.data[index] + " %";
								var height_size = bar.y + ((bar.$context.element.base - bar.y) / 2);
								//console.log(height_size);
								if (data === 0) height_size = bar.$context.element.base;
								if (data !== null) {
									ctx.fillText(data, bar.x, height_size);
								}
							});
						}
					});
				},
				onProgress: function() {
					ctx = this.ctx;
					ctx.font = Chart.helpers.fontString(Chart.defaults.font.size, Chart.defaults.font.style, Chart.defaults.font.family);
					ctx.textAlign = 'center';
					ctx.textBaseline = 'top';
					chartinst = this;
					this.data.datasets.forEach(function(dataset, i) {
						if (chartinst.isDatasetVisible(i)) {
							var meta = chartinst.getDatasetMeta(i);
							meta.data.forEach(function(bar, index) {
								var data = dataset.data[index] + " %";
								var height_size = bar.y + ((bar.$context.element.base - bar.y) / 2);
								//console.log(height_size);
								if (data === 0) height_size = bar.$context.element.base;
								if (data !== null) {
									ctx.fillText(data, bar.x, height_size);
								}
							});
						}
					});
				}
			}
		}
	};

	window.onload = function() {
		var ctx = document.getElementById('chart-test').getContext('2d');
		window.myPie = new Chart(ctx, config);
	};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.esm.js"></script>


@endif
<script>
	/* search ajax to display students */
	$(document).ready(function() {
		$("#search").keyup(function() {
			var str = $(this).val();
			if (str.length >= 3) {
				$.ajax({
					type: "POST",
					url: "{{_route('client.reports.ajax-student-report')}}",
					data: {
						"_token": "{{ csrf_token() }}",
						"search": $(this).val()
					},
					success: function(data) {
						if (data) {
							$("#student_data tbody").html(data);
							$("#student_data thead").html("<tr><th>Student Name</th><th>Campus Details</th><th>Batch</th><th>Department</th><th>Registration Number</th><th>Student Email ID</th><th>Action</th></tr>");
							$(".test_report").hide();
						}
					}
				});
			} else {
				$("#student_data tbody").html('<tr><td scope="row" colspan="7"><center>No results...</center></td></tr>');
				$("#student_data thead").html("<tr><th>Student Name</th><th>Campus Details</th><th>Batch</th><th>Department</th><th>Registration Number</th><th>Student Email ID</th></tr>");
				$(".test_report").hide();
			}
		});
	});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script>
	function getPDF() {
		return html2canvas($('#budgeting-pdf'), {
			backgroundColor: "#7ecc49",
			onrendered: function(canvas) {
				var myImage = canvas.toDataURL("image/png");
				// Adjust width and height
				var imgWidth = (canvas.width * 70) / 370;
				var imgHeight = (canvas.height * 75) / 340;
				// jspdf changes
				var pdf = new jsPDF('p', 'mm', 'a4');
				pdf.addImage(myImage, 'png', 5, 20, imgWidth, imgHeight); // 2: 19
				pdf.save('Student-report.pdf');
			}
		});
	}
</script>
@endpush