@extends('layouts.base', [
	"breadcrumb" => [  // see partials/breadcrumb.blade.php for default options
		"title" => "GESTSTUDENT NOUVELLE GÉNÉRATION",
		"nav" => [
			"ACCUEIL" => "javaScript:void(0);",
			"LISTE DES COMPOSITIONS" => route('student.index'),
		],
	]
])

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

@section('css')
    <!-- DataTables -->
    <link href=" {{ asset('assets/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css')}}" rel="stylesheet">
    <link href=" {{ asset('assets/extra-libs/datatables.net-bs4/css/responsive.dataTables.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;
		}

		#requests-table tr.selected {
			background-color: #d1edff;
		}
	</style>
@endsection

@section('content')
    @php
        $requests = $data["requests"];
        $stats = $data["stats"];
    @endphp
	{{-- 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">ECs Concernés </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 de réclamation</h2>
					</div>
					<div class="col-sm-12 col-md-6 justify-content-end d-flex">
						<a
							href="{{route("student.request_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 d-none">
						<!-- 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="40%">Cours</th>
										<th width="50%">Aperçu du message</th>
										<th width="7%">Aperçu réponse</th>
										<th width="3%">Action</th>
									</tr>
								</thead>
								<tbody class="bg-white">
									@foreach ($requests as $i => $req)
										<tr>
											<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['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">{!! nl2br($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['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>
														@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="40%">Cours</th>
										<th width="50%">Aperçu du message</th>
										<th width="7%">Aperçu réponse</th>
										<th width="3%">Action</th>
									</tr>
								</tfoot>
							</table>
						</div>
					</div>

					<div class="px-4 py-2 d-none">
						<!-- 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')
    {{-- include page's specific scripts here --}}
    <!-- datatables.net -->
    <script src="{{ asset('assets/extra-libs/datatables.net/js/jquery.dataTables.min.js')}}"></script>
    <script src="{{ asset('assets/extra-libs/datatables.net-bs4/js/dataTables.responsive.min.js')}}"></script>
    {{-- <script src="{{ asset('assets/extra-libs/datatables-rowsgroup/dataTables.rowsGroup.js')}}"></script> --}}

    <!-- datatable export functionality only -->
    <script src="{{ asset('assets/extra-libs/datatables.net/export/dataTables-1.5.1-buttons.min.js')}}"></script>
    <script src="{{ asset('assets/extra-libs/datatables.net/export/dataTables-1.5.1-buttons.flash.min.js')}}"></script>
    <script src="{{ asset('assets/extra-libs/datatables.net/export/jszip-3.1.3.min.js')}}"></script>
    <script src="{{ asset('assets/extra-libs/datatables.net/export/pdfmake-0.1.32.min.js')}}"></script>
    <script src="{{ asset('assets/extra-libs/datatables.net/export/vfs_fonts-0.1.32.js')}}"></script>
    <script src="{{ asset('assets/extra-libs/datatables.net/export/dataTables-1.5.1-buttons.html5.min.js')}}"></script>
    <script src="{{ asset('assets/extra-libs/datatables.net/export/dataTables-1.5.1-buttons.print.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);
				}
			});
        }());
	</script>
@endsection