{% extends 'admin/standard_layout.html.twig' %}

{% block show %}

    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <form action="{{ path('autoGenerateExam') }}" method="post">

                    <div class="col-md-12">
                        <div class="box box-primary">
                            <div class="box-header">
                                <h4 class="box-title">
                                    {{ 'filtrer'|trans }}
                                </h4>
                            </div>
                            <div class="box-body">
                                <div class="sonata-ba-collapsed-fields">
                                    <div class="col-md-3 form-group" id="sonata-ba-field-container-anneeScolaire">
                                        <label class="control-label" for="anneeScolaire">{{ 'menu.Annee_scolaire'|trans }}</label>
                                        <div class="sonata-ba-field sonata-ba-field-standard-natural">
                                            <select id="anneeScolaire" name="anneeScolaire" class="myannee-js form-control">
                                                {% for annee in annees %}
                                                    <option value="{{ annee.id }}">{{ annee.nom }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-3 form-group" id="sonata-ba-field-container-periode">
                                        <label class="control-label" for="periode">{{ 'admin.anneescolaire.periodes'|trans }}</label>
                                        <div class="sonata-ba-field sonata-ba-field-standard-natural">
                                            <select id="periode" name="periode" class="myperiode-js form-control">
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-3 form-group" id="sonata-ba-field-container-niveau">
                                        <label class="control-label" for="niveau">{{ 'menu.Niveau'|trans }}</label>
                                        <div class="sonata-ba-field sonata-ba-field-standard-natural">
                                            <select id="niveau" name="niveau" class="myniveau-js form-control">
                                                <option value="0" selected>{{ 'select_niveau'|trans }}</option>
                                                {% for niveau in niveaux %}
                                                    <option value="{{ niveau.id }}">{{ niveau.nomFr }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3 form-group" id="sonata-ba-field-container-specialite">

                                        <label class="control-label" for="specialite">{{ 'Specialite'|trans }}</label>

                                        <div class="sonata-ba-field sonata-ba-field-standard-natural">
                                            <select id="specialite" name="specialite" class="myspecialite-js form-control"></select>
                                        </div>
                                    </div>
                                    <input type="hidden" id="specialiteNiveau" name="specialiteNiveau" class="myspecialiteniveau-js form-control">
                                    <div class="col-md-3 form-group" id="sonata-ba-field-container-classe">
                                        <label class="control-label" for="classe">{{ 'admin.cours.classe' |trans}}</label>
                                        <div class="sonata-ba-field sonata-ba-field-standard-natural">
                                            <select id="classe" name="classe[]" multiple class="myclasse-js form-control">
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3 form-group" id="sonata-ba-field-container-examenType">
                                        <label class="control-label" for="examenType">&nbsp;</label>
                                        <div class="sonata-ba-field sonata-ba-field-standard-natural">
                                            <button type="submit" class="btn btn-success btn_list_eleves_js"
                                                    name="btn_update_and_edit">
                                                <i class="fa fa-save" aria-hidden="true"></i>
                                                {{ 'admin.les_devoir.Generer_les_Examens' | trans }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                </form>
            </div>

        </div>

    </div>
    <script type="text/javascript">

        $(document).ready(function () {
            let datat = {}
            {{ render(controller('App\\Controller\\SwitchAnneeScolaireController::lesAnneeJs')) }}
            datat['specialiteNiveau'] = $('input.myspecialiteniveau-js').val();
            datat['classe'] = $('select.myclasse-js').val();
            datat['specialite'] = $('select.myspecialite-js').val();
            datat['annee'] = $('select.myannee-js').val();

            //$('select.myspecialite-js option').remove();
            // $('select.myclasse-js option').remove();
            // alert($('input.myspecialiteniveau-js').val())
            if( $('input.myspecialiteniveau-js').val() !== '' ) {

                $.post('{{path('setSpecialiteAndNiveauAndClasseAjax')}}', datat).then(function (data) {
                    // console.log(data)
                    var $elsp = $("select.myspecialite-js");
                    var $elniv = $("select.myniveau-js");
                    var $elclasse = $("select.myclasse-js");
                    let $vvv = '';
                    let $ccc = '';
                    $.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 === '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.myspecialite-js option').remove();
                            // console.log(value)
                            $.each(value, function(key,val) {
                                $elclasse.append($("<option></option>").attr("value", val).text(key));
                            });
                        }
                    });
                    // debugger
                    $elsp.val($vvv);
                    $elclasse.val($ccc);
                })
            }

            $(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();
                data['specialiteniveau'] = $field.val();
                data['annee'] = $('select.myannee-js').val();

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

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

            {#$(document).on('click', '.btn_list_eleves_js', function (e) {#}
            {#    e.preventDefault();#}
            {#    let data = {}#}
            {#    data['classe'] = $('select.myclasse-js').val()#}
            {#    data['specialiteNiveau'] = $('input.myspecialiteniveau-js').val();#}
            {#    data['anneeScolaire'] = $('select.myannee-js').val();#}
            {#    data['periode'] = $('select.myperiode-js').val();#}

            {#    $.post('{{ path('autoGenerateExam') }}', data).then(function (data) {#}
            {#        let $tt = $('tbody.liste_des_notes');#}
            {#        let $nm = $('span#notMax');#}
            {#        $tt.html('');#}
            {#        if (data['nextYears'] === 'oui'){#}
            {#            $.each(data, function (key, value) {#}
            {#                if (key !== 'nextYears'){#}
            {#                    // console.log(value);#}
            {#                    let check = '';#}
            {#                    if(value['reussi'] === 'oui'){#}
            {#                        check = 'checked';#}
            {#                    }#}
            {#                    let opts = "<option value='0'>---------</option>";#}
            {#                    // if (value['nextClasses'].length > 0){#}
            {#                        console.log(value);#}
            {#                        $.each(value['nextClasses'], function(k,val) {#}
            {#                            opts += "<option value='"+k+"'>"+val+"</option>" ;#}
            {#                        });#}
            {#                    // }#}

            {#                    $tt.append("<tr>" +#}
            {#                        "<td><input type=\"checkbox\" id=\"reussi-"+key+"\" name=\"reussi["+key+"]\" "+check+">" +#}
            {#                        "<input type=\"hidden\" id=\"eleve-id-"+key+"\" name=\"eleve-id["+key+"]\" value=\""+key+"\">" +#}
            {#                        "<input type=\"hidden\" id=\"nsId-"+key+"\" name=\"nsId["+key+"]\" value=\""+value['nsId']+"\">" +#}
            {#                        "</td>"+#}
            {#                        "<td>"+value['eleve']+"</td>"+#}
            {#                        "<td>"+value['moyenneFinale']+"</td>"+#}
            {#                        "<td>"+value['remarque']+"</td>"+#}
            {#                        "<td>" +#}
            {#                        "<select class='form-control' name='classe-select["+key+"]' id='classe-select-"+key+"'>"+opts+#}
            {#                        "</select> </td></tr>");#}
            {#                }#}

            {#            });#}
            {#        }#}
            {#        else {#}
            {#            if (data['nextYears'] === 'non')#}
            {#                alert('Année scolaire suivant inexistante, veuillez en créer une.')#}
            {#            else if (data['nextYears'] === 'oh')#}
            {#                alert('Le passage de niveau est déjà effectué pour cette classe.')#}
            {#        }#}

            {#    })#}

            {#});#}

            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 %}