{{define "content"}}
<div class="space-y-6">
    <div class="sm:flex sm:items-center sm:justify-between">
        <h1 class="text-2xl font-bold text-gray-900">New Journal Entry</h1>
        <a href="/ledger/journal" class="text-sm text-gray-500 hover:text-gray-700">&larr; Back</a>
    </div>

    {{if .Error}}
    <div class="rounded-md bg-red-50 p-4">
        <div class="text-sm text-red-700">{{.Error}}</div>
    </div>
    {{end}}

    <div class="bg-white shadow sm:rounded-lg">
        <form class="space-y-6 p-6" method="POST" action="/ledger/journal" id="je-form">
            <div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
                <div>
                    <label for="entry_date" class="block text-sm font-medium text-gray-700">Date *</label>
                    <input type="date" name="entry_date" id="entry_date" required value="{{.Today}}"
                        class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm">
                </div>
                <div>
                    <label for="description" class="block text-sm font-medium text-gray-700">Description *</label>
                    <input type="text" name="description" id="description" required
                        class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm">
                </div>
                <div>
                    <label for="reference" class="block text-sm font-medium text-gray-700">Reference</label>
                    <input type="text" name="reference" id="reference"
                        class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm">
                </div>
            </div>

            <!-- Journal Lines -->
            <div>
                <h3 class="text-sm font-medium text-gray-700 mb-3">Lines (debits must equal credits)</h3>
                <div id="journal-lines" class="space-y-3">
                    <!-- Line 1 -->
                    <div class="grid grid-cols-1 gap-3 sm:grid-cols-3 journal-line">
                        <div>
                            <select name="account_id" required
                                class="block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm">
                                <option value="">Select Account</option>
                                {{range .Accounts}}
                                <option value="{{.ID}}">{{.Code}} - {{.Name}}</option>
                                {{end}}
                            </select>
                        </div>
                        <div>
                            <input type="number" name="debit" placeholder="Debit" step="0.01" min="0" value="0"
                                class="block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm">
                        </div>
                        <div>
                            <input type="number" name="credit" placeholder="Credit" step="0.01" min="0" value="0"
                                class="block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm">
                        </div>
                    </div>
                    <!-- Line 2 -->
                    <div class="grid grid-cols-1 gap-3 sm:grid-cols-3 journal-line">
                        <div>
                            <select name="account_id" required
                                class="block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm">
                                <option value="">Select Account</option>
                                {{range .Accounts}}
                                <option value="{{.ID}}">{{.Code}} - {{.Name}}</option>
                                {{end}}
                            </select>
                        </div>
                        <div>
                            <input type="number" name="debit" placeholder="Debit" step="0.01" min="0" value="0"
                                class="block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm">
                        </div>
                        <div>
                            <input type="number" name="credit" placeholder="Credit" step="0.01" min="0" value="0"
                                class="block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm">
                        </div>
                    </div>
                </div>

                <button type="button" onclick="addLine()" class="mt-3 text-sm text-indigo-600 hover:text-indigo-500">+ Add another line</button>
            </div>

            <div class="flex justify-end space-x-3">
                <a href="/ledger/journal"
                    class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">Cancel</a>
                <button type="submit"
                    class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
                    Create Entry
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function addLine() {
    const container = document.getElementById('journal-lines');
    const firstLine = container.querySelector('.journal-line');
    const newLine = firstLine.cloneNode(true);
    // Reset values
    newLine.querySelectorAll('select').forEach(s => s.value = '');
    newLine.querySelectorAll('input').forEach(i => i.value = '0');
    container.appendChild(newLine);
}
</script>
{{end}}