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

{% block title %} {% trans %}COSAP - Utilisateurs{% endtrans %} {% endblock %}


{% block body %}
    {{ parent() }}

    <section class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="bug-list-search-content">
                        <form method="get" action="">
                            <div class="row">
                                <div class="col-3">
                                    <div class="position-relative">
                                        <input type="search" id="search-contacts" name="search_input" value="{{ app.request.get('search_input')}}" class="form-control" placeholder="Recherche avancée...">
                                        <div class="form-control-position">
                                            <i class="fa fa-search text-size-base text-muted la-rotate-270"></i>
                                        </div>
                                    </div>
                                </div><!-- end div search input --> 
                                <div class="col-3">
                                    <div class="bug-list-search-content">
                                        <select class="select2 select_load" style="width: 100%;" name="search_direction" onChange="this.form.submit()">
                                            <option value="">{% trans %}Choisir un direction{% endtrans %}</option>
                                            {% for direction in directions %}
                                                <option value="{{ direction.id }}" {% if direction.id == app.request.get('search_direction') %} selected {% endif %}>{{ direction.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div><!-- end div search direction --> 
                                <div class="col-3">
                                    <div class="bug-list-search-content">
                                        <select class="select2 select_load" style="width: 100%;" name="search_service" onChange="this.form.submit()">
                                            <option value="">{% trans %}Choisir un service{% endtrans %}</option>
                                            {% for service in services %}
                                                <option value="{{ service.id }}" {% if service.id == app.request.get('search_service') %} selected {% endif %}>{{ service.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div><!-- end div search service --> 
                                <div class="col-3">
                                    <div class="bug-list-search-content">
                                        <select class="select2 select_load" style="width: 100%;" name="search_groupe" onChange="this.form.submit()">
                                            <option value="">{% trans %}Choisir un groupe{% endtrans %}</option>
                                            {% for groupe in groupes %}
                                                <option value="{{ groupe.id }}" {% if groupe.id == app.request.get('search_groupe') %} selected {% endif %}>{{ groupe.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div><!-- end div search groupe --> 
                            </div><!-- end row -->
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h6 style="font-weight:500;">{% trans %}Liste des Utilisateurs{% endtrans %} <span class="badge badge badge-info badge-pill mr-2">{{ users.getTotalItemCount }}</span></h6>
                    <div class="heading-elements mt-0">
                        {% if app.user and is_granted('ROLE_AJOUTER_UTILISATEUR') %}
                            <a class="btn btn-cyan btn-sm" href="{{ path('add_user_page') }}"><i class="fa fa-plus mr-0"></i>
                                {% trans %}nouvel enregistrement{% endtrans %}
                            </a>
                        {% endif %}
                        <a class="btn btn-warning btn-sm" href="{{ path('user_page') }}" title="{% trans %}Actualiser{% endtrans %}"><i class="fa fa-refresh"></i></a>
                    </div>
                </div>  <!-- end card-header -->
                <div class="card-body">
                    {% if not users|length %}

                        <div class="alert alert-info" role="alert" style="padding:8px;">
                            <i class="icon fa fa-info-circle"></i> <span id="content-message"> {% trans %}Aucun enregistrement trouvé{% endtrans %}</span>
                        </div>

                    {% else %}
                    <div class="table-responsive m-t-40">
                        <table class="display nowrap table table-hover table-bordered" cellspacing="0" width="100%" style="font-size:13.5px;">
                            <thead>
                            <tr>
                                <th>{% trans %}Nom complet{% endtrans %}</th>
                                <th>{% trans %}Groupe{% endtrans %}</th>
                                <th style="text-align:center;">{% trans %}N° Téléphone{% endtrans %}</th>
                                <th>{% trans %}Email{% endtrans %}</th>
                                <th style="text-align:center;">{% trans %}Statut{% endtrans %}</th>
                                {% if app.user and (is_granted('ROLE_AJOUTER_UTILISATEUR') or is_granted('ROLE_MODIFIER_UTILISATEUR') or is_granted('ROLE_RESET_PWD_UTILISATEUR') or is_granted('ROLE_SUPPRIMER_UTILISATEUR') or is_granted('ROLE_FAST_CONNEXION_UTILISATEUR') or is_granted('ROLE_CHANGE_ROLE_UTILISATEUR') ) %}
                                    <th style="text-align:center;">{% trans %}Actions{% endtrans %}</th>
                                {% endif %}
                            </tr>
                            </thead>
                            <tbody style="line-height:40px;">
                            {% for user in users %}
                                <tr class="rowDetail" id="row_{{ user.id }}" data-id="{{ user.id }}" {% if user.id == selected_row %} style="Background-color:#dcdfdc;" {% endif %}>
                                    <td style="min-width:200px;">
                                        <div class="media">
                                            <div class="media-left" style="padding-right:5px;">
                                                <span style="cursor:pointer;" data-toggle="popover" data-content="
                                                    <p><strong>{% trans %}Nom Utilisateur{% endtrans %} </strong> : {{ user.username }}</p>
                                                    {% if user.fonction %}<p><strong>{% trans %}Fonction{% endtrans %} </strong> : {{ user.fonction.name }}</p> {% endif %}
                                                    <p><strong>{% trans %}Genre{% endtrans %} </strong> : {{ user.genreValue }}</p>
                                                    {% if user.groupe.service %}<p><strong>{% trans %}Service{% endtrans %} </strong> : {{ user.groupe.service.name }}</p> {% endif %}
                                                    {% if user.groupe.direction %}<p><strong>{% trans %}Direction{% endtrans %} </strong> : {{ user.groupe.direction.name }}</p> {% endif %}
                                                    {% if user.fixe %}<p><strong>{% trans %}N° de Fixe{% endtrans %} </strong> : {{ user.fixe }}</p> {% endif %}"
                                                    data-original-title="{% trans %}Infos{% endtrans %}" data-trigger="hover" data-html="true">
                                                    <span class="avatar"><img src="{{ asset('uploads/avatars/'~user.path) }}" height="30" width="100%" alt="avatar" ></span>
                                                </span>
                                            </div>
                                            <div class="media-body media-middle">
                                                <a class="media-heading name">{{ user.fullName }}</a>
                                            </div>
                                        </div>
                                    </td>
                                    <td style="min-width:250px;">{{ user.groupe.name }}</td>
                                    <td style="min-width:70px;text-align:center;">
                                        {% if user.phone is not null %}

                                            +216 {{ user.phone }}

                                        {% else %}

                                            <span class="badge badge-warning badge-pill">Non défini</span>

                                        {% endif %}
                                    </td>
                                    <td style="min-width:200px;">{{ user.email }}</td>
                                    <td style="min-width:60px; text-align:center;">
                                        {% if user.enabled == 1 %}

                                            <span class="badge badge-success badge-pill">{% trans %}Actif{% endtrans %}</span>

                                        {% elseif user.enabled == 0 %}

                                            <span class="badge badge-danger badge-pill">{% trans %}Bloqué{% endtrans %}</span>

                                        {% endif %}
                                    </td>
                                    {% if app.user and (is_granted('ROLE_AJOUTER_UTILISATEUR') or is_granted('ROLE_MODIFIER_UTILISATEUR') or is_granted('ROLE_RESET_PWD_UTILISATEUR') or is_granted('ROLE_SUPPRIMER_UTILISATEUR') or is_granted('ROLE_FAST_CONNEXION_UTILISATEUR') or is_granted('ROLE_CHANGE_ROLE_UTILISATEUR') ) %}
                                    <td style="text-align: center; min-width:120px; width:120px;">
                                        <div class="btn-group">
                                            {% if app.user and is_granted('ROLE_AJOUTER_UTILISATEUR') and not user.isAccountEmailSend %}
                                                <a class="btn btn-cyan color_menu_link btn-sm mr-1" href="{{ path('email_connexion_user',{id:user.id,search_input:search_input,page:page}) }}" title="{% trans %}Email de connexion{% endtrans %}">
                                                    <i class="fa fa-envelope-o text-white"></i>
                                                </a>
                                            {% endif %}
                                            <button type="button" class="btn btn-light dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="fa fa-ellipsis-v"></i>
                                            </button>
                                            <div class="dropdown-menu animated flipInY">
                                                <a class="dropdown-item" id="show_info" data-id="{{ user.id }}" style="cursor:pointer;" data-toggle="modal" data-target="#modal_info_user">
                                                    <i class="fa fa-info-circle" aria-hidden="true" style="color:rgb(255, 0, 221);"></i> {% trans %}Plus d'infos{% endtrans %}
                                                </a>
                                                {% if app.user and is_granted('ROLE_MODIFIER_UTILISATEUR') %}
                                                    <a class="dropdown-item" href="{{ path('edit_user_page',{id:user.id,search_input:search_input, search_direction:search_direction, search_service:search_service, search_groupe:search_groupe,page:page}) }}" style="cursor:pointer;">
                                                        <i class="fa fa-pencil-square-o" aria-hidden="true" style="color:blue;"></i> {% trans %}Modifier{% endtrans %}
                                                    </a>
                                                {% endif %}
                                                {% if app.user and is_granted('ROLE_RESET_PWD_UTILISATEUR') %}
                                                    <a class="dropdown-item" href="{{ path('reset_pwd_user',{id:user.id,search_input:search_input, search_direction:search_direction, search_service:search_service, search_groupe:search_groupe, page:page}) }}" style="cursor:pointer;">
                                                        <i class="fa fa-key" aria-hidden="true" style="color:green;"></i> {% trans %}Réinitialiser Pwd{% endtrans %}
                                                    </a>
                                                {% endif %}
                                                {% if app.user and is_granted('ROLE_SUPPRIMER_UTILISATEUR') %}
                                                    <a class="dropdown-item" id="delete_data" data-id="{{ user.id }}" data-toggle="modal" data-target="#modal_delete_data">
                                                        <i class="fa fa-trash-o" style="color:red;"></i> {% trans %}Supprimer{% endtrans %}
                                                    </a>
                                                {% endif %}
                                                {% if app.user and is_granted('ROLE_FAST_CONNEXION_UTILISATEUR') %}
                                                    <a class="dropdown-item" data-id="{{ user.id }}"
                                                        href="{{ path('user_fast_authenticate', {id:user.id}) }}" >
                                                        <i class="fa fa-sign-in" style="color:#7b1fa2;"></i> {% trans %}Connexion rapide{% endtrans %}
                                                    </a>
                                                {% endif %}
                                                {% if app.user and is_granted('ROLE_CHANGE_ROLE_UTILISATEUR') %}
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item bg-danger text-white" href="{{ path('user_edit_roles_page', {id:user.id,search_input:search_input, search_direction:search_direction, search_service:search_service, search_groupe:search_groupe ,page:page}) }}">{% trans %}Changer rôles d'accès{% endtrans %}</a>
                                                {% endif %}

                                            </div>
                                        </div>
                                    </td>
                                    {% endif %}
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                        <div class="navigation pull-right" style="margin-left:20px;margin-bottom:250px;">
                            {{ knp_pagination_render(users) }}
                        </div>
                    </div><!-- end div table-responsive -->
                    {% endif  %}
                </div><!-- end div card-body -->
            </div><!-- end div card -->
        </div><!-- end div col-12 -->
    </section><!-- end div section -->

    <!--  start modal suppression data -->

    <div id="modal_delete_data" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-keyboard="false"
         data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="myModalLabel" style="color:#4b50fc">{% trans %}Suppression enregistrement{% endtrans %}</h5>
                    <a class="btn btn-danger btn-sm" data-dismiss="modal" aria-hidden="true" title="{% trans %}Fermer{% endtrans %}"><i class="fa fa-close text-white"></i></a>
                </div>
                 <div class="modal-body">
                    <p style="color:black;">{% trans %}Voulez vous vraiment supprimer cet enregistrement{% endtrans %} ?</p>
                </div>
                <form method="post" novalidate>
                    <div class="modal-footer" style="display:flex !important; justify-content:space-between">
                        <a class="btn btn-danger waves-effect btn-sm" data-dismiss="modal" style="color:white; padding:7px;"><i class="ft-x-square"></i>  {% trans %}Annuler{% endtrans %}</a>
                        <a class="btn btn-success waves-effect btn-sm" data-token-delete="{{ csrf_token('delete-item') }}" style="color:white; padding:7px" id="confirmer_delete"><i class="ft-check-square"></i>  {% trans %}Confirmer{% endtrans %}</a>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <!--  end  modal suppression data -->


     <!--  start modal show info utilisateur -->

    <div id="modal_info_user" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" data-keyboard="false"
         data-backdrop="static">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-primary" id="myLargeModalLabel">{% trans %}Profil Utilisateur{% endtrans %}</h5>
                    <a class="btn btn-danger btn-sm" data-dismiss="modal" aria-hidden="true" title="{% trans %}Fermer{% endtrans %}"><i class="fa fa-close text-white"></i></a>
                </div>
                <div class="modal-body" style="min-height:262px;">

                    <div id="loading_info" style="position:absolute; left:45%; top:30%;">
                        <div>
                            <img src="{{ asset('template/app-assets/images/icons/loading.gif')}}" height="70"/>
                        </div>
                    </div>

                    {{ include('Administration/user/infos.html.twig') }}

                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <!--  end modal show info utilisateur -->


{% endblock %}


{% block javascripts %}
    {{ parent() }}

    <script type="text/javascript">

        {% for flash_message in app.session.flashBag.get('success') %}

            toastr.success('{{ flash_message }}', {positionClass: 'toast-top-center', containerId: 'toast-top-center'});

        {% endfor %}

        {% for flash_message in app.session.flashBag.get('info') %}

            toastr.info('{{ flash_message }}', {positionClass: 'toast-top-center', containerId: 'toast-top-center'});

        {% endfor %}

        {% for flash_message in app.session.flashBag.get('warning') %}

            toastr.warning('{{ flash_message }}', {positionClass: 'toast-top-center', containerId: 'toast-top-center'});

        {% endfor %}

        {% for flash_message in app.session.flashBag.get('error') %}

            toastr.error('{{ flash_message }}', {positionClass: 'toast-top-center', containerId: 'toast-top-center'});

        {% endfor %}

    </script>

    {% include('Administration/user/ajax/delete.html.twig') %}

    {% include('Administration/user/ajax/profil.html.twig') %}

{% endblock %}