@extends('layouts.base', [
	"breadcrumb" => [  // see partials/breadcrumb.blade.php for default options
		"title" => "EXAMEN AUTOMATIQUE",
		"nav" => [
			"Accueil" => route("teacher.index"),
			"Examens" => route("teacher.exam_index"),
			"Configuration" => "#",
		],
	]
])

@section('title', "GestStudent NG")

@section('css')
	<link href="{{asset('assets/libs/jquery-steps/jquery.steps.css')}}" rel="stylesheet">
	<link href="{{asset('assets/libs/jquery-steps/steps.css')}}" rel="stylesheet">
	<link href="{{asset('assets/libs/select2/dist/css/select2.min.css')}}" rel="stylesheet" type="text/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')}}">
	<link href="{{asset('assets/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css')}}" rel="stylesheet">

	<!-- EnlighterJS CSS !-->
	<link rel="stylesheet" href="{{asset('/assets/libs/enlighterjs/dist/enlighterjs.min.css')}}" />
	<style>
		.config-card {
			width: 80%;
			margin-left: auto;
			margin-right: auto;
		}

		.wizard-content .wizard >.steps .step {
    		background-color: #f3f3f3;
		}

		.wizard-content .wizard > .steps > ul > li.current .step {
			border-color: #2962FF;
			background-color: #2962FF;
			color: #fff;
		}
		
		/* select2 */
		.select2,
		.select2-container--default .select2-search--inline .select2-search__field,
		.select2-container--default .select2-selection--multiple .select2-selection__rendered {
			width: 100% !important;
		}

		.select2-container--default .select2-selection--multiple,
		.select2-container--default.select2-container--focus .select2-selection--multiple {
			border: 1px solid #e9ecef;
		}

		.select2-container--default .select2-selection--multiple .select2-selection__choice {
			background-color: #2cabe3;
    		border-color: #2cabe3;
		}

		.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
			color: #545454;
			margin-right: 5px;
		}

		/* hide selected items */
		/* .select2-results__option[aria-selected=true] {
			display: none;
		} */

		.niveau-card {
			box-shadow: 0px 0px 14px 0px #cfcfcf;
    		border: 1px solid lightgrey;
			margin: 1rem 0 2rem;
			padding: 1.57rem 1.57rem;
			word-wrap: break-word;
		}

		.accordion-button:not(.collapsed) {
			color: inherit;
			background-color:#edf1f5;
		}

		table tr.selected {
			background-color: #f5faff;
		}

		.wizard > .content > .body ul.pagination { /* for dataTable pagination */
			list-style: none !important;
		}
	</style>
@endsection

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

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

	{{-- top stats --}}
	<div class="top-stats row no-gutters">
		<div class="card p-2 p-lg-3 col-lg-3 col-md-6 col-sm-12">
			<div class="p-lg-3 p-2">
				<div class="d-flex align-items-center">
					<button class="btn btn-circle btn-danger text-white btn-lg" href="javascript:void(0)">
					<i class="ti-clipboard"></i>
				</button>
					<div class="ms-4" style="width: 38%;">
						<h4 class="fw-normal">Nombre de Cours </h4>
						<div class="progress">
							<div class="progress-bar bg-danger" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="40"></div>
						</div>
					</div>
					<div class="ms-auto">
						<h2 class="display-7 mb-0">{{$stats["ec"]}}</h2>
					</div>
				</div>
			</div>
		</div>
		<div class="card p-2 p-lg-3 col-lg-3 col-md-6 col-sm-12">
			<div class="p-lg-3 p-2">
				<div class="d-flex align-items-center">
					<button class="btn btn-circle btn-cyan text-white btn-lg" href="javascript:void(0)">
					<i class="ti-wallet"></i>
				</button>
					<div class="ms-4" style="width: 38%;">
						<h4 class="fw-normal">Nombre de filière</h4>
						<div class="progress">
							<div class="progress-bar bg-cyan" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="40"></div>
						</div>
					</div>
					<div class="ms-auto">
						<h2 class="display-7 mb-0">{{$stats["filiere"]}}</h2>
					</div>
				</div>
			</div>
		</div>
		<div class="card p-2 p-lg-3 col-lg-3 col-md-6 col-sm-12">
			<div class="p-lg-3 p-2">
				<div class="d-flex align-items-center">
					<button class="btn btn-circle btn-success text-white btn-lg" href="javascript:void(0)">
						<i class="ti-pencil-alt"></i>
					</button>
					<div class="ms-4" style="width: 38%;">
						<h4 class="fw-normal">Total des épreuves</h4>
						<div class="progress">
							<div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="40"></div>
						</div>
					</div>
					<div class="ms-auto">
						<h2 class="display-7 mb-0">{{$stats["epreuve"]}}</h2>
					</div>
				</div>
			</div>
		</div>
		<div class="card p-2 p-lg-3 col-lg-3 col-md-6 col-sm-12">
			<div class="p-lg-3 p-2">
				<div class="d-flex align-items-center">
					<button class="btn btn-circle btn-warning text-white btn-lg" href="javascript:void(0)">
					<i class="ti-layout"></i>
				</button>
					<div class="ms-4" style="width: 38%;">
						<h4 class="fw-normal">Total des questions</h4>
						<div class="progress">
							<div class="progress-bar bg-warning" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="40"></div>
						</div>
					</div>
					<div class="ms-auto">
						<h2 class="display-7 mb-0">{{$stats["question"]}}</h2>
					</div>
				</div>
			</div>
		</div>
	</div>

	{{--  --}}
	<div class="card config-card">
		<div class="title-part-padding text-center">
			<h4 class="card-title mb-2 mt-4">COMPOSER UNE ÉPREUVE</h4>
			<h6 class="card-subtitle mb-0">Éffectuer les configurations nécessaires pour la composition</h6>
		</div>
		<div class="card-body wizard-content">
			<form action="#" class="config-form validation-wizard wizard-circle" method="POST">
				<!-- Step 1 -->
				<h6>Configuration globale</h6>
				<section>
					<div class="form-group mb-3">
						<label for="chaps">Chapitres</label>
						<select name="chaps" id="chaps" class="form-control select2"  multiple="multiple" required>
							@foreach ($chaps as $chap)
								<option value="{{$chap->idchapitre}}">{{$chap->chapitrenumero.". ".$chap->chapitreintitule}}</option>
							@endforeach
						</select>
					</div>
					<div class="form-group mb-3">
						<label for="nquestion">
							Nombre de question <span class="form-text text-muted" style="display: none;">(&leq; 10)</span>
						</label>
						<input class="form-control" type="number" name="nquestion" id="nquestion" min="1" max="1" placeholder="Nombre de questions pour l'epreuve" readonly required>
					</div>
					<div class="form-group mb-3">
						<label for="temps">Temps (en minutes)</label>
						<input type="number" name="temps" id="temps" class="form-control" placeholder="Définir le temps en minutes" required/>
					</div>
					<div class="form-group mb-3">
						<label for="description">Description</label>
						<textarea rows="4" name="description" id="description" class="form-control" placeholder="Description de l'examen." required>{{$exam->description}}</textarea>
					</div>
				</section>

				<!-- Step 2 -->
				<h6>Configuration des questions</h6>
				<section>
					<div id="questions-stats" class="alert customize-alert alert-light-secondary text-center p-3 mb-4" role="alert" style="background-color: #f3f3f3;">
						<!-- filled with JS -->
					</div>
					<div class="card card-body niveau-card">
						<div class="form-group">
							<h5 class="card-title pb-1 border-bottom mb-3">Niveau de l'epreuve</h5>
							<div class="row text-center">
								<div class="col-md-3">
									<div class="form-check form-check-inline">
										<input type="radio" name="niveau" value="Facile" id="nfacile-radio" class="form-check-input">
										<label class="form-check-label" for="nfacile-radio">Facile</label>
									</div>
								</div>
								<div class="col-md-3">
									<div class="form-check form-check-inline">
										<input type="radio" name="niveau" value="Moyen" id="nmoyen-radio" class="form-check-input">
										<label class="form-check-label" for="nmoyen-radio">Moyen</label>
									</div>
								</div>
								<div class="col-md-3">
									<div class="form-check form-check-inline">
										<input type="radio" name="niveau" value="Difficile" id="ndifficile-radio" class="form-check-input">
										<label class="form-check-label" for="ndifficile-radio">Difficile</label>
									</div>
								</div>
								<div class="col-md-3">
									<div class="form-check form-check-inline">
										<input type="radio" name="niveau" value="Custom" id="ncustom-radio" class="form-check-input">
										<label class="form-check-label" for="ncustom-radio">Personnaliser</label>
									</div>
								</div>
							</div>
						</div>
						<fieldset id="customize-niveau" class="mt-4" style="display: none">
							<legend class="card-title pb-1 border-bottom mb-3">Personnalisation</legend>
							<div class="row mb-3">
								<label class="form-control-label col-12" for="custom-nb-question">
									Nombre de question par niveau
								</label>
								<div class="form-group col-md-4">
									<label class="form-control-label text-muted fs-2" for="nbFacile">
										Niveau facile
									</label>
									<input type="number" class="form-control" name="nbFacile" id="nbFacile" value="0" min="0" max="0">
								</div>
								<div class="form-group col-md-4">
									<label class="form-control-label text-muted fs-2" for="nbMoyen">
										Niveau moyen
									</label>
									<input type="number" class="form-control" name="nbMoyen" id="nbMoyen" value="0" min="0" max="0">
								</div>
								<div class="form-group col-md-4">
									<label class="form-control-label text-muted fs-2" for="nbDifficile">
										Niveau difficile
									</label>
									<input type="number" class="form-control" name="nbDifficile" id="nbDifficile" value="0" min="0" max="0">
								</div>
							</div>
							<div class="form-group mb-3">
								<label class="form-control-label" for="echelle">
									Echelle de notation de l'epreuve
								</label>
								<input type="number" class="form-control" name="echelle" id="echelle" value="" min="0"  placeholder="Echelle">
							</div>
							<div class="row mb-3">
								<label class="form-control-label col-12" for="custom-poids-question">
									Poids par niveau
								</label>
								<div class="form-group col-md-4">
									<label class="form-control-label text-muted fs-2" for="pFacile">
										Niveau facile
									</label>
									<input type="number" class="form-control" name="pFacile" id="pFacile" value="0" min="0" max="0">
								</div>
								<div class="form-group col-md-4">
									<label class="form-control-label text-muted fs-2" for="pMoyen">
										Niveau moyen
									</label>
									<input type="number" class="form-control" name="pMoyen" id="pMoyen" value="0" min="0" max="0">
								</div>
								<div class="form-group col-md-4">
									<label class="form-control-label text-muted fs-2" for="pDifficile">
										Niveau difficile
									</label>
									<input type="number" class="form-control" name="pDifficile" id="pDifficile" value="0" min="0" max="0">
								</div>
							</div>
						</fieldset>
					</div>
				</section>

				<!-- Step 3 -->
				<h6>Exclusion de questions</h6>
				<section>
					<h4 class="card-title mb-0 text-uppercase">Exclusion de questions</h4>
					<div class="text-muted mb-4">Faites vos exclusions</div>
					<div class="accordion mb-4" id="exclude-accordion">
						<div class="accordion-item">
							<h2 class="accordion-header" id="headingOne">
								<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
									Niveau <span class="badge rounded-pill bg-primary ms-1">FACILE</span>
								</button>
							</h2>
							<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#exclude-accordion">
								<div class="accordion-body">
								</div>
							</div>
						</div>
						<div class="accordion-item">
							<h2 class="accordion-header" id="headingTwo">
								<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
									Niveau <span class="badge rounded-pill bg-warning text-dark ms-1">MOYEN</span>
								</button>
							</h2>
							<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#exclude-accordion">
								<div class="accordion-body">
								</div>
							</div>
						</div>
						<div class="accordion-item">
							<h2 class="accordion-header" id="headingThree">
								<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
									Niveau <span class="badge rounded-pill bg-danger ms-1">DIFFICILE</span>
								</button>
							</h2>
							<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#exclude-accordion">
								<div class="accordion-body">
								</div>
							</div>
						</div>
					</div>
				</section>

				<!-- Step 4 -->
				<h6>Particularités de l'épreuve</h6>
				<section>
					<div class="card card-body niveau-card">
						<h4 class="card-title mb-4 text-uppercase text-center">Spécificités sur l'épreuve</h4>
						<div class="form-group mb-4">
							<h5 class="fw-normal pb-1 border-bottom mb-3">Voulez-vous autoriser la composition sur mobile ?</h5>
							<div class="row">
								<div class="col-md-2"></div>
								<div class="col-md-5">
									<div class="form-check form-check-inline">
										<input type="radio" name="compomobile" value="O" id="acceptermobile" class="form-check-input">
										<label class="form-check-label" for="acceptermobile">Autoriser</label>
									</div>
								</div>
								<div class="col-md-5">
									<div class="form-check form-check-inline">
										<input type="radio" name="compomobile" value="N" id="interdirmobile" class="form-check-input" checked>
										<label class="form-check-label" for="interdirmobile">Interdire</label>
									</div>
								</div>
							</div>
						</div>
						<div class="form-group mb-4">
							<h5 class="fw-normal pb-1 border-bottom mb-3">Voulez-vous de retour en arrière sur une question pendant la composition ?</h5>
							<div class="row">
								<div class="col-md-2"></div>
								<div class="col-md-5">
									<div class="form-check form-check-inline">
										<input type="radio" name="retour" value="O" id="permetretour" class="form-check-input">
										<label class="form-check-label" for="permetretour">Autoriser</label>
									</div>
								</div>
								<div class="col-md-5">
									<div class="form-check form-check-inline">
										<input type="radio" name="retour" value="N" id="interditretour" class="form-check-input" checked>
										<label class="form-check-label" for="interditretour">Interdire</label>
									</div>
								</div>
							</div>
						</div>
						<div class="form-group mb-4">
							<h5 class="fw-normal pb-1 border-bottom mb-3">Voulez-vous que les étudiants visualisent le corrigé-type après la composition ?</h5>
							<div class="row">
								<div class="col-md-2"></div>
								<div class="col-md-5">
									<div class="form-check form-check-inline">
										<input type="radio" name="visualiser" value="O" id="permetvisualiser" class="form-check-input">
										<label class="form-check-label" for="permetvisualiser">Autoriser</label>
									</div>
								</div>
								<div class="col-md-5">
									<div class="form-check form-check-inline">
										<input type="radio" name="visualiser" value="N" id="interditvisualiser" class="form-check-input" checked>
										<label class="form-check-label" for="interditvisualiser">Interdire</label>
									</div>
								</div>
							</div>
						</div>
						<div class="form-group mb-4">
							<h5 class="fw-normal pb-1 border-bottom mb-3">Voulez-vous autoriser la modification des notes des étudiants pour cet examen ?</h5>
							<div class="row">
								<div class="col-md-2"></div>
								<div class="col-md-5">
									<div class="form-check form-check-inline">
										<input type="radio" name="modifierNote" value="O" id="permetmodifier" class="form-check-input">
										<label class="form-check-label" for="permetmodifier">Autoriser</label>
									</div>
								</div>
								<div class="col-md-5">
									<div class="form-check form-check-inline">
										<input type="radio" name="modifierNote" value="N" id="interditmodifier" class="form-check-input" checked>
										<label class="form-check-label" for="interditmodifier">Interdire</label>
									</div>
								</div>
							</div>
						</div>
						<div class="form-group mb-4">
							<h5 class="fw-normal pb-1 border-bottom mb-3">Definissez le format de l'épreuve</h5>
							<div class="row">
								<div class="col-md-2"></div>
								<div class="col-md-5">
									<div class="form-check form-check-inline">
										<input type="radio" name="formatepreuve" value="1" id="format1" class="form-check-input">
										<label class="form-check-label" for="format1">Complet</label>
									</div>
								</div>
								<div class="col-md-5">
									<div class="form-check form-check-inline">
										<input type="radio" name="formatepreuve" value="0" id="format2" class="form-check-input" checked>
										<label class="form-check-label" for="format2">Partiel</label>
									</div>
								</div>
							</div>
						</div>
						<div class="form-group mb-4">
							<h5 class="fw-normal pb-1 border-bottom mb-3">Pénalité sur l'épreuve</h5>
							<div class="row">
								<div class="col-md-2"></div>
								<div class="col-md-5">
									<div class="form-check form-check-inline">
										<input type="radio" name="penalite" value="oui" id="radiop1" class="form-check-input">
										<label class="form-check-label" for="radiop1">Oui</label>
									</div>
								</div>
								<div class="col-md-5">
									<div class="form-check form-check-inline">
										<input type="radio" name="penalite" value="non" id="radiop2" class="form-check-input" checked>
										<label class="form-check-label" for="radiop2">Non</label>
									</div>
								</div>
								<div class="col-md-8 mx-auto mt-2" id="point-penalite" style="display: none;">
									<label class="form-control-label text-muted fs-2" for="pointPenalite">
										Point de pénalité
									</label>
									<input type="number" class="form-control" name="pointPenalite" id="pointPenalite" value="0" min="0" placeholder="Points à retrancher en cas de mauvaise réponse...">
								</div>
							</div>
						</div>
						<div class="form-group mb-4">
							<h5 class="fw-normal pb-1 border-bottom mb-3">Definissez l'option de composition de l'examen</h5>
							<div class="row">
								<div class="col-md-2"></div>
								<div class="col-md-5">
									<div class="form-check form-check-inline">
										<input type="radio" name="option" value="L" id="libre" class="form-check-input">
										<label class="form-check-label" for="libre" title="Les étudiants composent quand ils veulent dans la période définie pour l'examen et l'épreuve est unique pour chaque étudiant">
											Libre
										</label>
									</div>
								</div>
								<div class="col-md-5">
									<div class="form-check form-check-inline">
										<input type="radio" name="option" value="C" id="controle" class="form-check-input" checked>
										<label class="form-check-label" for="controle" title="La composition est faite par vague et une même épreuve est proposée par vague">
											Contrôlée
										</label>
									</div>
								</div>
							</div>
							<div class="border bg-light mt-3 mx-md-4 p-2" id="limite-compo-libre" style="display: none;">
								<h5 class="fw-normal mb-1">Definissez la limite de composition de l'examen</h5>
								<div class="row">
									<div class="form-group mb-3 col-md-6 col-sm-12">
										<label for="date_limite">Date limite de composition</label>
										<div class="input-group">
											<input 
												type="text"
												name="date_limite"
												id="date_limite" 
												class="form-control datepicker" 
												placeholder="dd/mm/yyyy"
												data-min="{{date('d/m/Y')}}"
												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 for="heure_limite">Heure limite de composition</label>
										<div class="input-group">
											<input 
												type="text"
												name="heure_limite"
												id="heure_limite" 
												class="form-control clockpicker" 
												value=""
												placeholder="hh:mm"
											>
											<span class="input-group-text"><i class="far fa-clock"></i></span>
										</div>	
									</div>
								</div>
							</div>
						</div>
					</div>
				</section>
			</form>
		</div>
	</div>

@endsection

@section('script')
	<script src="{{asset('assets/libs/jquery-steps/build/jquery.steps.min.js')}}"></script>
	<script src="{{asset('assets/libs/jquery-validation/dist/jquery.validate.min.js')}}"></script>
    <script src="{{asset('assets/libs/select2/dist/js/select2.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 src="{{asset('assets/extra-libs/datatables.net/js/jquery.dataTables.min.js')}}"></script>
	<!-- EnlighterJS -->
	<script type="text/javascript" src="{{asset('/assets/libs/enlighterjs/dist/enlighterjs.min.js')}}"></script>

	{{-- include page's specific scripts here --}}
	<script type="text/javascript" src="{{ asset('project/libs/MathJax/MathJax.js')}}?config=TeX-AMS_HTML,{{asset('project/libs/MathJax/config/local/local.js')}}"></script>
		
	<script>
		const form = $(".config-form");
		let env = {
			chaps: [],

			questions: {
				F: [],
				M: [],
				D: [],
			},

			dbMaxF: 0,
			dbMaxM: 0,
			dbMaxD: 0,
			maxQuestion: 0,

			maxF: 0,
			maxM: 0,
			maxD: 0,

			nbFacile: 0,
			nbMoyen: 0,
			nbDifficile: 0,
			nbQuestion: 0,

			echelle: 20,
			pFacile: 0,
			pMoyen: 0,
			pDifficile: 0,

			compomobile: "N",
			retour: "N",
			visualiser: "N",
			modifierNote: "N",
			formatepreuve: "0",
			penalite: "non",
			pointPenalite: 0,
			option: "C",
			date_limite: "",
			heure_limite: "",

			refreshExclusionUI: true,
			dts: {}, // keep instance of datatables

			action: "STORE",
		};

		$(function() {
			form.show();

			// form step
			form.steps({
				headerTag: "h6",
				bodyTag: "section",
				transitionEffect: "fade",
				titleTemplate: '<span class="step">#index#</span> #title#',
				labels: {
					previous: "Précédent",
					next: "Suivant",
					finish: "Enregistrer",
				},
				onInit: function(event, currentIndex) {
					// hack to set steps' icons
					const icons = ["fa fa-cogs", "fa fa-question",  "fas fa-ban", "fa fa-plus"];
					$(".config-form span.step").each((i, span) =>  {
						span.innerHTML = `<i class="${icons[i]}"></i>`;
					});

					// init lib inputs
					$("#chaps").select2({
						placeholder: "Chapitres d'evaluation",
						closeOnSelect: false,
					});

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

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

					// set up events
					setupEventListeners();
				},
				onStepChanging: function(event, currentIndex, newIndex) {
					if (currentIndex > newIndex) { // allow to move backward
						return true;
					}
										
					// remove error styles
					form.find(".body:eq(" + newIndex + ") label.error").remove();
					form.find(".body:eq(" + newIndex + ") .error").removeClass("error");

					// validate inputs
					form.validate().settings.ignore = ":disabled,:hidden";
					if (!form.valid()) return false; // prevent step change

					// specific step validation or process
					if (currentIndex === 1) { // step 2
						if((env.nbFacile + env.nbMoyen + env.nbDifficile) != env.nbQuestion) {
							Swal.fire({
								icon: 'warning',
								text: "Non concordance entre le nombre total de question pour l'épreuve et la somme des questions par niveau !",
								confirmButtonText: "Ok",
								confirmButtonColor: "#ec6c62",
							});
							
							return false; // prevent foward move
						}

						if ((env.pFacile + env.pMoyen + env.pDifficile) != env.echelle) {
							Swal.fire({
								icon: 'warning',
								text: "Non concordance entre l'échelle de notation et la somme des poids !",
								confirmButtonText: "Ok",
								confirmButtonColor: "#ec6c62",
							});

							return false; // prevent foward move
						} 

						if(env.refreshExclusionUI) {
							// UI for questions exclusion
							setupUIForQuestionsExclusion();
							env.refreshExclusionUI = false;
						}

					} else {

					}

					return true;
				},
				onFinishing: function(event, currentIndex) {
					return form.validate().settings.ignore = ":disabled", form.valid();
				},
				onFinished: function(event, currentIndex) {
					event.preventDefault();
					submitForm();
				}
			});

			// form validation
			$.validator.addMethod( "integer", function( value, element ) {
				return this.optional( element ) || /^\d+$/.test( value );
			}, "Non-decimal number please.");

			const numberInputValidationMsg = {
				required: "Ce champs est requis",
				min: "Doit être supérieur ou égal à {0}",
				max: "Doit être inférieur ou égal à {0}",
				integer: "Doit être un entier positif",
				number: "Doit être un nombre",
			};

			form.validate({
				ignore: "input[type=hidden]",
				errorClass: "text-danger fs-2",
				successClass: "text-success",
				highlight: function(element, errorClass) {
					$(element).removeClass(errorClass)
				},
				unhighlight: function(element, errorClass) {
					$(element).removeClass(errorClass)
				},
				errorPlacement: function(error, element) {
					if(["date_limite", "heure_limite"].indexOf(element.attr("id")) !== -1) {
						error.insertAfter(element.parent());
					} else {
						error.insertAfter(element);
					}
				},
				rules: {
					nquestion: { integer: true },
					nbFacile: { integer: true },
					nbMoyen: { integer: true },
					nbDifficile: { integer: true },
					echelle: { integer: true },
					pFacile: { integer: true },
					pMoyen: { integer: true },
					pDifficile: { integer: true },
				},
				messages: {
					// step 1
					chaps: "Veuillez choisir au moins un chapitre d'évaluation",
					nquestion: numberInputValidationMsg,
					temps: "Ce champs est requis et doit être positif",
					description: "Ce champs est requis",
					
					// step 2
					nbFacile: numberInputValidationMsg,
					nbMoyen: numberInputValidationMsg,
					nbDifficile: numberInputValidationMsg,
					echelle: numberInputValidationMsg,
					pFacile: numberInputValidationMsg,
					pMoyen: numberInputValidationMsg,
					pDifficile: numberInputValidationMsg,

					// step 4
					pointPenalite: numberInputValidationMsg,
					date_limite: "La date limite est requise",
					heure_limite: "L'heure limite est requise",
				}
			});

			$('pre, code').enlight({
                theme: 'bootstrap4'
            });
		}());

		function setupEventListeners() {
			// for step 1
			$("#chaps").on("select2:close", function(e) { 
				const chaps = $(this).val() ?? [];
				if ((chaps.length == 0 ) || (chaps.join("-") == env.chaps.join("-"))) {
					return ;
				}
				env.chaps = chaps;
				getChapsQuestions();
			});

			$("#nquestion").on("change", function(e) { 
				env.nbQuestion = parseInt(this.value);

				// control niveau choices
				// niveau
				$("#nfacile-radio").attr("disabled", env.dbMaxF < env.nbQuestion);
				$("#nmoyen-radio").attr("disabled", env.dbMaxM < env.nbQuestion);
				$("#ndifficile-radio").attr("disabled", env.dbMaxD < env.nbQuestion);

				// constraints for customization
				env.maxF = Math.min(env.dbMaxF, env.nbQuestion),
				env.maxM = Math.min(env.dbMaxM, env.nbQuestion),
				env.maxD = Math.min(env.dbMaxD, env.nbQuestion);

				$("#nbFacile").attr({"min": 0, "max": env.maxF });
				$("#nbMoyen").attr({"min": 0, "max": env.maxM });
				$("#nbDifficile").attr({"min": 0, "max": env.maxD });

				// select the first chosable niveau
				$("[name='niveau']:not([disabled]").first().prop("checked", true).trigger("change");
			});

			// for step 2 
			$("[name='niveau']").on("change", function(e) {
				const v = this.value;

				if(v == "Custom") {
					prefillCustomizationFields();

					$("#customize-niveau").slideDown();
				} else {
					$("#customize-niveau").slideUp();

					for (const niveau of ["Facile", "Moyen", "Difficile"]) {
						$("#nb" + niveau).val(
							niveau == v ? env.nbQuestion : 0
						).trigger("change");

						$("#p" + niveau).val(
							niveau == v ? env.echelle : 0
						).trigger("change");
					}
				}
			});

			$("#nbFacile, #nbMoyen, #nbDifficile").on("change", function(e) {
				const v = parseInt(this.value);
				env[this.id] = v;

				// constraint for poids input
				const pInput = $("#" + this.id.replace("nb", "p"));
				if(v == 0) {
					pInput.attr({"min": 0, "max": 0, "readonly": true});
					pInput.val(0).trigger("change");
				} else {
					pInput.attr({ "min": 1, "max": env.echelle, "readonly": false});
				}
				
				env.refreshExclusionUI = true;
			});
			
			$("#echelle").on("change", function(e) {
				const v = parseInt(this.value);
				env.echelle = v;

				$("#pFacile").attr("max", v);
				$("#pMoyen").attr("max", v);
				$("#pDifficile").attr("max", v);
			});

			$("#pFacile, #pMoyen, #pDifficile").on("change", function(e) {
				env[this.id] = parseInt(this.value);
			});

			// for step 3
			// RAS

			// for step 4
			$('[name="compomobile"], [name="retour"], [name="visualiser"], [name="modifierNote"], [name="formatepreuve"]').on("change", function(e) {
				env[this.name] = this.value;
			});

			$('[name="penalite"]').on("change", function(e) {
				env[this.name] = this.value;

				if(this.value == "oui") {
					$("#point-penalite").slideDown();
					$("#pointPenalite").attr("required", true);
				} else {
					$("#point-penalite").slideUp();
					$("#pointPenalite").attr("required", false);
					$("#pointPenalite").val(0).trigger("change");
				}
			});

			$("#pointPenalite").on("change", function(e) { env.pointPenalite = Number(this.value);  });

			$('[name="option"]').on("change", function(e) {
				env[this.name] = this.value;

				if(this.value == "L") {
					$("#limite-compo-libre").slideDown();
					$("#heure_limite").attr("required", true);
					$("#date_limite").attr("required", true);
				} else {
					$("#limite-compo-libre").slideUp();
					$("#heure_limite").attr("required", false);
					$("#date_limite").attr("required", false);

					$("#heure_limite").val("").trigger("change");
					$("#date_limite").val("").trigger("change");
				}
			});

			$("#date_limite, #heure_limite").on("change", function(e) {
				env[this.id] = this.value;
			});
		}

		function getChapsQuestions() {
			$("#nquestion").attr("readonly", true);

			$.ajax({
				type: "POST",
				url: "{{route('teacher.chaps_questions')}}",
				data: { 
					"idecu" : @json($exam->idecu, JSON_PRETTY_PRINT),
					"chaps" : env.chaps 
				},
				success: function(response) {
					console.log(response);

					// save in env
					env.questions = response.data;

					env.dbMaxF = response.data.F.length;
					env.dbMaxM = response.data.M.length;
					env.dbMaxD = response.data.D.length;
					env.maxQuestion = env.dbMaxF + env.dbMaxM + env.dbMaxD;

					if (env.maxQuestion == 0) {
						Swal.fire({
							icon: 'warning',
							text: "Auncune question n'est disponible pour ces chapitres.",
						});

						return false;
					}

					// constraint for number of question for exam
					$("#nquestion").attr({
						max: env.maxQuestion,
						readonly: false,
					});
					$('label[for="nquestion"] > span').html(`(&leq; ${env.maxQuestion})`);
					$('label[for="nquestion"] > span').show();

					// Info UI for second step
					$("#questions-stats").html(`
						<div class="mb-2"><i class="fa fa-info-circle text-info"></i> <strong>${env.maxQuestion} questions</strong> disponibles dont... </div>
						<div class="row">
							<div class="col-md-4"><strong>${env.dbMaxF}</strong> facile(s)</div>
							<div class="col-md-4"><strong>${env.dbMaxM}</strong> moyen(s)</div>
							<div class="col-md-4"><strong>${env.dbMaxD}</strong> difficile(s)</div>
						</div>
					`);
				},
				error: function(err){
					console.log(err);

					if (err.status == 400) {
						Swal.fire({
							icon: 'warning',
							text: "Veuillez sélectionner des chapitres svp.",
						});
					} else {
						Swal.fire({
							icon: 'error',
							title: 'Oops...',
							text: "Petit souci lors de la récupération des questions des chapitres. Voulez-vous réessayer ?",
							confirmButtonText: "Oui",
							confirmButtonColor: "#ec6c62",
							showCancelButton: true,
							cancelButtonText: 'Non',
							cancelButtonColor: '#d33',
						}).then((result) => { 
							if (result.isConfirmed) {
								getChapsQuestions();
							}
						});
					}
				}
			});
		}

		function prefillCustomizationFields() {
			const best = suggestValuesForCustomization();

			$("#nbFacile").val(best.f);
			$("#nbMoyen").val(best.m);
			$("#nbDifficile").val(best.d);

			// echelle
			env.echelle = 20;
			$("#echelle").val(env.echelle);

			// poids
			const pFacile = Math.round((best.f * env.echelle)/env.nbQuestion);
			const pMoyen = Math.round((best.m * env.echelle)/env.nbQuestion);

			$("#pFacile").attr({"min": 0, "max": env.echelle });
			$("#pFacile").val(pFacile);

			$("#pMoyen").attr({"min": 0, "max": env.echelle});
			$("#pMoyen").val(pMoyen);

			$("#pDifficile").attr({"min": 0, "max": env.echelle});
			$("#pDifficile").val(env.echelle - (pFacile + pMoyen));

			// trigger change events
			$("#nbFacile, #nbMoyen, #nbDifficile").trigger("change");
			$("#pFacile, #pMoyen, #pDifficile").trigger("change");
		}

		function suggestValuesForCustomization() {
			const n = env.nbQuestion;

			// idéalement, prendre 40% facile, 40% moyen et 20% difficile
			const idealF = Math.round(n * 0.4);
			const idealM = idealF;
			const idealD = n - (idealM + idealF);

			let s = []; // possible values

			let best = { f: Infinity, m: Infinity, d: Infinity };
			let deltaBF = Infinity, deltaBM = Infinity, deltaBD = Infinity;

			for (let f = 0; f <= env.maxF; f++) {
				for (let m = 0; m <= Math.min(env.maxM, n - f); m++) {
					let d = n - (f + m);

					if ((d >= 0) && (d <= env.maxD)) {
						let p = ((f * 100)/n).toFixed(2) + " - "
							+ ((m * 100)/n).toFixed(2) + " - "
							+ ((d * 100)/n).toFixed(2)
						;

						s.push({f, m, d, p});

						if (
							(Math.abs(idealF - f) <= deltaBF) &&
							(Math.abs(idealM - m) <= deltaBM) &&
							(Math.abs(idealD - d) <= deltaBD)
						) {
							best = {f, m, d, p};

							deltaBF = Math.abs(idealF - best.f);
							deltaBM = Math.abs(idealM - best.m);
							deltaBD = Math.abs(idealD - best.d);
						}
					}
				}
			}

			console.log(best);
			console.log(s);

			return best;
		}

		function setupUIForQuestionsExclusion() {
			const configs = [
				{
					pos: 0,
					diff: "F",
					maxExcluable: env.dbMaxF - env.nbFacile,
				}, {
					pos: 1,
					diff: "M",
					maxExcluable: env.dbMaxM - env.nbMoyen,
				}, {
					pos: 2,
					diff: "D",
					maxExcluable: env.dbMaxD - env.nbDifficile,
				},
			];

			for (const x of configs) {
				const tableId = `${x.diff}-exclude-table`;

				// build html
				let html = "";
				for (const q of env.questions[x.diff]) {
					html += `
						<tr>
							<td><input type="checkbox" class="form-check" value="${q.idquestion}"></td>
							<td>${q.intitulequestion}</td>
						</tr>
					`;
				}

				html = `
					<div class="text-danger mb-2">
						<i class="fa fa-info-circle"></i> Exclure au maximum 
						<span class="badge rounded-pill fw-bold bg-light-danger text-danger">${ x.maxExcluable }</span> questions 
					</div>
					<table class="table table-bordered" id="${tableId}" data-max-checkable="${ x.maxExcluable  }">
						<thead>
							<th width="3%"></th>
							<th width="90%">Intitulé de la question</th>
						</thead>
						<tbody>
							${html}
						</tbody>
					</table>
				`;

				// put in DOM
				$(`#exclude-accordion .accordion-body:eq(${x.pos})`).html(html);

				// dataTable init
				env.dts[tableId] = $("#" + tableId).DataTable({
					"autoWidth": false,
					"language": dtCustomLanguage({
						name: "question",
						plural: "questions",
						gender: "F",
					}),
					"columnDefs": [{
						"orderable": false,
						"targets": 0
					}],
					"order": [[1,"asc"]],
					createdRow: function(row, data, dataIndex) {
						$(row).find('td pre').enlight({
							theme: 'bootstrap4'
						});
					}
				});

			    MathJax.Hub.Typeset();

				// checkboxes event
				env.dts[tableId].$(".form-check").on("click", function(e) {
					const table = $(this).parents("table");

					if (this.checked) {
						if(parseInt(table.attr("data-max-checkable")) >= env.dts[table.attr("id")].$(".form-check:checked").length) {
							$(this).parents("tr").addClass('selected');
						} else {
							showToastr("danger", `Vous ne pouvez pas exclure plus de <b>${table.attr("data-max-checkable")}</b> questions pour ce niveau !`);
							
							this.checked = false;
							return false;
						}
					} else {
						$(this).parents("tr").removeClass('selected');
					}
				});
			}
		}

		function submitForm() {
			let toExclude = {"F" : [], "M": [], "D": []};
			let toConsider = {"F" : [], "M": [], "D": []};

			for (const diff of ["F", "M", "D"]) {
				const tableId = `${diff}-exclude-table`;

				env.dts[tableId].$(".form-check").each((i, cb) => {
					if (cb.checked) {
						toExclude[diff].push(cb.value);
					} else {
						toConsider[diff].push(cb.value);
					}
				});
			}

			$.ajax({
				type: "POST",
				url: "{{route('teacher.exam_epreuve_auto.store_or_update', $exam->idexamen)}}",
				blockUI: true,
				data: { 
					"chaps" : env.chaps, 
					"nbQuestion" : env.nbQuestion,
					"description": $('#description').val(),
					"temps": $('#temps').val(),
					
					"nbFacile" : env.nbFacile, 
					"nbMoyen" : env.nbMoyen,
					"nbDifficile" : env.nbDifficile, 
					"echelle" : env.echelle, 
					"pFacile" : env.pFacile, 
					"pMoyen" : env.pMoyen, 
					"pDifficile" : env.pDifficile,

					"toConsider" : toConsider,
					"toExclude" : toExclude,
					
					"compomobile": env.compomobile,
					"retour": env.retour,
					"visualiser": env.visualiser,
					"modifierNote": env.modifierNote,
					"formatepreuve": env.formatepreuve,
					"penalite": env.penalite,
					"pointPenalite": env.pointPenalite,
					"option": env.option,
					"date_limite": env.date_limite,
					"heure_limite": env.heure_limite,

					"action": env.action,
				},
				success: function(response) {
					console.log(response);

					Swal.fire({
						icon: 'success',
						title: 'Succès',
						text: "Épreuve crée avec succès !",
					})
					.then(() => location.href = "{{route('teacher.exam_index')}}" );
				},
				error: function(err){
					console.log(err);

					if (err.status == 400) {
						Swal.fire({
							icon: 'warning',
							text: "Les champs ne sont pas bien remplis.",
						});
					} else if(err.status == 409) {
						Swal.fire({
							icon: 'warning',
							title: 'Demande de confirmation',
							text: "Une épreuve existe déjà pour cet examen. Voulez-vous la mettre à jour ?",
							confirmButtonText: "Oui",
							confirmButtonColor: "#ec6c62",
							showCancelButton: true,
							cancelButtonText: 'Non',
						}).then((result) => { 
							if (result.isConfirmed) {
								env.action = "UPDATE";
								submitForm();
							}
						});
					} else {
						Swal.fire({
							icon: 'error',
							title: 'Oops...',
							text: "Petit souci lors de l'enregistrement de l'épreuve. Voulez-vous réessayer ?",
							confirmButtonText: "Oui",
							confirmButtonColor: "#ec6c62",
							showCancelButton: true,
							cancelButtonText: 'Non',
						}).then((result) => { 
							if (result.isConfirmed) {
								submitForm();
							}
						});
					}
				}
			});
		}

		function openEditor(question) {
			win = window.open(
				'showQuestion.php?question='+ question
				,'GS_NG'
				,'height=580,width=1024,top=100,left=500,status=yes,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=no,modal=no,dependable=yes'
			);
			win.focus();
		}
	</script>
@endsection