{% 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 bilan">
        <div class="col-md-4 mb-3 d-grid">
            <div class="card bg-white text-white overflow-hidden mb-3">
                <div class="p-3 pb-2">
                    <h5 class="mb-3 text-blue-800"><i class="ti-microphone text-reset text-opacity-75 fs-3 me-2"></i>
                        Commentaire général </h5>
                    <div class="text-start">
                        <span class="text-blue-800">{{ representation.commGeneral|nl2br|raw }}</span><span
                                class="fs-5"> €</span>
                    </div>
                    <div class="text-center p-3">
                        <a href="#modal-edit-bilan" role="button" data-bs-toggle="modal"
                           class="btn btn-primary rounded-pill">
                            <i class="ti-marker-alt"></i>&nbsp;Renseigner
                            informations
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8 d-grid">
            <div class="row">
                <div class="col-md-6 mb-3 d-grid">
                    <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-5">{{ representation.profit|number_format(2, ',', ' ') }}</span><span
                                        class="fs-5"> €</span>
                            </div>
                            <div class="text-center p-3">
                                <a href="#modal-edit-bilan" role="button" data-bs-toggle="modal"
                                   class="btn btn-primary rounded-pill">
                                    <i class="ti-marker-alt"></i>&nbsp;Renseigner
                                    informations
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-3 d-grid">
                    <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-5">{{ representation.affluence }}</span><span
                                        class="fs-5"> spectateurs</span>
                            </div>
                            <div class="text-center p-3">
                                <a href="#modal-edit-bilan" role="button" data-bs-toggle="modal"
                                   class="btn btn-primary rounded-pill">
                                    <i class="ti-marker-alt"></i>&nbsp;Renseigner
                                    informations
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-3 d-grid">
                    <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>
                            {% for roleToTest in role() %}
                                {% set presences = representation.presences|presence('PRESENT')|byRole(roleToTest.code) %}
                                {% if presences|length > 0 %}
                                    <div class="row text-center">
                                        <div class="col-1 text-end">
                                            <i data-bs-toggle="tooltip" data-bs-placement="top"
                                              data-bs-original-title="{{ roleToTest.label }}"
                                                    class="ti-{{ roleToTest.icon }}"></i>
                                        </div>
                                        <div class="col-11 row">
                                            {% for present in representation.presences|presence('PRESENT')|byRole(roleToTest.code) %}
                                                <div class="col-6">{{ present.user.firstname }}
                                                </div>
                                            {% endfor %}
                                        </div>
                                        <hr/>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
            <div class="col-md-6 mb-3 d-grid">
                <div class="card bg-blue text-white overflow-hidden mb-3">
                    <div class="p-3 pb-2">
                        {% set moyenne = representation.avis|avisRepondu|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|avisRepondu|length }} votants)</span>
                        </div>
                    </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>

                    <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-start">Commentaire</th>
                                <th class="text-center"></th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for avis in representation.avis|avisRepondu %}
                                <tr>
                                    <td>
                                        {% if avis.user.photo %}
                                            <img class="mainnav__avatar img-sm rounded-circle border"
                                                 src="{{ asset('uploads/user/photo/' ~ avis.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  | nl2br }}
                                    </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" id="gallery">
                        {% for media in representation.medias %}
                            <div class="col-sm-6 col-xl-3">
                                <div class="card media mb-3">
                                    {% if media.image %}
                                        <img class="card-img-top"
                                             src="{{ asset('uploads/representation/' ~ representation.id ~ '/photos/' ~ media.image) }}"
                                             alt="morning"
                                             loading="lazy"
                                             data-image="{{ media.image }}"
                                             data-info-uploaded="{{ media.uploadedBy ? true : false }}"
                                             data-user="{{ media.uploadedBy ? media.uploadedBy.firstname }}"
                                             data-user-photo="{{ media.uploadedBy ? media.uploadedBy.photo }}"
                                             data-date="{{ media.uploadedAt | date('d/m/Y à H:i') }}"
                                             data-id="{{ media.id }}"
                                        >
                                        <div class="card-body" id="medias">
                                            {% 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="#medias"
                                                   class="btn btn-icon btn-sm btn-link text-head px-2 py-0 like-button"
                                                   data-media-id="{{ media.id }}">
                                                    {% if media|like(app.user.id) %}
                                                        <i class="text-danger demo-psi-heart-2 fs-5 me-2 "></i>
                                                    {% else %}
                                                        <i class="text-muted demo-pli-heart-2 fs-5 me-2"></i>
                                                    {% endif %}
                                                    <span id="media{{ media.id }}_likes">{{ media.likes|length }}</span>
                                                </a>
                                            </div>
                                        </div>
                                    {% endif %}
                                    {% if media.video %}
                                        <video
                                                data-info-uploaded="{{ media.uploadedBy ? true : false }}"
                                                data-user="{{ media.uploadedBy ? media.uploadedBy.firstname }}"
                                                data-user-photo="{{ media.uploadedBy ? media.uploadedBy.photo }}"
                                                data-date="{{ media.uploadedAt | date('d/m/Y à H:i') }}"
                                                data-id="{{ media.id }}">
                                            <source src="{{ asset('uploads/representation/' ~ representation.id ~ '/videos/' ~ media.video) }}"
                                                    type="{{ media.mimeType }}"
                                            >
                                        </video>
                                        <div class="card-body" id="medias">
                                            {% 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="#medias"
                                                   class="btn btn-icon btn-sm btn-link text-head px-2 py-0 like-button"
                                                   data-media-id="{{ media.id }}">
                                                    {% if media|like(app.user.id) %}
                                                        <i class="text-danger demo-psi-heart-2 fs-5 me-2 "></i>
                                                    {% else %}
                                                        <i class="text-muted demo-pli-heart-2 fs-5 me-2"></i>
                                                    {% endif %}
                                                    <span id="media{{ media.id }}_likes">{{ media.likes|length }}</span>
                                                </a>
                                            </div>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block modals %}
    <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>
    <div class="modal" id="modal-edit-bilan" 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">Modifier le bilan de la représentation</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form {{ form_start(form, {'action': path('representation_bilan', {'representationId':representation.id}) }) }}
                    <div class="row">
                        <div class="col-sm-6 mb-3">
                            {{ form_label(form.affluence) }}
                            {{ form_widget(form.affluence, {'attr':{'class':'form-control'}}) }}
                        </div>
                        <div class="col-sm-6">
                            {{ form_label(form.gain) }}
                            {{ form_widget(form.gain, {'attr':{'class':'form-control'}}) }}
                        </div>
                        <div class="col-sm-12 mb-3">
                            {{ form_label(form.commGeneral) }}
                            {{ form_widget(form.commGeneral, {'attr':{'class':'form-control'}}) }}
                        </div>
                        <div class="col-sm-12 mb-3">
                            {{ form_row(form.save) }}
                        </div>
                    </div>
                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('assets/js/jquery-3.7.1.min.js') }}"></script>
    <script src="{{ asset('assets/js/jquery.lbt-lightbox.js') }}"></script>
    <script type="text/javascript">
        $('#gallery').lbtLightBox({
            captions: false,
            qtd_pagination: 6,
            pagination_width: "100px",
            pagination_height: "100px",
            custom_children: "div div.card.media img, div div.card.media video",
        });

        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();
            });


            $('.like-button').on('click', function () {
                var url = "{{ path('media_like', {'id':'___'}) }}";
                url = url.replace('___', $(this).data('media-id'));
                $.ajax({
                    url: url, success: function (result) {
                        var span = $('#media' + result.mediaId + '_likes');
                        var i = $(span).parent().find('i');
                        if (result.response) {
                            // + 1
                            $(i).removeClass('text-muted demo-pli-heart-2');
                            $(i).addClass('text-danger demo-psi-heart-2');
                        } else {
                            // -1
                            $(i).removeClass('text-danger demo-psi-heart-2');
                            $(i).addClass('text-muted demo-pli-heart-2');
                        }
                        $(span).text(result.likes);
                    }
                });
            });
        });
    </script>
{% endblock %}