@extends('layouts.customer')

@section('content')

<h2 class="text-xl font-bold mb-2">
    Pay Invoice #{{ $invoice->invoice_number }}
</h2>

<p>Amount: <strong>{{ number_format($invoice->amount, 2) }}</strong></p>

<hr class="my-3">

@if(session('success'))
<div class="p-3 bg-green-200 rounded mb-2">{{ session('success') }}</div>
@endif

@if(session('warning'))
<div class="p-3 bg-yellow-200 rounded mb-2">{{ session('warning') }}</div>
@endif

@if(session('info'))
<div class="p-3 bg-blue-200 rounded mb-2">{{ session('info') }}</div>
@endif

<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-3">

    {{-- Paystack NGN --}}
    <div class="p-4 border rounded">
        <h3 class="font-semibold mb-2">Pay with Paystack (NGN)</h3>

        <form method="POST" action="{{ route('customer.invoices.paystack.init', $invoice) }}">
            @csrf
            <button class="px-4 py-2 bg-green-600 text-white rounded w-full">
                Pay ₦{{ number_format($invoice->amount, 2) }}
            </button>
        </form>
    </div>

    {{-- Stripe GBP --}}
    <div class="p-4 border rounded">
        <h3 class="font-semibold mb-2">Pay with Stripe (GBP)</h3>

        <form method="POST" action="{{ route('customer.invoices.stripe.init', $invoice) }}">
            @csrf
            <button class="px-4 py-2 bg-purple-600 text-white rounded w-full">
                Pay £{{ number_format($invoice->amount, 2) }}
            </button>
        </form>
    </div>

</div>

@endsection