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

{% block body %}
    <h1 class="page-header">Membres du Groupe = {{ group.label }}</h1>
    <a class="btn btn-secondary" href={{ path('app_'~access~'_group') }}>Fermer</a>
  
    <br><br>

    <div class="row">
        <div class="col-sm-6">
            <div class="card">
                <div class="card-header">
                    <i class="fa fa-table fa-fw"></i> Liste des Utilisateurs non affectés au groupe
                </div>

                <div class="card-body">
                    <div class="dataTable_wrapper">
                        <table class="table table-striped table-bordered table-hover" id="dataTablesnotin" style="width:100%">
                            <thead>
                            <tr>
                                <th width="70px" class="no-sort">Action</th>
                                <th width="70px" class="no-sort">Avatar</th>
                                <th width="200px">Login</th>
                                <th>Email</th>
                                {% if group.isworkgroup %}
                                <th class="no-sort no-visible">Permissions</th>                     
                                {% endif %}
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="card">
                <div class="card-header">
                    <i class="fa fa-table fa-fw"></i> Liste des Utilisateurs affectés au groupe
                </div>

                <div class="card-body">
                    <div class="dataTable_wrapper">
                        <table class="table table-striped table-bordered table-hover" id="dataTablesin" style="width:100%">
                            <thead>
                            <tr>
                                <th width="70px" class="no-sort">Action</th>
                                <th width="70px" class="no-sort">Avatar</th>
                                <th width="200px">Login</th>
                                <th>Email</th>    
                                {% if group.isworkgroup %}
                                <th class="no-sort">Permissions</th>                     
                                {% endif %}
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block localscript %}

<script>
    $(document).ready(function() {
        $('#dataTablesnotin').DataTable({
            columnDefs: [ { "targets": 'no-sort', "orderable": false },{ "targets": 'no-visible', "visible": false }  ],
            responsive: true,
            iDisplayLength: 100,
            order: [[ 2, "asc" ]],
            processing: true,
            serverSide: true,
        	ajax: "{{ path('app_'~access~'_group_usersnotin',{'id':group.id}) }}",
        });

        $('#dataTablesin').DataTable({
            columnDefs: [ { "targets": 'no-sort', "orderable": false },{ "targets": 'no-visible', "visible": false } ],
            responsive: true,
            iDisplayLength: 100,
            order: [[ 2, "asc" ]],
            processing: true,
            serverSide: true,       
            ajax: {
                "url": "{{ path('app_'~access~'_group_usersin',{'id':group.id}) }}",
                "data": function ( d ) {
                    return $.extend( {}, d, {
                        "isworkgroup": "{{ group.isworkgroup }}"
                    });
                }               
            },                            
        });

        
    });

    function addUsers(userid) {
        url="{{ path('app_'~access~'_group_usergroup_add',{userid:"xxx",groupid:group.id}) }}";
        url=url.replace("xxx",userid);

        $.ajax({
            rowId: 2,
            method: "POST",
            url: url,
            success: function(data, dataType)
            {
                var row=$("#dataTablesnotin").DataTable().row("#user"+userid);
                data=row.data();
                var rowNode = row.node();              
                
                $("#dataTablesin").DataTable().row.add(data).draw();
                row.remove().draw(); 
            },

            error: function(XMLHttpRequest, textStatus, errorThrown)
            {
                
            }
        });         
    }

    function delUsers(userid) {
        url="{{ path('app_'~access~'_group_usergroup_del',{userid:"xxx",groupid:group.id}) }}";
        url=url.replace("xxx",userid);

        $.ajax({
            rowId: 2,
            method: "POST",
            url: url,
            data: "userid="+userid+"&groupid="+{{ group.id }},
            success: function(data, dataType)
            {
                var row=$("#dataTablesin").DataTable().row("#user"+userid);
                var rowNode = row.node();
                row.remove().draw(); 
                
                $("#dataTablesnotin").DataTable().row.add(rowNode).draw();
            },

            error: function(XMLHttpRequest, textStatus, errorThrown)
            {
                
            }
        });         
    }  

    function changeRole(userid) {
        url="{{ path('app_'~access~'_group_usergroup_changerole',{userid:"xxx",groupid:group.id,roleid:"yyy"}) }}";
        url=url.replace("xxx",userid);
        url=url.replace("yyy",$("#roleuser-"+userid).val());

        $.ajax({
            method: "POST",
            url: url,
        });

    }   

</script>
{% endblock %}