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

{% block title %}Répartition du spectacle {{ representation.spectacle.name ~ ' - Le ' ~ representation.date|date('d/m/Y') }} {% endblock %}

{% block titre_page %}Présence à la représentation{% endblock %}
{% block resume_page %}{{ representation.spectacle.name ~ ( representation.description ? ' (' ~ representation.description ~ ')': '') ~ ' - Le ' ~ representation.date|date('d/m/Y') }}{% endblock %}
{% block description_page %}
    {% set presence = constant('App\\Constants\\ReponsePresence::PRESENT') %}
    <span class="text-{{ presence.color }}"><i
                class="ti-{{ presence.icon }} fw-bold"></i></span> : {{ presence.label }} <br/>
    {% set presence = constant('App\\Constants\\ReponsePresence::SUPPLEENT') %}
    <span class="text-{{ presence.color }}"><i
                class="ti-{{ presence.icon }} fw-bold"></i></span> : {{ presence.label }} <br/>

    {% set presence = constant('App\\Constants\\ReponsePresence::ABSENT') %}
    <span class="text-{{ presence.color }}"><i
                class="ti-{{ presence.icon }} fw-bold"></i></span> : {{ presence.label }} <br/>

    {% set presence = constant('App\\Constants\\ReponsePresence::NE_SAIT_PAS') %}
    <span class="text-{{ presence.color }}"><i
                class="ti-{{ presence.icon }} fw-bold"></i></span> : {{ presence.label }} ainsi que les non répondus
    <br/>

{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-md-6 mb-3">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-12">
                            <h5 class="card-title">Ayant répondu</h5>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th></th>
                                <th>Personne</th>
                                <th class="text-center">Réponse</th>
                                <th class="text-center">Volonté</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for presence in usersAyantRepondu %}
                                <tr>
                                    <td class="col-1 text-center">
                                        {% if presence.user.photo %}
                                            <img class="mainnav__avatar img-sm rounded-circle border"
                                                 src="{{ asset('uploads/user/photo/' ~ presence.user.photo) }}"
                                                 alt="{{ presence.user.firstName }}"
                                                 loading="lazy"><br/>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <span class="h6">{{ presence.user.firstName ~ ' ' ~ presence.user.lastname|first|upper ~ '.' }}</span>
                                        <br>
                                        <small class="text-muted">{{ presence.user.email }}</small>
                                    </td>
                                    <td class="text-center fw-bold">
                                        {% if presence.presence %}
                                            {% set reponse = constant('App\\Constants\\ReponsePresence::' ~ presence.presence) %}
                                            <span class="text-{{ reponse.color }} fs-1"><i
                                                        class="ti-{{ reponse.icon }} fw-bold"></i></span>
                                        {% else %}
                                            Non répondu
                                        {% endif %}
                                    </td>
                                    <td class="text-center">
                                        {% for wish in presence.wishes %}
                                            {{ wish }}<br/>
                                        {% endfor %}
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 mb-3">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-12">
                            <h5 class="card-title">N'ayant pas encore répondu</h5>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th></th>
                                <th>Personne</th>
                                <th class="text-center">Réponse</th>
                                <th class="text-center">Dernier mail envoyé</th>
                                <th class="text-center">Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for user in usersRestant %}
                                <tr>
                                    <td class="col-1">
                                        {% if user.photo %}
                                            <img class="mainnav__avatar img-sm rounded-circle border"
                                                 src="{{ asset('uploads/user/photo/' ~ user.photo) }}"
                                                 alt="{{ user.firstname }}"
                                                 loading="lazy"><br/>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <span class="h6">{{ user.firstname }}</span>
                                        <br>
                                        <small class="text-muted">{{ user.email }}</small>
                                    </td>
                                    <td class="text-center">
                                        {% if user.presence %}
                                            {% set reponse = constant('App\\Constants\\ReponsePresence::' ~ user.presence) %}
                                            <span class="text-{{ reponse.color }} fs-1"><i
                                                        class="ti-{{ reponse.icon }} fw-bold"></i></span>
                                        {% else %}
                                            Non répondu
                                        {% endif %}
                                    </td>
                                    <td class="text-center">
                                        {% if user.dateMail %}
                                            {{ user.dateMail|date('d/m/y') }}<br/>
                                            {{ user.dateMail|date('H:i') }}
                                        {% else %}
                                            -
                                        {% endif %}
                                    </td>
                                    <td class="text-center">
                                        <a class="sendMailForUser" data-bs-toggle="modal"
                                           href="#modal-send-mail" role="button"
                                           data-id="{{ user.id }}" data-name="{{ user.firstname }}">
                                            <i class="ti-email"></i></a>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                        <div class="text-center"><a class="sendMailForAll btn btn-primary rounded-pill"
                                                    data-bs-toggle="modal"
                                                    href="#modal-send-all" role="button">
                                <i class="ti-email"></i> Envoyer à tous</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 mb-3">
            <div class="card">
                <div class="card-body">
                    {% if derniereRepartition|length > 0 %}
                        <div class="row">
                            <div class="col-12">
                                <h5 class="card-title">Dernière répartition</h5>
                            </div>
                        </div>
                        <div class="row">
                            {% if representation.spectacle.type == constant('App\\Constants\\SpectacleType::LONG_FORM')['code'] %}
                                <div class="col-md-3 text-center">
                                    {% for key,groupe in derniereRepartition|repartition('COMEDIEN') %}
                                        <div class="mb-3">
                                            <div class="text-center fw-bold">{{ key }}</div>
                                            {% for comedien in groupe %}
                                                <div class="text-center">{{ comedien.presence.user.firstname }}</div>
                                            {% endfor %}</div>
                                    {% endfor %}
                                </div>
                            {% else %}
                                <div class="col-md-3 text-center">
                                    <div class="text-center fw-bold">Comédiens</div>
                                    {% for comedien in derniereRepartition|repartition('COMEDIEN') %}
                                        <div class="text-center">{{ comedien.presence.user.firstname }}</div>
                                    {% endfor %}
                                </div>
                            {% endif %}
                            <div class="col-md-3 text-center">
                                <div class="text-center fw-bold">Régie</div>
                                {% for regie in derniereRepartition|repartition('REGIE') %}
                                    <div class="text-center">{{ regie.presence.user.firstname }}</div>
                                {% endfor %}
                            </div>
                            <div class="col-md-3 text-center">
                                <div class="text-center fw-bold">Billeterie</div>
                                {% for billeterie in derniereRepartition|repartition('BILLETERIE') %}
                                    <div class="text-center">{{ billeterie.presence.user.firstname }}</div>
                                {% endfor %}
                            </div>
                            <div class="col-md-3 text-center">
                                <div class="text-center fw-bold">MC</div>
                                {% for mc in derniereRepartition|repartition('MC') %}
                                    <div class="text-center">{{ mc.presence.user.firstname }}</div>
                                {% endfor %}
                            </div>
                            {% if representation.spectacle.type == constant('App\\Constants\\SpectacleType::MATCH')['code'] %}
                                <div class="col-md-3 text-center">
                                    <div class="text-center fw-bold">Arbitre</div>
                                    {% for mc in derniereRepartition|repartition('REFEREE') %}
                                        <div class="text-center">{{ mc.presence.user.firstname }}</div>
                                    {% endfor %}
                                </div>
                                <div class="col-md-3 text-center">
                                    <div class="text-center fw-bold">Assistant arbitre</div>
                                    {% for mc in derniereRepartition|repartition('ASSISTANT') %}
                                        <div class="text-center">{{ mc.presence.user.firstname }}</div>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                        <div class="row">
                            <div class="col-md-12 text-end">
                                <a href="#modal-delete-repartition" role="button" data-bs-toggle="modal"
                                   class="btn btn-primary rounded-pill"><i class="ti-trash"></i> Supprimer
                                    cette répartition
                                </a>
                            </div>
                        </div>
                    {% else %}
                        <div class="row">
                            <div class="col-12">
                                <h5 class="card-title">C'est parti pour la répartition ! </h5>
                            </div>
                        </div>
                        {{ form_start(formRepartition, {'action':path('representation_valid_repartition', {'representationId':representation.id}), 'method':'post'}) }}
                        <div class="row">
                            {% if representation.spectacle.type == constant('App\\Constants\\SpectacleType::LONG_FORM')['code'] %}
                                <div class="col-md-3"> Binômes
                                    <ul class="groupes"
                                        data-index="{{ formRepartition.groupes|length > 0 ?formRepartition.groupes|last.vars.name + 1 : 0 }}"
                                        data-prototype="{{ form_widget(formRepartition.groupes.vars.prototype)|e('html_attr') }}"
                                    ></ul>
                                    <button type="button" class="add_groupe btn btn-primary rounded-pill"
                                            data-collection-holder-class="groupes"><i class="ti-plus"></i>Ajouter un
                                        binôme
                                    </button>
                                </div>
                                {{ form_row(formRepartition.comediens, {'row_attr':{'class':'d-none'}}) }}
                            {% else %}
                                <div class="col-md-3"> {{ form_row(formRepartition.comediens) }}
                                </div>
                            {% endif %}
                            <div class="col-md-3"> {{ form_row(formRepartition.regies) }}
                            </div>
                            <div class="col-md-3"> {{ form_row(formRepartition.billeteries) }}
                            </div>
                            <div class="col-md-3"> {{ form_row(formRepartition.mc) }}
                            </div>
                            {% if representation.spectacle.type == constant('App\\Constants\\SpectacleType::MATCH')['code'] %}
                                <div class="col-md-3"> {{ form_row(formRepartition.referee) }}
                                </div>
                                <div class="col-md-3"> {{ form_row(formRepartition.assistant) }}
                                </div>
                            {% else %}
                                {{ form_widget(formRepartition.referee, {'attr':{'style':'display:none'}}) }}
                                {{ form_widget(formRepartition.assistant, {'attr':{'style':'display:none'}}) }}
                            {% endif %}
                        </div>

                        <div class="row">
                            <div class="col-md-12 text-end">
                                <a href="#modal-valid-repartition" role="button" data-bs-toggle="modal"
                                   class="btn btn-primary rounded-pill"><i class="ti-check"></i> Valider
                                    cette répartition
                                </a>
                            </div>
                        </div>

                        {{ form_end(formRepartition) }}
                    {% endif %}
                </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 de
                                    présence</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-send-all" 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 de
                                    présence</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">ceux qui n'ont pas encore répondu</span>
                                ?
                            </div>
                            <div class="modal-footer">
                                <a href="{{ path('presence_call', {'representationId': representation .id}) }}"
                                   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-valid-repartition" 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">Valider la répartition</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                            </div>
                            <div class="modal-body text-center">
                                Valides-tu cette répartition ?
                            </div>
                            <div class="modal-footer">
                                <a class="valid-repartition btn btn-primary modal-submit"><i class="ti-check"></i>
                                    Valider</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-repartition" 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 la répartition en
                                    cours</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 cette répartition ?
                            </div>
                            <div class="modal-footer">
                                <a href="{{ path('repartition_delete', {'representationId': representation .id}) }}"
                                   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">
        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);
            });

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