{% extends 'App/_include/_layout.main.html.twig' %}
{% block page_content %}
    <div class="cell small-12">
        <div class="grid-x header_title_and_action">
            <div class="cell small-12  medium-auto header_title">
                <h1><i class="fa fa-diamond"></i>{{ 'my_account.title'|trans }}</h1>
            </div>
            <div class="cell small-12  medium-shrink header_action">
                <button type="button" class="button update small" data-open="modalEditAccount" ><i class="fa fa-edit"></i> {{ 'my_account.button.edit'|trans }}</button>
            </div>
            <div class="cell small-12">
                <div class="grid-x grid-padding-x">
                    <div class="cell small-12 medium-6">
                        <div class="listing"><span>{{ 'customer.nom'|trans }}</span><b>{{ customer.nom }}</b></div>
                        <div class="listing"><span>{{ 'customer.adresse'|trans }}</span>
                            <b>
                                {% if customer.adresse1 %}{{ customer.adresse1 }}{% endif %}
                                {% if customer.adresse1 and customer.adresse2 %}<br>{% endif %}
                                {% if customer.adresse2 %}{{ customer.adresse2 }}{% endif %}
                            </b>
                        </div>
                        <div class="listing"><span>{{ 'customer.cp_ville'|trans }}</span>
                            <b>
                                {% if customer.codePostal %}{{ customer.codePostal }}{% endif %}
                                {% if customer.codePostal and customer.ville %}&nbsp;{% endif %}
                                {% if customer.ville %}{{ customer.ville }}{% endif %}
                            </b>
                        </div>
                        <div class="listing"><span>{{ 'customer.pays'|trans }}</span><b>{{ customer.pays|countryName }}</b></div>
                    </div>
                    <div class="cell small-12 medium-6">
                        <div class="listing"><span>{{ 'customer.siret'|trans }}</span><b>{{ customer.siret }}</b></div>
                        <div class="listing"><span>{{ 'customer.numeroTVA'|trans }}</span><b>{{ customer.numeroTVA }}</b></div>
                        <div class="listing"><span>{{ 'customer.telephone'|trans }}</span><b>{{ customer.telephone }}</b></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="cell small-12">
        <ul class="tabs" data-tabs id="parameters-tabs">
            <li class="tabs-title is-active"><a href="#current_subscription" aria-selected="true">{{ 'my_account.tab.subscription.title'|trans }}</a></li>
            <li class="tabs-title"><a data-tabs-target="orders" href="#orders">{{ 'my_account.tab.orders'|trans }}</a></li>
            <li class="tabs-title"><a data-tabs-target="invoices" href="#invoices">{{ 'my_account.tab.invoices'|trans }}</a></li>
        </ul>
        <div class="tabs-content" data-tabs-content="parameters-tabs">
            {# TAB SUBSCRIPTION #}
            <div class="tabs-panel is-active" id="current_subscription">
                <div class="grid-x">
                    <div class="cell small-12 medium-6">
                        <h4>{{ 'my_account.tab.subscription.title'|trans }}</h4>
                        <div class="listing xl"><span>{{ 'my_account.tab.subscription.current_offer'|trans }}</span><b>{{ data_subscription_tab.subscription_name|trans|capitalize }}</b></div>
                        <div class="listing xl"><span>{{ 'my_account.tab.subscription.end_subscription'|trans }}</span><b>{{ data_subscription_tab.subscription_endedAt|date('d/m/Y') }}</b></div>
                        <div class="listing xl"><span>{{ 'my_account.tab.subscription.nb_license'|trans }}</span><b>{{ data_subscription_tab.subscription_nb_access }}</b></div>
                        <div class="listing xl"><span>{{ 'my_account.tab.subscription.active_users'|trans }}</span><b>{{ data_subscription_tab.nb_active_users }}</b></div>
                        <h4>{{ 'my_account.tab.subscription.subtitle.t_and_c'|trans }}</h4>
                        <a href="{{ url('anonymous_t_anc_c') }}" target="_blank">{{ 'my_account.tab.subscription.link.t_and_c'|trans }}</a><br>
                        <a href="https://www.albert-deloin.fr/politique-de-confidentialite/" target="_blank">{{ 'my_account.tab.subscription.link.confidantiality'|trans }}</a><br>
                    </div>
                    <div class="cell small-12 medium-6">
                        <h4 class="subtitle">{{ 'my_account.tab.subscription.subtitle.option'|trans }}</h4>
                        {% if current_offer.optionAvailable %}
{#                        <ul>#}
                            {% for option in options %}
                                <div class="listing xl">
                                    <span>
                                        {{ option.offer.name|trans|capitalize }}
                                    </span>
                                    {% if option.isSubscribed %}
                                        <i class="fa fa-check text_green"></i>
                                    {% else %}
                                        <a href="{{ url('subscription_step_2',{'offer':option.offer.id, 'type':constant('App\\Entity\\Business\\Order::TYPE_OPTION')|lower}) }}" class="button small purple">{{ 'my_account.tab.subscription.btn_subscription'|trans }} ({{ option.offer.monthlyAmount|number_format(2, ',','') }} € / {{ 'month'|trans }})</a>
                                    {% endif %}
                                </div>
                            {% endfor %}
{#                        </ul>#}
                        {% endif %}
                    </div>
                    <div class="cell small-12 mb-2 mt-2">
                        <a href="{{ url('my_account_delete_step_1') }}" class="bold text-grey">Supprimer mon compte</a>
                    </div>
                </div>
            </div>
            {# TAB ORDERS #}
            <div class="tabs-panel" id="orders">
                        {% if orders|length > 0 %}
                        <table class="style-light">
                            <thead>
                                <tr>
                                    <th>{{ 'my_account.order.date_order'|trans }}</th>
                                    <th class="hide-for-small-only">{{ 'my_account.order.amount_pre_tax'|trans }}</th>
                                    <th class="hide-for-small-only">{{ 'my_account.order.amount_tax'|trans }}</th>
                                    <th class="hide-for-small-only">{{ 'my_account.order.amount_with_tax'|trans }}</th>
                                    <th>{{ 'my_account.order.status'|trans }}</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                            {% for order in orders %}
                                {% set badge_color = 'red' %}
                                {% if order.status == constant('App\\Entity\\Business\\Order::STATUS_VALIDATED') or order.status == constant('App\\Entity\\Business\\Order::STATUS_FORCED') %}
                                    {% set badge_color = 'green' %}
                                {% elseif order.status == constant('App\\Entity\\Business\\Order::STATUS_IN_PAYMENT') %}
                                    {% set badge_color = 'orange' %}
                                {% endif %}
                                <tr>
                                    <td>{{ order.date_order|date('d/m/Y') }}</td>
                                    <td class="hide-for-small-only">{% if order.amount_pre_tax %}{{ order.amount_pre_tax|number_format(2, ',','') }} €{% endif %}</td>
                                    <td class="hide-for-small-only">{% if order.amount_tax %}{{ order.amount_tax|number_format(2, ',','') }} €{% endif %}</td>
                                    <td class="hide-for-small-only">{% if order.amount_with_tax %}{{ order.amount_with_tax|number_format(2, ',','') }} €{% endif %}</td>
                                    <td><span class="label {{ badge_color }}">{{ ('order.' ~ order.status|lower)|trans }}</span></td>
                                    <td class="action">
                                        <i class="fa fa-eye fa-border pointer text_azur" data-open="modalViewOrderDetail_{{ order.id }}" title="{{ 'my_account.order.see.detail'|trans }}"></i>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                        {% else %}
                            <p class="text-center">{{ 'my_account.order.empty'|trans }}</p>
                        {% endif %}
            </div>
            {# TAB INVOICES #}
            <div class="tabs-panel" id="invoices">
                {% if invoices|length > 0 %}
                    <table class="style-light">
                        <thead>
                        <tr>
                            <th>{{ 'my_account.invoice.date'|trans }}</th>
                            <th>{{ 'my_account.invoice.number'|trans }}</th>
                            <th class="hide-for-small-only">{{ 'my_account.invoice.amount'|trans }}</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for invoice in invoices %}
                            <tr>
                                <td>{{ invoice.invoice_date|date('d/m/Y') }}</td>
                                <td>{{ invoice.invoice_number }}</td>
                                <td class="hide-for-small-only">{% if invoice.invoice_amount %}{{ invoice.invoice_amount|number_format(2, ',','') }} €{% endif %}</td>
                               <td class="action">
                                   {% if invoice.invoice_id %}
                                       <i class="fa fa-file-pdf-o fa-border pointer text_red download_private" data-docid="{{ invoice.invoice_id }}" data-filename="{{ invoice.invoice_file_name }}" title="{{ 'my_account.invoice.download'|trans }}"></i>
                                    {% endif%}
                               </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                {% else %}
                    <p class="text-center">{{ 'my_account.order.empty'|trans }}</p>
                {% endif %}
            </div>
        </div>
    </div>
    {# MODALS VIEW ORDER #}
    {% for order in orders %}
        <div class="reveal" id="modalViewOrderDetail_{{ order.id }}" data-reveal>
            <div class="reveal-title">{{ 'my_account.order.detail.title'|trans }}</div>
            <div class="reveal-body">
                <div class="grid-x grid-padding-x">
                    <div class="cell small-12 pb-1 text-center">{{ 'my_account.order.detail.text1'|trans({'%start%' : order.date_start|date('d/m/Y'),'%end%' : order.date_end|date('d/m/Y') })}}</div>
                    <div class="cell small-12">
                        <h4 class="subtitle">{{ 'my_account.order.detail.title'|trans }} :</h4>
                        {% if order.lines|length > 0 %}
                            <table class="style-light mt-0-5">
                                <thead>
                                <tr>
                                    <th>{{ 'my_account.order.detail.column.offer'|trans }}</th>
                                    <th>{{ 'my_account.order.detail.column.quantity'|trans }}</th>
                                    <th class="text-right">{{ 'my_account.order.detail.column.price'|trans }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for line in order.lines %}
                                    <tr>
                                        <td>{{ line.offer_name|trans }}</td>
                                        <td>{{ line.quantity }}{% if not line.is_option %} ({{ 'license'|transchoice(line.quantity) }}){% endif %}</td>
                                        <td class="text-right">{{ line.amount|number_format(2, ',','') }} €</td>
                                    </tr>
                                {% endfor %}
                                <tr class="sum border_top">
                                    <td rowspan="3">{{ 'my_account.order.detail.text2'|trans }}</td>
                                    <td class="text-right">{{ 'my_account.order.amount_pre_tax'|trans }}</td>
                                    <td class="text-right">{% if order.amount_pre_tax %}{{ order.amount_pre_tax|number_format(2, ',','') }} €{% endif %}</td>
                                </tr>
                                <tr class="sum">
                                    <td class="text-right">{{ 'my_account.order.amount_tax'|trans }}</td>
                                    <td class="text-right">{% if order.amount_tax %}{{ order.amount_tax|number_format(2, ',','') }} €{% endif %}</td>
                                </tr>
                                <tr class="sum">
                                    <td class="text-right">{{ 'my_account.order.amount_with_tax'|trans }}</td>
                                    <td class="text-right">{% if order.amount_with_tax %}{{ order.amount_with_tax|number_format(2, ',','') }} €{% endif %}</td>
                                </tr>
                                </tbody>
                            </table>
                        {% endif %}
                    </div>
                    {% if order.payment %}
                        <div class="cell small-6">
                            <h4 class="subtitle">{{ 'my_account.order.detail.text3'|trans }}</h4>
                        </div>
                        <div class="cell small-6">
                            {% if order.payment.date %}<div class="listing xl"><span>{{ 'my_account.order.payment.date'|trans }}</span><b>{{ order.payment.date|date('d/m/Y H:i') }}</b></div>{% endif %}
                            {% if order.payment.amount %}<div class="listing xl"><span>{{ 'my_account.order.payment.amount'|trans }}</span><b>{{ order.payment.amount|number_format(2, ',','') }} €</b></div>{% endif %}
                            {% if order.payment.authorization %}<div class="listing xl"><span>{{ 'my_account.order.payment.authorization'|trans }}</span><b>{{ order.payment.authorization }}</b></div>{% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
            <button class="close-button"  data-close aria-label="Close modal" type="button">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    {% endfor %}
    {# MODAL EDIT ACCOUNT #}
    <div class="reveal" id="modalEditAccount" data-reveal>
        <div class="reveal-title">{{ 'my_account.modal.edit.title'|trans }}</div>
        <div class="reveal-body">
            {{ form_start(formEdit, {'attr': {'id': 'formEditAccount'}}) }}
            <div class="grid-x grid-margin-x">
                <div class="cell small-12">
                    <div class="grid-x grid-padding-x">
                        <div class="cell small-12">
                            {{ form_label(formEdit.nom)}}
                            {{ form_widget(formEdit.nom)}}
                        </div>
                        <div class="cell small-12">
                            {{ form_label(formEdit.adresse1)}}
                            {{ form_widget(formEdit.adresse1)}}
                        </div>
                        <div class="cell small-12">
                            {{ form_widget(formEdit.adresse2)}}
                        </div>
                        <div class="cell small-3">
                            {{ form_label(formEdit.codePostal)}}
                            {{ form_widget(formEdit.codePostal)}}
                        </div>
                        <div class="cell small-9">
                            {{ form_label(formEdit.ville)}}
                            {{ form_widget(formEdit.ville)}}
                        </div>
                        <div class="cell small-6">
                            {{ form_label(formEdit.pays)}}
                            {{ form_widget(formEdit.pays)}}
                        </div>
                        <div class="cell small-6">
                            {{ form_label(formEdit.telephone)}}
                            {{ form_widget(formEdit.telephone)}}
                        </div>
                        <div class="cell small-6">
                            {{ form_label(formEdit.siret)}}
                            {{ form_widget(formEdit.siret)}}
                        </div>
                        <div class="cell small-6">
                            {{ form_label(formEdit.numeroTVA)}}
                            {{ form_widget(formEdit.numeroTVA)}}
                        </div>
                    </div>
                </div>
            </div>
            {{ form_end(formEdit) }}
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button id="btn_submit_edit_account" class="button small update">{{ 'edit'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
{% endblock %}
{% block javascript_footer %}
    {{ parent() }}
    <script>
    $(document).ready(function(){
        let btn_form_edit_account_submit = $('#btn_submit_edit_account');
        $(btn_form_edit_account_submit).click(function(){
            let form_edit_account = $('#formEditAccount');
            let form_edit_account_parsley = $(form_edit_account).parsley(parsley_options);
            form_edit_account_parsley.validate();
            form_edit_account_parsley
                .whenValid()
                .then(function () {
                    $(btn_form_edit_account_submit).html(btn_spin);
                    $(form_edit_account).submit();
                });
        });

        $('.download_private').click(function(){
            let doc_id = $(this).data('docid'),
                doc_file_name = $(this).data('filename'),
                doc_url = "{{ url('app_download_file',{'token': csrf_token('app_download_file'), 'document':'__00__'}) }}";
            doc_url = doc_url.replace('__00__', doc_id);
            downloadStream(doc_url,doc_file_name);
        });
    });
    </script>
{% endblock %}