{% extends 'Admin/_include/_layout.sidebar.html.twig' %}

{% block content %}
    <div class="main_tools">
{#        TODO Ajouter un bouton de suppression#}
        <button class="button {% if offer.isActive %}delete{% else %}green{% endif %} small" data-open="modalDeleteOffer">{% if offer.isActive %}<i class="fa fa-trash"></i> Supprimer{% else %}Activer{% endif %} une Offre</button>
        <button class="button update small" data-open="modalEditOffer"><i class="fa fa-pencil"></i> Editer une Offre</button>
    </div>

    <div class="cell small-12">
        <h1 class="mb-1">Offre n°{{ offer.id }} {% if not offer.isActive %}<span class="small txt_red">Inactif</span>{% endif %}</h1>
    </div>

    <div class="cell small-12">
        <div class="grid-x grid-padding-x">
            <div class="cell small-6">
                <div class="listing xl"><span>Nom</span><span>{{ offer.name }}</span></div>
            </div>
            <div class="cell small-6">
                <div class="listing xl"><span>Abonnement Principal</span><span>{% if offer.isOption %}Oui{% else %}Non{% endif %}</span></div>
            </div>
            <div class="cell small-6">
                <div class="listing xl"><span>Code</span><span>{{ offer.code }}</span></div>
            </div>
            <div class="cell small-6">
                <div class="listing xl"><span>Possède des Options</span><span>{% if offer.optionAvailable %}Oui{% else %}Non{% endif %}</span></div>
            </div>
            <div class="cell small-6">
                <div class="listing xl"><span>Montant Annuel</span><span>{{ offer.amount }}</span></div>
            </div>
            <div class="cell small-6">
                <div class="listing xl"><span>Nombre Max d'article</span><span>{{ offer.nbMaxArticle }}</span></div>
            </div>
            <div class="cell small-6">
                <div class="listing xl"><span>Position</span><span>{{ offer.position }}</span></div>
            </div>
            <div class="cell small-6">
                <div class="listing xl"><span>Taux TVA</span><span>{{ offer.taxRate }}</span></div>
            </div>
            <div class="cell small-6">
                <div class="listing xl"><span>Rôle</span><span><a class="button purple round" data-open="modalViewRoles"><i class="fa fa-eye"></i></a></span></div>
            </div>
            <div class="cell small-12">
                <h4 class="subheader mt-1">Commandes actives liées à cette offre</h4>
            </div>
            {% if subscribers|length > 0 %}
                <div class="cell small-12">
                    <table class="hover" style="cursor: pointer">
                        <thead>
                        <tr>
                            <th>Client</th>
                            <th>Date de début</th>
                            <th>Date de fin</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for subscriber in subscribers %}
                            <tr class="go_to_customer_view" data-url="{{ url('back_customer_view', {'customer':subscriber.customer_id}) }}">
                                <td>{{ subscriber.customer_name }}</td>
                                <td>{{ subscriber.start_at|date('d/m/Y') }}</td>
                                <td>{{ subscriber.end_at|date('d/m/Y') }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endif %}

        </div>
    </div>

    {#    #}{# MODAL #}
        <div class="reveal" id="modalViewRoles" data-reveal>
            <div class="reveal-title">Liste des rôles</div>
            <div class="reveal-body">
                <div class="grid-x grid-padding-x">
                    {% for role in offer.securityGroup.roles %}
                        <div class="cell small-12">{{ role }}</div>
                    {% endfor %}
                </div>

            </div>
            <div class="reveal-footer">
                <button type="button" data-close class="button small cancel">Retour</button>
            </div>
            <button class="close-button"  data-close aria-label="Close modal" type="button">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>

        <div class="reveal" id="modalDeleteOffer" data-reveal>
            <div class="reveal-title">{% if offer.isActive %}Supprimer{% else %}Activer{% endif %} une Offre</div>
            <div class="reveal-body">
                <div class="grid-x grid-padding-x">
                    <div class="cell small-12">
                        Attention !
                        {% if offer.isActive %}
                        Si vous supprimer une offre alors qu'il y a encore des commandes actives liées cela peut être lourd de conséquence...
                        {% else %}
                        Si vous activer une offre alors qu'il existe déjà une offre active avec le même code cela peut être lourd de conséquence...
                        {% endif %}
                    </div>
                </div>

            </div>
            <div class="reveal-footer">
                <button type="button" data-close class="button small cancel">Retour</button>
                <button type="button" class="button small save" id="btnConfirmDeleteOffer">{% if offer.isActive %}Supprimer{% else %}Activer{% endif %}</button>
            </div>
            <button class="close-button"  data-close aria-label="Close modal" type="button">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>

        {#    #}{# MODAL #}
        <div class="reveal" id="modalEditOffer" data-reveal>
            <div class="reveal-title">Editer une Offre</div>
            <div class="reveal-body">
                {{ form_start(formEdit, {'attr': {'id': 'formEdit'}}) }}
                <div class="grid-x grid-padding-x">
                    <div class="cell small-2 text-right">{{ form_label(formEdit.name) }}</div>
                    <div class="cell small-4">{{ form_widget(formEdit.name) }}</div>
                    <div class="cell small-2 text-right">{{ form_label(formEdit.code) }}</div>
                    <div class="cell small-4">{{ form_widget(formEdit.code) }}</div>

                    <div class="cell small-2 text-right">{{ form_label(formEdit.amount) }}</div>
                    <div class="cell small-4">{{ form_widget(formEdit.amount) }}</div>
                    <div class="cell small-2 text-right">{{ form_label(formEdit.taxRate) }}</div>
                    <div class="cell small-4">{{ form_widget(formEdit.taxRate) }}</div>
                    <div class="cell small-2 text-right">{{ form_label(formEdit.nbMaxArticle) }}</div>
                    <div class="cell small-4">{{ form_widget(formEdit.nbMaxArticle) }}</div>
                    <div class="cell small-2 text-right">{{ form_label(formEdit.position) }}</div>
                    <div class="cell small-4">{{ form_widget(formEdit.position) }}</div>
                    <div class="cell small-10 small-offset-2">{{ form_widget(formEdit.isOption) }}{{ form_label(formEdit.isOption) }}</div>
                    <div class="cell small-10 small-offset-2">{{ form_widget(formEdit.optionAvailable) }}{{ form_label(formEdit.optionAvailable) }}</div>
                    <div class="cell small-12"><h4>Rôles</h4></div>
                    <hr>
                    {% for role in formEdit.roles %}
                        <div class="cell small-6">
                            {{ form_widget(role, {'attr' : {'class': 'no-mb'}}) }}
                            {{ form_label(role) }}
                        </div>
                    {% endfor %}
                </div>

            </div>
            <div class="reveal-footer">
                <button type="button" data-close class="button small cancel">Retour</button>
                <button type="submit" class="button small save">Editer</button>
            </div>
            <button class="close-button"  data-close aria-label="Close modal" type="button">
                <span aria-hidden="true">&times;</span>
            </button>
            {{ form_end(formEdit) }}
        </div>
{% endblock %}

{% block javascript_footer %}
    {{ parent() }}
    <script>
        $(document).ready(function () {

            $('.go_to_customer_view').click(function () {
                window.location = $(this).data('url');
            });

            $('#btnConfirmDeleteOffer').click(function () {
                window.location = "{{ url('back_offer_toggle', {'offer':offer.id}) }}";
            });
        });
    </script>
{% endblock %}