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

{% block title %}{{parent()}}: Bilan Intermédiaire{% 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-10 mx-auto">
                            <div class="card">

                                <div class="card-header">
                                    <h4 class="d-inline-block m-0">Bilan Intermédiaire</h4>
                                </div>
                                <div class="card-body">
                                    
                                    {% for module in formationModules %}
                                        <h1>{{ module.module.libelle }}</h1>
                                        <div class="ml-5 my-2">
                                            {% for lecon in module.module.modulelecons|sort((a, b) => a.ordre <=> b.ordre) %}
                                                <input class="form-check-input leconCB" type="checkbox" value="" id="lecon-{{ lecon.lecon.id }}" data-id="{{ lecon.lecon.id }}" data-module="{{ module.module.id }}">{{ lecon.lecon.libelle }}<br>
                                            {% endfor %}
                                        </div>
                                    {% endfor %}
                                    <button type="button" id="search" class="btn btn-success waves-effect waves-light align-items-center d-flex my-3">
                                        <i class="fa fa-arrow-right mr-2" aria-hidden="true"></i> Afficher les résultats
                                    </button>

                                    <div id="blocTableau" hidden>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css">
<style>
    .leconCB{
        cursor:pointer;
    }
</style>
{% endblock %}

{% block body_before_end %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js"></script>
    <script>
        $(function() {
            window.DataTableOptions = {
                "responsive": true,
                "bAutoWidth": true,
                "processing": false,
                "serverSide": false,
                "deferLoading": true,
                "order": [[ 0, "asc" ]],
                "language": {
                    url: '//cdn.datatables.net/plug-ins/1.10.25/i18n/French.json'
                },
                "dom": '<"row"<"col-sm-12 col-md-4"B><"col-sm-12 col-md-4 text-center"l><"col-sm-12 col-md-4 text-end"f>><t><"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
                //"dom": 'Bfrtip',
            }
            window.DataTableOptions.pageLength = 30;
            window.DataTableOptions.lengthMenu = [
                [ 10, 30, 50,],
                [ '10', '30', '50']
            ];
            window.DataTableOptions.columns = [
                {"data": "eleve"},
                {"data": "completude"},
                {"data": "temps"},
                {"data": "score"},
                {"data": "assiduite"},
                {"data": "oral"},
                {"data": "notefinale"}
            ];
            window.DataTableOptions.buttons = [
                {
                    extend: 'excelHtml5',
                    text:'<i class="fa fa-file-excel-o" aria-hidden="true"></i> Exporter',
                    title: 'Export Bilan intermédiaire {{ "now"|date("m-d-Y") }}',
                    createEmptyCells : true,
                    exportOptions: {
                        columns: ':visible',
                        /*format: {
                            body: function ( data, row, column, node ) {
                                //check if type is input using jquery
                                return $(data).is("div.cellInput") ?
                                    $(data).find('input').val():
                                    data.replace(/(<([^>]+)>)/gi, "");
                            }
                        }*/
                    },
                }
            ];

            $(document).on('click', '#search', function() {
                var url = "{{ path('formation_formation_bilan_intermediaire_json', {'id': formation.id} ) }}";
                var json = {};
                var counter = 0;

                $('.leconCB:checked').each(function () {
                    counter++;
                    json[counter] = {};
                    json[counter]['id'] = $(this).attr('data-id');
                    json[counter]['module'] = $(this).attr('data-module');
                });

                json = JSON.stringify(json)
                var donnees = {
                    lecons : json
                };

                $('#blocTableau').removeAttr('hidden');
                $('#blocTableau').html();

                $.post(url, donnees, function(data) {
                    $('#blocTableau').html(data);
                    window.datatable = $('.dataTable').DataTable(window.DataTableOptions);
                });
            });
        });

    </script>
{% endblock %}