@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    <style>
        .journal-create-page {
            --journal-border: var(--bs-border-color, #dee2e6);
            --journal-muted: var(--bs-secondary-color, #6c757d);
            --journal-surface: var(--bs-body-bg, #fff);
            --journal-soft: var(--bs-tertiary-bg, #f8f9fa);
            --journal-text: var(--bs-body-color, #212529);
        }

        .journal-create-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .journal-breadcrumb {
            color: var(--journal-muted);
            font-size: 0.78rem;
            font-weight: 600;
            margin-bottom: 0.35rem;
        }

        .journal-page-title {
            color: var(--journal-text);
            font-size: 1.55rem !important;
            font-weight: 800;
            margin: 0;
        }

        .journal-action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            min-height: 42px;
            border-radius: 8px;
            padding: 0.65rem 1rem;
            font-size: 0.9rem;
            font-weight: 700;
            text-decoration: none;
            border: 1px solid var(--journal-border);
            background: var(--journal-surface);
            color: var(--journal-text);
            box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
        }

        .journal-action-btn:hover {
            color: var(--journal-text);
            background: var(--journal-soft);
        }

        .journal-action-btn--primary {
            background: var(--bs-primary, #0d6efd);
            border-color: var(--bs-primary, #0d6efd);
            color: var(--bs-white, #fff);
        }

        .journal-action-btn--primary:hover {
            color: var(--bs-white, #fff);
            background: #0a58ca;
            border-color: #0a58ca;
            filter: none;
        }

        .journal-action-btn:disabled {
            cursor: not-allowed;
            opacity: 0.6;
            box-shadow: none;
        }

        .journal-action-btn--primary:disabled,
        .journal-action-btn--primary:disabled:hover {
            background: var(--bs-secondary, #6c757d);
            border-color: var(--bs-secondary, #6c757d);
            color: var(--bs-white, #fff);
        }

        .journal-form-card {
            border: 1px solid var(--journal-border);
            border-radius: 8px;
            background: var(--journal-surface);
            padding: 1.35rem;
        }

        .journal-form-section-title {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            color: var(--journal-text);
            font-size: 1rem;
            font-weight: 800;
            margin-bottom: 1.2rem;
        }

        .journal-section-icon {
            width: 30px;
            height: 30px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--bs-info-bg-subtle, #cff4fc);
            color: var(--bs-info-text-emphasis, #055160);
            font-size: 0.8rem;
        }

        .journal-form-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1rem;
        }

        .journal-field--full {
            grid-column: 1 / -1;
        }

        .journal-label {
            display: block;
            color: var(--journal-text);
            font-size: 0.86rem;
            font-weight: 700;
            margin-bottom: 0.45rem;
        }

        .journal-control {
            width: 100%;
            min-height: 44px;
            border: 1px solid var(--journal-border) !important;
            border-radius: 8px !important;
            background: var(--journal-soft);
            color: var(--journal-text);
            padding: 0.62rem 0.85rem;
            font-size: 0.92rem;
            box-shadow: none !important;
        }

        .journal-control:focus {
            border-color: var(--bs-primary, #0d6efd) !important;
            background: var(--journal-surface);
            box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb, 13, 110, 253), 0.15) !important;
            outline: none;
        }

        .journal-lines-frame {
            border: 1px solid var(--journal-border);
            border-radius: 8px;
            overflow: hidden;
            margin-top: 1.5rem;
        }

        .journal-lines-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 1rem 1.1rem;
            background: var(--journal-surface);
        }

        .journal-lines-title {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            color: var(--journal-text);
            font-size: 1rem;
            font-weight: 800;
            margin: 0;
        }

        .journal-table-wrap {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .journal-editor-table {
            width: 100%;
            min-width: 1080px;
            margin: 0;
            border-collapse: separate;
            border-spacing: 0;
        }

        .journal-editor-table th {
            background: var(--journal-soft);
            color: var(--journal-muted);
            font-size: 0.78rem;
            font-weight: 700;
            padding: 0.85rem;
            border-top: 1px solid var(--journal-border);
            border-bottom: 1px solid var(--journal-border);
            white-space: nowrap;
        }

        .journal-editor-table td {
            padding: 0.75rem;
            border-bottom: 1px solid var(--journal-border);
            vertical-align: middle;
        }

        .journal-add-line-row td {
            background: var(--bs-info-bg-subtle, var(--journal-soft));
            padding: 0;
        }

        .journal-add-line-btn {
            width: 100%;
            min-height: 44px;
            border: 0;
            background: transparent;
            color: var(--bs-info-text-emphasis, var(--journal-text));
            font-weight: 800;
            text-align: left;
            padding: 0.75rem 1.1rem;
        }

        .journal-remove-line {
            width: 34px;
            height: 34px;
            border: 0;
            background: transparent;
            color: var(--journal-muted);
            border-radius: 8px;
        }

        .journal-remove-line:hover:not(:disabled) {
            background: var(--bs-danger-bg-subtle, #f8d7da);
            color: var(--bs-danger, #dc3545);
        }

        .journal-money-debit {
            color: var(--bs-success, #198754);
            font-weight: 800;
        }

        .journal-money-credit {
            color: var(--bs-danger, #dc3545);
            font-weight: 800;
        }

        .journal-totals-row td {
            background: var(--journal-soft);
            font-weight: 800;
        }

        .journal-difference-row td {
            background: var(--bs-danger-bg-subtle, #f8d7da);
            color: var(--bs-danger-text-emphasis, #842029);
            font-weight: 800;
        }

        .journal-difference-row.is-balanced td {
            background: var(--bs-success-bg-subtle, #d1e7dd);
            color: var(--bs-success-text-emphasis, #0f5132);
        }

        .journal-form-message {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            min-height: 42px;
            border: 1px solid var(--bs-warning-border-subtle, #ffecb5);
            border-radius: 8px;
            background: var(--bs-warning-bg-subtle, #fff3cd);
            color: var(--bs-warning-text-emphasis, #664d03);
            font-size: 0.9rem;
            font-weight: 700;
            padding: 0.65rem 0.9rem;
            margin-top: 1rem;
        }

        .journal-form-message.is-valid {
            border-color: var(--bs-success-border-subtle, #a3cfbb);
            background: var(--bs-success-bg-subtle, #d1e7dd);
            color: var(--bs-success-text-emphasis, #0f5132);
        }

        .journal-form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            flex-wrap: wrap;
            padding-top: 1.25rem;
        }

        @media (max-width: 767.98px) {
            .journal-create-head,
            .journal-lines-head,
            .journal-form-actions {
                flex-direction: column;
                align-items: stretch;
            }

            .journal-action-btn,
            .journal-form-actions .journal-action-btn {
                width: 100%;
            }

            .journal-form-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>

    <div class="container-fluid app-bg journal-create-page">
        <div class="page-shell">
            <div class="journal-create-head">
                <div>
                    <div class="journal-breadcrumb">Finance / Journal Entries / New</div>
                    <h1 class="journal-page-title">Manual Journal Entry</h1>
                </div>

                <a href="{{ route('journal_entries.index') }}" class="journal-action-btn">
                    <i class="fas fa-arrow-left"></i>
                    Back to List
                </a>
            </div>

            <form action="{{ route('journal_entries.store') }}" method="POST" id="journalEntryForm">
                @csrf

                <div class="journal-form-card">
                    <div class="journal-form-section-title">
                        <span class="journal-section-icon"><i class="fas fa-info"></i></span>
                        Entry Header
                    </div>

                    <div class="journal-form-grid">
                        <div>
                            <label class="journal-label">Date <span class="text-danger">*</span></label>
                            <input type="date" name="date" class="journal-control" value="{{ old('date', date('Y-m-d')) }}" required>
                        </div>

                        <div>
                            <label class="journal-label">Source</label>
                            <input type="text" class="journal-control" value="Manual" disabled>
                        </div>

                        <div>
                            <label class="journal-label">Default Cost Center</label>
                            <select class="journal-control" id="defaultCostCenter">
                                <option value="">None</option>
                                @foreach($costCenters as $cc)
                                    <option value="{{ $cc->id }}">{{ $cc->code ? $cc->code . ' - ' : '' }}{{ $cc->title }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div>
                            <label class="journal-label">Party Type</label>
                            <select name="party_type" class="journal-control" id="partyTypeSelect">
                                <option value="">None</option>
                                @foreach($partyTypes as $partyType)
                                    <option value="{{ $partyType }}" @selected(old('party_type') === $partyType)>{{ ucfirst($partyType) }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div id="partyLookupWrap">
                            <label class="journal-label">Party</label>
                            <select name="party_id"
                                    class="journal-control"
                                    id="partyIdSelect"
                                    data-selected-id="{{ old('party_id') }}"
                                    data-selected-label="{{ old('party_name') }}"
                                    data-selected-ref="{{ old('party_ref') }}">
                                <option value="">Select party</option>
                            </select>
                            <input type="hidden" name="party_name" id="partyNameInput" value="{{ old('party_name') }}">
                            <input type="hidden" name="party_ref" id="partyRefInput" value="{{ old('party_ref') }}">
                        </div>

                        <div id="companyNameWrap" class="d-none">
                            <label class="journal-label">Company Name</label>
                            <input type="text"
                                   class="journal-control"
                                   id="companyNameInput"
                                   value="{{ old('party_name') }}"
                                   placeholder="Optional company name">
                        </div>

                        <div class="journal-field--full" id="invoiceWrap" style="display:none;">
                            <label class="journal-label">Invoices</label>
                            <select name="student_invoice_id" class="journal-control" id="studentInvoiceSelect">
                                <option value="">None</option>
                                @foreach($studentInvoices as $invoice)
                                    @php
                                        $invoiceTotal = $invoice->net_price ?? $invoice->total_price ?? 0;
                                    @endphp
                                    <option value="{{ $invoice->id }}" @selected((string) old('student_invoice_id') === (string) $invoice->id)>
                                        {{ $invoice->invoice_number }} - {{ number_format((float) $invoiceTotal, 2) }} - {{ str($invoice->payment_status ?? 'unknown')->headline() }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="journal-field--full">
                            <label class="journal-label">Description <span class="text-danger">*</span></label>
                            <input type="text"
                                   name="description"
                                   class="journal-control"
                                   value="{{ old('description') }}"
                                   placeholder="Entry memo..."
                                   required>
                        </div>
                    </div>

                    <div class="journal-lines-frame">
                        <div class="journal-lines-head">
                            <h6 class="journal-lines-title">
                                <span class="journal-section-icon"><i class="fas fa-list"></i></span>
                                Entry Lines
                            </h6>
                        </div>

                        <div class="journal-table-wrap">
                            <table class="journal-editor-table" id="linesTable">
                                <thead>
                                    <tr>
                                        <th style="width: 50%">Account <span class="text-danger">*</span></th>
                                        <th style="width: 22%">Cost Center</th>
                                        <th style="width: 13%">Debit</th>
                                        <th style="width: 13%">Credit</th>
                                        <th style="width: 2%"></th>
                                    </tr>
                                </thead>

                                <tbody id="linesContainer">
                                    @for($i = 0; $i < 2; $i++)
                                        <tr class="line-row">
                                            <td>
                                                <select name="lines[{{ $i }}][account_id]" class="journal-control account-select" required>
                                                    <option value="" disabled selected>Select Account</option>
                                                    @foreach($accounts as $account)
                                                        @php
                                                            $requiresCostCenter = str_contains(strtolower((string) $account->account_type), 'revenue')
                                                                || str_contains(strtolower((string) $account->account_type), 'income')
                                                                || str_contains(strtolower((string) $account->account_type), 'expense')
                                                                || str_contains(strtolower((string) $account->account_type), 'cost')
                                                                || str_contains(strtolower((string) ($account->account_subtype ?? '')), 'revenue')
                                                                || str_contains(strtolower((string) ($account->account_subtype ?? '')), 'income')
                                                                || str_contains(strtolower((string) ($account->account_subtype ?? '')), 'expense')
                                                                || str_contains(strtolower((string) ($account->account_subtype ?? '')), 'cost');
                                                        @endphp
                                                        <option value="{{ $account->id }}" data-requires-cost-center="{{ $requiresCostCenter ? '1' : '0' }}">{{ $account->code }} - {{ $account->title }}</option>
                                                    @endforeach
                                                </select>
                                            </td>

                                            <td>
                                                <select name="lines[{{ $i }}][cost_center_id]" class="journal-control cost-center-select">
                                                    <option value="">None</option>
                                                    @foreach($costCenters as $cc)
                                                        <option value="{{ $cc->id }}">{{ $cc->code ? $cc->code . ' - ' : '' }}{{ $cc->title }}</option>
                                                    @endforeach
                                                </select>
                                            </td>

                                            <td>
                                                <input type="number" name="lines[{{ $i }}][debit]" class="journal-control debit-input" step="0.01" min="0" value="0">
                                            </td>

                                            <td>
                                                <input type="number" name="lines[{{ $i }}][credit]" class="journal-control credit-input" step="0.01" min="0" value="0">
                                            </td>

                                            <td class="text-center">
                                                <button type="button" class="journal-remove-line remove-line" disabled title="Remove line">
                                                    <i class="fas fa-xmark"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    @endfor

                                    <tr class="journal-add-line-row">
                                        <td colspan="5">
                                            <button type="button" class="journal-add-line-btn" id="addLineBtn">
                                                <i class="fas fa-plus me-2"></i>Add Line
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>

                                <tfoot>
                                    <tr class="journal-totals-row">
                                        <td colspan="2" class="text-end">Total</td>
                                        <td class="text-end journal-money-debit" id="totalDebitText">0.00</td>
                                        <td class="text-end journal-money-credit" id="totalCreditText">0.00</td>
                                        <td></td>
                                    </tr>
                                    <tr class="journal-difference-row">
                                        <td colspan="5" class="text-center">
                                            Difference: <span id="differenceText">0.00</span>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>

                    <div class="journal-form-message" id="journalBalanceMessage" role="status" aria-live="polite">
                        <i class="fas fa-circle-exclamation"></i>
                        Enter balanced debit and credit totals before saving.
                    </div>

                    <div class="journal-form-actions">
                        <a href="{{ route('journal_entries.index') }}" class="journal-action-btn">Cancel</a>

                        <button type="submit"
                                class="journal-action-btn journal-action-btn--primary"
                                id="submitBtn"
                                aria-describedby="journalBalanceMessage"
                                disabled>
                            <i class="fas fa-save"></i>
                            Save Journal Entry
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const container = document.getElementById('linesContainer');
            const addBtn = document.getElementById('addLineBtn');
            const form = document.getElementById('journalEntryForm');
            const totalDebitText = document.getElementById('totalDebitText');
            const totalCreditText = document.getElementById('totalCreditText');
            const differenceText = document.getElementById('differenceText');
            const defaultCostCenter = document.getElementById('defaultCostCenter');
            const submitBtn = document.getElementById('submitBtn');
            const balanceMessage = document.getElementById('journalBalanceMessage');
            const differenceRow = document.querySelector('.journal-difference-row');
            const partyTypeSelect = document.getElementById('partyTypeSelect');
            const partyIdSelect = document.getElementById('partyIdSelect');
            const partyLookupWrap = document.getElementById('partyLookupWrap');
            const companyNameWrap = document.getElementById('companyNameWrap');
            const companyNameInput = document.getElementById('companyNameInput');
            const partyNameInput = document.getElementById('partyNameInput');
            const partyRefInput = document.getElementById('partyRefInput');

            let rowIdx = 2;

            function updateRemoveButtons() {
                const rows = container.querySelectorAll('.line-row');
                container.querySelectorAll('.remove-line').forEach(button => {
                    button.disabled = rows.length <= 2;
                });
            }

            function syncLineCostCenter(row) {
                const accountSelect = row ? row.querySelector('.account-select') : null;
                const costCenterSelect = row ? row.querySelector('.cost-center-select') : null;

                if (!accountSelect || !costCenterSelect) {
                    return;
                }

                const selectedOption = accountSelect.options[accountSelect.selectedIndex];
                const requiresCostCenter = selectedOption?.dataset.requiresCostCenter === '1';
                costCenterSelect.required = requiresCostCenter;
                costCenterSelect.setCustomValidity('');
            }

            function syncAllLineCostCenters() {
                container.querySelectorAll('.line-row').forEach(syncLineCostCenter);
            }

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

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

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

                totalDebitText.textContent = totalDebit.toFixed(2);
                totalCreditText.textContent = totalCredit.toFixed(2);
                const difference = Math.abs(totalDebit - totalCredit);
                const isBalanced = difference <= 0.001;
                const hasAmount = totalDebit > 0 || totalCredit > 0;

                differenceText.textContent = difference.toFixed(2);
                submitBtn.disabled = !isBalanced || !hasAmount;
                differenceRow.classList.toggle('is-balanced', isBalanced);
                balanceMessage.classList.toggle('is-valid', isBalanced && hasAmount);

                if (!hasAmount) {
                    balanceMessage.innerHTML = '<i class="fas fa-circle-exclamation"></i> Enter debit and credit amounts before saving.';
                } else if (!isBalanced) {
                    balanceMessage.innerHTML = '<i class="fas fa-circle-exclamation"></i> Debit and credit totals must match before saving.';
                } else {
                    balanceMessage.innerHTML = '<i class="fas fa-circle-check"></i> Debit and credit totals are balanced.';
                }
            }

            function makeLineRow(index) {
                const newRow = document.createElement('tr');
                newRow.className = 'line-row';
                newRow.innerHTML = `
                    <td>
                        <select name="lines[${index}][account_id]" class="journal-control account-select" required>
                            <option value="" disabled selected>Select Account</option>
                            @foreach($accounts as $account)
                                @php
                                    $requiresCostCenter = str_contains(strtolower((string) $account->account_type), 'revenue')
                                        || str_contains(strtolower((string) $account->account_type), 'income')
                                        || str_contains(strtolower((string) $account->account_type), 'expense')
                                        || str_contains(strtolower((string) $account->account_type), 'cost')
                                        || str_contains(strtolower((string) ($account->account_subtype ?? '')), 'revenue')
                                        || str_contains(strtolower((string) ($account->account_subtype ?? '')), 'income')
                                        || str_contains(strtolower((string) ($account->account_subtype ?? '')), 'expense')
                                        || str_contains(strtolower((string) ($account->account_subtype ?? '')), 'cost');
                                @endphp
                                <option value="{{ $account->id }}" data-requires-cost-center="{{ $requiresCostCenter ? '1' : '0' }}">{{ $account->code }} - {{ $account->title }}</option>
                            @endforeach
                        </select>
                    </td>
                    <td>
                        <select name="lines[${index}][cost_center_id]" class="journal-control cost-center-select">
                            <option value="">None</option>
                            @foreach($costCenters as $cc)
                                <option value="{{ $cc->id }}">{{ $cc->code ? $cc->code . ' - ' : '' }}{{ $cc->title }}</option>
                            @endforeach
                        </select>
                    </td>
                    <td>
                        <input type="number" name="lines[${index}][debit]" class="journal-control debit-input" step="0.01" min="0" value="0">
                    </td>
                    <td>
                        <input type="number" name="lines[${index}][credit]" class="journal-control credit-input" step="0.01" min="0" value="0">
                    </td>
                    <td class="text-center">
                        <button type="button" class="journal-remove-line remove-line" title="Remove line">
                            <i class="fas fa-xmark"></i>
                        </button>
                    </td>
                `;

                if (defaultCostCenter.value) {
                    newRow.querySelector('.cost-center-select').value = defaultCostCenter.value;
                }

                syncLineCostCenter(newRow);

                return newRow;
            }

            function escapeHtml(value) {
                return String(value ?? '')
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#039;');
            }

            function selectedPartyLabel() {
                if (!partyIdSelect || !partyIdSelect.value) {
                    return '';
                }

                const selected = partyIdSelect.options[partyIdSelect.selectedIndex];

                return selected ? (selected.dataset.label || selected.textContent.trim()) : '';
            }

            function syncPartyName() {
                if (!partyNameInput || !partyTypeSelect) {
                    return;
                }

                if (partyTypeSelect.value === 'company') {
                    partyNameInput.value = (companyNameInput?.value || '').trim();
                    if (partyRefInput) {
                        partyRefInput.value = '';
                    }
                    return;
                }

                const selected = partyIdSelect && partyIdSelect.value
                    ? partyIdSelect.options[partyIdSelect.selectedIndex]
                    : null;

                partyNameInput.value = selected ? (selected.dataset.label || selected.textContent.trim()) : '';
                if (partyRefInput) {
                    partyRefInput.value = selected ? (selected.dataset.ref || '') : '';
                }
            }

            function ensureSelectedPartyOption() {
                if (!partyIdSelect) {
                    return;
                }

                const selectedId    = partyIdSelect.dataset.selectedId    || '';
                const selectedLabel = partyIdSelect.dataset.selectedLabel || '';
                const selectedRef   = partyIdSelect.dataset.selectedRef   || '';

                if (!selectedId || !selectedLabel || Array.from(partyIdSelect.options).some(option => String(option.value) === String(selectedId))) {
                    return;
                }

                const option = new Option(selectedLabel, selectedId, true, true);
                option.dataset.label = selectedLabel;
                option.dataset.ref   = selectedRef;
                partyIdSelect.appendChild(option);
            }

            // ── Invoice section helpers ──────────────────────────────────────
            const invoiceWrap   = document.getElementById('invoiceWrap');
            const invoiceSelect = document.getElementById('studentInvoiceSelect');
            const invoiceUrl    = '{{ route('payments.student_invoices') }}';

            function toggleInvoiceSection() {
                if (!invoiceWrap) return;
                const hasPartyType = partyTypeSelect && partyTypeSelect.value;
                invoiceWrap.style.display = hasPartyType ? '' : 'none';
            }

            function clearInvoiceSelect() {
                if (!invoiceSelect) return;
                invoiceSelect.innerHTML = '<option value="">None</option>';
            }

            function loadInvoicesForParty() {
                if (!invoiceSelect || !partyTypeSelect || !partyTypeSelect.value) {
                    clearInvoiceSelect();
                    return;
                }

                let partyId = '';
                if (partyTypeSelect.value !== 'company' && window.jQuery && jQuery.fn.select2) {
                    const data = $(partyIdSelect).select2('data');
                    partyId = data && data[0] ? data[0].id : '';
                } else {
                    partyId = partyIdSelect ? partyIdSelect.value : '';
                }

                syncPartyName();

                if (partyTypeSelect.value !== 'company' && !partyId) {
                    clearInvoiceSelect();
                    return;
                }

                if (partyTypeSelect.value === 'company' && !(partyNameInput?.value || '').trim()) {
                    clearInvoiceSelect();
                    return;
                }

                invoiceSelect.innerHTML = '<option value="">Loading…</option>';

                const params = new URLSearchParams({
                    party_type: partyTypeSelect.value,
                    party_id: partyTypeSelect.value === 'company' ? '' : partyId,
                    party_name: partyNameInput?.value || '',
                    party_ref: partyRefInput?.value || '',
                });

                fetch(invoiceUrl + '?' + params.toString(), {
                    headers: { 'Accept': 'application/json' },
                })
                    .then(r => r.json())
                    .then(function (data) {
                        const options = Array.isArray(data) ? data : (data.options || []);
                        const html = ['<option value="">None</option>'];
                        options.forEach(function (inv) {
                            const label = inv.label
                                || (inv.invoice_number + ' - ' + Number(inv.net_price || 0).toFixed(2) + ' - Remaining: ' + Number(inv.remaining || 0).toFixed(2));
                            html.push('<option value="' + inv.id + '">' + label + '</option>');
                        });
                        invoiceSelect.innerHTML = html.join('');
                    })
                    .catch(function () {
                        invoiceSelect.innerHTML = '<option value="">None</option>';
                    });
            }

            function setPartyUi(type) {
                const isCompany = type === 'company';

                companyNameWrap?.classList.toggle('d-none', !isCompany);
                partyLookupWrap?.classList.toggle('d-none', isCompany || !type);

                if (isCompany) {
                    if (partyIdSelect) {
                        partyIdSelect.value = '';
                    }
                } else if (companyNameInput) {
                    companyNameInput.value = '';
                }

                syncPartyName();
            }

            function loadPartyOptions(type, selectedId = '') {
                if (!partyIdSelect || !type || type === 'company') {
                    if (partyIdSelect) {
                        partyIdSelect.innerHTML = '<option value="">Select party</option>';
                        if (window.jQuery && jQuery.fn.select2) {
                            try { $(partyIdSelect).select2('destroy'); } catch(e) {}
                        }
                    }
                    syncPartyName();
                    return;
                }

                // Select2 AJAX — supports searching all records for any party type
                if (window.jQuery && jQuery.fn.select2) {
                    try { $(partyIdSelect).select2('destroy'); } catch(e) {}

                    const placeholders = {
                        student: 'Search student by name or ID…',
                        teacher: 'Search teacher by name or ID…',
                        staff:   'Search staff by name or ID…',
                    };
                    const placeholder = placeholders[type] || 'Search…';

                    // Inject pre-selected option so the current value is visible
                    if (selectedId) {
                        const selectedLabel = partyIdSelect.dataset.selectedLabel || selectedId;
                        const selectedRef   = partyIdSelect.dataset.selectedRef   || '';
                        partyIdSelect.innerHTML = `<option value="${escapeHtml(selectedId)}" data-label="${escapeHtml(selectedLabel)}" data-ref="${escapeHtml(selectedRef)}" selected>${escapeHtml(selectedLabel)}</option>`;
                    } else {
                        partyIdSelect.innerHTML = `<option value="">${placeholder}</option>`;
                    }

                    $(partyIdSelect).select2({
                        placeholder: placeholder,
                        allowClear: true,
                        minimumInputLength: 0,
                        ajax: {
                            url: '{{ route('payments.parties') }}',
                            dataType: 'json',
                            delay: 300,
                            data: function (params) {
                                return { type: type, search: params.term || '', limit: 50 };
                            },
                            processResults: function (payload) {
                                return {
                                    results: (payload.options || []).map(item => ({
                                        id: item.id,
                                        text: item.label,
                                        reference: item.reference || '',
                                    })),
                                };
                            },
                            cache: true,
                        },
                    });

                    $(partyIdSelect).on('select2:select select2:clear', function () {
                        const chosen = $(partyIdSelect).select2('data')[0];
                        if (chosen && chosen.id) {
                            partyIdSelect.dataset.selectedLabel = chosen.text || '';
                            partyIdSelect.dataset.selectedRef   = chosen.reference || '';
                        }
                        syncPartyName();
                        loadInvoicesForParty();
                    });

                    syncPartyName();
                    return;
                }

                // Fallback — plain fetch when Select2 is unavailable
                const selectedLabel = partyIdSelect.dataset.selectedLabel || '';
                partyIdSelect.innerHTML = '<option value="">Loading...</option>';

                fetch(`{{ route('payments.parties') }}?type=${encodeURIComponent(type)}&limit=50`)
                    .then(response => response.json())
                    .then(payload => {
                        const options = ['<option value="">Select party</option>'];
                        let hasSelectedOption = false;

                        (payload.options || []).forEach(item => {
                            const selected = String(item.id) === String(selectedId) ? 'selected' : '';
                            hasSelectedOption = hasSelectedOption || selected !== '';
                            options.push(`<option value="${escapeHtml(item.id)}" data-label="${escapeHtml(item.label)}" data-ref="${escapeHtml(item.reference || '')}" ${selected}>${escapeHtml(item.label)}</option>`);
                        });

                        if (selectedId && selectedLabel && !hasSelectedOption) {
                            options.push(`<option value="${escapeHtml(selectedId)}" data-label="${escapeHtml(selectedLabel)}" data-ref="${escapeHtml(partyIdSelect.dataset.selectedRef || '')}" selected>${escapeHtml(selectedLabel)}</option>`);
                        }

                        partyIdSelect.innerHTML = options.join('');
                        syncPartyName();
                    })
                    .catch(() => {
                        partyIdSelect.innerHTML = '<option value="">Select party</option>';
                        ensureSelectedPartyOption();
                        syncPartyName();
                    });
            }

            container.addEventListener('input', function(e) {
                if (!e.target.classList.contains('debit-input') && !e.target.classList.contains('credit-input')) {
                    return;
                }

                const row = e.target.closest('tr');

                if (e.target.classList.contains('debit-input') && parseFloat(e.target.value) > 0) {
                    row.querySelector('.credit-input').value = 0;
                }

                if (e.target.classList.contains('credit-input') && parseFloat(e.target.value) > 0) {
                    row.querySelector('.debit-input').value = 0;
                }

                updateTotals();
            });

            addBtn.addEventListener('click', function() {
                const addRow = container.querySelector('.journal-add-line-row');
                container.insertBefore(makeLineRow(rowIdx), addRow);
                rowIdx++;
                updateRemoveButtons();
                syncAllLineCostCenters();
            });

            defaultCostCenter.addEventListener('change', function() {
                container.querySelectorAll('.cost-center-select').forEach(select => {
                    if (!select.value) {
                        select.value = defaultCostCenter.value;
                    }
                });
            });

            if (partyTypeSelect) {
                partyTypeSelect.addEventListener('change', function() {
                    setPartyUi(partyTypeSelect.value);
                    loadPartyOptions(partyTypeSelect.value);
                    toggleInvoiceSection();
                    clearInvoiceSelect();
                    loadInvoicesForParty();
                });
            }

            if (partyIdSelect) {
                partyIdSelect.addEventListener('change', function () {
                    syncPartyName();
                    loadInvoicesForParty();
                });
            }

            if (companyNameInput) {
                companyNameInput.addEventListener('input', function () {
                    syncPartyName();
                    loadInvoicesForParty();
                });
            }

            container.addEventListener('click', function(e) {
                if (!e.target.closest('.remove-line')) {
                    return;
                }

                if (container.querySelectorAll('.line-row').length <= 2) {
                    return;
                }

                e.target.closest('.line-row').remove();
                updateTotals();
                updateRemoveButtons();
            });

            container.addEventListener('change', function(e) {
                if (e.target.classList.contains('account-select')) {
                    syncLineCostCenter(e.target.closest('.line-row'));
                }

                if (e.target.classList.contains('cost-center-select')) {
                    e.target.setCustomValidity('');
                }
            });

            form.addEventListener('submit', function(e) {
                const totalDebit = parseFloat(totalDebitText.textContent);
                const totalCredit = parseFloat(totalCreditText.textContent);

                syncAllLineCostCenters();

                if (Math.abs(totalDebit - totalCredit) > 0.001 || totalDebit === 0) {
                    e.preventDefault();
                    updateTotals();
                    return;
                }

                const missingCostCenter = Array.from(container.querySelectorAll('.line-row')).some(row => {
                    const costCenterSelect = row.querySelector('.cost-center-select');

                    return costCenterSelect?.required && !costCenterSelect.value;
                });

                if (missingCostCenter) {
                    e.preventDefault();
                    const firstMissing = Array.from(container.querySelectorAll('.cost-center-select'))
                        .find(select => select.required && !select.value);
                    firstMissing?.setCustomValidity('Cost Center is required for revenue and expense lines.');
                    firstMissing?.reportValidity();
                }
            });

            updateTotals();
            updateRemoveButtons();
            syncAllLineCostCenters();
            setPartyUi(partyTypeSelect?.value || '');
            loadPartyOptions(partyTypeSelect?.value || '', partyIdSelect?.dataset.selectedId || '');
            toggleInvoiceSection();
            loadInvoicesForParty();
        });
    </script>
@endsection