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

{% block title %}{{parent()}}: Liste des leçons{% 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">
                            <div class="card">

                                <div class="card-header">
                                    <h4 class="d-inline-block m-0">Liste des Leçons</h4>
                                </div>
                                <div class="card-body">
                                    <div class="">
                                        <table id="table_lessons" class="table table-responsive ns_fullwidth">
                                            <thead>
                                                <tr class="filtre_line">
                                                    <td class="filtre id" data-column-name="id"></td>
                                                    <td class="filtre libelle" data-column-name="libelle"></td>
                                                    <td class="filtre duree" data-column-name="duree"></td>
                                                    <td class="filtre langue" data-column-name="langue"></td>
                                                    <td class="filtre niveau" data-column-name="niveau"></td>
                                                    <td class="filtre proprietaire" data-column-name="proprietaire"></td>
                                                    <td class="filtre datecreation" data-column-name="datecreation"></td>
                                                    <td> <!-- pas de filtre sur action --> </td>
                                                </tr>
                                                <tr class="tri_line">
                                                    <th class="col-header id">Numéro</th>
                                                    <th class="col-header libelle">Intitulé</th>
                                                    <th class="col-header duree">Durée</th>
                                                    <th class="col-header langue">Langue</th>
                                                    <th class="col-header niveau">Niveau</th>
                                                    <th class="col-header proprietaire">Proprietaire</th>
                                                    <th class="col-header datecreation">Date de création</th>
                                                    <th class="col-header action">Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock body %}

{% block body_before_end %}
    {{ parent() }}
    {{ tinymce_init() }}

    {# temporaire #}
    <script src="{{ asset('js/ns_rustine_tinymceinline.js') }}?{{ date().timestamp }}"></script>

<!-- HTML POUR POPPIN -->
{% include 'generic_popin.html.twig' with {
    'contenu': '__CONTENU__',
    'titre': '__TITRE__',
    'show_validate_popin' : false,
    'show_cancel_popin' : false,
    'narrow': true,
    'suffixe_id': '_description'
} only %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/ns_scripts.js') }}?{{ date().timestamp }}"></script>
    <script src="{{ asset('js/courses_lecon_description.js') }}?{{ date().timestamp }}"></script>
    <script>
        window.PATH_LECONS_JSONLIST = "{{ path('courses_lesson_jsonList', {'filtre_active':filtre_active, 'filtre_langues':filtre_langues})|raw }}";
        window.PATH_LECON_EDIT_DESCRIPTION = "{{ path('courses_lecon_edit', { 'id': '__id__'}) |raw }}"
        window.filtres = [];
        window.filtres_actifs = [];

        function generateButtons(_id, _active){

            var path_link = "{{ path('courses_lesson_show_activities_apercu', {
                'id': '__id__',
                'formation_id': 0,
                'module_id': 0,
                'lecon_id': 0,
                'counter_activite': 0,
                'ajax':false,
                'pleine_page': true,
                'session': 0
            }) |raw }}"
                    .replace('__id__', _id),

                path_remove = "{{ path('courses_lesson_delete', {'id':'__id__'}) }}"
                    .replace('__id__', _id),
                html_button_on_off = '<button class="btn btn-warning ajax btn-delete" title="Réactiver" '
                    +' data-title="Réactiver" data-path="'+path_remove+'"> '
                    +' <i class="fa fa-recycle"></i>'
                    +'</button>';
            if(_active){
                html_button_on_off = '<button class="btn btn-dark ajax btn-delete" title="Désactiver" '
                    +' data-title="Désactiver" data-path="'+path_remove+'"> '
                    +' <i class="fa fa-trash"></i>'
                    +'</button>';
            }

            //initialement générés par twig, pour les besoin de DataTable ajaxisée:
            var result_html = '<div class="clearfix display_flex">'
            {% if est_connecte %}
                +'<a class="btn btn-primary mr-1" title="Voir" '
                +' target="_blank" '
                +' data-title="Voir" href="'+path_link+'"> '
                +' <i class="fa fa-eye"></i> '
                +'</a>'
                + html_button_on_off
            {% endif %}
                    +'</div>';
            return result_html
        }
        $(document).ready(function() {

            window.table_lessons = $('#table_lessons').DataTable({
                "language": {
                    "url": window.DATATABLE_LANG_JSON
                },
                columnDefs: [
                    {
                        targets: [-1],
                        className: "nowrap",
                        orderable: false,
                        width:"10%",
                    }
                ],
                /* partie qui ajaxize  */
                processing: true, //indique que la DataTable peut mettre longtemps à charger
                serverSide: true, //ajax pour lsiter et chercher données
                ajax: {
                    url: window.PATH_LECONS_JSONLIST,
                    type: 'POST',
                },
                sAjaxDataProp: "data",
                pageLength: 50, //valeur initiale
                columns:[
                    {"width": "5%",     "data": "id",              "className":"id"}, //sert vraiment pour l'id
                    {"width": "30%",    "data": "libelle",         "className":"libelle"},
                    {"width": "10%",    "data": "duree",           "className":"duree"},
                    {"width": "15%",    "data": "langue",          "className":"langue"},
                    {"width": "15%",    "data": "niveau",          "className":"niveau"},
                    {"width": "20%",    "data": "proprietaire",    "className":"proprietaire"},
                    {"width": "20%",    "data": "datecreation",            "className":"datecreation"},
                    {"width": "5%",     "data": "id",              "className":"action"}, //en fait pour les boutons d'action
                ],

                "createdRow": function( row, data, dataIndex ) {
                    //faire un truc quand ligne ajoutée : ajouter boutons
                    var lecon_id = data.id,
                        lecon_active = data.active,
                        lecon_libelle = data.libelle,
                        lecon_description = data.description,
                        lecon_link = window.PATH_LECON_EDIT_DESCRIPTION.replace('__id__', lecon_id);

                    $(row).find('td').last().html( generateButtons(lecon_id, lecon_active) )

                    //ajouter description via bouton spécial
                    if('string' !== typeof lecon_description) {
                        lecon_description='';
                    }

                    $(row).find('td.libelle').html( lecon_libelle+' '+window.generateDescriptionButton(lecon_id, lecon_description, lecon_link) )

                    $(row).find('[data-toggle="tooltip"]').tooltip()
                },

                drawCallback: function( settings ) {
                    window.filtres = this.api().context[0].json.filtres

                    //associer boutons en popin (pour éditer description)
                    window.brancherPopinDescription(function callback(data){
                        //var lecon_id = data.id
                        window.table_lessons
                            .search( '' )
                            .columns().search( '' )
                            .draw()
                    });

                    //brancher bouton de réactivation/suppression ajax
                    $('.ajax.btn-delete').off('click').on('click', function(eventClick) {
                        eventClick.stopImmediatePropagation();
                        eventClick.stopPropagation();
                        eventClick.preventDefault();

                        {% if filtre_active %}
                        var message = 'Etes-vous sûr de vouloir supprimer cette leçon ?';
                        {% else %}
                        var message = 'Etes-vous sûr de vouloir réactiver cette leçon ?';
                        {% endif %}

                        if(confirm(message)) {

                            //MAYDO: confirm('vous allez tout casser !')
                            var path = $(this).attr('data-path')
                            $.post(path, function success(data) {
                                //MAYDO: informer de réussite ?
                                //recharger datatable
                                window.table_lessons.ajax.reload(null, false) //pas de callback ET conserve pagination
                            });
                        }
                    });
                },
                initComplete: function(){
                    var colonnes_a_mettre_en_select = [3,5], //[2,3,4] 4 était la colonne "active"
                        colonnes_a_ignorer = [6]; //actions
                    window.GENERER_FILTRES(window.table_lessons, colonnes_a_mettre_en_select, colonnes_a_ignorer)

                },

                stateSave: true,
                stateSaveCallback: function(settings,data) {
                    localStorage.setItem( 'DataTables_' + settings.sInstance, JSON.stringify(data) )
                },
                stateLoadCallback: function(settings) {
                    var data = JSON.parse( localStorage.getItem( 'DataTables_' + settings.sInstance ) );
                    return data
                }
            });
        })
    </script>
{% endblock %}