@extends('layouts.template')
@section('title', 'Validation d\'inscription ')
@section('nom', ' VALIDATION DINSCRIPTION')
@section('name', 'Validation dinscription')

@section('css')
    {{-- <link rel="stylesheet" href=" {{ asset('css/cover.css') }} "> --}}
@endsection
@section('contenu')
    <div class=" container mt-4">

        <div class="row justify-content-center " style="margin:0 150px">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header  p-4 text-center"  style="background-color: {{ session('etablissementCouleur1')}};">
                        <h2 class="mb-0 text-white" style=" color: {{ session('couleurText1')}}">VALIDATION</h2>
                    </div>
                    <div class="card-body fs-4">
                        <form class="form-horizontal" id="formElem" name="formElem" action=" {{ route('post_val_manu') }} "
                            method="POST">
                            @csrf
                            <div class="mb-3 pb-3 row border-bottom align-items-center">
                                <label for="matricule" class="control-label text-md-end col-md-3 fs-4">Matricule</label>
                                <div class="col-md-6">
                                    <input class="form-control fs-4" type="number" id="matricule" name="matricule">
                                </div>
                            </div>

                            <div class="mb-3 pb-3 row border-bottom align-items-center">
                                <label for="etablissement"
                                    class="control-label text-md-end col-md-3 fs-4">Etablissement</label>
                                <div class="col-md-6">
                                    <select class="select2 mr-sm-2 p-2 fs-4" style="width: 100%" required id="etablissement"
                                        name="etablissement">
                                        <option value="">Selectionnez l'etablissement </option>
                                        @foreach ($etabli as $etablissement )
                                        <option value="{{ $etablissement->idEtablissement }}"> {{ $etablissement->descreta }} </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>


                            <div class="mb-3 pb-3 row border-bottom align-items-center">
                                <label for="" class="control-label text-md-end col-md-3 fs-4">Filière</label>
                                <div class="col-md-6">
                                    <select class="select2 mr-sm-2 p-2 fs-4 select-filiere" style="width: 100%" required
                                        name="filiere">
                                        <option value="">Selectionnez la filière </option>
                                        {{-- @foreach ($filieres as $filiere)
                                       <option value=" {{$filiere->idFiliere}} ">{{ $filiere->intituleFilieres}}</option>
                                       @endforeach --}}

                                    </select>
                                </div>
                            </div>
                            <div class="mb-3 pb-3 row border-bottom align-items-center">
                                <label for="" class="control-label text-md-end col-md-3 fs-4">Année d'Etude</label>
                                <div class="col-md-6">
                                    <select class="select2 mr-sm-2 p-2 fs-4" style="width: 100%" required name="anneeEtude">
                                        <option value="">Sélectionner l'année d'étude</option>
                                        {{-- @foreach ($annes as $anne)
                                            @php
                                                $pos = '';
                                                
                                                switch ($anne->annee) {
                                                    case '1':
                                                        $pos = 'Première';
                                                        break;
                                                    case '2':
                                                        $pos = 'Deuxième';
                                                        break;
                                                    case '3':
                                                        $pos = 'Troisième';
                                                        break;
                                                }
                                            @endphp

                                            <option value=" {{ $anne->annee }} ">{{ $pos }} annee</option>
                                        @endforeach --}}
                                     @foreach ($anneEtud as $anneEtude )
                                     <option value="{{ $anneEtude->id }}"> {{ $anneEtude->annee_etude }} </option>
                                     @endforeach
                                    </select>
                                    <div class="invalid-feedback">
                                        L'année d'étude est requise
                                    </div>
                                </div>
                            </div>



                            <div class="mb-3 pb-3 row border-bottom align-items-center">
                                <label for="" class="control-label text-md-end col-md-3 fs-4">Année
                                    Académique</label>
                                <div class="col-md-6">
                                    <select class="form-select mr-sm-2 p-2 fs-4" id="" required name="academique">
                                        <option value="">Selectionnez l'année academique </option>
                                        @foreach ($anneAcad as $anneAcademie )
                                        <option value="{{$anneAcademie->annee_acad}}">{{$anneAcademie->periode}}</option>
                                        @endforeach
                                        
                                    </select>
                                </div>
                            </div>
                            <div class="form-actions">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="d-grid gap-2 d-md-flex justify-content-center">
                                            <button type="reset" class=" fs-6  btn "style="background-color: #e4e7ea">
                                                <i class="fa fa-ban" aria-hidden="true"></i>
                                                Annuler
                                            </button>
                                            <button type="submit" class="fs-6 btn" style="color: {{ session('couleurText1') }}; background-color: {{ session('etablissementCouleur1')}};">
                                                <i class="fa fa-check"></i>
                                                Soumettre
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>



    </div>

@endsection

@section('script')
    <script src=" {{asset('assets/libs/select2/dist/js/select2.full.min.js')}} "></script>
    <script src=" {{asset('assets/libs/select2/dist/js/select2.min.js')}} "></script>
    <script src=" {{asset('dist/js/pages/forms/select2/select2.init.js')}} "></script>
    <script type="text/javascript">
        $("nav > ul > li:last-child").addClass("selected");
    </script>
    <script>
        $(() => {
            let request = async () => {
                let url = "{{ route('evenemt') }}";
                let token = document
                    .querySelector('meta[name="csrf-token"]')
                    .getAttribute("content");
                let options = {
                    headers: {
                        "Content-Type": "application/json",
                        Accept: "application/json, text-plain, */*",
                        "X-Requested-With": "XMLHttpRequest",
                        "X-CSRF-TOKEN": token,
                    },
                    method: "post",
                    credentials: "same-origin",
                    body: JSON.stringify({
                        idEtablissement: $("#etablissement").val(),
                    }),
                };

                await fetch(url, options)
                    .then((response) => response.json())
                    .then((response) => {
                        if (response.success) {
                            let filieres = response.data.filieres;
                            let optionsFilieres = [];
                            for (let filiereID in filieres) {
                                optionsFilieres.push({
                                    id: filiereID,
                                    text: filieres[filiereID]
                                });
                            }
                            $('.select-filiere').select2({
                                data: optionsFilieres
                            });
                        } else
                            toaster("warning", "");
                    })
                    .catch((e) => {
                        toaster("error",
                            "Une erreur est survenue.");
                    });

            };
            $("#etablissement").change(() => {
                if ($("#etablissement").val() !== 0) {
                    request();
                }
            });
        })
    </script>
@endsection