@extends('welcome')

@section('seo_title')
{{ __('Stripe') }} -
@endsection

@section('content')
<div class="min-h-screen">
    <div class="pt-20 w-full py-4 bg-white shadow-sm">
        <div class="max-w-3xl px-2 mx-auto text-slate-600 lg:text-lg flex items-center justify-center">
            {{__("Stripe Payment")}}
        </div>
    </div>

<div class="container mt-5">
    <div class="bg-white rounded-lg p-3 max-w-md mx-auto shadow-sm mt-10">

	<div class="mt-5 text-center text-xl text-stone-600 font-semibold">
            <h5>
                {{__('You are subscribing to manage :company for :amount (:period)', [
                'company' => $site->business_name,
                'amount' => opt('currency_symbol') . $amount,
                'period' => $planName,
            ])}}
            </h5>
        </div>

        <form id="payment-form">
            <div id="payment-element">
                <!-- Elements will create form elements here -->
            </div>
			<div class="w-full text-center">
            <button id="submit" class="mx-auto mt-5 px-5 py-3 bg-dark border border-transparent rounded-lg font-black text-xs text-white uppercase tracking-widest hover:bg-indigo-900 active:bg-indigo-900 focus:outline-none focus:border-gray-900 focus:ring ring-gray-300 disabled:opacity-25 transition ease-in-out duration-150 ml-4">{{ __('Subscribe via Stripe')  }}</button>
			</div>
            <div id="error-message">
                <!-- Display error message to your customers here -->
            </div>
        </form>

    </div>
</div>
</div>
@endsection

{{-- attention, this is dynamically appended using stack() and push() functions of BLADE --}}
@push('extraJS')
<script src="https://js.stripe.com/v3/"></script>
<script>
    const stripe = Stripe('{{ opt('stripe_public') }}');
    const options = {
        clientSecret: '{{ $clientSecret }}',
    };

    // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 5
    const elements = stripe.elements(options);

    // Create and mount the Payment Element
    const paymentElement = elements.create('payment');
    paymentElement.mount('#payment-element');

    const form = document.getElementById('payment-form');

    form.addEventListener('submit', async (event) => {
        event.preventDefault();

        const { error } = await stripe.confirmPayment({
            //`Elements` instance that was used to create the Payment Element
            elements,
            confirmParams: {
                return_url: "{{ route('saas.stripeSubscriptionResult') }}",
            }
        });

        if (error) {
            const messageContainer = document.querySelector('#error-message');
            messageContainer.textContent = error.message;
        }
    });
</script>
@endpush