@extends('layouts.app')

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

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="mb-0"><i class="bi bi-journal-plus me-2"></i>New Manual Journal Entry</h4>
        <a href="{{ route('accounting.journal.index') }}" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-arrow-left me-1"></i>Back
        </a>
    </div>

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show">{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

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

        <div class="card mb-4">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-8 mb-3">
                        <label class="form-label">Narration *</label>
                        <input type="text" name="narration" class="form-control" required maxlength="500"
                            value="{{ old('narration') }}" placeholder="Describe the purpose of this entry">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label">Project</label>
                        <select name="project_id" class="form-select">
                            <option value="">— No Project —</option>
                            @foreach (\App\Models\Project::where('is_active', true)->orderBy('project_name')->get() as $project)
                                <option value="{{ $project->id }}">{{ $project->project_name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <strong>Journal Lines</strong>
                <button type="button" class="btn btn-sm btn-outline-primary" id="addLineBtn">
                    <i class="bi bi-plus-lg me-1"></i>Add Line
                </button>
            </div>
            <div class="card-body p-0">
                <table class="table mb-0" id="linesTable">
                    <thead>
                        <tr>
                            <th>Account *</th>
                            <th style="width:170px">Debit</th>
                            <th style="width:170px">Credit</th>
                            <th>Description</th>
                            <th style="width:50px"></th>
                        </tr>
                    </thead>
                    <tbody id="linesBody">
                        {{-- Initial 2 rows --}}
                        <tr class="line-row">
                            <td>
                                <select name="lines[0][account_code]" class="form-select form-select-sm" required>
                                    <option value="">Select Account</option>
                                    @foreach ($accounts as $acct)
                                        <option value="{{ $acct->account_code }}">{{ $acct->account_code }} —
                                            {{ $acct->account_name }}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td><input type="number" name="lines[0][debit]" class="form-control form-control-sm debit-input"
                                    step="0.01" min="0" value="0"></td>
                            <td><input type="number" name="lines[0][credit]"
                                    class="form-control form-control-sm credit-input" step="0.01" min="0" value="0"></td>
                            <td><input type="text" name="lines[0][description]" class="form-control form-control-sm"
                                    maxlength="255"></td>
                            <td><button type="button" class="btn btn-sm btn-outline-danger remove-line"><i
                                        class="bi bi-trash"></i></button></td>
                        </tr>
                        <tr class="line-row">
                            <td>
                                <select name="lines[1][account_code]" class="form-select form-select-sm" required>
                                    <option value="">Select Account</option>
                                    @foreach ($accounts as $acct)
                                        <option value="{{ $acct->account_code }}">{{ $acct->account_code }} —
                                            {{ $acct->account_name }}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td><input type="number" name="lines[1][debit]" class="form-control form-control-sm debit-input"
                                    step="0.01" min="0" value="0"></td>
                            <td><input type="number" name="lines[1][credit]"
                                    class="form-control form-control-sm credit-input" step="0.01" min="0" value="0"></td>
                            <td><input type="text" name="lines[1][description]" class="form-control form-control-sm"
                                    maxlength="255"></td>
                            <td><button type="button" class="btn btn-sm btn-outline-danger remove-line"><i
                                        class="bi bi-trash"></i></button></td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr class="fw-bold" style="background: rgba(0,0,0,.03);">
                            <td class="text-end">Totals:</td>
                            <td class="text-end text-success" id="totalDebit">0.00</td>
                            <td class="text-end text-danger" id="totalCredit">0.00</td>
                            <td colspan="2">
                                <span id="balanceStatus" class="badge bg-secondary">Enter amounts</span>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>

        <button type="submit" class="btn btn-primary" id="submitBtn" disabled>
            <i class="bi bi-check-lg me-1"></i>Post Journal Entry
        </button>
    </form>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            let lineIdx = 2;
            const accountOptions = @json($accounts->map(fn($a) => ['code' => $a->account_code, 'label' => $a->account_code . ' — ' . $a->account_name]));

            function recalc() {
                let totalD = 0, totalC = 0;
                document.querySelectorAll('.debit-input').forEach(el => totalD += parseFloat(el.value) || 0);
                document.querySelectorAll('.credit-input').forEach(el => totalC += parseFloat(el.value) || 0);

                document.getElementById('totalDebit').textContent = totalD.toFixed(2);
                document.getElementById('totalCredit').textContent = totalC.toFixed(2);

                const diff = Math.abs(totalD - totalC);
                const badge = document.getElementById('balanceStatus');
                const btn = document.getElementById('submitBtn');

                if (totalD === 0 && totalC === 0) {
                    badge.className = 'badge bg-secondary';
                    badge.textContent = 'Enter amounts';
                    btn.disabled = true;
                } else if (diff < 0.01) {
                    badge.className = 'badge bg-success';
                    badge.textContent = '✓ Balanced';
                    btn.disabled = false;
                } else {
                    badge.className = 'badge bg-danger';
                    badge.textContent = '✗ Difference: ' + diff.toFixed(2);
                    btn.disabled = true;
                }
            }

            document.getElementById('addLineBtn').addEventListener('click', function () {
                const opts = accountOptions.map(a => `<option value="${a.code}">${a.label}</option>`).join('');
                const row = document.createElement('tr');
                row.className = 'line-row';
                row.innerHTML = `
                <td><select name="lines[${lineIdx}][account_code]" class="form-select form-select-sm" required><option value="">Select Account</option>${opts}</select></td>
                <td><input type="number" name="lines[${lineIdx}][debit]" class="form-control form-control-sm debit-input" step="0.01" min="0" value="0"></td>
                <td><input type="number" name="lines[${lineIdx}][credit]" class="form-control form-control-sm credit-input" step="0.01" min="0" value="0"></td>
                <td><input type="text" name="lines[${lineIdx}][description]" class="form-control form-control-sm" maxlength="255"></td>
                <td><button type="button" class="btn btn-sm btn-outline-danger remove-line"><i class="bi bi-trash"></i></button></td>
            `;
                document.getElementById('linesBody').appendChild(row);
                lineIdx++;
                attachListeners();
            });

            function attachListeners() {
                document.querySelectorAll('.debit-input, .credit-input').forEach(el => {
                    el.removeEventListener('input', recalc);
                    el.addEventListener('input', recalc);
                });
                document.querySelectorAll('.remove-line').forEach(btn => {
                    btn.onclick = function () {
                        if (document.querySelectorAll('.line-row').length > 2) {
                            this.closest('tr').remove();
                            recalc();
                        }
                    };
                });
            }

            attachListeners();
        });
    </script>
@endsection