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

@section('title', "Formulaire requête")

@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')

	{{-- alert settings with content --}}
	@include('partials.alert-settings')
	
	{{-- 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</h3>
				<a
					href="{{route('student.request')}}"
					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('student.request_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">Examen concerné :</label>
						<div class="col-md-9">
							<select id="cours" name="cours" class="form-select" required>
								<option selected disabled>Sélectionnez l'examen</option>
                                @foreach ($examens as $i => $exam)
                                    <option value="{{$exam->ecu}}">{{"Examen de ". $exam->intituleEcu. " ($exam->sigleFilieres)" .' du '.$exam->formated_dateexam}}</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 le sujet de la requête</option>
								<option value="copie mal corrigée">Copie mal corrigée</option>
                                <option value="Explication par rapport à une proposition de réponse">Explication par rapport à une proposition de réponse</option>
                                <option value="Erreur de note">Erreur de note</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">Intitulé de la requête :</label>
						<div class="col-md-9">
							<textarea type="text" name="requete" class="form-control requete" id="requete" rows="10" required></textarea>
						</div>
					</div>
                    <div class="form-group row">
						<label for="attachment" 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"
								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