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

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


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

    <div class="container-fluid">
        <div id="ui-view">
            <div>
                <div class="animated fadeIn">
                    <div class="row">
                        <div class="col-lg-6 col-12">
                            <div class="card">

                                <div class="card-header">
                                    <h4 class="d-inline-block m-0">Listing</h4>

                                    <div class="card-header-actions">
                                    </div>
                                </div>
                                <div class="card-body">

                                    <div class="">
                                        <table cellspacing="5" cellpadding="5" border="0">
                                            <tbody>
                                            <tr>
                                                <td>Minimum Note:</td>
                                                <td><input type="text" id="min_note" name="min_note"></td>
                                            </tr>
                                            <tr>
                                                <td>Maximum note:</td>
                                                <td><input type="text" id="max_note" name="max_note"></td>
                                            </tr>
                                            </tbody>
                                        </table>

                                        <table cellspacing="5" cellpadding="5" border="0">
                                            <tbody>
                                            <tr>
                                                <td>Minimum temps:</td>
                                                <td><input type="text" id="min_temps" name="min_temps"></td>
                                            </tr>
                                            <tr>
                                                <td>Maximum temps:</td>
                                                <td><input type="text" id="max_temps" name="max_temps"></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                    <div class="">
                                        <button class="btn btn-primary btn-select-all">Sélectionner tous les élèves filtrés</button>
                                        <button class="btn btn-danger btn-deselect-all">Déselectionner tous les élèves</button>
                                        <button class="btn btn-primary btn-assoc-eleve-formation" data-toggle="modal" data-target="#modal-listing-formation">Associer la sélection (<span class="nb_eleve_select">0</span>)</button>

                                    </div>

                                    <table id="table_eleves" class="table table-responsive ns_selectable ns_fullwidth">
                                        <thead>
                                        <tr>
                                            <th>Id</th>
                                            <th>Elève</th>
                                            <th>Note (/100)</th>
                                            <th>Temps passé (min)</th>
                                            <th>Nb Formation</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {%  for eleve in eleves %}
                                            {% set classtr = '' %}
                                            {%  if eleve.nb_formation == 1 %}
                                                {% set classtr = 'no_assoc' %}
                                            {% endif %}
                                            <tr class="{{ classtr }}">
                                                <td>{{ eleve.id }}</td>
                                                <td>{{ eleve.qui }}</td>
                                                <td>{{ eleve.note }}</td>
                                                <td>{{ eleve.minutes }}</td>
                                                <td>{{ eleve.nb_formation }}</td>
                                            </tr>
                                        {%  endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6 col-12">
                            <div class="card">

                                <div class="card-header">
                                    <h4 class="d-inline-block m-0">Graphique</h4>

                                    <div class="card-header-actions">
                                    </div>
                                </div>
                                <div class="card-body">

                                    <div id="container" style="min-width: 310px; height: 500px; max-width: 800px; margin: 0 auto"></div>

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


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

    <div class="modal fade poppin"
         id="modal-listing-formation"
         style="pointer-events:none;overflow:auto!important;background: rgba(0, 0, 0, 0.5);"
         role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-medium-dialog modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">Formations</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Sélectionner la formation à associer à la liste d'élèves (<span class="nb_eleve_select"></span>) :<br>
                    <select class=" form-control" id="select-formation-to-assoc" style="width: 100%">
                        {% for f in formations %}
                            <option value="{{ f.id }}">{{ f.designation }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-outline-primary pull-right" data-dismiss="modal" aria-label="Close">
                        Annuler
                    </button>
                    <button class="btn btn-outline-primary pull-right" id="btn-valid-assoc">
                        Valider
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock body %}


{% block additional_javascripts %}
    {{ parent() }}
    <script src="//cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js" crossorigin="anonymous"></script>
{% endblock additional_javascripts %}

{% block additional_stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="//cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css"/>
{% endblock additional_stylesheets %}


{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('Highcharts-7.1.0/code/highcharts.js') }}?{{ date().timestamp }}"></script>
    <script>

        var tableEleve;

        Highcharts.chart('container', {
            chart: {
                type: 'scatter',
                zoomType: 'xy',
                events: {
                    selection: function(event) {
                        if(typeof event.xAxis == 'undefined'){
                            // Reset Zoom
                            $("#min_temps").val("");
                            $("#max_temps").val("");

                            $("#min_note").val("");
                            $("#max_note").val("");
                        } else {

                            $("#min_temps").val(event.xAxis[0].min);
                            $("#max_temps").val(event.xAxis[0].max);

                            $("#min_note").val(event.yAxis[0].min);
                            $("#max_note").val(event.yAxis[0].max);
                        }

                        tableEleve.draw();
                    }
                },
            },
            title: {
                text: 'Note / Temps passé'
            },
            xAxis: {
                title: {
                    enabled: true,
                    text: 'Temps passé (min)'
                },
                startOnTick: true,
                endOnTick: true,
                showLastLabel: true
            },
            yAxis: {
                title: {
                    text: 'Note (/100)'
                }
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                scatter: {
                    marker: {
                        radius: 5,
                        symbol: 'circle',
                        states: {
                            hover: {
                                enabled: false,
                                lineColor: 'rgb(100,100,100)'
                            }
                        }
                    },
                    states: {
                        hover: {
                            marker: {
                                enabled: false
                            }
                        }
                    },
                    tooltip: {
                        headerFormat: '<b>{series.name}</b><br>',
                        pointFormat: '{point.y}/100 en {point.x} min'
                    }
                }
            },
            series: [
                {% set separator = '' %}
                {% for eleve in eleves %}
                {{ separator }}
                {
                    name: '{{ eleve.qui }}',
                    color: 'rgba(223, 83, 83)',
                    data: [[{{ eleve.minutes }}, {{ eleve.note }}]]
                }
                {% set separator = ',' %}
                {% endfor %}]
        });

        $.fn.dataTable.ext.search.push(
            function( settings, data, dataIndex ) {

                var booleenNote = true;
                var min_note = parseInt( $('#min_note').val(), 10 );
                var max_note = parseInt( $('#max_note').val(), 10 );
                var note = parseFloat( data[2] ) || 0; // use data for the note column

                if ( ( isNaN( min_note ) && isNaN( max_note ) ) ||
                    ( isNaN( min_note ) && note <= max_note ) ||
                    ( min_note <= note   && isNaN( max_note ) ) ||
                    ( min_note <= note   && note <= max_note ) )
                {
                    booleenNote = true;
                }
                else {
                    booleenNote = false;
                }

                var booleenTemps = true;
                var min_temps = parseInt( $('#min_temps').val(), 10 );
                var max_temps = parseInt( $('#max_temps').val(), 10 );
                var temps = parseFloat( data[3] ) || 0; // use data for the temps column

                if ( ( isNaN( min_temps ) && isNaN( max_temps ) ) ||
                    ( isNaN( min_temps ) && temps <= max_temps ) ||
                    ( min_temps <= temps   && isNaN( max_temps ) ) ||
                    ( min_temps <= temps   && temps <= max_temps ) )
                {
                    booleenTemps = true;
                }
                else {
                    booleenTemps = false;
                }

                // Traitement reponse
                if (booleenNote && booleenTemps) {
                    return true;
                }
                else {
                    return false;
                }
            }
        );

        $(document).ready(function() {
            tableEleve = $('#table_eleves').DataTable({
                "language": {
                    "url": window.DATATABLE_LANG_JSON
                },
                "pageLength": 50,
                "select": {
                    "style": "multi"
                }
            });

            $(".btn-select-all").click(function(){
                //tableEleve.rows().select();
                tableEleve.rows( { filter : 'applied'} ).select();
            });

            $(".btn-deselect-all").click(function(){
                tableEleve.rows('.selected').deselect();
            });

            $("#btn-valid-assoc").click(function() {
                var eleveIds = $.map(tableEleve.rows('.selected').data(), function (item) {
                    return item[0]
                });

                var formationId = $("#select-formation-to-assoc").val();

                // Ajax d'association des eleves
                var routeAddEleves = "{{ path('formation_formation_add_eleves', {'id':'__formation_id__', 'arrayid': '__str_array_pr_ids__'}) }}"
                var pathAddEleveAjax = routeAddEleves.replace('__str_array_pr_ids__', eleveIds.join('_')).replace('__formation_id__', formationId);

                $.post( pathAddEleveAjax, function( data ) {
                    // Reload page
                    document.location.reload();
                });
            });

            // Event listener to the two range filtering inputs to redraw on input
            $('#min_note, #max_note, #min_temps, #max_temps').keyup( function() {
                tableEleve.draw();
                tableEleve.rows('.selected').deselect();
            });

            tableEleve.on( 'select', function ( e, dt, type, indexes ) {
                var count = tableEleve.rows( { selected: true } ).count();
                $(".nb_eleve_select").html(count);
            });

            tableEleve.on( 'deselect', function ( e, dt, type, indexes ) {
                var count = tableEleve.rows( { selected: true } ).count();
                $(".nb_eleve_select").html(count);
            });

            $('#select-formation-to-assoc').select2();
        });

    </script>
{% endblock %}