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

{% block title %}Présence à la représentation{% endblock %}

{% block titre_page %}Bilan de la représentation{% endblock %}
{% block resume_page %}{{ representation.spectacle.name ~ ' - Le ' ~ representation.date|date('d/m/Y') }}{% endblock %}
{% block description_page %}
    C'est ici qu'on fait le bilan de la représentation :
    <ul>
        <li>Note globale du ressenti de chacun de ceux qui était là</li>
        <li>Appréciation de chacun de ceux qui était là</li>
        <li>Jauge atteinte</li>
        <li>Somme récoltée</li>
    </ul>
{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-md-3 mb-3">
            <div class="card bg-yellow-600 text-white overflow-hidden mb-3">
                <div class="p-3 pb-2">
                    <h5 class="mb-3"><i class="ti-microphone text-reset text-opacity-75 fs-3 me-2"></i>
                        Présents</h5>
                    <div class="row text-center">
                        {% for present in representation.presences|presence('PRESENT') %}
                            <div class="col-6">{{ present.user.firstname }}</div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="card bg-blue text-white overflow-hidden mb-3">
                <div class="p-3 pb-2">
                    {% set moyenne = representation.avis|moyenneNote %}
                    <h5 class="mb-3"><i class="ti-star text-reset text-opacity-75 fs-3 me-2"></i>
                        Note globale</h5>
                    <div class="row" style="padding: 1em 4em;">
                        <div>
                            <img style="background: linear-gradient(90deg, rgba(249,202,36,1) {{ moyenne / 5 * 100 }}%, rgba(3,169,244,1) {{ (moyenne / 5 * 100)+2 }}%);"
                                 src="{{ asset('assets/img/stars.png') }}" width="100%"/>
                        </div>
                    </div>
                    <div class="text-center fs-3">
                        {{ moyenne }} / 5<span class="fs-5"> ({{ representation.avis|length }} votants)</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="card bg-green text-white overflow-hidden mb-3">
                <div class="p-3 pb-2">
                    <h5 class="mb-3"><i class="ti-credit-card text-reset text-opacity-75 fs-3 me-2"></i>
                        Gain</h5>
                    <div class="text-center  ">
                        <span class="display-3">{{ representation.profit|number_format(2, ',', ' ') }}</span><span
                                class="fs-5"> €</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="card bg-red text-white overflow-hidden mb-3">
                <div class="p-3 pb-2">
                    <h5 class="mb-3"><i class="ti-user text-reset text-opacity-75 fs-3 me-2"></i>
                        Affluence</h5>
                    <div class="text-center">
                        <span class="display-3">{{ representation.affluence }}</span><span
                                class="fs-5"> spectateurs</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <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">Bilan par personne</h5>
                        </div>
                        <div class="col-6 text-end">
                            {% if not representation.avis|avisExist(app.user) and representation.date|date('ymd') < "now"| date('ymd') %}
                                <a href="#modal-send-avis" role="button" data-bs-toggle="modal"
                                   class="btn btn-primary rounded-pill"><i
                                            class="ti-plus"></i> Ajouter mon commentaire</a>
                            {% endif %}
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th></th>
                                <th>Personne</th>
                                <th class="text-center">Note</th>
                                <th class="text-center">Commentaire</th>
                                <th class="text-center"></th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for avis in representation.avis %}
                                <tr>
                                    <td>
                                        {% if avis.user.photo %}
                                            <img class="mainnav__avatar img-sm rounded-circle border"
                                                 src="{{ asset('uploads/user/photo/' ~ app.user.photo) }}" alt="Nobody" loading="lazy">
                                        {% else %}
                                            <img class="mainnav__avatar img-sm rounded-circle border"
                                                 src="{{ asset('assets/img/nobody.jpg') }}" alt="Nobody" loading="lazy">
                                        {% endif %}
                                    </td>
                                    <td>
                                        <span class="h6">{{ avis.user.firstname }}</span>
                                    </td>
                                    <td class="text-center fw-bold">
                                        {{ avis.note }}
                                    </td>
                                    <td class="text-start">
                                        {{ avis.comment }}
                                    </td>
                                    <td class="text-end">
                                        <a href="#modal-delete-avis" role="button" data-bs-toggle="modal"
                                           class="deleteAvis" data-id="{{ avis.id }}"><i
                                                    class="ti-trash"></i></a>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 mb-3">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-12">
                            <h5 class="card-title">Quelques photos/vidéos</h5>
                        </div>
                    </div>
                    <div class="row">
                        {% for media in representation.medias %}
                            <div class="col-sm-6 col-xl-3">
                                <div class="card mb-3">
                                    <img class="card-img-top"
                                         src="{{ asset('uploads/representation/' ~ representation.id ~ '/photos/' ~ media.image) }}"
                                         alt="morning"
                                         loading="lazy">
                                    <div class="card-body">
                                        {% if media.title %}
                                            <span class="d-inline-block h5 text-truncate mb-2">{{ media.title }}</span>
                                        {% endif %}
                                        {% if media.description %}
                                            <p>{{ media.description }}</p>
                                        {% endif %}
                                        <div class="mt-4 pt-3 border-top d-flex align-items-center">
                                            <a href="#" class="btn btn-icon btn-sm btn-link text-head px-2 py-0">
                                                <i class="text-muted demo-pli-heart-2 fs-5 me-2"></i>{{ media.likes|length }}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                        <div class="col-sm-6 col-xl-3">
                            <div class="card mb-3">
                                <form action="{{ path('representation_add_files', {'representationId':representation.id}) }}"
                                      id="filesForm"
                                      class="bg-light text-center rounded p-5" method="post"
                                      enctype="multipart/form-data">
                                    <div class="dz-message m-0" style="cursor:pointer">
                                        <div class="p-3 text-muted text-opacity-25">
                                            <i class="demo-psi-upload-to-cloud display-2"></i>
                                        </div>
                                        <h4>Télécharger photos</h4>
                                        <p class="text-muted mb-0">dans l'album de le représentation</p>
                                    </div>
                                    {{ form_start(formMedia) }}
                                    {{ form_end(formMedia) }}
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block modals %}
    <div class="modal" id="modal-send-avis" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2"
         tabindex="0">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                {{ form_start(form , {'action': path('representation_envoi_avis', {'representationId':representation.id, 'idUser':app.user.id})}) }}
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalToggleLabel2">Donner son avis sur cette représentation</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="col-md-12">
                        {{ form_row(form.note, {'attr': {'class': 'form-select'}}) }}
                    </div>

                    <div class="col-md-12">
                        {{ form_row(form.comment, {'attr': {'class': 'form-control'}}) }}
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" type="submit"><i class="ti-location-arrow"></i> Envoyer</button>
                    <button class="btn btn-light" data-bs-dismiss="modal" aria-label="Close">Annuler
                    </button>
                </div>
                {{ form_end(form) }}
            </div>
        </div>
    </div>
    <div class="modal" id="modal-delete-avis" 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 ton avis</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 ton avis ?
                </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>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('assets/js/jquery-3.7.1.min.js') }}"></script>
    <script type="text/javascript">
        $('#filesForm').on('change', '#media_files', function () {
            $('#filesForm').submit();
        });

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

        window.addEventListener("DOMContentLoaded", async () => {
            const {default: Tags} = await import( "https://cdn.jsdelivr.net/gh/lekoala/bootstrap5-tags@master/tags.min.js" );

            // Import and initialize the Bootstrap 5 Tags.
            try {
                Tags.init();
            } catch (error) {
                console.error("Couln't import Bootstrap 5 Tags Plugins");
            }
            // Initialize the Tagin plugin
            for (const el of document.querySelectorAll(".tagin")) {
                tagin(el)
            }

            const addFormToCollection = (e) => {
                const collectionHolder = document.querySelector('.' +
                    e.currentTarget.dataset.collectionHolderClass);
                const item = document.createElement('li');
                item.innerHTML = collectionHolder
                    .dataset
                    .prototype
                    .replace(
                        /__name__/g,
                        collectionHolder.dataset.index
                    );
                collectionHolder.appendChild(item);
                collectionHolder.dataset.index++;
                Tags.init();
            };

            document
                .querySelectorAll('.add_groupe')
                .forEach(btn => {
                    btn.addEventListener("click", addFormToCollection)
                });

            const addTagFormDeleteLink = (item) => {
                const removeFormButton = document.createElement('button');
                removeFormButton.innerText = 'Delete this tag';

                item.append(removeFormButton);

                removeFormButton.addEventListener('click', (e) => {
                    e.preventDefault();
                    // remove the li for the tag form
                    item.remove();
                });
            }
            document
                .querySelectorAll('ul.tags li')
                .forEach((tag) => {
                    addTagFormDeleteLink(tag)
                })

        })

        $(document).ready(function (e) {
            $('.sendMailForUser').on('click', function (element) {
                $('#modal-send-mail .user-for-send').text($(this).data("name"));

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

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

            $('.deleteAvis').on('click', function (element) {
                var url = "{{ path('avis_delete', {'idAvis':'___'}) }}";
                url = url.replace('___', $(this).data('id'));

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

            $('.valid-repartition').on('click', function () {
                $('form[name=repartition]').submit();
            });
        });
    </script>
{% endblock %}