{% extends 'main/layout.html' %}

{% block title %}Subscribe to Premium{% endblock %}

{% block head_extra %}
<script src="https://js.stripe.com/v3/?advancedFraudSignals=false"></script>
<style>
    [data-submitting] input[type="submit"] {
        opacity: 0.8;
    }
</style>
{% endblock head_extra %}

{% block content %}
<main>
    <h1>Subscribe to Premium</h1>

    <form id="payment-form" data-secret="{{ stripe_client_secret }}">

        <div id="payment-element">
            {# stripe.js will create stripe elements forms here #}
        </div>

        {% csrf_token %}
        <input id="submit" type="submit" value="Submit" style="margin-top: 16px;">
        <div id="loading-message" style="margin-top: 16px;">
            <!-- loading message for users here -->
        </div>
        <div id="error-message" style="margin-top: 16px; color: red;">
            <!-- error message for users here -->
        </div>
    </form>

    <p>
        <br>
        Once you click Submit:
    </p>
    <ol>
        <li>
            Your card details will be sent to Stripe (payment processor).
        </li>
        <li>
            We will charge your card immediately, through Stripe.
        </li>
        <li>
            We will store your card within Stripe, so that we can charge you
            next year.
        </li>
        <li>
            You will be able to cancel your subscription immediately as well,
            should you want to. You can cancel your subscription at any point,
            24/7/365, from this billing dashboard with one click.
        </li>
        <li>
            You can also get a refund, no questions asked.
        </li>
        <li>
            All terms of service can be found in our
            <a href="{% url 'methodology' %}">Methodology</a>
            page.
        </li>
    </ol>
</main>
{% endblock content %}

{% block scripts %}
<script>
    const stripe = Stripe('{{ stripe_public_key }}');
    const options = {
        clientSecret: '{{ stripe_client_secret }}',
    };
    const elements = stripe.elements(options);
    const paymentElement = elements.create('payment');
    paymentElement.mount('#payment-element');

    const form = document.getElementById('payment-form');
    form.addEventListener('submit', async (event) => {
        event.preventDefault();

        // if form is already submitting, do nothing
        if (form.hasAttribute('data-submitting')) {
            return;
        }

        // add [data-submitting] attribute to stop multiple submissions
        form.setAttribute('data-submitting', '');

        // add loading message
        const loadingContainer = document.querySelector('#loading-message');
        loadingContainer.textContent = 'Charging card using Stripe, this should take less than 10 seconds...';

        // clear error if exists
        const messageContainer = document.querySelector('#error-message');
        messageContainer.textContent = '';

        const { error } = await stripe.confirmPayment({
            elements,
            confirmParams: {
                return_url: '{{ stripe_return_url }}',
            },
        });

        if (error) {
            // This point will only be reached if there is an immediate error when
            // confirming the payment. Show error to your customer (for example, payment
            // details incomplete)
            messageContainer.textContent = error.message;
            loadingContainer.textContent = '';
        } else {
            // Your customer will be redirected to your `return_url`. For some payment
            // methods like iDEAL, your customer will be redirected to an intermediate
            // site first to authorize the payment, then redirected to the `return_url`.
        }

        // remove [data-submitting] attribute
        form.removeAttribute('data-submitting');
    });
</script>
{% endblock scripts %}