@php
    $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);
@endphp

<div class="mx-auto max-w-7xl space-y-6">
    <div>
        <h1 class="text-xl font-bold text-ink dark:text-slate-100">{{ __('app.accounts.opening.title') }}</h1>
        <p class="mt-1 text-sm text-muted dark:text-slate-400">{{ __('app.accounts.opening.desc') }}</p>
    </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 ($years->isEmpty())
        <x-card>
            <x-empty-state icon="calendar" :title="__('app.accounts.opening.no_year_title')"
                :description="__('app.accounts.opening.no_year_desc')">
                <x-slot name="actions">
                    @can('financial_years.create')
                        <x-link-button :href="route('accounts.financial-years.index')">{{ __('app.accounts.years.create') }}</x-link-button>
                    @endcan
                </x-slot>
            </x-empty-state>
        </x-card>
    @else
        <x-card>
            <div class="grid items-end gap-4 sm:grid-cols-2 lg:grid-cols-3">
                <x-form.select name="yearId" :label="__('app.accounts.opening.year')" wire:model.live="yearId">
                    @foreach ($years as $option)
                        <option value="{{ $option->id }}">{{ $option->code }} — {{ $option->localizedName() }}</option>
                    @endforeach
                </x-form.select>
                <div class="text-sm text-muted dark:text-slate-400 sm:col-span-2">
                    <span class="block">{{ $year->starts_on->translatedFormat('d M Y') }} — {{ $year->ends_on->translatedFormat('d M Y') }}</span>
                    @if ($year->is_closed)
                        <span class="mt-1 block font-semibold text-red-600 dark:text-red-400">{{ __('app.accounts.years.closed_hint') }}</span>
                    @else
                        <span class="mt-1 block">{{ __('app.accounts.opening.hint') }}</span>
                    @endif
                </div>
            </div>
        </x-card>

        @if ($opening)
            <x-card :title="__('app.accounts.opening.existing_title')">
                <div class="grid gap-x-6 gap-y-4 text-sm sm:grid-cols-2 lg:grid-cols-4">
                    <div>
                        <span class="block text-xs font-semibold tracking-wide text-muted uppercase dark:text-slate-400">{{ __('app.accounts.vouchers.columns.voucher_no') }}</span>
                        <span class="mt-0.5 block font-mono font-semibold text-ink dark:text-slate-100">{{ $opening->voucher_no }}</span>
                    </div>
                    <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">{{ $opening->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.amount') }}</span>
                        <span class="mt-0.5 block font-mono font-semibold text-ink dark:text-slate-100">{{ number_format((float) $opening->amount, 2) }}</span>
                    </div>
                    <div>
                        <span class="block text-xs font-semibold tracking-wide text-muted uppercase dark:text-slate-400">{{ __('app.accounts.fields.status') }}</span>
                        <span class="mt-0.5 block"><x-badge color="green">{{ $opening->status->label() }}</x-badge></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">{{ $opening->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">{{ $opening->poster?->name ?? '—' }}</span>
                        @if ($opening->posted_at)
                            <span class="block text-xs text-muted dark:text-slate-400">{{ $opening->posted_at->translatedFormat('d M Y, h:i A') }}</span>
                        @endif
                    </div>
                    @if ($opening->narration)
                        <div class="sm:col-span-2">
                            <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">{{ $opening->narration }}</span>
                        </div>
                    @endif
                </div>

                <div class="mt-5 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-2">{{ __('app.accounts.fields.account') }}</th>
                                <th class="px-3 py-2">{{ __('app.accounts.fields.memo') }}</th>
                                <th class="px-3 py-2 text-right">{{ __('app.accounts.fields.debit') }}</th>
                                <th class="px-3 py-2 text-right">{{ __('app.accounts.fields.credit') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                            @foreach ($opening->lines as $line)
                                <tr wire:key="opening-line-{{ $line->id }}">
                                    <td class="px-3 py-2">
                                        <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-2 text-muted dark:text-slate-400">{{ $line->memo ?: '—' }}</td>
                                    <td class="px-3 py-2 text-right font-mono text-xs">{{ (float) $line->debit > 0 ? number_format((float) $line->debit, 2) : '—' }}</td>
                                    <td class="px-3 py-2 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="2" class="px-3 py-2 text-right text-xs tracking-wide text-muted uppercase dark:text-slate-400">{{ __('app.accounts.vouchers.form.totals') }}</td>
                                <td class="px-3 py-2 text-right font-mono text-xs text-ink dark:text-slate-100">{{ number_format((float) $opening->lines->sum('debit'), 2) }}</td>
                                <td class="px-3 py-2 text-right font-mono text-xs text-ink dark:text-slate-100">{{ number_format((float) $opening->lines->sum('credit'), 2) }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <div class="mt-4 flex flex-wrap justify-end gap-3">
                    @can('opening_balances.post')
                        @unless ($showReversal)
                            <x-button variant="danger" wire:click="openReversal">
                                <x-icon name="arrow-uturn-left" class="h-4 w-4" />
                                {{ __('app.accounts.opening.reverse') }}
                            </x-button>
                        @endunless
                    @endcan
                    @can('vouchers.print')
                        <x-link-button :href="route('accounts.vouchers.print', $opening)" variant="gold" target="_blank">
                            <x-icon name="printer" class="h-4 w-4" />
                            {{ __('app.accounts.vouchers.actions.print') }}
                        </x-link-button>
                    @endcan
                </div>

                @if ($showReversal)
                    <div class="mt-4 rounded-xl border border-red-200 bg-red-50/60 p-4 dark:border-red-900/50 dark:bg-red-900/20">
                        <form wire:submit="submitReversal" class="space-y-3" novalidate>
                            <p class="text-sm font-semibold text-red-800 dark:text-red-200">{{ __('app.accounts.vouchers.reversal.title') }}</p>
                            <p class="text-xs text-red-700 dark:text-red-300">{{ __('app.accounts.vouchers.reversal.desc') }}</p>
                            <x-form.textarea name="reversalReason" :label="__('app.accounts.opening.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.opening.reverse') }}
                                </x-button>
                            </div>
                        </form>
                    </div>
                @endif
            </x-card>
        @elseif ($year->isOpen())
            @can('opening_balances.post')
                <x-card :title="__('app.accounts.opening.post_new')">
                    <form wire:submit="post" class="space-y-4" novalidate>
                        <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="opening-input-{{ $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.opening.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.opening.totals') }}:
                                    <span class="font-mono font-semibold text-ink dark:text-slate-100">{{ number_format($debitTotal, 2) }} / {{ number_format($creditTotal, 2) }}</span>
                                </span>
                                @if (abs($difference) < 0.01)
                                    <x-badge color="green">{{ __('app.accounts.opening.balances') }}</x-badge>
                                @else
                                    <span class="text-muted dark:text-slate-400">
                                        {{ __('app.accounts.opening.difference') }}:
                                        <span class="font-mono font-semibold text-maroon dark:text-gold-light">{{ number_format(abs($difference), 2) }}</span>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <x-form.textarea name="notes" :label="__('app.accounts.opening.notes')" wire:model="notes" rows="2" />

                        <p class="text-xs text-muted dark:text-slate-400">{{ __('app.accounts.opening.equity_hint') }}</p>

                        <div class="flex justify-end">
                            <x-button type="submit" wire:loading.attr="disabled" wire:target="post"
                                wire:confirm="{{ __('app.accounts.opening.confirm') }}">
                                <x-icon name="check-circle" class="h-4 w-4" />
                                {{ __('app.accounts.opening.post') }}
                            </x-button>
                        </div>
                    </form>
                </x-card>
            @endcan
        @else
            <x-card>
                <x-empty-state icon="file-text" :title="__('app.accounts.opening.empty_title')"
                    :description="__('app.accounts.opening.empty_desc')" />
            </x-card>
        @endif
    @endif
</div>