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

@section('title', "Copie des étudiants")

@section('css')
	<style>
		.form-card {
			padding: 25px;
			width: 75%;
			margin: 0 auto;
		}

		.form-card .card-body {
			display: flex;
			flex-direction: column;
			gap: 25px;
		}
	</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>

	{{-- form --}}
	<div class="card form-card">
		<h3 class="card-title">Formulaire de visualisation de copies</h3>
		<form 
			id="form" 
			class="form-horizontal" 
			method="GET" 
			action="{{route('teacher.ec_epreuve_copies', ["ecId" => ":cours", "epreuveId" => ":compo"])}}" 
			target = "_blank"
		>
			@csrf
			<div class="card-body">
				<div class="form-group row">
					<label class="col-md-3 control-label text-md-end" for="cours">Cours :</label>
					<div class="col-md-9">
						<select id="cours" name="cours" class="form-select" required>
							<option selected disabled value="">Selectionner un cours</option>
							@foreach ($cours as $i => $cour)
								<option value="{{$cour->idEC}}">{{"$cour->intituleEcu  ($cour->sigleFilieres | $cour->niveauformation $cour->annee)"}}</option>
							@endforeach
						</select>
					</div>
				</div>
				<div class="form-group row">
					<label class="col-md-3 control-label text-md-end" for="compo">
						Composition 
						<button id="exam-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>
					<div class="col-md-9">
						<select id="compo" name="composition" class="form-select" required disabled>
							<option value="" selected>Selectionner un cours d'abord</option>
						</select>
					</div>
				</div>
			</div>
			<div class="d-flex justify-content-center">
				<button type="submit" class="btn btn-info btn-lg">Visualiser <i class="feather-sm" data-feather="eye"></i></button>
			</div>
		</form>
	</div>
@endsection

@section('script')
	<script>
		$(function() {
			$("#cours").on('change', fetchExam);
			$("#exam-refresh-btn").on('click', fetchExam);

			$("#form").on("submit", function(e) {
				e.preventDefault();

				const url = $(this).attr("action")
					.replace(":cours", $("#cours").val())
					.replace(":compo", $("#compo").val())
				;

				// location.href = url;

				// open link in new tab
				const a = document.createElement('a');
				a.target = "_blank";
				a.href = url;
				a.click();
			});
		}());

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

			let html = `<option value="" selected>Selectionner un cours d'abord</option>`;

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

				return false;
			}

			html = `<option value=''>Selectionner la composition</option>`;

			$.ajax({
				url: "{{route('teacher.ec_exams', ':cours')}}".replace(":cours", $("#cours").val()),
				type: 'GET',
				data: {},
				success: function (response) {
					console.log(response);
					response.data.forEach(function (exam, i) {
						html += `<option value="${exam.idepreuve}">Devoir Surveillé n° ${i+1}, Fait le ${exam.formated_date}</option>`;
					});

					$("#compo").html(html);
					$("#compo").attr("disabled", false);
					$("#exam-refresh-btn").fadeOut();
				},
				error: function (err) {
					console.error(err);
					showToastr("danger",'Erreur de chargement des compositions !');

					$("#compo").html(html);
					$("#exam-refresh-btn").fadeIn();
				}
			});
		}
	</script>
@endsection