@extends('dashboard.layouts.app')

@section('content')
    @php
        $balanceLabel = optional($account)->account_nature === 'credit' ? 'Credit' : 'Debit';
        $hasAccount = !empty($account);
        $filterOptions = $filterOptions ?? [
            'costCenters' => collect(),
            'partyTypes' => collect(),
        ];
        $selectedPartyType = request('party_type');
        $selectedPartyId = request('party_id');
        $selectedPartyName = request('party_name');
    @endphp

    <style>
        .ledger-page {
            padding: 0 1rem 4rem;
            direction: ltr;
        }

        .ledger-page .ledger-shell {
            display: flex;
            flex-direction: column;
            gap: 1.35rem;
        }

        .ledger-page .ledger-topline {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .ledger-page .ledger-breadcrumb {
            color: #64748b;
            font-size: .85rem;
            margin-bottom: .45rem;
        }

        .ledger-page .ledger-heading {
            color: #0f172a;
            font-size: 1.7rem;
            font-weight: 900;
            line-height: 1.25;
            margin: 0;
        }

        .ledger-page .ledger-export-btn {
            min-height: 44px;
            border: 1px solid #dbe3ef;
            border-radius: 8px;
            background: #fff;
            color: #0f172a;
            font-weight: 700;
            padding: .55rem 1rem;
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            box-shadow: 0 6px 16px rgba(15, 23, 42, .04);
        }

        .ledger-page .ledger-card {
            border: 1px solid #e5eaf1;
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
            overflow: hidden;
        }

        .ledger-page .ledger-filter-card {
            padding: 1rem;
        }

        .ledger-page .ledger-filter-grid {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: .75rem;
            align-items: end;
        }

        .ledger-page .ledger-filter-account {
            grid-column: span 2;
        }

        .ledger-page .ledger-filter-wide {
            grid-column: span 2;
        }

        .ledger-page .ledger-filter-toggles {
            grid-column: span 2;
        }

        .ledger-page .ledger-filter-actions {
            grid-column: span 2;
        }

        .ledger-page .ledger-label {
            display: inline-block;
            margin-bottom: .4rem;
            color: #64748b;
            font-size: .82rem;
            font-weight: 700;
        }

        .ledger-page .ledger-input {
            width: 100%;
            min-height: 44px;
            border: 1px solid #dbe3ef !important;
            border-radius: 8px !important;
            background: #fff;
            color: #0f172a;
            box-shadow: none !important;
        }

        .ledger-page .ledger-toggle-group {
            min-height: 44px;
            display: flex;
            align-items: center;
            gap: .85rem;
            flex-wrap: wrap;
        }

        .ledger-page .ledger-actions {
            min-height: 44px;
            display: flex;
            align-items: center;
            gap: .55rem;
        }

        .ledger-page .ledger-actions .btn {
            min-height: 44px;
            border-radius: 8px;
            padding-inline: 1rem;
            white-space: nowrap;
        }

        .ledger-page .ledger-account-head {
            padding: 1.55rem 1.65rem 1.35rem;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 1rem;
            border-bottom: 1px solid #e7edf5;
        }

        .ledger-page .ledger-account-code {
            color: #64748b;
            font-size: .9rem;
            font-weight: 700;
            margin-bottom: .35rem;
        }

        .ledger-page .ledger-account-title {
            color: #0f172a;
            font-size: 1.45rem;
            font-weight: 900;
            margin-bottom: .35rem;
            display: flex;
            align-items: baseline;
            gap: .55rem;
            flex-wrap: wrap;
        }

        .ledger-page .ledger-account-meta {
            color: #64748b;
            font-size: .88rem;
        }

        .ledger-page .ledger-account-title .ledger-account-meta {
            font-weight: 700;
            margin-bottom: 0;
        }

        .ledger-page .ledger-summary-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: .85rem;
            padding: 1.35rem 1.65rem;
            background: #fbfcfe;
        }

        .ledger-page .ledger-summary-item {
            border: 1px solid #dfe7f1;
            border-radius: 8px;
            background: #f8fafc;
            padding: 1rem 1.1rem;
            min-width: 0;
        }

        .ledger-page .ledger-summary-item.is-closing {
            background: #102235;
            border-color: #102235;
            color: #fff;
        }

        .ledger-page .ledger-summary-label {
            color: #64748b;
            font-size: .82rem;
            font-weight: 700;
            margin-bottom: .65rem;
        }

        .ledger-page .is-closing .ledger-summary-label {
            color: #dbe7f4;
        }

        .ledger-page .ledger-summary-value {
            direction: ltr;
            text-align: right;
            font-size: 1.2rem;
            font-weight: 900;
            line-height: 1.25;
            overflow-wrap: anywhere;
        }

        .ledger-page .ledger-summary-value.is-debit {
            color: #047857;
        }

        .ledger-page .ledger-summary-value.is-credit {
            color: #dc2626;
        }

        .ledger-page .is-closing .ledger-summary-value {
            color: #fff;
        }

        .ledger-page .ledger-table-wrap {
            overflow: auto;
        }

        .ledger-page .ledger-table {
            width: 100%;
            min-width: 1920px;
            margin: 0;
            border-collapse: separate;
            border-spacing: 0;
            font-size: .9rem;
        }

        .ledger-page .ledger-table th {
            position: sticky;
            top: 0;
            z-index: 2;
            background: #f8fafc;
            color: #64748b;
            border-bottom: 1px solid #dfe7f1;
            font-size: .78rem;
            font-weight: 800;
            padding: .85rem 1rem;
            white-space: nowrap;
        }

        .ledger-page .ledger-table td {
            color: #0f172a;
            border-bottom: 1px solid #edf2f7;
            padding: 1rem;
            vertical-align: middle;
            white-space: nowrap;
        }

        .ledger-page .ledger-table tbody tr:hover td {
            background: #f8fafc;
        }

        .ledger-page .ledger-table .ledger-desc {
            min-width: 280px;
            white-space: normal;
        }

        .ledger-page .ledger-muted {
            color: #64748b;
            font-size: .82rem;
            margin-top: .25rem;
        }

        .ledger-page .ledger-amount {
            direction: ltr;
            text-align: right;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
            font-variant-numeric: tabular-nums;
        }

        .ledger-page .ledger-balance {
            font-weight: 900;
        }

        .ledger-page .ledger-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            background: #eef2f7;
            color: #0f172a;
            font-weight: 800;
            padding: .3rem .55rem;
            line-height: 1.1;
        }

        .ledger-page .ledger-pill.is-payment {
            background: #dff3f2;
            color: #036b72;
        }

        .ledger-page .ledger-pill.is-purchase {
            background: #fde8e5;
            color: #c0392b;
        }

        .ledger-page .ledger-pill.is-sale,
        .ledger-page .ledger-pill.is-student {
            background: #def7e8;
            color: #047857;
        }

        .ledger-page .ledger-table .is-debit {
            color: #047857;
        }

        .ledger-page .ledger-table .is-credit {
            color: #dc2626;
        }

        .ledger-page .ledger-opening-row td {
            background: #f8fafc;
            font-weight: 800;
        }

        .ledger-page .ledger-empty-state {
            padding: 2rem 1rem;
        }

        .ledger-page .ledger-pagination {
            padding: 1rem 1.25rem;
            border-top: 1px solid #edf2f7;
            background: #fff;
        }

        @media (max-width: 1199px) {
            .ledger-page .ledger-filter-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .ledger-page .ledger-filter-account,
            .ledger-page .ledger-filter-wide,
            .ledger-page .ledger-filter-toggles,
            .ledger-page .ledger-filter-actions {
                grid-column: span 1;
            }

            .ledger-page .ledger-actions {
                justify-content: flex-start;
            }

            .ledger-page .ledger-summary-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 575px) {
            .ledger-page {
                padding-inline: .5rem;
            }

            .ledger-page .ledger-filter-grid,
            .ledger-page .ledger-summary-grid {
                grid-template-columns: 1fr;
            }

            .ledger-page .ledger-filter-account,
            .ledger-page .ledger-filter-wide,
            .ledger-page .ledger-filter-toggles,
            .ledger-page .ledger-filter-actions {
                grid-column: span 1;
            }

            .ledger-page .ledger-account-head,
            .ledger-page .ledger-summary-grid {
                padding-inline: 1rem;
            }

            .ledger-page .ledger-actions {
                flex-direction: column;
                align-items: stretch;
            }
        }
    </style>

    <div class="container-fluid ledger-page">
        <div class="ledger-shell">
            <div class="ledger-topline">
                <button class="ledger-export-btn" type="button">
                    <iconify-icon icon="lucide:download"></iconify-icon>
                    <span>Export</span>
                </button>

                <div class="text-start">
                    <div class="ledger-breadcrumb">Finance / General Ledger</div>
                    <h5 class="ledger-heading">Ledger View</h5>
                </div>
            </div>

            <form method="GET" action="{{ route('chart_of_accounts.ledgers.index') }}" class="ledger-card ledger-filter-card" id="ledgerFilterForm">
                <div class="ledger-filter-grid">
                    <div class="ledger-filter-account">
                        <label class="ledger-label" for="ledger_account_search">Account filter</label>
                        <input
                            type="search"
                            id="ledger_account_search"
                            name="account_search"
                            value="{{ request('account_search') }}"
                            class="form-control ledger-input js-ledger-account-search mb-2"
                            placeholder="Search account code or title"
                        >
                        <select id="ledger_account_id" name="account_id" class="form-select ledger-input js-ledger-account-select">
                            <option value="" data-search="all accounts" @selected(!$hasAccount)>All Accounts</option>
                            @forelse ($accounts as $ledgerAccount)
                                <option
                                    value="{{ $ledgerAccount->id }}"
                                    data-search="{{ strtolower($ledgerAccount->code . ' ' . $ledgerAccount->title) }}"
                                    @selected($hasAccount && (int) $ledgerAccount->id === (int) $account->id)
                                >
                                    {{ $ledgerAccount->code }} - {{ $ledgerAccount->title }}
                                </option>
                            @empty
                            <option value="">No accounts available</option>
                            @endforelse
                        </select>
                    </div>

                    <div>
                        <label class="ledger-label" for="from_date">From Date</label>
                        <input type="date" id="from_date" name="from_date" value="{{ request('from_date') }}" class="form-control ledger-input">
                    </div>

                    <div>
                        <label class="ledger-label" for="to_date">To Date</label>
                        <input type="date" id="to_date" name="to_date" value="{{ request('to_date') }}" class="form-control ledger-input">
                    </div>

                    <div>
                        <label class="ledger-label" for="cost_center_id">Cost Center</label>
                        <select id="cost_center_id" name="cost_center_id" class="form-select ledger-input">
                            <option value="">All Cost Centers</option>
                            @foreach ($filterOptions['costCenters'] as $costCenter)
                                <option value="{{ $costCenter->id }}" @selected((string) request('cost_center_id') === (string) $costCenter->id)>
                                    {{ $costCenter->code ? $costCenter->code . ' - ' : '' }}{{ $costCenter->title }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="ledger-label" for="party_type">Party Type</label>
                        <select id="party_type" name="party_type" class="form-select ledger-input js-ledger-party-type">
                            <option value="">All Party Types</option>
                            @foreach ($filterOptions['partyTypes'] as $partyType)
                                <option value="{{ $partyType }}" @selected(request('party_type') === $partyType)>
                                    {{ ucfirst($partyType) }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="ledger-filter-wide">
                        <label class="ledger-label" for="party_id">Party</label>
                        <select
                            id="party_id"
                            name="party_id"
                            class="form-select ledger-input js-ledger-party-select"
                            data-selected-id="{{ $selectedPartyId }}"
                            data-selected-label="{{ $selectedPartyName }}"
                        >
                            <option value="">All Parties</option>
                        </select>
                        <input type="hidden" name="party_name" id="party_name" value="{{ $selectedPartyName }}">
                    </div>

                    <div class="ledger-filter-wide d-none js-ledger-company-wrap">
                        <label class="ledger-label" for="ledger_company_name">Party</label>
                        <input
                            type="text"
                            id="ledger_company_name"
                            class="form-control ledger-input js-ledger-company-name"
                            value="{{ $selectedPartyType === 'company' ? $selectedPartyName : '' }}"
                            placeholder="Enter company name"
                        >
                    </div>

                    <div class="ledger-filter-toggles">
                        <div class="form-check form-switch mb-0">
                            <input type="hidden" name="include_children" value="0">
                            <input class="form-check-input" type="checkbox" name="include_children" id="include_children" value="1" @checked($includeChildren)>
                            <label class="form-check-label" for="include_children">Include child accounts</label>
                        </div>
                        <div class="form-check form-switch mb-0">
                            <input type="hidden" name="posted_only" value="0">
                            <input class="form-check-input" type="checkbox" name="posted_only" id="posted_only" value="1" @checked($postedOnly)>
                            <label class="form-check-label" for="posted_only">Posted entries only</label>
                        </div>
                    </div>

                    <div class="ledger-filter-actions ledger-actions">
                        <button class="btn btn-primary" type="submit">Apply</button>
                        <a class="btn btn-outline-secondary" href="{{ route('chart_of_accounts.ledgers.index') }}">Reset</a>
                    </div>
                </div>
            </form>

            @if ($accounts->isNotEmpty())
                <div class="ledger-card">
                    <div class="ledger-account-head">
                        <div class="text-start">
                            <div class="ledger-account-code">{{ $hasAccount ? $account->code : 'All Accounts' }}</div>
                            <div class="ledger-account-title">
                                <span>{{ $hasAccount ? $account->title : 'All Accounts' }}</span>
                                <span class="ledger-account-meta">
                                    @if ($hasAccount)
                                        {{ $accountTypes[$account->account_type] ?? 'Not set' }} &middot; {{ $accountNatures[$account->account_nature] ?? 'Not set' }}
                                    @else
                                        All account movements
                                    @endif
                                    @if (false)
                                        {{ $accountTypes[$account->account_type] ?? 'Not set' }} · {{ $accountNatures[$account->account_nature] ?? 'Not set' }}
                                    @elseif (false)
                                        All account movements
                                    @endif
                                </span>
                            </div>
                            @if (false)
                            <div class="ledger-account-meta">
                                {{ $accountTypes[$account->account_type] ?? 'Not set' }} · {{ $accountNatures[$account->account_nature] ?? 'Not set' }}
                            </div>
                            @endif
                        </div>
                        <a class="btn btn-outline-secondary" href="{{ route('chart_of_accounts.index') }}">Back</a>
                    </div>

                    <div class="ledger-summary-grid">
                        <div class="ledger-summary-item is-closing">
                            <div class="ledger-summary-label">Closing Balance</div>
                            <div class="ledger-summary-value">{{ number_format($closingBalance, 2) }} {{ $balanceLabel }}</div>
                        </div>
                        <div class="ledger-summary-item">
                            <div class="ledger-summary-label">Total Credit</div>
                            <div class="ledger-summary-value is-credit">{{ number_format($totalCredit, 2) }}</div>
                        </div>
                        <div class="ledger-summary-item">
                            <div class="ledger-summary-label">Total Debit</div>
                            <div class="ledger-summary-value is-debit">{{ number_format($totalDebit, 2) }}</div>
                        </div>
                        <div class="ledger-summary-item">
                            <div class="ledger-summary-label">Opening Balance</div>
                            <div class="ledger-summary-value">{{ number_format($openingBalance, 2) }}</div>
                        </div>
                    </div>

                    <div class="ledger-table-wrap">
                        <table class="ledger-table">
                            <thead>
                                <tr>
                                    <th>Posting Date</th>
                                    <th>Account</th>
                                    <th class="ledger-amount">Debit</th>
                                    <th class="ledger-amount">Credit</th>
                                    <th class="ledger-amount">Balance</th>
                                    <th>Voucher Type</th>
                                    <th>Voucher No</th>
                                    <th>Against Account</th>
                                    <th>Party Type</th>
                                    <th>Party</th>
                                    <th>Cost Center</th>
                                    <th>Supplier Invoice No</th>
                                    <th>Remarks</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="ledger-opening-row">
                                    <td>-</td>
                                    <td>Opening Balance</td>
                                    <td class="ledger-amount">{{ $openingRow['debit'] ? number_format($openingRow['debit'], 2) : '-' }}</td>
                                    <td class="ledger-amount">{{ $openingRow['credit'] ? number_format($openingRow['credit'], 2) : '-' }}</td>
                                    <td class="ledger-amount ledger-balance">{{ number_format($openingRow['balance'], 2) }}</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>Opening Balance</td>
                                </tr>

                                @forelse ($rows as $row)
                                    <tr>
                                        <td>{{ optional($row['posting_date'] ?? $row['date'])->format('Y-m-d') ?: '-' }}</td>
                                        <td>
                                            @if (!empty($row['account_code']) && !empty($row['account_title']))
                                                <strong>{{ $row['account_code'] }} - {{ $row['account_title'] }}</strong>
                                            @else
                                                <strong>{{ $row['account_title'] ?? $row['account_code'] ?? '-' }}</strong>
                                            @endif
                                        </td>
                                        <td class="ledger-amount is-debit">{{ $row['debit'] ? number_format($row['debit'], 2) : '-' }}</td>
                                        <td class="ledger-amount is-credit">{{ $row['credit'] ? number_format($row['credit'], 2) : '-' }}</td>
                                        <td class="ledger-amount ledger-balance">{{ number_format($row['balance'], 2) }}</td>
                                        <td>
                                            @php
                                                $voucherType = $row['voucher_type'] ?? '-';
                                                $voucherClass = str_contains($voucherType, 'payment') ? 'is-payment' : (str_contains($voucherType, 'purchase') ? 'is-purchase' : (str_contains($voucherType, 'invoice') || str_contains($voucherType, 'sale') ? 'is-sale' : ''));
                                            @endphp
                                            <span class="ledger-pill {{ $voucherClass }}">{{ $voucherType !== '-' ? str($voucherType)->headline() : '-' }}</span>
                                        </td>
                                        <td>{{ $row['voucher_no'] ?? '-' }}</td>
                                        <td>{{ $row['against_account'] ?? '-' }}</td>
                                        <td>{{ ($row['party_type'] ?? '-') !== '-' ? str($row['party_type'])->headline() : '-' }}</td>
                                        <td>{{ $row['party'] ?? '-' }}</td>
                                        <td>
                                            @if (($row['cost_center'] ?? '-') !== '-')
                                                <span class="ledger-pill">{{ $row['cost_center'] }}</span>
                                            @else
                                                -
                                            @endif
                                        </td>
                                        <td>{{ $row['supplier_invoice_no'] ?? '-' }}</td>
                                        <td class="ledger-desc">{{ $row['remarks'] ?? ($row['description'] ?? '-') }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="13" class="text-center text-secondary py-4">No transactions found for this account.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    @if (method_exists($rows, 'links') && $rows->hasPages())
                        <div class="ledger-pagination">
                            {{ $rows->withQueryString()->links() }}
                        </div>
                    @endif
                </div>
            @else
                <div class="ledger-card ledger-empty-state text-center text-secondary">
                    No accounts available.
                </div>
            @endif
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const accountSelect = document.querySelector('.js-ledger-account-select');
            const accountSearch = document.querySelector('.js-ledger-account-search');
            const partyTypeSelect = document.querySelector('.js-ledger-party-type');
            const partySelect = document.querySelector('.js-ledger-party-select');
            const partyNameInput = document.getElementById('party_name');
            const companyWrap = document.querySelector('.js-ledger-company-wrap');
            const companyNameInput = document.querySelector('.js-ledger-company-name');
            const form = document.getElementById('ledgerFilterForm');

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

            accountSelect.addEventListener('change', function () {
                form.submit();
            });

            if (accountSearch) {
                const updateOptions = () => {
                    const needle = accountSearch.value.trim().toLowerCase();
                    const selectedValue = accountSelect.value;

                    Array.from(accountSelect.options).forEach(option => {
                        const haystack = (option.dataset.search || option.textContent || '').toLowerCase();
                        const matches = !needle || haystack.includes(needle);
                        option.hidden = !matches && option.value !== selectedValue;
                    });
                };

                accountSearch.addEventListener('input', updateOptions);
                updateOptions();
            }

            const escapeHtml = value => String(value ?? '')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');

            const partyNameForFilter = option => {
                if (!option || !option.value) {
                    return '';
                }

                const label = option.dataset.label || option.textContent.trim();
                const ref = option.dataset.ref || '';
                const refSuffix = ref ? ` (${ref})` : '';

                return refSuffix && label.endsWith(refSuffix)
                    ? label.slice(0, -refSuffix.length)
                    : label;
            };

            const setPartyNameFromSelection = () => {
                if (!partyNameInput || !partySelect) {
                    return;
                }

                partyNameInput.value = partyNameForFilter(partySelect.options[partySelect.selectedIndex]);
            };

            const setPartyUi = () => {
                if (!partyTypeSelect || !partySelect || !companyWrap) {
                    return;
                }

                const isCompany = partyTypeSelect.value === 'company';
                companyWrap.classList.toggle('d-none', !isCompany);
                partySelect.closest('.ledger-filter-wide').classList.toggle('d-none', isCompany);

                if (isCompany) {
                    partySelect.value = '';
                    if (partyNameInput && companyNameInput) {
                        partyNameInput.value = companyNameInput.value.trim();
                    }
                } else if (companyNameInput) {
                    companyNameInput.value = '';
                    setPartyNameFromSelection();
                }
            };

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

                const fallbackLabel = partySelect.dataset.selectedLabel || `Selected #${selectedId}`;
                const option = new Option(fallbackLabel, selectedId, true, true);
                option.dataset.label = fallbackLabel;
                partySelect.appendChild(option);
            };

            const loadPartyOptions = (type, selectedId = '') => {
                if (!partySelect) {
                    return;
                }

                if (!type || type === 'company') {
                    partySelect.innerHTML = '<option value="">All Parties</option>';
                    if (partyNameInput && type !== 'company') {
                        partyNameInput.value = '';
                    }
                    return;
                }

                partySelect.innerHTML = '<option value="">Loading...</option>';
                ensureSelectedPartyOption(selectedId);

                fetch(`{{ route('payments.parties') }}?type=${encodeURIComponent(type)}&limit=100`)
                    .then(response => response.json())
                    .then(payload => {
                        const options = ['<option value="">All Parties</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 && !hasSelectedOption && partySelect.dataset.selectedLabel) {
                            options.push(`<option value="${escapeHtml(selectedId)}" data-label="${escapeHtml(partySelect.dataset.selectedLabel)}" selected>${escapeHtml(partySelect.dataset.selectedLabel)}</option>`);
                        }

                        partySelect.innerHTML = options.join('');
                        if (selectedId) {
                            partySelect.value = String(selectedId);
                        }
                        setPartyNameFromSelection();
                    })
                    .catch(() => {
                        partySelect.innerHTML = '<option value="">All Parties</option>';
                        ensureSelectedPartyOption(selectedId);
                        setPartyNameFromSelection();
                    });
            };

            if (partyTypeSelect && partySelect) {
                const selectedPartyId = partySelect.dataset.selectedId || '';
                setPartyUi();
                loadPartyOptions(partyTypeSelect.value, selectedPartyId);

                partyTypeSelect.addEventListener('change', function () {
                    if (partyNameInput) {
                        partyNameInput.value = '';
                    }
                    if (companyNameInput) {
                        companyNameInput.value = '';
                    }
                    setPartyUi();
                    loadPartyOptions(this.value, '');
                });

                partySelect.addEventListener('change', setPartyNameFromSelection);
            }

            if (companyNameInput && partyNameInput) {
                companyNameInput.addEventListener('input', function () {
                    if (partyTypeSelect && partyTypeSelect.value === 'company') {
                        partyNameInput.value = this.value.trim();
                    }
                });
            }
        });
    </script>
@endsection