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

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

@section('css')
	<link href="{{asset('assets/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css')}}" rel="stylesheet">
	<link href="{{asset('assets/libs/dropify/dist/css/dropify.min.css')}}" rel="stylesheet">
	<style>
		form p {
			text-align: center;
		}
	</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="row">
		<div class="col-lg-10 col-md-8 col-sm-12 d-flex align-items-stretch">
			<div class="card w-100">
				<!-- Nav tabs -->
				<ul class="nav nav-tabs manage-tabs" role="tablist">
					<li class="nav-item">
						<a class="nav-link active" data-bs-toggle="tab" href="#users" role="tab">
							<span class="hidden-sm-up">
								<h4><i data-feather="file-text" class="feather-sm"></i></h4>
							</span>
							<span class="d-none d-md-block">LISTE DES COURS</span>
						</a>
					</li>
				</ul>
				<!-- Tab panes -->
				<div class="tab-content">
					<div class="tab-pane active" id="users" role="tabpanel">
						<div class="row py-4 px-5 no-gutters mt-3">
							<div class="col-sm-12 col-md-6 d-flex justify-content-start">
								<h2 class="card-title mb-0">Selectionner le cours à gérer</h2>
							</div>
							<div class="col-sm-12 col-md-6 justify-content-end d-flex">
								<a href="#add-image-modal" data-bs-toggle="modal" data-bs-tooltip="tooltip" title="ajouter">
									<button class="btn btn-circle btn-danger text-white">
										{{-- <i data-feather="plus" class="feather-sm"></i> --}}
										<i class="fa fa-image"></i>
									</button>
									<span class="ms-2 fw-normal fs-3 text-dark">Ajouter une image</span>
								</a>

								<div class="modal fade" id="add-image-modal" data-bs-backdrop="static" tabindex="-1" aria-labelledby="add-image-modal" aria-hidden="true">
									<div class="modal-dialog">
										<div class="modal-content">
											<div class="modal-header d-flex align-items-center border-bottom">
												<h4 class="modal-title">Ajouter une image pour le cours</h4>
												<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
											</div>
											<div class="modal-body">
												<form id="store-image-form" class="form-horizontal" method="POST" action="{{-- set with JS --}}" data-action="{{route('teacher.ec_image_store', ':ec')}}" enctype="multipart/form-data">
													@csrf
													<div class="form-group mb-3">
														<label for="idecu" class="control-label">EC</label>
														<select name="idecu" id="idecu" class="form-select mr-sm-2" required>
															<option value="">Choisir un EC</option>
															@foreach ($ecs as $ec)
																<option value="{{$ec->idEC}}">{{$ec->intituleEcu}} <small class="text-muted">[{{$ec->sigleFilieres}}]</small></option>
															@endforeach
														</select>
													</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'image à insérer" required></textarea>
													</div>
													<div class="form-group mb-3">
														<label for="ecImage" class="control-label">Choisir une image </label>
														<input 
															type="file" 
															name="ecImage" 
															id="ecImage" 
															class="dropify" 
															data-max-file-size="1M"
															data-allowed-file-extensions="image/*"
															accept="image/*"
															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">
															Enregistrer <i class="fa fa-save ms-1"></i>
														</button>
													</div>
												</form>
											</div>
										</div>
										<!-- /.modal-content -->
									</div>
									<!-- /.modal-dialog -->
								</div>
								{{-- <button type="button" class="btn btn-secondary">
									<i data-feather="user-plus" class="feather-sm"></i>
									<span class="ms-2 fw-normal fs-4">Add User</span>
								</button> --}}
							</div>
						</div>
						<div class="bg-light">
							<div class="table-responsive px-4 py-3">
								<table class="table table-bordered no-wrap" id="ecs-table">
									<thead>
										<tr>
											<th width="30%">Matière</th>
											<th width="30%">Filière</th>
											<th width="9%">Niveau</th>
											<th width="30%">UE</th>
										</tr>
									</thead>
									<tbody class="bg-white">
										@foreach ($ecs as $ec)
											<tr class="advanced-table active">
												<td>
													<a href="{{route("teacher.ec_chaps", $ec->idEC)}}">{{$ec->intituleEcu}}</a>
												</td>
												<td>{{$ec->intituleFilieres}}</td>
												<td>{{$ec->niveauformation." ".$ec->annee}}</td>
												<td>{{$ec->intituleUnite}}</td>
											</tr>
										@endforeach
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-2 col-md-4 col-sm-12 d-flex align-items-stretch">
			<div class="card w-content h-content">
				<div class="card-body">
					<div class="d-flex mb-3">
						<a role="button" class="btn btn-circle btn-success text-white btn-lg d-inline-flex align-items-center justify-content-center" 
							href="{{route('teacher.exam_index')}}"
						>
							<i class="ti-plus"></i>
						</a>
					</div>
					<div class="">
						<h3 class="display-8 mb-0">Composer</h3>
						<h6 class="fw-light">Une epreuve</h6>
					</div>
				</div>
			</div>
		</div>
	</div>
@endsection

@section('script')
	<script src="{{asset('assets/libs/dropify/dist/js/dropify.min.js')}}"></script>
	<script src="{{asset('assets/extra-libs/datatables.net/js/jquery.dataTables.min.js')}}"></script>
	<script>
		$(function() {		
			$('#ecs-table').DataTable({
				"autoWidth": false,
				"order": [[2, "asc"]],
				"language": dtCustomLanguage({
					name: "EC",
					plural: "ECs",
					gender: "M",
				}),
			});

			$("#idecu").on("change", function(e) {
				$("#store-image-form").attr(
					"action",
					$("#store-image-form").data("action").replace(":ec", this.value)
				);
			});

			$('.dropify').dropify({
				messages: {
					default: 'Glissez-déposez un fichier ici ou cliquez',
					replace: 'Glissez-déposez un fichier ou cliquez pour remplacer',
					remove:  'Supprimer',
					error:   'Désolé, le fichier est trop volumineux'
				}
			});

			$("#store-image-form").on("submit", function(e) {
				e.preventDefault();
				const form = this;

				if($('#ecImage').val() == '' || $('#idecu').val()== '' || $('#description').val()== ''){
					Swal.fire({
						text: "Remplissez les champs pour continuer",
						type: "error",
						closeOnConfirm: false,
						showLoaderOnConfirm: true,
						confirmButtonClass: "btn-danger",
						confirmButtonText: "OK",
						confirmButtonColor: "#ec6c62"
					});
				} else {
					let formData = new FormData(form);

					$.ajax({
						type: "POST",  
						url: $(form).attr("action"),
						data: formData,
						blockUI: true,
						processData: false,  // tell jQuery not to process the data
						contentType: false ,  // tell jQuery not to set contentType
						dataType: "json",
						success: function(response) {
							Swal.fire({
								title: "Insertion effectuée avec succès...",
								text: "Voulez-vous continuer ?",
								icon: "success",
								confirmButtonText: "Oui",
								confirmButtonColor: "#ec6c62",
								showCancelButton: true,
								cancelButtonText: "Non",
								focusConfirm: false,
							}).then((result) => {
								if (result.isDismissed) {
									$("#add-image-modal").modal("hide");
									$(form)[0].reset();
									// Reset the preview and clear the file input value
									$('.dropify').dropify('resetPreview');
									$('.dropify').dropify('clearElement');
								}
							});
						},
						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'image. Veuillez réessayer svp.",
									confirmButtonText: "OK",
									confirmButtonColor: "#ec6c62"
								});
							}
						}
					});
				}
			});

		}());
	</script>
@endsection