@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="rounded-2xl border border-slate-200 bg-white shadow-sm">
    <!-- Header -->
    <div class="flex flex-col gap-3 border-b border-slate-100 p-6 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h2 class="text-lg font-semibold text-slate-900">{{ __('Funding') }}</h2>
            <p class="mt-1 text-sm text-slate-500">{{ __('Who put money into this job, and what still needs returning.') }}</p>
        </div>
        <div class="flex items-center gap-5">
            <div class="text-right">
                <p class="text-xs uppercase tracking-wide text-slate-400">{{ __('Funded') }}</p>
                <p class="text-lg font-bold text-slate-900 tabular-nums">{{ number_format($totalFunded, 2) }}<span class="ml-1 text-xs font-medium text-slate-400">{{ $baseCurrency }}</span></p>
            </div>
            <div class="text-right">
                <p class="text-xs uppercase tracking-wide text-slate-400">{{ __('To return') }}</p>
                <p class="text-lg font-bold tabular-nums {{ $totalOutstanding > 0 ? 'text-amber-600' : 'text-emerald-600' }}">{{ number_format($totalOutstanding, 2) }}<span class="ml-1 text-xs font-medium text-slate-400">{{ $baseCurrency }}</span></p>
            </div>
            @if ($canManage)
                <x-button wire:click="create" type="button">
                    <x-icon name="plus" class="-ms-1 me-2 h-4 w-4" />
                    {{ __('Add funding') }}
                </x-button>
            @endif
        </div>
    </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">{{ __('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">{{ __('Returned') }}</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>
                    <th class="px-3 lg:px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Actions') }}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @forelse ($fundings as $funding)
                    <tr wire:key="funding-{{ $funding->id }}" class="transition-colors hover:bg-slate-50/70">
                        <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 text-slate-600 tabular-nums">{{ number_format((float) $funding->returned_amount, 2) }}</td>
                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium 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>
                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                            @if ($canManage)
                                <div class="flex items-center justify-end gap-3">
                                    @if ($funding->isRepayable() && $funding->outstanding > 0)
                                        <button wire:click="recordReturn({{ $funding->id }})" class="text-emerald-600 transition hover:text-emerald-700">{{ __('Return') }}</button>
                                    @endif
                                    <button wire:click="edit({{ $funding->id }})" class="text-indigo-600 transition hover:text-indigo-700">{{ __('Edit') }}</button>
                                    <button
                                        wire:click="delete({{ $funding->id }})"
                                        wire:confirm="{{ __('Delete this funding record?') }}"
                                        class="text-rose-600 transition hover:text-rose-700"
                                    >{{ __('Delete') }}</button>
                                </div>
                            @else
                                <span class="text-slate-300">—</span>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="px-3 lg:px-4 py-10 text-center text-sm text-slate-500">{{ __('No funding recorded for this job yet.') }}</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Cards (mobile) -->
    <div class="divide-y divide-slate-100 sm:hidden">
        @forelse ($fundings as $funding)
            <div wire:key="funding-mobile-{{ $funding->id }}" class="p-4">
                <div class="flex items-start justify-between gap-3">
                    <div class="min-w-0">
                        <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>
                        <p class="mt-1 text-sm font-medium text-slate-800">{{ $funding->funder_label }}</p>
                        <p class="text-xs text-slate-500">{{ optional($funding->funded_on)->format('Y-m-d') }}</p>
                        <p class="mt-1 text-sm text-slate-700 tabular-nums">
                            {{ $funding->currency_code }} {{ number_format((float) $funding->amount, 2) }}
                            @if ($funding->isRepayable())
                                <span class="text-xs text-amber-600">({{ __('out:') }} {{ number_format($funding->outstanding, 2) }})</span>
                            @endif
                        </p>
                    </div>
                    @if ($canManage)
                        <div class="flex shrink-0 flex-col items-end gap-2 text-sm font-medium">
                            @if ($funding->isRepayable() && $funding->outstanding > 0)
                                <button wire:click="recordReturn({{ $funding->id }})" class="text-emerald-600">{{ __('Return') }}</button>
                            @endif
                            <button wire:click="edit({{ $funding->id }})" class="text-indigo-600">{{ __('Edit') }}</button>
                            <button wire:click="delete({{ $funding->id }})" wire:confirm="{{ __('Delete this funding record?') }}" class="text-rose-600">{{ __('Delete') }}</button>
                        </div>
                    @endif
                </div>
            </div>
        @empty
            <div class="p-6 text-center text-sm text-slate-500">{{ __('No funding recorded for this job yet.') }}</div>
        @endforelse
    </div>

    <!-- Add / edit funding modal -->
    <x-dialog-modal wire:model.live="showModal" maxWidth="xl">
        <x-slot name="title">
            {{ $editingId ? __('Edit Funding') : __('Add Funding') }}
        </x-slot>

        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                    <x-label for="f_source" value="{{ __('Source') }}" />
                    <select id="f_source" wire:model.live="source" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        @foreach ($sources as $key => $meta)
                            <option value="{{ $key }}">{{ __($meta['label']) }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="source" class="mt-2" />
                    <p class="mt-1 text-xs {{ $this->lineRepayable ? 'text-amber-600' : 'text-slate-400' }}">
                        {{ $this->lineRepayable ? __('Repayable, must be returned to the funder.') : __('Client money, not returned (except a refund).') }}
                    </p>
                </div>

                @if ($source === 'director')
                    <div>
                        <x-label for="f_director" value="{{ __('Director') }}" />
                        <select id="f_director" wire:model="funder_user_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('Select director...') }}</option>
                            @foreach ($directors as $director)
                                <option value="{{ $director->id }}">{{ $director->name }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="funder_user_id" class="mt-2" />
                    </div>
                @else
                    <div>
                        <x-label for="f_funder_name" value="{{ __('Funder name (optional)') }}" />
                        <x-input id="f_funder_name" type="text" class="mt-1 block w-full" wire:model="funder_name" placeholder="{{ __('e.g. bank/lender or client name') }}" />
                        <x-input-error for="funder_name" class="mt-2" />
                    </div>
                @endif

                <div>
                    <x-label for="f_amount" value="{{ __('Amount') }}" />
                    <x-input id="f_amount" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="amount" />
                    <x-input-error for="amount" class="mt-2" />
                </div>

                <div>
                    <x-label for="f_currency" value="{{ __('Currency') }}" />
                    <select id="f_currency" wire:model.live="currency_code" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Select...') }}</option>
                        @foreach ($currencies as $currency)
                            <option value="{{ $currency->code }}">{{ $currency->code }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="currency_code" class="mt-2" />
                </div>

                <div>
                    <x-label for="f_rate" value="{{ __('Exchange rate') }}" />
                    <x-input id="f_rate" type="number" step="0.000001" min="0" class="mt-1 block w-full" wire:model="exchange_rate" />
                    <x-input-error for="exchange_rate" class="mt-2" />
                </div>

                <div>
                    <x-label for="f_funded_on" value="{{ __('Funded on') }}" />
                    <x-input id="f_funded_on" type="date" class="mt-1 block w-full" wire:model="funded_on" />
                    <x-input-error for="funded_on" class="mt-2" />
                </div>

                <div class="sm:col-span-2">
                    <x-label for="f_notes" value="{{ __('Notes') }}" />
                    <textarea id="f_notes" rows="2" wire:model="notes" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                    <x-input-error for="notes" class="mt-2" />
                </div>
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeModal" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="save" wire:loading.attr="disabled">{{ __('Save') }}</x-button>
        </x-slot>
    </x-dialog-modal>

    <!-- Record return modal -->
    <x-dialog-modal wire:model.live="showReturnModal" maxWidth="lg">
        <x-slot name="title">
            {{ __('Record Return') }}
        </x-slot>

        <x-slot name="content">
            @if ($returnFunding)
                <div class="mb-4 rounded-xl bg-slate-50 p-3 text-sm text-slate-600 ring-1 ring-slate-100">
                    {{ __('Returning to') }} <span class="font-semibold text-slate-900">{{ $returnFunding->funder_label }}</span>
                    ({{ $returnFunding->source_label }}).
                    {{ __('Outstanding:') }} <span class="font-semibold text-amber-600">{{ $returnFunding->currency_code }} {{ number_format($returnFunding->outstanding, 2) }}</span>
                </div>
            @endif

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                    <x-label for="r_amount" value="{{ __('Amount') }}" />
                    <x-input id="r_amount" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="return_amount" />
                    <x-input-error for="return_amount" class="mt-2" />
                </div>
                <div>
                    <x-label for="r_on" value="{{ __('Return date') }}" />
                    <x-input id="r_on" type="date" class="mt-1 block w-full" wire:model="return_on" />
                    <x-input-error for="return_on" class="mt-2" />
                </div>
                <div class="sm:col-span-2">
                    <x-label for="r_notes" value="{{ __('Notes') }}" />
                    <textarea id="r_notes" rows="2" wire:model="return_notes" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                    <x-input-error for="return_notes" class="mt-2" />
                </div>
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeReturnModal" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="saveReturn" wire:loading.attr="disabled">{{ __('Record Return') }}</x-button>
        </x-slot>
    </x-dialog-modal>
</div>