@extends('layout.template')

@section('title', 'GestStudent')

@section('title2')
    ENCODAGE DES FRAIS DE SCOLARITÉS
@endsection

@section('subtitle')
    Scolarité
@endsection

@section('main')
    <div id="main-wrapper">

        <div class="container-fluid page-content">

            <div class="row">
                <div class="col-12" style="display:flex;justify-content: center;margin-top:5%; margin-bottom:5rem;">
                    <div class="card" style="width:80%">
                        <div class="card-body">
                            <form id="example-form" action="#" class="mt-5 form-horizontal" method="">
                                <div>
                                    <h3>GENERALE</h3>
                                    <section style="background-color:white;">
                                        <div class="input-group mb-3"
                                            style="display:flex !important; justify-content:center">
                                            <label for="academique" class="control-label col-form-label"
                                                style="width:25%;display: inline-block;">Année Académique</label>
                                            <select name="academique" id="academique" class="form-select"
                                                data-fv-field="academique" style="display: inline-block;"
                                                onchange="valider(this);">
                                                <option data-tokens="ketchup mustard" value="{{ $acad }}">
                                                    {{ $acad }}</option>
                                            </select>
                                        </div>
                                        <div class="input-group mb-3"
                                            style="display:flex !important; justify-content:center">
                                            <label for="filiere" class="control-label col-form-label"
                                                style="width:25%;display: inline-block;">Filière</label>
                                            <select name="filiere" id="filiere" class="form-select required"
                                                data-fv-field="filieres" style="display: inline-block;"
                                                onchange="valider(this);">
                                                <option data-tokens="ketchup mustard" value="" selected>Sélectionner
                                                    la filière</option>
                                                @foreach ($filieres as $filiere)
                                                    <option value="{{ $filiere->idFiliere }}">
                                                        {{ $filiere->intituleFilieres }}({{ $filiere->sigleFilieres }})
                                                    </option>
                                                @endforeach
                                            </select>
                                            <div class="invalid-feedback" style="text-align: center">Veuillez remplir ce
                                                champ!</div>
                                        </div>
                                        <div class="input-group mb-3"
                                            style="display:flex !important; justify-content:center">
                                            <label for="annee" class="control-label col-form-label"
                                                style="width:25%;display: inline-block;">Année d'étude</label>
                                            <select name="annee" id="annee"
                                                class="form-select form-select2 required" data-fv-field="annee"
                                                style="display: inline-block;" onchange="valider(this);">
                                                <option value="">Sélectionner l'année d'étude</option>
                                                @foreach ($annees as $annee)
                                                    <option value="{{ $annee->id }}">{{ $annee->annee_etude }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <div class="invalid-feedback" style="text-align: center">Veuillez remplir ce
                                                champ!</div>
                                        </div>
                                        <div class="input-group mb-3"
                                            style="display:flex !important; justify-content:center">
                                            <label for="fraisInscription" class="control-label col-form-label "
                                                style="width:25%;display: inline-block;">Frais d'inscription</label>
                                            <span class="input-group-text"><i class="ti-credit-card"></i></span>
                                            <input id="fraisInscription" type="number" step="any" min="0"
                                                name="fraisInscription" class="form-control2 required"
                                                placeholder="Frais d'inscription"
                                                style="width:100% !important;display: inline-block; max-width:36.9%;"
                                                oninput="valider(this);">
                                            <div class="invalid-feedback" style="text-align: center">Veuillez remplir ce
                                                champ!</div>
                                        </div>
                                    </section>

                                    <h3>FRAIS DE FORMATION</h3>

                                    <section style="background-color:white;">
                                        <div class="input-group mb-3"
                                            style="display:flex !important; justify-content:center;">
                                            <label for="statut" class="control-label col-form-label"
                                                style="width:25%;display: inline-block;">Statut</label>
                                            <select name="statut" id="statut" class="form-select required"
                                                required="" data-fv-field="academique"
                                                style="display: inline-block;width: 100%; max-width: 43.3%;"
                                                onchange="valider(this);">
                                                <option data-tokens="ketchup mustard" value="">Sélectionner le
                                                    statut</option>
                                                @foreach ($statuts as $statut)
                                                    <option value="{{ $statut->idStatut }}">
                                                        {{ $statut->intitule }}[{{ $statut->statut }}]</option>
                                                @endforeach
                                            </select>
                                            <div class="invalid-feedback" style="text-align: center">Veuillez remplir ce
                                                champ!</div>
                                        </div>
                                        <div class="input-group mb-3"
                                            style="display:flex !important; justify-content:center">
                                            <label for="montant" class="control-label col-form-label"
                                                style="width:25%;display: inline-block;">Montant</label>
                                            <span class="input-group-text"><i class="ti-credit-card"></i></span>
                                            <input id="montant" type="number" step="any" min="0"
                                                name="montant" class="form-control2 required"
                                                placeholder="Montant global de la formation"
                                                style="width:50%;display: inline-block;" oninput="valider(this);">
                                            <small class="help-block" data-fv-validator="notEmpty" data-fv-for="annee"
                                                data-fv-result="INVALID" style="display:none;">Entrez une valeur</small>
                                            <div class="invalid-feedback" style="text-align: center">Veuillez remplir ce
                                                champ!</div>
                                        </div>
                                        <div class="input-group mb-3"
                                            style="display:flex !important; justify-content:center">
                                            <label for="tranche1" class="control-label col-form-label"
                                                style="width:25%;display: inline-block;">Tranche 1</label>
                                            <span class="input-group-text"><i class="ti-credit-card"></i></span>
                                            <input id="tranche1" type="number" step="any" min="0"
                                                name="tranche1" class="form-control2 required"
                                                placeholder="Première tranche" style="width:50%;display: inline-block;"
                                                oninput="valider(this);">
                                            <small class="help-block" data-fv-validator="notEmpty" data-fv-for="annee"
                                                data-fv-result="INVALID" style="display:none;">Entrez une valeur</small>
                                            <div class="invalid-feedback" style="text-align: center">Veuillez remplir ce
                                                champ!</div>
                                        </div>
                                        <div class="input-group mb-3"
                                            style="display:flex !important; justify-content:center">
                                            <label for="tranche2" class="control-label col-form-label"
                                                style="width:25%;display: inline-block;">Tranche 2</label>
                                            <span class="input-group-text"><i class="ti-credit-card"></i></span>
                                            <input id="tranche2" type="number" step="any" min="0"
                                                name="tranche2" class="form-control2 required"
                                                placeholder="Deuxième tranche" style="width:50%;display: inline-block;"
                                                oninput="valider(this);">
                                            <div class="invalid-feedback" style="text-align: center">Veuillez remplir ce
                                                champ!</div>
                                        </div>
                                        <div class="input-group mb-3"
                                            style="display:flex !important; justify-content:center">
                                            <label for="tranche3" class="control-label col-form-label"
                                                style="width:25%;display: inline-block;">Tranche 3</label>
                                            <span class="input-group-text"><i class="ti-credit-card"></i></span>
                                            <input id="tranche3" type="number" step="any" min="0"
                                                name="tranche3" class="form-control2 required"
                                                placeholder="Troisième tranche" style="width:50%;display: inline-block;"
                                                oninput="valider(this);">
                                            <div class="invalid-feedback" style="text-align: center">Veuillez remplir ce
                                                champ!</div>
                                        </div>
                                        <div class="input-group mb-3"
                                            style="display:flex !important; justify-content:center">
                                            <label for="tranche4" class="control-label col-form-label"
                                                style="width:25%;display: inline-block;">Tranche 4</label>
                                            <span class="input-group-text"><i class="ti-credit-card"></i></span>
                                            <input id="tranche4" type="number" step="any" min="0"
                                                name="tranche4" class="form-control2 required"
                                                placeholder="Quatrième tranche" style="width:50%;display: inline-block;"
                                                oninput="valider(this);">
                                            <div class="invalid-feedback" style="text-align: center">Veuillez remplir ce
                                                champ!</div>
                                        </div>
                                    </section>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

    </body>

    </html>
@endsection
@section('script')
    <script src="/assets/libs/jquery-steps/build/jquery.steps.min.js"></script>
    <script src="/assets/libs/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="{{ asset('dist/js/jquery.blockUI.js') }}"></script>
    <script type="text/javascript">
        let request = async () => {
            let url = "{{ route('insert.scol') }}";
            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({
                    fraisInscription: $("#fraisInscription").val(),
                    academique: $("#academique").val(),
                    annee: $("#annee").val(),
                    filiere: $("#filiere").val(),
                    statut: $("#statut").val(),
                    tranche1: $("#tranche1").val(),
                    tranche2: $("#tranche2").val(),
                    tranche3: $("#tranche3").val(),
                    tranche4: $("#tranche4").val()
                }),
            };


            await fetch(url, options)
                .then((response) => response.json())
                .then((response) => {
                    if (response.success) {
                        $.unblockUI()
                        Swal.fire(
                            'Modification enregistrée!',
                            "Vos modifications ont été enregistrées avec succès",
                            'success'
                        )
                    } else {
                        $.unblockUI()
                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: 'Une erreure s\'est produite !!!',
                            footer: ''
                        })
                    }
                })
                .catch((e) => {
                    Swal.fire({
                        icon: 'error',
                        title: 'Une erreure s\'est produite !!!...',
                        text: e,
                        footer: ''
                    })
                    console.log(e);
                });
        }
        var form = $("#example-form");
        form.validate({
            errorPlacement: function errorPlacement(error, element) {
                element.before(error);
            },
            rules: {
                confirm: {
                    equalTo: "#password"
                }
            }
        });
        form.children("div").steps({
            headerTag: "h3",
            bodyTag: "section",
            transitionEffect: "slideLeft",
            onStepChanging: function(event, currentIndex, newIndex) {
                if (currentIndex > newIndex) {
                    return true;
                }
                if (currentIndex < newIndex) {
                    form.find(".body:eq(" + newIndex + ") label.error").remove();
                    form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
                }
                form.validate().settings.ignore = ":disabled,:hidden";
                if (!form.valid()) {
                    !$("#filiere").val() ? $("#filiere").addClass('is-invalid') : null;
                    !$("#annee").val() ? $("#annee").addClass('is-invalid') : null;
                    !$("#fraisInscription").val() ? $("#fraisInscription").addClass('is-invalid') : null;
                } else {
                    $("#filiere").removeClass('is-invalid');
                    $("#annee").removeClass('is-invalid');
                    $("#fraisInscription").removeClass('is-invalid');
                    return form.valid();
                }

            },
            onFinishing: function(event, currentIndex) {
                form.validate().settings.ignore = ":disabled";
                if (!form.valid()) {
                    !$("#statut").val() ? $("#statut").addClass('is-invalid') : null;
                    !$("#academique").val() ? $("#academique").addClass('is-invalid') : null;
                    !$("#montant").val() ? $("#montant").addClass('is-invalid') : null;
                    !$("#tranche1").val() ? $("#tranche1").addClass('is-invalid') : null;
                    !$("#tranche2").val() ? $("#tranche2").addClass('is-invalid') : null;
                    !$("#tranche3").val() ? $("#tranche3").addClass('is-invalid') : null;
                    !$("#tranche4").val() ? $("#tranche4").addClass('is-invalid') : null;
                } else {
                    $("#statut").removeClass('is-invalid');
                    $("#academique").removeClass('is-invalid');
                    $("#montant").removeClass('is-invalid');
                    $("#tranche1").removeClass('is-invalid');
                    $("#tranche2").removeClass('is-invalid');
                    $("#tranche3").removeClass('is-invalid');
                    $("#tranche4").removeClass('is-invalid');
                    return form.valid();
                }
            },
            onFinished: function(event, currentIndex) {

                Swal.fire({
                    title: '<strong>Confirmer l\'opération!!!</strong>',
                    text: 'Cette opération ajoutera les frais de formation dans la base de données du système.',
                    icon: 'info',
                    showCancelButton: true,
                    confirmButtonColor: 'rgb(236, 108, 98)',
                    cancelButtonColor: '#C1C1C1',
                    cancelButtonText: 'Annuler',
                    reverseButtons: true,
                    confirmButtonText: 'Confirmer l\'opération',
                    backdrop: true,
                    preConfirm: () => {
                        if (Number($("#montant").val()) != Number($("#tranche1").val()) + Number($(
                                "#tranche2").val()) + Number($("#tranche3").val()) + Number($(
                                "#tranche4").val())) {

                            var sum = Number($("#tranche1").val()) + Number($("#tranche2").val()) +
                                Number($("#tranche3").val()) + Number($("#tranche4").val())
                            throw new Error(
                                `La somme des tranches (${sum}) ne correspond pas au montant global(${$("#montant").val()})`
                                );

                        } else {
                            let url = "{{ route('insert.scol') }}";
                            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({
                                    fraisInscription: $("#fraisInscription").val(),
                                    academique: $("#academique").val(),
                                    annee: $("#annee").val(),
                                    filiere: $("#filiere").val(),
                                    statut: $("#statut").val(),
                                    tranche1: $("#tranche1").val(),
                                    tranche2: $("#tranche2").val(),
                                    tranche3: $("#tranche3").val(),
                                    tranche4: $("#tranche4").val()
                                }),
                            };
                            return fetch(url, options)
                                .then((response) => response.json())
                                .then((response) => {
                                    console.log(response);
                                    if (!response.success) {
                                        throw new Error("L'opération à échoué");
                                    };
                                })
                                .catch((e) => {
                                    console.log(e);
                                    throw new Error("L'opération à échoué");
                                });
                        }

                    },
                    allowOutsideClick: () => !Swal.isLoading(),
                    showLoaderOnConfirm: true
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire(
                            'Modification enregistrée!',
                            "Vos modifications ont été enregistrées avec succès",
                            'success'
                        );
                        window.location.replace("{{ route('insert') }}");
                    }

                }).catch((e) => {
                    console.log(e);
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: e,
                        footer: ''
                    })
                });
            }
        });
    </script>
@endsection