<!--**********************************
	Content body start
***********************************-->

<div class="content-body">
	<div class="container-fluid">
		<!-- row -->
		<div class="row">

			<div class="col-xl-12">
				<div class="page-title">
					<h4><span class="pull-right" id="time"><?= $time ?></span></h4>
					<div>

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


			


			<div class="col-xl-12">
				<div class="card">
					<div class="card-header">
						<h4 class="card-title">Exam</h4>
					</div>
					<div class="card-body">
						<div id="smartwizard" class="form-wizard order-create">
							<!-- <ul class="nav nav-wizard">
								<li><a class="nav-link" href="#wizard_Service"> 
									<span></span> 
									<p class="mt-2 mb-0">Step 1</p>
								</a></li>
								<li><a class="nav-link" href="#wizard_Time">
									<span></span>
									<p class="mt-2 mb-0">Step 2</p>
								</a></li>
								<li><a class="nav-link" href="#wizard_Details">
									<span></span>
									<p class="mt-2 mb-0">Step 3 </p>
								</a></li>
								<li><a class="nav-link" href="#wizard_Payment">
									<span></span>
									<p class="mt-2 mb-0">Step 4</p>
								</a></li>
							</ul> -->
							<?php							
							if (isset($questions)) {
									$cont = 0;
								foreach ($questions as $key => $val) {
									foreach ($val as $ky=>$row) {
										$cont += 1;
									}
								}


								$tot = 0;
								$j = 1; ?>
								<form method="POST" action="<?= base_url('ExamController/storeExam') ?>">
								<input type="hidden" name="user_id" value="<?= $userData['userId'] ?>" />
								<input type="hidden" name="schedule_id" value="<?= $userData['schedule'] ?>" />
								<input type="hidden" name="category_id" value="<?= $userData['categoryId'] ?>" />
								<div class="tab-content">
									<?php foreach ($questions as $key => $val) { ?>
										<div class="Questiontab<?= $j ?>" style="display:<?= ($j > 1) ? 'none':'block' ?>">
											<div id="wizard_Service<?= $val['categoryId'] ?>" class="tab-pane " role="tabpanel">
												<h5 class="text-center"><?= $key ?></h5>
												<?php foreach ($val as $ky=>$row) {
													$tot +=1; ?>
													<div class="row">
														<div class="col-lg-12 mb-2">
															<h5><?= $ky+1; ?>) <?= $row->question ?></h5>
															<input type="hidden" name="question[]" value="<?= $row->id ?>" />
															<input type="hidden" name="org_ques[]" value="<?= $row->answer ?>" />
														</div>
														<div class="col-lg-6 mb-2">
															<div class="form-check custom-checkbox mb-3 checkbox-warning">
																<input type="radio" class="form-check-input" id="customRadioBox" name="questions[<?= $row->id ?>]" value="<?= $row->option_a ?>">
																<label class="form-check-label" for="customRadioBox"><?= $row->option_a ?></label>
															</div>
														</div>
														<div class="col-lg-6 mb-2">
															<div class="form-check custom-checkbox mb-3 checkbox-warning">
																<input type="radio" class="form-check-input" id="customRadioBox" name="questions[<?= $row->id ?>]" value="<?= $row->option_b ?>">
																<label class="form-check-label" for="customRadioBox"><?= $row->option_b ?></label>
															</div>
														</div>
														<div class="col-lg-6 mb-2">
															<div class="form-check custom-checkbox mb-3 checkbox-warning">
																<input type="radio" class="form-check-input" id="customRadioBox" name="questions[<?= $row->id ?>]" value="<?= $row->option_c ?>">
																<label class="form-check-label" for="customRadioBox"><?= $row->option_c ?></label>
															</div>
														</div>
														<div class="col-lg-6 mb-2">
															<div class="mb-3">
																<div class="form-check custom-checkbox mb-3 checkbox-warning">
																	<input type="radio" class="form-check-input" id="customRadioBox" name="questions[<?= $row->id ?>]" value="<?= $row->option_d ?>">
																	<label class="form-check-label" for="customRadioBox"><?= $row->option_d ?></label>
																</div>
															</div>
														</div>
													</div>											
											<?php  }  ?>
											<div class="row">
												<div class="col-md-7"></div>
												<div class="col-md-3">
													<?php if ($j != 1) { ?>
														<a href="javascript:previousQuestion(<?= $j ?>)" class="btn btn-primary pull-right">Previous</a>
													<?php } ?>
													<?php if($tot == $cont){ ?>
														<input type="submit" name="submit" value="Submit" class="btn btn-info" />
													<?php }else{ ?>
														<a href="javascript:nextQuestion(<?= $j ?>)" class="btn btn-primary pull-right">Next</a>
													<?php } ?>													
												</div>
											</div>
											</div>
										</div>
									<?php $j++;
									} ?>
								</div>
								</form>
							<?php } ?>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!--**********************************
	Content body end
***********************************-->
<script>
	function updateTime() {
		var date = "<?php echo  $date ?>";

		var currentTime = new Date(date);
		// Subtract 40 minutes from the current time
		//currentTime.setMinutes(currentTime.getMinutes() - 40);
		currentTime.setSeconds(currentTime.getSeconds() + 1);
		// Format the time as HH:mm:ss
		var hours = currentTime.getHours();
		var minutes = currentTime.getMinutes();
		var seconds = currentTime.getSeconds();
		hours = (hours < 10) ? "0" + hours : hours;
		minutes = (minutes < 10) ? "0" + minutes : minutes;
		seconds = (seconds < 10) ? "0" + seconds : seconds;

		var formattedTime = hours + ":" + minutes + ":" + seconds;

		$('#time').text(formattedTime);
	}

	setInterval(() => {
		updateTime();
	}, 1000);

	
	function previousQuestion(page) {
    var pre = page - 1;
    $('.Questiontab' + page).hide();
    if (pre == 0) {
        $('.Questiontab1').show();
    } else {
        $('.Questiontab' + pre).show();
    }
}

function nextQuestion(page) {
    var next = page + 1;
    $('.Questiontab' + page).hide();
    $('.Questiontab' + next).show();
}
</script>

