{% block content %}
    <div class="fill pb-5">
        {% for payment_method in payment_methods[0:3] %}
            <div class="fill mb-0">
                <div class="payment-method fill">
                    <input type="radio" name="paymentMethod" class="radio-{{ payment_method.id }} payment-method-radio"
                           value="{{ payment_method.type }}">
                    {% if payment_method.logo %}
                        <div class="payment-method-logo float-left">
                            <img src="{{ payment_method.logo }}" alt="{{ payment_method.name }}"/>
                        </div>
                    {% endif %}
                    <div class="payment-method-name">
                        <strong>{{ payment_method.name }}</strong>
                    </div>
                    {% if payment_method.psp =='stripe' %}
                        {% if payment_method.type =='ideal' %}
                            <div class="col-12 col-sm-6 no-padding" id="paymentSelectable-{{ payment_method.type }}">
                            </div>
                        {% elseif payment_method.type =='sepa_debit' %}
                            <div id="iban-element">
                                <!-- A Stripe Element will be inserted here. -->
                            </div>
                        {% endif %}
                    {% else %}
                        {% if payment_method.extra is defined %}
                            {% for field in payment_method.extra.fields %}
                                {% if field.type == 'selectable' %}
                                    <div class="fill">
                                        <select name="paymentMethodAttributes[{{ field.id }}]">
                                            {% for value in payment_method.extra.issuers %}
                                                <option value="{{ value.id }}">{{ value.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        {% endif %}
                    {% endif %}
                </div>
            </div>
        {% endfor %}
        {% if payment_methods|length > 3 %}
            <div class="more-payments hidden">
                {% for payment_method in payment_methods[3:] %}
                    <div class="fill mb-0">
                        <div class="payment-method fill">
                            <input type="radio" name="paymentMethod"
                                   class="radio-{{ payment_method.id }} payment-method-radio"
                                   value="{{ payment_method.type }}">
                            {% if payment_method.logo %}
                                <div class="payment-method-logo float-left">
                                    <img src="{{ payment_method.logo }}" alt="{{ payment_method.name }}"/>
                                </div>
                            {% endif %}
                            <div class="payment-method-name">
                                <strong>{{ payment_method.name }}</strong>
                            </div>
                            {% if payment_method.psp =='stripe' %}
                                {% if payment_method.type =='ideal' %}
                                    <div class="col-12 col-sm-6 no-padding" id="paymentSelectable-{{ payment_method.type }}">
                                    </div>
                                {% elseif payment_method.type =='sepa_debit' %}
                                    <div id="iban-element">
                                        <!-- A Stripe Element will be inserted here. -->
                                    </div>
                                {% endif %}
                            {% else %}
                                {% if payment_method.extra is defined %}
                                    {% for field in payment_method.extra.fields %}
                                        {% if field.type == 'selectable' %}
                                            <div class="fill">
                                                <select name="paymentMethodAttributes[{{ field.id }}]">
                                                    {% for value in payment_method.extra.issuers %}
                                                        <option value="{{ value.id }}">{{ value.name }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                        {% endif %}
                                    {% endfor %}
                                {% endif %}
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            </div>
            <a id="expandPayments" class="btn btn-secondary" href="javascript:">
                Meer betaalopties <span class="fa fa-chevron-down"></span>
            </a>
        {% endif %}
    </div>
    <div class="fill">
        <div class="next-step">
            <div class="form-group checkbox has-feedback">
                <div class="col-12">
                    <label class="confirm"><input type="checkbox"
                                                  name="conditions" {{ transaction is defined and transaction.status == "CONFIRMED" ? ' checked="checked" disabled="disabled"' : '' }}
                                                  data-bv-field="conditions" class="i-agree-with-the-conditions">
                        Ik ga akkoord met de algemene voorwaarden <a target="_blank"
                                                                     href="{{ urls.terms_and_conditions }}">(Bekijk)</a>
                    </label>
                </div>
            </div>
        </div>
    </div>
    <div class="fill">
        <div id="error-message"></div>
        <div class="next-step">
            {% if transaction is defined and transaction.status == "CONFIRMED" %}
                <button type="submit" disabled class="btn btn btn-block btn-primary payment-link"><span
                            class="fa fa-shopping-cart"></span>&nbsp;Opnieuw naar Betalen
                </button>
            {% else %}
                <button type="submit" disabled class="btn btn btn-block btn-primary payment-link"><span
                            class="fa fa-shopping-cart"></span>&nbsp;Bestelling plaatsen en Betalen
                </button>
            {% endif %}
            <p>
                U wordt omgeleid naar onze betaalpagina waar u het totaalbedrag direct kan voldoen.

            </p>
        </div>
        <div id="mandate-acceptance" class="fill hidden">
            By providing your IBAN and confirming this payment, you are
            authorizing Rocketship Inc. and Stripe, our payment service
            provider, to send instructions to your bank to debit your account and
            your bank to debit your account in accordance with those instructions.
            You are entitled to a refund from your bank under the terms and
            conditions of your agreement with your bank. A refund must be claimed
            within 8 weeks starting from the date on which your account was debited.
        </div>
    </div>

{% endblock %}
{% block post_js %}
    <script type="text/javascript">

        $("#expandPayments").click(function () {
            $(this).html($(this).html() === 'Minder betaalmethodes <span class="fa fa-chevron-up"></span>' ? 'Meer betaalmethodes <span class="fa fa-chevron-down"></span>' : 'Minder betaalmethodes <span class="fa fa-chevron-up"></span>');
            $(".more-payments").slideToggle();
        });

        var countries = [];
        {% for country in countries %}
        countries['{{ country.name }}'] = '{{ country.code }}';
        {% endfor %}

        var amount = {{ shopping_cart_overview.total_price|number_format(2, '', '') }};
        var stripe = Stripe('{{ psp_public_key }}');
        var elements = stripe.elements();
        var options = {
            // Custom styling can be passed to options when creating an Element.
            style: {
                base: {
                    // Add your base input styles here. For example:
                    fontSize: '16px',
                    color: '#32325d',
                    padding: '10px 12px',
                },
            }
        };

        // Create an instance of the idealBank Element.
        var idealBank = elements.create('idealBank', options);
        // Add an instance of the idealBank Element into
        // the `ideal-bank-element` <div>.

        if ($("#paymentSelectable-ideal").length) {
            idealBank.mount('#paymentSelectable-ideal');
        }
        idealBank.on('change', function (event) {
            var bank = event.value;
            createSourceAndSave();
        });

        var style = {
            base: {
                color: '#32325d',
                fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
                fontSmoothing: 'antialiased',
                fontSize: '16px',
                '::placeholder': {
                    color: '#aab7c4'
                },
                ':-webkit-autofill': {
                    color: '#32325d',
                },
            },
            invalid: {
                color: '#fa755a',
                iconColor: '#fa755a',
                ':-webkit-autofill': {
                    color: '#fa755a',
                },
            }
        };

        var iban = elements.create('iban', {
            style: style,
            supportedCountries: ['SEPA'],
        });

        if ($("#iban-element").length) {
            iban.mount('#iban-element');
        }

        var errorMessage = document.getElementById('error-message');
        var bankName = document.getElementById('bank-name');
        iban.on('change', function (event) {
            // Handle real-time validation errors from the iban Element.
            if (event.error) {
                errorMessage.textContent = event.error.message;
                errorMessage.classList.add('visible');
            } else {
                errorMessage.classList.remove('visible');
            }

            // Display bank name corresponding to IBAN, if available.
            if (event.bankName) {
                bankName.textContent = event.bankName;
                bankName.classList.add('visible');
            } else {
                bankName.classList.remove('visible');
            }
        });

        $('input[name=paymentMethod]').change(function () {
            createSourceAndSave();
        });
        function createSourceAndSave() {
            $('button[type=submit]').attr("disabled", 'disabled');
            var paymentType = $('input[name=paymentMethod]:checked').val();
            var sourceData = {
                type: paymentType,
                amount: amount,
                currency: 'eur',
                owner: {name: null, email: null},
                sepa_debit: {iban: null},
                sofort: {country: null},
                // Specify the URL to which the customer should be redirected after paying.
                redirect: {
                    return_url: '{{ redirect_url }}',
                },
            };
            sourceData.owner.name = document.getElementById('paymentName').innerHTML;
            sourceData.owner.email = document.getElementById('paymentEmail').innerHTML;
            sourceData.sofort.country = countries[document.getElementById('paymentCountry').innerHTML];
            if (paymentType === 'ideal') {
                stripe.createSource(idealBank, sourceData).then(function (result) {
                    if (result.error) {
                        // Inform the customer that there was an error.
                        var errorElement = document.getElementById('error-message');
                        errorElement.innerHTML = result.error.message;
                    } else {
                        // Redirect the customer to the authorization URL.
                        success(result)
                    }
                });
            } else {
                stripe.createSource(sourceData).then(function (result) {
                    if (result.error) {
                        // Inform the customer that there was an error.
                        var errorElement = document.getElementById('error-message');
                        errorElement.innerHTML = result.error.message;
                    } else {
                        // Redirect the customer to the authorization URL.
                        success(result)
                    }
                });
            }
        }

        function success(result) {
            var paymentForm = $('#paymentForm');
            if ($('input[name=payment_source]').length === 0) {
                var input = $("<input>")
                    .attr("type", "hidden")
                    .attr("name", "payment_source").val(result.source.id);
                paymentForm.append(input);
            } else {
                $('input[name=payment_source]').val(result.source.id)
            }

            if ($('input[name=redirect]').length === 0) {
                var input = $("<input>")
                    .attr("type", "hidden")
                    .attr("name", "redirect").val(result.source.redirect.url);
                paymentForm.append(input);
            } else {
                $('input[name=redirect]').val(result.source.redirect.url)
            }
            $('button[type=submit]').attr("disabled", null);
        }

    </script>
{% endblock %}