@extends('layouts.super-admin', ['title' => 'Subscription Details - Booklio Super Admin', 'pageTitle' => 'Subscription Details', 'active' => 'subscriptions'])

@section('content')
    <div class="space-y-5">
        <div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
            <p class="text-sm font-semibold text-booklio-muted">Detailed subscription state for {{ $subscription->business?->name }}.</p>
            <div class="flex flex-col gap-2 sm:flex-row">
                <x-ui.button variant="secondary" href="{{ route('super-admin.subscriptions.index') }}">Back to subscriptions</x-ui.button>
                <x-ui.button data-booklio-placeholder="Manual subscription payments will be recorded after recurring billing workflows are connected.">Record manual payment</x-ui.button>
            </div>
        </div>

        <div class="grid gap-5 lg:grid-cols-3">
            @foreach ([
                ['Business', $subscription->business?->name],
                ['Plan', $subscription->plan?->name ?? 'No plan'],
                ['Billing cycle', Str::headline($subscription->billing_cycle)],
                ['Trial status', $subscription->isTrial() ? 'Active' : 'Ended'],
                ['Subscription status', $subscription->status_label],
                ['Renewal status', $subscription->renews_at ? 'Renews '.$subscription->renews_at->format('M d, Y') : 'Not scheduled'],
            ] as $item)
                <x-ui.card>
                    <p class="text-sm font-bold text-booklio-muted">{{ $item[0] }}</p>
                    <p class="mt-3 text-2xl font-extrabold">{{ $item[1] }}</p>
                </x-ui.card>
            @endforeach
        </div>

        <div class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_360px]">
            <x-ui.card title="Usage Snapshot" description="Current usage against this subscription plan.">
                @include('admin.subscription.partials.usage-bars', ['usageLimits' => $usageLimits])
            </x-ui.card>

            <x-ui.card title="Next Invoice" description="Renewal payment preview.">
                <div class="space-y-3 text-sm">
                    @foreach ([
                        ['Amount', $subscription->currency.' '.number_format((float) $subscription->price, 2)],
                        ['Due date', $subscription->renews_at?->format('M d, Y') ?? 'Not scheduled'],
                        ['Payment method', $subscription->gateway ? Str::headline($subscription->gateway) : 'Manual placeholder'],
                        ['Status', $subscription->status_label],
                    ] as $row)
                        <div class="flex items-center justify-between gap-4 border-b border-booklio-border pb-3">
                            <span class="font-bold text-booklio-muted">{{ $row[0] }}</span>
                            <span class="text-right font-extrabold">{{ $row[1] }}</span>
                        </div>
                    @endforeach
                </div>
            </x-ui.card>
        </div>

        <x-ui.card title="Subscription Payments" description="Payments recorded against this subscription.">
            <x-ui.table :headers="['Transaction ID', 'Amount', 'Method', 'Status', 'Paid at']">
                @forelse ($payments as $payment)
                    <tr>
                        <td class="font-extrabold">{{ $payment->transaction_id ?? 'Manual' }}</td>
                        <td class="font-bold">{{ $payment->currency }} {{ number_format((float) $payment->amount, 2) }}</td>
                        <td>{{ $payment->payment_method ? Str::headline($payment->payment_method) : '-' }}</td>
                        <td><x-ui.badge :variant="$payment->status?->value === 'paid' ? 'success' : 'warning'">{{ $payment->status?->label() ?? 'Pending' }}</x-ui.badge></td>
                        <td>{{ $payment->paid_at?->format('M d, Y') ?? '-' }}</td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="text-center text-booklio-muted">No payments recorded yet.</td></tr>
                @endforelse
            </x-ui.table>
        </x-ui.card>
    </div>
@endsection