@extends('layouts.base', [
	"breadcrumb" => [  // see partials/breadcrumb.blade.php for default options
		"title" => "LISTE DES EXAMENS",
		"nav" => [
			"GESTSTUDENT NG" => "javaScript:void(0);",
			"Liste des examens" => "#",
		],
	]
])

@section('title', "Liste des examens")

@section('css')
	<link href="{{asset('assets/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css')}}" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="{{asset('assets/libs/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css')}}">
	<link rel="stylesheet" type="text/css" href="{{asset('assets/libs/clockpicker/dist/jquery-clockpicker.min.css')}}">
	<style>
		#exams-table tbody tr:not(.editable) {
			background: #fff1f1;
		}

		.popover { /* either clockpicker doesn't show up in modal !*/
			z-index: 999999;
		}
	</style>
@endsection

@section('content')
	{{-- alert with content --}}
	@include('partials.alert')

	{{-- alert settings with content --}}
	@include('partials.alert-settings')
	
	{{-- top stats --}}
	@php
		$nbValidExams = count(json_decode(json_encode($validExams), true));
		$nbNvExams = count(json_decode(json_encode($nvExams), true));
		$totalExams = $nbValidExams + $nbNvExams; 
	@endphp
	<div class="row mb-3">
		<div class="col-lg-3 col-md-6">
			<div class="card">
				<div class="card-body">
					<h6 class="card-title">Total des examens</h6>
					<h3 class="font-weight-medium text-primary mb-0 mt-3 text-end">
						<i class="mdi mdi-bookmark-outline"></i>
						{{ $totalExams }}
					</h3>
				</div>
			</div>
		</div>
		<div class="col-lg-3 col-md-6">
			<div class="card">
				<div class="card-body">
					<h6 class="card-title">À venir</h6>
					<h3 class="font-weight-medium text-info mb-0 mt-3 text-end">
						<i class="mdi mdi-calendar-multiple"></i> {{$nbValidExams}}<sub>/{{$totalExams}}</sub>
					</h3>
				</div>
			</div>
		</div>
		<div class="col-lg-3 col-md-6">
			<div class="card">
				<div class="card-body">
					<h6 class="card-title">Passés</h6>
					<h3 class="font-weight-medium text-danger mb-0 mt-3 text-end">
						<i class="mdi mdi-calendar-clock"></i> {{$nbNvExams}}<sub>/{{$totalExams}}</sub>
					</h3>
				</div>
			</div>
		</div>
		<div class="col-lg-3 col-md-6">
			<div class="card">
				<div class="card-body">
					<h6 class="card-title">Avec épreuve</h6>
					<h3 class="font-weight-medium text-dark mb-0 mt-3 text-end">
						<i class="mdi mdi-file-check"></i> {{count(json_decode(json_encode($examsWithEpreuve), true))}}<sub>/{{$totalExams}}</sub>
					</h3>
				</div>
			</div>
		</div>
	</div>

	<div class="card card-body mx-3">
		<ul class="nav nav-tabs" role="tablist">
			<li class="nav-item">
				<a class="nav-link d-flex active" data-bs-toggle="tab" href="#vExams" role="tab">
					<span><i class="mdi mdi-calendar-multiple"></i></span>
					<span class="d-none d-md-block ms-2">À venir</span>
				</a>
			</li>
			<li class="nav-item">
				<a class="nav-link d-flex" data-bs-toggle="tab" href="#nvExams" role="tab">
					<span><i class="mdi mdi-calendar-clock"></i></span>
					<span class="d-none d-md-block ms-2">Passés</span>
				</a>
			</li>
		</ul>
		<!-- Tab panes -->
		<div class="tab-content">
			<div class="tab-pane active" id="vExams" role="tabpanel">
				<div class="p-3">
					<h4>Liste des examens à venir</h4>
					<div class="table-responsive mt-3">
						<table id="v-exams-table" class="table table-hover table-bordered">
							<thead>
								<tr>
									<th>Cours</th>
									<th>Filière</th>
									<th>Enseignant</th>
									<th>Date de composition</th>
									<th>Heure</th>
									<th>Description</th>
									<th class="text-nowrap">Action</th>
								</tr>
							</thead>
							<tbody>
								@foreach ($validExams as $i => $exam)
									@php
										$arr = explode("/",$exam->date);
										$date = $arr[1].'-'.$arr[0].'-'.$arr[2];
			
										$heure = explode(":",$exam->heure);
										$heure = str_pad($heure[0], 2, '0', STR_PAD_LEFT). ":". $heure[1];
			
										$isWithEpreuve = empty($examsWithEpreuve[$exam->idexamen]) ? false : $examsWithEpreuve[$exam->idexamen];
									@endphp
									<tr>
										<td>
											{{$exam->intituleEcu}}
											<div>
												@if ($isWithEpreuve)
													<span class="badge bg-info">Epreuve</span>
													@if ($examsWithEpreuve[$exam->idexamen] == "C")
														<span class="badge bg-secondary">Compo controllée</span>
													@else
														<span class="badge font-weight-medium bg-light-secondary text-secondary">Compo libre</span>
													@endif
												@endif
											</div>
										</td>
										<td>
											<span class="text-primary">{{$exam->sigleFilieres}}</span>
											<span class="text-info">{{$exam->niveauformation}}</span>
											{{$exam->annee}}
										</td>
										<td>{{$exam->prof}}</td>
										<td>{{$date." à ".$heure}}</td>
										<td>{{$exam->duree}} min {{$exam->pause ? ' avec '.$exam->pause.' min de pause. ' : ' sans aucune pause. ' }} </td>
										<td>{{$exam->description }} </td>
										<td>
											@if ($isWithEpreuve)
												<button 
													class="btn btn-info btn-sm me-1" 
													data-bs-toggle="modal" 
													data-bs-target="#print-list-modal"
													title="Imprimer"
													data-tooltip="tooltip"
													data-item="{{$exam->idexamen}}"
												>
													<i class="fas fa-print"></i>
												</button>
											@else
												<span 
													class="btn btn-secondary btn-sm me-1" 
													title="Aucune action possible sur cet examen"
													data-tooltip="tooltip"
													style="opacity: .5;"
													{{-- disabled --}}
												>
													<i class="fas fa-print"></i>
												</span>
											@endif
											<button 
												class="btn btn-warning text-dark btn-sm me-1" 
												data-bs-toggle="modal" 
												data-bs-target="#edit-exam-modal"
												title="Modifier"
												data-tooltip="tooltip"
												data-item="{{$exam->idexamen}}"
											>
												<i class="fa fa-edit"></i>
											</button>
											<button 
												class="btn btn-outline-danger btn-sm delete-exam" 
												title="Supprimer"
												data-tooltip="tooltip"
												data-url="{{route('admin.exam_delete', $exam->idexamen)}}"
											>
												<i class="fa fa-trash"></i>
											</button>
		
											<div id="data-{{$exam->idexamen}}" style="display: none;" hidden>
												@php
													$duree_min = $exam->duree % 60;
													$duree_h = ($exam->duree - $duree_min) / 60;
		
													// format to hh:mm
													$duree_min = str_pad($duree_min, 2, '0', STR_PAD_LEFT);
													$duree_h = str_pad($duree_h, 2, '0', STR_PAD_LEFT);
													$duree = "$duree_h:$duree_min";
												@endphp
												<input type="hidden" name="date_examen" value="{{$arr[1].'/'.$arr[0].'/'.$arr[2]}}">
												<input type="hidden" name="heure_examen" value="{{$exam->heure}}">
												<input type="hidden" name="duree_examen" value="{{$duree}}">
												<input type="hidden" name="pause" value="{{$exam->pause}}">
												<input type="hidden" name="nombrepostes" value="{{$exam->poste_disponible}}">
												<textarea name="description" hidden>{{$exam->description}}</textarea>
											</div>
										</td>
									</tr>
								@endforeach
							</tbody>
						</table>
					</div>
				</div>
			</div>
			<div class="tab-pane  p-3" id="nvExams" role="tabpanel">
				<h4>Liste des examens passés</h4>
				<div class="table-responsive  mt-3">
					<table id="nv-exams-table" class="table table-hover table-bordered">
						<thead>
							<tr>
								<th>Cours</th>
								<th>Filière</th>
								<th>Enseignant</th>
								<th>Date de composition</th>
								<th>Durée</th>
								{{-- <th>Pause</th> --}}
								<th class="text-nowrap">Action</th>
							</tr>
						</thead>
						<tbody>
							@foreach ($nvExams as $i => $exam)
								@php
									$arr = explode("/",$exam->date);
									$date = $arr[1].'-'.$arr[0].'-'.$arr[2];
		
									$heure = explode(":",$exam->heure);
									$heure = str_pad($heure[0], 2, '0', STR_PAD_LEFT). ":". $heure[1];
		
									$isWithEpreuve = empty($examsWithEpreuve[$exam->idexamen]) ? false : $examsWithEpreuve[$exam->idexamen];
								@endphp
								<tr>
									<td>
										{{$exam->intituleEcu}}
										<div>
											@if ($isWithEpreuve)
												<span class="badge bg-info">Epreuve</span>
												@if ($examsWithEpreuve[$exam->idexamen] == "C")
													<span class="badge bg-secondary">Compo controllée</span>
												@else
													<span class="badge font-weight-medium bg-light-secondary text-secondary">Compo libre</span>
												@endif
											@endif
										</div>
									</td>
									<td>
										<span class="text-primary">{{$exam->sigleFilieres}}</span>
										<span class="text-info">{{$exam->niveauformation}}</span>
										{{$exam->annee}}
									</td>
									<td>{{$exam->prof}}</td>
									<td>{{$date." à ".$heure}}</td>
									<td>{{$exam->duree}} min</td>
									{{-- <td>{{$exam->pause ? $exam->pause : 0 }} min</td> --}}
									<td>
										@if ($isWithEpreuve)
											<button 
												class="btn btn-info btn-sm me-1" 
												data-bs-toggle="modal" 
												data-bs-target="#print-list-modal"
												title="Imprimer"
												data-tooltip="tooltip"
												data-item="{{$exam->idexamen}}"
											>
												<i class="fas fa-print"></i>
											</button>
										@else
											<span 
												class="btn btn-secondary btn-sm me-1" 
												title="Aucune action possible sur cet examen"
												data-tooltip="tooltip"
												style="opacity: .5;"
												{{-- disabled --}}
											>
												<i class="fas fa-print"></i>
											</span>
										@endif
									</td>
								</tr>
							@endforeach
						</tbody>
					</table>
				</div>
			</div>
		</div>

	</div>

	{{-- edit exam modal --}}
	<div class="modal fade" id="edit-exam-modal" tabindex="-1" aria-labelledby="edit-exam-modal" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header d-flex align-items-center border-bottom">
					<h3 class="modal-title">Modifier l'examen</h3>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					<form id="edit-exam-form" class="form-horizontal" method="POST" action="{{-- is set with JS --}}" data-action="{{route('admin.exam_update', ':exam')}}">
						@csrf
						<div class="row">
							<div class="form-group mb-3 col-md-6 col-sm-12">
								<label>Date d'examen</label>
								<div class="input-group">
									<input 
										type="text"
										name="date_examen"
										id="date_examen"
										class="form-control datepicker" 
										placeholder="dd/mm/yyyy"
										{{-- value="" --}}
										required
										autocomplete="off"
									>
									<span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
								</div>								
							</div>
							<div class="form-group mb-3 col-md-6 col-sm-12">
								<label>Heure d'examen</label>
								<div class="input-group clockpicker">
									<input 
										type="text"
										id="heure_examen" 
										name="heure_examen"
										class="form-control" 
										value=""
										placeholder="hh:mm"
										autocomplete="off"
										required
									>
									<span class="input-group-text"><i class="far fa-clock"></i></span>
								</div>	
							</div>
							<div class="form-group mb-3 col-12">
								<label>Durée de l'examen</label>
								<div class="input-group clockpicker">
									<input 
										type="text"
										id="duree_examen"
										name="duree_examen"
										value="02:00"
										placeholder="02:00"
										class="form-control" 
										autocomplete="off"
										required
									>
									<span class="input-group-text"><i class="fas fa-hourglass-half"></i></span>
								</div>	
							</div>
							<div class="form-group mb-3 col-md-6 col-sm-12">
								<label>Nombre de postes disponibles</label>
								<div class="input-group">
									<input 
										type="number" 
										class="form-control"
										id="nombrepostes"
										name="nombrepostes"
										value="" 
										placeholder="Indiquez le nombre de postes"
										required
									>
									<span class="input-group-text"><i class="fa fa-laptop"></i></span>
								</div>
							</div>
							<div class="form-group mb-3 col-md-6 col-sm-12">
								<label>Pause entre les vagues de composition en minute</label>
								<div class="input-group">
									<input 
										type="number" 
										class="form-control"
										id="pause"
										name="pause"
										value=""
										placeholder="Indiquez la durée pour la pause en minute..." 
									>
									<span class="input-group-text"><i class="fa fa-laptop"></i></span>
								</div>
							</div>
							<div class="form-group mb-3 col-12">
								<label>Description de l'examen</label>
								<textarea 
									class="form-control" 
									rows="3" 
									placeholder="Exemple : Examen avec documents permis."
									id="description"
									name="description"
									required
								></textarea>
							</div>
						</div>
						<div class="d-flex justify-content-center mt-2">
							<button data-bs-dismiss="modal" class="btn btn-dark text-white font-weight-medium me-2">
								Annuler <i class="fa fa-undo ms-1"></i>
							</button>
							<button type="submit" class="btn btn-warning text-dark font-weight-medium">
								Enregistrer <i class="fa fa-save ms-1"></i>
							</button>
						</div>
					</form>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>

	{{-- print exam list modal --}}
	<div class="modal fade" id="print-list-modal" tabindex="-1" aria-labelledby="print-list-modal" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header d-flex align-items-center border-bottom">
					<h3 class="modal-title">Liste de compostion</h3>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					<form id="print-list-form" class="form-horizontal" method="POST" action="{{-- is set with JS --}}" data-action="{{route('admin.exam_print_list', ':exam')}}">
						@csrf
						<div class="form-group mb-3">
							<label for="pageSize" class="control-label">Format du document</label>
							<select name="pageSize" id="pageSize" class="form-select mr-sm-2" required>
								@foreach ($printOptions["pageSizes"] as $pageSize)
									<option value="{{$pageSize}}">{{$pageSize}}</option>
								@endforeach
							</select>
						</div>
						<div class="form-group mb-3">
							<label for="fontName" class="control-label">Police du document</label>
							<select name="fontName" id="fontName" class="form-select mr-sm-2" required>
								@foreach ($printOptions["fontNames"] as $fontName)
									<option value="{{$fontName}}">{{$fontName}}</option>
								@endforeach
							</select>							
						</div>
						<div class="form-group mb-3">
							<label for="fontSize">Taille de la police</label>
							<input type="number" name="fontSize" id="fontSize" class="form-control" value="14" required>
						</div>
						<div class="d-flex justify-content-center mt-2">
							<button data-bs-dismiss="modal" class="btn btn-dark text-white font-weight-medium me-2">
								Annuler <i class="fa fa-undo ms-1"></i>
							</button>
							<button type="submit" class="btn btn-info font-weight-medium">
								Imprimer <i class="fas fa-print ms-1"></i>
							</button>
						</div>
					</form>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
@endsection

@section('script')
	<script src="{{asset('assets/extra-libs/datatables.net/js/jquery.dataTables.min.js')}}"></script>
	<script src="{{asset('assets/libs/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js')}}"></script>
	<script src="{{asset('assets/libs/clockpicker/dist/jquery-clockpicker.min.js')}}"></script>
	<script>
		$(function() {
			$('#v-exams-table, #nv-exams-table').DataTable({
				"language": dtCustomLanguage({
					name: "examen",
					plural: "examens",
					gender: "M",
				}),
			});

			$("#date_examen").datepicker({
				format: 'dd/mm/yyyy',
				language: "fr",
				autoclose: true,
				todayHighlight: true,
			});

			$(".clockpicker").clockpicker({
				donetext: 'Terminé',
				autoclose: true,
			});

			$("#print-list-modal").on("show.bs.modal", function(e) {
				const exam = $(e.relatedTarget).attr("data-item");

				$("#print-list-form").attr(
					"action", 
					$("#print-list-form").data("action").replace(":exam", exam)
				);
			});

			$("#edit-exam-modal").on("show.bs.modal", function(e) {
				
				/*
					HACK: Because of EVENTS' PROPAGATION in DOM, when datepicker is 
					about to show it triggers modal's show event too. We need to 
					detect this and stop function right here !
				*/
				if (e.target.id !== e.currentTarget.id) { // if is not native show of modal !
					console.log(e.target.id , e.currentTarget.id);
					return false;
				}

				const exam = $(e.relatedTarget).attr("data-item");
				const store = $("#data-" + exam);

				/*
					FIXME : When datepicker is opened, it clear the content of the input !
					- https://stackoverflow.com/questions/23311222/how-do-you-prevent-bootstrap-datepicker-from-clearing-existing-value-from-input
					- https://bootstrap-datepicker.readthedocs.io/en/latest/events.html

					SOME IDEA TO SOLVE : 
					init on modal show and destroy on modal hide ?
					// defaultViewDate: store.find("[name='date_examen']").val(),
					// $("#edit-exam-modal").on("hidden.bs.modal", function(e) {
					// 	$("#date_examen").datepicker("destroy");
					// });
					Still not preventing clear.

					// $('#date_examen').datepicker('update');
					// $('#date_examen').datepicker('setDate', store.find("[name='date_examen']").val());

					Try through events or look inside the code of the plugin ?!
				*/
				$("#date_examen").val(store.find("[name='date_examen']").val());
				$("#heure_examen").val(store.find("[name='heure_examen']").val());
				$("#duree_examen").val(store.find("[name='duree_examen']").val());
				$("#pause").val(store.find("[name='pause']").val());
				$("#nombrepostes").val(store.find("[name='nombrepostes']").val());
				$("#description").val(store.find("[name='description']").val());

				$("#edit-exam-form").attr(
					"action", 
					$("#edit-exam-form").data("action").replace(":exam", exam)
				);
			});

			$("#edit-exam-form").on("submit", updateExam);

			$("#v-exams-table").on("click", ".delete-exam", function(e){
				Swal.fire({
					title: "Vraiment supprimé cet examen ? ",
					text: "Cette action sera irréverssible",
					icon: 'question',
					showCancelButton: true,
					cancelButtonColor: '#d33',
					cancelButtonText: 'Annuler',
					confirmButtonText: 'Oui <i class="fa fa-check-circle"></i>',
					confirmButtonColor: '#3085d6',
				}).then((result) => {
					if (result.isConfirmed) {
						deleteExam($(this));
					}
				})
			});
		}());

		function updateExam(e) {
			e.preventDefault();

			const form = $(this);

			// get form data
			let data = {};
			form.find("[name]").each(function(i, el) {
				data[el.name] = $(el).val();
			});
			
			console.log(data);

			$.ajax({
				url: form.attr("action"),
				type: 'POST',
				data: data,
				blockUI: true,
				success: function (response) {
					console.log(response);

					Swal.fire({
						icon: 'success',
						title: 'Succès',
						text: "Examen mis à jour avec succès !",
					}).then(() => location.reload() );
				},
				error: function (err) {
					if (err.status == 400) {
						Swal.fire({
							icon: 'warning',
							text: "Veuillez bien remplir les champs svp.",
						});
					} else {
						Swal.fire({
							icon: 'error',
							title: 'Oops...',
							text: "Petit souci lors de la modification de l'examen !",
						});
					}
				}
			});
		}

		function deleteExam(btn) {
			$.ajax({
				url: btn.data("url"),
				type: 'DELETE',
				blockUI: true,
				success: function (response) {
					Swal.fire({
						icon: 'success',
						title: 'Succès',
						text: 'Examen supprimé avec succès !',
						timer: 1500,
						showConfirmButton: false,
					}).then(() => location.reload());
				},
				error: function (err) {
					console.log(err);

					Swal.fire({
						icon: 'error',
						title: 'Oops...',
						text: "Petit souci lors de la suppression de l'examen !",
					});
				}
			});
		}
	</script>
@endsection