@extends('layouts.base', [
	"breadcrumb" => [  // see partials/breadcrumb.blade.php for default options
		"title" => "REQUÊTE À L'ADMIN",
		"nav" => [
			"Accueil" => route("teacher.index"),
			"Requêtes" => route("teacher.index"), // TODO : Update this
			"Ajout" => "#",
		],
	]
])

@section('title', "Requêtes à l'admin")

@section('css')
	<link href="{{asset('assets/libs/dropify/dist/css/dropify.min.css')}}" rel="stylesheet">
	<style>
		.form-card {
			width: 95%;
		}

		.form-card .card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.form-card .card-body {
			display: flex;
			flex-direction: column;
			gap: 25px;
		}

		.dropify-wrapper .dropify-message p, .dropify-error {
			text-align: inherit;
		}
	</style>
@endsection

@section('content')
	{{-- alert with content --}}
	@include('partials.alert')

	{{-- Form --}}
	<div class="d-flex justify-content-center">
        <div class="card form-card">
            <div class="card-header bg-info text-white">
              	<h3 class="card-title">Envoyer une requête à l'administrateur</h3>
				<a 
					href="{{route('teacher.requests_admin_index')}}" 
					role="button" 
					class="btn btn-dark"
					data-bs-toggle="tooltip"
					title="Retourner vers la liste des requêtes"
				>
					Liste requêtes <i class=" fas fa-reply"></i>
				</a>
            </div>
            <form class="form-horizontal" method="POST" action="{{route('teacher.requests_admin_store')}}" enctype="multipart/form-data">
                @csrf
				<div class="card-body">
					<div class="form-group row">
						<label class="col-md-3 control-label text-md-end" for="cours">Selectionner le cours :</label>
						<div class="col-md-9">
							<select id="cours" name="cours" class="form-select" required>
								<option selected disabled>Selectionner un cours</option>
								@foreach ($cours as $i => $cour)
									<option value="{{$cour->idEC}}">{{$cour->intituleEcu. " ($cour->sigleFilieres | $cour->niveauformation $cour->annee)" }}</option>
								@endforeach
							</select>
						</div>
					</div>
					<div class="form-group row">
						<label class="col-md-3 control-label text-md-end" for="selection">Objet de la requête :</label>
						<div class="col-md-9">
							<select  name="selection" class="form-select" id="selection" required>
								<option selected disabled>Selectionner l'objet de la requête</option>
								<option value="Demande de modification de notes"> Demande de modification de notes</option>
								<option value="Demande de programmation d'examen"> Demande de programmation d'examen</option>
								<option value="Autre"> Autres...</option>
							</select>
						</div>
					</div>
					<div class="form-group row" style="display: none;">
						<label class="col-md-3 control-label text-md-end" for="objet">Autre objet:</label>
						<div class="col-md-9">
							<input type="text" name="objet" class="form-control objet" id="objet" required/>
						</div>
					</div>
					<div class="form-group row">
						<label class="col-md-3 control-label text-md-end" for="requete">Requête :</label>
						<div class="col-md-9">
							<textarea type="text" name="requete" class="form-control requete" id="requete" rows="8" required></textarea>
						</div>
					</div>
					<div class="form-group row">
						<label for="attachment{{$i}}" class="col-md-3 control-label text-md-end">Joindre un fichier :</label>
						<div class="col-md-9">
							<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>
					<div class="d-flex justify-content-center">
						<button type="submit" class="btn btn-info btn-lg">Envoyer <i class="feather-sm" data-feather="send"></i></button>
					</div>
				</div>
            </form>
        </div>
	</div>
@endsection

@section('script')
	<script src="{{asset('assets/libs/dropify/dist/js/dropify.min.js')}}"></script>
	<script>
		$(function() {
			$("#selection").change(function() {
				const objectInput = $('input[name="objet"]');

				if($(this).val() == "Autre"){
					objectInput.val("");
					objectInput.parents(".form-group").show();
				} else {
					objectInput.parents(".form-group").hide();
					objectInput.val(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'
				}
			});
		}());
	</script>
@endsection