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

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

@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>
		.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;
		}

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

		.dropify-wrapper .dropify-message p, .dropify-error {
			text-align: inherit;
		}
	</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="card card-body mx-3 px-0">
		<div class="mx-3">
			<h4 class="card-title text-uppercase mb-4">Requêtes des étudiants</h4>
			<ul class="nav nav-tabs" role="tablist">
				<li class="nav-item">
					<a class="nav-link d-flex active" data-bs-toggle="tab" href="#pendingReqs" role="tab">
						<span><i class="fas fa-hourglass-half"></i></span>
						<span class="d-none d-md-block ms-2">En attente</span>
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link d-flex" data-bs-toggle="tab" href="#answeredReqs" role="tab">
						<span><i class="fas fa-history"></i></span>
						<span class="d-none d-md-block ms-2">Avec réponse</span>
					</a>
				</li>
			</ul>
		</div>
		<!-- Tab panes -->
		<div class="tab-content bg-light px-4">
			{{-- Pending reqs --}}
			<div class="tab-pane active" id="pendingReqs" role="tabpanel">
				<h4 class="mt-4">En attente de réponse</h4>
				<div class="py-2 mt-3">
					<!-- 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="#del-modal"  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="table-responsive my-3">
					<table class="table table-bordered" id="pending-reqs-table">
						<thead>
							<tr>
								<th width="2%"></th>
								<th width="25%">Cours</th>
								<th width="25%">Étudiant</th>
								<th width="40%">Aperçu du message</th>
								<th width="3%">Action</th>
							</tr>
						</thead>
						<tbody class="bg-white">
							@foreach ($pendingReqs 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>{{$req->nom." ".$req->prenom}}</td>
									<td>
										<div class="text-uppercase fw-bold ellipsis lc-2">{{$req->sujet}}</div>
										<div class="text-muted mb-1">
											<i class="mdi mdi-calendar-clock"></i> {{$req->formated_dateenvoie." à ".$req->heureenvoie}}
										</div>
										<p class="ellipsis lc-2 mb-1">{{$req->requete}}</p>
									</td>
									<td>
										<button 
											type="button" 
											class="btn btn-light-info text-info fs-3 font-weight-medium" 
											data-bs-toggle="modal" 
											data-bs-target="#details-modal-{{ $req->idrequete }}"
											data-bs-tooltip="tooltip"
											title="Voir la réquête (et la réponse)"
										>
											<i class="fas fa-copy"></i>
										</button>
										
										{{-- details modal --}}
										<div class="modal fade" id="details-modal-{{ $req->idrequete }}" tabindex="-1" aria-labelledby="details-modal-{{ $req->idrequete }}" 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">
															<div class="fs-3 text-uppercase">
																<i class="fas fa-user"></i> 
																{{$req->nom." ".$req->prenom}}
															</div>
															<div class="">
																<i class="far fa-clipboard"></i> 
																{{$req->intituleEcu}}
															</div>
															<div class="text-muted fs-3">
																<i class="far fa-bookmark"></i>
																{{"$req->sigleFilieres | $req->niveauFormation $req->annee"}}
															</div>
														</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->sujet}}</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_dateenvoie." à ".$req->heureenvoie}}
															</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>
														<div class="text-center mb-2">
															<button class="btn btn-warning btn-rounded text-dark" type="button" data-bs-toggle="collapse" data-bs-target="#reply-{{$i}}" aria-expanded="false" aria-controls="reply-{{$i}}">
																Répondre à la requête <i class="far fa-edit"></i>
															</button>
														</div>
		
														{{-- reply to request collapse --}}
														<div class="bg-white mb-3 ms-5 p-2 border radius-3 collapse" id="reply-{{$i}}">
															<form class="reply-form" method="POST" action="{{route('teacher.requests_student_store_reply', $req->idrequete)}}" enctype="multipart/form-data">
																@csrf
																<div class="form-group mb-2">
																	<label for="response-{{$i}}" class="control-label">Message</label>
																	<textarea class="form-control" name="response" id="response-{{$i}}" rows="4" required></textarea>
																</div>
																<div class="form-group">
																	<label for="attachment{{$i}}" class="control-label">Joindre un fichier </label>
																	<input 
																		type="file" 
																		name="attachment" 
																		id="attachment{{$i}}" 
																		class="dropify" 
																		data-max-file-size="1M"
																		data-allowed-file-extensions="image/*,application/pdf"
																		accept="image/*,application/pdf"
																	>
																</div>
																<div class="d-flex justify-content-center mt-2">
																	<a role="button" class="btn btn-dark text-white font-weight-medium me-2" data-bs-toggle="collapse" href="#reply-{{$i}}" aria-expanded="false" aria-controls="reply-{{$i}}">
																		Annuler <i class="fa fa-undo ms-1"></i>
																	</a>
																	<button type="submit" class="btn btn-info font-weight-medium">
																		Enregistrer <i class="fa fa-save ms-1"></i>
																	</button>
																</div>
															</form>
														</div>
													</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>
									</td>
								</tr>
								
							@endforeach
						</tbody>
					</table>
				</div>

				<div class="py-2 mt-3">
					<!-- 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="#del-modal"  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>

			{{-- Answered reqs --}}
			<div class="tab-pane" id="answeredReqs" role="tabpanel">
				<h4 class="mt-4">Ayant de réponse</h4>
				<div class="py-2 mt-3">
					<!-- Check all button -->
					<label type="button" class="btn btn-info btn-sm">
						<input class="check-all" type="checkbox" id="checkAll3">
						<label class="form-check-label" for="checkAll3">
							Tout coché
						</label>
					</label>
					<div class="btn-group">
						<button class="btn btn-default btn-sm del-btn" data-bs-target="#del-modal"  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="table-responsive my-3">
					<table class="table table-bordered" id="answered-reqs-table">
						<thead>
							<tr>
								<th width="2%"></th>
								<th width="25%">Cours</th>
								<th width="25%">Étudiant</th>
								<th width="40%">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 ($answeredReqs 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>{{$req->nom." ".$req->prenom}}</td>
									<td>
										<div class="text-uppercase fw-bold ellipsis lc-2">{{$req->sujet}}</div>
										<div class="text-muted mb-1">
											<i class="mdi mdi-calendar-clock"></i> {{$req->formated_dateenvoie." à ".$req->heureenvoie}}
										</div>
										<p class="ellipsis lc-2 mb-1">{{$req->requete}}</p>
									</td>
									<td>
										<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>
									</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-{{ $req->idrequete }}"
											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-{{ $req->idrequete }}" tabindex="-1" aria-labelledby="details-modal-{{ $req->idrequete }}" 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">
													<div class="fs-3 text-uppercase">
														<i class="fas fa-user"></i> 
														{{$req->nom." ".$req->prenom}}
													</div>
													<div class="mb-0">
														<i class="far fa-clipboard"></i> 
														{{$req->intituleEcu}}
													</div>
													<div class="text-muted fs-3">
														<i class="far fa-bookmark"></i>
														{{"$req->sigleFilieres | $req->niveauFormation $req->annee"}}
													</div>
												</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->sujet}}</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_dateenvoie." à ".$req->heureenvoie}}
													</div>
													<p class="my-1 ps-1">{!! nl2br($req->requete) !!}</p>
													@if (strlen($req->requetefichier))
														<div class="mt-2">
															<!-- TODO : use getImgPath -->
															<a href="{{ $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>
												<div class="bg-white mb-3 ms-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="{{ $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>
											</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>
					</table>
				</div>

				<div class="py-2 mt-3">
					<!-- Check all button -->
					<label type="button" class="btn btn-info btn-sm">
						<input class="check-all" type="checkbox" id="checkAll4">
						<label class="form-check-label" for="checkAll4">
							Tout coché
						</label>
					</label>
					<div class="btn-group">
						<button class="btn btn-default btn-sm del-btn" data-bs-target="#del-modal"  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>

	{{-- del modal --}}
	<div id="del-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="del-modal" 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>
@endsection

@section('script')
	<script src="{{asset('assets/extra-libs/datatables.net/js/jquery.dataTables.min.js')}}"></script>
	<script src="{{asset('assets/libs/dropify/dist/js/dropify.min.js')}}"></script>
	<script>
		let dts = {}; // keep instance of datatables

		$(function() {
			["pending-reqs-table", "answered-reqs-table"].forEach( id => {
				dts[id] = $('#' + id).DataTable({
					"autoWidth": false,
					"language": dtCustomLanguage({
						name: "requête",
						plural: "requêtes",
						gender: "F",
					}),
				});
			});

			$('.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'
				}
			});

			viewReqFromLocationHash();
			window.addEventListener("hashchange", (e) => viewReqFromLocationHash(e));
			
			$(".reply-form").on("submit", function(e) {
				e.preventDefault();
				const form = this;

				if($(form).find("[name='response']").val().length == 0){
					Swal.fire({
						text: "Veuillez entrer le texte de la réponse !",
						icon: "error",
						confirmButtonText: "OK",
						confirmButtonColor: "#ec6c62"
					});

					return false;
				}

				const formData = new FormData(form);

				$.ajax({
					type: "POST",
					url: $(form).attr("action"),
					data: formData,
					processData: false,
					contentType: false,
					dataType: "json",
					blockUI: true,
					success: function(response) {
						Swal.fire({
							icon: 'success',
							title: 'Succès',
							text: "Réponse envoyée 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 l'envoie de la réponse.",
								confirmButtonText: "OK",
								confirmButtonColor: "#ec6c62"
							});
						}
					}
				});
			});

			// TODO : to comment
			$('.check-all').click(function(){
				const pane = $(this).parents(".tab-pane");
				const dt = dts[pane.find("table").attr("id")];

				dt.$('.check-line').prop("checked", this.checked);
				
				pane.find('.check-all').not(this).prop("checked", this.checked);
				pane.find('.check-all').not(this).prop("indeterminate", false);

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

			// single checkbox event
			$("table").on("click", ".check-line", function () {
				const pane = $(this).parents(".tab-pane");
				const dt = dts[pane.find("table").attr("id")];

				// 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) {
					pane.find(".del-btn").show();
				} else {
					pane.find(".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
					pane.find('.check-all').prop("checked", this.checked);
					pane.find('.check-all').prop("indeterminate", false);
				} else {
					pane.find('.check-all').prop("checked", false);
					pane.find('.check-all').prop("indeterminate", true);
				}
			});

			// del modal show event
			$("#del-modal").on("show.bs.modal", function(e) {
				$("#delete-request-form").attr(
					"data-dt",
					$(e.relatedTarget).parents(".tab-pane").find("table").attr("id")
				);
			});

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

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

				$.ajax({
					type: "DELETE",
					url: "{{route('teacher.requests_student_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"
							});
						}
					}
				})
			})
        }());

		function viewReqFromLocationHash(e = null) {
			const req = location.hash.replace("#r", "");
			if (req.length && $(`#details-modal-${req}`).length) {
				// console.log(req);
				/*
					FIXME : The modal doesn't show up !	
					The backdrop appears but the modal doesn't !		
					Any problem in this code or Bootstrap 5 issue ?
				*/
				// $(`[data-bs-target="#details-modal-${req}"]`).click();
			}
		}
	</script>
@endsection