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

{% block localstyle %}
    {%if access!="config" %}
    .page-header {
        padding: 0px 30px 100px 30px !important;
    }    
    {%endif%}
{% endblock %}

{% block pagewrapper %}
    <h1 class="page-title">Gestion des Utilisateurs</h1>
    <h2>Groupe = {{ group.label }}</h2>

    <p>
        {% if idreturn is empty %}
            <a class="btn btn-secondary" href={{ path('app_core_'~access~'_group') }}>Fermer</a>
        {% else %}
            <a class="btn btn-secondary" href={{ path('app_core_home',{'id':idreturn}) }}>Fermer</a>
        {% endif %}

        {% if moderegistration!="none" and masteridentity=="SQL" and group.fgcanshare %}  
        <a class="btn btn-primary" style="cursor:pointer" onClick="showMail();">Inviter des personnes non listées ci-dessous</a>
        <a class="btn btn-primary" style="cursor:pointer" onClick="showInvitations();">Suivi des Invitations</a>
        {%endif%}   

        {% if group.fgcanshare %}  
        <button class="btn btn-secondary float-end" style="margin-left:10px" data-bs-toggle="modal" data-bs-target="#modalperm">Matrice des permissions</button>         
        {%endif%}   
        
        <a class="btn btn-secondary float-end" href={{ path('app_core_'~access~'_group_usergroup_export',{'id':group.id}) }}>Exporter CSV</a>         
    </p>

    <div class="row">
        <div class="col-md-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 fgviewvisite %}
                                <th class="no-sort no-visible">Visite</th>  
                                {% endif %}
                                {% if group.fgcanshare %}
                                <th class="no-sort no-visible">Permissions</th>                     
                                {% endif %}
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-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 fgviewvisite %}
                                <th class="no-sort">Visite</th>
                                {% endif %}
                                {% if group.fgcanshare %}
                                <th class="no-sort">Permissions</th>                     
                                {% endif %}
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="modalperm" class="modal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Matrice des permissions</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="dataTable_wrapper">
                        <table class="table table-striped table-bordered table-hover" id="dataTablesnotin" style="width:100%; text-align:center; zoom:80%">
                            <thead>
                            <tr>
                                <th>Permissions</th>
                                <th style="text-align:center">Propriétaire<br>***</th>
                                <th style="text-align:center">Gestionnaire<br>**</th>
                                <th style="text-align:center">Collaborateur<br>*</th>
                                <th style="text-align:center">Utilisateur<br>&nbsp;</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td colspan="5" style="font-weight: bold;">GROUPE</td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Modifier le groupe</td>
                                <td>x</td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Supprimer le groupe</td>
                                <td>x</td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Changer le propriétaire du groupe</td>
                                <td>x</td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Affecter des utilisateurs au groupe</td>
                                <td>x</td>
                                <td>x</td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Désaffecter des utilisateurs au groupe</td>
                                <td>x</td>
                                <td>x</td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Inviter des utilisateurs dans le groupe</td>
                                <td>x</td>
                                <td>x</td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Visualiser les statistiques du groupe</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">S’inscrire par soi-même sur les groupes ouverts</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Se désinscrire par soi-même </td>
                                <td></td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                            </tr>
                            <tr>
                                <td colspan="5" style="font-weight: bold;">PAGE</td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Créer / Modifier / Supprimer / Partager des Pages sur le groupe</td>
                                <td>x</td>
                                <td>x</td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Placer en favoris une page du groupe</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                            </tr>
                            <tr>
                                <td colspan="5" style="font-weight: bold;">WIDGET</td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Widget Favoris = Ajouter / Modifier / Supprimer Lien</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Widget Fichier = Ajouter / Modifier / Supprimer Fichiers</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Widget Lien = Modifier Lien</td>
                                <td>x</td>
                                <td>x</td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Widget Editeur = Modifier Texte</td>
                                <td>x</td>
                                <td>x</td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Widget Carrousel = Créer / Modifier / Supprimer Image</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Widget Gallerie Images = Créer / Modifier / Supprimer Image</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Widget Chat = Ajouter commentaires</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Widget Chat = Modifier / Supprimer Commentaires des membres du groupe</td>
                                <td>x</td>
                                <td>x</td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Widget Chat = Masquer Commentaires des membres du groupe</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                            </tr>
                            <tr>
                                <td colspan="5" style="font-weight: bold;">BLOG</td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Créer / Modifier / Supprimer / Partager un blog sur le groupe</td>
                                <td>x</td>
                                <td>x</td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Créer des articles sur les blogs du groupe</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Modifier / Supprimer ses articles sur les blogs du groupe</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Modifier / Supprimer des articles de blog des autres membres du groupe</td>
                                <td>x</td>
                                <td>x</td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Ajouter des commentaires sur les articles du blog</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Modifier / Supprimer ses propres commentaires</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Modifier / Supprimer les commentaires des autres membre du groupe de ses articles</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Modifier / Supprimer les commentaires des autres membre du groupe sur l'ensemble du blog</td>
                                <td>x</td>
                                <td>x</td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td colspan="5" style="font-weight: bold;">PROJET</td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Créer / Modifier / Supprimer / Partager des projets sur le groupe</td>
                                <td>x</td>
                                <td>x</td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Créer des taches sur les projets du groupe</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Modifier / Supprimer ses propres tâches</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Affecter des tâches aux autres membres du groupe</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Modifier / Supprimer des Tâches à des autres membres du groupe</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Ajouter des commentaires sur les tâches</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Modifier / Supprimer ses propres commentaires de tâches</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Modifier / Supprimer les commentaires des autres membre du groupe de ses taches</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Modifier / Supprimer les commentaires des taches sur l'ensemble du projet</td>
                                <td>x</td>
                                <td>x</td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td colspan="5" style="font-weight: bold;">CALENDRIER</td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Créer / Modifier / Supprimer / Partager un calendrier sur le groupe</td>
                                <td>x</td>
                                <td>x</td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Créer des évènements sur les calendriers du groupe</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="text-align:left;">Créer / Modifier / Supprimer / Partager des évènements sur les calendriers du groupe</td>
                                <td>x</td>
                                <td>x</td>
                                <td>x</td>
                                <td></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block localjavascript %}
    $(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_core_'~access~'_group_ajax_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_core_'~access~'_group_ajax_usersin',{'id':group.id}) }}",
                "data": function ( d ) {
                    return $.extend( {}, d, {
                        "fgcanshare": "{{ group.fgcanshare }}"
                    });
                }               
            },    
            "drawCallback": function(settings) {
                $(".switch").bootstrapSwitch();
            },                          
        });

        
    });

    function addUsers(userid) {
        $.ajax({
            rowId: 2,
            method: "POST",
            url: "{{ path('app_core_'~access~'_group_ajax_usergroup_add') }}",
            data: "userid="+userid+"&groupid="+{{ group.id }},
            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) {
        $.ajax({
            rowId: 2,
            method: "POST",
            url: "{{ path('app_core_'~access~'_group_ajax_usergroup_del') }}",
            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(id) {
        $.ajax({
            method: "POST",
            url: "{{ path('app_core_'~access~'_group_ajax_changerole') }}",
            data: {
                "group": {{ group.id }},
                "user": id,
                "role": $("#roleuser-"+id).val(),
            }
        });

    } 

    function showMail() {
        $("#mymodal").find(".modal-title").html("INVITATION");
        var url="{{ path('app_core_mail_invitationgroup',{id:group.id}) }}";
        $("#mymodal").find("#framemodal").attr("src",url);
        $("#mymodal").modal().show();
    }        

    function showInvitations() {
        $("#mymodal").find(".modal-title").html("SUVI DES INVITATIONS");
        var url="{{ path('app_core_'~access~'_group_invitation',{id:group.id}) }}";
        $("#mymodal").find("#framemodal").attr("src",url);
        $("#mymodal").modal().show();
    }      
{% endblock %}
