@extends('layouts.base', [
	"breadcrumb" => [  // see partials/breadcrumb.blade.php for default options
		"title" => "REQUÊTES",
		"nav" => [
			"Accueil" => route("teacher.index"),
			"Requêtes à l'admin" => "#",
		],
	]
])

@section('title', "GestStudent NG Requêtes")

@section('css')
	<link href="{{asset('assets/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css')}}" rel="stylesheet">
	<style>
		.radius-3 {
			border-radius: .75em;
		}

		.check-all {
			width: 1.15em;
			height: 1.15em;
			vertical-align: middle;
			transition: background-color .15s ease-in-out,background-position .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
		}

		#requests-table tr.selected {
			background-color: #d1edff;
		}
	</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">Requêtes</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["requests"]}}</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">Avec réponses</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["with_answer"]}}</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">En attente</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["without_answer"]}}</h2>
					</div>
				</div>
			</div>
		</div>
	</div>

	{{-- content --}}
	<div class="row">
		<div class="d-flex align-items-stretch">
			<div class="card w-100">
				<div class="row p-4 no-gutters mt-3">
					<div class="col-sm-12 col-md-6 d-flex justify-content-start align-items-center">
						<h2 class="card-title mb-0 text-uppercase">Requêtes à l'admin</h2>
					</div>
					<div class="col-sm-12 col-md-6 justify-content-end d-flex">
						<a 
							href="{{route('teacher.requests_admin_create')}}" 
							role="button" 
							class="btn btn-success"
							data-bs-toggle="tooltip"
							title="Faire une nouvelle requête"
						>
							Nouvelle requête <i class="far fa-envelope"></i>
						</a>
					</div>
				</div>
				<div class="bg-light">
					<div class="px-4 py-2">
						<!-- Check all button -->
						<label type="button" class="btn btn-info btn-sm">
							<input class="check-all" type="checkbox" id="checkAll1">
							<label class="form-check-label" for="checkAll1">
							  	Tout coché
							</label>
						</label>
						<div class="btn-group">
							<button class="btn btn-default btn-sm del-btn" data-bs-target="#supprimer" data-bs-toggle="modal" data-bs-tooltip="tooltip" style="display: none;">
								<i class="fa fa-trash"></i>
							</button>
							<button type="button" class="btn btn-default btn-sm"><i class="fa fa-reply"></i></button>
							<button type="button" class="btn btn-default btn-sm"><i class="fa fa-share"></i></button>
						</div>
					</div>
					<div class="mx-4 my-3">
						<div class="table-responsive w-100">
							<table class="table table-bordered" id="requests-table">
								<thead>
									<tr>
										<th width="2%"></th>
										<th width="40%">Cours</th>
										<th width="50%">Aperçu du message</th>
										<th width="5%">Aperçu réponse</th>
										<th width="3%">Action</th>
									</tr>
								</thead>
								<tbody class="bg-white">
									@foreach ($reqs as $i => $req)
										<tr>
											<td><input type="checkbox" class="form-check check-line" name="checkbox" value="{{$req->idrequete}}"></td>
											<td>
												<p class="mb-0">{{$req->intituleEcu}}</p>
												<span class="badge text-dark border border-info fw-bold">
													{{"$req->sigleFilieres | $req->niveauFormation $req->annee"}}
												</span>
											</td>
											<td>
												<div class="text-uppercase fw-bold ellipsis lc-2">{{$req->objet}}</div>
												<div class="text-muted mb-1">
													<i class="mdi mdi-calendar-clock"></i> {{$req->formated_daterequete." à ".$req->heurerequete}}
												</div>
												<p class="ellipsis lc-2 mb-1">{{$req->requete}}</p>
											</td>
											<td>
												@if (strlen($req->reponse))
													<p class="ellipsis lc-2 mb-1">{{$req->reponse}}</p>
													<div class="text-muted">
														<i class="mdi mdi-calendar-clock"></i> {{$req->formated_datereponse." à ".$req->heurereponse}}
													</div>
												@else
													<span class="badge text-uppercase bg-warning text-dark p-1">
														En attente de réponse <i class="fas fa-hourglass-half"></i>
													</span>
												@endif
											</td>
											<td class="text-center">
												<button 
													type="button" 
													class="btn btn-light-info text-info fs-3 font-weight-medium" 
													data-bs-toggle="modal" 
													data-bs-target="#details-modal-{{ $i }}"
													data-bs-tooltip="tooltip"
													title="Voir la réquête (et la réponse)"
												>
													<i class="fas fa-copy"></i>
												</button>
											</td>
										</tr>
										
										{{-- details modal --}}
										<div class="modal fade" id="details-modal-{{ $i }}" tabindex="-1" aria-labelledby="details-modal-{{ $i }}" aria-hidden="true">
											<div class="modal-dialog modal-lg modal-dialog-scrollable">
												<div class="modal-content">
													<div class="modal-header d-flex align-items-start border-bottom">
														<div class="modal-title fw-bold">
															<p class="mb-0 text-uppercase">{{$req->intituleEcu}}</p>
															<span class="text-muted fs-3">
																{{"$req->sigleFilieres | $req->niveauFormation $req->annee"}}
															</span>
														</div>
														<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
													</div>
													<div class="modal-body bg-light">
														<div class="mb-3 me-5 p-2">
															<p class="text-uppercase fw-bold mb-0">{{$req->objet}}</p>
															@if (strlen($req->requetefichier))
																<div class="fw-bold text-muted fs-2 text-lowercase">
																	<i class="fas fa-paperclip"></i> un fichier attaché
																</div>
															@endif
															<div class="fw-bold text-muted fs-3">
																<i class="mdi mdi-calendar-clock"></i> Envoyé le {{$req->formated_daterequete." à ".$req->heurerequete}}
															</div>
															<p class="my-1 ps-1">{!! nl2br($req->requete) !!}</p>
															@if (strlen($req->requetefichier))
																<div class="mt-2">
																	<!-- TODO : use getImgPath -->
																	<a href="{{ config('app.aws_url').$req->requetefichier }}" target="_blank" class="btn btn-info fs-3 fw-bold">
																		<i class="fas fa-paperclip"></i> Voir le fichier attaché à la requête
																	</a>
																</div>
															@endif
														</div>
														@if (strlen($req->reponse))
															<div class="bg-white mb-3 mx-5 p-2 border radius-3">
																<p class="text-uppercase fw-bold mb-0">
																	Réponse
																	@if (strlen($req->reponsefichier))
																		<span class="fw-bold text-muted fs-2 text-lowercase">
																			(fichier attaché <i class="fas fa-paperclip"></i>)
																		</span>
																	@endif
																</p>
																<div class="fw-bold text-muted fs-3">
																	<i class="mdi mdi-calendar-clock"></i> Envoyé le {{$req->formated_datereponse." à ".$req->heurereponse}}
																</div>
																<p class="my-1 ps-1">{!! nl2br($req->reponse) !!}</p>
																@if (strlen($req->reponsefichier))
																	<!-- TODO : use getImgPath -->
																	<div class="text-center mt-2">
																		<a href="{{ config('app.aws_url').$req->reponsefichier }}" target="_blank" class="btn btn-info fs-3 fw-bold">
																			<i class="fas fa-paperclip"></i> Voir le fichier attaché à la réponse
																		</a>
																	</div>
																@endif
															</div>
														@else
															<div class="bg-warning text-dark fw-bold text-uppercase mb-3 ms-5 p-3 border radius-3">
																En attente de réponse <i class="fas fa-hourglass-half"></i>
															</div>
														@endif
													</div>
													<div class="modal-footer border-top p-2 d-flex justify-content-center">
														<button type="button" class="btn btn-dark btn-lg font-weight-medium waves-effect" data-bs-dismiss="modal">Fermer</button>
													</div>
												</div>
											  </div>
										</div>
									@endforeach
								</tbody>
								<tfoot>
									<tr>
										<th width="2%"></th>
										<th width="40%">Cours</th>
										<th width="50%">Aperçu du message</th>
										<th width="5%">Aperçu réponse</th>
										<th width="3%">Action</th>
									</tr>
								</tfoot>
							</table>
						</div>
					</div>

					{{-- del modal --}}
					<div id="supprimer" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="supprimer" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<form id="delete-request-form">
									<div class="modal-body">
										Voulez-vous vraiment définitevement supprimer ce(s) requête(s) ?
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-info waves-effect" data-bs-dismiss="modal">Annuler</button>
										<button type="submit" class="btn btn-danger waves-effect">Oui <i class="fa fa-trash"></i></button>
									</div>
								</form>
							</div>
						</div>
					</div>

					<div class="px-4 py-2">
						<!-- Check all button -->
						<label type="button" class="btn btn-info btn-sm">
							<input class="check-all" type="checkbox" id="checkAll2">
							<label class="form-check-label" for="checkAll2">
								Tout coché
							</label>
						</label>
						<div class="btn-group">
							<button class="btn btn-default btn-sm del-btn" data-bs-target="#supprimer" data-bs-toggle="modal" data-bs-tooltip="tooltip" style="display: none;">
								<i class="fa fa-trash"></i>
							</button>
							<button type="button" class="btn btn-default btn-sm"><i class="fa fa-reply"></i></button>
							<button type="button" class="btn btn-default btn-sm"><i class="fa fa-share"></i></button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
@endsection

@section('script')
	<script src="{{asset('assets/extra-libs/datatables.net/js/jquery.dataTables.min.js')}}"></script>
	<script>
		$(function() {
			const dt = $('#requests-table').DataTable({
				"autoWidth": false,
				"language": dtCustomLanguage({
					name: "requête",
					plural: "requêtes",
					gender: "F",
				}),
			});

			$('.check-all').click(function(){
				dt.$('.check-line').prop("checked", this.checked);
				
				$('.check-all').not(this).prop("checked", this.checked);
				$('.check-all').not(this).prop("indeterminate", false);

				// rows' style & del btns visibility
				if (this.checked) {
					dt.$("tr").addClass('selected');
					$(".del-btn").show();
				} else {
					dt.$("tr").removeClass('selected');
					$(".del-btn").hide();
				}
			});

			dt.$(".check-line").on('click', function () {
				// row style
				if (this.checked) {
					$(this).parents("tr").addClass('selected');
				} else {
					$(this).parents("tr").removeClass('selected');
				}

				// del buttons visibility
				if(dt.$(".check-line:checked").length > 0) {
					$(".del-btn").show();
				} else {
					$(".del-btn").hide();
				}

				// checkAll checkboxes' state
				const selector = this.checked ? ".check-line:checked" : ".check-line:not(:checked)";
				if (dt.$(selector).length == dt.$('.check-line').length) {  // all checkboxes have same state as current one
					$('.check-all').prop("checked", this.checked);
					$('.check-all').prop("indeterminate", false);
				} else {
					$('.check-all').prop("checked", false);
					$('.check-all').prop("indeterminate", true);
				}
			});

			// delete form submission
            $("#delete-request-form").on('submit', function(e) {
				e.preventDefault();

				let requests = [];
				dt.$(".check-line:checked").each((i, cb) => requests.push(cb.value));

				$.ajax({
					type: "DELETE",
					url: "{{route('teacher.requests_admin_bulk_delete')}}",
					data: { requests: requests},
					blockUI: true,
					success: function(response) {
						Swal.fire({
							icon: 'success',
							title: 'Succès',
							text: "Requêtes supprimées avec succès !",
						}).then(() => location.reload() );
					},
					error: function(err){
						console.log(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 suppression des requêtes.",
								confirmButtonText: "OK",
								confirmButtonColor: "#ec6c62"
							});
						}
					}
				})
			})
        }());
	</script>
@endsection