@extends('layouts.portal')

@section('title', __('New Journal Entry'))

@push('styles')
    @include('accounting.journal._styles')
@endpush

@section('content')
<div class="portal-page">
    @include('partials.portal-header')

    <main class="module-main">
        <div class="container-fluid py-4 je-edit">
            <header class="mb-3 d-flex flex-wrap justify-content-between align-items-center gap-2">
                <div>
                    <h1 class="h3 mb-0">{{ __('New Journal Entry') }}</h1>
                    <p class="text-muted mb-0">{{ __('Posted entries cannot be edited. To correct one, void it and post a new entry.') }}</p>
                </div>
                <a href="{{ route('accounting.journal.index') }}" class="btn btn-outline-secondary btn-sm">{{ __('Back to journal') }}</a>
            </header>

            @if ($errors->any())
                <div class="alert alert-danger" role="alert">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

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

                <div class="card shadow-sm mb-3">
                    <div class="card-body row g-3">
                        <div class="col-12 col-md-3">
                            <label for="entry_date" class="form-label">{{ __('Date') }}</label>
                            <input type="date" id="entry_date" name="entry_date" class="form-control @error('entry_date') is-invalid @enderror" value="{{ old('entry_date', now()->toDateString()) }}" required>
                        </div>
                        <div class="col-12 col-md-3">
                            <label for="reference" class="form-label">{{ __('Reference') }}</label>
                            <input type="text" id="reference" name="reference" class="form-control @error('reference') is-invalid @enderror" value="{{ old('reference') }}" maxlength="100">
                        </div>
                        <div class="col-12 col-md-6">
                            <label for="description" class="form-label">{{ __('Description') }}</label>
                            <input type="text" id="description" name="description" class="form-control @error('description') is-invalid @enderror" value="{{ old('description') }}" maxlength="500" required>
                        </div>
                    </div>
                </div>

                <div class="card shadow-sm">
                    <div class="je-grid-wrap">
                        <table class="je-table" id="journal-lines">
                            <thead>
                                <tr>
                                    <th class="row-number">{{ __('No.') }}</th>
                                    <th style="min-width: 280px">{{ __('Account') }}</th>
                                    <th style="min-width: 220px">{{ __('Line description') }}</th>
                                    <th class="num" style="min-width: 120px">{{ __('Debit') }}</th>
                                    <th class="num" style="min-width: 120px">{{ __('Credit') }}</th>
                                    <th></th>
                                </tr>
                            </thead>
                            @foreach(old('lines', [[], []]) as $i => $line)
                                @include('accounting.journal._line', ['i' => $i, 'line' => $line])
                            @endforeach
                        </table>
                    </div>
                    <div class="card-footer d-flex flex-wrap justify-content-between align-items-center gap-3">
                        <button type="button" class="btn btn-outline-primary btn-sm" id="add-line">
                            <i class="bi bi-plus-lg" aria-hidden="true"></i> {{ __('Add line') }}
                        </button>
                        <div class="je-totals" aria-live="polite">
                            <span>{{ __('Debits') }}: <strong id="total-debit">0.00</strong></span>
                            <span>{{ __('Credits') }}: <strong id="total-credit">0.00</strong></span>
                            <span class="je-balance" id="balance-indicator"></span>
                        </div>
                    </div>
                </div>

                <div class="mt-3 d-flex justify-content-end gap-2">
                    <a href="{{ route('accounting.journal.index') }}" class="btn btn-outline-secondary">{{ __('Cancel') }}</a>
                    <button type="submit" class="btn btn-primary" id="post-entry">{{ __('Post entry') }}</button>
                </div>
            </form>

            <template id="journal-line-template">
                @include('accounting.journal._line', ['i' => '__INDEX__', 'line' => []])
            </template>
        </div>
    </main>
</div>
<script>
    (function () {
        const table = document.getElementById('journal-lines');
        const template = document.getElementById('journal-line-template');
        const totalDebit = document.getElementById('total-debit');
        const totalCredit = document.getElementById('total-credit');
        const indicator = document.getElementById('balance-indicator');
        const postButton = document.getElementById('post-entry');
        const labels = {
            balanced: @json(__('Balanced')),
            difference: @json(__('Difference')),
        };
        let nextIndex = table.querySelectorAll('tbody.je-line').length;

        const toCents = (value) => Math.round((parseFloat(value) || 0) * 100);
        const format = (cents) => (cents / 100).toFixed(2);
        const lines = () => Array.from(table.querySelectorAll('tbody.je-line'));

        function hasValue(container) {
            return Array.from(container.querySelectorAll('input, select')).some((field) => field.value !== '');
        }

        function refreshDetails(line, clearHidden) {
            const option = line.querySelector('.je-account').selectedOptions[0];
            const isParty = !!option && option.dataset.party === '1';
            const isStock = !!option && option.dataset.stock === '1';
            const party = line.querySelector('.je-party');
            const stock = line.querySelector('.je-stock');
            const analysis = line.querySelector('.je-analysis');

            if (clearHidden) {
                [[party, isParty], [stock, isStock]].forEach(([group, enabled]) => {
                    if (!enabled) {
                        group.querySelectorAll('input, select').forEach((field) => { field.value = ''; });
                    }
                });
            }

            party.hidden = !isParty;
            stock.hidden = !isStock;
            analysis.hidden = analysis.hidden && !hasValue(analysis);
            line.querySelector('.je-detail').hidden = party.hidden && stock.hidden && analysis.hidden;
        }

        function renumber() {
            lines().forEach((line, index) => {
                line.querySelector('.je-number').textContent = index + 1;
            });
        }

        function recalculate() {
            let debits = 0;
            let credits = 0;

            lines().forEach((line) => {
                debits += toCents(line.querySelector('.je-debit').value);
                credits += toCents(line.querySelector('.je-credit').value);
            });

            totalDebit.textContent = format(debits);
            totalCredit.textContent = format(credits);

            const balanced = debits === credits && debits > 0;
            indicator.textContent = debits === credits ? labels.balanced : labels.difference + ': ' + format(Math.abs(debits - credits));
            indicator.classList.toggle('is-ok', balanced);
            indicator.classList.toggle('is-off', !balanced);
            postButton.disabled = !balanced;
        }

        function addLine() {
            const html = template.innerHTML.replaceAll('__INDEX__', nextIndex++);
            table.insertAdjacentHTML('beforeend', html);
            const line = lines().at(-1);
            refreshDetails(line, false);
            renumber();

            return line;
        }

        table.addEventListener('change', (event) => {
            const line = event.target.closest('tbody.je-line');

            if (line && event.target.classList.contains('je-account')) {
                refreshDetails(line, true);
            }
        });

        table.addEventListener('input', (event) => {
            const line = event.target.closest('tbody.je-line');

            if (!line) {
                return;
            }

            if (event.target.classList.contains('je-debit') && toCents(event.target.value) > 0) {
                line.querySelector('.je-credit').value = '';
            }

            if (event.target.classList.contains('je-credit') && toCents(event.target.value) > 0) {
                line.querySelector('.je-debit').value = '';
            }

            recalculate();
        });

        table.addEventListener('click', (event) => {
            const line = event.target.closest('tbody.je-line');

            if (!line) {
                return;
            }

            if (event.target.closest('.je-remove') && lines().length > 2) {
                line.remove();
                renumber();
                recalculate();
            }

            if (event.target.closest('.je-toggle')) {
                const analysis = line.querySelector('.je-analysis');
                analysis.hidden = !analysis.hidden;
                line.querySelector('.je-detail').hidden = line.querySelector('.je-party').hidden
                    && line.querySelector('.je-stock').hidden
                    && analysis.hidden;
            }
        });

        document.getElementById('add-line').addEventListener('click', () => addLine().querySelector('.je-account').focus());

        lines().forEach((line) => {
            const analysis = line.querySelector('.je-analysis');
            analysis.hidden = !hasValue(analysis);
            refreshDetails(line, false);
        });
        renumber();
        recalculate();
    })();
</script>
@endsection