@php
    $statusBadge = [
        'outstanding' => 'rose',
        'partially_repaid' => 'amber',
        'repaid' => 'emerald',
        'written_off' => 'slate',
    ];
    $statusLabel = [
        'outstanding' => __('Outstanding'),
        'partially_repaid' => __('Partially repaid'),
        'repaid' => __('Repaid'),
        'written_off' => __('Written off'),
    ];
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">

        <x-page-header :title="__('Sponsorships')" :subtitle="__('Track director funding and what the team owes back.')">
            @if ($canManage)
                <x-button wire:click="create" type="button">
                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('New Sponsorship') }}
                </x-button>
            @endif
        </x-page-header>

        <!-- Amount we owe each director -->
        <div class="overflow-hidden rounded-2xl bg-gradient-to-br from-indigo-600 to-violet-600 p-px shadow-sm">
            <div class="rounded-2xl bg-white p-5">
                <div class="flex flex-wrap items-center justify-between gap-3">
                    <div>
                        <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-500">{{ __('Amount we owe each director') }}</h2>
                        <p class="mt-0.5 text-xs text-slate-400">{{ __('Outstanding balances converted to :base.', ['base' => $liability['base']]) }}</p>
                    </div>
                    <div class="text-right">
                        <p class="text-xs uppercase tracking-wider text-slate-400">{{ __('Total liability') }}</p>
                        <p class="text-2xl font-bold text-indigo-600">{{ $liability['base'] }} {{ number_format($liability['total'], 2) }}</p>
                    </div>
                </div>

                @if (count($liability['rows']) > 0)
                    <div class="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
                        @foreach ($liability['rows'] as $row)
                            <div class="flex items-center justify-between rounded-xl bg-slate-50 px-4 py-3 ring-1 ring-slate-100">
                                <span class="truncate text-sm font-medium text-slate-700">{{ $row['director'] }}</span>
                                <span class="ms-2 shrink-0 text-sm font-semibold text-slate-900">{{ $liability['base'] }} {{ number_format($row['total'], 2) }}</span>
                            </div>
                        @endforeach
                    </div>
                @else
                    <p class="mt-4 text-sm text-slate-500">{{ __('No outstanding director liabilities. You are all square.') }}</p>
                @endif
            </div>
        </div>

        <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-5">
                <div class="relative flex-1 sm:max-w-md">
                    <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 by director, job or description...') }}"
                        class="block w-full rounded-xl border-slate-300 pl-10 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                    />
                </div>
                <div class="w-full sm:w-56">
                    <select
                        wire:model.live="statusFilter"
                        class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                    >
                        <option value="">{{ __('All statuses') }}</option>
                        @foreach ($statuses as $s)
                            <option value="{{ $s }}">{{ $statusLabel[$s] ?? $s }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <!-- Table (desktop) -->
            <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.5 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">{{ __('Director') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">{{ __('Job') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">{{ __('Funded') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">{{ __('Status') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right text-[11px] font-semibold uppercase tracking-wider text-slate-500">{{ __('Amount') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right text-[11px] font-semibold uppercase tracking-wider text-slate-500">{{ __('Repaid') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right text-[11px] font-semibold uppercase tracking-wider text-slate-500">{{ __('Outstanding') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right text-[11px] font-semibold uppercase tracking-wider text-slate-500">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @forelse ($sponsorships as $sponsorship)
                            <tr wire:key="sponsorship-{{ $sponsorship->id }}" class="transition-colors hover:bg-slate-50/70">
                                <td class="px-3 lg:px-4 py-4 text-sm font-semibold text-slate-900">{{ $sponsorship->director?->name ?: '—' }}</td>
                                <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">
                                    @if ($sponsorship->job)
                                        {{ $sponsorship->job->job_number }} <span class="text-slate-400">·</span> {{ \Illuminate\Support\Str::limit($sponsorship->job->title, 32) }}
                                    @else
                                        <span class="text-slate-400">{{ __('General / ops') }}</span>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $sponsorship->funded_on?->format('Y-m-d') ?: '—' }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                    <x-badge :color="$statusBadge[$sponsorship->status] ?? 'slate'">{{ $statusLabel[$sponsorship->status] ?? $sponsorship->status }}</x-badge>
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium text-slate-900">{{ $sponsorship->currency_code }} {{ number_format((float) $sponsorship->amount, 2) }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm text-emerald-600">{{ number_format((float) $sponsorship->repaid_amount, 2) }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-semibold text-slate-900">{{ number_format($sponsorship->outstanding, 2) }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                                    <div class="flex items-center justify-end gap-3">
                                        @if ($canUpdate && $sponsorship->outstanding > 0 && $sponsorship->status !== 'written_off')
                                            <button wire:click="recordRepayment({{ $sponsorship->id }})" class="text-emerald-600 transition hover:text-emerald-700">{{ __('Record Repayment') }}</button>
                                        @endif
                                        @if ($canUpdate)
                                            <button wire:click="edit({{ $sponsorship->id }})" class="text-indigo-600 transition hover:text-indigo-700">{{ __('Edit') }}</button>
                                        @endif
                                        @if ($canDelete)
                                            <button
                                                wire:click="delete({{ $sponsorship->id }})"
                                                wire:confirm="{{ __('Are you sure you want to delete this sponsorship?') }}"
                                                class="text-rose-600 transition hover:text-rose-700"
                                            >{{ __('Delete') }}</button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="px-3 lg:px-4 py-12">
                                    <x-empty-state
                                        icon="banknotes"
                                        :title="__('No sponsorships found')"
                                        :message="__('Record a director sponsorship to start tracking funding and repayments.')"
                                        class="border-0"
                                    >
                                        @if ($canManage)
                                            <x-button wire:click="create" type="button">
                                                <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                                                {{ __('New Sponsorship') }}
                                            </x-button>
                                        @endif
                                    </x-empty-state>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Cards (mobile) -->
            <div class="divide-y divide-slate-100 sm:hidden">
                @forelse ($sponsorships as $sponsorship)
                    <div wire:key="sponsorship-mobile-{{ $sponsorship->id }}" class="p-4">
                        <div class="flex items-start justify-between gap-4">
                            <div class="min-w-0">
                                <p class="text-sm font-semibold text-slate-900">{{ $sponsorship->director?->name ?: '—' }}</p>
                                <p class="truncate text-sm text-slate-500">
                                    @if ($sponsorship->job)
                                        {{ $sponsorship->job->job_number }} · {{ \Illuminate\Support\Str::limit($sponsorship->job->title, 28) }}
                                    @else
                                        {{ __('General / ops') }}
                                    @endif
                                </p>
                                <p class="mt-1.5"><x-badge :color="$statusBadge[$sponsorship->status] ?? 'slate'">{{ $statusLabel[$sponsorship->status] ?? $sponsorship->status }}</x-badge></p>
                                <p class="mt-2 text-sm font-medium text-slate-900">{{ $sponsorship->currency_code }} {{ number_format((float) $sponsorship->amount, 2) }}</p>
                                <p class="text-xs text-slate-500">{{ __('Outstanding') }}: {{ number_format($sponsorship->outstanding, 2) }} <span class="text-slate-400">· {{ $sponsorship->funded_on?->format('Y-m-d') }}</span></p>
                            </div>
                            <div class="flex shrink-0 flex-col items-end gap-2 text-sm font-medium">
                                @if ($canUpdate && $sponsorship->outstanding > 0 && $sponsorship->status !== 'written_off')
                                    <button wire:click="recordRepayment({{ $sponsorship->id }})" class="text-emerald-600">{{ __('Repay') }}</button>
                                @endif
                                @if ($canUpdate)
                                    <button wire:click="edit({{ $sponsorship->id }})" class="text-indigo-600">{{ __('Edit') }}</button>
                                @endif
                                @if ($canDelete)
                                    <button
                                        wire:click="delete({{ $sponsorship->id }})"
                                        wire:confirm="{{ __('Are you sure you want to delete this sponsorship?') }}"
                                        class="text-rose-600"
                                    >{{ __('Delete') }}</button>
                                @endif
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="p-6">
                        <x-empty-state
                            icon="banknotes"
                            :title="__('No sponsorships found')"
                            :message="__('Record a director sponsorship to start tracking funding and repayments.')"
                            class="border-0"
                        >
                            @if ($canManage)
                                <x-button wire:click="create" type="button">
                                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                                    {{ __('New Sponsorship') }}
                                </x-button>
                            @endif
                        </x-empty-state>
                    </div>
                @endforelse
            </div>

            <!-- Pagination -->
            @if ($sponsorships->hasPages())
                <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                    {{ $sponsorships->links() }}
                </div>
            @endif
        </x-card>
    </div>

    <!-- Create / Edit Modal -->
    <x-dialog-modal wire:model.live="showModal" maxWidth="2xl">
        <x-slot name="title">
            {{ $editingId ? __('Edit Sponsorship') : __('New Sponsorship') }}
        </x-slot>

        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label for="director_id" value="{{ __('Director') }}" />
                        <select id="director_id" wire:model="director_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 a director...') }}</option>
                            @foreach ($directors as $director)
                                <option value="{{ $director->id }}">{{ $director->name }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="director_id" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="job_id" value="{{ __('Job (optional)') }}" />
                        <select id="job_id" wire:model="job_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="">{{ __('General / ops funding') }}</option>
                            @foreach ($jobs as $job)
                                <option value="{{ $job->id }}">{{ $job->job_number }}, {{ \Illuminate\Support\Str::limit($job->title, 40) }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="job_id" class="mt-2" />
                    </div>
                </div>

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                    <div>
                        <x-label for="amount" value="{{ __('Amount') }}" />
                        <x-input id="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="currency_code" value="{{ __('Currency') }}" />
                        <select id="currency_code" wire:model="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 }}, {{ $currency->name }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="currency_code" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="funded_on" value="{{ __('Funded On') }}" />
                        <x-input id="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>

                <div>
                    <x-label for="status" value="{{ __('Status') }}" />
                    <select id="status" wire:model="status" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        @foreach ($statuses as $s)
                            <option value="{{ $s }}">{{ $statusLabel[$s] ?? $s }}</option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-slate-400">{{ __('Repayment status is updated automatically; "written off" is kept as set.') }}</p>
                    <x-input-error for="status" class="mt-2" />
                </div>

                <div>
                    <x-label for="description" value="{{ __('Description') }}" />
                    <textarea id="description" rows="2" wire:model="description" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="{{ __('What was this funding for?') }}"></textarea>
                    <x-input-error for="description" 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 Repayment Modal -->
    <x-dialog-modal wire:model.live="showRepaymentModal" maxWidth="2xl">
        <x-slot name="title">
            {{ __('Record Repayment') }}
            @if ($repaySponsorship)
                <span class="text-sm font-normal text-slate-500">— {{ $repaySponsorship->director?->name }}</span>
            @endif
        </x-slot>

        <x-slot name="content">
            @if ($repaySponsorship)
                <div class="mb-4 grid grid-cols-3 gap-2 rounded-xl bg-slate-50 p-4 text-sm ring-1 ring-slate-100">
                    <div>
                        <p class="text-slate-500">{{ __('Amount') }}</p>
                        <p class="font-semibold text-slate-900">{{ $repaySponsorship->currency_code }} {{ number_format((float) $repaySponsorship->amount, 2) }}</p>
                    </div>
                    <div>
                        <p class="text-slate-500">{{ __('Repaid') }}</p>
                        <p class="font-semibold text-emerald-600">{{ number_format((float) $repaySponsorship->repaid_amount, 2) }}</p>
                    </div>
                    <div>
                        <p class="text-slate-500">{{ __('Outstanding') }}</p>
                        <p class="font-semibold text-slate-900">{{ number_format($repaySponsorship->outstanding, 2) }}</p>
                    </div>
                </div>
            @endif

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                    <x-label for="repay_amount" value="{{ __('Amount') }}" />
                    <x-input id="repay_amount" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="repay_amount" />
                    <x-input-error for="repay_amount" class="mt-2" />
                </div>
                <div>
                    <x-label for="repay_repaid_on" value="{{ __('Repaid On') }}" />
                    <x-input id="repay_repaid_on" type="date" class="mt-1 block w-full" wire:model="repay_repaid_on" />
                    <x-input-error for="repay_repaid_on" class="mt-2" />
                </div>
                <div class="sm:col-span-2">
                    <x-label for="repay_notes" value="{{ __('Notes') }}" />
                    <textarea id="repay_notes" rows="2" wire:model="repay_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="repay_notes" class="mt-2" />
                </div>
            </div>

            <!-- Repayment history -->
            @if ($repaySponsorship && $repaySponsorship->repayments->isNotEmpty())
                <div class="mt-6">
                    <x-label value="{{ __('Repayment History') }}" />
                    <div class="mt-2 divide-y divide-slate-100 rounded-xl border border-slate-200">
                        @foreach ($repaySponsorship->repayments->sortByDesc('repaid_on') as $repayment)
                            <div wire:key="repayment-{{ $repayment->id }}" class="flex items-center justify-between px-3 py-2.5 text-sm">
                                <div>
                                    <p class="font-medium text-slate-900">{{ $repaySponsorship->currency_code }} {{ number_format((float) $repayment->amount, 2) }}</p>
                                    <p class="text-xs text-slate-500">
                                        {{ optional($repayment->repaid_on)->format('Y-m-d') }}
                                        @if ($repayment->notes) · {{ \Illuminate\Support\Str::limit($repayment->notes, 60) }} @endif
                                    </p>
                                </div>
                                <span class="text-xs text-slate-400">{{ $repayment->recorder?->name }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeRepaymentModal" wire:loading.attr="disabled">
                {{ __('Cancel') }}
            </x-secondary-button>

            <x-button class="ms-3" wire:click="saveRepayment" wire:loading.attr="disabled">
                {{ __('Save Repayment') }}
            </x-button>
        </x-slot>
    </x-dialog-modal>
</div>