@extends('layouts.app')
@section('title', 'Billing & Credits')
@section('page-title', 'Billing & Credits')
@section('content')

<div class="grid-2" style="margin-bottom: 24px; align-items: start;">
    {{-- Wallet card --}}
    <div class="card" style="background: linear-gradient(135deg, rgba(79,124,255,.1), rgba(124,92,252,.07));">
        <div class="card-body" style="padding: 32px; text-align: center;">
            <i class="bi bi-wallet2" style="font-size: 2.5rem; color: var(--accent); display: block; margin-bottom: 12px;"></i>
            <div style="font-family: 'Syne', sans-serif; font-size: 3rem; font-weight: 800; color: var(--accent); line-height: 1;">
                {{ $wallet?->student_credits ?? 0 }}
            </div>
            <div class="text-muted" style="margin-bottom: 4px;">Student Credits</div>
            <div class="text-xs text-muted">Each credit allows 1 student to take 1 exam</div>
        </div>
    </div>

    {{-- Buy credits form --}}
    <div class="card">
        <div class="card-header"><h5>Purchase Student Credits</h5></div>
        <div class="card-body">
            <form method="POST" action="{{ route('tester.billing.topup') }}">
                @csrf
                <div class="form-group">
                    <label class="form-label">Select Exam</label>
                    <select name="exam_id" class="form-control" required>
                        <option value="">— Select exam —</option>
                        @foreach(auth()->user()->exams()->latest()->get() as $exam)
                        <option value="{{ $exam->id }}">{{ $exam->title }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Number of Students</label>
                    <input type="number" name="student_count" id="studentCount" class="form-control"
                           min="1" max="10000" value="10" required oninput="updateTotal()">
                </div>

                <div style="background: var(--navy3); border-radius: 12px; padding: 16px; margin-bottom: 20px;">
                    <div style="display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: 6px;">
                        <span class="text-muted">Price per student</span>
                        <span>${{ number_format(config('services.payment.price_per_student', 5), 2) }}</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: 6px;">
                        <span class="text-muted">Subtotal</span>
                        <span id="subtotal">$0.00</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: 6px;">
                        <span class="text-muted">Platform fee ({{ config('services.payment.commission_percent', 15) }}%)</span>
                        <span id="fee">$0.00</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; font-weight: 700; font-size: 1rem; padding-top: 10px; border-top: 1px solid var(--border);">
                        <span>Total</span>
                        <span id="total" style="color: var(--accent);">$0.00</span>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary w-full">
                    <i class="bi bi-credit-card"></i> Pay & Get Credits
                </button>
                <p class="text-xs text-muted" style="margin-top: 10px; text-align: center;">
                    Supports credit/debit cards and mobile money (Paystack / Flutterwave)
                </p>
            </form>
        </div>
    </div>
</div>

{{-- Order history --}}
<div class="card">
    <div class="card-header"><h5>Payment History</h5></div>
    <div class="table-wrapper">
        <table>
            <thead>
                <tr>
                    <th>Order Ref</th>
                    <th>Exam</th>
                    <th>Students</th>
                    <th>Amount</th>
                    <th>Gateway</th>
                    <th>Status</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody>
                @forelse($orders as $order)
                <tr>
                    <td class="text-sm" style="font-family: monospace; color: var(--muted);">{{ $order->order_ref }}</td>
                    <td class="text-sm">{{ $order->exam?->title ?? '—' }}</td>
                    <td style="font-weight: 600;">{{ $order->student_count }}</td>
                    <td style="font-weight: 700;">${{ number_format($order->total_amount, 2) }}</td>
                    <td><span class="badge badge-muted">{{ ucfirst($order->gateway) }}</span></td>
                    <td>
                        <span class="badge {{ match($order->status) {
                            'paid'    => 'badge-success',
                            'pending' => 'badge-warning',
                            'failed'  => 'badge-danger',
                            default   => 'badge-muted'
                        } }}">{{ ucfirst($order->status) }}</span>
                    </td>
                    <td class="text-xs text-muted">{{ $order->created_at->format('M j, Y') }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" style="text-align: center; padding: 40px; color: var(--muted);">
                        No orders yet.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($orders->hasPages())
    <div class="pagination-wrapper">{{ $orders->links() }}</div>
    @endif
</div>

@push('scripts')
<script>
const PPS         = {{ config('services.payment.price_per_student', 5) }};
const COMMISSION  = {{ config('services.payment.commission_percent', 15) }} / 100;

function updateTotal() {
    const n        = parseInt(document.getElementById('studentCount').value) || 0;
    const subtotal = n * PPS;
    const fee      = subtotal * COMMISSION;
    const total    = subtotal + fee;
    document.getElementById('subtotal').textContent = '$' + subtotal.toFixed(2);
    document.getElementById('fee').textContent      = '$' + fee.toFixed(2);
    document.getElementById('total').textContent    = '$' + total.toFixed(2);
}
updateTotal();
</script>
@endpush
@endsection