@extends('layouts.admin')

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

@section('content')
<div class="fundi-page-header">
    <div>
        <h1>New Journal Entry</h1>
        <p class="fundi-page-header__desc">Create a balanced manual journal entry.</p>
    </div>
    <a href="{{ route('admin.accounting.journal.index') }}" class="fundi-btn fundi-btn--secondary">Back</a>
</div>

<div class="fundi-card">
    <div class="fundi-card__body fundi-card__body--padded">
        <form method="POST" action="{{ route('admin.accounting.journal.store') }}" id="journal-form">
            @csrf
            <div class="fundi-form-grid">
                <div class="fundi-form-group">
                    <label for="entry_date">Entry Date *</label>
                    <input type="date" id="entry_date" name="entry_date" class="fundi-input" value="{{ old('entry_date', date('Y-m-d')) }}" required>
                </div>
                <div class="fundi-form-group">
                    <label for="source_module">Source Module</label>
                    <input type="text" id="source_module" name="source_module" class="fundi-input" value="{{ old('source_module', 'manual') }}">
                </div>
            </div>
            <div class="fundi-form-group">
                <label for="narration">Narration *</label>
                <input type="text" id="narration" name="narration" class="fundi-input" value="{{ old('narration') }}" required>
            </div>

            <h3 style="margin:1.5rem 0 0.75rem;font-size:0.95rem;">Journal Lines</h3>
            <div class="fundi-table-wrap">
                <table class="fundi-table" id="lines-table">
                    <thead>
                        <tr>
                            <th>GL Account</th>
                            <th>Narration</th>
                            <th class="num">Debit (₦)</th>
                            <th class="num">Credit (₦)</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="lines-body">
                        @php $oldLines = old('lines', [['gl_account_id'=>'','debit'=>'','credit'=>'','narration'=>''],['gl_account_id'=>'','debit'=>'','credit'=>'','narration'=>'']]); @endphp
                        @foreach($oldLines as $i => $line)
                            <tr class="journal-line">
                                <td>
                                    <select name="lines[{{ $i }}][gl_account_id]" class="fundi-select" required>
                                        <option value="">— Select —</option>
                                        @foreach($accounts as $account)
                                            <option value="{{ $account->id }}" @selected(($line['gl_account_id'] ?? '') == $account->id)>{{ $account->code }} — {{ $account->name }}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td><input type="text" name="lines[{{ $i }}][narration]" class="fundi-input" value="{{ $line['narration'] ?? '' }}"></td>
                                <td><input type="number" step="0.01" min="0" name="lines[{{ $i }}][debit]" class="fundi-input" value="{{ $line['debit'] ?? '' }}"></td>
                                <td><input type="number" step="0.01" min="0" name="lines[{{ $i }}][credit]" class="fundi-input" value="{{ $line['credit'] ?? '' }}"></td>
                                <td>@if($i > 1)<button type="button" class="fundi-btn fundi-btn--link fundi-btn--sm remove-line">Remove</button>@endif</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <button type="button" id="add-line" class="fundi-btn fundi-btn--secondary fundi-btn--sm mt-1">Add Line</button>

            <div class="fundi-form-actions">
                <button type="submit" class="fundi-btn fundi-btn--primary">Save Journal Entry</button>
                <a href="{{ route('admin.accounting.journal.index') }}" class="fundi-btn fundi-btn--secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>

<template id="line-template">
    <tr class="journal-line">
        <td>
            <select name="lines[__INDEX__][gl_account_id]" class="fundi-select" required>
                <option value="">— Select —</option>
                @foreach($accounts as $account)
                    <option value="{{ $account->id }}">{{ $account->code }} — {{ $account->name }}</option>
                @endforeach
            </select>
        </td>
        <td><input type="text" name="lines[__INDEX__][narration]" class="fundi-input"></td>
        <td><input type="number" step="0.01" min="0" name="lines[__INDEX__][debit]" class="fundi-input"></td>
        <td><input type="number" step="0.01" min="0" name="lines[__INDEX__][credit]" class="fundi-input"></td>
        <td><button type="button" class="fundi-btn fundi-btn--link fundi-btn--sm remove-line">Remove</button></td>
    </tr>
</template>

<script>
(function () {
    var lineIndex = {{ count($oldLines) }};
    var tbody = document.getElementById('lines-body');
    var template = document.getElementById('line-template');

    document.getElementById('add-line').addEventListener('click', function () {
        var html = template.innerHTML.replace(/__INDEX__/g, lineIndex++);
        tbody.insertAdjacentHTML('beforeend', html);
    });

    tbody.addEventListener('click', function (e) {
        if (e.target.classList.contains('remove-line')) {
            e.target.closest('tr').remove();
        }
    });
})();
</script>
@endsection