{% sw_extends '@Storefront/storefront/page/checkout/finish/finish-details.html.twig' %}

{% block page_checkout_finish_data %}
    {{ parent() }}

    {% block page_checkout_finish_data_paypal_pui_container %}
        {% set payPalPuiPaymentInstruction = null %}
        {% set customFieldKey = constant('Swag\\PayPal\\SwagPayPal::ORDER_TRANSACTION_CUSTOM_FIELDS_PAYPAL_PUI_INSTRUCTION') %}
        {% for transaction in page.order.transactions %}
            {% if transaction.customFields[customFieldKey] %}
                {% set payPalPuiPaymentInstruction = transaction.customFields[customFieldKey] %}
            {% endif %}
        {% endfor %}

        {% block page_checkout_finish_data_paypal_pui_instructions %}
            {% if payPalPuiPaymentInstruction %}
                {% set paymentDueDate = payPalPuiPaymentInstruction.payment_due_date|format_date('short', locale=app.request.locale) %}
                <div class="border mb-5 p-4 text-left text-sm-center">

                    {% block page_checkout_finish_data_paypal_pui_instructions_header_diagram %}
                        <div class="row justify-content-center no-gutters align-items-center mb-3 font-weight-bold">

                            {% block page_checkout_finish_data_paypal_pui_instructions_header_diagram_amount %}
                                <div class="col-sm-3 col-md-2">
                                    <span class="align-middle">{% sw_icon 'money-cash' style { 'size': 'md' } %}</span>
                                    <span class="ml-1">{{ (payPalPuiPaymentInstruction.amount.value*1.0)|currency(payPalPuiPaymentInstruction.amount.currency) }}</span>
                                </div>
                            {% endblock %}

                            {% block page_checkout_finish_data_paypal_pui_instructions_header_diagram_amount_to_due %}
                                <div class="col-1 d-none d-sm-block">
                                    {% sw_icon 'arrow-right' style { 'size': 'lg' } %}
                                </div>

                                <div class="col d-sm-none mb-1">
                                    {% sw_icon 'arrow-down' style { 'size': 'md' } %}
                                </div>
                            {% endblock %}

                            {% block page_checkout_finish_data_paypal_pui_instructions_header_diagram_due %}
                                <div class="col-sm-3 col-md-2">
                                    <span class="align-middle">{% sw_icon 'calendar' style { 'size': 'md' } %}</span>
                                    <span class="ml-1">{{ paymentDueDate }}</span>
                                </div>
                            {% endblock %}

                            {% block page_checkout_finish_data_paypal_pui_instructions_header_diagram_due_to_logo %}
                                <div class="col-1 d-none d-sm-block">
                                    {% sw_icon 'arrow-right' style { 'size': 'lg' } %}
                                </div>

                                <div class="col d-sm-none mt-1 mb-2">
                                    {% sw_icon 'arrow-down' style { 'size': 'md' } %}
                                </div>
                            {% endblock %}

                            {% block page_checkout_finish_data_paypal_pui_instructions_header_diagram_logo %}
                                <div class="col-sm-4 col-md-3">
                                    <img src="{{ asset('storefront/img/paypal-logo.png', '@SwagPayPal') }}" alt="PayPal logo"/>
                                </div>
                            {% endblock %}
                        </div>
                    {% endblock %}

                    {% block page_checkout_finish_data_paypal_pui_instructions_header_text %}
                        <div class="row my-4">
                            <div class="col">{{ "paypal.payUponInvoice.instructions.transferRequest"|trans({"%value%": (payPalPuiPaymentInstruction.amount.value*1.0)|currency(payPalPuiPaymentInstruction.amount.currency), "%currency%": '', "%date%": paymentDueDate}) }}  </div>
                        </div>
                    {% endblock %}

                    {% block page_checkout_finish_data_paypal_pui_instructions_content %}
                        <div class="row justify-content-center no-gutters">
                            <div class="col-sm-10 col-md-8">
                                <dl class="row text-sm-left swag-paypal-checkout-finish-pui-instructions-content">

                                    {% block page_checkout_finish_data_paypal_pui_instructions_content_bankname %}
                                        <dt class="instruction-title">{{ "paypal.payUponInvoice.instructions.table.bank"|trans }}</dt>
                                        <dd class="instruction-description">{{ payPalPuiPaymentInstruction.recipient_banking_instruction.bank_name }}</dd>
                                    {% endblock %}

                                    {% block page_checkout_finish_data_paypal_pui_instructions_content_iban %}
                                        <dt class="instruction-title">{{ "paypal.payUponInvoice.instructions.table.iban"|trans }}</dt>
                                        <dd class="instruction-description">{{ payPalPuiPaymentInstruction.recipient_banking_instruction.international_bank_account_number }}</dd>
                                    {% endblock %}

                                    {% block page_checkout_finish_data_paypal_pui_instructions_content_bic %}
                                        <dt class="instruction-title">{{ "paypal.payUponInvoice.instructions.table.bic"|trans }}</dt>
                                        <dd class="instruction-description">{{ payPalPuiPaymentInstruction.recipient_banking_instruction.bank_identifier_code }}</dd>
                                    {% endblock %}

                                    {% block page_checkout_finish_data_paypal_pui_instructions_content_holdername %}
                                        <dt class="instruction-title">{{ "paypal.payUponInvoice.instructions.table.holder"|trans }}</dt>
                                        <dd class="instruction-description">{{ payPalPuiPaymentInstruction.recipient_banking_instruction.account_holder_name }}</dd>
                                    {% endblock %}

                                    {% block page_checkout_finish_data_paypal_pui_instructions_content_amount %}
                                        <dt class="instruction-title">{{ "paypal.payUponInvoice.instructions.table.amount"|trans }}</dt>
                                        <dd class="instruction-description">{{ (payPalPuiPaymentInstruction.amount.value*1.0)|currency(payPalPuiPaymentInstruction.amount.currency) }}</dd>
                                    {% endblock %}

                                    {% block page_checkout_finish_data_paypal_pui_instructions_content_reference %}
                                        <dt class="instruction-title">{{ "paypal.payUponInvoice.instructions.table.reference"|trans }}</dt>
                                        <dd class="instruction-description">{{ payPalPuiPaymentInstruction.reference_number }}</dd>
                                    {% endblock %}
                                </dl>
                            </div>
                        </div>
                    {% endblock %}

                    {% block page_checkout_finish_data_paypal_pui_instructions_legal %}
                        <div class="row">
                            <div class="col my-3">{{ "paypal.payUponInvoice.instructions.legalMessage"|trans }}</div>
                        </div>
                    {% endblock %}
                </div>
            {% endif %}
        {% endblock %}

    {% endblock %}

{% endblock %}