@php
    /** @var \App\Domain\Saas\Models\SubscriptionInvoice $invoice */
@endphp

<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
                {{ __('Invoice') }} {{ $invoice->invoice_number }}
            </h2>
            <a href="{{ route('saas.invoices.index') }}" class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 underline">
                {{ __('Back to invoices') }}
            </a>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="max-w-4xl mx-auto sm:px-6 lg:px-8 space-y-6">
            @if (session('status'))
                <div class="rounded-md bg-emerald-50 dark:bg-emerald-900/40 px-4 py-3 text-sm text-emerald-800 dark:text-emerald-200">
                    {{ session('status') }}
                </div>
            @endif

            @if ($errors->any())
                <div class="rounded-md bg-red-50 dark:bg-red-900/40 px-4 py-3 text-sm text-red-800 dark:text-red-200">
                    {{ $errors->first() }}
                </div>
            @endif

            <div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg p-4">
                <dl class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
                    <div>
                        <dt class="text-gray-500 dark:text-gray-400">{{ __('Tenant') }}</dt>
                        <dd class="text-gray-900 dark:text-gray-100 font-medium">
                            <a href="{{ route('saas.tenants.show', $invoice->tenant) }}" class="text-indigo-600 dark:text-indigo-400 hover:underline">{{ $invoice->tenant->name }}</a>
                        </dd>
                    </div>
                    <div>
                        <dt class="text-gray-500 dark:text-gray-400">{{ __('Plan') }}</dt>
                        <dd class="text-gray-900 dark:text-gray-100">{{ $invoice->plan_name }}</dd>
                    </div>
                    <div>
                        <dt class="text-gray-500 dark:text-gray-400">{{ __('Period') }}</dt>
                        <dd class="text-gray-900 dark:text-gray-100">{{ $invoice->period_start->format('Y-m-d') }} &rarr; {{ $invoice->period_end->format('Y-m-d') }}</dd>
                    </div>
                    <div>
                        <dt class="text-gray-500 dark:text-gray-400">{{ __('Due Date') }}</dt>
                        <dd class="text-gray-900 dark:text-gray-100">{{ $invoice->due_date->format('Y-m-d') }}</dd>
                    </div>
                    <div>
                        <dt class="text-gray-500 dark:text-gray-400">{{ __('Amount') }}</dt>
                        <dd class="text-gray-900 dark:text-gray-100 tabular-nums">{{ number_format($invoice->amount, 2) }}</dd>
                    </div>
                    <div>
                        <dt class="text-gray-500 dark:text-gray-400">{{ __('Outstanding') }}</dt>
                        <dd class="text-gray-900 dark:text-gray-100 tabular-nums">{{ number_format($invoice->outstandingBalance(), 2) }}</dd>
                    </div>
                    <div>
                        <dt class="text-gray-500 dark:text-gray-400">{{ __('Status') }}</dt>
                        <dd class="text-gray-900 dark:text-gray-100">{{ $invoice->status->label() }}</dd>
                    </div>
                </dl>
            </div>

            <div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg p-4">
                <h3 class="font-medium text-gray-800 dark:text-gray-200 mb-3">{{ __('Payment History') }}</h3>
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead>
                        <tr>
                            <th class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ __('Date') }}</th>
                            <th class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ __('Amount') }}</th>
                            <th class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ __('Method') }}</th>
                            <th class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ __('Reference') }}</th>
                            <th class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ __('Recorded By') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
                        @forelse ($invoice->payments as $payment)
                            <tr>
                                <td class="px-2 py-2 text-sm text-gray-500 dark:text-gray-400">{{ $payment->paid_at->format('Y-m-d H:i') }}</td>
                                <td class="px-2 py-2 text-sm text-gray-900 dark:text-gray-100 tabular-nums">{{ number_format($payment->amount, 2) }}</td>
                                <td class="px-2 py-2 text-sm text-gray-500 dark:text-gray-400">{{ $payment->method ?? '—' }}</td>
                                <td class="px-2 py-2 text-sm text-gray-500 dark:text-gray-400 font-mono">{{ $payment->reference ?? '—' }}</td>
                                <td class="px-2 py-2 text-sm text-gray-500 dark:text-gray-400">{{ $payment->recordedBy?->name ?? '—' }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-2 py-4 text-center text-sm text-gray-500 dark:text-gray-400">{{ __('No payments recorded yet.') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if (! $invoice->status->isSettled())
                <div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg p-4">
                    <h3 class="font-medium text-gray-800 dark:text-gray-200 mb-3">{{ __('Record Payment') }}</h3>
                    <form method="POST" action="{{ route('saas.invoices.record-payment', $invoice) }}" class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        @csrf
                        @method('PUT')

                        <div>
                            <x-input-label for="amount" :value="__('Amount')" />
                            <x-text-input id="amount" name="amount" type="number" step="0.01" min="0.01" class="mt-1 block w-full" :value="old('amount', $invoice->outstandingBalance())" required />
                            <x-input-error :messages="$errors->get('amount')" class="mt-2" />
                        </div>

                        <div>
                            <x-input-label for="paid_at" :value="__('Paid On')" />
                            <x-text-input id="paid_at" name="paid_at" type="date" class="mt-1 block w-full" :value="old('paid_at', now()->toDateString())" required />
                            <x-input-error :messages="$errors->get('paid_at')" class="mt-2" />
                        </div>

                        <div>
                            <x-input-label for="method" :value="__('Method')" />
                            <select id="method" name="method" class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <option value="bank_transfer" @selected(old('method') === 'bank_transfer')>{{ __('Bank Transfer') }}</option>
                                <option value="cash" @selected(old('method') === 'cash')>{{ __('Cash') }}</option>
                                <option value="other" @selected(old('method') === 'other')>{{ __('Other') }}</option>
                            </select>
                            <x-input-error :messages="$errors->get('method')" class="mt-2" />
                        </div>

                        <div>
                            <x-input-label for="reference" :value="__('Reference')" />
                            <x-text-input id="reference" name="reference" type="text" class="mt-1 block w-full" :value="old('reference')" placeholder="{{ __('Bank transfer reference, receipt no...') }}" />
                            <x-input-error :messages="$errors->get('reference')" class="mt-2" />
                        </div>

                        <div class="md:col-span-2">
                            <x-input-label for="notes" :value="__('Notes')" />
                            <textarea id="notes" name="notes" rows="2" class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">{{ old('notes') }}</textarea>
                            <x-input-error :messages="$errors->get('notes')" class="mt-2" />
                        </div>

                        <div class="md:col-span-2 flex items-center justify-end">
                            <x-primary-button type="submit">{{ __('Record Payment') }}</x-primary-button>
                        </div>
                    </form>
                </div>
            @endif
        </div>
    </div>
</x-app-layout>