@extends('layouts.base', [
	"breadcrumb" => [  // see partials/breadcrumb.blade.php for default options
		"title" => "INSCRIPTION DES ETUDIANTS",
		// "showNav" => true,
		"nav" => [
			"Dashboard" => route("home"),
			"Inscription des étudiants" => "",
			],
		"btnText" => "GestStudent v17.04",
	]
])

@section('title', "Inscription des étudiants| GestStudent Admin")

@section('css')
    <link rel="stylesheet" href="{{ asset('assets/libs/select2/dist/css/select2.min.css') }}">
    <link href="{{asset('assets/libs/dropify/dist/css/dropify.min.css')}}" rel="stylesheet">

    <style>
        .form-select{ 
            background-image:url({{asset('assets/images/custom-select.png')}});
        }
    </style>
@endsection

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="border-bottom title-part-padding bg-info text-light">
                    <h3 class="box-title m-b-0">INSCRIPTION DES ETUDIANTS PAR FICHIER EXCEL</h3>
                    <p class="text-white m-b-30 font-13"> Ce formulaire permet de renseigner la table des étudiants pour une année académique donnée.</p>
                </div>
                <div class="card-body">
                    <form class="needs-validation" novalidate id="myForm" 
                        action="{{route('etudiants.inscription')}}" enctype="multipart/form-data"
                    >
                        <div class="form-group mb-3 row">
                            <div class="col-3" style="text-align:right;">
                                <label>Type opération</label>
                            </div>
                            <div class="col-9">
                                <select class="form-control" name="typeoperation" id="typeoperation" style="width: 100%;height: 36px;" required="">
                                    <option value="">Choisir une opération</option>
                                    <option value="1">Inscription des étudiants par fichier excel  à partir de la deuxième année (étudiants venant de d'autres universités) [Liste_Etudiants_Format.xlsx]</option>
                                    <option value="2">Liste des nouveaux bacheliers...[Liste_nouveaux_bachelier.xlsx]</option>
                                    <option value="3">Liste des nouveaux étudiants inscrits au niveau de la scolarité-centrale...[Format_Fichier_Excel-Statut.xlsx]</option>
                                </select>
                                <div class="valid-feedback">Ok!</div>
                                <div class="invalid-feedback">Veuillez sélectionner un élément dans la liste</div>
                            </div>
                        </div>

                        <div class="form-group mb-3 row" id="ueblock">
                            <div class="col-3" style="text-align:right;">
                                <label>Validation UE</label>
                            </div>
                            <div class="col-9">
                                <select name="validationue"  class="form-control" required>
                                    <option value="R">NO</option>
                                    <option value="A">YES</option>
                                </select>
                                <div class="valid-feedback">Ok!</div>
                                <div class="invalid-feedback">Veuillez sélectionner un élément dans la liste</div>
                            </div>
                        </div>	

                        <div class="form-group mb-3 row" id="acadblock">
                            <div class="col-3" style="text-align:right;">
                                <label>Année-Académique</label>
                            </div>
                            <div class="col-9">
                                <select name="academique"  class="form-control" required>
                                    <option value="{{$acad}}">{{$periode}}</option>
                                </select>
                                <div class="valid-feedback">Ok!</div>
                                <div class="invalid-feedback">Veuillez sélectionner un élément dans la liste</div>
                            </div>
                        </div>	

                        <div class="form-group mb-3 row" id="reblock">
                            <div class="col-3" style="text-align:right;">
                                <label>Réinscription?</label>
                            </div>
                            <div class="col-9">
                                <select name="reinscription"  class="form-control" required>
                                    <option value="NO">NO</option>
    								<option value="YES">YES</option>
                                </select>
                                <div class="valid-feedback">Ok!</div>
                                <div class="invalid-feedback">Veuillez sélectionner un élément dans la liste</div>
                            </div>
                        </div>	

                        <div class="form-group mb-3 row" id="reblock">
                            <div class="col-3" style="text-align:right;">
                                <label>Générer la fiche de pré-inscription?</label>
                            </div>
                            <div class="col-9">
                                <select class="form-control" name="fiche" style="width: 100%;height: 36px;" required="">
                                    <option value="0">NO</option>
                                    <option value="1">YES [ATTENTION Il FAUT LIMITER A 5 LE NOMBRE DE LIGNE DU FICHIER EN RAISON DE LA COMPILATION DE LA FICHE!!!]</option>
                                </select>
                                <div class="valid-feedback">Ok!</div>
                                <div class="invalid-feedback">Veuillez sélectionner un élément dans la liste</div>
                            </div>
                        </div>

                        <div class="form-group mb-3 row" id="bacblock">
                            <div class="col-3" style="text-align:right;">
                                <label>Année-BAC</label>
                            </div>
                            <div class="col-9">
                                <select name="bac"  class="form-control" required>
                                    @foreach ($periodesBac as $p)
                                        <option value="{{$p->annee}}">{{$p->annee}}</option>
                                    @endforeach
                                </select>
                                <div class="valid-feedback">Ok!</div>
                                <div class="invalid-feedback">Veuillez sélectionner un élément dans la liste</div>
                            </div>
                        </div>	

                        <div class="form-group mb-3 row">
                            <div class="col-3" style="text-align:right;">
                                <label>Choisir un fichier</label>
                            </div>
                            <div class="col-9">
                                <input type="file" name="fichierexcel"  class="form-control dropify" data-max-file-size="1.5M">
                                <div class="valid-feedback">Ok!</div>
                                <div class="invalid-feedback">Le champ est requis</div>
                            </div>
                        </div>
                      <div class="row">
                        <div class="col-4"></div>
                        <div class="col-8">
                            <button class="btn btn-success mt-3 rounded-pill px-4" type="submit">Valider</button>
                        </div>
                      </div>
                    </form>
                </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('assets/libs/dropify/dist/js/dropify.min.js')}}"></script>

    <script type="text/javascript">
		$('#bacblock').hide();
		$('#acadblock').hide();
		$('#reblock').hide();
		$('#ueblock').hide();
		$('#typeoperation').on('change', function() {
			var verif=$(this).val();
			if(verif=='1'){
				$('#ueblock').show();
				$('#acadblock').show();
				$('#reblock').show();
				$('#bacblock').hide();
			}else if(verif=='2'){
				$('#ueblock').hide();
				$('#acadblock').hide();
				$('#reblock').hide();
				$('#bacblock').show();
			}else {
				$('#ueblock').hide();
				$('#acadblock').hide();
				$('#reblock').hide();
				$('#bacblock').hide();
			}
			 
		});		
	</script>

    <script>
        const swalWithBootstrapButtons = Swal.mixin({
            customClass: {
                confirmButton: 'btn btn-success',
                cancelButton: 'btn btn-danger'
            },
            buttonsStyling: false
        });

        $("#myForm").submit(function( event ) {
            event.preventDefault();
            // url et data qu'on doit envoyer
            let url = $(this)[0].attributes.action.value;
            let formData = new FormData($(this)[0]);

            Swal.fire({
                title: "<strong>Confirmer l'opération!</strong>",
                icon: 'info',
                html:
                    'Cette opération ajoutera les informations dans la base.',
                showCancelButton: true,
                focusConfirm: false,
                confirmButtonText:
                    'Oui, je confirme !',
                cancelButtonText:
                    'Annuler',
                showLoaderOnConfirm: true,
                preConfirm: () => {

                    // Requete AJAX
                    return fetch(url, {
                        method: "POST",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        body: formData
                    })
                    .then(response => response.json())
                    .then(response => {
                        if(response.success == true){
                            // debugger;
                            return response;
                        }else{
                            Swal.showValidationMessage(
                                response.message
                            )
                        }
                    })
                },
                allowOutsideClick: () => !Swal.isLoading()

            }).then((result) => {
                if (result.isConfirmed) {
                    swalWithBootstrapButtons.fire(
                        'Opération enregistrée!',
                        result.value.message,
                        'success'
                    ).then((result2) => {
                        if (result2.isConfirmed) {
                            location.reload();
                        }
                    })
                }
            })
        });
    </script>

    <script>
        $("#typeoperation").select2({
            placeholder: "Sélectionner l'opération",
            // allowClear: true
        });

        $('.dropify').dropify();

        // Example starter JavaScript for disabling form submissions if there are invalid fields
        (function() {
            'use strict';
            window.addEventListener('load', function() {
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.getElementsByClassName('needs-validation');
                // Loop over them and prevent submission
                var validation = Array.prototype.filter.call(forms, function(form) {
                    form.addEventListener('submit', function(event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);
        })();
    </script>
@endsection