@php
    $isCreate = $voucher === null;
    $editable = $isCreate || ($voucher->isDraft() && auth()->user()->can('vouchers.edit'));
    $simple = in_array($type, ['receipt', 'payment', 'contra', 'transfer'], true);
    $debitTotal = round(collect($lines)->sum(fn ($line) => (float) ($line['debit'] ?? 0)), 2);
    $creditTotal = round(collect($lines)->sum(fn ($line) => (float) ($line['credit'] ?? 0)), 2);
    $difference = round($debitTotal - $creditTotal, 2);
    $title = $isCreate ? __('app.accounts.vouchers.form.create_title') : ($voucher->voucher_no ?? __('app.accounts.vouchers.form.edit_title'));
@endphp

<div class="mx-auto max-w-7xl space-y-6">
    <div class="flex flex-wrap items-start justify-between gap-3">
        <div>
            <a href="{{ route('accounts.vouchers.index') }}" class="inline-flex items-center gap-1 text-xs font-semibold text-maroon hover:underline dark:text-gold-light">
                <x-icon name="chevron-left" class="h-3.5 w-3.5" />
                {{ __('app.accounts.vouchers.form.back_to_register') }}
            </a>
            <h1 class="mt-1 text-xl font-bold text-ink dark:text-slate-100">{{ $title }}</h1>
            <p class="mt-1 text-sm text-muted dark:text-slate-400">{{ __('app.accounts.vouchers.desc') }}</p>
        </div>
        @if (! $isCreate)
            <div class="flex flex-wrap items-center gap-1.5">
                <x-badge color="gold">{{ $voucher->type->label() }}</x-badge>
                @if ($voucher->isDraft())
                    <x-badge color="slate">{{ $voucher->status->label() }}</x-badge>
                @elseif ($voucher->isPosted())
                    <x-badge color="green">{{ $voucher->status->label() }}</x-badge>
                @else
                    <x-badge color="red">{{ $voucher->status->label() }}</x-badge>
                @endif
                @if ($voucher->reversal_of_id !== null)
                    <x-badge color="maroon">{{ __('app.accounts.vouchers.form.reversal_badge') }}</x-badge>
                @endif
            </div>
        @endif
    </div>

    <x-accounts-nav />

    @if ($notice)
        <x-alert type="success">{{ $notice }}</x-alert>
    @endif

    @if ($errors->any())
        <x-alert type="error">
            <ul class="list-disc space-y-1 ps-4">
                @foreach ($errors->all() as $message)
                    <li>{{ $message }}</li>
                @endforeach
            </ul>
        </x-alert>
    @endif

    @if ($editable)
        <form wire:submit="save" class="space-y-6" novalidate>
            <x-card :title="$isCreate ? __('app.accounts.vouchers.form.create_title') : __('app.accounts.vouchers.form.edit_title')">
                <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                    <x-form.select name="type" :label="__('app.accounts.fields.type')" wire:model.live="type" required
                        :disabled="! $isCreate" :hint="$isCreate ? __('app.accounts.vouchers.form.type_hint') : null">
                        @foreach ($types as $voucherType)
                            <option value="{{ $voucherType->value }}">{{ $voucherType->label() }}</option>
                        @endforeach
                    </x-form.select>

                    <x-form.input name="voucher_date" type="date" :label="__('app.accounts.fields.voucher_date')" wire:model="voucher_date" required />

                    <x-form.input name="reference_no" :label="__('app.accounts.fields.reference')" wire:model="reference_no" />

                    @if (in_array($type, ['receipt', 'payment'], true))
                        <x-form.select name="category" :label="__('app.accounts.fields.category')" wire:model="category" required>
                            @foreach ($categoryOptions as $option)
                                <option value="{{ $option->value }}">{{ $option->label() }}</option>
                            @endforeach
                        </x-form.select>
                    @endif

                    <x-form.input name="party_name" :label="__('app.accounts.fields.party_name')" wire:model="party_name" />
                    <x-form.input name="party_contact" :label="__('app.accounts.fields.party_contact')" wire:model="party_contact" />

                    @if ($type === 'receipt')
                        <x-form.select name="fundraising_campaign_id" :label="__('app.accounts.fields.campaign')" wire:model="fundraising_campaign_id"
                            :placeholder="__('app.actions.select')" :hint="__('app.accounts.vouchers.form.campaign_hint')">
                            @foreach ($campaigns as $campaign)
                                <option value="{{ $campaign->id }}">{{ $campaign->code }} — {{ $campaign->localizedTitle() }}</option>
                            @endforeach
                        </x-form.select>
                    @endif

                    <div class="sm:col-span-2 lg:col-span-3">
                        <x-form.textarea name="narration" :label="__('app.accounts.fields.narration')" wire:model="narration" rows="2" />
                    </div>
                </div>
            </x-card>

            <x-card :title="__('app.accounts.vouchers.form.lines')">
                @if ($simple)
                    <div class="space-y-4">
                        <p class="text-sm text-muted dark:text-slate-400">
                            @if ($type === 'receipt')
                                {{ __('app.accounts.vouchers.form.receipt_hint') }}
                            @elseif ($type === 'payment')
                                {{ __('app.accounts.vouchers.form.payment_hint') }}
                            @elseif ($type === 'contra')
                                {{ __('app.accounts.vouchers.form.contra_hint') }}
                            @else
                                {{ __('app.accounts.vouchers.form.transfer_hint') }}
                            @endif
                        </p>

                        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                            @if ($type === 'receipt' || $type === 'payment')
                                <x-form.select name="liquid_account_id" :label="__('app.accounts.vouchers.form.liquid_account')" wire:model="liquid_account_id"
                                    required :placeholder="__('app.actions.select')">
                                    @foreach ($liquidAccounts as $account)
                                        <option value="{{ $account->id }}">{{ $account->code }} — {{ $account->localizedName() }}</option>
                                    @endforeach
                                </x-form.select>
                                <x-form.select name="counter_account_id"
                                    :label="$type === 'receipt' ? __('app.accounts.vouchers.form.receipt_counter') : __('app.accounts.vouchers.form.payment_counter')"
                                    wire:model="counter_account_id" required :placeholder="__('app.actions.select')">
                                    @foreach ($counterAccounts as $account)
                                        <option value="{{ $account->id }}">{{ $account->code }} — {{ $account->localizedName() }}</option>
                                    @endforeach
                                </x-form.select>
                            @else
                                <x-form.select name="from_account_id" :label="__('app.accounts.vouchers.form.from_account')" wire:model="from_account_id"
                                    required :placeholder="__('app.actions.select')">
                                    @foreach ($liquidAccounts as $account)
                                        <option value="{{ $account->id }}">{{ $account->code }} — {{ $account->localizedName() }}</option>
                                    @endforeach
                                </x-form.select>
                                <x-form.select name="to_account_id" :label="__('app.accounts.vouchers.form.to_account')" wire:model="to_account_id"
                                    required :placeholder="__('app.actions.select')">
                                    @foreach ($liquidAccounts as $account)
                                        <option value="{{ $account->id }}">{{ $account->code }} — {{ $account->localizedName() }}</option>
                                    @endforeach
                                </x-form.select>
                            @endif

                            <x-form.input name="amount" type="number" step="0.01" min="0.01" :label="__('app.accounts.fields.amount')"
                                wire:model="amount" required :hint="__('app.accounts.vouchers.form.amount_hint')" />
                        </div>
                    </div>
                @else
                    <div class="space-y-3">
                        <p class="text-sm text-muted dark:text-slate-400">{{ __('app.accounts.vouchers.form.journal_hint') }}</p>

                        <div class="overflow-x-auto">
                            <table class="w-full text-sm">
                                <thead>
                                    <tr class="border-b border-slate-200 text-left text-xs font-semibold tracking-wide text-muted uppercase dark:border-slate-800 dark:text-slate-400">
                                        <th class="w-10 px-2 py-2">{{ __('app.accounts.vouchers.form.line_no') }}</th>
                                        <th class="px-2 py-2">{{ __('app.accounts.fields.account') }}</th>
                                        <th class="px-2 py-2">{{ __('app.accounts.fields.memo') }}</th>
                                        <th class="w-32 px-2 py-2 text-right">{{ __('app.accounts.fields.debit') }}</th>
                                        <th class="w-32 px-2 py-2 text-right">{{ __('app.accounts.fields.credit') }}</th>
                                        <th class="w-12 px-2 py-2"></th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                                    @foreach ($lines as $index => $line)
                                        <tr wire:key="line-{{ $index }}">
                                            <td class="px-2 py-2 text-xs text-muted dark:text-slate-400">{{ $index + 1 }}</td>
                                            <td class="px-2 py-2">
                                                <select wire:model="lines.{{ $index }}.ledger_account_id"
                                                    class="block w-full rounded-lg border border-slate-300 bg-white px-2.5 py-2 text-sm text-ink shadow-sm focus:border-maroon focus:outline-none focus:ring-2 focus:ring-maroon/20 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">
                                                    <option value="">{{ __('app.actions.select') }}</option>
                                                    @foreach ($accounts as $account)
                                                        <option value="{{ $account->id }}">{{ $account->code }} — {{ $account->localizedName() }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td class="px-2 py-2">
                                                <input type="text" wire:model="lines.{{ $index }}.memo" maxlength="255"
                                                    class="block w-full rounded-lg border border-slate-300 bg-white px-2.5 py-2 text-sm text-ink shadow-sm focus:border-maroon focus:outline-none focus:ring-2 focus:ring-maroon/20 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">
                                            </td>
                                            <td class="px-2 py-2">
                                                <input type="number" step="0.01" min="0" wire:model="lines.{{ $index }}.debit"
                                                    class="block w-full rounded-lg border border-slate-300 bg-white px-2.5 py-2 text-right text-sm text-ink shadow-sm focus:border-maroon focus:outline-none focus:ring-2 focus:ring-maroon/20 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">
                                            </td>
                                            <td class="px-2 py-2">
                                                <input type="number" step="0.01" min="0" wire:model="lines.{{ $index }}.credit"
                                                    class="block w-full rounded-lg border border-slate-300 bg-white px-2.5 py-2 text-right text-sm text-ink shadow-sm focus:border-maroon focus:outline-none focus:ring-2 focus:ring-maroon/20 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">
                                            </td>
                                            <td class="px-2 py-2 text-right">
                                                <button type="button" wire:click="removeLine({{ $index }})"
                                                    class="rounded-lg p-1.5 text-slate-400 transition hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/30">
                                                    <x-icon name="trash" class="h-4 w-4" />
                                                    <span class="sr-only">{{ __('app.accounts.vouchers.form.remove_line') }}</span>
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div class="flex flex-wrap items-center justify-between gap-3 border-t border-slate-200 pt-3 dark:border-slate-800">
                            <x-button type="button" variant="secondary" class="px-3 py-2 text-xs" wire:click="addLine">
                                <x-icon name="plus" class="h-3.5 w-3.5" />
                                {{ __('app.accounts.vouchers.form.add_line') }}
                            </x-button>

                            <div class="flex flex-wrap items-center gap-4 text-sm">
                                <span class="text-muted dark:text-slate-400">
                                    {{ __('app.accounts.fields.total_debit') }}:
                                    <span class="font-mono font-semibold text-ink dark:text-slate-100">{{ number_format($debitTotal, 2) }}</span>
                                </span>
                                <span class="text-muted dark:text-slate-400">
                                    {{ __('app.accounts.fields.total_credit') }}:
                                    <span class="font-mono font-semibold text-ink dark:text-slate-100">{{ number_format($creditTotal, 2) }}</span>
                                </span>
                                @if ($difference === 0.0 && $debitTotal > 0)
                                    <x-badge color="green">{{ __('app.accounts.vouchers.form.balanced') }}</x-badge>
                                @else
                                    <x-badge color="red">
                                        {{ __('app.accounts.vouchers.form.unbalanced', ['difference' => number_format(abs($difference), 2)]) }}
                                    </x-badge>
                                @endif
                            </div>
                        </div>
                    </div>
                @endif
            </x-card>

            <div class="flex flex-wrap items-center justify-end gap-3">
                @if (! $isCreate && $voucher->isDraft())
                    @can('vouchers.delete')
                        <x-button type="button" variant="danger" wire:click="deleteDraft" wire:confirm="{{ __('app.accounts.vouchers.confirm.delete') }}">
                            <x-icon name="trash" class="h-4 w-4" />
                            {{ __('app.accounts.vouchers.form.delete_draft') }}
                        </x-button>
                    @endcan
                @endif
                <x-link-button :href="route('accounts.vouchers.index')" variant="secondary">
                    {{ __('app.actions.cancel') }}
                </x-link-button>
                <x-button type="submit" variant="secondary" wire:loading.attr="disabled" wire:target="save">
                    <x-icon name="check" class="h-4 w-4" />
                    {{ $isCreate ? __('app.accounts.vouchers.form.save_draft') : __('app.accounts.vouchers.form.save_changes') }}
                </x-button>
                @can('vouchers.post')
                    <x-button type="button" wire:click="saveAndPost" wire:loading.attr="disabled" wire:target="saveAndPost"
                        wire:confirm="{{ __('app.accounts.vouchers.confirm.post') }}">
                        <x-icon name="check-circle" class="h-4 w-4" />
                        {{ __('app.accounts.vouchers.form.post_voucher') }}
                    </x-button>
                @endcan
            </div>
        </form>
    @else
        <x-card :title="__('app.accounts.vouchers.form.view_title')">
            <div class="grid gap-x-6 gap-y-4 text-sm sm:grid-cols-2 lg:grid-cols-3">
                <div>
                    <span class="block text-xs font-semibold tracking-wide text-muted uppercase dark:text-slate-400">{{ __('app.accounts.fields.voucher_date') }}</span>
                    <span class="mt-0.5 block font-medium text-ink dark:text-slate-100">{{ $voucher->voucher_date->translatedFormat('d M Y') }}</span>
                </div>
                <div>
                    <span class="block text-xs font-semibold tracking-wide text-muted uppercase dark:text-slate-400">{{ __('app.accounts.fields.financial_year') }}</span>
                    <span class="mt-0.5 block font-medium text-ink dark:text-slate-100">{{ $voucher->financialYear?->code ?? '—' }}</span>
                </div>
                <div>
                    <span class="block text-xs font-semibold tracking-wide text-muted uppercase dark:text-slate-400">{{ __('app.accounts.fields.category') }}</span>
                    <span class="mt-0.5 block font-medium text-ink dark:text-slate-100">{{ $voucher->category?->label() ?? '—' }}</span>
                </div>
                <div>
                    <span class="block text-xs font-semibold tracking-wide text-muted uppercase dark:text-slate-400">{{ __('app.accounts.fields.reference') }}</span>
                    <span class="mt-0.5 block font-medium text-ink dark:text-slate-100">{{ $voucher->reference_no ?: '—' }}</span>
                </div>
                <div>
                    <span class="block text-xs font-semibold tracking-wide text-muted uppercase dark:text-slate-400">{{ __('app.accounts.fields.party_name') }}</span>
                    <span class="mt-0.5 block font-medium text-ink dark:text-slate-100">{{ $voucher->party_name ?: '—' }}</span>
                    @if ($voucher->party_contact)
                        <span class="block text-xs text-muted dark:text-slate-400">{{ $voucher->party_contact }}</span>
                    @endif
                </div>
                <div>
                    <span class="block text-xs font-semibold tracking-wide text-muted uppercase dark:text-slate-400">{{ __('app.accounts.fields.campaign') }}</span>
                    <span class="mt-0.5 block font-medium text-ink dark:text-slate-100">
                        {{ $voucher->campaign ? $voucher->campaign->code.' — '.$voucher->campaign->localizedTitle() : '—' }}
                    </span>
                </div>
                <div class="sm:col-span-2 lg:col-span-3">
                    <span class="block text-xs font-semibold tracking-wide text-muted uppercase dark:text-slate-400">{{ __('app.accounts.fields.narration') }}</span>
                    <span class="mt-0.5 block font-medium text-ink dark:text-slate-100">{{ $voucher->narration ?: '—' }}</span>
                </div>
                <div>
                    <span class="block text-xs font-semibold tracking-wide text-muted uppercase dark:text-slate-400">{{ __('app.accounts.vouchers.form.created_by') }}</span>
                    <span class="mt-0.5 block font-medium text-ink dark:text-slate-100">{{ $voucher->creator?->name ?? '—' }}</span>
                </div>
                <div>
                    <span class="block text-xs font-semibold tracking-wide text-muted uppercase dark:text-slate-400">{{ __('app.accounts.vouchers.form.posted_by') }}</span>
                    <span class="mt-0.5 block font-medium text-ink dark:text-slate-100">{{ $voucher->poster?->name ?? '—' }}</span>
                    @if ($voucher->posted_at)
                        <span class="block text-xs text-muted dark:text-slate-400">{{ $voucher->posted_at->translatedFormat('d M Y, h:i A') }}</span>
                    @endif
                </div>
                @if ($voucher->reverser)
                    <div>
                        <span class="block text-xs font-semibold tracking-wide text-muted uppercase dark:text-slate-400">{{ __('app.accounts.vouchers.form.reversed_by') }}</span>
                        <span class="mt-0.5 block font-medium text-ink dark:text-slate-100">{{ $voucher->reverser->name }}</span>
                        @if ($voucher->reversed_at)
                            <span class="block text-xs text-muted dark:text-slate-400">{{ $voucher->reversed_at->translatedFormat('d M Y, h:i A') }}</span>
                        @endif
                    </div>
                @endif
            </div>

            @if ($voucher->voucher_no === null)
                <p class="mt-4 rounded-xl bg-amber-50 px-4 py-3 text-xs font-medium text-amber-800 dark:bg-amber-900/30 dark:text-amber-200">
                    {{ __('app.accounts.vouchers.form.read_only_hint') }}
                </p>
            @endif
        </x-card>

        <x-card :title="$voucher->isDraft() ? __('app.accounts.vouchers.form.lines') : __('app.accounts.vouchers.form.posted_details')">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-slate-200 text-left text-xs font-semibold tracking-wide text-muted uppercase dark:border-slate-800 dark:text-slate-400">
                            <th class="px-3 py-3">{{ __('app.accounts.vouchers.form.line_no') }}</th>
                            <th class="px-3 py-3">{{ __('app.accounts.fields.account') }}</th>
                            <th class="px-3 py-3">{{ __('app.accounts.fields.memo') }}</th>
                            <th class="px-3 py-3 text-right">{{ __('app.accounts.fields.debit') }}</th>
                            <th class="px-3 py-3 text-right">{{ __('app.accounts.fields.credit') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                        @foreach ($voucher->lines as $line)
                            <tr wire:key="voucher-line-{{ $line->id }}">
                                <td class="px-3 py-3 text-xs text-muted dark:text-slate-400">{{ $line->line_no }}</td>
                                <td class="px-3 py-3">
                                    <span class="font-mono text-xs text-muted dark:text-slate-400">{{ $line->account?->code }}</span>
                                    <span class="ms-1.5 font-medium text-ink dark:text-slate-100">{{ $line->account?->localizedName() }}</span>
                                </td>
                                <td class="px-3 py-3 text-muted dark:text-slate-400">{{ $line->memo ?: '—' }}</td>
                                <td class="px-3 py-3 text-right font-mono text-xs">{{ (float) $line->debit > 0 ? number_format((float) $line->debit, 2) : '—' }}</td>
                                <td class="px-3 py-3 text-right font-mono text-xs">{{ (float) $line->credit > 0 ? number_format((float) $line->credit, 2) : '—' }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr class="border-t border-slate-200 font-semibold dark:border-slate-800">
                            <td colspan="3" class="px-3 py-3 text-right text-xs tracking-wide text-muted uppercase dark:text-slate-400">{{ __('app.accounts.vouchers.form.totals') }}</td>
                            <td class="px-3 py-3 text-right font-mono text-xs text-ink dark:text-slate-100">{{ number_format((float) $voucher->lines->sum('debit'), 2) }}</td>
                            <td class="px-3 py-3 text-right font-mono text-xs text-ink dark:text-slate-100">{{ number_format((float) $voucher->lines->sum('credit'), 2) }}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>

            @if ($voucher->reversal)
                <div class="mt-4 flex flex-wrap items-center gap-2 rounded-xl bg-red-50 px-4 py-3 text-xs font-medium text-red-800 dark:bg-red-900/30 dark:text-red-200">
                    <span>{{ __('app.accounts.vouchers.form.reversed_hint') }}</span>
                    <a href="{{ route('accounts.vouchers.show', $voucher->reversal) }}" class="font-semibold underline">
                        {{ $voucher->reversal->voucher_no }}
                    </a>
                </div>
            @endif

            @if ($voucher->reversalOf)
                <div class="mt-4 flex flex-wrap items-center gap-2 rounded-xl bg-slate-100 px-4 py-3 text-xs font-medium text-slate-700 dark:bg-slate-800 dark:text-slate-300">
                    <span>{{ __('app.accounts.vouchers.form.reversal_of') }}:</span>
                    <a href="{{ route('accounts.vouchers.show', $voucher->reversalOf) }}" class="font-semibold text-maroon underline dark:text-gold-light">
                        {{ $voucher->reversalOf->voucher_no }}
                    </a>
                </div>
            @endif
        </x-card>

        <div class="flex flex-wrap items-center justify-end gap-3">
            <x-link-button :href="route('accounts.vouchers.index')" variant="secondary">{{ __('app.accounts.vouchers.form.back_to_register') }}</x-link-button>

            @if ($voucher->isDraft())
                @can('vouchers.post')
                    <x-button wire:click="post" wire:confirm="{{ __('app.accounts.vouchers.confirm.post') }}">
                        <x-icon name="check-circle" class="h-4 w-4" />
                        {{ __('app.accounts.vouchers.form.post_voucher') }}
                    </x-button>
                @endcan
            @endif

            @if ($voucher->isPosted() && $voucher->reversal === null)
                @can('vouchers.reverse')
                    <x-button variant="danger" wire:click="openReversal">
                        <x-icon name="arrow-uturn-left" class="h-4 w-4" />
                        {{ __('app.accounts.vouchers.actions.reverse') }}
                    </x-button>
                @endcan
            @endif

            @can('vouchers.print')
                <x-link-button :href="route('accounts.vouchers.print', $voucher)" variant="gold" target="_blank">
                    <x-icon name="printer" class="h-4 w-4" />
                    {{ __('app.accounts.vouchers.actions.print') }}
                </x-link-button>
            @endcan
        </div>
    @endif

    @if ($reversingId !== null)
        <x-card :title="__('app.accounts.vouchers.reversal.title')">
            <form wire:submit="submitReversal" class="space-y-4" novalidate>
                <p class="text-sm text-muted dark:text-slate-400">{{ __('app.accounts.vouchers.reversal.desc') }}</p>
                <x-form.textarea name="reversalReason" :label="__('app.accounts.vouchers.reversal.reason')" wire:model="reversalReason"
                    rows="2" required :hint="__('app.accounts.vouchers.reversal.reason_hint')" />
                <div class="flex justify-end gap-3">
                    <x-button type="button" variant="secondary" wire:click="cancelReversal">{{ __('app.accounts.vouchers.reversal.cancel') }}</x-button>
                    <x-button type="submit" variant="danger" wire:loading.attr="disabled" wire:target="submitReversal">
                        {{ __('app.accounts.vouchers.reversal.submit') }}
                    </x-button>
                </div>
            </form>
        </x-card>
    @endif
</div>