@extends('layouts.base', [
	"breadcrumb" => [  // see partials/breadcrumb.blade.php for default options
		"title" => "PARAMÈTRES DE DÉLIBÉRATION",
		// "showNav" => true,
		"nav" => [
			"Dashboard" => route("home"),
			"Paramètres de délibération" => "",
			],
		"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') }}">
    <style>
        .form-select{ 
			background-image:url({{asset('assets/images/custom-select.png')}});
		}
    </style>
@endsection

@section('title', "Paramètres de délibération| GestStudent Admin")

@section('content')
    @if(session()->has('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <strong>{{session('error')}}</strong>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="border-bottom title-part-padding">
                    <h3 class="box-title m-b-0">Paramètres</h3>
                    <p class="text-muted m-b-30 font-13"> Ce formulaire permet de renseigner les paramètres de délibération.</p>
                </div>
                <div class="card-body wizard-content">
                    <form action="{{route('etas.deliberationConfig')}}" class="validation-wizard wizard-circle mt-5"
                        id="deli-form"
                    >
                        <!-- Step 1 -->
                        <h6>Etape 1</h6>
                        <section>
                            <div class="row">
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <label> Note de rachat 1 </label>
                                    <div class="mb-3 input-group">
                                        <span class="input-group-text bg-light-secondary"><i class="icon-calculator"></i></span>
                                        <input type="number" class="form-control required" name="note_rachat_1" value="12" min="0">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <label> Note de requise 1 </label>
                                    <div class="mb-3 input-group">
                                        <span class="input-group-text bg-light-secondary"><i class="icon-calculator"></i></span>
                                        <input type="number" class="form-control required" name="note_requise_1" value="12" min="0">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <label> Note de rachat 2 </label>
                                    <div class="mb-3 input-group">
                                        <span class="input-group-text bg-light-secondary"><i class="icon-calculator"></i></span>
                                        <input type="number" class="form-control required" name="note_rachat_2" value="12" min="0">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <label> Note de requise 2 </label>
                                    <div class="mb-3 input-group">
                                        <span class="input-group-text bg-light-secondary"><i class="icon-calculator"></i></span>
                                        <input type="number" class="form-control required" name="note_requise_2" value="12" min="0">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <label> Note minimum requise pour l'EC </label>
                                    <div class="mb-3 input-group">
                                        <span class="input-group-text bg-light-secondary"><i class="icon-calculator"></i></span>
                                        <input type="number" class="form-control required" name="note_min_requise" value="4" min="0">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <label> Echelle </label>
                                    <div class="mb-3 input-group">
                                        <span class="input-group-text bg-light-secondary"><i class="icon-calculator"></i></span>
                                        <input type="number" class="form-control required" name="note_min_requise" value="20" min="0">
                                    </div>
                                </div>
                            </div>
                        </section>
                        <!-- Step 2 -->
                        <h6>Etape 2</h6>
                        <section>
                            <div class="row">
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <label> Poids contrôle continue </label>
                                    <div class="mb-3 input-group">
                                        <span class="input-group-text bg-light-secondary"><i class="icon-calculator"></i></span>
                                        <input type="number" class="form-control required" name="poids_control_cont" value="0.4" min="0" max="1" step="0.1">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <label> Poids examen </label>
                                    <div class="mb-3 input-group">
                                        <span class="input-group-text bg-light-secondary"><i class="icon-calculator"></i></span>
                                        <input type="number" class="form-control required" name="poids_exam" value="0.6" min="0" max="1" step="0.1">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <label> Pourcentage crédit (ENJ)  </label>
                                    <div class="mb-3 input-group">
                                        <span class="input-group-text bg-light-secondary"><i class="icon-calculator"></i></span>
                                        <input type="number" class="form-control required" name="percent_enj" value="80" min="0">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <label> Pourcentage crédit (Exclu) </label>
                                    <div class="mb-3 input-group">
                                        <span class="input-group-text bg-light-secondary"><i class="icon-calculator"></i></span>
                                        <input type="number" class="form-control required" name="percent_exclu" value="20" min="0">
                                    </div>
                                </div>
                            </div>
                        </section>
                        <!-- Step 3 -->
                        <h6>Etape 3</h6>
                        <section>
                            <div class="row">
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <label> Compteur max modif </label>
                                    <div class="mb-3 input-group">
                                        <span class="input-group-text bg-light-secondary"><i class="icon-calculator"></i></span>
                                        <input type="number" class="form-control required" name="compteur" value="4" min="0">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <label> Compteur max ue spécialité </label>
                                    <div class="mb-3 input-group">
                                        <span class="input-group-text bg-light-secondary"><i class="icon-calculator"></i></span>
                                        <input type="number" class="form-control required" name="max_ue" value="4" min="0">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <label> Compteur max redoublement </label>
                                    <div class="mb-3 input-group">
                                        <span class="input-group-text bg-light-secondary"><i class="icon-calculator"></i></span>
                                        <input type="number" class="form-control required" name="max_re" value="2" min="0">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <label> Compteur max enjembement </label>
                                    <div class="mb-3 input-group">
                                        <span class="input-group-text bg-light-secondary"><i class="icon-calculator"></i></span>
                                        <input type="number" class="form-control required" name="max_enjembement" value="2" min="0">
                                    </div>
                                </div>
                            </div>
                        </section>
                        <!-- Step 4 -->
                        <h6>Etape 4</h6>
                        <section>
                            <div class="row">
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <label> Mode calcul pourcentage crédit </label>
                                    <select class="form-select required" name="mode">
                                        <option value="1" selected>1</option>
                                        <option value="2">2</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <label> Type délibération </label>
                                    <select class="form-select required" name="typedeli">
                                        <option value="0">Pourcentage crédit</option>
                                        <option value="1">Pourcentage crédit/spécialité</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <label> Max EC / UE </label>
                                    <div class="mb-3 input-group">
                                        <span class="input-group-text bg-light-secondary"><i class="icon-calculator"></i></span>
                                        <input type="number" class="form-control required" name="max_ec" value="4" min="1">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3"></div>
                                <div class="col-md-6">
                                    <label> Activer délibération finale </label>
                                    <select class="form-select required" name="deli_finale">
                                        <option value="0" selected>NO</option>
                                        <option value="1">YES</option>
                                    </select>
                                </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>

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

        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) {
                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:
                        'Mise à jour des paramètres de délibération.',
                    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){
                                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: {
                
            }
        })


    </script>
@endsection