@extends('layouts.app')

@section('title', 'Post Journal Entry')

@section('content')
    <x-page-head title="Post Manual Entry" subtitle="Debits must equal credits" />

    <x-panel>
        <form method="POST" action="{{ route('accounting.journal.store') }}" id="journalForm">
            @csrf
            <div style="display:grid; grid-template-columns: 1fr 2fr; gap:16px; margin-bottom:20px;">
                <div class="form-group">
                    <label class="form-label" for="date">Date</label>
                    <input class="input" type="date" id="date" name="date" value="{{ old('date', now()->toDateString()) }}" required>
                </div>
                <div class="form-group">
                    <label class="form-label" for="description">Description</label>
                    <input class="input" type="text" id="description" name="description" value="{{ old('description') }}" placeholder="Journal entry description">
                </div>
            </div>

                <table id="linesTable">
                <thead>
                    <tr>
                        <th>Account</th>
                        <th>Debit</th>
                        <th>Credit</th>
                        <th>Memo</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @for ($i = 0; $i < max(2, count(old('lines', []))); $i++)
                        @php($line = old('lines.'.$i, []))
                        <tr>
                            <td>
                                <select class="input" name="lines[{{ $i }}][account_id]" required>
                                    <option value="">Select account</option>
                                    @foreach ($accounts as $account)
                                        <option value="{{ $account->id }}" @selected(($line['account_id'] ?? '') == $account->id)>
                                            {{ $account->code }} — {{ $account->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </td>
                            <td><input class="input" type="number" step="0.01" min="0" name="lines[{{ $i }}][debit_amount]" value="{{ $line['debit_amount'] ?? '' }}"></td>
                            <td><input class="input" type="number" step="0.01" min="0" name="lines[{{ $i }}][credit_amount]" value="{{ $line['credit_amount'] ?? '' }}"></td>
                            <td><input class="input" type="text" name="lines[{{ $i }}][line_memo]" value="{{ $line['line_memo'] ?? '' }}"></td>
                            <td></td>
                        </tr>
                    @endfor
                </tbody>
            </table>

            <div style="display:flex; gap:10px; margin-top:16px;">
                <button type="button" class="btn btn-outline" onclick="addJournalLine()">Add Line</button>
                <button type="submit" class="btn btn-primary">Post Entry</button>
                <a href="{{ route('accounting.journal.index') }}" class="btn btn-ghost">Cancel</a>
            </div>
        </form>
    </x-panel>
@endsection

@push('scripts')
<script>
function addJournalLine() {
    const tbody = document.querySelector('#linesTable tbody');
    const index = tbody.children.length;
    const firstSelect = tbody.querySelector('select');
    const row = document.createElement('tr');
    row.innerHTML = `
        <td>${firstSelect.outerHTML.replace(/lines\[\d+\]/g, 'lines[' + index + ']').replace(/selected/g, '')}</td>
        <td><input class="input" type="number" step="0.01" min="0" name="lines[${index}][debit_amount]"></td>
        <td><input class="input" type="number" step="0.01" min="0" name="lines[${index}][credit_amount]"></td>
        <td><input class="input" type="text" name="lines[${index}][line_memo]"></td>
        <td></td>`;
    tbody.appendChild(row);
}
</script>
@endpush
