@extends('layouts.admin', ['title' => 'Billing History - Booklio', 'pageTitle' => 'Billing History', 'active' => 'subscription'])

@include('admin.subscription.partials.data')
@php($activeTab = 'billing')

@section('content')
    <div class="space-y-5">
        @include('admin.subscription.partials.nav', ['activeTab' => $activeTab])

        <x-ui.card title="Billing History" description="Download subscription invoices and review payment status.">
            <x-ui.table :headers="['Invoice number', 'Date', 'Plan', 'Amount', 'Status', 'Download invoice']">
                @foreach ($billingHistory as $invoice)
                    <tr class="hover:bg-slate-50">
                        <td class="px-4 py-4 font-extrabold">{{ $invoice['invoice'] }}</td>
                        <td class="px-4 py-4 font-semibold">{{ $invoice['date'] }}</td>
                        <td class="px-4 py-4 text-booklio-muted">{{ $invoice['plan'] }}</td>
                        <td class="px-4 py-4 font-extrabold">{{ $invoice['amount'] }}</td>
                        <td class="px-4 py-4"><x-ui.badge :variant="$invoice['status'] === 'Paid' ? 'success' : 'danger'">{{ $invoice['status'] }}</x-ui.badge></td>
                        <td class="px-4 py-4"><x-ui.button size="sm" variant="secondary" data-booklio-placeholder="Subscription invoice downloads are prepared for backend PDF generation."><x-ui.icon name="file-text" class="h-4 w-4" />Download invoice</x-ui.button></td>
                    </tr>
                @endforeach
            </x-ui.table>
        </x-ui.card>
    </div>
@endsection