@extends('layouts.app')

@section('title', 'Complete Your Payment')

@section('content')
<div class="max-w-xl mx-auto py-10 px-4">
    <h2 class="text-2xl font-semibold mb-6 text-gray-800">Pay for {{ $plan->name ?? 'Selected' }} Plan</h2>

    <div class="bg-white p-6 rounded-lg shadow">
        <p class="mb-4 text-gray-600">
            Amount: <strong>₦{{ number_format(($plan->price ?? 0) / 100, 2) }}</strong>
        </p>

        <button onclick="payWithPaystack()" class="bg-blue-600 text-white px-6 py-3 rounded hover:bg-blue-700">
            Pay Now
        </button>
    </div>
</div>

<!-- Hidden form fallback (if you want to use POST instead of GET for verification) -->
<form id="payment-form" method="POST" action="{{ route('payment.verify') }}" style="display: none;">
    @csrf
    <input type="hidden" name="reference" id="paystack-reference">
</form>

<script src="https://js.paystack.co/v1/inline.js"></script>
<script>
function payWithPaystack() {
    const handler = PaystackPop.setup({
        key: '{{ env("PAYSTACK_PUBLIC_KEY") }}',
        email: '{{ Auth::user()->email }}',
        amount: {{ $plan->price }}, // amount in kobo
        currency: 'NGN',
        ref: '{{ uniqid("paystack_") }}',
        metadata: {
            user_id: '{{ Auth::id() }}',
            user_email: '{{ Auth::user()->email }}',
            plan_id: '{{ $plan->id }}',
            plan_name: '{{ $plan->name }}',

            // Optional: display on Paystack dashboard
            custom_fields: [
                {
                    display_name: "User",
                    variable_name: "user_id",
                    value: '{{ Auth::id() }}'
                },
                {
                    display_name: "Plan",
                    variable_name: "plan_id",
                    value: '{{ $plan->id }}'
                }
            ]
        },
        callback: function(response) {
            // Redirect with the reference to verify
            window.location.href = '{{ route("payment.verify") }}?reference=' + response.reference;
        },
        onClose: function() {
            alert('Payment window closed.');
        }
    });
    handler.openIframe();
}
</script>
@endsection