{% extends 'App/_include/_layout.main.html.twig' %}
{% block page_content %}
    {% import _self as formMacro %}
    {% macro renderOption(formField, loop_index, options, subscribed_options) %}
        {% for option in options %}
            {% if loop.index == loop_index and option.code not in subscribed_options %}
                <tr>
                    <td colspan="2">
                        <div class="subscriber_option">
                            <div class="text_subscriber_option">
                                {{ form_widget(formField, {'attr':{'data-amount': option.amount, 'class':'option_checkbox'}}) }}
                                {{ form_label(formField, option.name|trans|capitalize) }}
                            </div>
                            <div class="price_subcriber_option">
                                ({{ option.amount}} €)
                            </div>
                        </div>
                    </td>
                    <td class="sub_col_number bg_primary_light amount_without_tax text-right">-</td>
                    <td class="sub_col_number amount_tax text-right">-</td>
                    <td class="sub_col_number bg_primary_light amount_with_tax text-right">-</td>
                </tr>
            {% endif %}
        {% endfor %}
    {% endmacro %}

    <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-shopping-cart"></i>{{ 'subscription.step2.title'|trans }}</h1>
            </div>
        </div>
    </div>
    <div class="cell small-12">
        {{ form_start(formSubscriptionStep2) }}
        <h3 class="subheader">{{ 'subscription.step2.subtitle.my_order'|trans }}</h3>
        <table class="no_alternate_bg" id="table_offers_prices">
            <thead>
                <tr>
                    <th class="text-center">{{ 'subscription.step2.column.name'|trans }}</th>
                    <th class="text-center">{{ 'subscription.step2.column.qte'|trans }}</th>
                    <th class="text-center bg_primary_light">{{ 'subscription.step2.column.without_tax'|trans }}</th>
                    <th class="text-center">{{ 'subscription.step2.column.tax'|trans }}</th>
                    <th class="text-center bg_primary_light">{{ 'subscription.step2.column.with_tax'|trans }}</th>
                </tr>
            </thead>
            <tbody>
                <tr id="main_offer">
                    <td>
                        {{ offer.name|trans|capitalize }} ({{ 'subscription.step2.text.from_to'|trans({'%date_start%':current_order.dateStart|date('d/m/Y'),'%date_end%': current_order.dateEnd|date('d/m/Y') }) }})
                    </td>
                    <td class="sub_col_number">
                        {{ form_widget(formSubscriptionStep2.quantity, {'attr':{'class':'qte_field'}}) }}
                    </td>
                    <td class="sub_col_number bg_primary_light amount_without_tax text-right"></td>
                    <td class="sub_col_number amount_tax text-right"></td>
                    <td class="sub_col_number bg_primary_light amount_with_tax text-right"></td>
                </tr>
                {% if credit_offer %}
                    <tr id="credit_offer">
                        <td>{{ credit_offer.name|trans|capitalize }} ({{ 'subscription.step2.text.from_to'|trans({'%date_start%':credit_offer.dateStart|date('d/m/Y'),'%date_end%': credit_offer.dateEnd|date('d/m/Y') }) }})</td>
                        <td class="sub_col_number">
                            <input type="number" class="qte_field" value="{{ credit_offer.quantity }}" disabled="disabled">
                            <td class="sub_col_number bg_primary_light amount_without_tax text-right"></td>
                            <td class="sub_col_number amount_tax text-right"></td>
                            <td class="sub_col_number bg_primary_light amount_with_tax text-right"></td>
                        </td>
                    </tr>
                {% endif %}
                {% for field in formSubscriptionStep2.options %}
                    {{ formMacro.renderOption(field, loop.index, options, subscribed_options) }}
                {% endfor %}
                <tr id="total_amount">
                    <td colspan="2" class="text-right">{{ 'subscription.step2.table.total'|trans }}</td>
                    <td id="total_amount_without_tax" class="sub_col_number bg_primary_light text-right">-</td>
                    <td id="total_amount_tax" class="sub_col_number text-right">-</td>
                    <td id="total_amount_with_tax" class="sub_col_number bg_primary_light text-right">-</td>
                </tr>
            </tbody>
        </table>

        <div class="grid-x grid-padding-x mt-1-5">
            <div class="cell small-12"><h3 class="subheader underlined mb-1-5">{{ 'subscription.step2.subtitle.my_coords'|trans }}</h3></div>
            <div class="cell small-6">
                <div class="grid-x grid-padding-x">
                    <div class="cell small-5 text-right">{{ form_label(formSubscriptionStep2.nom) }}</div>
                    <div class="cell small-7">{{ form_widget(formSubscriptionStep2.nom) }}</div>
                    <div class="cell small-5 text-right">{{ form_label(formSubscriptionStep2.adresse1) }}</div>
                    <div class="cell small-7">{{ form_widget(formSubscriptionStep2.adresse1) }}</div>
                    <div class="cell small-5"></div>
                    <div class="cell small-7">{{ form_widget(formSubscriptionStep2.adresse2) }}</div>
                    <div class="cell small-5 text-right">
                        {{ form_label(formSubscriptionStep2.codePostal) }}&nbsp;&nbsp;/&nbsp;
                        {{ form_label(formSubscriptionStep2.ville) }}
                    </div>
                    <div class="cell small-2">{{ form_widget(formSubscriptionStep2.codePostal) }}</div>
                    <div class="cell small-5">{{ form_widget(formSubscriptionStep2.ville) }}</div>
                    <div class="cell small-5 text-right">{{ form_label(formSubscriptionStep2.pays) }}</div>
                    <div class="cell small-7">{{ form_widget(formSubscriptionStep2.pays) }}</div>
                </div>
            </div>
            <div class="cell small-6">
                <div class="grid-x grid-padding-x">
                    <div class="cell small-5 text-right">{{ form_label(formSubscriptionStep2.siret) }}</div>
                    <div class="cell small-7">{{ form_widget(formSubscriptionStep2.siret) }}</div>
                    <div class="cell small-5 text-right">{{ form_label(formSubscriptionStep2.numeroTVA) }}</div>
                    <div class="cell small-7">{{ form_widget(formSubscriptionStep2.numeroTVA) }}</div>
                    <div class="cell small-5 text-right">{{ form_label(formSubscriptionStep2.telephone) }}</div>
                    <div class="cell small-7">{{ form_widget(formSubscriptionStep2.telephone) }}</div>
                    <div class="cell small-7 small-offset-5">
                        {{ form_widget(formSubscriptionStep2.agree_t_and_c) }}
                        <a href="javascript:void(0)" data-open="modal_t_and_c">
                            {{ form_label(formSubscriptionStep2.agree_t_and_c) }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div style="display: none;">
            {{ form_rest(formSubscriptionStep2) }}
        </div>
        <div class="cell small-12 text-right">
            <button type="submit" class="button small save">{{ 'subscription.step2.btn_next_step'|trans }}</button>
        </div>
        {{ form_end(formSubscriptionStep2) }}
    </div>
    <div class="reveal large" id="modal_t_and_c" data-reveal>
        <div class="reveal-title">{{ 'subscription.step2.modal_t_and_c.title'|trans }}</div>
        <div class="reveal-body" >
            <div class="grid-x">
                <div class="cell">
                    {% if page_t_and_c %}
                        {{ page_t_and_c.body|raw }}
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel cancel_export">{{ 'close'|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 offer = {
                amount: "{{ offer.amount }}",
                taxRate: "{{ offer.taxRate }}"
            };
            let credit_offer = {
                amount: {% if credit_offer %}"{{ credit_offer.amount * credit_offer.quantity }}"{% else %}0{% endif %},
                taxRate: {% if credit_offer %}"{{ credit_offer.taxRate }}"{% else %}0{% endif %}
            };
            let offer_price = {
                without_tax: 0,
                amount_tax: 0,
                with_tax: 0
            };
            let credit_offer_price = {
                without_tax: {% if credit_offer  %}{{ credit_offer.amount * credit_offer.quantity }}{% else %}0{% endif %},
                amount_tax: 0,
                with_tax: 0
            };
            let option_price = {
                without_tax: 0,
                amount_tax: 0,
                with_tax: 0
            };
            let global_price = {
                without_tax: 0,
                amount_tax: 0,
                with_tax: 0
            };
            let input_quantity = $('#subscription_step2_quantity');
            let offer_without_tax = 0,
                offer_amount_tax = 0,
                offer_amount_to_pay = 0;

            $(input_quantity).change(function () {
                calc_offer_price();
            });
            $('.option_checkbox').change(function () {
                calc_option_price($(this));
            });

            {% if credit_offer  %}
            function calc_credit_offer_price() {
                let quantity = {{ credit_offer.quantity }};
                credit_offer_price.amount_tax = credit_offer_price.without_tax * credit_offer.taxRate;
                credit_offer_price.with_tax = credit_offer_price.amount_tax + credit_offer_price.without_tax;

                $('#credit_offer td.amount_without_tax').text(roundDecimal(credit_offer_price.without_tax,2)+ ' €');
                $('#credit_offer td.amount_tax').text(roundDecimal(credit_offer_price.amount_tax,2)+ ' €');
                $('#credit_offer td.amount_with_tax').text(roundDecimal(credit_offer_price.with_tax,2)+ ' €');
                set_total_price();
            }
            calc_credit_offer_price();
            {% endif %}

            function calc_offer_price() {
                let quantity = parseInt($(input_quantity).val());
                offer_without_tax = parseFloat(offer.amount) * quantity;
                offer_amount_tax = offer_without_tax * parseFloat(offer.taxRate);
                offer_amount_to_pay = offer_without_tax + offer_amount_tax;

                offer_price.without_tax = offer_without_tax;
                offer_price.amount_tax = offer_amount_tax;
                offer_price.with_tax = offer_amount_to_pay;

                let td_without_tax = $("#main_offer td.amount_without_tax"),
                    td_amount_tax = $("#main_offer td.amount_tax"),
                    td_amount_with_tax = $("#main_offer td.amount_with_tax");

                td_without_tax.text(roundDecimal(offer_without_tax,2)+ ' €');
                td_amount_tax.text(roundDecimal(offer_amount_tax,2)+ ' €');
                td_amount_with_tax.text(roundDecimal(offer_amount_to_pay,2)+ ' €');
                set_total_price();
            }
            calc_offer_price();
            function calc_option_price(current_input) {
                let amount = parseFloat($(current_input).data('amount'));
                let parent_tr = $(current_input).closest('tr');
                let td_without_tax = $(parent_tr).find('.amount_without_tax')[0],
                    td_amount_tax = $(parent_tr).find('.amount_tax')[0],
                    td_amount_with_tax = $(parent_tr).find('.amount_with_tax')[0];

                let current_amount_without_tax = amount,
                    current_amount_tax = roundDecimal(parseFloat(offer.taxRate) * amount,2),
                    current_amount_with_tax = roundDecimal((parseFloat(offer.taxRate) * amount + amount),2);

                if ($(current_input).is(":checked")){
                    $(td_without_tax).text(current_amount_without_tax+ ' €');
                    $(td_amount_tax).text(current_amount_tax+ ' €');
                    $(td_amount_with_tax).text(current_amount_with_tax+ ' €');
                    option_price.without_tax += current_amount_without_tax;
                    option_price.amount_tax += current_amount_tax;
                    option_price.with_tax += current_amount_with_tax;
                } else {
                    option_price.without_tax -= current_amount_without_tax;
                    option_price.amount_tax -= current_amount_tax;
                    option_price.with_tax -= current_amount_with_tax;
                    $(td_without_tax).text('-');
                    $(td_amount_tax).text('-');
                    $(td_amount_with_tax).text('-');
                }
                set_total_price();
            }
            function set_total_price(){
                global_price.without_tax = option_price.without_tax + offer_price.without_tax + credit_offer_price.without_tax;
                global_price.amount_tax = option_price.amount_tax + offer_price.amount_tax + credit_offer_price.amount_tax;
                global_price.with_tax = option_price.with_tax + offer_price.with_tax + credit_offer_price.with_tax;

                $('#total_amount_without_tax').text(roundDecimal(global_price.without_tax, 2)+ ' €');
                $('#total_amount_tax').text(roundDecimal(global_price.amount_tax,2)+ ' €');
                $('#total_amount_with_tax').text(roundDecimal(global_price.with_tax,2)+ ' €');
            }

            function roundDecimal(number, precision){
                let d_precision = precision || 2;
                let tmp = Math.pow(10, d_precision);
                return Math.round( number*tmp )/tmp;
            }

        });
    </script>
{% endblock %}