@php
    $statusMeta = [
        'outstanding'        => ['label' => __('Outstanding'),        'color' => 'amber'],
        'partially_returned' => ['label' => __('Partially returned'), 'color' => 'sky'],
        'returned'           => ['label' => __('Returned'),           'color' => 'emerald'],
        'written_off'        => ['label' => __('Written off'),         'color' => 'slate'],
    ];
    $sourceColor = [
        'client_upfront' => 'sky', 'client_deposit' => 'sky',
        'company' => 'violet', 'director' => 'indigo', 'loan' => 'rose',
    ];
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">
        {{-- Capital & Equity / Funding segmented control. Funding is reached
             through this toggle rather than its own sidebar link. --}}
        <x-capital-tabs />

        <x-page-header :title="__('Funding')" :subtitle="__('All money funding your jobs, and what is still owed back. Add or return funding from each job.')" />

        <!-- Outstanding by funder -->
        @if (! empty($liability['rows']))
            <x-card>
                <div class="border-b border-slate-100 p-4 sm:p-6">
                    <div class="flex items-center justify-between">
                        <h2 class="text-sm font-semibold text-slate-700">{{ __('Outstanding to return') }}</h2>
                        <span class="text-sm font-bold text-amber-600 tabular-nums">{{ $liability['base'] }} {{ number_format($liability['total'], 2) }}</span>
                    </div>
                </div>
                <ul role="list" class="divide-y divide-slate-100">
                    @foreach ($liability['rows'] as $row)
                        <li class="flex items-center justify-between px-4 py-3 sm:px-6">
                            <span class="text-sm text-slate-700">{{ $row['funder'] }} <span class="text-xs text-slate-400">· {{ $row['source'] }}</span></span>
                            <span class="text-sm font-medium text-slate-900 tabular-nums">{{ $liability['base'] }} {{ number_format($row['total'], 2) }}</span>
                        </li>
                    @endforeach
                </ul>
            </x-card>
        @endif

        <x-card>
            <!-- Filters -->
            <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:p-6">
                <div class="relative max-w-md flex-1">
                    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                        <x-icon name="magnifying-glass" class="h-5 w-5" />
                    </span>
                    <input type="text" wire:model.live.debounce.300ms="search" placeholder="{{ __('Search job, funder, notes...') }}"
                        class="block w-full rounded-xl border-slate-300 pl-10 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                </div>
                <select wire:model.live="sourceFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                    <option value="">{{ __('All sources') }}</option>
                    @foreach ($sources as $key => $meta)
                        <option value="{{ $key }}">{{ __($meta['label']) }}</option>
                    @endforeach
                </select>
                <select wire:model.live="statusFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                    <option value="">{{ __('All statuses') }}</option>
                    @foreach ($statusMeta as $key => $meta)
                        <option value="{{ $key }}">{{ $meta['label'] }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Table -->
            <div class="hidden overflow-x-auto sm:block">
                <table class="min-w-full divide-y divide-slate-100">
                    <thead>
                        <tr class="bg-slate-50/80">
                            <th class="px-3 lg:px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Job') }}</th>
                            <th class="px-3 lg:px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Source') }}</th>
                            <th class="px-3 lg:px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Funder') }}</th>
                            <th class="px-3 lg:px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Date') }}</th>
                            <th class="px-3 lg:px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Amount') }}</th>
                            <th class="px-3 lg:px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Outstanding') }}</th>
                            <th class="px-3 lg:px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Status') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @forelse ($fundings as $funding)
                            <tr wire:key="f-{{ $funding->id }}" class="transition-colors hover:bg-slate-50/70">
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                    @if ($funding->job)
                                        <a href="{{ route('jobs.show', $funding->job) }}" class="font-medium text-indigo-600 hover:text-indigo-700">{{ $funding->job->job_number }}</a>
                                        <span class="block text-xs text-slate-400">{{ \Illuminate\Support\Str::limit($funding->job->title, 30) }}</span>
                                    @else
                                        <span class="text-slate-400">—</span>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm"><x-badge :color="$sourceColor[$funding->source] ?? 'slate'">{{ $funding->source_label }}</x-badge></td>
                                <td class="px-3 lg:px-4 py-4 text-sm text-slate-700">{{ $funding->funder_label }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ optional($funding->funded_on)->format('Y-m-d') }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium text-slate-900 tabular-nums">{{ $funding->currency_code }} {{ number_format((float) $funding->amount, 2) }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm tabular-nums {{ $funding->outstanding > 0 ? 'text-amber-600' : 'text-slate-400' }}">{{ $funding->isRepayable() ? number_format($funding->outstanding, 2) : '—' }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm"><x-badge :color="$statusMeta[$funding->status]['color'] ?? 'slate'">{{ $statusMeta[$funding->status]['label'] ?? $funding->status }}</x-badge></td>
                            </tr>
                        @empty
                            <tr>
                            <td colspan="7" class="px-6 py-12">
                                <x-empty-state icon="banknotes" :title="__('No funding yet')"
                                    :message="__('No funding recorded yet. Open a job and use its Funding panel to add some.')" class="border-0" />
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Cards (mobile) -->
            <div class="divide-y divide-slate-100 sm:hidden">
                @forelse ($fundings as $funding)
                    <div wire:key="f-mobile-{{ $funding->id }}" class="p-4">
                        <div class="flex items-center justify-between">
                            <p class="flex flex-wrap items-center gap-1.5">
                                <x-badge :color="$sourceColor[$funding->source] ?? 'slate'">{{ $funding->source_label }}</x-badge>
                                <x-badge :color="$statusMeta[$funding->status]['color'] ?? 'slate'">{{ $statusMeta[$funding->status]['label'] ?? $funding->status }}</x-badge>
                            </p>
                            <span class="text-sm font-medium text-slate-900 tabular-nums">{{ $funding->currency_code }} {{ number_format((float) $funding->amount, 2) }}</span>
                        </div>
                        <p class="mt-1 text-sm text-slate-700">{{ $funding->funder_label }}</p>
                        @if ($funding->job)
                            <a href="{{ route('jobs.show', $funding->job) }}" class="text-xs text-indigo-600">{{ $funding->job->job_number }} · {{ \Illuminate\Support\Str::limit($funding->job->title, 30) }}</a>
                        @endif
                        @if ($funding->isRepayable() && $funding->outstanding > 0)
                            <p class="mt-1 text-xs text-amber-600">{{ __('Outstanding:') }} {{ number_format($funding->outstanding, 2) }}</p>
                        @endif
                    </div>
                @empty
                    <div class="p-6">
                        <x-empty-state icon="banknotes" :title="__('No funding yet')"
                            :message="__('No funding recorded yet.')" class="border-0" />
                    </div>
                @endforelse
            </div>

            <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                {{ $fundings->links() }}
            </div>
        </x-card>
    </div>
</div>