@extends('layouts.app')

@section('title', 'Payment')

@section('content')
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="royal-card p-8">
        <h1 class="text-2xl font-bold mb-6">Complete Payment</h1>

        <div class="bg-gray-50 rounded-lg p-4 mb-6">
            <div class="flex justify-between mb-2">
                <span class="text-gray-500">Order #</span>
                <span class="font-semibold">{{ $order->order_number }}</span>
            </div>
            <div class="flex justify-between mb-2">
                <span class="text-gray-500">Amount</span>
                <span class="font-bold text-xl">{{ price($order->total) }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500">Gateway</span>
                <span class="font-semibold capitalize">{{ $gateway }}</span>
            </div>
        </div>

        @if($gateway === 'stripe')
            <form id="payment-form" class="space-y-4">
                @csrf
                <input type="hidden" name="payment_intent_id" id="payment-intent-id" value="{{ $result['payment_intent_id'] }}">

                <div>
                    <label class="block text-sm font-medium mb-2">Cardholder Name</label>
                    <input type="text" id="card-name" required class="w-full px-4 py-2 border rounded-lg" placeholder="John Doe">
                </div>

                <div id="card-element" class="px-4 py-3 border rounded-lg">
                    {{-- Stripe Elements will insert card input here --}}
                </div>

                <div id="card-errors" class="text-red-500 text-sm"></div>

                <button type="submit" id="submit-button" class="w-full royal-btn text-lg">
                    Pay {{ price($order->total) }}
                </button>
            </form>
        @else
            <div class="text-center">
                <p class="text-gray-500 mb-4">You will be redirected to complete your payment...</p>
                <a href="{{ $result['authorization_url'] ?? $result['link'] }}" class="royal-btn inline-block">Continue to Payment</a>
            </div>
        @endif
    </div>
</div>

@if($gateway === 'stripe')
<script src="https://js.stripe.com/v3/"></script>
<script>
    const stripe = Stripe('{{ Setting::get("stripe_publishable_key") }}');
    const elements = stripe.elements();
    const card = elements.create('card');
    card.mount('#card-element');

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

    form.addEventListener('submit', async (e) => {
        e.preventDefault();
        submitButton.disabled = true;
        submitButton.textContent = 'Processing...';

        const { error, paymentIntent } = await stripe.confirmCardPayment('{{ $result["client_secret"] }}', {
            payment_method: {
                card: card,
                billing_details: { name: document.getElementById('card-name').value }
            }
        });

        if (error) {
            document.getElementById('card-errors').textContent = error.message;
            submitButton.disabled = false;
            submitButton.textContent = 'Pay {{ price($order->total) }}';
        } else {
            window.location.href = '{{ route("orders.show", $order->order_number) }}';
        }
    });
</script>
@endif
@endsection