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

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

{% block titre_page %}Liste des documents{% endblock %}
{% block resume_page %}Présentation des documents à faire lire et/ou signer par les membres de la troupe{% endblock %}
{% block description_page %}
{% endblock %}

{% macro popover(users) %}
    <div class="row">
        {% for user in users %}
            <div class="col-12 row p-1 text-center">
                <div class="col-3 p-0 text-center">
                    {% if user.user.photo %}
                    <img class="img-xs rounded-circle" src="{{ asset('uploads/user/photo/' ~ user.user.photo) }}"/>
                    {% endif %}
                </div>
                <div class="col-7 d-flex align-items-center text-start">
                    <div class="w-100 text-nowrap">{{ user.user.firstname|capitalize }}
                        {% if user.user.lastname %}
                            <br/><span class="w-100 text-nowrap fw-bold">{{ user.user.lastname|capitalize }}</span>
                        {% endif %}
                    </div>
                </div>
                <div class="col-1 d-flex align-items-center p-0 text-center">
                    {% if user.notified %}
                        <i class="ti-email text-success fs-4"></i>
                    {% else %}
                        <i class="ti-email text-danger fw-bold fs-4"></i>
                    {% endif %}
                    &nbsp;
                </div>
                <div class="col-1 d-flex align-items-center p-0 text-end">
                    {% if user.certified %}
                        <i class="ti-check text-success fw-bold fs-4"></i>
                    {% else %}
                        <i class="ti-close text-danger fw-bold fs-4"></i>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
{% endmacro %}

{% 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 documents</h5>
                    </div>
                    <div class="col-6 text-end ">
                        <a href="{{ path('add_document') }}" class="btn btn-primary rounded-pill"><i
                                    class="ti-plus"></i> Ajouter</a>
                    </div>
                </div>
                {% if documents|length == 0 %}
                    Pas de document disponible.
                {% else %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th class="text-start">Nom du document</th>
                                <th class="text-center">Fichier</th>
                                <th class="text-center">Créé le</th>
                                <th class="text-center">Nombre de validation</th>
                                <th class="text-center">Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for document in documents %}
                                <tr>
                                    <td class="text-start">
                                        <span class="h6">{{ document.title }}</span><br/>
                                        <small class="text-muted">{{ document.text }}</small>
                                    </td>
                                    <td class="text-center">
                                        <a href="{{ asset('uploads/document/' ~ document.file) }}"
                                           target="_blank">Télécharger</a>
                                    </td>
                                    <td class="text-center">{{ document.createdAt|date('d/m/Y') }}</td>
                                    <td class="text-center"
                                        data-bs-toggle="popover"
                                        data-bs-placement="bottom"
                                        data-bs-trigger="hover focus"
                                        data-bs-html="true"
                                        data-bs-content="{{ _self.popover(document.userDocuments)|e }}">
                                        {{ document.userDocuments|certified|length }} / {{ users|length }}
                                        <div class="progress"
                                        >
                                            {% if document.userDocuments|certified|length == users|length %}
                                                <div class="progress-bar bg-success" role="progressbar"
                                                     style="width: 100%"
                                                     aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                                            {% else %}
                                                <div class="progress-bar bg-warning" role="progressbar"
                                                     style="width: {{ document.userDocuments|certified|length*100/users|length }}%"
                                                     aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                                            {% endif %}
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        <a class="action-link deleteDocument" data-id="{{ document.id }}"
                                           data-info="{{ document.title }}"
                                           href="#modal-delete-document" role="button" data-bs-toggle="modal"><i
                                                    class="ti-trash"></i></a>
                                        <a class="action-link sendDocument" data-id="{{ document.id }}"
                                           data-title="{{ document.title }}"
                                           href="#modal-send-mail" role="button" data-bs-toggle="modal"><i
                                                    class="ti-email"></i></a>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}

{% block modals %}
    <div class="modal" id="modal-delete-document" 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 le document</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    Tu veux vraiment supprimer ce document ?<br/>
                    <span class="fw-bold" id="info"></span>
                </div>
                <div class="modal-footer">
                    <a href="#"
                       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>
    <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 notification de document</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 à tout<br/><span class="fw-bold">le monde</span> pour le
                    document <span class="title fw-bold">le monde</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>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('assets/js/jquery-3.7.1.min.js') }}"></script>
    <script type="text/javascript">
        $('.deleteDocument').on('click', function (element) {
            var url = "{{ path('delete_document', {'idDocument':'___'}) }}";
            url = url.replace('___', $(this).data('id'));

            $('#info').text($(this).data('info'));

            $('#modal-delete-document .modal-submit').attr('href', url);
        });

        $('.sendDocument').on('click', function (element) {
            $('#modal-send-mail .title').text($(this).data("title"));

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

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