@php
    $initialLines = collect(old('lines', [
        ['account' => '', 'debit' => '', 'credit' => '', 'description' => '', 'department_id' => ''],
        ['account' => '', 'debit' => '', 'credit' => '', 'description' => '', 'department_id' => ''],
    ]))->values()->map(fn ($line, $index) => [
        'key' => $index,
        'account' => (string) ($line['account'] ?? ''),
        'debit' => (string) ($line['debit'] ?? ''),
        'credit' => (string) ($line['credit'] ?? ''),
        'description' => (string) ($line['description'] ?? ''),
        'department_id' => (string) ($line['department_id'] ?? ''),
    ])->all();

    $accountGroups = $accounts
        ->groupBy(fn ($account) => $account->account_type_label)
        ->map(fn ($group) => $group->mapWithKeys(fn ($account) => [$account->code => $account->code.' · '.$account->name]));
@endphp

<x-app-layout title="New journal entry">
    <x-page-header
        title="New journal entry"
        subtitle="Manual or adjustment posting. The entry must balance before it can be posted."
        icon="book-open"
        :back="route('erp.journals.index')" />

    @if ($errors->any())
        <div class="mb-6 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
            <div class="flex items-center gap-2 font-semibold">
                <x-icon name="warning" size="sm" />
                The entry could not be saved
            </div>
            <ul class="mt-1 list-inside list-disc space-y-0.5">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('erp.journals.store') }}" x-data="journalForm(@js($initialLines))">
        @csrf

        <x-card title="Entry details" icon="document-text">
            <div class="grid gap-5 sm:grid-cols-3">
                <x-form.input name="entry_date" label="Entry date" type="date" :value="old('entry_date', today()->toDateString())" required />

                <x-form.select name="entry_type" label="Journal type" :options="$types" :value="old('entry_type', 'adjustment')" required
                               hint="Manual for operator entries, adjustment for corrections and provisions." />

                <x-form.input name="description" label="Description" :value="old('description')"
                              placeholder="e.g. Stock write-off — expired reagents" required />
            </div>

            <div class="mt-5">
                <x-form.textarea name="notes" label="Notes" :rows="2" :value="old('notes')" />
            </div>
        </x-card>

        <div class="mt-6">
            <x-card title="Journal lines" icon="list" flush>
                <div class="hidden border-b border-slate-200 bg-slate-50 px-5 py-2.5 text-[11px] font-semibold uppercase tracking-wide text-slate-500 lg:grid lg:grid-cols-12 lg:gap-3">
                    <div class="lg:col-span-3">Account</div>
                    <div class="lg:col-span-2">Debit</div>
                    <div class="lg:col-span-2">Credit</div>
                    <div class="lg:col-span-2">Line memo</div>
                    <div class="lg:col-span-2">Department</div>
                    <div class="lg:col-span-1"></div>
                </div>

                <div class="divide-y divide-slate-100">
                    <template x-for="(line, index) in lines" :key="line.key">
                        <div class="grid grid-cols-1 items-start gap-3 px-5 py-4 lg:grid-cols-12">
                            <div class="lg:col-span-3">
                                <select :name="`lines[${index}][account]`" x-model="line.account" class="hms-input" required>
                                    <option value="">Select account…</option>
                                    @foreach ($accountGroups as $typeLabel => $options)
                                        <optgroup label="{{ $typeLabel }}">
                                            @foreach ($options as $code => $label)
                                                <option value="{{ $code }}">{{ $label }}</option>
                                            @endforeach
                                        </optgroup>
                                    @endforeach
                                </select>
                            </div>

                            <div class="lg:col-span-2">
                                <input type="number" step="0.01" min="0" inputmode="decimal"
                                       :name="`lines[${index}][debit]`" x-model="line.debit"
                                       class="hms-input tabular-nums" placeholder="0.00">
                            </div>

                            <div class="lg:col-span-2">
                                <input type="number" step="0.01" min="0" inputmode="decimal"
                                       :name="`lines[${index}][credit]`" x-model="line.credit"
                                       class="hms-input tabular-nums" placeholder="0.00">
                            </div>

                            <div class="lg:col-span-2">
                                <input type="text" :name="`lines[${index}][description]`" x-model="line.description"
                                       class="hms-input" placeholder="Optional memo">
                            </div>

                            <div class="lg:col-span-2">
                                <select :name="`lines[${index}][department_id]`" x-model="line.department_id" class="hms-input">
                                    <option value="">—</option>
                                    @foreach ($departments as $department)
                                        <option value="{{ $department->id }}">{{ $department->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="flex items-center lg:col-span-1 lg:justify-end">
                                <button type="button" @click="removeLine(index)" x-show="lines.length > 2"
                                        class="inline-flex items-center justify-center rounded-lg p-2 text-rose-600 transition hover:bg-rose-50"
                                        title="Remove line">
                                    <x-icon name="trash" size="sm" />
                                </button>
                            </div>
                        </div>
                    </template>
                </div>

                <div class="flex flex-wrap items-center justify-between gap-3 border-t border-slate-200 px-5 py-4">
                    <button type="button" @click="addLine()" class="hms-btn-secondary hms-btn-sm">
                        <x-icon name="plus" size="xs" />
                        Add line
                    </button>

                    <div class="flex flex-wrap items-center gap-4 text-sm tabular-nums">
                        <span class="text-slate-600">Debits <span class="font-semibold text-slate-900" x-text="fmt(total('debit'))"></span></span>
                        <span class="text-slate-600">Credits <span class="font-semibold text-slate-900" x-text="fmt(total('credit'))"></span></span>
                        <span x-show="balanced" class="inline-flex items-center gap-1.5 rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-200">
                            <x-icon name="check" size="xs" />
                            Balanced
                        </span>
                        <span x-show="! balanced" class="inline-flex items-center gap-1.5 rounded-full bg-amber-50 px-2.5 py-1 text-xs font-medium text-amber-800 ring-1 ring-inset ring-amber-200">
                            <x-icon name="warning" size="xs" />
                            Out of balance
                        </span>
                    </div>
                </div>
            </x-card>
        </div>

        <div class="mt-6 flex flex-wrap items-center justify-between gap-3">
            <input type="hidden" name="post_now" value="0">
            <x-form.checkbox name="post_now" label="Post immediately — skip draft" :checked="(bool) old('post_now', true)"
                             hint="Uncheck to park the entry as a draft for review." />

            <div class="flex items-center gap-3">
                <a href="{{ route('erp.journals.index') }}" class="hms-btn-secondary">Cancel</a>
                <button type="submit" class="hms-btn-primary">
                    <x-icon name="check" size="sm" />
                    Save entry
                </button>
            </div>
        </div>
    </form>

    <script>
        function journalForm(initialLines) {
            return {
                lines: initialLines,
                nextKey: initialLines.length,
                addLine() {
                    this.lines.push({
                        key: this.nextKey++,
                        account: '',
                        debit: '',
                        credit: '',
                        description: '',
                        department_id: '',
                    });
                },
                removeLine(index) {
                    if (this.lines.length > 2) {
                        this.lines.splice(index, 1);
                    }
                },
                total(field) {
                    return this.lines.reduce((sum, line) => sum + (parseFloat(line[field]) || 0), 0);
                },
                get balanced() {
                    return Math.abs(this.total('debit') - this.total('credit')) < 0.005;
                },
                fmt(value) {
                    return value.toLocaleString('en-KE', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                },
            };
        }
    </script>
</x-app-layout>