@extends('layouts.base', [
	"breadcrumb" => [  // see partials/breadcrumb.blade.php for default options
		"title" => "AFFECTER UNE FILIERE/UE",
		// "showNav" => true,
		"nav" => [
			"Dashboard" => route("home"),
			"Affecter une filière/ue" => "",
			],
		"btnText" => "GestStudent v17.04",
	]
])

@section('css')
    <link rel="stylesheet" href="{{ asset('assets/libs/jquery-steps/jquery.steps.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/libs/jquery-steps/steps.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('title', "Affecter une filière/ue | GestStudent Admin")

@section('content')
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <div class="card border border-primary">
                <div class="border-bottom border-primary title-part-padding">
                    <h4 class="box-title m-b-0">Affectation de filière ou UE</h4>
                    <p class="text-muted m-b-30 font-13"> Ce formulaire permet d'affecter une filière ou une UE à un utilisateur.</p>
                </div>
                <div class="card-body wizard-content">
                    <form action="{{route('users.affectField', $matricule)}}" method="post" class="validation-wizard wizard-circle mt-5">
                        <!-- Step 1 -->
                        <h6>Première étape</h6>
                        <section>
                            <div class="row mb-4">
                                <div class="col-md-12">
                                    <label>Filières: *</label>
                                    <div>
                                        <select class="form-control" multiple="multiple" name="field[]" 
                                            id="fields" style="width: 100%;height: 36px;" 
                                            required="" data-url="{{route('filieres.unites')}}"
                                        >
                                            @foreach ($filieres as $fil)
                                                <option value="{{$fil->idFiliere}}" {{in_array($fil->idFiliere, $userFilieres) ? 'selected' : ''}}>
                                                    {{$fil->intituleFilieres . '(' . $fil->sigleFilieres .')'}}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </section>
                        <!-- Step 2 -->
                        <h6>Deuxième étape</h6>
                        <section>
                            <div class="row mb-4">
                                <div class="col-md-12">
                                    <label>UE: *</label>
                                    <div>
                                        <select class="form-control" multiple="multiple" name="ue[]" 
                                            id="ues" style="width: 100%;height: 36px;" 
                                            required="" disabled
                                        >
                                            <option value=""></option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ asset('assets/libs/jquery-steps/build/jquery.steps.min.js') }}"></script>
    <script src="{{ asset('assets/libs/jquery-validation/dist/jquery.validate.min.js') }}"></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>

        // Validation wizard
        var form = $(".validation-wizard").show();

        $(".validation-wizard").steps({
            headerTag: "h6",
            bodyTag: "section",
            transitionEffect: "fade",
            titleTemplate: '<span class="step">#index#</span> #title#',
            labels: {
                finish: "Submit"
            },
            onStepChanging: function(event, currentIndex, newIndex) {
                if(currentIndex == 0) {
                    $("#ues").empty();
                    $("#ues").attr("disabled", true);
                    findUE();
                }
                return currentIndex > newIndex || !(3 === newIndex && Number($("#age-2").val()) < 18) && (currentIndex < newIndex && (form.find(".body:eq(" + newIndex + ") label.error").remove(), form.find(".body:eq(" + newIndex + ") .error").removeClass("error")), form.validate().settings.ignore = ":disabled,:hidden", form.valid())
            },
            onFinishing: function(event, currentIndex) {
                return form.validate().settings.ignore = ":disabled", form.valid()
            },
            onFinished: function(event, currentIndex) {

                // 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();
                            }
                        })
                    }
                })
            }
        }), 
        $(".validation-wizard").validate({
            ignore: "input[type=hidden]",
            errorClass: "text-danger",
            successClass: "text-success",
            highlight: function(element, errorClass) {
                $(element).removeClass(errorClass)
            },
            unhighlight: function(element, errorClass) {
                $(element).removeClass(errorClass)
            },
            errorPlacement: function(error, element) {
                error.insertAfter(element)
            },
            rules: {
                email: {
                    email: !0
                }
            },
            messages: {
                field:"Ce champ est requis",
                ue:"Ce champ est requis",
            }
        })

        // Select 2
        $("#fields").select2({
            placeholder: "Sélectionner la filière",
        });

        $("#ues").select2({
            placeholder: "Sélectionner une UE",
        });

    </script>

    <script>
        function findUE()
        {
            let fieldIds = $("#fields").val();
            let url = $("#fields").attr("data-url");

            // Requete AJAX
            return fetch(url,{
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Content-Type': 'application/json' 
                },
                body: JSON.stringify(fieldIds)
            })
            .then(response => response.json())
            .then(response => {
                if(response.success == true){
                    // debugger
                    $("#ues").select2({
                        placeholder: "Sélectionner une UE",
                        data: response.data
                    });

                    $("#ues").attr("disabled", false);
                }else{
                    swalWithBootstrapButtons.fire(
                        'Impossible de charger les données!',
                        'Veuillez sélectionner à nouveau une filière.',
                        'error'
                    )
                }
            })
        }
    </script>
@endsection