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

@section('content')
@if(session('status'))
    <div class="mb-4 px-4 py-2 rounded-lg bg-emerald-50 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-200 text-sm">{{ session('status') }}</div>
@endif

<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">{{ __('Client invoices') }}</h1>
    <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">{{ __('Monthly invoices billed to your end users.') }}</p>
</div>

<form method="POST" action="{{ route('tenant.user-invoices.generate') }}"
      class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm p-4 mb-4 flex flex-wrap items-end gap-3">
    @csrf
    <div>
        <label class="block text-xs font-semibold text-slate-700 dark:text-slate-200 mb-1">{{ __('Period') }}</label>
        <input type="month" name="month" value="{{ old('month', now()->format('Y-m')) }}"
               class="rounded-lg border border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-950 px-3 py-1.5 text-sm">
    </div>
    <div>
        <label class="block text-xs font-semibold text-slate-700 dark:text-slate-200 mb-1">{{ __('User (optional)') }}</label>
        <select name="user_id" class="rounded-lg border border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-950 px-3 py-1.5 text-sm">
            <option value="">{{ __('All end users') }}</option>
            @foreach(\App\Models\User::where('tenant_id', auth()->user()->tenant_id)->where('role', \App\Models\User::ROLE_USER)->orderBy('name')->get() as $u)
                <option value="{{ $u->id }}">{{ $u->name }}</option>
            @endforeach
        </select>
    </div>
    <button type="submit" class="px-4 py-2 rounded-lg bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 text-sm font-semibold">{{ __('Generate now') }}</button>
</form>

<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">{{ __('Client') }}</th>
                    <th class="text-start px-4 py-3">{{ __('Period') }}</th>
                    <th class="text-end px-4 py-3">{{ __('Subtotal') }}</th>
                    <th class="text-end px-4 py-3">{{ __('VAT') }}</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->user?->name }}</td>
                        <td class="px-4 py-2">{{ $inv->period_start->format('Y-m') }}</td>
                        <td class="px-4 py-2 text-end font-mono tabular-nums">{{ number_format((float)$inv->subtotal, 2) }} {{ $inv->currency }}</td>
                        <td class="px-4 py-2 text-end font-mono tabular-nums">{{ number_format((float)$inv->vat_amount, 2) }}</td>
                        <td class="px-4 py-2 text-end font-mono tabular-nums font-semibold">{{ number_format((float)$inv->total, 2) }}</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-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300'           => $inv->status === 'draft',
                                '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('tenant.user-invoices.show', $inv) }}" class="text-xs text-indigo-600 hover:underline">{{ __('View') }}</a>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="8" class="px-4 py-8 text-center text-xs text-slate-500">{{ __('No invoices yet — generate one above.') }}</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="px-4 py-3">{{ $invoices->links() }}</div>
</div>
@endsection