{% extends request.ajax ? "layout_blank.html.twig" : "layout_default.html.twig" %}

{% block meta_title %}{{ 'Processing payment ...'|trans }}{% endblock %}

    {% block breadcrumb %}
        <li class="breadcrumb-item"><a href="{{ '/invoice'|link }}">{{ 'Invoices'|trans }}</a></li>
        <li class="breadcrumb-item active" aria-current="page">Payment</li>
    {% endblock %}

{% block content %}

<div class="row">
    <div class="col-md-12">
        <div class="card mb-4">
            <div class="card-header">
                <h5>{{ 'Processing payment ...'|trans }}</h5>
                <p>{{ 'Thank you for your patience.'|trans }}</p>
            </div>
            <div class="card-body">
                {% if payment.type == 'html' %}
                    {{ payment.result|raw }}
                {% endif %}
                {% if payment.type == 'form' %}
                <h2>{{ 'Redirecting to payment gateway...'|trans }}</h2>
                <form name="payment_form" action="{{ payment.service_url }}" method="post">
                    <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                    {% for key, value in payment.result %}
                    <input type="hidden" name="{{ key }}" value="{{ value }}" />
                    {% endfor %}
                    <input class="btn btn-primary" type="submit" value="{{ 'Please click here to continue if this page does not redirect automatically in 5 seconds'|trans }}" id="payment_button"/>
                </form>

                <script type="text/javascript">
                    $(document).ready(function() {
                        document.getElementById('payment_button').style.display = 'none';
                        document.forms["payment_form"].submit();
                    });
                </script>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}
