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

{% block show %}

    <div class="row">
        <div class="col-md-12">
            <div class="row">

                <form target="_blank"  action="{{ path('getEcheanceEleveXlsx') }}" method="post">

                    <div class="col-md-12">
                        <div class="box box-primary">
                            <div class="box-header">
                                <h4 class="box-title">
                                    {{ "admin.service.filtreserv"|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-eleves">
                                        <label class="control-label" for="user">{{ "menu.Services"|trans }}</label>
                                        <div class="sonata-ba-field sonata-ba-field-standard-natural">
                                            <select id="user" name="service" class="myserice-js form-control">
                                                <option value="0"> {{ 'Tous' |trans }}</option>

                                                {% for service in services %}
                                                    <option value="{{ service.id }}">{{ service.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>


                                    <div class="col-md-3 form-group" id="sonata-ba-field-container-eleves">
                                        <label class="control-label" for="user">{{ "admin.service.ech"|trans }}</label>
                                        <div class="sonata-ba-field sonata-ba-field-standard-natural">
                                            <select id="user" name="ech" class="myech-js form-control">
                                                <option value="0"> {{ 'Tous' |trans }}</option>
                                                {% for ech in allech %}
                                                    <option value="{{ ech.id }}">{{ ech.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-3 form-group" id="sonata-ba-field-container-eleves">
                                        <label class="control-label" for="user">{{ "admin.cours.eleve"|trans }}</label>
                                        <div class="sonata-ba-field sonata-ba-field-standard-natural">
                                            <select id="user" name="user" class="myuser-js form-control">
                                                <option value="0">{{ 'Tous'|trans }}</option>
                                                {% for eleve in eleves %}
                                                    <option value="{{ eleve.id }}">{{ eleve.nom }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-3 form-group" id="sonata-ba-field-container-eleves">
                                        <label class="control-label" for="user">{{ "admin.service.type"|trans }}</label>
                                        <div class="sonata-ba-field sonata-ba-field-standard-natural">
                                            <select id="user" name="type" class="typepay-js form-control">
                                                <option value="0">{{ 'Tous'|trans }}</option>
                                                <option value="Cheque">{{ "admin.service.cheque"|trans }}</option>
                                                <option value="Cash">{{ "admin.service.cash"|trans }}</option>
                                            </select>
                                        </div>
                                    </div>


                                    <div class="col-md-3 form-group" id="sonata-ba-field-container-eleves">
                                        <label class="control-label" for="dateDebut">{{ "admin.anneescolaire.datedeb"|trans }}</label>
                                        <div class="sonata-ba-field sonata-ba-field-standard-natural">
                                            <input type="date" id="dateDebut" name="dateDebut" class="dateDebut" >
                                        </div>
                                    </div>

                                    <div class="col-md-3 form-group" id="sonata-ba-field-container-eleves">
                                        <label class="control-label" for="dateFin">
                                            {{ "admin.anneescolaire.datefin"|trans }}
                                        </label>
                                        <div class="sonata-ba-field sonata-ba-field-standard-natural">
                                            <input type="date" id="dateFin" name="dateFin" class="dateFin">
                                        </div>
                                    </div>

{#                                <div class="col-md-3 form-group" id="sonata-ba-field-container-parent">#}
{#                                    <label class="control-label" for="user">Parents</label>#}
{#                                    <div class="sonata-ba-field sonata-ba-field-standard-natural">#}
{#                                        <select id="parent" name="parent" class="myusersparent-js form-control">#}
{#                                            {% for parent in parents %}#}
{#                                                <option value="{{ parent.id }}">{{ parent.id }}</option>#}
{#                                            {% endfor %}#}
{#                                        </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>
                                                {{ "admin.service.valider"|trans }}
                                            </button>



                                        </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="button" class="btn btn-primary" onclick="PrintDiv();">Imprimer</button>#}

                                            <button type="submit" class="btn btn-primary btn_xlsx_js"
                                                    name="btn_update_and_edit">
                                                <i class="fa fa-save" aria-hidden="true"></i>
                                                {{ 'Export'|trans }}
                                            </button>
                                        </div>
                                    </div>


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

                    <div id="divToPrint"  class="col-md-12">
                        <div class="box box-primary">
                            <div class="box-header">
                                <h4 class="box-title">
                                    {{ "admin.service.detailserv"|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 style="text-align: left" scope="col"> {{ "admin.cours.eleve"|trans }}</th>
                                                            <th style="text-align: left" scope="col">{{ "menu.Services"|trans }}</th>
                                                            <th style="text-align: left" scope="col">{{ "admin.service.echs"|trans }}</th>
                                                            <th style="text-align: left" scope="col">{{ "admin.service.montant"|trans }}</th>
                                                            <th scope="col">{{ "admin.service.montantfact"|trans }}</th>
                                                            <th scope="col">{{ "selv.modpai"|trans }}</th>
                                                            <th scope="col">{{ "admin.cours.date"|trans }}</th>
                                                        </tr>

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

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


                                        </div>
                                    </div>

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


                </form>
            </div>

        </div>

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


        $(document).ready(function () {
            let datat = {}
            datat['service'] = $('input.myuser-js').val()

            $(document).on('change', '.myserice-js', function () {
                let $field = $(this);
                // console.log(id_token);

                let data = {};

                // var $eld = $("select.myspecialite-js");
                // $eld.empty().trigger('change'); // remove old options
                $('select.myech-js option:gt(0)').remove();
                data['service'] = $field.val();

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

                    var $el = $("select.myech-js");
                    // $el.empty(); // remove old options
                    $('select.myech-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_js', function (e) {
                e.preventDefault();
                let data = {}

                data['user'] = $('select.myuser-js').val();
                data['service'] = $('select.myserice-js').val();
                data['ech'] = $('select.myech-js').val();
                data['type'] = $('select.typepay-js').val();
                data['dateDebut'] = $('input.dateDebut').val();
                data['dateFin'] = $('input.dateFin').val();

                $.post('{{ path('getEcheanceEleveAjax') }}', data).then(function (data) {
                    let $tt = $('tbody.liste_des_services');
                    let $tot = $('tbody.liste_des_total');
                    let $nm = $('span#notMax');
                    $tt.html('');
                    $tot.html('');
                    var totvalue = 0;
                    var totalfact = 0;


                    $.each(data, function (key, value) {
                        totvalue = totvalue + value['motant'] ;
                        totalfact = totalfact + value['motantafacturer'] ;
                        //console.log('taille: '+value['total'].length);
                        $tt.append("<tr>" +
                            "<td>"+value['eleve']+"</td>"+
                            "<td>"+value['nomservice']+"</td>"+
                            "<td>"+value['nomecheance']+"</td>"+
                            "<td>"+value['motant']+"</td>"+
                            "<td>"+value['motantafacturer']+"</td>"+
                            "<td>"+value['type']+"</td>"+
                            "<td>"+value['dateEmission']+"</td>"+

                            "</tr>");
                    });

                    $tt.append("<tr class='bg-primary'>" +
                        "<th  style='text-align: left' scope='col'> {{ "selv.monttot"|trans }}</th>"+
                        "<td></td>"+
                        "<td></td>"+
                        "<td>"+totvalue+"</td>"+
                        "<td>"+totalfact+"</td>"+
                        "<td></td>"+
                        "<td></td>"+

                        "</tr>");
                })

            });


        });

        // function PrintDiv() {
        //     var divToPrint = document.getElementById('divToPrint');
        //     var popupWin = window.open('', '_blank', 'width=900,height=1200');
        //     popupWin.document.open();
        //     popupWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</html>');
        //     popupWin.document.close();
        // }
    </script>
{% endblock %}