{% extends 'SonataAdminBundle:CRUD:edit.html.twig' %}

{#{% block formactions %}#}
{#    {{ parent() }}#}
{#    {{ dump(admin.subject) }}#}
{#    {% if admin.hasroute('edit') %}#}
{#        <a class="btn btn-success" href="{{ admin.generateObjectUrl('edit', object) }}">View</a>#}
{#    {% endif %}#}
{#{% endblock %}#}
{% block formactions %}
    <div class="sonata-ba-form-actions well well-small form-actions">
        {% block sonata_form_actions %}
            {% if objectId|default(admin.id(object)) is null %}
                {% if objectId|default(admin.id(object)) is null %}
                    {% if admin.hasroute('list') and admin.hasAccess('list') %}
                        <button type="submit" class="btn btn-success" name="btn_create_and_list">
                            <i class="fa fa-save"></i> <i class="fa fa-add" aria-hidden="true"></i>
                            {{ 'admin.les_devoir.Generer_les_Examens'|trans }}
                        </button>
                    {% endif %}
                {% endif %}
            {% endif %}
        {% endblock %}
    </div>
{% endblock formactions %}
{% block form %}

    {{ parent() }}

    <script type="text/javascript">
        {{ render(controller('App\\Controller\\SwitchAnneeScolaireController::lesAnneeJs')) }}

        $(document).ready(function () {
            let datat = {}
            datat['specialiteNiveau'] = $('input.myspecialiteniveau-js').val()
            datat['classe'] = $('select.myclasse-js').val()
            datat['specialite'] = $('select.myspecialite-js').val()
            datat['matiere'] = $('select.mymatiere-js').val()
            datat['examenType'] = $('select.myexamenType-js').val()
            datat['annee'] = $('select.myannee-js').val()
            datat['periode'] = $('select.myperiode-js').val()
            $('select.myspecialite-js option').remove();
            $('select.myclasse-js option').remove();
            $('select.mymatiere-js option').remove();
            $('select.myexamenType-js option').remove();


            const changeafterexamtype = () => {
                let $field = $('.myexamenType-js')
                // $('select.mymatiere-js').trigger('change');
                $("select.myexamenType-js > option").each(function () {
                    if ($field.val() === '0') {
                        $('div.div-examens-js .box-body tr.id_type_examen_' + this.value).show();
                        $('div.div-examens-js .box-body tr #custom-checkbox' + this.value).prop('checked', true);
                    } else {
                        if ($field.val() !== this.value) {
                            // alert(this.text + ' ' + this.value+' '+$field.val());
                            $('div.div-examens-js .box-body tr.id_type_examen_' + this.value).hide();
                            $('div.div-examens-js .box-body tr #custom-checkbox' + this.value).prop('checked', false);
                        }
                        if ($field.val() === this.value) {
                            // alert(this.text + ' ' + this.value+' '+$field.val());
                            $('div.div-examens-js .box-body tr.id_type_examen_' + this.value).show();
                            $('div.div-examens-js .box-body tr #custom-checkbox' + this.value).prop('checked', true);
                        }
                    }

                });
            }

            const changeAfterTtLaClasse = (selectval) => {
                let divBBoxBody = $("div.div-examens-js .box-body")
                divBBoxBody.html('');
                if (selectval === "1") {
                    // divBBoxBody.LoadingOverlay("show", {
                    //     direction: "column",
                    //     fade: [600, 300],
                    //     resizeInterval: 50
                    // });
                    let count = 0;
                    let ll = $('select.myclasse-js option:selected').length;
                    let lll =$('select.myexamenType-js option:gt(0)').length

                    let result = lll * ll;
                    $('select.myclasse-js option:selected').each(function () {
                        let idclasse = $(this).val();
                        let idgroupe = "nan";
                        let textclasse = $(this).text();
                        divBBoxBody.append("" +
                            "<h1> classe " + textclasse + " </h1>" +
                            "<table style='border-collapse: collapse;' id='custom-table-js" + idclasse + idgroupe + "'  class='table bordered-table'>" +
                            "<tr style='background-color: #c6c6c6;'>" +
                            "<td style='border: black solid 1px;'>{{'admin.les_devoir.Type_examen'|trans}}</td>" +
                            "<td style='border: black solid 1px;'>{{'admin.les_devoir.Salle_de_classe'|trans}}</td>" +
                            "<td style='border: black solid 1px;'>{{'admin.les_devoir.Date_examen'|trans}}</td>" +
                            "<td style='border: black solid 1px;'>{{'admin.les_devoir.Document'|trans}}</td></tr>" +
                            "</table>");

                        $('select.myexamenType-js option:gt(0)').each(function () {
                            let datae = {};
                            datae['examenType'] = $(this).val();
                            datae['idgroupe'] = idgroupe;
                            datae['idclasse'] = idclasse;
                            $.ajax({
                                url: "{{ path('ajoutDevoirMultiple') }}",
                                type: "POST",
                                data: datae,
                                success: function (datacc) {
                                    $("div.div-examens-js .box-body #custom-table-js" + idclasse + idgroupe).append(datacc);
                                    count++;
                                    console.log(lll,count,ll)
                                    if (result === count) {
                                        divBBoxBody.LoadingOverlay("hide");
                                        changeafterexamtype();
                                    }
                                }
                            });
                        });
                    })
                }
            }

            // console.log($('input.myspecialiteniveau-js').val() !== "")
            // debugger
            if ($('input.myspecialiteniveau-js').val() !== "") {

                $.post('{{ path('setSpecialiteAndNiveauAndClasseMatiereExamenTypeAjax') }}', datat).then(function (data) {
                    // console.log(data)
                    var $elsp = $("select.myspecialite-js");
                    var $elniv = $("select.myniveau-js");
                    var $elclasse = $("select.myclasse-js");
                    var $elmatiere = $("select.mymatiere-js");
                    let $vvv = '';
                    let $ccc = '';
                    let $mmm = '';
                    let $eee = '';
                    $.each(data, function (key, value) {
                        if (key === 'niveau') {
                            $elniv.val(value);
                        }
                        if (key === 'specialiteid') {
                            $vvv = value
                            $elsp.val(value);
                        }
                        if (key === 'classeid') {
                            $ccc = value
                            $elclasse.val(value);
                        }
                        if (key === 'matiereid') {
                            $mmm = value
                            $elmatiere.val(value);
                        }
                        if (key === 'examenTypeid') {
                            $eee = value
                            $elexamenType.val(value);
                        }
                        if (key === 'specialite') {
                            $('select.myspecialite-js option').remove();
                            // console.log(value)
                            $.each(value, function (key, val) {
                                $elsp.append($("<option></option>").attr("value", val).text(key));
                            });
                        }
                        if (key === 'classes') {
                            $('select.myclasse-js option').remove();
                            // console.log(value)
                            $.each(value, function (key, val) {
                                $elclasse.append($("<option></option>").attr("value", val).text(key));
                            });
                        }
                        if (key === 'matieres') {
                            $('select.mymatiere-js option').remove();
                            // console.log(value)
                            $.each(value, function (key, val) {
                                $elmatiere.append($("<option></option>").attr("value", val).text(key));
                            });
                        }
                        if (key === 'examenTypes') {
                            $('select.myexamenType-js option').remove();
                            // console.log(value)
                            $.each(value, function (key, val) {
                                $elexamenType.append($("<option></option>").attr("value", val).text(key));
                            });
                        }
                    });
                    $elsp.val($vvv);
                    $elclasse.val($ccc);
                    $elmatiere.val($mmm);
                    $elexamenType.val($eee);
                })
            }

            $(document).on('change', 'select.pour_tout_les_groupes', function () {
                if ($("select.pour_tout_les_groupes").val() === '1') {
                    $('select.mygroupe-js').trigger('change.select2');
                    $("select.mygroupe-js > option").prop("selected", "selected");
                    $('select.mygroupe-js').trigger('change.select2');
                } else {
                    $(".mygroupe-js > option").removeAttr("selected");
                    $('select.mygroupe-js').trigger("change");
                }
            });

            $(document).on('change', '.myniveau-js', function () {
                let $field = $(this)
                let data = {}

                $('select.myspecialite-js option').remove();
                data['niveau'] = $field.val()

                $.post('{{ path('getSpecialiteByNiveauAjax') }}', data).then(function (data) {

                    var $el = $("select.myspecialite-js");
                    // $el.empty(); // remove old options
                    $('select.myspecialite-js option:gt(0)').remove();
                    $.each(data, function (key, value) {
                        $el.append($("<option></option>").attr("value", value).text(key));
                    });
                    $el.trigger('change');
                })
            })

            $(document).on('change', '.myspecialite-js', function () {
                var $eld = $("select.myniveau-js");
                let $field = $(this)
                let data = {}

                data['niveau'] = $eld.val()
                data['specialite'] = $field.val()

                $.post('{{ path('getSpecialiteNiveauAjax') }}', data).then(function (data) {

                    var $ell = $("input.myspecialiteniveau-js");
                    $.each(data, function (key, value) {
                        $ell.attr("value", value).trigger('change');
                    });

                })
            })

            $(document).on('change', '.myspecialiteniveau-js', function () {
                let $field = $(this)
                let data = {}

                $('select.myclasse-js option').remove();
                $('select.mymatiere-js option').remove();
                data['specialiteniveau'] = $field.val()
                data['annee'] = $('select.myannee-js').val()
                data['periode'] = $('select.myperiode-js').val()

                // debugger
                $.post('{{ path('getClasseAndMatiereBySpecialiteNiveauAjax') }}', data).then(function (data) {

                    var $elclasseee = $("select.myclasse-js");
                    var $elmatiereee = $("select.mymatiere-js");

                    $('select.myclasse-js option:gt(0)').remove();
                    $('select.mymatiere-js option:gt(0)').remove();

                    $.each(data, function (key, value) {
                        if (key === 'classes') {
                            $('select.myclasse-js option').remove();
                            $.each(value, function (key, val) {
                                $elclasseee.append($("<option></option>").attr("value", val).text(key));
                            });
                            $('select.myclasse-js').trigger('change');
                        }
                        if (key === 'matieres') {
                            $('select.mymatiere-js option').remove();
                            $.each(value, function (key, val) {
                                $elmatiereee.append($("<option></option>").attr("value", val).text(key));
                            });
                            $('select.mymatiere-js').trigger('change');

                        }
                    });
                    // $el.empty(); // remove old options
                    // $.each(data, function(key,value) {
                    //     $el.append($("<option></option>").attr("value", value).text(key)) ;
                    // });
                })
            });

            $(document).on('change', '.mymatiere-js', function () {
                let $field = $(this)
                let data = {}
                let datac = {}

                $('select.myexamenType-js option').remove();
                data['matiere'] = $field.val()
                data['annee'] = $('select.myannee-js').val()
                data['periode'] = $('select.myperiode-js').val()
                data['specialiteniveau'] = $('input.myspecialiteniveau-js').val()

                $.post('{{ path('getExamenTypeByMatiereAjax') }}', data).then(function (data) {
                    var $elexamenType = $("select.myexamenType-js");
                    $('select.myexamenType-js option').remove();
                    $elexamenType.append($("<option></option>").attr("value", '0').text('{{'admin.les_devoir.tout_les_examen'|trans}}'));
                    $.each(data, function (key, value) {
                        $elexamenType.append($("<option></option>").attr("value", value).text(key));
                    });
                })
            });

            $(document).on('change.select2', '.mygroupe-js', function () {
                let divBoxBody = $("div.div-examens-js .box-body");
                divBoxBody.html('');

                // divBoxBody.LoadingOverlay("show", {
                //     direction: "column",
                //     fade: [600, 300],
                //     resizeInterval: 50
                // });

                let count = 1;
                let ll = $('select.myclasse-js option:selected').length;
                let lll =$('select.myexamenType-js option:gt(0)').length
                let llll =$('select.mygroupe-js option:selected').length

                if (llll === 0 && $("select.pour_tout_les_groupes").val() === '0'){
                    // divBoxBody.LoadingOverlay("hide");
                }
                let result = llll * lll * ll;
                $('select.myclasse-js option:selected').each(function () {

                    let idclasse = $(this).val();
                    let textclasse = $(this).text();
                    $('select.mygroupe-js option:selected').each(function () {

                        let idgroupe = $(this).val();
                        divBoxBody.append("" +
                            "<h1> classe " + textclasse + " " + $(this).text() + " </h1>" +
                            "<table style='border-collapse: collapse;' id='custom-table-js" + idclasse + idgroupe + "'  class='table bordered-table'>" +
                            "<tr style='background-color: #c6c6c6;'>" +
                            "<td style='border: black solid 1px;'>{{'admin.les_devoir.Type_examen'|trans}}</td>" +
                            "<td style='border: black solid 1px;'>{{'admin.les_devoir.Salle_de_classe'|trans}}</td>" +
                            "<td style='border: black solid 1px;'>{{'admin.les_devoir.Date_examen'|trans}}</td>" +
                            "<td style='border: black solid 1px;'>{{'admin.les_devoir.Document'|trans}}</td></tr>" +
                            "</table>");

                        $('select.myexamenType-js option:gt(0)').each(function () {
                            let datae = {};
                            datae['examenType'] = $(this).val();
                            datae['idgroupe'] = idgroupe;
                            datae['idclasse'] = idclasse;

                            $.ajax({
                                url: "{{ path('ajoutDevoirMultiple') }}",
                                type: "POST",
                                data: datae,
                                success: function (datacc) {
                                    console.log(result , count)
                                    $("div.div-examens-js .box-body #custom-table-js" + idclasse + idgroupe).append(datacc);
                                    count++;
                                    // console.log(lll,ll,llll,count)
                                    if (result === count) {
                                        changeafterexamtype();
                                        // divBoxBody.LoadingOverlay("hide");
                                    }
                                }
                            });
                        });
                    });
                });

            });

            $(document).on('change', 'select.pour_tout_la_classes', function () {
                changeAfterTtLaClasse($(this).val());
            });

            $(document).on('change', '.myexamenType-js', function () {
                changeafterexamtype();
            });

            if ($('select.myannee-js').val() !== null) {
                let val = $('select.myannee-js').val();
                let data = {};
                let valp = null;
                if ($('select.myperiode-js').val() !== null) {
                    valp = $('select.myperiode-js').val();
                }

                // var $eld = $("select.myspecialite-js");
                // $eld.empty().trigger('change'); // remove old options
                $('select.myperiode-js option').remove();
                data['annee'] = val;
                $.post('{{ path('getPeriodeByAnneeAjax') }}', data).then(function (data) {

                    var $el = $("select.myperiode-js");
                    // $el.empty(); // remove old options
                    $('select.myperiode-js-js option:gt(0)').remove();
                    $.each(data, function (key, value) {
                        $el.append($("<option></option>").attr("value", value).text(key)).trigger('change');
                    });
                });

                if (valp !== null) {
                    console.log(valp.toString());
                    $('select.myperiode-js').val(valp.toString()).trigger('change');
                }
            } else
                $('select.myperiode-js option').remove();

            $(document).on('change', '.myannee-js', function () {
                let $field = $(this);
                let id_token = $field.attr('id').replace('_anneeScolaire', '');
                // console.log(id_token);

                let data = {};

                // var $eld = $("select.myspecialite-js");
                // $eld.empty().trigger('change'); // remove old options
                $('select.myperiode-js option').remove();
                data['annee'] = $field.val();

                $.post('{{ path('getPeriodeByAnneeAjax') }}', data).then(function (data) {

                    var $el = $("select.myperiode-js");
                    // $el.empty(); // remove old options
                    $('select.myperiode-js-js option:gt(0)').remove();
                    $.each(data, function (key, value) {
                        $el.append($("<option></option>").attr("value", value).text(key)).trigger('change');
                    });
                })
            })
        });
    </script>
{% endblock %}