{% extends 'base.html.twig' %}

{% block title %}{{parent()}}: Formation {{ formation.designation }} - Notation Oral{% endblock %}


{% block body %}
    {% include 'breadcrumb.html.twig' %}

    <div class="container-fluid">
        <div id="ui-view">
            <div>
                <div class="animated fadeIn">


                    <div class="card">
                        <div class="card-header">
                            <h4 class="d-inline-block m-0">Notation de l'oral</h4>
                        </div>
                        <div class="card-body">

                            <div class="row">
                                <!-- encart formation -->
                                <div class="col-lg-6">
                                    <table id="datatable_note_oral" class="table table-responsive ns_selectable ns_fullwidth dataTable no-footer" style="width:100%">
                                        <thead>
                                            <tr>
                                                <th>Elève</th>
                                                <th>Note (/10)</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        {% for one_formation_eleve in formation_eleve %}

                                            <tr>
                                                <td>{{ one_formation_eleve.eleve.nom }} {{ one_formation_eleve.eleve.prenom }}</td>
                                                <td><input min="0" max="10" data-previousnote="{{ one_formation_eleve.noteOral }}" data-formationeleve="{{ one_formation_eleve.id }}" class="form-control note_oral" type="number" value="{{ one_formation_eleve.noteOral }}" ></td>
                                            </tr>

                                        {% endfor %}
                                        </tbody>
                                    </table>

                                </div>
                            </div>

                        </div>

                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script>
    $(document).ready(function() {
        $('#datatable_note_oral').DataTable({
            "paging":   false,
            "ordering": true,
            "info":     false,
            "searching": false
        });
    });

    $(".note_oral").blur(function(){
        if ($(this)[0].validity.valid == true) { // test validite HTML5

            var url = '{{ path("formation_formationeleve_setnoteoral", {'formation_eleve': 'current_formation_eleve','note': 'current_note'}) }}';
            url = url.replace("current_formation_eleve", $(this).data("formationeleve"));
            url = url.replace("current_note", $(this).val());

            $.ajax({
               url : url,
               type : 'POST',
               dataType : 'json', // On désire recevoir du HTML
               success : function(code_html, statut){ // code_html contient le HTML renvoyé

               }
            });


            $(this).data("previousnote",$(this).val());
        }
        else {
            alert("Attention, cette valeur n'est pas autorisée.");
            $(this).val($(this).data("previousnote"));
        }

    })

    </script>
{% endblock %}