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

{% block title %}{{parent()}}: Liste des comptes-rendus{% 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 comptes-rendus</h4>

                                    <div class="card-header-actions">
                                        <ul class="d-flex list-unstyled m-0">
                                            {% if est_connecte %}
                                                <li class="">
                                                    <a class="btn btn-outline-primary btn-new"
                                                       href="{{ path('formation_compterendu_create', {
                                                           'eleve_id': eleve_id,
                                                           'formation_id': formation_id
                                                       }) }}">
                                                        Ajouter un compte-rendu
                                                    </a>
                                                </li>
                                            {% endif %}
                                        </ul>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="">
                                        {% include '@Formation/Compterendu/index_inner.html.twig' %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/ns_scripts.js') }}?{{ date().timestamp }}"></script>
    <script>
        window.PATH_CR_JSONLIST = "{{ path('formation_compterendu_index_json', {
            'formation_id':formation_id,
            'eleve_id':eleve_id
        })|raw }}";
        window.filtres = [];
        window.filtres_actifs = [];


        //{ # appliquer filtres au chargement # }
        {% set filtre_actif_onload = false %}
        {% if formation_id is defined %}{% if 0 != formation_id %}
        window.filtres_actifs['formation'] = {{ formation_id }}
        {% set filtre_actif_onload = true %}
        {% endif %}{% endif %}

        {% if eleve_id is defined %}{% if 0 != eleve_id %}
        window.filtres_actifs['eleve'] = {{ eleve_id }}
        {% set filtre_actif_onload = true %}
        {% endif %}{% endif %}


        function generateButtons(_id, _active){
            path_show = "{{ path('formation_compterendu_show', {id: '__id__',
                'formation_id':formation_id,
                'eleve_id':eleve_id
            })|raw }}"
                .replace('__id__', _id);
            path_edit = "{{ path('formation_compterendu_edit', {id: '__id__',
                'formation_id':formation_id,
                'eleve_id':eleve_id
            })|raw }}"
                .replace('__id__', _id);
            path_delete = "{{ path('formation_compterendu_active', {id: '__id__',
                'formation_id':formation_id,
                'eleve_id':eleve_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 ce CR" '
                +' href="'+path_show+'"> '
                +' <i class="fa fa-search "></i> '
                +'</a>'
                +'<a class="btn btn-outline-primary mr-1" title="Modifier" '
                +' data-title="Modifier" href="'+path_edit+'"> '
                +' <i class="fa fa-edit "></i> '
                +'</a>';
            if(_active) {
                result_html += '<a class="btn btn-dark" title="Désactiver" '
                    + ' data-title="Désactiver CR" href="' + path_delete + '"> '
                    + ' <i class="fa fa-trash"></i> '
                    + '</a>'
            } else {
                result_html += '<a class="btn btn-warning" title="Réactiver" '
                    + ' data-title="Réactiver CR" href="' + path_delete + '"> '
                    + ' <i class="fa fa-recycle"></i> '
                    + '</a>'
            }
                {% endif %}
            result_html += '</div>';
            return result_html
        };
        $(document).ready(function() {
            window.table_compterendus = $('#table_compterendus').DataTable({
                "pagingType": "input",
                "language": {
                    "url": window.DATATABLE_LANG_JSON
                },
                columnDefs: [ //désactiver le tri sur la dernière colonne (boutons d'actions)
                    {
                        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_CR_JSONLIST,
                sAjaxDataProp: "data",
                pageLength: 10, //valeur initiale
                columns:[ //requis pour générer les filtres
                    {"data": "id"}, //sert vraiement pour l'id
                    {"data": "formation"},
                    {"data": "eleve"}, // {"data": "societe" },
                    {"data": "numero"},
                    {"data": "date"},
                    {"data": "duree"},
                    {"data": "objectifspedagogiques"},
                    {"data": "activitesrealiseesbilan"},
                    {"data": "activitesrealisees"},
                    {"data": "grammairebilan"},
                    {"data": "grammaire"},
                    {"data": "vocabulairebilan"},
                    {"data": "vocabulaire"},
                    {"data": "phonetiquebilan"},
                    {"data": "phonetique"},
                    {"data": "supportutilise"},
                    {"data": "travailafaire"},
                    {"data": "dateprochaincours"},
                    {"data": "commentaire"},
                    {"data": "active"}, //liste à part, inutile d'en faire une colonne
                    {"data": "id"}, //en fait pour les boutons d'action
                ],
                /* fin partie qui ajaxize */

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

                    // colonne "active"
                    var user_active = data.active,
                        value_label = 'off';
                    if(user_active) {
                        value_label = 'on';
                    }
                    $(row).find('td').eq(-2).html(value_label)

                },
                drawCallback: function( settings ) {
                    window.filtres = this.api().context[0].json.filtres
                },
                initComplete: function(){
                    var colonnes_a_mettre_en_select = [1,2, 19];
                    window.GENERER_FILTRES(window.table_compterendus, colonnes_a_mettre_en_select);

                    {% set filtre_actif_onload = false %}
                }
            });
        })
    </script>
{% endblock %}