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

{% block title %}Mes documents{% endblock %}

{% block titre_page %}Mes documents{% endblock %}
{% block resume_page %}Les documents que je dois connaitre, lire ou signer{% endblock %}
{% block description_page %}
{% 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 documents</h5>
                    </div>
                </div>

                {% if documents|length == 0 %}
                    Pas de document disponible.
                {% else %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th></th>
                                <th class="text-start">Nom</th>
                                <th class="text-center">Action</th>
                                <th class="text-center">Date de validation</th>
                            </tr>
                            </thead>
                            <tbody class="">
                            {% for document in documents %}
                                <tr>
                                    <td class="col-1">
                                        {% if document.action %}
                                            {% if document.action.certified %}
                                                <ion-icon class="fs-1 md hydrated text-success" name="checkmark"
                                                          role="img"></ion-icon>
                                            {% else %}
                                                <ion-icon class="fs-1 md hydrated text-danger" name="warning"
                                                          role="img"></ion-icon>
                                            {% endif %}
                                        {% else %}
                                            <ion-icon class="fs-1 md hydrated text-danger" name="warning"
                                                      role="img"></ion-icon>
                                        {% endif %}
                                    </td>
                                    <td class="text-start">
                                        <span class="h6">{{ document.document.title }}</span><br/>
                                        <small class="text-muted">{{ document.document.text }}</small>
                                    </td>
                                    <td class="text-center">
                                        <span class="h6">{{ constant('App\\Constants\\DocumentAction::' ~ document.document.action).label }}</span>
                                    </td>
                                    <td class="text-center">
                                        {% if not document.action or not document.action.certified %}
                                            {% if document.document.action == constant('App\\Constants\\DocumentAction::TOREAD').code %}
                                                <a class="btn btn-primary read-document col-6" data-bs-toggle="modal"
                                                   href="#modal-valid" role="button"
                                                   data-document-title="{{ document.document.title }}"
                                                   data-document-id="{{ document.document.id }}"
                                                   data-document-file="{{ asset('uploads/document/' ~ document.document.file) }}"><i
                                                            class="ti-eye"></i>&nbsp;Lire</a>
                                            {% endif %}
                                            {% if document.document.action == constant('App\\Constants\\DocumentAction::TOSIGN').code %}
                                                <a class="btn btn-primary sign-document col-6" data-bs-toggle="modal"
                                                   href="#modal-valid" role="button"
                                                   data-document-title="{{ document.document.title }}"
                                                   data-document-id="{{ document.document.id }}"
                                                   data-document-file="{{ asset('uploads/document/' ~ document.document.file) }}"><i
                                                            class="ti-ink-pen"></i>&nbsp;Signer</a>
                                            {% endif %}
                                        {% else %}
                                            {% if document.document.action == constant('App\\Constants\\DocumentAction::TOREAD').code %}
                                                Lu le {{ document.action.actionAt|date('d/m/Y') }}<br/>
                                            {% endif %}
                                            {% if document.document.action == constant('App\\Constants\\DocumentAction::TOSIGN').code %}
                                                Signé le {{ document.action.actionAt|date('d/m/Y') }}<br/>
                                                <a href="{{ asset('uploads/document/signed/' ~ document.document.id ~ '/' ~ document.action.file) }}"
                                                   target="_blank">Voir mon document</a>
                                            {% endif %}
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}

{% block modals %}

    <div class="modal" id="modal-valid" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2"
         tabindex="0">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                {{ form_start(validDocumentForm, {'action': path('valid_document'), 'enctype':'multipart/form-data'}) }}
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalToggleLabel2"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <span class="modal-valid-text-action"></span>
                    <div class="pt-3 fw-bold offset-3 col-6 text-center" id="document-file"></div>
                    <hr/>
                    <div class="dz-message m-0" style="cursor:pointer" id="block-valid-file">
                        <div class="pt-3 fw-bold offset-3 col-6 text-center" id="document-signed">
                            <a class="text-decoration-none" target="_blank" href="#">
                                <i class="demo-psi-upload-to-cloud display-2"></i>
                                <br>Choisir fichier signé</a>
                        </div>
                    </div>
                    <hr/>
                    <div class="text-center">
                        {{ form_widget(validDocumentForm.certified) }}
                        {{ form_label(validDocumentForm.certified) }}
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary modal-submit"><i
                                class="ti-check"></i> Valider la lecture
                    </button>
                    <a class="btn btn-light" data-bs-dismiss="modal" aria-label="Close">Annuler</a>
                </div>
                {{ form_end(validDocumentForm) }}
            </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) {
            $('.read-document').on('click', function (element) {
                // Reset du titre
                $('#document-file').text('');
                $('.modal-title').text($(this).data('document-title'));

                // Reset file
                $('#valid_document_document').val('');

                // Titre de l'action
                $('.modal-valid-text-action').text('Merci de prendre connaissance de ce document :');

                //Masquage de l'input file
                $('#valid_document_file').parent().hide();
                $('.dz-message').hide();

                // Ajout de l'id du doc
                $('#valid_document_document').val($(this).data('document-id'));

                // Préparation du fichier d'entrée
                var logo = document.createElement('i');
                $(logo).attr('class', 'ti-write fs-1 text-muted');
                var file = document.createElement('a');
                $(file).attr('class', 'text-decoration-none');
                $(file).attr('target', '_blank');
                file.href = $(this).data('document-file');
                file.append(logo);
                file.append(document.createElement('br'));
                file.append($(this).data('document-title'));
                $('#document-file').append(file);

                // Préparation de la checkbox
                $('label[for=valid_document_certified]').text('Je certifie que j\'ai bien pris connaissance du document.');


            });

            $('.sign-document').on('click', function (element) {
                // Reset du titre
                $('#document-file').text('');
                $('.modal-title').text($(this).data('document-title'));

                // Reset file
                $('#valid_document_document').val('');

                // Titre de l'action
                $('.modal-valid-text-action').text('Merci de récupérer le document ci-dessous et le renvoyer rempli et signé :');

                //Affichage de l'input file
                $('#valid_document_file').parent().show();
                $('.dz-message').show();

                // Ajout de l'id du doc
                $('#valid_document_document').val($(this).data('document-id'));

                // Préparation du fichier d'entrée
                var logo = document.createElement('i');
                $(logo).attr('class', 'ti-write fs-1 text-muted');
                var file = document.createElement('a');
                $(file).attr('class', 'text-decoration-none');
                $(file).attr('target', '_blank');
                file.href = $(this).data('document-file');
                file.append(logo);
                file.append(document.createElement('br'));
                file.append($(this).data('document-title'));
                $('#document-file').append(file);

                // Préparation de la checkbox
                $('label[for=valid_document_certified]').text('Je certifie que j\'ai bien signé document.');

            });

            $('.dz-message').on('click', function () {
                $('#valid_document_file').click();
            });

            $('#valid_document_file').on('change', function () {
                $('#block-valid-file').html('Document signé : <br/>' + $(this)[0].files[0].name);
            });
        });
    </script>
{% endblock %}