@extends('layouts.base', [
	"breadcrumb" => [  // see partials/breadcrumb.blade.php for default options
		"title" => "ACCUEIL",
		"nav" => [
			"Accueil Admin" => "javaScript:void(0);",
			"Programmer un examen" => "#",
		],
	]
])

@section('title', "Accueil Admin")

@section('css')
	<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>
		form label {
			font-weight: bold;
		}

		.form-icon {
			font-size: 1.8em;
			background: #2cabe3;
			color: white;
			border-radius: 100%;
			height: 2.2em;
			width: 2.2em;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		fieldset {
			margin-top: 2em;
			padding: 1em;
			/* background: #f9f9f9; */
			/* border-radius: 5px; */
			border: solid #e9e9e9;
			border-width: 1px 0px 0px;
		}

		fieldset > legend {
			transform: translateY(-1.7em);
			background: white;
			border: 1px solid #d7d7d7;
    		box-shadow: 2px 2px 0px 1px #edf1f5;
			width: fit-content;
			padding: 5px;
			border-radius: 5px;
			margin-left: 5px;
			font-size: 1.2em;
			font-weight: 700;
			margin-bottom: 0px;
		}
	</style>
@endsection

@section('content')

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

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

	{{-- top stats --}}
	<div class="row">
		<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>
						{{ $stats[1] + $stats[2] + $stats[3]  }}
					</h3>
				</div>
			</div>
		</div>
		<div class="col-lg-3 col-md-6">
			<div class="card">
				<div class="card-body">
					<h6 class="card-title">Sessions normales</h6>
					<h3 class="font-weight-medium text-success mb-0 mt-3 text-end">
						<i class="mdi mdi-bookmark-plus"></i>
						{{$stats[1]}}
					</h3>
				</div>
			</div>
		</div>
		<div class="col-lg-3 col-md-6">
			<div class="card">
				<div class="card-body">
					<h6 class="card-title">Rattrapages</h6>
					<h3 class="font-weight-medium text-info mb-0 mt-3 text-end">
						<i class="mdi mdi-bookmark"></i>
						{{$stats[2]}}
					</h3>
				</div>
			</div>
		</div>
		<div class="col-lg-3 col-md-6">
			<div class="card">
				<div class="card-body">
					<h6 class="card-title">Reprises</h6>
					<h3 class="font-weight-medium text-danger mb-0 mt-3 text-end">
						<i class="mdi mdi-bookmark-remove"></i>
						{{$stats[3]}}
					</h3>
				</div>
			</div>
		</div>
	</div>

	{{-- Add new exam form --}}
	<div class="row d-flex justify-content-center">
		<div class="col-lg-8 col-md-10 col-sm-12">
			<div class="card card-body">
				<h4 class="card-title text-center">PROGRAMMER UN EXAMEN</h4>
				<div class="mx-auto form-icon">
					<i class="fa fa-laptop"></i>
				</div>
				<form id="storeExamForm" class="form-horizontal" method="POST" action="{{route('admin.exam_store')}}">
					@csrf
					{{-- Course fieldset --}}
					<fieldset>
						<legend>Matière</legend>
						<div class="row">
							<div class="form-group mb-3 col-md-6 col-sm-12">
								<label class="mr-sm-2" for="type_examen">Département</label>
								<select class="form-select mr-sm-2" id="departement" name="departement" required>
									<option value="">Sélectionner le département</option>
									@foreach ($departements as $dep)
										<option value="{{$dep->idDepartement}}">{{$dep->desrdept}}</option>
									@endforeach
								</select>
							</div>
							<div class="form-group mb-3 col-md-6 col-sm-12">
								<label class="mr-sm-2" for="filiere">
									Filière
									<button id="filiere-refresh-btn" class="btn btn-info btn-sm" data-bs-toggle="tooltip" title="Rafraîchir la liste" style="display: none;">
										<i class="fas fa-sync"></i>
									</button>
								</label>
								<select class="form-select mr-sm-2" id="filiere" name="filiere" required disabled>
									<option value="">Selectionner un département</option>
									{{-- Depends on departement. Is filled with ajax --}}
								</select>
							</div>
							<div class="form-group mb-3 col-md-6 col-sm-12">
								<label class="mr-sm-2" for="type_examen">Niveau d'étude</label>
								<select class="form-select mr-sm-2" id="niveauetude" name="niveauetude" required>
									<option value=''>Sélectionner le niveau d'étude</option>
									@foreach ($niveauxFormation as $niveau)
										<option value="{{$niveau->id}}">
                                            @if ($niveau->niveauFormation == "Licence" && $formationBase == "DUT" )
                                                {{"DUT"}}
                                            @else
                                                {{$niveau->niveauFormation}}
                                            @endif
                                        </option>
									@endforeach
								</select>
							</div>
							<div class="form-group mb-3 col-md-6 col-sm-12">
								<label class="mr-sm-2" for="type_examen">Année d'étude</label>
								<select class="form-select mr-sm-2" id="anneeetude" name="anneeetude" required>
									<option value=''>Sélectionner l'année d'étude</option>
									@foreach ($anneeEtude as $annee)
										<option value="{{$annee->id}}">{{$annee->annee_etude}}</option>
									@endforeach
								</select>
							</div>
							<div class="form-group mb-3 col-12">
								<label class="mr-sm-2" for="matiere">
									Matière
									<button id="matiere-refresh-btn" class="btn btn-info btn-sm" data-bs-toggle="tooltip" title="Rafraîchir la liste" style="display: none;">
										<i class="fas fa-sync"></i>
									</button>
								</label>
								<select class="form-select mr-sm-2" id="matiere" name="matiere" required disabled>
									<option value=''>Sélectionner d'abord la filière, l'année et le niveau d'étude</option>
									{{-- Depends on fieldset's inputs. Is filled with ajax --}}
								</select>
							</div>
						</div>
					</fieldset>
					{{-- Exam fieldset --}}
					<fieldset>
						<legend>Examen</legend>
						<div class="row">
							<div class="form-group mb-3 col-12">
								<label class="mr-sm-2" for="type_examen">Type d'examen</label>
								<select class="form-select mr-sm-2" id="type_examen" name="type_examen" required>
									<option value="">Sélectionner le type d'examen</option>
									@foreach ($typesExamen as $type)
										<option value="{{$type->id}}">{{$type->type_examen}}</option>
									@endforeach
								</select>
							</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"
										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"
										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-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"
										data-min="{{date('d/m/Y')}}"
										autocomplete="off"
										required
									>
									<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">
									<input
										type="text"
										name="heure_examen"
										id="heure_examen"
										class="form-control clockpicker"
										value="07:00"
										placeholder="hh:mm"
										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">
									<input
										type="text"
										name="duree_examen"
										id="duree_examen"
										value="02:00"
										placeholder="02:00"
										class="form-control clockpicker"
										required
									>
									<span class="input-group-text"><i class="fas fa-hourglass-half"></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
								>Aucun document n'est permis.</textarea>
							</div>
						</div>
					</fieldset>
					<div class="d-flex justify-content-center">
						<button type="submit" class="btn btn-info btn-lg font-weight-medium">
							Ajouter l'examen <i class="fa fa-plus-circle ms-1"></i>
						</button>
					</div>
				</form>
			</div>
		</div>
	</div>
@endsection

@section('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>
		const URL = "{{route('admin.exam_form_data')}}";

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

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

			// get form data events
			$("#departement").on('change', fecthFilieres);
			$("#filiere-refresh-btn").on('click', fecthFilieres);

			$("#filiere, #niveauetude, #anneeetude").on('change', fetchMatieres);
			$("#matiere-refresh-btn").on('click', fetchMatieres);

			//
			$("#storeExamForm").on("submit", function (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) {
						Swal.fire({
							icon: 'success',
							title: 'Succès',
							text: "Examen crée 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 l'enregistrement de l'examen !",
							});
						}
					}
				});
			});
		}());

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

			let html = `<option value=''>Selectionner un département</option>`;

			if ($("#departement").val().length == 0) {
				$("#filiere").html(html);
				$("#filiere").attr("disabled", true);
				$("#filiere-refresh-btn").fadeOut();

				return false;
			}

			html = `<option value=''>Selectionner la filière</option>`;

			$.ajax({
				url: URL,
				type: 'GET',
				data: {
					for: "FILIERE",
					departement: $("#departement").val(),
				},
				success: function (response) {
					response.data.forEach(function (f) {
						html += `<option value="${f.idFiliere}">${f.intituleFilieres}</option>`;
					});

					$("#filiere").html(html);
					$("#filiere").attr("disabled", false);
				},
				error: function (err) {
					console.error(err);
					showToastr("danger",'Erreur de chargement des filières !');

					$("#filiere").html(html);
					$("#filiere-refresh-btn").fadeIn();
				}
			});
		}

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

			let html = `<option value=''>Sélectionner d'abord la filière, l'année et le niveau d'étude</option>`;

			if (
				$("#filiere").val().length == 0 ||
				$("#niveauetude").val().length == 0 ||
				$("#anneeetude").val() .length == 0
			) {
				$("#matiere").attr("disabled", true);
				$("#matiere").html(html);
				$("#matiere-refresh-btn").fadeOut();

				return false;
			}

			html = `<option value=''>Selectionner la matière</option>`;

			$.ajax({
				url: URL,
				type: 'GET',
				data: {
					for: "MATIERE",
					filiere: $("#filiere").val(),
					niveauetude: $("#niveauetude").val(),
					anneeetude: $("#anneeetude").val(),
				},
				success: function (response) {
					console.log(response);

					response.data.forEach(function (ec) {
						html += `<option value="${ec.idEC}">${ec.intituleEcu}</option>`;
					});

					$("#matiere").html(html);
					$("#matiere").attr("disabled", false);
				},
				error: function (err) {
					console.error(err);
					showToastr("danger",'Erreur lors du chargement des matières !');
					$("#matiere").html(html);
					$("#matiere-refresh-btn").fadeIn();
				}
			});
		}
	</script>
@endsection