@php
    $fundingBadge = ['equity' => 'emerald', 'loan' => 'amber'];
    $spendBadge = ['asset' => 'indigo', 'expense' => 'slate', 'other' => 'sky'];
    // Tone → utility classes for the capital-structure health tags.
    $toneChip = [
        'emerald' => 'bg-emerald-50 text-emerald-600',
        'amber' => 'bg-amber-50 text-amber-600',
        'rose' => 'bg-rose-50 text-rose-600',
        'slate' => 'bg-slate-100 text-slate-500',
        'indigo' => 'bg-indigo-50 text-indigo-600',
        'sky' => 'bg-sky-50 text-sky-600',
    ];
@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. These two registers of
             injected capital share one sidebar entry; the toggle moves between
             them (Funding no longer has its own sidebar link). --}}
        <x-capital-tabs />

        {{-- Header --}}
        <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
            <div>
                <h1 class="text-2xl font-bold tracking-tight text-slate-900">{{ __('Capital & Equity') }}</h1>
                <p class="mt-1 flex items-center gap-1.5 text-sm text-slate-500">
                    {{ __('Overview of shareholder contributions, equity, loans and funding.') }}
                    <x-icon name="information-circle" class="h-4 w-4 text-slate-300" />
                </p>
            </div>

            {{-- Four buttons in a row is 146px wider than a phone screen; unwrapped
                 it widened the document and with it the fixed bottom dock. --}}
            <div class="flex flex-wrap items-center gap-2 sm:gap-2.5">
                <button type="button" wire:click="export"
                        class="inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-600 shadow-sm transition hover:bg-slate-50">
                    <x-icon name="arrow-down-tray" class="h-4 w-4" />
                    {{ __('Export') }}
                </button>
                @if ($canManage)
                    <button type="button" wire:click="openImport"
                            class="inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-600 shadow-sm transition hover:bg-slate-50">
                        <x-icon name="arrow-up-tray" class="h-4 w-4" />
                        {{ __('Import') }}
                    </button>
                    {{-- G12: money going the other way. Its own button, because
                         "record a drawing" is a different intent from "record a
                         contribution", and a direction buried inside the form is
                         how owner drawings stay untracked. --}}
                    <button type="button" wire:click="createDrawing"
                            class="inline-flex items-center gap-2 rounded-xl border border-rose-200 bg-white px-4 py-2.5 text-sm font-semibold text-rose-600 shadow-sm transition hover:bg-rose-50">
                        <x-icon name="arrow-up-tray" class="h-4 w-4" />
                        {{ __('Record Drawing') }}
                    </button>
                    <button type="button" wire:click="create"
                            class="inline-flex items-center gap-2 rounded-xl bg-brand-gradient px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:opacity-90">
                        <x-icon name="plus" class="h-4 w-4" />
                        {{ __('Add Contribution') }}
                    </button>
                @endif
            </div>
        </div>

        {{-- KPI cards --}}
        <section class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
            @foreach ($kpis as $kpi)
                <x-card class="p-5">
                    <div class="flex items-start justify-between gap-3">
                        <div class="min-w-0">
                            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ $kpi['label'] }}</p>
                            <p class="mt-2 truncate text-lg font-bold leading-tight tracking-tight text-slate-900" title="{{ $kpi['value'] }}">{{ $kpi['value'] }}</p>
                            <p class="mt-2 text-xs text-slate-400">{{ $kpi['sub'] }}</p>
                        </div>
                        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl"
                              style="background: {{ $kpi['accent'] }}14; color: {{ $kpi['accent'] }}">
                            <x-icon :name="$kpi['icon']" class="h-5 w-5" />
                        </span>
                    </div>
                </x-card>
            @endforeach
        </section>

        {{-- Capital structure health --}}
        <x-card class="p-6">
            <h2 class="text-base font-semibold text-slate-900">{{ __('Capital Structure Health') }}</h2>
            <p class="text-xs text-slate-400">{{ __('Key financial ratios') }}</p>

            <div class="mt-5 grid grid-cols-1 gap-4 sm:grid-cols-3 lg:grid-cols-6">
                @foreach ($structureHealth as $stat)
                    <div class="flex items-start gap-3">
                        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl {{ $toneChip[$stat['tone']] ?? $toneChip['slate'] }}">
                            <x-icon :name="$stat['icon']" class="h-5 w-5" />
                        </span>
                        <div class="min-w-0">
                            <p class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">{{ $stat['label'] }}</p>
                            <p class="mt-0.5 truncate text-base font-bold text-slate-900">{{ $stat['value'] }}</p>
                            <span class="mt-1 inline-flex rounded-full px-1.5 py-0.5 text-[10px] font-semibold {{ $toneChip[$stat['tone']] ?? $toneChip['slate'] }}">{{ $stat['tag'] }}</span>
                        </div>
                    </div>
                @endforeach
            </div>
        </x-card>

        {{-- Loans still owed, per lender --}}
        @if ($loansOwed->isNotEmpty())
            <x-card class="overflow-hidden">
                <div class="border-b border-slate-100 p-4 sm:p-5">
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Owed to lenders') }}</h2>
                    <p class="text-xs text-slate-400">{{ __('Money directors and others lent the company, less what has been paid back. Record a repayment as a drawing with the funding type set to Loan.') }}</p>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Lender') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Lent') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Paid back') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Still owed') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @foreach ($loansOwed as $row)
                                <tr wire:key="owed-{{ $loop->index }}" class="transition hover:bg-slate-50/70">
                                    <td class="px-3 lg:px-4 py-3.5 text-sm font-medium text-slate-900">{{ $row['label'] }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-right text-sm tabular-nums text-slate-600">{{ $base }} {{ number_format($row['lent'], 2) }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-right text-sm tabular-nums text-slate-600">{{ $base }} {{ number_format($row['repaid'], 2) }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-right text-sm font-semibold tabular-nums {{ $row['owed'] > 0 ? 'text-amber-600' : 'text-emerald-600' }}">{{ $base }} {{ number_format($row['owed'], 2) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr class="bg-slate-50/80 text-sm font-semibold">
                                <td class="px-3 lg:px-4 py-3" colspan="3">{{ __('Total still owed') }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right tabular-nums text-slate-900">{{ $base }} {{ number_format($loansOutstanding, 2) }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </x-card>
        @endif

        {{-- Table --}}
        <x-card class="overflow-hidden">
            <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:justify-between sm:p-5">
                <div>
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Capital Register') }}</h2>
                    <p class="text-xs text-slate-400">{{ __('Equity, loans and owner drawings, in one ledger') }}</p>
                </div>

                <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
                    <div class="relative max-w-xs 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 contributors, description...') }}"
                               class="block w-full rounded-xl border-slate-200 bg-slate-50 py-2.5 pl-10 pr-3 text-sm text-slate-900 shadow-sm transition placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:ring-indigo-500" />
                    </div>

                    <div class="flex flex-wrap items-center gap-2">
                        <select wire:model.live="contributorFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('All Contributors') }}</option>
                            @foreach ($members as $member)
                                <option value="{{ $member->id }}">{{ $member->name }}</option>
                            @endforeach
                        </select>
                        <select wire:model.live="directionFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('In & Out') }}</option>
                            @foreach ($directions as $key => $label)
                                <option value="{{ $key }}">{{ __($label) }}</option>
                            @endforeach
                        </select>
                        <select wire:model.live="fundingTypeFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('All Types') }}</option>
                            @foreach ($fundingTypes as $key => $label)
                                <option value="{{ $key }}">{{ __($label) }}</option>
                            @endforeach
                        </select>
                        <select wire:model.live="spendTypeFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('All Funding') }}</option>
                            @foreach ($spendTypes as $key => $label)
                                <option value="{{ $key }}">{{ __($label) }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-100">
                    <thead>
                        <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Date') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Contributor') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Description') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Type') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Funding Type') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Amount') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Method') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse ($contributions as $c)
                            @php $isDrawing = $c->isDrawing(); @endphp
                            <tr wire:key="cc-{{ $c->id }}" class="transition hover:bg-slate-50/70">
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ optional($c->contributed_on)->format('j M Y') }}</td>
                                <td class="px-3 lg:px-4 py-4 text-sm font-medium text-slate-900">{{ $c->contributor_label }}</td>
                                <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">
                                    {{ $c->description }}
                                    @if ($isDrawing)
                                        {{-- The one thing a reader must not miss on this row. --}}
                                        <span class="ms-1.5 inline-flex items-center gap-1 rounded-full bg-rose-50 px-1.5 py-0.5 text-[10px] font-semibold text-rose-600 align-middle">
                                            <x-icon name="arrow-up-tray" class="h-3 w-3" />
                                            {{ __('Drawing') }}
                                        </span>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4">
                                    <x-badge :color="$fundingBadge[$c->funding_type] ?? 'slate'">{{ __($fundingTypes[$c->funding_type] ?? $c->funding_type) }}</x-badge>
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4">
                                    <x-badge :color="$spendBadge[$c->spend_type] ?? 'slate'">{{ __($spendTypes[$c->spend_type] ?? $c->spend_type) }}</x-badge>
                                </td>
                                {{-- Signed: a drawing is money leaving the business, so it
                                     reads as a deduction rather than another contribution. --}}
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm tabular-nums font-semibold {{ $isDrawing ? 'text-rose-600' : 'text-slate-900' }}">{{ $isDrawing ? '− ' : '' }}{{ $c->currency_code }} {{ number_format((float) $c->amount, 2) }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">
                                    {{ $c->payment_method_label }}
                                    {{-- The account the cash landed in (or left from). Blank rows
                                         are equity on paper only, the historical shape. --}}
                                    @if ($c->fundAccount)
                                        <span class="mt-0.5 flex items-center gap-1 text-xs text-fuchsia-700">
                                            <x-icon name="scale" class="h-3 w-3" />
                                            {{ $isDrawing ? __('from') : __('into') }} {{ $c->fundAccount->name }}
                                        </span>
                                    @endif
                                </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">
                                        <x-notes-button variant="link" :for="$c" />
                                        @if ($canManage)
                                            <button wire:click="edit({{ $c->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Edit') }}</button>
                                        @endif
                                        @if ($canDelete)
                                            <button wire:click="delete({{ $c->id }})" wire:confirm="{{ __('Delete this contribution?') }}" class="text-rose-600 transition hover:text-rose-800">{{ __('Delete') }}</button>
                                        @endif
                                        @if (! $canManage && ! $canDelete)
                                            <span class="text-slate-400">—</span>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="px-6 py-12">
                                    <x-empty-state icon="scale-balance" :title="__('No contributions found')"
                                        :message="__('Record the capital the directors have put into the business, or import the startup sheet.')"
                                        class="border-0 bg-transparent py-0">
                                        @if ($canManage)
                                            <x-button wire:click="create" type="button">
                                                <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                                                {{ __('Add Contribution') }}
                                            </x-button>
                                        @endif
                                    </x-empty-state>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

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

        <p class="pt-2 text-center text-xs text-slate-400">
            {{ __('All amounts are in :code.', ['code' => $baseCode]) }} {{ __('Data is updated in real-time.') }}
        </p>
    </div>

    {{-- Create / Edit modal --}}
    <x-dialog-modal wire:model.live="showModal" maxWidth="xl">
        @php $formIsDrawing = $direction === \App\Models\CapitalContribution::DIRECTION_DRAWING; @endphp

        <x-slot name="title">
            {{ $editingId
                ? ($formIsDrawing ? __('Edit Drawing') : __('Edit Contribution'))
                : ($formIsDrawing ? __('Record Owner Drawing') : __('Add Contribution')) }}
        </x-slot>

        <x-slot name="content">
            {{-- Direction is the first decision on this form, because everything
                 below means the opposite depending on which way the money went. --}}
            <div class="mb-4 grid grid-cols-2 gap-3">
                @foreach ($directions as $key => $label)
                    @php $active = $direction === $key; @endphp
                    <button type="button" wire:click="$set('direction', '{{ $key }}')"
                        class="flex items-center gap-2.5 rounded-2xl border-2 p-3 text-left transition {{ $active
                            ? ($key === 'drawing' ? 'border-rose-400 bg-rose-50/50 ring-2 ring-rose-100' : 'border-emerald-400 bg-emerald-50/50 ring-2 ring-emerald-100')
                            : 'border-slate-200 hover:border-slate-300' }}">
                        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl {{ $key === 'drawing' ? 'bg-rose-100 text-rose-600' : 'bg-emerald-100 text-emerald-600' }}">
                            <x-icon :name="$key === 'drawing' ? 'arrow-up-tray' : 'arrow-down-tray'" class="h-4 w-4" />
                        </span>
                        <span class="min-w-0">
                            <span class="block text-sm font-semibold text-slate-900">{{ __($label) }}</span>
                            <span class="block text-[11px] text-slate-500">{{ $key === 'drawing' ? __('Money taken out') : __('Money put in') }}</span>
                        </span>
                    </button>
                @endforeach
            </div>
            <x-input-error for="direction" class="mb-2" />

            @if ($formIsDrawing)
                <p class="mb-4 flex items-start gap-2 rounded-xl bg-slate-50 px-3 py-2.5 text-xs text-slate-500">
                    <x-icon name="information-circle" class="mt-px h-3.5 w-3.5 shrink-0 text-slate-400" />
                    <span>{{ __('A drawing is not an expense. It never touches profit, it reduces the owner\'s stake in the business.') }}</span>
                </p>
            @endif

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                    <x-label for="cc-type" value="{{ __('Type') }}" />
                    <select id="cc-type" wire:model.live="funding_type" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        @foreach ($fundingTypes as $key => $label)
                            <option value="{{ $key }}">{{ __($label) }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="funding_type" class="mt-2" />
                </div>

                {{-- "What it funded" only makes sense for money coming IN. --}}
                <div class="{{ $formIsDrawing ? 'hidden' : '' }}">
                    <x-label for="cc-spend" value="{{ __('Funding Type') }}" />
                    <select id="cc-spend" wire:model="spend_type" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        @foreach ($spendTypes as $key => $label)
                            <option value="{{ $key }}">{{ __($label) }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="spend_type" class="mt-2" />
                </div>

                <div>
                    <x-label for="cc-contributor" value="{{ $formIsDrawing ? __('Drawn by') : ($funding_type === 'loan' ? __('Director (optional)') : __('Contributor')) }}" />
                    <select id="cc-contributor" wire:model="contributor_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="">{{ __('None') }}</option>
                        @foreach ($members as $member)
                            <option value="{{ $member->id }}">{{ $member->name }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="contributor_id" class="mt-2" />
                </div>

                @if ($funding_type === 'loan')
                    <div>
                        <x-label for="cc-lender" value="{{ __('Lender name (if external)') }}" />
                        <x-input id="cc-lender" type="text" class="mt-1 block w-full" wire:model="lender_name" placeholder="{{ __('e.g. Bank / supplier') }}" />
                        <x-input-error for="lender_name" class="mt-2" />
                    </div>
                @endif

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

                <div>
                    <x-label for="cc-currency" value="{{ __('Currency') }}" />
                    <select id="cc-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">
                        @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="cc-amount" value="{{ __('Amount') }}" />
                    <x-input id="cc-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="cc-method" value="{{ __('Payment Method (optional)') }}" />
                    <select id="cc-method" wire:model="payment_method" 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="">{{ __('Not specified') }}</option>
                        @foreach ($paymentMethods as $key => $label)
                            <option value="{{ $key }}">{{ __($label) }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="payment_method" class="mt-2" />
                </div>

                <div>
                    <x-label for="cc-account" value="{{ $formIsDrawing ? __('Paid out of (optional)') : __('Landed in (optional)') }}" />
                    <select id="cc-account" wire:model="fund_account_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="">{{ __('No account, equity on paper only') }}</option>
                        @foreach ($accounts as $account)
                            <option value="{{ $account->id }}">{{ $account->name }} ({{ $account->currency_code }})</option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-slate-500">
                        {{ $formIsDrawing
                            ? __('Pick the account the owner took the cash from and treasury records the withdrawal.')
                            : __('Pick the cashbox or bank the money went into and treasury records the deposit. Then pay the bill from that account as a normal expense. Do not also add an adjustment.') }}
                    </p>
                    <x-input-error for="fund_account_id" class="mt-2" />
                </div>

                <div class="sm:col-span-2">
                    <x-label for="cc-description" value="{{ __('Description') }}" />
                    <x-input id="cc-description" type="text" class="mt-1 block w-full" wire:model="description" placeholder="{{ $formIsDrawing ? __('e.g. Monthly owner withdrawal') : __('e.g. Large Format Printer') }}" />
                    <x-input-error for="description" class="mt-2" />
                </div>

                <div class="sm:col-span-2">
                    <x-label for="cc-notes" value="{{ __('Notes (optional)') }}" />
                    <textarea id="cc-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>

    {{-- Import startup capital modal --}}
    <x-dialog-modal wire:model.live="showImport" maxWidth="2xl">
        <x-slot name="title">
            {{ __('Import Startup Capital') }}
        </x-slot>

        <x-slot name="content">
            <p class="text-sm text-slate-500">
                {{ __('Upload your "Startup Capital" sheet (.xlsx or .csv). Each line becomes a capital contribution: durable kit (printer, plotter, stands…) is capitalised as an asset, everything else as a setup expense, funded by equity, not booked as revenue.') }}
            </p>

            {{-- Expected columns --}}
            <div class="mt-4 overflow-hidden rounded-2xl border border-slate-200">
                <div class="border-b border-slate-200 bg-slate-50 px-4 py-2 text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                    {{ __('Expected columns (one row per purchase)') }}
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full text-left text-xs">
                        <thead class="text-slate-400">
                            <tr class="[&>th]:px-3 [&>th]:py-2 [&>th]:font-semibold">
                                <th>{{ __('Date') }}</th>
                                <th>{{ __('Description') }}</th>
                                <th>{{ __('Amount') }}</th>
                                <th>{{ __('Prince') }}</th>
                                <th>{{ __('Ashly') }}</th>
                                <th>{{ __('Debt') }}</th>
                                <th>{{ __('Method') }}</th>
                            </tr>
                        </thead>
                        <tbody class="tabular-nums text-slate-600">
                            <tr class="border-t border-slate-100 [&>td]:px-3 [&>td]:py-1.5">
                                <td>2025-04-29</td><td>{{ __('Large Format Printer') }}</td><td>1800</td><td>1062</td><td>738</td><td>0</td><td>{{ __('Bank Transfer') }}</td>
                            </tr>
                            <tr class="border-t border-slate-100 [&>td]:px-3 [&>td]:py-1.5">
                                <td>2025-05-02</td><td>{{ __('Company Registration') }}</td><td>150</td><td></td><td></td><td></td><td>{{ __('Cash') }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <p class="mt-2 text-[11px] text-slate-400">
                {{ __('Contributor columns are matched to team members by first name. A "Debt" / "Loan" column is recorded as a repayable director loan. Lines with no per-person split are recorded as unattributed equity. Re-importing the same sheet skips rows already on file.') }}
            </p>

            {{-- Sync from a Google Sheet link --}}
            <div class="mt-4 rounded-2xl border border-slate-200 p-4">
                <label class="block text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Sync from a Google Sheet') }}</label>
                <p class="mt-1 text-[11px] text-slate-400">
                    {{ __('Paste the share link of your Startup Capital sheet (set sharing to "Anyone with the link → Viewer"). Re-sync any time, rows already on file are skipped, so it never duplicates.') }}
                </p>
                <div class="mt-3 flex flex-col gap-2 sm:flex-row">
                    <input type="text" wire:model="googleSheet"
                           placeholder="https://docs.google.com/spreadsheets/d/…"
                           class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-400 focus:ring-indigo-400" />
                    <x-button wire:click="syncFromGoogle" wire:loading.attr="disabled" wire:target="syncFromGoogle" class="shrink-0 justify-center">
                        <span wire:loading.remove wire:target="syncFromGoogle">{{ __('Load & sync') }}</span>
                        <span wire:loading wire:target="syncFromGoogle">{{ __('Syncing…') }}</span>
                    </x-button>
                </div>
                <x-input-error for="googleSheet" class="mt-2" />
            </div>

            <div class="mt-4 flex items-center gap-3 text-[11px] font-medium uppercase tracking-wider text-slate-400">
                <span class="h-px flex-1 bg-slate-200"></span>{{ __('or upload a file') }}<span class="h-px flex-1 bg-slate-200"></span>
            </div>

            {{-- Upload --}}
            <div class="mt-4 rounded-2xl border-2 border-dashed border-slate-200 p-6">
                <input type="file" wire:model="importFile" accept=".csv,.txt,.xlsx,.xls"
                       class="block w-full text-sm text-slate-600 file:mr-4 file:rounded-xl file:border-0 file:bg-indigo-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-indigo-700 hover:file:bg-indigo-100" />
                <x-upload-progress target="importFile" class="mt-2" />
            </div>

            {{-- Result --}}
            @if ($importResult)
                <div class="mt-4 grid grid-cols-2 gap-3 sm:grid-cols-4">
                    @foreach ([
                        ['label' => __('Rows read'), 'value' => $importResult['rows']],
                        ['label' => __('Contributions'), 'value' => $importResult['created']],
                        ['label' => __('Assets created'), 'value' => $importResult['assets']],
                        ['label' => __('Skipped'), 'value' => $importResult['skipped']],
                    ] as $stat)
                        <div class="rounded-2xl bg-slate-50 p-4 text-center">
                            <p class="text-2xl font-bold text-slate-900">{{ $stat['value'] }}</p>
                            <p class="mt-1 text-[11px] font-medium uppercase tracking-wider text-slate-500">{{ $stat['label'] }}</p>
                        </div>
                    @endforeach
                </div>
            @endif
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeImport" wire:loading.attr="disabled">{{ __('Close') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="runCapitalImport" wire:loading.attr="disabled" wire:target="runCapitalImport,importFile">
                <span wire:loading.remove wire:target="runCapitalImport">{{ __('Import') }}</span>
                <span wire:loading wire:target="runCapitalImport">{{ __('Importing…') }}</span>
            </x-button>
        </x-slot>
    </x-dialog-modal>
</div>