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

{% block title %}Liste des utilisateurs{% endblock %}

{% block body %}
    <div class="col-md-12 mb-3">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-6">
                        <h5 class="card-title">Liste des utilisateurs</h5>
                    </div>
                    <div class="col-6 text-end ">
                        <a href="{{ path('user_add') }}" class="btn btn-primary rounded-pill"><i
                                    class="ti-plus"></i> Ajouter</a>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th></th>
                            <th>Nom</th>
                            <th>Mail</th>
                            <th class="text-center">Statut</th>
                            <th class="text-center">Rôle</th>
                            <th class="text-center">Date d'inscription</th>
                            <th class="text-center">Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for user in usersActifs %}
                            <tr>
                                <td class="text-center">
                                    {% if user.photo %}
                                        <img class="mainnav__avatar img-sm rounded-circle border"
                                             src="{{ asset('uploads/user/photo/' ~ user.photo) }}"/>
                                    {% endif %}
                                </td>
                                <td>
                                    <span class="h6">{{ user.firstname ~ ' ' ~ user.lastname }}</span>
                                </td>
                                <td>
                                    <span class="h6">{{ user.email }}</span>
                                </td>
                                <td class="text-center">
                                    {% if user.status %}
                                        {% set status = constant('App\\Constants\\StatusUser::' ~ user.status) %}
                                        <span class="text-{{ status.color }} fw-bolder"><i
                                                    class="ti-{{ status.icon }} fw-bold"></i> </span>
                                    {% endif %}</td>
                                {% set role = constant('App\\Constants\\Role::' ~ user.roles|first) %}
                                <td class="text-center">{{ role.label}}</td>
                                <td class="text-center">{{ user.dateInscription|date('d/m/y') }}</td>
                                <td class="text-center">
                                    {% if user.status == constant('App\\Constants\\StatusUser::ACTIF')['code'] or user.status == constant('App\\Constants\\StatusUser::NON_ACTIF')['code'] %}
                                        <a class="action-link" href="{{ path('user_edit', {'idUser':user.id}) }}"><i class="ti-pencil"></i></a>
                                        <a class="deleteUser action-link" data-bs-toggle="modal" role="button" href="#modal-delete" data-email="{{ user.email }}" data-id="{{ user.id }}"><i class="ti-trash"></i></a>
                                    {% endif %}
                                    {% if user.status == constant('App\\Constants\\StatusUser::EN_COURS')['code'] %}
                                        <a class="sendMailForUser action-link" data-bs-toggle="modal" role="button" href="#modal-send-mail" data-email="{{ user.email }}" data-id="{{ user.id }}"><i class="ti-email"></i></a>
                                        <a class="deleteUser action-link" data-bs-toggle="modal" role="button" href="#modal-delete" data-email="{{ user.email }}" data-id="{{ user.id }}"><i class="ti-trash"></i></a>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
    <div class="col-md-12 mb-3">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-6">
                        <h5 class="card-title">Liste des anciens</h5>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th></th>
                            <th>Nom</th>
                            <th class="text-center">Date d'inscription</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for user in usersInactifs %}
                            <tr>
                                <td class="text-center">
                                    {% if user.photo %}
                                        <img class="mainnav__avatar img-sm rounded-circle border"
                                             src="{{ asset('uploads/user/photo/' ~ user.photo) }}"/>
                                    {% endif %}
                                </td>
                                <td>
                                    <span class="h6">{{ user.firstname ~ ' ' ~ user.lastname }}</span>
                                </td>
                                <td class="text-center">{{ user.dateInscription|date('d/m/y') }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
{% endblock %}

{% block modals %}
    <div class="modal" id="modal-send-mail" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2"
         tabindex="0">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalToggleLabel2">Envoyer une demande d'inscription</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    Tu es sûr de vouloir envoyer une demande à <br><span class="user-for-send"></span> ?
                </div>
                <div class="modal-footer">
                    <a class="btn btn-primary modal-submit"><i class="ti-email"></i> Envoyer</a>
                    <button class="btn btn-light" data-bs-dismiss="modal" aria-label="Close">Annuler</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="modal-delete" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2"
         tabindex="0">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalToggleLabel2">Supprimer adhérent</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    Tu es sûr de vouloir supprimer <br><span class="user-for-send"></span> ?
                </div>
                <div class="modal-footer">
                    <a class="btn btn-primary modal-submit"><i class="ti-trash"></i> Supprimer</a>
                    <button class="btn btn-light" data-bs-dismiss="modal" aria-label="Close">Annuler</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('assets/js/jquery-3.7.1.min.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function (e) {
            $('.sendMailForUser').on('click', function (element) {
                $('#modal-send-mail .user-for-send').text($(this).data("email"));

                var url = "{{ path('user_mail', {'userId':'___'}) }}"
                url = url.replace('___', $(this).data('id'));

                $('#modal-send-mail .modal-submit').attr('href', url);
            });

            $('.deleteUser').on('click', function (element) {
                $('#modal-delete .user-for-send').text($(this).data("email"));

                var url = "{{ path('user_delete', {'userId':'___'}) }}"
                url = url.replace('___', $(this).data('id'));

                $('#modal-delete .modal-submit').attr('href', url);
            });
        });
    </script>
{% endblock %}