{% extends 'admin/layout.html.twig' %}

{% block body_id 'admin_post_index' %}
{% block title %} Utilisateur : {{ user.nom|default('') ~ ' ' ~ user.prenom|default('') }} {% endblock %}

{% block main %}

{{ include('form/utilisateur_edit.html.twig') }}

    <ul class="nav nav-tabs" role="tablist" id="content-tab" data-tabs="tabs">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="1-tab" data-bs-toggle="tab" data-bs-target="#tab-1" type="button" role="tab"  aria-selected="true">Gestion des droits</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="2-tab" data-bs-toggle="tab" data-bs-target="#tab-2" type="button" role="tab"  aria-selected="true">Organisation RH</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="3-tab" data-bs-toggle="tab" data-bs-target="#tab-3" type="button" role="tab"  aria-selected="true">Attachements</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="4-tab" data-bs-toggle="tab" data-bs-target="#tab-4" type="button" role="tab"  aria-selected="true">Tchat</button>
        </li>

    </ul>
    <div class="tab-content bg-primary px-3 py-3" id="myTabContent">
        <div class="tab-pane fade show active" id="tab-1" role="tabpanel" aria-labelledby="1-tab">
            <div class="px-2 py-2 bg-white">
                <div class="table-responsive table-wrapper-scroll-y">
                    <table class="table table-bordered table-sm align-middle table-striped" id="table-rights">
                        <thead>
                            <th colspan="2"  width="50%" class="text-center">Fonctionnalité</th>
                            {% for uSite in user.utilisateurSites %}
                                <th>{{ uSite.site.nom }}</th>
                            {% endfor %}
                        </thead>
                        <tbody>
                        {% for groupe in groupeDroits %}
                            {% for droitG in groupe.droitPortails %}
                                <tr>
                                    {% if loop.index == 1 %}
                                        <td width="2%" rowspan="{{ groupe.droitPortails|length }}" style="writing-mode: vertical-rl;text-orientation: mixed;text-align:center">{{ groupe.libelle|upper }}</td>
                                    {% endif %}
                                    <td>{{ droitG.libelle }}</td>
                                    {% for uSite in user.utilisateurSites %}
                                        <td width="3%" style="text-align: center;">
                                            <input type="checkbox" class="form-check-input filled-in" name="site-{{ uSite.site.id }}-right-{{ droitG.id }}" value="{{ user.droits[uSite.site.id][droitG.id] }}" checked="{{ user.droits[uSite.site.id][droitG.id] == 1 ? 'checked' : '' }}">
                                        </td>
                                    {% endfor %}
                                </tr>
                            {% endfor %}
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="tab-pane fade show" id="tab-2" role="tabpanel" aria-labelledby="2-tab">
            <div class="px-4 py-2 bg-white">
                <div class="text-center color-primary">en cours de développement</div>
                {#<p class="text-center pt-2">CONGÉS</p>#}
                {#<p class="form-check-inline">Le supérieur hiérarchique de {{ user.prenom }} {{ user.nom|upper }} est un utilisateur de l'intranet? </p>#}
                {#<div class="form-check form-check-inline">#}
                    {#<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="oui" {{ user.responsable is not empty ? 'checked' : '' }}>#}
                    {#<label class="form-check-label" for="inlineRadio1">OUI</label>#}
                {#</div>#}
                {#<div class="form-check form-check-inline">#}
                    {#<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="non" {{ user.responsable is empty ? 'checked' : '' }}>#}
                    {#<label class="form-check-label" for="inlineRadio2">NON</label>#}
                {#</div>#}
                {#<div class="form-check-inline" style="vertical-align: middle;">#}
                    {#{{ form_row(form.responsable) }}#}
                {#</div>#}
                {#{%  if user.utilisateursEquipe is not empty %}#}
                    {#<p>Utilisateurs dont {{ user.prenom }} {{ user.nom|upper }} est le supérieur hiérarchique : </p>#}
                    {#<div style="position:relative; padding-right: 3rem">#}
                        {#<table class="table table-bordered table-sm align-middle table-striped" id="tab-subs">#}
                            {#<thead>#}
                            {#<th width="50%" class="text-center">Utilisateurs</th>#}
                            {#<th width="50%" class="text-center"></th>#}
                            {#</thead>#}
                            {#<tbody>#}
                            {#{% for suser in user.utilisateursEquipe %}#}
                                {#<tr>#}
                                    {#<td style="padding-left:2rem;">{{ suser.prenom }} {{ suser.nom|upper }}</td>#}
                                    {#<td class="text-center"><i class="fa fa-trash remove_user" data-id="{{ suser.id }}"></i></td>#}
                                {#</tr>#}
                            {#{% endfor %}#}
                            {#</tbody>#}
                        {#</table>#}
                        {#<a  id="add_subordonnee"><i class="fa fa-plus" style="position:absolute;top:0;right:-9px; width: 35px; height: 35px; border-radius: 20px; text-align:center; background: #14a085;font-size: 1.3em;line-height: 2.3rem;color: white;"></i></a>#}
                    {#</div>#}

                {#{% endif %}#}
            </div>
        </div>
        <div class="tab-pane fade show" id="tab-3" role="tabpanel" aria-labelledby="3-tab">
            <div class="px-2 py-2 bg-white">
                <div class="text-center color-primary"></i>en cours de développement</div>
            </div>
        </div>
        <div class="tab-pane fade show" id="tab-4" role="tabpanel" aria-labelledby="4-tab">
            <div class="px-2 py-2 bg-white">
                <div class="text-center color-primary"></i>en cours de développement</div>
            </div>
        </div>
    </div>
    <div id="popup-add-subordonnee" style="display:none" >
        <div id="body-add-subordonnee"></div>
    </div>

{% endblock %}

 {% block javascripts %}
     <script>
         var page = '{{ page|default(null) }}';
         var userId = {{ user.id }};

         function loadSub(data) {
             var tr = '<tr><td style="padding-left:2rem;">'+ data.nom  + ' ' + data.prenom+'</td><td class="text-center"><i class="fa fa-trash remove_user" data-id='+ data.id +'></i></td></tr>';
             $('#tab-subs > tbody').append(tr);
             $('#popup-add-subordonnee').dxPopup("instance").hide();
         }

     </script>
    {{ parent() }}
 {% endblock %}