@extends('frontend.layouts-user.app')
@section('title')@endsection
@section('content')
<!--Main container start -->
<main class="ttr-wrapper">
	<div class="container-fluid">
		<div class="mb-5">
			<div class="row">
				<div class="col-lg-7">
					<h4 class="breadcrumb-title">Start Test
					</h4>

				</div>
				<div class="col-lg-3">
					<div id="timerBox" style="font-size:30px;font-weight:bold;text-align: end;">
						<i class="fa fa-clock-o"></i>
						<span id="timer">03:00:00</span>
					</div>


				</div>
				<div class="col-lg-2">
					<a href="{{ url('end-test')}}" class="btn btn-danger">End Test</a>

				</div>

			</div>
			<hr>

		</div>
		<!-- Card -->

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

			<div class="col-lg-12 m-b30">
				<div class="widget-box">
					<div class="wc-title">
						<h4> Paper 1</h4>
					</div>
					<button onclick="openFullscreen()"
						style="position:absolute; top:10px; right:10px; z-index:20; padding:6px 15px;" class="btn mr-5 btn-danger">
						Full Screen PDF
					</button>
					<div class="widget-inner">
						<div class="col-lg-12 m-b30">
							<div class="widget-box">

								<div id="pdfWrapper" style="position:relative; user-select:none;">
									<!-- FULLSCREEN BUTTON -->


									<iframe
										id="pdfFrame"
										src="{{ asset('images/file-sample.pdf#toolbar=0&navpanes=0&scrollbar=1') }}"
										width="100%"
										height="900px"
										style="border:none;">
									</iframe>

								</div>



							</div>
						</div>

					</div>
				</div>
			</div>


		</div>
	</div>
</main>
<script>
	const TOTAL_TIME = 3 * 60 * 60; // 3 hours in seconds
	const STORAGE_KEY = "timerStartTime";

	function startTimer() {
		let startTime = localStorage.getItem(STORAGE_KEY);

		// Agar pehli baar page open hua
		if (!startTime) {
			startTime = Date.now();
			localStorage.setItem(STORAGE_KEY, startTime);
		} else {
			startTime = parseInt(startTime);
		}

		const timerInterval = setInterval(() => {
			const elapsedSeconds = Math.floor((Date.now() - startTime) / 1000);
			const remainingSeconds = TOTAL_TIME - elapsedSeconds;

			if (remainingSeconds <= 0) {
				document.getElementById("timer").innerText = "00:00:00";
				clearInterval(timerInterval);
				return;
			}

			const hrs = String(Math.floor(remainingSeconds / 3600)).padStart(2, "0");
			const mins = String(Math.floor((remainingSeconds % 3600) / 60)).padStart(2, "0");
			const secs = String(remainingSeconds % 60).padStart(2, "0");

			document.getElementById("timer").innerText = `${hrs}:${mins}:${secs}`;
		}, 1000);
	}

	window.onload = startTimer;
</script>

<script>
	// FULLSCREEN
	function openFullscreen() {
		const el = document.getElementById("pdfWrapper");
		if (el.requestFullscreen) el.requestFullscreen();
		else if (el.webkitRequestFullscreen) el.webkitRequestFullscreen();
		else if (el.msRequestFullscreen) el.msRequestFullscreen();
	}

	// RIGHT CLICK BLOCK
	document.addEventListener("contextmenu", e => e.preventDefault());

	// TEXT SELECTION BLOCK
	document.addEventListener("selectstart", e => e.preventDefault());

	// COPY / PASTE / PRINT / SAVE / SELECT ALL BLOCK
	document.addEventListener("keydown", function(e) {
		if (
			e.ctrlKey && ["c", "v", "p", "s", "u", "a"].includes(e.key.toLowerCase())
		) {
			e.preventDefault();
		}
	});

	// DRAG BLOCK
	document.addEventListener("dragstart", e => e.preventDefault());

	// MOUSE CLICK BLOCK (but scroll allowed)
	document.getElementById("pdfFrame").addEventListener("mousedown", e => {
		e.preventDefault();
	});
</script>
@endsection