@extends('layouts.base', [
    "breadcrumb" => [ // see partials/breadcrumb.blade.php for default options
        "title" => "AUTORISATION INSCRIPTION",
        // "showNav" => true,
        "nav" => [
            "Dashboard" => route("home"),
            "Autorisation inscription" => "",
            ],
        "btnText" => "GestStudent v17.04",
    ]
])

@section('title', "Autorisation d'inscription | GestStudent Admin")

@section('css')
<link rel="stylesheet" href="{{ asset('assets/libs/select2/dist/css/select2.min.css') }}">
<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">
                <h4 class="card-title mb-0" style="color: white">Veuillez sélectionner les données s'il vous plait.</h4>
            </div>
            <div class="card-body">
                <form class="needs-validation" novalidate action="#" id="authorization">
                    @csrf
                    <div class="form-group mb-3 row">
                        <div class="col-3" style="text-align:right;">
                            <label>Année d'Étude</label>
                        </div>
                        <div class="col-7">
                            <select class="form-control" id="select2-data-array" style="width: 100%;height: 36px;" name="annee" required="">
                                <option value="2">Deuxième année</option>
                                <option value="3">Troisième année</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">
                        <div class="col-3" style="text-align:right;">
                            <label>Nom</label>
                        </div>
                        <div class="col-7">
                            <input class="form-control" id="nom" name="nom" style="width: 100%;height: 36px;" required="" />
                            <div class="valid-feedback">Ok!</div>
                            <div class="invalid-feedback">Entrez un nom</div>
                        </div>
                    </div>
                    <div class="form-group mb-3 row">
                        <div class="col-3" style="text-align:right;">
                            <label>Prénoms</label>
                        </div>
                        <div class="col-7">
                            <input class="form-control" id="prenom" name="prenom" style="width: 100%;height: 36px;" required="" />
                            <div class="valid-feedback">Ok!</div>
                            <div class="invalid-feedback">Entrez un prenom</div>
                        </div>
                    </div>
                    <div class="form-group mb-3 row">
                        <div class="col-3" style="text-align:right;">
                            <label>Email</label>
                        </div>
                        <div class="col-7">
                            <input class="form-control" id="email" name="email" style="width: 100%;height: 36px;" required="" />
                            <div class="valid-feedback">Ok!</div>
                            <div class="invalid-feedback">Entrez une adresse mail</div>
                        </div>
                    </div>
                    <div class="form-group mb-3 row">
                        <div class="col-3" style="text-align:right;">
                            <label>Téléphone</label>
                        </div>
                        <div class="col-7">
                            <input class="form-control" id="phone" name="phone" style="width: 100%;height: 36px;" required="" placeholder="+Indicatif du pays & numéro (+22994172879)" />
                            <div class="valid-feedback">Ok!</div>
                            <div class="invalid-feedback">Entrez un numéro de téléphone</div>
                        </div>
                    </div>
                    <div class="form-group mb-3 row">
                        <div class="col-3" style="text-align:right;">
                            <label>Code d'inscription</label>
                        </div>
                        <div class="col-5" style="display: -webkit-inline-box;">
                            <input type="text" class="form-control" name="inscripCode" id="inscrip-code" required readonly>
                            <button class="btn btn-danger" type="button" id="code"><i class="fa fa-check-circle"></i>Générer le code</button>
                        </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" id="valider">Valider</button>
                            <button class="btn btn-danger mt-3 rounded-pill px-4">Annuler</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/sweetalert2/dist/sweetalert2.all.min.js') }}"></script>
<script>
    // 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
            let forms = document.getElementsByClassName('needs-validation');
            // Loop over them and prevent submission
            let validation = Array.prototype.filter.call(forms, function(form) {
                form.addEventListener('submit', function(event) {
                    if($("#inscrip-code").val() == "")
                    {
                        event.preventDefault();
                        event.stopPropagation();
                        Swal.fire({
                            text: "Veuillez générer un code de pré-inscription!!!",
                            icon: 'error',
                            showConfirmButton: true,
                            confirmButtonColor: '#8cd4f5',
                            backdrop: `rgba(200,0,0,0.4)`
                        });
                    }

                    if (form.checkValidity() === false || $("#inscrip-code").val() == "") {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    else{
                        form.classList.add('is-validated');
                        let data = new FormData($("#authorization")[0]);
                        event.preventDefault();
                        event.stopPropagation();

                        Swal.fire({
                            text: 'En cours de traitement...',
                            didOpen: () => {
                                Swal.showLoading()
                            },
                            allowOutsideClick: false
                        });

                        $.ajax({
                            type: "POST",  
                            url: '{{route("etudiants.getInscription")}}',  
                            data: data,
                            processData: false,  // tell jQuery not to process the data
                            contentType: false ,  // tell jQuery not to set contentType
                            dataType: "json",       
                            success: function(data)  
                            {
                                Swal.fire({
                                    title: 'Saved...',
                                    text: 'Code sauvegardé avec succès!',
                                    icon: 'success',
                                    showConfirmButton: true,
                                    confirmButtonColor: '#8cd4f5',
                                    backdrop: `rgba(0,200,0,0.4)`
                                });	
                            }, 
                            complete: function() { 
                                //$('#decodeimage').html('<div class="form-group" id="decodeimage"><label class="control-label col-md-3">Reçu bank info</label><div class="col-md-6"><input name = "decode"  id = "decode" type = "text" class="form-control" readonly ></div></div>');	
                                // unblock when remote call returns 
                                $.unblockUI(); 
                            }, 
                            error: function(jqXHR, exception){
                                Swal.fire({
                                    title: 'Alert info',
                                    text: jqXHR.responseJSON.indice,//"À votre attention s'il vous plaît!!!",
                                    icon: 'error',
                                    showConfirmButton: true,
                                    confirmButtonColor: '#8cd4f5',
                                    backdrop: `rgba(200,0,0,0.4)`
                                });
                                		
                            }
                        });
                    }
                    form.classList.add('was-validated');
                }, false);
            });
        }, false);
    })();

    let btn = document.querySelector('#code');
    let conv= document.querySelector('#inscrip-code');
    btn.addEventListener('click',()=>{
        generate();
    });

    const generate = () =>{
        const computerchoices ='123456789';
            let n=computerchoices.length;
                let pass='';

                for(var i=0; i<9; i++){
                    let computerchoice=computerchoices[Math.floor(Math.random()*n)];
                    pass+=computerchoice;
                }

                conv.value=`${pass}`;
    }

    $("#valider").click(function() {
            if($('.needs-validation').hasClass("is-validated")){
                Swal.fire({
                    title: 'Saved...',
                    text: 'Code sauvegardé avec succès!',
                    icon: 'success',
                    showConfirmButton: true,
                    confirmButtonColor: '#8cd4f5',
                    backdrop: `rgba(0,0,200,0.4)`
                });
            }
        });
</script>
@endsection