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

@section('title', "GestStudent NG")

@section('css')
	<link href="{{asset('assets/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css')}}" rel="stylesheet">
	<style>
		td.wrap-text {
			word-wrap: break-word;
			white-space: normal;
			text-align: justify
		}
	</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-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="#exams-tab" role="tab">
							<span class="hidden-sm-up">
								<h4><i class="ti-check-box"></i></h4>
							</span>
							<span class="d-none d-md-block">COMPOSER UNE ÉPREUVE</span>
						</a>
					</li>
				</ul>
				<!-- Tab panes -->
				<div class="tab-content">
					<div class="tab-pane active" id="exams-tab" role="tabpanel">
						<div class="py-4 px-5 mt-3 d-flex justify-content-start">
							<h2 class="card-title mb-0">Selectionner l'examen à composer</h2>
						</div>
						<div class="bg-light">
							<div class="table-responsive px-4 py-3">
								<table class="table table-bordered" id="exams-table">
									<thead>
										<tr>
											<th>Matière</th>
											<th>Date</th>
											<th>Heure</th>
											<th>Description</th>
											<th>Composition</th>
										</tr>
									</thead>
									<tbody class="bg-white">
										@foreach ($exams as $exam)
											@php
												$heure = explode(":",$exam->heure);
												$heure = str_pad($heure[0], 2, '0', STR_PAD_LEFT). ":". $heure[1];
											@endphp
											<tr>
												<td width="35%" class="wrap-text">
													<span class="d-block">{{$exam->intituleEcu}}</span>
													<span class="badge  text-dark border border-info fw-bold">
														{{"$exam->sigleFilieres | $exam->niveauformation $exam->annee"}}
													</span>
												</td>
												<td width="8%">{{$exam->formated_date}}</td>
												<td width="5%">{{$heure}}</td>
												<td width="35%" class="wrap-text">{{$exam->description}}</td>
												<td width="17%">
													<div class="btn-group">
														<a 
															href="{{route('teacher.exam_config', [ "examId" => $exam->idexamen, "configType" => 'auto' ])}}" 
															role="button" 
															class="btn btn-sm btn-light border-dark me-1"
															data-bs-toggle="tooltip"
															title="composer une épreuve automatique"
														>
															Auto <i class="fas fa-sync"></i>
														</a>
														<a 
															href="{{route('teacher.exam_config', [ "examId" => $exam->idexamen, "configType" => 'manual' ])}}"
															role="button"
															class="btn btn-sm btn-dark me-1"
															data-bs-toggle="tooltip"
															title="composer une épreuve manuelle"
														>
															Manuelle <i class="fa fa-cog"></i>
														</a>
														<a 
															href="{{route('teacher.exam_config', [ "examId" => $exam->idexamen, "configType" => 'custom' ])}}"
															role="button"
															class="btn btn-sm btn-info text-dark"
															data-bs-toggle="tooltip"
															title="composer une épreuve personnalisée"
														>
															Personnalisée <i class="fas fa-cogs"></i>
														</a>
													</div>
												</td>
											</tr>
										@endforeach
									</tbody>
								</table>
							</div>
						</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() {		
			$('#exams-table').DataTable({
				"autoWidth": false,
				"language": dtCustomLanguage({
					name: "examen",
					plural: "examens",
					gender: "M",
				}),
			});
		}());
	</script>
@endsection