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

{% block title %}{{parent()}}: Liste des activités{% 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 Activités</h4>
                                </div>
                                <div class="card-body">
                                    <div class="">
                                        <table id="table_activites" 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 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 langue">Langue</th>
                                                    <th class="col-header niveau">Niveau</th>
                                                    <th class="col-header proprietaire">Propriétaire</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 javascripts %}
    {{ parent() }}
    <script>
        window.PATH_ACTIVITES_JSONLIST ="{{ path('courses_activite_jsonList', {'filtre_active':filtre_active})|raw }}";
        window.filtres = [];
        window.filtres_actifs = [];

        function generateButtons(_id, _active){

            var path_link = "{{ path('courses_activite_index', {
                '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_activite_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>';
            }

            var path_link_adaptabilite = "{{ path('courses_activite_adaptabilite', {
                'id': '__id__',
            }) |raw }}"
                .replace('__id__', _id);

            //initialement générés par twig, pour les besoin de DataTable ajaxisée:
            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_activites = $('#table_activites').DataTable({
                "pagingType": "input",
                "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: window.PATH_ACTIVITES_JSONLIST,
                sAjaxDataProp: "data",
                pageLength: 50, //valeur initiale
                columns:[
                    {"data": "id", "width": "5%"}, //sert vraiement pour l'id
                    {"data": "libelle", "width": "30%"},
                    {"data": "langue", "width": "10%"},
                    {"data": "niveau", "width": "10%"},
                    {"data": "proprietaire", "width": "15%"},
                    {"data": "datecreation", "width": "15%"},
                    {"data": "id", "width": "5%","className":"action"}, //en fait pour les boutons d'action
                ],

                "createdRow": function( row, data, dataIndex ) {
                    //faire un truc quand ligne ajoutée : ajouter boutons
                    var activite_id = data.id,
                        activite_active = data.active;
                    $(row).find('td').last().html( generateButtons(activite_id, activite_active) )
                },

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

                    //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 activité ?';
                        {% else %}
                        var message = 'Etes-vous sûr de vouloir réactiver cette activité ?';
                        {% endif %}

                        if(confirm(message)) {

                            var path = $(this).attr('data-path')
                            $.post(path, function success(data) {
                                //recharger datatable
                                window.table_activites.ajax.reload(null, false) //pas de callback ET conserve pagination
                            });
                        }
                    });


                },
                initComplete: function(){
                    var colonnes_a_mettre_en_select = [2,4], //[2,3,4] 4 était la colonne "active"
                        colonnes_a_ignorer = [5]; //actions
                    window.GENERER_FILTRES(window.table_activites, colonnes_a_mettre_en_select, colonnes_a_ignorer)
                },

                // pour se souvenir des filtres, même quand navigue sur autres pages
                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>
    <script src="{{ asset('js/ns_scripts.js') }}?{{ date().timestamp }}"></script>
{% endblock %}