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

{% block show %}

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

                <form target="_blank"  action="{{ path('serviceDashboardClasse') }}" 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">{{ "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">
                                            {% 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">{{ "menu.Services"|trans }}</label>
                                    <div class="sonata-ba-field sonata-ba-field-standard-natural">
                                        <select id="user" name="user" class="myuser-js form-control">
                                            {% 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-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>
                        </div>
                    </div>
                </div>

                    <div 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">{{ "admin.service.service"|trans }}</th>
                                                            <th style="text-align: left" scope="col">{{ "admin.service.prixtotal"|trans }}</th>
                                                            <th style="text-align: left" scope="col">{{ "admin.service.montantdu"|trans }}</th>
                                                             <th scope="col">{{ "admin.service.montantpayer"|trans }}</th>
                                                             <th scope="col">{{ "admin.service.resteapayer"|trans }}</th>

                                                        </tr>

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

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


                                        </div>
                                    </div>

                                </div>
                            </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">Élève</th>#}
{#                                                            <th style="text-align: left" scope="col">Service</th>#}
{#                                                            <th style="text-align: left" scope="col">Total montant total</th>#}
{#                                                            <th style="text-align: left" scope="col">Total montant dû à ce jour</th>#}
{#                                                            <th scope="col">Total montant payé à ce jour</th>#}
{#                                                            <th scope="col">Total reste a payé à ce jour</th>#}

{#                                                        </tr>#}

{#                                                        </thead>#}
{#                                                        <tbody class="liste_des_total">#}

{#                                                        </tbody>#}
{#                                                    </table>#}
{#                                                </div>#}
{#                                            </div>#}


{#                                        </div>#}
{#                                    </div>#}

{#                                </div>#}
{#                            </div>#}


                        </div>
                    </div>


                </form>
            </div>

        </div>

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


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











            $(document).on('click', '.btn_list_notes_js', function (e) {
                e.preventDefault();
                let data = {}
                data['user'] = $('select.myuser-js').val()


                $.post('{{ path('getServiceEleveDataByEleveAjax') }}', data).then(function (data) {
                    let $tt = $('tbody.liste_des_services');
                    let $tot = $('tbody.liste_des_total');
                    let $nm = $('span#notMax');
                    $tt.html('');
                    $tot.html('');
                    $.each(data, function (key, value) {
                        console.log(value);

                        $tt.append("<tr>" +
                                "<td>"+value['eleve']+"</td>"+
                                "<td>"+value['nomservice']+"</td>"+
                                "<td>"+value['motanttotal']+"</td>"+
                                "<td>"+value['motantdu']+"</td>"+
                                "<td>"+value['motantpaye']+"</td>"+
                                "<td>"+value['motantreste']+"</td>"+

                            "</tr>");
                    });
                })

            });


        });
    </script>
{% endblock %}