<div class="unzerUI form">
    <div class="field">
        <div id="card-element-id-card-holder-{{ paymentId }}" class="unzerInput">
        </div>
    </div>
    <div class="field">
        <div id="card-element-id-number-{{ paymentId }}" class="unzerInput">
        </div>
    </div>
    <div class="two fields">
        <div class="field ten wide">
            <div id="card-element-id-expiry-{{ paymentId }}" class="unzerInput">
            </div>
        </div>
        <div class="field six wide">
            <div id="card-element-id-cvc-{{ paymentId }}" class="unzerInput">
            </div>
        </div>
    </div>
    <div class="divider"></div>
</div>

<div class="modal fade" id="unzerWaitingDialog-{{ paymentId }}" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body text-center">{{ translate({ ident: "D3UNZER_PAYMENT_PLEASE_WAIT" }) }}</div>
        </div>
    </div>
</div>

{% set doNotShow %}
    <script type="text/javascript">
        {% set javaScript %}
            var unzerInstance;
            if( "undefined" === typeof unzerInstance ) {
                unzerInstance= new unzer('{{ d3UnzerPublicKey }}', {locale: '{{ d3UnzerLanguageLocale }}'});
            }

            var Card_{{ paymentId|escape('url') }} = unzerInstance.Card();
            Card_{{ paymentId|escape('url') }}.create('holder',
                {
                    containerId: 'card-element-id-card-holder-{{ paymentId }}', onlyIframe: false
                });
            Card_{{ paymentId|escape('url') }}.create('number',
                {
                    containerId: 'card-element-id-number-{{ paymentId }}', onlyIframe: false
                });
            Card_{{ paymentId|escape('url') }}.create('expiry',
                {
                    containerId: 'card-element-id-expiry-{{ paymentId }}', onlyIframe: false
                });
            Card_{{ paymentId|escape('url') }}.create('cvc',
                {
                    containerId: 'card-element-id-cvc-{{ paymentId }}', onlyIframe: false
                });
            var form = document.getElementById('payment');
            form.addEventListener('submit',
                function (event) {
                    let isFormValid = $().d3UnzerValidateMissingUserParameter();

                    if (isFormValid && $('#{{ selectorId }}').is(':checked')) {
                        event.preventDefault();
                        $('#error-{{ paymentId }}').remove();
                        var modalDialog = $("#unzerWaitingDialog-{{ paymentId }}").modal('show');
                        Card_{{ paymentId|escape('url') }}.createResource()
                            .then(function (result) {
                                var hiddenField = document.createElement("input");
                                hiddenField.value = JSON.stringify(result);
                                hiddenField.type  = 'hidden';
                                hiddenField.name  = "unzer-result";

                                form.appendChild(hiddenField);
                                form.submit();
                            })
                            .catch(function (error) {
                                var errorMessage = document.createElement("p");

                                $(errorMessage).prop('id', 'error-{{ paymentId }}');
                                $(errorMessage).addClass('alert');
                                $(errorMessage).addClass('alert-danger');
                                $(errorMessage).text(error.message);
                                form.parentNode.insertBefore(errorMessage, form);

                                $([document.documentElement, document.body]).animate({
                                    scrollTop: $('#error-{{ paymentId }}').offset().top
                                }, 1000);
                            })
                            .finally(function () {
                                modalDialog.modal("hide");
                            });
                    }
                });
        {% endset %}
    </script>
{% endset %}
{{ script({ add: javaScript.__toString(), dynamic: __oxid_include_dynamic }) }}

