@extends('frontend.layouts-user.app')
@section('title')@endsection
@section('content')
<!--Main container start -->
<main class="ttr-wrapper">
	<div class="container-fluid">
		<div class="db-breadcrumb">
			<h4 class="breadcrumb-title">Mathematics
			</h4>
			<ul class="db-breadcrumb-list">
				<li><a href="#"><i class="fa fa-home"></i>Home</a></li>
				<li> Mathematics
				</li>
			</ul>
		</div>
		<!-- Card -->

		<!-- Card END -->
		<div class="row">
			<!-- Your Profile Views Chart -->

			<div class="col-lg-12 m-b30">
				<div class="widget-box">
					<div class="row">
						<div class="col-lg-4">
							<div class="wc-title">
								<h4> Test One Details Report</h4>
							</div>

						</div>
						<div class="col-lg-4">
							<div class="wc-title">

								<h4 class="text-right"> Time Spend : <span> 180 Min</span></h4>
							</div>

						</div>
						<div class="col-lg-4">
							<div class="wc-title">
								<h4 class="text-right"> Test Deficulty Level : <span>Hard</span></h4>

							</div>

						</div>

					</div>
					<div class="widget-inner">
						<div class="col-lg-12 m-b30">
							<h4>Test Performance </span></h4>

							<div class="widget-box">


								<div class="row">
									<div class="col-lg-6 m-b30">
										<div class="widget-box1">
											<div class="wc-title">
												<h4> Performance Graph </h4>
											</div>
											<div class="widget-inner">
												<canvas id="classVsStudentChart" height="300"></canvas>
											</div>

										</div>
									</div>


									<div class="col-lg-6 m-b30">
										<div class="widget-box1">
											<div class="wc-title">
												<h4> Mentor Remarks </h4>
											</div>
											<div class="widget-inner-mentor">
												<h5>Personalized feedback</h5>
												<p class="feedback-text">
													Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, aspernatur.
													<span class="more-text">
														Quisquam, facere! Autem libero harum, magni quia distinctio labore unde
														voluptatem molestiae explicabo, error dicta.
													</span>
												</p>
												<a href="javascript:void(0)" class="read-toggle">Read more</a>
											</div>

											<div class="widget-inner-mentor">
												<h5>Improvement points</h5>
												<p class="feedback-text">
													Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, aspernatur.
													<span class="more-text">
														Focus more on concept clarity, regular practice, and time management
														to improve overall performance.
													</span>
												</p>
												<a href="javascript:void(0)" class="read-toggle">Read more</a>
											</div>

											<div class="widget-inner-mentor">
												<h5>Exam-writing tips</h5>
												<p class="feedback-text">
													Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, aspernatur.
													<span class="more-text">
														Attempt easy questions first, write step-wise solutions, and manage
														time efficiently during the exam.
													</span>
												</p>
												<a href="javascript:void(0)" class="read-toggle">Read more</a>
											</div>


										</div>
									</div>

									<div class="col-lg-12 m-b30">
										<div class="widget-box1">
											<div class="wc-title">
												<h4> Skill Wise Breakdown</h4>
											</div>
											<div class="widget-inner">
												<div class="chart-wrapper">
													<canvas id="skillWiseChart"></canvas>
												</div>


											</div>

										</div>
									</div>

									<div class="col-lg-6 m-b30">
										<div class="widget-box1">
											<div class="wc-title">
												<h4> View Solve Paper</h4>
											</div>
											<div class="widget-inner">
												<div class="chart-wrapper">
													<embed src="assets/images/file-sample.pdf" width="100%" height="300px" />
												</div>
												<div class="mt-3 text-center">
													<a href="assets/images/file-sample.pdf" target="_blank" class="btn">View PDF</a>
												</div>


											</div>

										</div>
									</div>
									<div class="col-lg-6 m-b30">
										<div class="widget-box1">
											<div class="wc-title">
												<h4> Download Report</h4>
											</div>
											<div class="widget-inner">
												<div class="chart-wrapper">
													<embed src="assets/images/file-sample.pdf" width="100%" height="300px" />
												</div>
												<div class="mt-3 text-center">
													<a href="assets/images/file-sample.pdf" target="_blank" class="btn">Download Report PDF</a>
												</div>


											</div>

										</div>
									</div>

								</div>

							</div>
						</div>

					</div>
				</div>
			</div>
		</div>
	</div>
</main>
<script>
	document.addEventListener('DOMContentLoaded', function() {

		// extra info (normally DB / backend se aata hai)
		const studentScore = 72;
		const classAverage = 68;
		const percentile = 85;
		const rank = 10;

		const ctx = document.getElementById('classVsStudentChart').getContext('2d');

		new Chart(ctx, {
			type: 'bar',
			data: {
				labels: ['15 Jan 2026'],
				datasets: [{
						label: 'Student Score',
						data: [studentScore],
						backgroundColor: '#4CAF50'
					},
					{
						label: 'Class Average',
						data: [classAverage],
						backgroundColor: '#FF9800'
					}
				]
			},
			options: {
				responsive: true,
				plugins: {
					legend: {
						position: 'top'
					},
					tooltip: {
						callbacks: {
							afterBody: function() {
								return [
									'Percentile: ' + percentile,
									'Rank: ' + rank
								];
							}
						}
					}
				},
				scales: {
					x: {
						title: {
							display: true,
							text: 'Test Date'
						}
					},
					y: {
						beginAtZero: true,
						max: 100,
						title: {
							display: true,
							text: 'Score (%) / Marks'
						}
					}
				}
			}
		});

	});
</script>


<script>
	document.addEventListener('DOMContentLoaded', function() {

		const skills = ['Numerical', 'Concept', 'Formula', 'Writing', 'Diagram'];

		const rankScore = [5, 4, 3, 5, 10];

		const remarks = {
			Numerical: 'Strong calculation skills',
			Concept: 'Concepts improving',
			Formula: 'Excellent formula usage',
			Writing: 'Needs more practice',
			Diagram: 'Average diagram clarity'
		};

		// 🎨 Colors per skill
		const colors = [
			'#4f46e5', // Numerical
			'#22c55e', // Concept
			'#f59e0b', // Formula
			'#ec4899', // Writing
			'#0ea5e9' // Diagram
		];

		// 🔹 Plugin for always-visible remarks
		const remarkPlugin = {
			id: 'remarkPlugin',
			afterDatasetsDraw(chart) {
				const {
					ctx,
					scales: {
						y
					}
				} = chart;

				ctx.save();
				ctx.font = '17px Outfit, sans-serif';
				ctx.fillStyle = '#555';

				chart.data.labels.forEach((label, index) => {
					const yPos = y.getPixelForValue(index);
					ctx.fillText(
						'Remark: ' + remarks[label],
						y.left + 90,
						yPos + 20
					);
				});

				ctx.restore();
			}
		};

		new Chart(document.getElementById('skillWiseChart'), {
			type: 'bar',
			data: {
				labels: skills,
				datasets: [{
					label: 'Rank (out of 10)',
					data: rankScore,
					backgroundColor: colors, // 👈 ALAG-ALAG COLORS
					borderRadius: 6,
					barThickness: 16
				}]
			},
			options: {
				indexAxis: 'y',
				responsive: true,
				plugins: {
					tooltip: {
						callbacks: {
							label: (ctx) => ctx.parsed.x + ' / 10'
						}
					}
				},
				scales: {
					x: {
						beginAtZero: true,
						max: 10,
						ticks: {
							stepSize: 1
						},
						title: {
							display: true,
							text: 'Rank Scale'
						}
					}
				}
			},
			plugins: [remarkPlugin]
		});

	});
</script>
@endsection