@extends('layouts.app')
@php
    $editing = $entry->exists;
    $rows = old('lines') ?? $lines;
    $rows = array_values($rows);
    $formData = ['lines' => $rows, 'errors' => $errors->messages()];
@endphp
@section('title', $editing ? 'Edit '.$entry->number() : 'New journal entry')

@section('content')
<x-page-header :title="$editing ? 'Edit '.$entry->number() : 'New journal entry'" subtitle="For opening cash and bank, owner capital, transfers and other adjustments. Debits must equal credits." />

<form method="POST" action="{{ $editing ? route('ledger.journal.update', $entry) : route('ledger.journal.store') }}" id="journal-form" data-validate novalidate>
    @csrf
    @if ($editing) @method('PUT') @endif
    @include('partials.error-summary')

    <x-form-section title="Entry" icon="journal-bookmark">
        <x-field name="entry_date" type="date" label="Date" col="3" :value="$entry->entry_date?->format('Y-m-d')" required />
        <x-field name="reference" label="Reference" col="3" :value="$entry->reference" maxlength="100" placeholder="Optional" />
        <x-field name="memo" label="Description" col="6" :value="$entry->memo" maxlength="255" required placeholder="e.g. Opening cash and bank balances" />
    </x-form-section>

    <x-form-section title="Lines" icon="list-ol" desc="Debit what you receive or spend; credit where it comes from" :bare="true">
        <x-slot:actions><button type="button" class="btn btn-ghost btn-sm" id="add-line" data-no-lock><i class="bi bi-plus-lg"></i> Add line</button></x-slot:actions>
        <div class="table-wrap">
            <table class="table table-modern items-table mb-0 align-middle">
                <thead><tr><th style="min-width:260px">Account *</th><th style="min-width:180px">Memo</th><th class="num" style="width:160px">Debit</th><th class="num" style="width:160px">Credit</th><th style="width:44px"></th></tr></thead>
                <tbody id="lines-body"></tbody>
                <tfoot>
                    <tr><td colspan="2" class="text-end">Totals</td><td class="num tabular" id="t-debit">0.00</td><td class="num tabular" id="t-credit">0.00</td><td></td></tr>
                    <tr><td colspan="5"><div id="balance-status" class="d-flex align-items-center gap-2 small" aria-live="polite"></div></td></tr>
                </tfoot>
            </table>
        </div>
        @error('lines')<div class="px-3 pb-3"><div class="text-danger small"><i class="bi bi-exclamation-circle me-1"></i>{{ $message }}</div></div>@enderror
    </x-form-section>

    <div class="card card-body mb-3" style="background: var(--app-primary-soft); border-color: transparent">
        <div class="d-flex gap-2"><i class="bi bi-lightbulb text-primary mt-1" aria-hidden="true"></i>
            <div class="small"><strong>Common entries</strong>
                <ul class="ps-3 mb-0 mt-1">
                    <li><strong>Opening cash / bank:</strong> Debit <em>Cash in hand</em> or <em>Bank</em>, credit <em>Opening balance equity</em>.</li>
                    <li><strong>Owner puts money in:</strong> Debit <em>Bank</em>, credit <em>Owner's capital &amp; drawings</em>. <strong>Takes money out:</strong> the reverse.</li>
                    <li><strong>Cash deposited to bank:</strong> Debit <em>Bank</em>, credit <em>Cash in hand</em>.</li>
                    <li>Client and vendor starting balances are set on their own pages, not here.</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="form-actions">
        <a href="{{ $editing ? route('ledger.journal.show', $entry) : route('ledger.journal.index') }}" class="btn btn-ghost">Cancel</a>
        <span class="dirty-note"><i class="bi bi-circle-fill text-warning" style="font-size:.5rem"></i> Unsaved changes</span>
        <span class="spacer"></span>
        <button class="btn btn-primary" id="post-btn">{{ $editing ? 'Save changes' : 'Post entry' }}</button>
    </div>
</form>

<template id="line-template">
    <tr class="item-row">
        <td class="field col-full" data-label="Account">
            <select data-f="account_id" data-label="Account" class="form-select form-select-sm" data-ts data-placeholder="Search accounts…" required>
                <option value="">Select account…</option>
                @foreach ($accounts as $a)<option value="{{ $a->id }}">{{ $a->code }} · {{ $a->name }}</option>@endforeach
            </select>
            <div class="invalid-feedback"></div>
        </td>
        <td class="field col-full" data-label="Memo"><input type="text" data-f="memo" data-label="Memo" class="form-control form-control-sm" maxlength="255" placeholder="Optional"><div class="invalid-feedback"></div></td>
        <td class="field" data-label="Debit"><input type="number" data-f="debit" data-label="Debit" class="form-control form-control-sm text-end" step="0.01" min="0"><div class="invalid-feedback"></div></td>
        <td class="field" data-label="Credit"><input type="number" data-f="credit" data-label="Credit" class="form-control form-control-sm text-end" step="0.01" min="0"><div class="invalid-feedback"></div></td>
        <td class="col-remove"><button type="button" class="icon-btn remove-line" aria-label="Remove line" data-no-lock><i class="bi bi-x-lg" aria-hidden="true"></i></button></td>
    </tr>
</template>
<script type="application/json" id="journal-data">@json($formData)</script>
@endsection