<script>
    //Creation classe
    $('#submitFormClasse').on('click', function(e) {
        $('#formClasse').validate({
            rules: {
                libelle: {
                    required: true,
                },
                type: {
                    required: true,
                }
            },
            messages: {
                libelle: {
                    required: "Donnez le libellé svp!",
                },
                type: {
                    required: "Choisissez un type svp!",
                },
            },
            submitHandler: function() {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: "/accueil/creationClasse",
                    type: "POST",
                    dataType: 'json',
                    beforeSend: function() {
                        $('#loader').removeClass('is-hidden')
                        $('*').css('pointer-events', 'none')
                    },
                    complete: function() { // Set our complete callback, adding the .hidden class and hiding the spinner.
                        $('#loader').addClass('is-hidden')
                        $('*').css('pointer-events', 'all')
                    },
                    data: {
                        libelle: $('#libelleClasseId').val(),
                        type: $('#typeId').val(),
                    },
                    success: function(response) {
                        if (response == true) {
                            $('#errorLibelle').html('Cette classe existe déjà');
                        } else {
                            window.location.replace('/accueil');
                        }
                    },
                    error: function(response) {
                        console.log(response);
                    }
                });
            }
        })
    });

    //Modifier Classe
    var classe_id = 0;
    var classe_libelle = '';
    var classe_type = '';

    function get_id_classe(id) {
        classe_id = id;
    }

    function get_libelle_classe(libelle) {
        classe_libelle = libelle;
        $('#nv_libelle_id').val(classe_libelle);
    }

    function get_type_classe(type) {
        classe_type = type;
        if (classe_type == 'Primaire') {
            $('#value_type_1').val('Primaire');
            $('#value_type_1').html('Primaire');
            $('#value_type_2').val('Secondaire');
            $('#value_type_2').html('Secondaire');
        } else {
            $('#value_type_1').val('Secondaire');
            $('#value_type_1').html('Secondaire');
            $('#value_type_2').val('Primaire');
            $('#value_type_2').html('Primaire');
        }
    }

    $('#submit_form_modifier_classe').on('click', function(e) {
        $('#form_modifier_classe').validate({
            rules: {
                nv_libelle: {
                    required: true,
                },
                nv_type: {
                    required: true,
                }
            },
            messages: {
                nv_libelle: {
                    required: "Donnez le libellé svp!",
                },
                nv_type: {
                    required: "Choisissez un type svp!",
                },
            },
            submitHandler: function() {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: "/accueil/modifierClasse",
                    type: "POST",
                    dataType: 'json',
                    beforeSend: function() {
                        $('#loader').removeClass('is-hidden')
                        $('*').css('pointer-events', 'none')
                    },
                    complete: function() { // Set our complete callback, adding the .hidden class and hiding the spinner.
                        $('#loader').addClass('is-hidden')
                        $('*').css('pointer-events', 'all')
                    },
                    data: {
                        classe_id: classe_id,
                        nv_libelle: $('#nv_libelle_id').val(),
                        nv_type: $('#nv_type_id').val(),
                    },
                    success: function(response) {
                        if (response == true) {
                            $('#errorNvLibelle').html('Cette classe existe déjà');
                            classe_id = "";
                        } else {
                            window.location.replace('/accueil');
                        }
                    },
                    error: function(response) {
                        console.log(response);
                    }
                });
            }
        })
    });

    //Supprimer classe
    $('.btn_supp_classe').on('click', function(e) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            url: "/accueil/supprimerClasse",
            type: "POST",
            dataType: 'json',
            beforeSend: function() {
                $('#loader').removeClass('is-hidden')
                $('*').css('pointer-events', 'none')
            },
            complete: function () { // Set our complete callback, adding the .hidden class and hiding the spinner.
                $('#loader').addClass('is-hidden')
                $('*').css('pointer-events', 'all')
            },
            data: {
                classe_id: classe_id,
            },
            success: function(response) {
                if (response) {
                    window.location.replace('/accueil');
                    classe_id = "";
                }
            },
            error: function(response) {
                console.log(response);
            }
        });
    });


    //ChartJs
    const labelsPrimaire = [
        @foreach ($classesPrimaires as $classePrimaire)
            '{{ $classePrimaire->libelle }}',
        @endForeach
    ];

    const dataPrimaire = {
        labels: labelsPrimaire,
        datasets: [{
            label: 'Classes Primaires',
            backgroundColor: 'rgb(62,142,208)',
            data: [
                @foreach ($moyennesClassesPrimaires as $moyenneClassePrimaire)
                    {{ $moyenneClassePrimaire }},
                @endForeach
            ],
        }]
    };

    const labelsSecondaire = [
        @foreach ($classesSecondaires as $classeSecondaire)
            '{{ $classeSecondaire->libelle }}',
        @endForeach
    ];

    const dataSecondaire = {
        labels: labelsSecondaire,
        datasets: [{
            label: 'Classes Secondaires',
            backgroundColor: 'rgb(62,142,208)',
            data: [
                @foreach ($moyennesClassesSecondaires as $moyenneClasseSecondaire)
                    {{ $moyenneClasseSecondaire }},
                @endForeach
            ],
        }]
    };

    const configPrimaire = {
        type: 'bar',
        data: dataPrimaire,
        options: {
            scales: {
                y: { // defining min and max so hiding the dataset does not change scale range
                    min: 0,
                    max: 10
                }
            }
        }
    };

    const configSecondiare = {
        type: 'bar',
        data: dataSecondaire,
        options: {
            scales: {
                y: { // defining min and max so hiding the dataset does not change scale range
                    min: 0,
                    max: 20
                }
            }
        }
    };

    const myChartPrimaire = new Chart(
        document.getElementById('myChartPrimaire'),
        configPrimaire
    );

    const myChartSecondaire = new Chart(
        document.getElementById('myChartSecondaire'),
        configSecondiare
    );
</script>
