@extends('layouts.admin')
@section('title','New journal')
@section('content')
<x-admin.page title="New journal" subtitle="Enter at least two lines. Debits must equal credits before posting.">
    <x-slot:actions><a href="{{ route('admin.accounting.journals') }}" class="admin-btn">Cancel</a></x-slot:actions>
    <form id="journal-form" method="post" action="{{ route('admin.accounting.journals.store') }}" class="space-y-5">@csrf
        <x-admin.section title="Journal details">
            <div class="grid gap-4 md:grid-cols-2">
                <x-admin.field label="Fiscal period" name="fiscal_period_id" required><select id="fiscal_period_id" name="fiscal_period_id" class="admin-input" required>@foreach($periods as $period)<option value="{{ $period->id }}" @selected(old('fiscal_period_id')==$period->id)>{{ $period->name }} · {{ str($period->status)->headline() }}</option>@endforeach</select></x-admin.field>
                <x-admin.field label="Memo" name="memo"><input name="memo" value="{{ old('memo') }}" class="admin-input" placeholder="Why this journal is needed"></x-admin.field>
            </div>
        </x-admin.section>
        <x-admin.section title="Lines" hint="Amounts are entered in cents for audit precision.">
            <div class="overflow-x-auto"><table class="admin-table" id="journal-lines">
                <thead><tr><th>Account</th><th>Line memo</th><th>Debit (cents)</th><th>Credit (cents)</th><th></th></tr></thead>
                <tbody></tbody>
            </table></div>
            <button type="button" class="admin-btn mt-4" id="add-line"><i data-lucide="plus" class="h-4 w-4"></i> Add line</button>
        </x-admin.section>
        <div class="admin-card flex flex-wrap items-center justify-between gap-4 p-5">
            <div><div class="text-xs uppercase text-[#6d7175]">Live balance</div><div id="balance-label" class="mt-1 text-lg font-semibold">AUD 0.00 balanced</div></div>
            <x-admin.badge id="balance-badge" tone="success">Balanced</x-admin.badge>
        </div>
        <x-admin.sticky-save form="journal-form" hint="The journal is saved as a draft. Approval and posting happen from its detail page." />
    </form>
</x-admin.page>
<template id="line-template"><tr>
    <td><select data-name="account_id" class="admin-input" required><option value="">Select account</option>@foreach($accounts as $account)<option value="{{ $account->id }}">{{ $account->code }} · {{ $account->name }}{{ $account->is_control ? ' (control)' : '' }}</option>@endforeach</select></td>
    <td><input data-name="memo" class="admin-input" placeholder="Optional"></td>
    <td><input data-name="debit_cents" type="number" min="0" value="0" class="admin-input amount"></td>
    <td><input data-name="credit_cents" type="number" min="0" value="0" class="admin-input amount"></td>
    <td><button type="button" class="admin-btn remove-line" aria-label="Remove line">×</button></td>
</tr></template>
<script>
document.addEventListener('DOMContentLoaded', () => {
  const body=document.querySelector('#journal-lines tbody'), template=document.querySelector('#line-template');
  const reindex=()=>[...body.rows].forEach((row,i)=>row.querySelectorAll('[data-name]').forEach(el=>el.name=`lines[${i}][${el.dataset.name}]`));
  const balance=()=>{let d=0,c=0;body.querySelectorAll('[data-name="debit_cents"]').forEach(el=>d+=Number(el.value||0));body.querySelectorAll('[data-name="credit_cents"]').forEach(el=>c+=Number(el.value||0));const diff=d-c,ok=diff===0&&d>0;document.querySelector('#balance-label').textContent=ok?`AUD ${(d/100).toFixed(2)} balanced`:`Difference AUD ${(Math.abs(diff)/100).toFixed(2)} ${diff>0?'debit':'credit'}`;document.querySelector('#balance-badge').textContent=ok?'Balanced':'Out of balance';};
  const add=()=>{body.append(template.content.cloneNode(true));reindex();balance();};
  document.querySelector('#add-line').addEventListener('click',add);body.addEventListener('input',balance);body.addEventListener('click',e=>{if(e.target.classList.contains('remove-line')&&body.rows.length>2){e.target.closest('tr').remove();reindex();balance();}});add();add();
});
</script>
@endsection