@extends('layouts.app')

@section('content')
<div class="container-wrapper">
    <div class="d-flex justify-content-between align-items-center mb-4 px-3">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1 small text-uppercase fw-bold">
                    <li class="breadcrumb-item"><a href="{{ route('accountant.journals.index') }}" class="text-decoration-none text-muted">Manual Journals</a></li>
                    <li class="breadcrumb-item active text-primary">New Journal</li>
                </ol>
            </nav>
            <h2 class="h3 font-weight-bold text-dark mb-0">New Journal Entry</h2>
        </div>
        <a href="{{ route('accountant.journals.index') }}" class="btn-close shadow-none" aria-label="Close"></a>
    </div>

    @if(session('error'))
        <div class="alert alert-danger mx-3 shadow-sm border-0 rounded-3 mb-4">
            <i class="fas fa-exclamation-circle me-2"></i> {{ session('error') }}
        </div>
    @endif

    <form action="{{ route('accountant.journals.store') }}" method="POST">
        @csrf
        <div class="card border-0 shadow-sm rounded-4 mx-3 mb-4 overflow-hidden">
            <div class="card-body p-4 bg-light bg-opacity-10 border-bottom">
                <div class="row g-4">
                    <div class="col-md-3">
                        <label class="form-label small fw-bold text-muted text-uppercase">Journal Date</label>
                        <input type="date" name="journal_date" class="form-control border-2 rounded-3" value="{{ date('Y-m-d') }}" required>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small fw-bold text-muted text-uppercase">Reference#</label>
                        <input type="text" name="reference_number" class="form-control border-2 rounded-3" placeholder="e.g. MJ-001">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label small fw-bold text-muted text-uppercase">Notes</label>
                        <textarea name="notes" class="form-control border-2 rounded-3" rows="1" placeholder="Describe this journal entry..."></textarea>
                    </div>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table mb-0 align-middle" id="journal-table">
                    <thead class="bg-light">
                        <tr>
                            <th class="ps-4 py-3 border-0 small fw-bold text-muted text-uppercase" style="width: 300px;">Account</th>
                            <th class="py-3 border-0 small fw-bold text-muted text-uppercase">Description</th>
                            <th class="py-3 border-0 small fw-bold text-muted text-uppercase text-end" style="width: 150px;">Debit</th>
                            <th class="py-3 border-0 small fw-bold text-muted text-uppercase text-end" style="width: 150px;">Credit</th>
                            <th class="pe-4 border-0" style="width: 50px;"></th>
                        </tr>
                    </thead>
                    <tbody id="line-items">
                        <!-- Initial 2 Rows -->
                        <tr class="line-row">
                            <td class="ps-4">
                                <select name="lines[0][account_id]" class="form-select border-0 bg-transparent fw-bold" required>
                                    <option value="">Select Account</option>
                                    @foreach($accounts as $account)
                                        <option value="{{ $account->id }}">{{ $account->name }} ({{ $account->code }})</option>
                                    @endforeach
                                </select>
                            </td>
                            <td><input type="text" name="lines[0][description]" class="form-control border-0 bg-transparent" placeholder="Line description"></td>
                            <td><input type="number" step="0.01" name="lines[0][debit]" class="form-control border-0 bg-transparent text-end fw-bold debit-input" value="0.00"></td>
                            <td><input type="number" step="0.01" name="lines[0][credit]" class="form-control border-0 bg-transparent text-end fw-bold credit-input" value="0.00"></td>
                            <td class="pe-4"><button type="button" class="btn btn-link text-muted p-0 remove-row"><i class="far fa-trash-alt"></i></button></td>
                        </tr>
                        <tr class="line-row">
                            <td class="ps-4">
                                <select name="lines[1][account_id]" class="form-select border-0 bg-transparent fw-bold" required>
                                    <option value="">Select Account</option>
                                    @foreach($accounts as $account)
                                        <option value="{{ $account->id }}">{{ $account->name }} ({{ $account->code }})</option>
                                    @endforeach
                                </select>
                            </td>
                            <td><input type="text" name="lines[1][description]" class="form-control border-0 bg-transparent" placeholder="Line description"></td>
                            <td><input type="number" step="0.01" name="lines[1][debit]" class="form-control border-0 bg-transparent text-end fw-bold debit-input" value="0.00"></td>
                            <td><input type="number" step="0.01" name="lines[1][credit]" class="form-control border-0 bg-transparent text-end fw-bold credit-input" value="0.00"></td>
                            <td class="pe-4"><button type="button" class="btn btn-link text-muted p-0 remove-row"><i class="far fa-trash-alt"></i></button></td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="card-footer bg-white border-top-0 p-4">
                <div class="row align-items-center">
                    <div class="col-md-6 text-start">
                        <button type="button" class="btn btn-outline-primary border-2 fw-bold rounded-3 px-4" id="add-row">
                            <i class="fas fa-plus me-2"></i> Add another line
                        </button>
                    </div>
                    <div class="col-md-6">
                        <div class="card bg-light border-0 rounded-4 p-3 shadow-none">
                            <div class="d-flex justify-content-between mb-2">
                                <span class="fw-bold text-muted small text-uppercase">Total Debit</span>
                                <span class="fw-bold h5 mb-0" id="total-debit">{{ getCurrencySymbol() }}0.00</span>
                            </div>
                            <div class="d-flex justify-content-between mb-3 border-bottom pb-2">
                                <span class="fw-bold text-muted small text-uppercase">Total Credit</span>
                                <span class="fw-bold h5 mb-0" id="total-credit">{{ getCurrencySymbol() }}0.00</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="fw-bold text-muted small text-uppercase">Difference</span>
                                <span class="fw-bold h4 mb-0 text-danger" id="difference">{{ getCurrencySymbol() }}0.00</span>
                            </div>
                            <div id="balance-warning" class="mt-2 text-danger small fw-bold text-center d-none">
                                <i class="fas fa-exclamation-triangle me-1"></i> Credits and Debits must match
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="px-3 pb-5">
            <button type="submit" class="btn btn-primary btn-lg px-5 py-3 fw-bold rounded-3 shadow-lg" id="submit-btn" disabled>
                Save Journal Entry
            </button>
            <a href="{{ route('accountant.journals.index') }}" class="btn btn-link text-muted fw-bold text-decoration-none ms-3">Cancel</a>
        </div>
    </form>
</div>

<script>
    let rowCount = 2;

    document.getElementById('add-row').addEventListener('click', function() {
        const tbody = document.getElementById('line-items');
        const options = Array.from(document.querySelector('select[name="lines[0][account_id]"]').options)
            .map(opt => `<option value="${opt.value}">${opt.text}</option>`).join('');

        const newRow = `
            <tr class="line-row">
                <td class="ps-4">
                    <select name="lines[${rowCount}][account_id]" class="form-select border-0 bg-transparent fw-bold" required>
                        ${options}
                    </select>
                </td>
                <td><input type="text" name="lines[${rowCount}][description]" class="form-control border-0 bg-transparent" placeholder="Line description"></td>
                <td><input type="number" step="0.01" name="lines[${rowCount}][debit]" class="form-control border-0 bg-transparent text-end fw-bold debit-input" value="0.00"></td>
                <td><input type="number" step="0.01" name="lines[${rowCount}][credit]" class="form-control border-0 bg-transparent text-end fw-bold credit-input" value="0.00"></td>
                <td class="pe-4"><button type="button" class="btn btn-link text-muted p-0 remove-row"><i class="far fa-trash-alt"></i></button></td>
            </tr>
        `;
        tbody.insertAdjacentHTML('beforeend', newRow);
        rowCount++;
        attachListeners();
    });

    function attachListeners() {
        document.querySelectorAll('.debit-input, .credit-input').forEach(input => {
            input.removeEventListener('input', calculateTotals);
            input.addEventListener('input', calculateTotals);
        });
        document.querySelectorAll('.remove-row').forEach(btn => {
            btn.onclick = function() {
                if (document.querySelectorAll('.line-row').length > 2) {
                    this.closest('.line-row').remove();
                    calculateTotals();
                } else {
                    alert('At least 2 lines are required.');
                }
            };
        });
    }

    function calculateTotals() {
        let totalDebit = 0;
        let totalCredit = 0;

        document.querySelectorAll('.debit-input').forEach(input => {
            totalDebit += parseFloat(input.value) || 0;
        });
        document.querySelectorAll('.credit-input').forEach(input => {
            totalCredit += parseFloat(input.value) || 0;
        });

        const currencySymbol = '{{ getCurrencySymbol() }}';
        document.getElementById('total-debit').innerText = currencySymbol + totalDebit.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
        document.getElementById('total-credit').innerText = currencySymbol + totalCredit.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
        
        const diff = Math.abs(totalDebit - totalCredit);
        document.getElementById('difference').innerText = currencySymbol + diff.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});

        const warning = document.getElementById('balance-warning');
        const submitBtn = document.getElementById('submit-btn');
        const diffDisplay = document.getElementById('difference');

        if (totalDebit > 0 && totalDebit.toFixed(2) === totalCredit.toFixed(2)) {
            warning.classList.add('d-none');
            submitBtn.disabled = false;
            diffDisplay.classList.replace('text-danger', 'text-success');
        } else {
            warning.classList.remove('d-none');
            submitBtn.disabled = true;
            diffDisplay.classList.replace('text-success', 'text-danger');
        }
    }

    attachListeners();
    calculateTotals();
</script>

<style>
    .xx-small { font-size: 0.7rem; }
</style>
@endsection