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

{% block localstyle %}
<style>
    #alertpassword input,#alertpassword label  { display:none }
    #alertpassword .form-group {margin:0px !important }
</style>
{% endblock %}


{% block body %}
{{ form_start(form) }}
    <h1 class="page-header">
    {% if access=="admin" or access=="modo" %}
        {% if mode=="update" %}
            Modification Utilisateur = {{ user.username}}
        {% else %}
            Création Utilisateur
        {% endif %}
    {% else %}
        Profil
    {% endif %}
    </h1>

    {{ form_widget(form.submit) }}
    {% if access=="admin" or access=="modo" %}
        <a class="btn btn-secondary" href={{ path('app_'~access~'_user') }}>Annuler</a>
        {% if mode=="update" %}
            {% if access=="admin" %}
                <a class="btn btn-danger float-end" href={{ path('app_'~access~'_user_delete',{id:user.id}) }} data-method="delete" data-confirm="Êtes-vous sûr de vouloir supprimer cet enregistrement ?">Supprimer</a>
            {% else %}
                {% if not user.hasrole("ROLE_ADMIN") and not user.hasrole("ROLE_MODO") %}
                    <a class="btn btn-danger float-end" href={{ path('app_'~access~'_user_delete',{id:user.id}) }} data-method="delete" data-confirm="Êtes-vous sûr de vouloir supprimer cet enregistrement ?">Supprimer</a>
                {% endif %}
            {% endif %}
        {% endif %}
    {% else %}
        <a class="btn btn-secondary" href={{ path('app_home') }}>Annuler</a>
    {% endif %}

    {% if app.session.flashbag.has('error') %}
        <div class='alert alert-danger' style='margin: 5px 0px'>
            <strong>Erreur</strong><br>
            {% for flashMessage in app.session.flashbag.get('error') %}
                {{ flashMessage | raw }}<br>
            {% endfor %}
        </div>
        <br>
    {% endif %}

    {% if app.session.flashbag.has('notice') %}
        <div class='alert alert-info' style='margin: 5px 0px'>
            <strong>Information</strong><br>
            {% for flashMessage in app.session.flashbag.get('notice') %}
                {{ flashMessage | raw }}<br>
            {% endfor %}
        </div>
        <br>
    {% endif %}

    <div class="row">
        <div class="col col-sm-12">
            <div style="width:90px; margin:auto;">
                {% set avatar= "noavatar.png" %}
                {% if user.avatar %}
                    {% set avatar= user.avatar %}
                {% endif %}
                <img id="user_avatar_img" src="{{ path('app_minio_image',{file:"avatar/"~avatar}) }}" style="max-width:90px;background-color:var(--colorbgbodydark);">
                {{ form_widget(form.avatar) }}
                <a class="btn btn-info btn-modal" style="width:100%" data-modalid="mymodallarge" data-modaltitle="Avatar" data-modalurl="{{ path('app_user_crop01', {"type": "avatar", "reportinput": "#user_avatar" }) }}" title='Ajouter un Avatar'>Modifier</a>
            </div>
        </div>

        <div class="col col-sm-6">
            <div class="card mt-3">
                <div class="card-header">
                    <i class="fa fa-key fa-fw"></i> Connexion
                </div>

                <div class="card-body">
                    {{ form_row(form.username) }}

                    <div class='alert alert-info' style='font-size: 80%;padding: 5px;margin-top:-2px; border-radius:0px 0px 0.25rem 0.25rem'>
                        Formatez votre login sous la forme prenom.nom dans la mesure du possible<br>
                        Taille minimum = 5 caractères<br>
                        Caractères interdits = accent, espace, caractères spéciaux sauf @ . - _<br>
                    </div>

                    {% if form.password is defined %}
                        {{ form_row(form.password) }}
                        <div id="alertpassword">{{ form_row(form.passwordplain) }}</div>
                        <div class='alert alert-info' style='font-size: 80%;padding: 5px;margin-top:-2px; border-radius:0px 0px 0.25rem 0.25rem'>
                            Le mot de passe doit comporter au moins 8 caractères, avec obligatoirement des lettres, chiffres et caractères spéciaux.
                        </div>    
                    {% endif %}

                    {% if form.roles is defined %}
                        {{ form_row(form.roles) }}
                    {% endif %}                       
                </div>
            </div>

            {% if access=="admin" %} 
            <div id="cardmodos" class="card mt-3">
                <div class="card-header">
                    <i class="fa fa-users fa-fw"></i> {{ appNiveau01label }}s Modérés
                </div>

                <div class="card-body">
                    {% if is_granted('ROLE_ADMIN') %} 
                    <bouton class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modomodal" title='Ajouter'>Ajouter</bouton>
                    <br><br>                    
                    {% endif %}
                    
                    {{ form_widget(form.linkmodos) }}

                    <div class="dataTable_wrapper">
                        <table id="tbllinkmodo" class="table table-striped table-bordered table-hover dataTable" style="width:100%">
                            <thead>
                            <tr>
                                <th width="70px">Action</th>
                                <th>{{ appNiveau01label }}</th>
                            </tr>
                            </thead>

                            <tbody>
                            {% for modo in user.modos %}
                                <tr id="linkmodo{{ modo.niveau01.id }}">
                                    <td><a style="cursor:pointer"><i class="fa fa-trash fa-fw" onclick="removeLinkModo({{ modo.niveau01.id }})"></i></a></td>                                  
                                    <td>
                                        {{ modo.niveau01.label }}
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>   
            {% endif %}  

            <div class="card mt-3">
                <div class="card-header">
                    <i class="fa fa-pencil fa-fw"></i> Motivations
                </div>

                <div class="card-body">
                    {{ form_row(form.motivation) }}
                </div>
            </div>

            {% if access=="admin" or access=="modo"%}
                <div class="card mt-3">
                    <div class="card-header">
                        <i class="fa fa-key fa-fw"></i> Notes Administrateur / Modérateur
                    </div>           
                    <div class="card-body">     
                        {{ form_widget(form.note) }}
                    </div>
                </div>
            {%endif%}

            <div id="panelvisite" class="card mt-3">
                <div class="card-header">
                    <i class="fa fa-user fa-fw"></i> Visite
                </div>

                <div class="card-body">
                    {{ form_row(form.visitedate) }}
                    {{ form_row(form.visitecpt) }}
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="card mt-3">
                <div class="card-header">
                    <i class="fa fa-pencil fa-fw"></i> Informations
                </div>

                <div class="card-body">
                    {{ form_row(form.niveau01) }}
                    {%if form.niveau02 is defined %}{{ form_row(form.niveau02) }}{%endif%}
                    {%if form.niveau03 is defined %}{{ form_row(form.niveau03) }}{%endif%}
                    {%if form.niveau04 is defined %}{{ form_row(form.niveau04) }}{%endif%}
                    {{ form_row(form.firstname) }}
                    {{ form_row(form.lastname) }}
                    {{ form_row(form.email) }}
                    {{ form_row(form.isvisible) }}
                </div>
            </div>

            {% if appGroupuse %}
            <div class="card mt-3">
                <div class="card-header">
                    <i class="fa fa-users fa-fw"></i> Groupes
                </div>

                <div class="card-body">
                    <bouton class="btn btn-success" data-bs-toggle="modal" data-bs-target="#groupmodal" title='Ajouter'>Inscription à un Groupe</bouton>
                    <br><br>

                    {{ form_widget(form.linkgroups) }}

                    <table id="tbllinkgroup" class="table table-striped table-bordered table-hover dataTable" style="width:100%">
                        <thead>
                        <tr>
                            <th width="70px">Action</th>
                            <th>Groupe</th>
                        </tr>
                        </thead>

                        <tbody>
                        {% for usergroup in user.groups %}
                            <tr id="linkgroup{{ usergroup.group.id }}">
                                {% set canleave = true %}
                                {% if usergroup.group.id<0 or usergroup.group.owner==user %}
                                    {% set canleave = false %}
                                {% elseif access!="admin" and access!="modo"%}
                                    {% if not usergroup.group.isworkgroup and not usergroup.group.isopen %}
                                        {% set canleave = false %}
                                    {% endif %}
                                {% endif %}

                                {% if canleave  %}
                                    <td><a style="cursor:pointer" title="Se Désinscrire"><i class="fa fa-sign-out-alt fa-fw" onclick="removeLinkGroup({{ usergroup.group.id }})"></i></a></td>
                                {% else %}
                                    <td></td>                                    
                                {% endif %}
                                
                                <td>
                                    {{ usergroup.group.label }}
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            {% endif %}

            <div class="card mt-3">
                <div class="card-header">
                    <i class="fa fa-sitemap fa-fw"></i> Organisation
                </div>
                <div class="card-body">
                    {{ form_row(form.job) }}
                    {{ form_row(form.position) }}
                    {{ form_row(form.postaladress) }}
                    {{ form_row(form.telephonenumber) }}                    
                </div>
            </div>  

            {% if auditUse and mode=="update" and (access=="admin" or access=="modo" or access=="audit") %}
                {{ render(path("app_"~access~"_audit_renderid",{entityname:"User",entityid:user.id})) }}
            {% endif %}

        </div>
    </div>


    <div id="groupmodal" class="modal fade bs-item-modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">AJOUTER UN GROUPE</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <table id="tbllistgroup" class="table table-striped table-bordered table-hover" style="width:100%">
                        <thead>
                        <tr>
                            <th width="70px" class="no-sort">Action</th>
                            <th style="width:500px" >Groupe</th>
                        </tr>
                        </thead>

                        <tbody>
                        {% set listidgroup = [] %}
                        {% for usergroup in user.groups %}
                            {% set listidgroup = listidgroup|merge([usergroup.group.id]) %}
                        {% endfor %}

                        {% for group in listgroups %}
                            {% if group.id in listidgroup %}
                                {% set style = "display:none;" %}
                            {% else %}
                                {% set style = "" %}
                            {% endif %}

                            <tr id="listgroup{{ group.id }}" style="{{ style }}">
                                <td><a style="cursor:pointer"><i class="fa fa-plus fa-fw" onclick="addLinkGroup({{ group.id }})"></i></a></td>
                                <td id="listgrouplabel{{ group.id }}">
                                    {{ group.label }}
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


    <div id="modomodal" class="modal fade bs-item-modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">AJOUTER UN {{ appNiveau01label|upper }}</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <table id="tbllistmodo" class="table table-striped table-bordered table-hover" style="width:100%">
                        <thead>
                        <tr>
                            <th width="70px" class="no-sort">Action</th>
                            <th style="width:500px" >{{ appNiveau01label }}</th>
                        </tr>
                        </thead>

                        <tbody>
                        {% set listidmodo = [] %}
                        {% for usermodo in user.modos %}
                            {% set listidmodo = listidmodo|merge([usermodo.niveau01.id]) %}
                        {% endfor %}

                        {% for niveau01 in listmodos %}
                            {% if niveau01.id in listidmodo %}
                                {% set style = "display:none;" %}
                            {% else %}
                                {% set style = "" %}
                            {% endif %}

                            <tr id="listmodo{{ niveau01.id }}" style="{{ style }}">
                                <td><a style="cursor:pointer"><i class="fa fa-plus fa-fw" onclick="addLinkModo({{ niveau01.id }})"></i></a></td>
                                <td id="listmodolabel{{ niveau01.id }}">
                                    {{ niveau01.label }}
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{{ form_end(form) }}
{% endblock %}

{% block localscript %}
    <script>
        $(document).ready(function() {
            $("#user_password_first").val("");
            select2niveau02();
            select2niveau03();
            select2niveau04();

            {% if access=="modo" %}
                $("label[for='user_roles_0']").hide();
                $("label[for='user_roles_1']").hide();
            {% endif %}

            requireniveau();
        });

        $(document.body).on("change","#user_roles",function(){

            requireniveau();

        });

        function requireniveau() {
            roles=[];
            if($("#user_roles_0").is(":checked")) roles.push("ROLE_ADMIN");
            if($("#user_roles_1").is(":checked")) roles.push("ROLE_MODO");
            if($("#user_roles_2").is(":checked")) roles.push("ROLE_MASTER");
            if($("#user_roles_3").is(":checked")) roles.push("ROLE_MANAGER");
            if($("#user_roles_4").is(":checked")) roles.push("ROLE_USER");

            {% if "ALL" in appNiveau02mandatory %}
                $("#user_niveau02").attr("required","required");
                $("label[for='user_niveau02']").text("{{appNiveau02label}} *");
            {% else %}
                $("#user_niveau02").removeAttr("required");
                $("label[for='user_niveau02']").text("{{appNiveau02label}}");
                {% for mandatory in appNiveau02mandatory %}
                    if(roles.includes("{{ mandatory }}")) {
                        $("#user_niveau02").attr("required","required");
                        $("label[for='user_niveau02']").text("{{appNiveau02label}} *");
                    }
                {% endfor %}
            {% endif %}

            {% if "ALL" in appNiveau03mandatory %}
                $("#user_niveau03").attr("required","required");
                $("label[for='user_niveau03']").text("{{appNiveau03label}} *");
            {% else %}
                $("#user_niveau03").removeAttr("required");
                $("label[for='user_niveau03']").text("{{appNiveau03label}}");
                {% for mandatory in appNiveau03mandatory %}
                    if(roles.includes("{{ mandatory }}")) {
                        $("#user_niveau03").attr("required","required");
                        $("label[for='user_niveau03']").text("{{appNiveau03label}} *");
                    }
                {% endfor %}
            {% endif %}

            {% if "ALL" in appNiveau04mandatory %}
                $("#user_niveau04").attr("required","required");
                $("label[for='user_niveau04']").text("{{appNiveau04label}} *");
            {% else %}
                $("#user_niveau04").removeAttr("required");
                $("label[for='user_niveau04']").text("{{appNiveau04label}}");
                {% for mandatory in appNiveau04mandatory %}
                    if(roles.includes("{{ mandatory }}")) {
                        $("#user_niveau04").attr("required","required");
                        $("label[for='user_niveau04']").text("{{appNiveau04label}} *");
                    }
                {% endfor %}
            {% endif %}
            
            if(roles.includes("ROLE_MODO")) {
                $("#cardmodos").show();
            }
            else {
                $("#cardmodos").hide();
            }
        }

        $(document.body).on("change","#user_niveau01",function(){
            $("#user_niveau02").empty();
            $("#user_niveau03").empty();
            $("#user_niveau04").empty();
            select2niveau02();
            select2niveau03();
            select2niveau04();
        });   

        $(document.body).on("change","#user_niveau02",function(){
            $("#user_niveau03").empty();
            $("#user_niveau04").empty();
            select2niveau03();
            select2niveau04();
        });   

        $(document.body).on("change","#user_niveau03",function(){
            $("#user_niveau04").empty();
            select2niveau04();
        });   

        function select2niveau02() {
            $('#user_niveau02').select2({
                theme: 'bootstrap4',
                language: "fr",
                ajax: {
                    data: function (params) {
                        var query = {
                            niveau01: $("#user_niveau01").val(),
                        }
                        return query;
                    }
                }
            });            
        }

        function select2niveau03() {
            $('#user_niveau03').select2({
                theme: 'bootstrap4',
                language: "fr",
                ajax: {
                    data: function (params) {
                        var query = {
                            niveau02: $("#user_niveau02").val(),
                        }
                        return query;
                    }
                }
            });            
        }

        function select2niveau04() {
            $('#user_niveau04').select2({
                theme: 'bootstrap4',
                language: "fr",
                ajax: {
                    data: function (params) {
                        var query = {
                            niveau03: $("#user_niveau03").val(),
                        }
                        return query;
                    }
                }
            });            
        }

        $(document).ready(function() {
            // Init Group
            var linkgroups="";
            {% for usergroup in user.groups %}
                linkgroups+={{ usergroup.group.id }}+",";
            {% endfor %}
            $("#user_linkgroups").val(linkgroups); 

            // Init Modo
            var linkmodos="";
            {% for modo in user.modos %}
                linkmodos+={{ modo.niveau01.id }}+",";
            {% endfor %}
            $("#user_linkmodos").val(linkmodos);   


            $('#tbllistgroup').DataTable({
                columnDefs: [ { "targets": 'no-sort', "orderable": false },{ "targets": 'no-visible', "visible": false } ],
                responsive: true,
                scrollX: false,
                iDisplayLength: 100,
                processing: true,
                order: [[ 1, "asc" ]],
            });

            $('#tbllistmodo').DataTable({
                columnDefs: [ { "targets": 'no-sort', "orderable": false },{ "targets": 'no-visible', "visible": false } ],
                responsive: true,
                scrollX: false,
                iDisplayLength: 100,
                processing: true,
                order: [[ 1, "asc" ]],
            });

        });

        function removeLinkGroup(id) {
            if (confirm("Désirez vous vraiment vous désinscrire de ce groupe ?")) {
                // On supprime la ligne du tableau
                $("#linkgroup"+id).remove();

                // On supprime l'id de la liste
                $("#user_linkgroups").val($("#user_linkgroups").val().replace(id+",",""));

                // On rend visible la ligne de liste complète
                $("#listgroup"+id).show();
            }
        }

        function addLinkGroup(id) {
            // On cache la ligne du tableau
            $("#listgroup"+id).hide();

            // On ajoute l'id de la liste
            $("#user_linkgroups").val($("#user_linkgroups").val()+id+",");

            // On ajoute la ligne de liste des liens
            html ="<tr id='linkgroup"+id+"'>";
            html+="<td><a style='cursor:pointer' title='Se Désinscrire'><i class='fa fa-sign-out fa-fw' onclick='removeLinkGroup("+id+")'></i></a></td>";
            html+="<td>"+$("#listgrouplabel"+id).html()+"</td>";
            html+="</tr>";

            $('#tbllinkgroup .dataTables_empty').remove();
            $('#tbllinkgroup > tbody').append(html);

            // On ferme automatiquement la modal s'il n'y a plus de ligne dans le tableau
            if($("#tbllistgroup tr:visible").length==1) {
                $("#groupmodal").modal('hide');
            }
        }

        function removeLinkModo(id) {
            // On supprime la ligne du tableau
            $("#linkmodo"+id).remove();

            // On supprime l'id de la liste
            $("#user_linkmodos").val($("#user_linkmodos").val().replace(id+",",""));

            // On rend visible la ligne de liste complète
            $("#listmodo"+id).show();
        }

        function addLinkModo(id) {
            // On cache la ligne du tableau
            $("#listmodo"+id).hide();

            // On ajoute l'id de la liste
            $("#user_linkmodos").val($("#user_linkmodos").val()+id+",");

            // On ajoute la ligne de liste des liens
            html ="<tr id='linkmodo"+id+"'>";
            html+="<td><a style='cursor:pointer'><i class='fa fa-trash fa-fw' onclick='removeLinkModo("+id+")'></i></a></td>";
            html+="<td>"+$("#listmodolabel"+id).html()+"</td>";
            html+="</tr>";

            $('#tbllinkmodo .dataTables_empty').remove();
            $('#tbllinkmodo > tbody').append(html);

            // On ferme automatiquement la modal s'il n'y a plus de ligne dans le tableau
            if($("#tbllistmodo tr:visible").length==1) {
                $("#modomodal").modal('hide');
            }
        }        


    </script>    
{% endblock %}