{# @var model \Stripe\PaymentIntent #}
{# @var publishable_key string #}
{# @var action_url string #}
{% extends layout ?: "@PayumCore/layout.html.twig" %}

{% block payum_stripejs_head %}
    <meta name="viewport" content="width=device-width, initial-scale=1" />
{% endblock %}

{% block payum_body %}
    {{ parent() }}

    <form id="payment-form">
        <div id="payment-element"></div>

        <button type="submit" disabled>Pay</button>

        <div id="error-message" class="hidden"></div>
    </form>
{% endblock %}

{% block payum_javascripts_stripejs_global %}
    <script src="https://js.stripe.com/v3/"></script>
{% endblock %}

{% block payum_javascripts_stripejs_appearance %}
    <script type="text/javascript">
        var appearance = {
            theme: 'stripe'
        };
    </script>
{% endblock %}

{% block payum_javascripts_stripejs_common %}
    <script type="text/javascript">
        var stripe = Stripe('{{ publishable_key }}');
        var options = {
            clientSecret: '{{ model.client_secret }}',
            appearance: appearance,
        };

        var elements = stripe.elements(options);

        if (typeof confirmPaymentOptions === 'undefined') {
            window.confirmPaymentOptions = {};
        }

        confirmPaymentOptions.elements = elements;
        var action_url = '{{ action_url|default('') }}';
        confirmPaymentOptions.confirmParams = {
            return_url: action_url ?? window.location.href,
        };

        var submitPaymentIntent = function() {
            changeLoadingState(true);
            hideError();

            stripe.confirmPayment(confirmPaymentOptions)
                .then(function (e) {
                    if (e) {
                        changeLoadingState(false);
                        // Show error to your customer
                        showError(e.error.message);
                    }
                });
        };

        var displayError = document.getElementById('error-message');

        var showError = function(errorMsgText) {
            displayError.classList.remove('hidden');
            displayError.textContent = errorMsgText;
        };

        var hideError = function(errorMsgText) {
            displayError.classList.add('hidden');
            displayError.textContent = errorMsgText;
        };

        // Show a spinner on payment submission
        var changeLoadingState = function(isLoading) {
            form.querySelector("button[type='submit']").disabled = !!isLoading;
        };

        // Create an instance of the payment Element.
        var paymentElement = elements.create('payment');

        // Add an instance of the card Element into the `card-element` <div>.
        paymentElement.mount('#payment-element');

        // Enable submit button when the payment elements are ready
        paymentElement.on('ready', function() {
            changeLoadingState(false);
        });

        // Handle form submission.
        var form = document.getElementById('payment-form');
        form.addEventListener('submit', function(event) {
            event.preventDefault();
            submitPaymentIntent();
        });
    </script>
{% endblock %}

{% block payum_stylesheets_stripejs_common %}
    <style type="text/css">
        .hidden {
            display: none;
        }

        #payment-element {
            margin-bottom: 10px;
        }

        #error-message {
            text-align: center;
            margin-top: 10px;
            padding: 10px;
            color: #000;
            background-color: #ff6b68;
        }
    </style>
{% endblock %}

{% block payum_vendor_javascripts %}
    {{ parent() }}
    {{ block('payum_javascripts_stripejs_global') }}
{% endblock %}

{% block payum_javascripts %}
    {{ parent() }}
    {{ block('payum_javascripts_stripejs_appearance') }}
    {{ block('payum_javascripts_stripejs_common') }}
{% endblock %}

{% block payum_stylesheets %}
    {{ parent() }}
    {{ block('payum_stripejs_head') }}
    {{ block('payum_stylesheets_stripejs_common') }}
{% endblock %}