{% extends 'base.html.twig' %}

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

{% block body %}
<div class="container">
    <h2>Payment for {{ trip.price }}</h2>
    <div class="row">
        <div class="col-md-6">
            <form id="payment-form" data-trip-id="{{ trip.id }}">
                <div id="card-element" class="form-control mb-3"></div>
                <button id="submit-button" class="btn btn-primary">
                    Pay {{ (trip.price)|format_currency('EUR') }}
                </button>
                <div id="payment-message" class="mt-3"></div>
            </form>
        </div>
    </div>
</div>

<script>
    const stripe = Stripe('{{ stripe_public_key }}');
    const elements = stripe.elements();
    const cardElement = elements.create('card');
    cardElement.mount('#card-element');

    const form = document.getElementById('payment-form');
    form.addEventListener('submit', async (event) => {
        event.preventDefault();
        const {
            error
        } = await stripe.confirmCardPayment(
            await fetch('/payment/create-intent/' + form.dataset.tripId, {
                method: 'POST'
            })
            .then(r => r.json())
            .then(data => data.clientSecret), {
                payment_method: {
                    card: cardElement,
                }
            }
        );

        if (error) {
            document.getElementById('payment-message').textContent = error.message;
        } else {
            form.submit();
        }
    });
</script>
{% endblock %}