<x-layouts.settings :title="__('Invoices')">
    <div class="space-y-6">

        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-xl font-bold text-ink">{{ __('Invoices') }}</h2>
                <p class="text-sm text-muted mt-0.5">{{ __('Download PDF invoices for every successful payment.') }}</p>
            </div>
        </div>

        <div class="panel overflow-hidden">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-border bg-surface text-muted">
                        <th class="text-left px-5 py-3 text-xs font-bold uppercase tracking-wider">{{ __('Invoice #') }}</th>
                        <th class="text-left px-5 py-3 text-xs font-bold uppercase tracking-wider">{{ __('Date') }}</th>
                        <th class="text-left px-5 py-3 text-xs font-bold uppercase tracking-wider">{{ __('Description') }}</th>
                        <th class="text-right px-5 py-3 text-xs font-bold uppercase tracking-wider">{{ __('Amount') }}</th>
                        <th class="text-center px-5 py-3 text-xs font-bold uppercase tracking-wider">{{ __('Status') }}</th>
                        <th class="text-right px-5 py-3 text-xs font-bold uppercase tracking-wider">{{ __('Actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($payments as $p)
                    <tr class="border-b border-border/40 hover:bg-surface/30 transition">
                        <td class="px-5 py-3 font-mono text-xs text-ink">{{ $p->invoice_number ?: '—' }}</td>
                        <td class="px-5 py-3 text-ink">{{ $p->created_at?->format('M d, Y') }}</td>
                        <td class="px-5 py-3 text-ink">{{ $p->description }}</td>
                        <td class="px-5 py-3 text-right font-semibold text-ink">{{ \App\Helpers\CurrencyHelper::format((float) $p->amount, $p->currency) }}</td>
                        <td class="px-5 py-3 text-center">
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-success/10 text-success">{{ __('Paid') }}</span>
                        </td>
                        <td class="px-5 py-3 text-right space-x-2">
                            <a href="{{ route('invoices.preview', $p) }}" target="_blank" rel="noopener" class="text-xs font-semibold text-muted hover:text-brand transition">{{ __('View') }}</a>
                            <a href="{{ route('invoices.download', $p) }}" class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-semibold rounded-lg bg-brand text-white hover:bg-brand-strong transition">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                                {{ __('PDF') }}
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="px-5 py-12 text-center text-muted">
                            <svg class="w-12 h-12 mx-auto mb-3 text-muted/50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                            <p class="font-medium">{{ __('No invoices yet') }}</p>
                            <p class="text-xs mt-1">{{ __('Once you subscribe to a plan, your invoices will appear here.') }}</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

    </div>
</x-layouts.settings>
