@if (
request()->routeIs('stripe.check.status')
&& (bool) core()->getConfigData('sales.payment_methods.stripe.active')
)
<link rel="stylesheet" href="css/checkout.css" />
<form>
    <div id="payment-message" class="hidden"></div>
</form>
<script src="https://js.stripe.com/v3/"></script>
<script>
    // This is your publishable API key.
    const stripe = Stripe("{{ core()->getConfigData('sales.payment_methods.stripe.stripe_publishable_key') }}");

    checkStatus();

    let response = '';

    // Fetches the payment intent status after payment submission
    async function checkStatus() {
        const clientSecret = new URLSearchParams(window.location.search).get(
            "payment_intent_client_secret"
        );

        if (!clientSecret) {
            return;
        }

        const {
            paymentIntent
        } = await stripe.retrievePaymentIntent(clientSecret);

        switch (paymentIntent.status) {
            case "succeeded":
                var url = '{{ route("stripe.success") }}';
                response = processOrder(url, paymentIntent);
                break;
            case "processing":
                var url = '{{ route("stripe.success") }}';
                response = processOrder(url, paymentIntent);
                break;
            case "requires_payment_method":
                var url = '{{ route("stripe.success") }}';
                response = processOrder(url, paymentIntent);
                break;
            default:
                var url = '{{ route("stripe.failure") }}';
                response = processOrder(url, paymentIntent);
                break;
        }
    }

    async function processOrder(url, paymentIntent) {
        // console.log(JSON.stringify(paymentIntent));

        response = await fetch(url, {
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}",
                "Content-Type": "application/json"
            },
            body: JSON.stringify(paymentIntent),
        }).then((r) => r.json());

        if (response != '' && response.message != '') {
            showMessage(response.message);
        }

        if (response != '' && response.redirect_url != '') {
            window.location.href = response.redirect_url;
        }

        return response;
    }

    // ------- UI helpers -------

    function showMessage(messageText) {
        const messageContainer = document.querySelector("#payment-message");

        messageContainer.classList.remove("hidden");
        messageContainer.textContent = messageText;

        setTimeout(function() {
            messageContainer.classList.add("hidden");
            messageContainer.textContent = "";
        }, 4000);
    }
</script>
@endif