@extends('frontend.layouts.app')

@section('title', 'Secure Payment - Stripe')

@push('head')
    <script src="https://js.stripe.com/v3/"></script>
@endpush

@section('content')
    <div class="container py-5">
        <h3 class="mb-3">Pay {{ $order->plan->currencySymbol() }}{{ number_format($order->amount_cents / 100, 2) }} for
            {{ $order->plan->name }}</h3>
        <div id="card-element" class="border rounded p-3 mb-3"></div>
        <div id="card-errors" class="text-danger small mb-3"></div>
        <button id="payBtn" class="btn btn-primary">Pay</button>
    </div>
@endsection

@push('script')
    <script>
        const stripe = Stripe(@json($publishableKey));
        const elements = stripe.elements();
        const card = elements.create('card');
        card.mount('#card-element');

        document.getElementById('payBtn').addEventListener('click', async () => {
            const {
                error,
                paymentIntent
            } = await stripe.confirmCardPayment(@json($clientSecret), {
                payment_method: {
                    card
                },
            });
            if (error) {
                document.getElementById('card-errors').textContent = error.message;
                return;
            }
            // On success, go to success page
            window.location.href = @json(route('checkout.success', ['reference' => $order->reference]));
        });
    </script>
@endpush