@extends('layouts.app')
@section('title', 'New journal entry')

@section('content')
    <div class="page-head">
        <div>
            <h1>New journal entry</h1>
            <p>Post a balanced double-entry adjustment to the general ledger.</p>
        </div>
        <div class="page-actions">
            <a href="{{ route('journal.accounts') }}" class="btn secondary">Chart of accounts</a>
            <a href="{{ route('journal.index') }}" class="btn secondary">Back</a>
        </div>
    </div>

    <form method="POST" action="{{ route('journal.store') }}" id="je-form">
        @csrf

        <div class="card mb-2">
            <div class="card-head"><h3>Entry</h3></div>
            <div class="card-body">
                <div class="grid grid-2">
                    <div class="field">
                        <label>Entry date <span class="req">*</span></label>
                        <input type="date" name="entry_date" required
                               value="{{ old('entry_date', now()->toDateString()) }}">
                        @error('entry_date')<span class="err">{{ $message }}</span>@enderror
                    </div>
                    <div class="field">
                        <label>Description <span class="req">*</span></label>
                        <input type="text" name="description" maxlength="255" required
                               value="{{ old('description') }}" placeholder="Accrual of bandwidth costs for September">
                        @error('description')<span class="err">{{ $message }}</span>@enderror
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-head">
                <h3>Lines</h3>
                <button type="button" class="btn xs secondary" id="add-line">+ Add line</button>
            </div>
            <div class="card-body" style="padding:0;">
                <table class="data" id="lines-table">
                    <thead>
                    <tr>
                        <th style="width:34%;">Account</th>
                        <th class="num" style="width:16%;">Debit</th>
                        <th class="num" style="width:16%;">Credit</th>
                        <th>Memo</th>
                        <th style="width:6%;"></th>
                    </tr>
                    </thead>
                    <tbody id="lines-body">
                    @foreach (old('lines', [['account_id' => '', 'debit' => '', 'credit' => '', 'memo' => ''],
                                              ['account_id' => '', 'debit' => '', 'credit' => '', 'memo' => '']]) as $i => $line)
                        <tr>
                            <td>
                                <select name="lines[{{ $i }}][account_id]" class="je-account" required>
                                    <option value="">Select account…</option>
                                    @foreach ($accounts as $a)
                                        <option value="{{ $a->id }}" @selected(($line['account_id'] ?? '') == $a->id)>
                                            {{ $a->code }} — {{ $a->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </td>
                            <td><input type="number" class="num je-debit" step="0.01" min="0"
                                       name="lines[{{ $i }}][debit]" value="{{ $line['debit'] ?? '' }}"></td>
                            <td><input type="number" class="num je-credit" step="0.01" min="0"
                                       name="lines[{{ $i }}][credit]" value="{{ $line['credit'] ?? '' }}"></td>
                            <td><input type="text" name="lines[{{ $i }}][memo]" maxlength="255"
                                       value="{{ $line['memo'] ?? '' }}"></td>
                            <td class="right"><button type="button" class="btn xs danger je-remove">&times;</button></td>
                        </tr>
                    @endforeach
                    </tbody>
                    <tfoot>
                    <tr>
                        <td class="strong">Totals</td>
                        <td class="num strong" id="total-debit">0.00</td>
                        <td class="num strong" id="total-credit">0.00</td>
                        <td id="balance-note" class="small"></td>
                        <td></td>
                    </tr>
                    </tfoot>
                </table>
            </div>
            <div class="card-foot">
                <button type="submit" class="btn">Post entry</button>
                <a href="{{ route('journal.index') }}" class="btn secondary">Cancel</a>
                <span class="small muted">An entry must balance to the cent before it can be posted.</span>
            </div>
        </div>
    </form>

    <template id="line-template">
        <tr>
            <td>
                <select name="lines[__i__][account_id]" class="je-account" required>
                    <option value="">Select account…</option>
                    @foreach ($accounts as $a)
                        <option value="{{ $a->id }}">{{ $a->code }} — {{ $a->name }}</option>
                    @endforeach
                </select>
            </td>
            <td><input type="number" class="num je-debit" step="0.01" min="0" name="lines[__i__][debit]"></td>
            <td><input type="number" class="num je-credit" step="0.01" min="0" name="lines[__i__][credit]"></td>
            <td><input type="text" name="lines[__i__][memo]" maxlength="255"></td>
            <td class="right"><button type="button" class="btn xs danger je-remove">&times;</button></td>
        </tr>
    </template>

    <script>
        (function () {
            var body = document.getElementById('lines-body');
            var tpl = document.getElementById('line-template');
            var tD = document.getElementById('total-debit');
            var tC = document.getElementById('total-credit');
            var note = document.getElementById('balance-note');

            function renumber() {
                var rows = body.querySelectorAll('tr');
                rows.forEach(function (row, i) {
                    row.querySelectorAll('[name]').forEach(function (el) {
                        el.name = el.name.replace(/lines\[\d+\]/, 'lines[' + i + ']');
                    });
                });
            }

            function totals() {
                var d = 0, c = 0;
                body.querySelectorAll('.je-debit').forEach(function (el) { d += parseFloat(el.value) || 0; });
                body.querySelectorAll('.je-credit').forEach(function (el) { c += parseFloat(el.value) || 0; });
                tD.textContent = d.toFixed(2);
                tC.textContent = c.toFixed(2);
                var diff = Math.round((d - c) * 100) / 100;
                if (Math.abs(diff) < 0.005) {
                    note.textContent = 'Balanced';
                    note.style.color = 'var(--good, #16a34a)';
                } else {
                    note.textContent = 'Out by ' + Math.abs(diff).toFixed(2);
                    note.style.color = 'var(--bad, #dc2626)';
                }
            }

            document.getElementById('add-line').addEventListener('click', function () {
                body.insertAdjacentHTML('beforeend', tpl.innerHTML);
                renumber();
                totals();
            });

            body.addEventListener('click', function (e) {
                if (e.target.closest('.je-remove')) {
                    if (body.querySelectorAll('tr').length > 2) {
                        e.target.closest('tr').remove();
                        renumber();
                        totals();
                    }
                }
            });

            body.addEventListener('input', totals);
            totals();

            // Do not let an unbalanced entry reach the server.
            document.getElementById('je-form').addEventListener('submit', function (e) {
                if (tD.textContent !== tC.textContent) {
                    e.preventDefault();
                    alert('This entry does not balance: debits ' + tD.textContent + ' vs credits ' + tC.textContent + '.');
                }
            });
        })();
    </script>
@endsection