@extends('layouts.app')
@section('title', __('My invoices'))

@section('content')
<div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm p-5 sm:p-6 mb-4">
    <h1 class="text-xl sm:text-2xl font-semibold text-slate-900 dark:text-white">{{ __('My invoices') }}</h1>
    <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">{{ __('Monthly invoices for the analyses your accountant delivered.') }}</p>
</div>

<div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-slate-50 dark:bg-slate-800/60 text-[11px] uppercase tracking-wider text-slate-500 dark:text-slate-400">
                <tr>
                    <th class="text-start px-4 py-3">{{ __('Number') }}</th>
                    <th class="text-start px-4 py-3">{{ __('Period') }}</th>
                    <th class="text-end px-4 py-3">{{ __('Total') }}</th>
                    <th class="text-start px-4 py-3">{{ __('Status') }}</th>
                    <th class="text-end px-4 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                @forelse($invoices as $inv)
                    <tr>
                        <td class="px-4 py-2 font-mono text-xs">{{ $inv->number }}</td>
                        <td class="px-4 py-2">{{ $inv->period_start->translatedFormat('F Y') }}</td>
                        <td class="px-4 py-2 text-end font-mono tabular-nums font-semibold">{{ number_format((float)$inv->total, 2) }} {{ $inv->currency }}</td>
                        <td class="px-4 py-2">
                            <span @class([
                                'px-1.5 py-0.5 rounded text-[10px] uppercase tracking-wider font-semibold',
                                'bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300' => $inv->status === 'paid',
                                'bg-amber-50 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300'         => $inv->status === 'issued',
                                'bg-rose-50 text-rose-700 dark:bg-rose-900/30 dark:text-rose-300'             => $inv->status === 'void',
                            ])>{{ ucfirst($inv->status) }}</span>
                        </td>
                        <td class="px-4 py-2 text-end">
                            <a href="{{ route('client.invoices.show', $inv) }}" class="text-xs font-medium text-indigo-600 hover:text-indigo-700">{{ __('View') }} →</a>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="px-4 py-10 text-center text-xs text-slate-500">{{ __('No invoices yet.') }}</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="px-4 py-3">{{ $invoices->links() }}</div>
</div>
@endsection