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

{% block show %}

    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <form target="_blank"  action="{{ path('rapportNoteMatiereParClasse') }}" 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" class="myclasse-js form-control">
                                        </select>
                                    </div>
                                </div>
{#                                <div class="col-md-3 form-group" id="sonata-ba-field-container-matiere">#}
{#                                    <label class="control-label" for="matiere">{{ 'matiere' |trans}}</label>#}
{#                                    <div class="sonata-ba-field sonata-ba-field-standard-natural">#}
{#                                        <select id="matiere" name="matiere" class="mymatiere-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">{{ 'menu.Types_examen' |trans}}</label>#}
{#                                    <div class="sonata-ba-field sonata-ba-field-standard-natural">#}
{#                                        <select id="examenType" name="examenType" class="myexamenType-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_notes_js"
                                                name="btn_update_and_edit">
                                            <i class="fa fa-save" aria-hidden="true"></i>
                                            {{ 'menu.Listes_des_notes' | 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 id="titre-list" style="text-align: center">

                                                </div>
                                                <style>
                                                    {% if( app.request.locale and app.request.locale == 'ar_Tn')  %}

                                                    html{
                                                        direction: rtl;
                                                    }
                                                    {% endif %}

                                                    .rotate-text {
                                                        width: 25px;
                                                        writing-mode: vertical-rl;
                                                    }
                                                    .first-eleve-col{
                                                        width: 200px;
                                                    }
                                                    table {
                                                        border-collapse: collapse;
                                                    }
                                                    th {
                                                        background: #ccc;
                                                    }

                                                    th, td {
                                                        border: 1px solid #8a8a8a;
                                                        padding: 3px;
                                                        text-align: center !important;
                                                    }

                                                    tr:nth-child(even) {
                                                        background: #efefef;
                                                    }

                                                    tr:hover {
                                                        background: #d1d1d1;
                                                    }
                                                </style>

                                                <div class="table-responsive">
                                                    <table class="table table-bordered table-sm ">
                                                        <thead id="trHeader" class="thead-dark"></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="button" class="btn btn-success btn_list_notes_pdf_js" value="on"
                                name="btn_pdf">
                            <i class="fa fa-sticky-note-o"></i> {{ 'Export'|trans }}</button>
                    </div>
                </form>
            </div>

        </div>

    </div>
    <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();

            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', '.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();#}
            {#        $.each(data, function (key, value) {#}
            {#            $elexamenType.append($("<option></option>").attr("value", value).text(key));#}
            {#        });#}
            {#    })#}
            {#});#}

            $(document).on('click', '.btn_list_notes_js', function (e) {
                e.preventDefault();
                let data = {}
                data['classe'] = $('select.myclasse-js').val()
                data['matiere'] = $('select.mymatiere-js').val()
                data['examenType'] = $('select.myexamenType-js').val()
                data['annee'] = $('select.myannee-js').val()
                data['periode'] = $('select.myperiode-js').val()
                data['specialiteniveau'] = $('input.myspecialiteniveau-js').val()

                $.post('{{ path('getNoteByClasse') }}', data).then(function (data) {
                    let $titrelist = $('div#titre-list');
                    $titrelist.html('')
                    let titleText  = "";
                    titleText  += "<h3> أعداد الطلاب في الاختبارات</h3> <h3>  القسم"+ $('select.myclasse-js option:selected' ).text() +" الفترة "+$('select.myperiode-js option:selected' ).text()+"</h3> <br>";
                    $titrelist.append(titleText);

                    let $tt = $('thead#trHeader');
                    $tt.html('')
                    let $listNotes = $('tbody.liste_des_notes');
                    $listNotes.html('');
                    let headerText = "";
                    let listText = "";

                    console.log(data)
                    let headerEleves = "{{ 'admin.les_devoir.Nom_eleves'|trans }}" ;
                    let header = data ? data[0]['tabMatMoyenne'] : []



                    headerText +="<tr>";
                    headerText +="<td rowspan='3' class=' first-eleve-col' style='font-size: 30px'>"+headerEleves+"</td>";
                    $.each(header, function (key, value) {

                        headerText +="<td rowspan='"+value.rowNumber+"' colspan='"+value.colNumber+"' >"+value.nomMatiereParentAr+"</td>";
                    });
                    headerText += "</tr>";
                    headerText += "<tr>";

                    $.each(header, function (kk, row) {
                        if ( row.sousMatiereParent ){
                            $.each(row.sousMatiereParent, function (k, v) {
                                console.log(v)
                                headerText +="<td rowspan='"+v.rowNumber+"' colspan='"+v.colNumber+"' >"+v.nomSousMatiereParentAr+"</td>";
                            });
                        }

                    });
                    headerText += "</tr>";
                    headerText += "<tr>";

                    $.each(header, function (kk, row) {
                        if ( row.sousMatiere ){
                            $.each(row.sousMatiere, function (k, v) {
                                headerText +="<td rowspan='"+v.rowNumber+"' colspan='"+v.colNumber+"' class='rotate-text' >"+v.nomMatiereAr+"</td>";
                            });
                        }
                        if ( row.sousMatiereParent ){
                            $.each(row.sousMatiereParent, function (k, h) {
                                $.each(h.sousMatiere, function (k, vv) {
                                    headerText +="<td rowspan='"+vv.rowNumber+"' colspan='"+vv.colNumber+"'  class='rotate-text' >"+vv.nomMatiereAr+"</td>";
                                });
                            });
                        }

                    });
                    headerText += "</tr>";

                    $tt.append(headerText);



                    let listNotesEleves = data ? data : []

                    $.each(listNotesEleves, function (u, eleve) {
                        listText += "<tr>";

                        listText +="<td class='' >"+eleve.FullNameAr+"</td>"
                        $.each(eleve.tabMatMoyenne, function (kk, row) {
                            if ( row.sousMatiere ){
                                $.each(row.sousMatiere, function (k, v) {
                                    let green = ''
                                    if(v.moyenneSousMatiereMaxClasse === v.moyenneSousMatiere && v.moyenneSousMatiere !== 0){
                                        green = 'bg-success'
                                    }
                                    let red = ''
                                    if(v.moyenneSousMatiereMinClasse === v.moyenneSousMatiere && v.moyenneSousMatiere !== 0){
                                        red = 'bg-danger'
                                    }
                                    listText +="<td class='"+green +" "+red+"' >"+v.moyenneSousMatiere+"</td>";
                                });
                            }
                            if ( row.sousMatiereParent ){
                                $.each(row.sousMatiereParent, function (k, h) {
                                    $.each(h.sousMatiere, function (k, vv) {
                                        let green = ''
                                        if(vv.moyenneSousMatiereMaxClasse === vv.moyenneSousMatiere && vv.moyenneSousMatiere !== 0){
                                            green = 'bg-success'
                                        }
                                        let red = ''
                                        if(vv.moyenneSousMatiereMinClasse === vv.moyenneSousMatiere && vv.moyenneSousMatiere !== 0){
                                            red = 'bg-danger'
                                        }
                                        listText +="<td class='"+green +" "+red+"' >"+vv.moyenneSousMatiere+"</td>";
                                    });
                                });
                            }

                        });
                        listText += "</tr>";

                    });
                    $listNotes.append(listText);


                })

            });


            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');
                    });
                })
            })

            $(document).on('click', '.btn_list_notes_pdf_js', function (e){
                var prtContent = document.getElementById("notes");
                var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
                WinPrint.document.write(prtContent.innerHTML);
                WinPrint.document.close();
                WinPrint.focus();
                WinPrint.print();
            })

            WinPrint.close();
        });
    </script>
{% endblock %}