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

{% block body %}
    {#<iframe src="{{ path('courses_composant_gapfill', {'id': 1 }) }}" width="1000px" height="250px"></iframe>#}
    {% 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 utilisateurs</h4>
                                    <div class="card-header-actions">
                                        <ul class="d-flex list-unstyled m-0">
                                            {% if est_connecte %}
                                                <li class="mr-2">
                                                    <a class="btn btn-outline-primary btn-new"
                                                       href="{{ path('fos_user_registration_register') }}">
                                                        Créer un compte
                                                    </a>
                                                </li>
                                                <li class="">
                                                    <a class="btn btn-outline-primary"
                                                       href="{{ path('user_utilisateur_import') }}">
                                                        import{#<i class="fa fa-trash"></i>#}
                                                    </a>
                                                </li>
                                            {% endif %}
                                        </ul>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="">
                                        <table id="table_utilisateurs" class="table table-responsive ns_fullwidth ns_selectable">
                                            <thead>
                                                <tr class="filtre_line">
                                                    <!-- ici pour ne plus déclencher rafraichissement -->
                                                    <td> <!-- pas de filtre sur id --> </td>
                                                    <td class="filtre username" data-column-name="username"></td>
                                                    <td class="filtre nom" data-column-name="nom"></td>
                                                    <td class="filtre prenom" data-column-name="prenom"></td>
                                                    {#<td class="filtre email" data-column-name="email"></td>#}
                                                    <td class="filtre client" data-column-name="client"></td>
                                                    <td class="filtre role" data-column-name="role"></td>
                                                    <td class="filtre adresse" data-column-name="adresse"></td>
                                                    <td class="filtre pays" data-column-name="pays"></td>
                                                    <td class="filtre ville" data-column-name="ville"></td>
                                                    <td class="filtre codepostal" data-column-name="codepostal"></td>
                                                    <td class="filtre nationalite" data-column-name="nationalite"></td>
                                                </tr>
                                                <tr class="tri_line">
                                                    <th class="col-header id">id</th>
                                                    <th class="col-header username">Username</th>
                                                    <th class="col-header nom">Nom</th>
                                                    <th class="col-header prenom">Prénom</th>
                                                    {#<th class="col-header email">email</th>#}
                                                    <th class="col-header client">Client</th>
                                                    <th class="col-header role">Rôle</th>
                                                    <th class="col-header adresse">adresse</th>
                                                    <th class="col-header pays">Pays</th>
                                                    <th class="col-header ville">ville</th>
                                                    <th class="col-header codepostal">code Postal</th>
                                                    <th class="col-header nationalite">Nationalité</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </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_USERS_JSONLIST ="{{ path('user_utilisateur_index_json', {'filtre_active':filtre_active})|raw }}"
        window.filtres = []
        window.filtres_actifs = []

        $(document).ready(function() {
            window.table_users = $('#table_utilisateurs').DataTable({
                "language": {
                    "url": window.DATATABLE_LANG_JSON
                },
                /* 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_USERS_JSONLIST,
                sAjaxDataProp: "data",
                pageLength: 50, //valeur initiale
                columns:[
                    {"data": "id"}, //sert vraiement pour l'id
                    {"data": "username"},
                    {"data": "nom"},
                    {"data": "prenom"}, // {"data": "societe" },
                    {"data": "client"},
                    {"data": "role"},
                    //{"data": "email"},
                    {"data": "adresse"},
                    {"data": "pays"},
                    {"data": "ville"},
                    {"data": "codePostal"},
                    {"data": "nationalite"},
                    //{"data": "active"}, //liste à part, inutile d'en faire une colonne
                ],
                /* fin partie qui ajaxize */

                "createdRow": function( row, data, dataIndex ) {
                    //faire un truc quand ligne ajoutée : ajouter boutons
                    var user_id = data.id
                    $(row).on('click', function() {
                        window.location = ("{{ path('user_utilisateur_show', {id: '__id__'})|raw }}").replace('__id__', user_id);
                    });
                },

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

                    //MAYDO !
                    //var filtres = this.api().context[0].json.filtres;

                    //window.console.log('callback de charger bloc lignes dans callback add eleves');
                    // 4. regénérer les filtres (rôle, ville)
                    var colonnes_a_mettre_en_select = [5,8] //7,10,11 la 11e était la colonne "active"
                    window.GENERER_FILTRES(window.table_users, colonnes_a_mettre_en_select)

                    //$('#table_eleves tfoot tr').insertAfter($('#table_eleves thead tr'))
                    //fin initComplete
                }
            });
        })
    </script>
{% endblock %}