@if (
request()->routeIs('stripe.process')
&& (bool) core()->getConfigData('sales.payment_methods.stripe.active')
)
@php
$clientId = core()->getConfigData('sales.payment_methods.stripe.stripe_api_key');

$acceptedCurrency = core()->getConfigData('sales.payment_methods.paypal_smart_button.accepted_currencies');
@endphp
<!-- Display a payment form -->
<link rel="stylesheet" href="css/checkout.css" />
<form id="payment-form">
    <div id="payment-element">
        <!--Stripe.js injects the Payment Element-->
    </div>
    <button id="submit">
        <div class="spinner hidden" id="spinner"></div>
        <span id="button-text">Pay now</span>
    </button>
    <div id="payment-message" class="hidden"></div>
</form>
<script src="https://js.stripe.com/v3/"></script>
<script>
    // This is your test publishable API key.
    const stripe = Stripe("{{ core()->getConfigData('sales.payment_methods.stripe.stripe_publishable_key') }}");

    let elements;
    initialize();

    document
        .querySelector("#payment-form")
        .addEventListener("submit", handleSubmit);

    // Fetches a payment intent and captures the client secret
    async function initialize() {
        const {
            clientSecret
        } = await fetch('{{ route("stripe.payment.intent") }}', {
            method: "GET",
        }).then((r) => r.json());

        const appearance = {
            theme: "stripe",
            variables: {
                colorPrimary: '#3C3935',
                colorBackground: '#ffffff',
                colorText: '#000000',
                colorDanger: '#df1b41',
                fontFamily: 'Sometype Mono',
                spacingUnit: '2px',
                borderRadius: '4px',
                // See all possible variables below
            }
        }

        elements = stripe.elements({
            clientSecret,
            appearance
        });

        const paymentElementOptions = {
            layout: "tabs"
        };


        const paymentElement = elements.create("payment", paymentElementOptions);
        paymentElement.mount("#payment-element");

    }

    async function handleSubmit(e) {
        e.preventDefault();
        setLoading(true);

        const {
            error
        } = await stripe.confirmPayment({
            elements,
            confirmParams: {
                // Make sure to change this to your payment completion page
                return_url: '{{ route("stripe.check.status") }}',
            },
        });

        // This point will only be reached if there is an immediate error when
        // confirming the payment. Otherwise, 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`.
        if (error.type === "card_error" || error.type === "validation_error") {
            showMessage(error.message);
        } else {
            showMessage("An unexpected error occurred.");
        }

        setLoading(false);
    }

    // Show a spinner on payment submission
    function setLoading(isLoading) {
        if (isLoading) {
            // Disable the button and show a spinner
            document.querySelector("#submit").disabled = true;
            document.querySelector("#spinner").classList.remove("hidden");
            document.querySelector("#button-text").classList.add("hidden");
        } else {
            document.querySelector("#submit").disabled = false;
            document.querySelector("#spinner").classList.add("hidden");
            document.querySelector("#button-text").classList.remove("hidden");
        }
    }

    // ------- 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