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

{% block show %}

    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <form action="{{ path('passageNiveau') }}" 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-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" 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.classe.Liste_des_eleves' | trans }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="box box-primary">
                            <div class="box-header">
                                <h4 class="box-title">
                                    {{ 'admin.les_devoir.Definissez_notes_eleves_classe'|trans }}
                                </h4>
                            </div>
                            <div class="box-body">
                                <div class="sonata-ba-collapsed-fields">

                                    <div id="sonata-ba-field-container-notes" class="form-group">

                                        <div class="sonata-ba-field sonata-ba-field-standard-natural">

                                            <div id="notes" class="">

                                                <div class="table-responsive">
                                                    <table class="table table-bordered table-sm ">
                                                        <thead class="thead-dark">

                                                        <tr class="bg-primary">
                                                            <th scope="col"> </th>
                                                            <th style="text-align: left" scope="col">   {{ 'admin.les_devoir.Nom_eleves'|trans }}</th>
                                                            <th scope="col">{{ 'admin.bulletin_eleve.Moyenne'|trans }}</th>
                                                            <th scope="col">{{ 'admin.les_devoir.Remarque'|trans }}</th>
                                                            <th scope="col">{{ 'classeSuivant'|trans }}</th>
                                                        </tr>

                                                        </thead>
                                                        <tbody class="liste_des_notes">

                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>


                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="sonata-ba-form-actions well well-small form-actions">
                        <button type="submit" class="btn btn-success btn_list_notes_pdf_js" value="on"
                                name="btn_passage">
                            <i class="fa fa-sticky-note-o"></i> {{ 'admin.service.valider'|trans }}</button>
                    </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()

                $.post('{{ path('getElevesOfClasse') }}', 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 = {};
                $("select.myspecialite-js").empty().trigger('change');
                {#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 %}