@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @php
        $initialHasSelection = (bool) ($auto_execute ?? false);
        $selectedLayout = (string) ($layout ?? '2');
    @endphp

    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid pt-3 pb-4">

        @include('components.alert')

        <style>
            .gl-selected-box {
                min-height: 34px;
                max-height: 70px;
                overflow-y: auto;
                display: flex;
                flex-wrap: wrap;
                align-content: flex-start;
                gap: 4px;
                padding: 4px 6px;
                border: 1px solid #dee2e6;
                border-radius: 0.375rem;
                background: #f8f9fa;
            }

            .gl-selected-chip {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                height: 26px;
                padding: 0 7px;
                border: 1px solid #dee2e6;
                border-radius: 0.375rem;
                background: #fff;
                font-size: 11px;
                white-space: nowrap;
            }

            .gl-selected-chip .remove-gl-account {
                border: 0;
                background: transparent;
                color: #dc3545;
                padding: 0;
                line-height: 1;
                font-size: 10px;
            }

            .gl-selected-empty {
                align-self: center;
                padding-left: 2px;
            }
        </style>

        <div class="card shadow-sm mb-3">
            <div class="card-body py-3 px-3">
                <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
                    <div>
                        <h5 class="mb-1">
                            G/L Account Line Items
                        </h5>

                        <p class="text-sm text-muted mb-0">
                            General Ledger Cost Analysis · Line item detail
                        </p>
                    </div>
                </div>
            </div>
        </div>

        {{-- Selection Criteria --}}
        <div class="card shadow-sm mb-3">
            <div class="card-header py-2 px-3 d-flex align-items-center justify-content-between">
                <div>
                    <div class="fw-bold text-sm">
                        <i class="fas fa-sliders-h me-1"></i> Selection Criteria
                    </div>
                    <div class="text-xs text-muted">Period follows the selection in Topnav.</div>
                </div>
                <button type="button" class="btn btn-sm btn-outline-secondary mb-0 px-2 py-1" data-bs-toggle="collapse"
                    data-bs-target="#selectionBody" aria-expanded="true">
                    <i class="fas fa-chevron-up"></i>
                </button>
            </div>

            <div class="collapse show" id="selectionBody">
                <div class="card-body py-3">
                    <form id="filterForm" method="GET" action="{{ URL::to('glbiaya/detail') }}">
                        <input type="hidden" name="layout" id="filter_layout" value="{{ $selectedLayout }}">

                        <div class="row g-2 align-items-end">
                            <div class="col-xl-4 col-lg-5 col-md-12">
                                <label class="form-label text-xs fw-bold mb-1" for="filter_gl_account_search">
                                    G/L Accounts
                                </label>

                                <div class="position-relative">
                                    <input type="text"
                                        class="form-control form-control-sm font-monospace"
                                        id="filter_gl_account_search"
                                        placeholder="Cari lalu pilih beberapa G/L..."
                                        autocomplete="off"
                                        value="">

                                    <input type="hidden"
                                        id="filter_gl_account"
                                        name="gl_account"
                                        value="{{ $gl_account ?? '' }}">

                                    <div id="gl_account_results"
                                        class="list-group position-absolute start-0 end-0 shadow-sm d-none"
                                        style="z-index: 1080; max-height: 280px; overflow-y: auto; top: calc(100% + 2px);">
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-3 col-lg-3 col-md-6">
                                <label class="form-label text-xs fw-bold mb-1" for="filter_posting_date_from">Posting Date
                                    From</label>
                                <input type="date" class="form-control form-control-sm" id="filter_posting_date_from"
                                    name="posting_date_from" min="{{ $global_period['start_date'] ?? '' }}"
                                    max="{{ $global_period['end_date'] ?? '' }}"
                                    value="{{ $posting_date_from ?? ($global_period['start_date'] ?? '') }}">
                            </div>

                            <div class="col-xl-3 col-lg-3 col-md-6">
                                <label class="form-label text-xs fw-bold mb-1" for="filter_posting_date_to">Posting Date
                                    To</label>
                                <input type="date" class="form-control form-control-sm" id="filter_posting_date_to"
                                    name="posting_date_to" min="{{ $global_period['start_date'] ?? '' }}"
                                    max="{{ $global_period['end_date'] ?? '' }}"
                                    value="{{ $posting_date_to ?? ($global_period['end_date'] ?? '') }}">
                            </div>

                            <div class="col-xl-2 col-lg-12 col-md-12">
                                <div class="d-flex gap-2">
                                    <button type="button" class="btn btn-sm btn-primary flex-grow-1 mb-0" id="btnExecute">
                                        <i class="fas fa-play me-1"></i> Execute
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary mb-0 px-3" id="btnReset">
                                        <i class="fas fa-undo me-1"></i> Reset
                                    </button>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="d-flex align-items-center justify-content-between mb-1">
                                    <div class="text-xs fw-bold text-muted">Selected G/L Accounts</div>
                                    <div class="text-xs text-muted" id="selected_gl_count">0 selected</div>
                                </div>
                                <div id="gl_account_selected" class="gl-selected-box">
                                    <span class="text-xs text-muted gl-selected-empty">Belum ada G/L Account dipilih.</span>
                                </div>
                            </div>
                        </div>
                    </form>


                </div>
            </div>
        </div>

        {{-- Report Header --}}
        <div class="card shadow-sm mb-3">
            <div class="card-header py-2 px-3">
                <span class="fw-bold text-sm">Report Header</span>
            </div>
            <div class="card-body p-0">
                <div class="row g-0">
                    <div class="col-xl-3 col-md-6 p-3 border-end border-bottom">
                        <div class="text-xs text-uppercase text-muted fw-bold mb-1">G/L Account</div>
                        <div class="fw-bold text-sm text-truncate" id="reportGlAccount">
                            {{ $gl_account ?: 'All G/L Accounts' }}</div>
                        <div class="text-xs text-muted text-truncate" id="reportGlText">{{ $gl_long_text ?? '' }}</div>
                    </div>
                    <div class="col-xl-2 col-md-6 p-3 border-end border-bottom">
                        <div class="text-xs text-uppercase text-muted fw-bold mb-1">Period</div>
                        <div class="fw-bold text-sm" id="reportPeriodValue">
                            {{ $global_period['poper'] ?? ($poper ?? '-') }}
                        </div>
                        <div class="text-xs text-muted">{{ $global_period['label'] ?? 'Global Period' }}</div>
                    </div>
                    <div class="col-xl-4 col-md-6 p-3 border-end border-bottom">
                        <div class="text-xs text-uppercase text-muted fw-bold mb-1">Posting Date</div>
                        <div class="fw-bold text-sm" id="reportPostingDateLabel">All Posting Dates</div>
                        <div class="text-xs text-muted">Date range</div>
                    </div>
                    <div class="col-xl-3 col-md-6 p-3 border-bottom">
                        <div class="text-xs text-uppercase text-muted fw-bold mb-1">Number of Line Items</div>
                        <div class="fw-bold text-sm text-muted" id="summaryLineCount">
                            <span class="spinner-border spinner-border-sm me-1" role="status"></span> Loading...
                        </div>
                        <div class="text-xs text-muted">Loaded asynchronously</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Lazy-loaded totals --}}
        <div class="row g-2 mb-3">
            <div class="col-xl-4 col-md-12 col-12">
                <div class="card shadow-sm h-100">
                    <div class="card-body py-2 px-3">
                        <div class="d-flex align-items-start justify-content-between mb-2">
                            <div>
                                <div class="text-xs text-uppercase text-muted fw-bold lh-1">Document Amount</div>
                            </div>
                            <i class="fas fa-file-invoice text-secondary text-sm mt-1"></i>
                        </div>
                        <div id="summaryDocAmount">
                            <div class="text-muted text-sm py-1">
                                <span class="spinner-border spinner-border-sm me-1" role="status"></span>
                                Loading...
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4 col-md-6 col-12">
                <div class="card shadow-sm h-100">
                    <div class="card-body py-2 px-3">
                        <div class="d-flex align-items-start justify-content-between mb-2">
                            <div>
                                <div class="text-xs text-uppercase text-muted fw-bold lh-1">Local Amount</div>
                            </div>
                            <i class="fas fa-building text-secondary text-sm mt-1"></i>
                        </div>
                        <div id="summaryLocalAmount">
                            <div class="text-muted text-sm py-1">
                                <span class="spinner-border spinner-border-sm me-1" role="status"></span>
                                Loading...
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4 col-md-6 col-12">
                <div class="card shadow-sm h-100">
                    <div class="card-body py-2 px-3">
                        <div class="d-flex align-items-start justify-content-between mb-2">
                            <div>
                                <div class="text-xs text-uppercase text-muted fw-bold lh-1">Global Amount</div>
                            </div>
                            <i class="fas fa-globe text-secondary text-sm mt-1"></i>
                        </div>
                        <div id="summaryGlobalAmount">
                            <div class="text-muted text-sm py-1">
                                <span class="spinner-border spinner-border-sm me-1" role="status"></span>
                                Loading...
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Line item grid - infinite lazy scroll --}}
        <div class="card shadow-sm mb-3">
            <div class="card-header py-2 px-2 d-flex flex-wrap align-items-center gap-2">
                <button type="button" class="btn btn-sm btn-outline-secondary mb-0" id="btnRefresh"
                    title="Refresh line items">
                    <i class="fas fa-sync-alt"></i>
                </button>

                <button type="button" class="btn btn-sm btn-outline-success mb-0" id="btnExportExcel"
                    title="Export Excel">
                    <i class="fas fa-file-excel me-1"></i> Spreadsheet
                </button>
                <button type="button" class="btn btn-sm btn-outline-danger mb-0" id="btnExportPdf" title="Export PDF">
                    <i class="fas fa-file-pdf me-1"></i> PDF
                </button>
                <button type="button" class="btn btn-sm btn-outline-secondary mb-0" id="btnPrint" title="Print">
                    <i class="fas fa-print me-1"></i> Print
                </button>

                <div class="vr d-none d-md-block"></div>

                <button type="button"
                    class="btn btn-sm btn-outline-primary mb-0 layout-mode-btn {{ ($layout ?? '2') === '1' ? 'active' : '' }}"
                    data-layout="1">
                    <i class="fas fa-file-invoice-dollar me-1"></i> Finance
                </button>
                <button type="button"
                    class="btn btn-sm btn-outline-primary mb-0 layout-mode-btn {{ ($layout ?? '2') === '2' ? 'active' : '' }}"
                    data-layout="2">
                    <i class="fas fa-coins me-1"></i> Biaya
                </button>

                <button type="button" class="btn btn-sm btn-outline-secondary mb-0" id="btnColumns"
                    data-bs-toggle="modal" data-bs-target="#columnChooserModal" title="Choose and reorder columns">
                    <i class="fas fa-columns me-1"></i> Columns
                </button>

                <button type="button" class="btn btn-sm btn-outline-secondary mb-0" id="btnColumnFilters"
                    data-bs-toggle="modal" data-bs-target="#columnFilterModal" title="Filter by column">
                    <i class="fas fa-filter me-1"></i> Filter
                    <span class="badge bg-primary ms-1 d-none" id="columnFilterBadge">0</span>
                </button>

                <div class="ms-auto d-flex align-items-center gap-2">
                    <label for="lineItemSearch" class="text-xs text-muted mb-0 d-none d-md-inline">Find</label>
                    <input type="search" class="form-control form-control-sm" id="lineItemSearch"
                        placeholder="Search all columns..." autocomplete="off">
                </div>
            </div>

            <div class="table-responsive overflow-auto" id="lineItemScrollContainer" style="max-height: 65vh;">
                <table class="table table-sm table-bordered table-striped table-hover align-middle mb-0 w-100"
                    id="list_detail">
                    <thead class="bg-light sticky-top">
                        <tr id="lineItemHeader"></tr>
                    </thead>
                    <tbody id="lineItemBody">
                        <tr id="lineItemIdleRow">
                            <td colspan="17" class="text-center text-muted py-4">
                                Select criteria and choose Execute.
                            </td>
                        </tr>
                    </tbody>
                </table>

                <div id="lazyLoadSentinel" class="py-3 text-center d-none bg-white border-top">
                    <span class="spinner-border spinner-border-sm me-2" role="status"></span>
                    Loading more line items...
                </div>
            </div>

            <div
                class="card-footer py-2 px-3 d-flex flex-wrap align-items-center justify-content-between gap-2 text-sm text-muted">
                <div>
                    <i class="fas fa-check-circle me-1"></i>
                    <span id="loadedLineCount">No line items loaded</span>
                    <span class="ms-2"
                        id="reportStatusPeriod">{{ $filter_period_label ? '· ' . $filter_period_label : '' }}</span>
                </div>
                <div>
                    Amount: <strong id="summaryStatusBalance" class="text-muted">-</strong>
                </div>
            </div>
        </div>

        {{-- Column chooser --}}
        <div class="modal fade" id="columnChooserModal" tabindex="-1" aria-labelledby="columnChooserModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <div>
                            <h6 class="modal-title mb-0" id="columnChooserModalLabel">Table Columns</h6>
                            <div class="text-xs text-muted">Show, hide, or drag columns to change their order.</div>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div id="columnChooserList" class="list-group"></div>
                    </div>
                    <div class="modal-footer d-flex justify-content-between">
                        <button type="button" class="btn btn-sm btn-outline-secondary mb-0" id="btnResetColumns">
                            <i class="fas fa-undo me-1"></i> Reset Default
                        </button>
                        <button type="button" class="btn btn-sm btn-primary mb-0" data-bs-dismiss="modal">
                            Done
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Column filters --}}
        <div class="modal fade" id="columnFilterModal" tabindex="-1" aria-labelledby="columnFilterModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <div>
                            <h6 class="modal-title mb-0" id="columnFilterModalLabel">Column Filters</h6>
                            <div class="text-xs text-muted">Filter line items by one or more columns.</div>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        <div class="row g-2 align-items-end mb-3">
                            <div class="col-md-4">
                                <label for="columnFilterKey" class="form-label text-xs fw-bold mb-1">Column</label>
                                <select class="form-select form-select-sm" id="columnFilterKey"></select>
                            </div>
                            <div class="col-md-3">
                                <label for="columnFilterOperator" class="form-label text-xs fw-bold mb-1">Condition</label>
                                <select class="form-select form-select-sm" id="columnFilterOperator"></select>
                            </div>
                            <div class="col-md-3">
                                <label for="columnFilterValue" class="form-label text-xs fw-bold mb-1">Value</label>
                                <input type="text" class="form-control form-control-sm" id="columnFilterValue"
                                    autocomplete="off" placeholder="Filter value">
                            </div>
                            <div class="col-md-2 d-grid">
                                <button type="button" class="btn btn-sm btn-outline-primary mb-0" id="btnAddColumnFilter">
                                    <i class="fas fa-plus me-1"></i> Add
                                </button>
                            </div>
                        </div>

                        <div class="border rounded">
                            <div class="px-3 py-2 border-bottom bg-light d-flex justify-content-between align-items-center">
                                <span class="text-sm fw-bold">Active Filters</span>
                                <span class="text-xs text-muted" id="columnFilterCountText">0 filters</span>
                            </div>
                            <div id="activeColumnFilters" class="p-2">
                                <div class="text-center text-muted text-sm py-3">No column filters.</div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer d-flex justify-content-between">
                        <button type="button" class="btn btn-sm btn-outline-danger mb-0" id="btnClearColumnFilters">
                            <i class="fas fa-times me-1"></i> Clear All
                        </button>
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-sm btn-outline-secondary mb-0" data-bs-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-sm btn-primary mb-0" id="btnApplyColumnFilters">
                                <i class="fas fa-filter me-1"></i> Apply Filter
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            const baseUrl = 'glbiaya';
            const detailDataUrl = '{{ URL::to('glbiaya/detaildata') }}';
            const summaryUrl = '{{ URL::to('glbiaya/detailsummary') }}';
            const glAccountsUrl = '{{ URL::to('glbiaya/glaccounts') }}';
            const detailUrl = '{{ URL::to('glbiaya/detail') }}';
            const exportBaseUrl = '{{ URL::to('glbiaya/export') }}';
            const initialHasSelection = @json($initialHasSelection);
            const initialGlAccounts = @json($gl_accounts_selected ?? []);
            const globalPeriod = @json($global_period ?? []);
            const columnPreferenceScope = @json(auth()->check() ? 'user_' . auth()->id() : 'guest');
            const glAccountTextMap = {};
            const $glSearchInput = $('#filter_gl_account_search');
            const $glAccount = $('#filter_gl_account');
            const $glResults = $('#gl_account_results');
            const $glSelected = $('#gl_account_selected');
            let selectedGlAccounts = Array.isArray(initialGlAccounts)
                ? initialGlAccounts.map(function(value) {
                    return String(value || '').trim();
                }).filter(Boolean)
                : [];
            let glSearchTimer = null;
            let glSearchRequest = null;
            let currentGlSearchItems = [];
            let pendingGlAccountIds = new Set();

            function hideGlResults() {
                currentGlSearchItems = [];
                pendingGlAccountIds.clear();
                $glResults.empty().addClass('d-none');
            }

            function renderSelectedGlAccounts() {
                const count = selectedGlAccounts.length;
                $('#selected_gl_count').text(
                    count.toLocaleString('id-ID') + (count === 1 ? ' selected' : ' selected')
                );

                if (!count) {
                    $glSelected.html(
                        '<span class="text-xs text-muted gl-selected-empty">Belum ada G/L Account dipilih.</span>'
                    );
                    return;
                }

                const html = selectedGlAccounts.map(function(id) {
                    const description = glAccountTextMap[id] || '';
                    const title = description ? id + ' - ' + description : id;

                    return `
                        <span class="gl-selected-chip" title="${escapeHtml(title)}">
                            <span class="font-monospace">${escapeHtml(id)}</span>
                            <button type="button"
                                class="remove-gl-account"
                                data-gl-account="${escapeHtml(id)}"
                                title="Hapus ${escapeHtml(id)}">
                                <i class="fas fa-times"></i>
                            </button>
                        </span>
                    `;
                }).join('');

                $glSelected.html(html);
            }

            function syncSelectedGlAccounts() {
                selectedGlAccounts = Array.from(new Set(
                    selectedGlAccounts.map(function(value) {
                        return String(value || '').trim();
                    }).filter(Boolean)
                ));

                $glAccount.val(selectedGlAccounts.join(','));
                renderSelectedGlAccounts();
            }

            function addGlAccounts(items) {
                if (!Array.isArray(items) || !items.length) return;

                items.forEach(function(item) {
                    const id = String(item.id || '').trim();
                    if (!id) return;

                    if (!selectedGlAccounts.includes(id)) {
                        selectedGlAccounts.push(id);
                    }

                    glAccountTextMap[id] = item.gl_long_text || '';
                });

                $glSearchInput.val('').trigger('focus');
                syncSelectedGlAccounts();
                hideGlResults();
            }

            function addPendingGlAccounts() {
                const selectedItems = currentGlSearchItems.filter(function(item) {
                    const id = String(item.id || '').trim();
                    return id && pendingGlAccountIds.has(id) && !selectedGlAccounts.includes(id);
                });

                addGlAccounts(selectedItems);
            }

            function renderGlResults(items) {
                currentGlSearchItems = Array.isArray(items) ? items : [];
                $glResults.empty();

                if (!currentGlSearchItems.length) {
                    pendingGlAccountIds.clear();
                    $glResults.html(`
                        <div class="list-group-item text-muted text-sm py-2">
                            G/L Account tidak ditemukan
                        </div>
                    `).removeClass('d-none');
                    return;
                }

                const selectableIds = currentGlSearchItems
                    .map(function(item) {
                        return String(item.id || '').trim();
                    })
                    .filter(function(id) {
                        return id && !selectedGlAccounts.includes(id);
                    });

                pendingGlAccountIds = new Set(
                    Array.from(pendingGlAccountIds).filter(function(id) {
                        return selectableIds.includes(id);
                    })
                );

                const pendingCount = pendingGlAccountIds.size;
                const selectableCount = selectableIds.length;
                const allChecked = selectableCount > 0 && selectableIds.every(function(id) {
                    return pendingGlAccountIds.has(id);
                });

                const $toolbar = $('<div>', {
                    class: 'list-group-item bg-light py-2 px-3 sticky-top'
                });

                $toolbar.html(`
                    <div class="d-flex align-items-center justify-content-between gap-2 flex-nowrap">
                        <div class="form-check mb-0 flex-grow-1">
                            <input class="form-check-input" type="checkbox" id="glSelectAllVisible"
                                ${allChecked ? 'checked' : ''} ${selectableCount === 0 ? 'disabled' : ''}>
                            <label class="form-check-label text-sm fw-bold text-nowrap" for="glSelectAllVisible">
                                Pilih semua hasil (${selectableCount})
                            </label>
                        </div>
                        <button type="button"
                            class="btn btn-sm btn-primary mb-0 px-2 py-1 text-nowrap flex-shrink-0"
                            id="btnAddSelectedGlResults"
                            style="width:auto; min-width:0;"
                            ${pendingCount === 0 ? 'disabled' : ''}>
                            Tambahkan Pilihan (${pendingCount})
                        </button>
                    </div>
                `);

                $toolbar.find('#glSelectAllVisible').on('change', function() {
                    if (this.checked) {
                        selectableIds.forEach(function(id) {
                            pendingGlAccountIds.add(id);
                        });
                    } else {
                        selectableIds.forEach(function(id) {
                            pendingGlAccountIds.delete(id);
                        });
                    }

                    renderGlResults(currentGlSearchItems);
                });

                $toolbar.find('#btnAddSelectedGlResults').on('click', function(event) {
                    event.preventDefault();
                    addPendingGlAccounts();
                });

                $glResults.append($toolbar);

                currentGlSearchItems.forEach(function(item) {
                    const id = String(item.id || '').trim();
                    const description = item.gl_long_text || '';
                    const isSelected = selectedGlAccounts.includes(id);
                    const isPending = pendingGlAccountIds.has(id);

                    const $row = $('<label>', {
                        class: 'list-group-item list-group-item-action py-2 px-3 mb-0' + (isSelected ? ' bg-light' : ''),
                        style: 'cursor:' + (isSelected ? 'default' : 'pointer')
                    });

                    $row.html(`
                        <div class="d-flex align-items-start gap-2">
                            <input type="checkbox" class="form-check-input mt-1 gl-result-checkbox"
                                value="${escapeHtml(id)}"
                                ${isSelected || isPending ? 'checked' : ''}
                                ${isSelected ? 'disabled' : ''}>
                            <div class="flex-grow-1 min-w-0">
                                <div class="d-flex justify-content-between align-items-center gap-2">
                                    <div class="fw-bold font-monospace text-sm">${escapeHtml(id)}</div>
                                    ${isSelected ? '<span class="badge bg-success">Sudah dipilih</span>' : ''}
                                </div>
                                <div class="text-xs text-muted">${escapeHtml(description)}</div>
                            </div>
                        </div>
                    `);

                    if (!isSelected) {
                        $row.find('.gl-result-checkbox').on('change', function() {
                            if (this.checked) {
                                pendingGlAccountIds.add(id);
                            } else {
                                pendingGlAccountIds.delete(id);
                            }

                            renderGlResults(currentGlSearchItems);
                        });
                    }

                    $glResults.append($row);
                });

                $glResults.removeClass('d-none');
            }

            function searchGlAccount(keyword) {
                if (glSearchRequest && glSearchRequest.readyState !== 4) {
                    glSearchRequest.abort();
                }

                $glResults.html(`
                    <div class="list-group-item text-muted text-sm py-2">
                        <span class="spinner-border spinner-border-sm me-2" role="status"></span>
                        Mencari G/L Account...
                    </div>
                `).removeClass('d-none');

                glSearchRequest = $.ajax({
                    url: glAccountsUrl,
                    type: 'GET',
                    dataType: 'json',
                    data: {
                        q: keyword
                    }
                }).done(function(response) {
                    const items = response && response.success && Array.isArray(response.data)
                        ? response.data
                        : [];

                    renderGlResults(items);
                }).fail(function(xhr, status) {
                    if (status === 'abort') return;

                    $glResults.html(`
                        <div class="list-group-item text-danger text-sm py-2">
                            Gagal mengambil G/L Account
                        </div>
                    `).removeClass('d-none');
                });
            }

            $glSearchInput.on('input', function() {
                const keyword = $.trim($(this).val());

                window.clearTimeout(glSearchTimer);

                if (glSearchRequest && glSearchRequest.readyState !== 4) {
                    glSearchRequest.abort();
                }

                if (keyword.length < 2) {
                    hideGlResults();
                    return;
                }

                glSearchTimer = window.setTimeout(function() {
                    searchGlAccount(keyword);
                }, 300);
            });

            $glSearchInput.on('keydown', function(event) {
                if (event.key === 'Escape') {
                    hideGlResults();
                    return;
                }

                if (event.key === 'Enter' && !$glResults.hasClass('d-none')) {
                    event.preventDefault();

                    if (pendingGlAccountIds.size > 0) {
                        addPendingGlAccounts();
                    }
                }
            });

            $(document).on('mousedown.glAccountAutocomplete', function(event) {
                if (!$(event.target).closest('#filter_gl_account_search, #gl_account_results, #gl_account_selected').length) {
                    hideGlResults();
                }
            });

            $glSelected.on('click', '.remove-gl-account', function() {
                const id = String($(this).data('gl-account') || '').trim();

                selectedGlAccounts = selectedGlAccounts.filter(function(value) {
                    return value !== id;
                });

                syncSelectedGlAccounts();
            });

            function loadInitialGlAccountText() {
                syncSelectedGlAccounts();

                if (!selectedGlAccounts.length) return;

                $.ajax({
                    url: glAccountsUrl,
                    type: 'GET',
                    dataType: 'json',
                    data: {
                        selected: selectedGlAccounts.join(',')
                    }
                }).done(function(response) {
                    if (!response || !response.success || !Array.isArray(response.data)) {
                        return;
                    }

                    response.data.forEach(function(item) {
                        const id = String(item.id || '').trim();
                        if (!id) return;
                        glAccountTextMap[id] = item.gl_long_text || '';
                    });

                    renderSelectedGlAccounts();
                    updateReportHeader(getCurrentFilters());
                });
            }

            loadInitialGlAccountText();
            const batchSize = 100;

            const templates = {
                '1': {
                    name: 'Finance',
                    columns: [{
                            key: 'gl_account',
                            label: 'G/L Account',
                            className: 'font-monospace text-nowrap',
                            stripLeadingZero: true
                        },
                        {
                            key: 'gl_long_text',
                            label: 'G/L Account Long Text',
                            className: 'text-nowrap'
                        },
                        {
                            key: 'customer_vendor',
                            label: 'Customer / Vendor',
                            className: 'font-monospace text-nowrap',
                            stripLeadingZero: true,
                            customerVendorFallback: true
                        },
                        {
                            key: 'vendor_name',
                            label: 'Vendor Name',
                            className: 'text-nowrap'
                        },
                        {
                            key: 'poper',
                            label: 'Period',
                            className: 'text-center text-nowrap'
                        },
                        {
                            key: 'doc_type',
                            label: 'Type',
                            className: 'text-center font-monospace text-nowrap'
                        },
                        {
                            key: 'document_date',
                            label: 'Document Date',
                            className: 'font-monospace text-nowrap'
                        },
                        {
                            key: 'posting_date',
                            label: 'Posting Date',
                            className: 'font-monospace text-nowrap'
                        },
                        {
                            key: 'accounting_document',
                            label: 'G/L Document',
                            className: 'font-monospace text-nowrap',
                            documentLink: true,
                            stripLeadingZero: true
                        },
                        {
                            key: 'doc_currency',
                            label: 'Document Currency',
                            className: 'text-center text-nowrap'
                        },
                        {
                            key: 'dc_amount',
                            label: 'Document Amount',
                            className: 'text-end text-nowrap'
                        },
                        {
                            key: 'local_currency',
                            label: 'Local Currency',
                            className: 'text-center text-nowrap'
                        },
                        {
                            key: 'lc_amount',
                            label: 'Local Amount',
                            className: 'text-end text-nowrap fw-bold'
                        },
                        {
                            key: 'global_currency',
                            label: 'Global Currency',
                            className: 'text-center text-nowrap'
                        },
                        {
                            key: 'global_amount',
                            label: 'Global Amount',
                            className: 'text-end text-nowrap'
                        },
                        {
                            key: 'display_text',
                            label: 'Text',
                            className: 'text-nowrap',
                            titleValue: true
                        },
                        {
                            key: 'inv_doc_no',
                            label: 'Invoice',
                            className: 'font-monospace text-nowrap',
                            stripLeadingZero: true
                        },
                        {
                            key: 'acdoca2_text',
                            label: 'Tax Income',
                            className: 'text-nowrap',
                            titleValue: true
                        },
                        {
                            key: 'reference_key3',
                            label: 'Reference Key',
                            className: 'font-monospace text-nowrap',
                            stripLeadingZero: true
                        }
                    ]
                },
                '2': {
                    name: 'Biaya',
                    columns: [{
                            key: 'accounting_document',
                            label: 'Doc Number',
                            className: 'font-monospace text-nowrap',
                            documentLink: true,
                            stripLeadingZero: true
                        },
                        {
                            key: 'gl_account',
                            label: 'G/L Account',
                            className: 'font-monospace text-nowrap',
                            stripLeadingZero: true
                        },
                        {
                            key: 'cost_center',
                            label: 'Cost Center',
                            className: 'font-monospace text-nowrap',
                            stripLeadingZero: true
                        },
                        {
                            key: 'profit_center',
                            label: 'Profit Center',
                            className: 'font-monospace text-nowrap',
                            stripLeadingZero: true
                        },
                        {
                            key: 'doc_currency',
                            label: 'Document Currency',
                            className: 'text-center text-nowrap'
                        },
                        {
                            key: 'dc_amount',
                            label: 'Document Amount',
                            className: 'text-end text-nowrap'
                        },
                        {
                            key: 'local_currency',
                            label: 'Local Currency',
                            className: 'text-center text-nowrap'
                        },
                        {
                            key: 'lc_amount',
                            label: 'Local Amount',
                            className: 'text-end text-nowrap fw-bold'
                        },
                        {
                            key: 'global_currency',
                            label: 'Global Currency',
                            className: 'text-center text-nowrap'
                        },
                        {
                            key: 'global_amount',
                            label: 'Global Amount',
                            className: 'text-end text-nowrap'
                        },
                        {
                            key: 'quantity',
                            label: 'Quantity',
                            className: 'text-end text-nowrap',
                            quantityWithUnit: true
                        },
                        {
                            key: 'poper',
                            label: 'Period',
                            className: 'text-center text-nowrap'
                        },
                        {
                            key: 'posting_date',
                            label: 'Posting Date',
                            className: 'font-monospace text-nowrap'
                        },
                        {
                            key: 'document_date',
                            label: 'Doc Date',
                            className: 'font-monospace text-nowrap'
                        },
                        {
                            key: 'doc_type',
                            label: 'Type',
                            className: 'text-center font-monospace text-nowrap'
                        },
                        {
                            key: 'display_text',
                            label: 'Text',
                            className: 'text-nowrap',
                            titleValue: true
                        },
                        {
                            key: 'inv_doc_no',
                            label: 'Invoice',
                            className: 'font-monospace text-nowrap',
                            stripLeadingZero: true
                        },
                        {
                            key: 'acdoca2_text',
                            label: 'Tax Income',
                            className: 'text-nowrap',
                            titleValue: true
                        },
                        {
                            key: 'material',
                            label: 'Material',
                            className: 'font-monospace text-nowrap',
                            stripLeadingZero: true
                        },
                        {
                            key: 'customer_vendor',
                            label: 'Customer / Vendor',
                            className: 'font-monospace text-nowrap',
                            stripLeadingZero: true,
                            customerVendorFallback: true
                        },
                        {
                            key: 'vendor_name',
                            label: 'Vendor Name',
                            className: 'text-nowrap'
                        },
                        {
                            key: 'offsetting_account',
                            label: 'Offsetting Account',
                            className: 'font-monospace text-nowrap',
                            stripLeadingZero: true
                        },
                        {
                            key: 'order_no',
                            label: 'Order',
                            className: 'font-monospace text-nowrap',
                            stripLeadingZero: true
                        }
                    ]
                }
            };

            let currentLayout = String(@json($layout ?? '2'));
            if (!templates[currentLayout]) currentLayout = '2';
            let selectionExecuted = Boolean(initialHasSelection);
            let currentOffset = 0;
            let totalFiltered = 0;
            let hasMore = false;
            let isLoadingRows = false;
            let requestGeneration = 0;
            let rowRequest = null;
            let summaryRequest = null;
            let searchTimer = null;
            let lastExecutedSearch = '';
            const searchTypingDelay = 1000;
            let currentSortKey = 'posting_date';
            let currentSortDir = 'desc';
            let draggedColumnKey = null;
            const columnPreferences = {};
            let columnFilters = [];
            let columnFilterDraft = [];


            const collapseEl = document.getElementById('selectionBody');
            if (collapseEl) {
                collapseEl.addEventListener('shown.bs.collapse', function() {
                    $('[data-bs-target="#selectionBody"] i').removeClass('fa-chevron-down').addClass(
                        'fa-chevron-up');
                });
                collapseEl.addEventListener('hidden.bs.collapse', function() {
                    $('[data-bs-target="#selectionBody"] i').removeClass('fa-chevron-up').addClass(
                        'fa-chevron-down');
                });
            }

            function escapeHtml(value) {
                return $('<div>').text(value == null ? '' : String(value)).html();
            }

            function formatCodeWithoutLeadingZero(value) {
                if (value === null || value === undefined) return '';

                const text = String(value).trim();
                if (!text) return '';

                // Leading zero hanya dibuang untuk identifier yang seluruhnya numeric.
                // Kode alphanumeric seperti 0A12 / P0001 tetap utuh.
                if (!/^\d+$/.test(text)) return text;

                return text.replace(/^0+(?=\d)/, '');
            }

            function getCurrentFilters() {
                return {
                    gl_account: ($('#filter_gl_account').val() || '').trim(),
                    posting_date_from: $('#filter_posting_date_from').val() || '',
                    posting_date_to: $('#filter_posting_date_to').val() || ''
                };
            }

            function hasFilters(filters) {
                return Boolean(filters.gl_account) ||
                    Boolean(filters.posting_date_from) ||
                    Boolean(filters.posting_date_to);
            }

            function formatDateLabel(value) {
                if (!value) return '';
                const parts = String(value).split('-');
                if (parts.length !== 3) return value;
                return parts[2] + '/' + parts[1] + '/' + parts[0];
            }

            function getPostingDateLabel(filters) {
                const from = filters.posting_date_from || '';
                const to = filters.posting_date_to || '';
                if (!from && !to) return 'All Posting Dates';
                if (from && to) return formatDateLabel(from) + ' - ' + formatDateLabel(to);
                if (from) return 'From ' + formatDateLabel(from);
                return 'Until ' + formatDateLabel(to);
            }

            function getSelectedGlInfo(filters) {
                const glAccounts = String(filters.gl_account || '')
                    .split(',')
                    .map(function(value) {
                        return formatCodeWithoutLeadingZero(value.trim());
                    })
                    .filter(Boolean);

                if (!glAccounts.length) {
                    return {
                        title: 'All G/L Accounts',
                        subtitle: ''
                    };
                }

                const descriptions = glAccounts
                    .map(function(gl) {
                        return glAccountTextMap[gl] || '';
                    })
                    .filter(Boolean);

                return {
                    title: glAccounts.join(', '),
                    subtitle: descriptions.join(' · ')
                };
            }

            function updateReportHeader(filters) {
                const glInfo = getSelectedGlInfo(filters);
                const poper = globalPeriod.poper || '-';

                $('#reportGlAccount').text(glInfo.title).attr('title', glInfo.title);
                $('#reportGlText').text(glInfo.subtitle);
                $('#reportPeriodValue').text(poper);
                $('#reportPostingDateLabel').text(getPostingDateLabel(filters));
                $('#reportStatusPeriod').text(' · ' + (globalPeriod.label || ('Period ' + poper)) + ' · ' +
                    getPostingDateLabel(filters));
            }

            function updateBrowserUrl(filters) {
                const url = new URL(detailUrl, window.location.origin);

                Object.entries(filters).forEach(function([key, value]) {
                    if (value === '' || value === null || value === undefined || value === 0 || value ===
                        'all') return;
                    url.searchParams.set(key, value);
                });
                url.searchParams.set('layout', currentLayout);

                window.history.replaceState({}, '', url.pathname + (url.search ? url.search : ''));
            }

            function formatCurrencyAmount(value, currency) {
                const code = String(currency || '').toUpperCase();
                const zeroDecimalCurrencies = ['IDR', 'JPY'];
                const decimals = zeroDecimalCurrencies.includes(code) ? 0 : 2;

                return Number(value || 0).toLocaleString('id-ID', {
                    minimumFractionDigits: decimals,
                    maximumFractionDigits: decimals
                });
            }

            function renderDocumentAmounts(items) {
                if (!Array.isArray(items) || items.length === 0) {
                    return '<div class="text-muted text-sm py-1">-</div>';
                }

                return `
            <div class="d-flex flex-wrap align-items-center gap-3 py-1">
                ${items.map(function (item) {
                    const currency = escapeHtml(String(item.currency || '-').toUpperCase());
                    const amount = formatCurrencyAmount(item.amount, item.currency);

                    return `
                                        <div class="d-flex align-items-center gap-2 text-nowrap">
                                            <span class="text-xs fw-bold text-secondary">${currency}</span>
                                            <span class="fw-bold text-sm font-monospace">${amount}</span>
                                        </div>
                                    `;
                }).join('')}
            </div>
        `;
            }

            function renderSingleCurrencyAmount(items) {
                if (!Array.isArray(items) || items.length === 0) {
                    return '<div class="text-muted text-sm py-1">-</div>';
                }

                if (items.length > 1) {
                    return `
                <div class="d-flex flex-wrap align-items-center gap-3 py-1">
                    ${items.map(function (item) {
                        const currency = escapeHtml(String(item.currency || '-').toUpperCase());
                        const amount = formatCurrencyAmount(item.amount, item.currency);

                        return `
                                            <div class="d-flex align-items-center gap-2 text-nowrap">
                                                <span class="text-xs fw-bold text-secondary">${currency}</span>
                                                <span class="fw-bold text-sm font-monospace">${amount}</span>
                                            </div>
                                        `;
                    }).join('')}
                </div>
            `;
                }

                const item = items[0];
                const currency = escapeHtml(String(item.currency || '-').toUpperCase());
                const amount = formatCurrencyAmount(item.amount, item.currency);

                return `
            <div class="d-flex align-items-center justify-content-between gap-2 py-1">
                <span class="text-xs fw-bold text-secondary">${currency}</span>
                <span class="fw-bold text-sm text-end font-monospace">${amount}</span>
            </div>
        `;
            }

            function setSummaryLoading() {
                const spinner = `
            <div class="text-muted text-sm">
                <span class="spinner-border spinner-border-sm me-1" role="status"></span>
                Loading...
            </div>
        `;

                $('#summaryLineCount').addClass('text-muted').html(spinner);
                $('#summaryDocAmount').html(spinner);
                $('#summaryLocalAmount').html(spinner);
                $('#summaryGlobalAmount').html(spinner);
                $('#summaryStatusBalance').addClass('text-muted').text('Loading...');
            }

            function setSummaryIdle() {
                $('#summaryLineCount').removeClass('text-muted').text('-');
                $('#summaryDocAmount').html('<div class="text-muted text-sm">-</div>');
                $('#summaryLocalAmount').html('<div class="text-muted text-sm">-</div>');
                $('#summaryGlobalAmount').html('<div class="text-muted text-sm">-</div>');
                $('#summaryStatusBalance').removeClass('text-muted').text('-');
            }

            function loadSummary(filters) {
                if (!selectionExecuted || !hasFilters(filters)) {
                    setSummaryIdle();
                    return;
                }

                if (summaryRequest && summaryRequest.readyState !== 4) summaryRequest.abort();
                setSummaryLoading();

                summaryRequest = $.ajax({
                    url: summaryUrl,
                    type: 'GET',
                    dataType: 'json',
                    data: $.extend({}, filters, {
                        column_filters: getColumnFiltersPayload()
                    })
                }).done(function(response) {
                    const summary = response && response.data ? response.data : {};
                    const lineCount = Number(summary.total_count || 0);

                    $('#summaryLineCount')
                        .removeClass('text-muted')
                        .text(lineCount.toLocaleString('id-ID'));

                    $('#summaryDocAmount').html(
                        renderDocumentAmounts(summary.document_amounts || [])
                    );

                    $('#summaryLocalAmount').html(
                        renderSingleCurrencyAmount(summary.local_amounts || [])
                    );

                    $('#summaryGlobalAmount').html(
                        renderSingleCurrencyAmount(summary.global_amounts || [])
                    );

                    const globalAmounts = summary.global_amounts || [];

                    if (globalAmounts.length === 1) {
                        const global = globalAmounts[0];
                        $('#summaryStatusBalance')
                            .removeClass('text-muted')
                            .text(
                                String(global.currency || '').toUpperCase() + ' ' +
                                formatCurrencyAmount(global.amount, global.currency)
                            );
                    } else if (globalAmounts.length > 1) {
                        $('#summaryStatusBalance')
                            .removeClass('text-muted')
                            .text('Multiple currencies');
                    } else {
                        $('#summaryStatusBalance')
                            .removeClass('text-muted')
                            .text('-');
                    }
                }).fail(function(xhr, status) {
                    if (status === 'abort') return;

                    $('#summaryLineCount').removeClass('text-muted').text('-');
                    $('#summaryDocAmount').html('<div class="text-muted text-sm">Unavailable</div>');
                    $('#summaryLocalAmount').html('<div class="text-muted text-sm">Unavailable</div>');
                    $('#summaryGlobalAmount').html('<div class="text-muted text-sm">Unavailable</div>');
                    $('#summaryStatusBalance').removeClass('text-muted').text('-');
                });
            }

            function getTemplate(layout) {
                const key = String(layout || currentLayout);
                return templates[key] || templates['2'];
            }

            function columnPreferenceKey(layout) {
                return 'msjglcost_detail_columns_v6_' + columnPreferenceScope + '_' + String(layout);
            }

            function defaultColumnPreference(layout) {
                const template = getTemplate(layout);

                return {
                    order: template.columns.map(function(column) {
                        return column.key;
                    }),
                    hidden: []
                };
            }

            function normalizeColumnPreference(layout, preference) {
                const template = getTemplate(layout);
                const validKeys = template.columns.map(function(column) {
                    return column.key;
                });

                const inputOrder = preference && Array.isArray(preference.order) ?
                    preference.order.filter(function(key) {
                        return validKeys.includes(key);
                    }) :
                    [];

                const order = inputOrder.concat(
                    validKeys.filter(function(key) {
                        return !inputOrder.includes(key);
                    })
                );

                let hidden = preference && Array.isArray(preference.hidden) ?
                    preference.hidden.filter(function(key) {
                        return validKeys.includes(key);
                    }) :
                    [];

                if (hidden.length >= validKeys.length) {
                    hidden = hidden.slice(0, Math.max(0, validKeys.length - 1));
                }

                return {
                    order: order,
                    hidden: hidden
                };
            }

            function loadColumnPreference(layout) {
                const key = String(layout);

                if (columnPreferences[key]) {
                    return columnPreferences[key];
                }

                let stored = null;

                try {
                    stored = JSON.parse(localStorage.getItem(columnPreferenceKey(key)) || 'null');
                } catch (error) {
                    stored = null;
                }

                columnPreferences[key] = normalizeColumnPreference(
                    key,
                    stored || defaultColumnPreference(key)
                );

                return columnPreferences[key];
            }

            function saveColumnPreference(layout) {
                const key = String(layout);
                const preference = normalizeColumnPreference(
                    key,
                    columnPreferences[key] || defaultColumnPreference(key)
                );

                columnPreferences[key] = preference;
                localStorage.setItem(columnPreferenceKey(key), JSON.stringify(preference));
            }

            function resetColumnPreference(layout) {
                const key = String(layout);
                columnPreferences[key] = defaultColumnPreference(key);
                localStorage.removeItem(columnPreferenceKey(key));
            }

            function getOrderedColumns(layout) {
                const key = String(layout || currentLayout);
                const template = getTemplate(key);
                const preference = loadColumnPreference(key);
                const columnMap = {};

                template.columns.forEach(function(column) {
                    columnMap[column.key] = column;
                });

                return preference.order
                    .map(function(key) {
                        return columnMap[key];
                    })
                    .filter(Boolean);
            }

            function getVisibleColumns(layout) {
                const key = String(layout || currentLayout);
                const preference = loadColumnPreference(key);

                return getOrderedColumns(key).filter(function(column) {
                    return !preference.hidden.includes(column.key);
                });
            }

            function getColumnFilterType(key) {
                if (['dc_amount', 'lc_amount', 'global_amount', 'quantity'].includes(key)) {
                    return 'number';
                }

                if (['posting_date', 'document_date'].includes(key)) {
                    return 'date';
                }

                return 'text';
            }

            function getColumnFilterOperatorLabel(operator) {
                const labels = {
                    contains: 'Contains',
                    equals: 'Equals',
                    starts_with: 'Starts with',
                    gte: 'Greater than or equal',
                    lte: 'Less than or equal'
                };

                return labels[operator] || operator;
            }

            function getColumnLabel(key) {
                const column = getTemplate(currentLayout).columns.find(function(item) {
                    return item.key === key;
                });

                return column ? column.label : key;
            }

            function getColumnFiltersPayload() {
                return JSON.stringify(columnFilters.map(function(filter) {
                    return {
                        key: filter.key,
                        operator: filter.operator,
                        value: filter.value
                    };
                }));
            }

            function updateColumnFilterBadge() {
                const count = columnFilters.length;

                $('#columnFilterBadge')
                    .text(count)
                    .toggleClass('d-none', count === 0);

                $('#btnColumnFilters')
                    .toggleClass('btn-outline-secondary', count === 0)
                    .toggleClass('btn-primary', count > 0);

                $('#columnFilterCountText').text(
                    count.toLocaleString('id-ID') + (count === 1 ? ' filter' : ' filters')
                );
            }

            function renderColumnFilterColumnOptions() {
                const columns = getOrderedColumns(currentLayout);
                const currentValue = $('#columnFilterKey').val();

                const options = columns.map(function(column) {
                    return '<option value="' + escapeHtml(column.key) + '">' +
                        escapeHtml(column.label) + '</option>';
                }).join('');

                $('#columnFilterKey').html(options);

                if (currentValue && columns.some(function(column) {
                        return column.key === currentValue;
                    })) {
                    $('#columnFilterKey').val(currentValue);
                }

                renderColumnFilterOperatorOptions();
            }

            function renderColumnFilterOperatorOptions() {
                const key = String($('#columnFilterKey').val() || '');
                const type = getColumnFilterType(key);
                let operators = [];

                if (type === 'number') {
                    operators = [
                        ['equals', 'Equals'],
                        ['gte', 'Greater than or equal'],
                        ['lte', 'Less than or equal']
                    ];
                } else if (type === 'date') {
                    operators = [
                        ['equals', 'Equals'],
                        ['gte', 'On or after'],
                        ['lte', 'On or before']
                    ];
                } else {
                    operators = [
                        ['contains', 'Contains'],
                        ['equals', 'Equals'],
                        ['starts_with', 'Starts with']
                    ];
                }

                $('#columnFilterOperator').html(
                    operators.map(function(item) {
                        return '<option value="' + item[0] + '">' + escapeHtml(item[1]) + '</option>';
                    }).join('')
                );

                const $value = $('#columnFilterValue');
                $value.val('');

                if (type === 'date') {
                    $value.attr({
                        type: 'date',
                        step: null,
                        placeholder: ''
                    });
                } else if (type === 'number') {
                    $value.attr({
                        type: 'number',
                        step: 'any',
                        placeholder: '0'
                    });
                } else {
                    $value.attr({
                        type: 'text',
                        step: null,
                        placeholder: 'Filter value'
                    });
                }
            }

            function renderActiveColumnFilters() {
                if (!columnFilterDraft.length) {
                    $('#activeColumnFilters').html(
                        '<div class="text-center text-muted text-sm py-3">No column filters.</div>'
                    );
                    $('#columnFilterCountText').text('0 filters');
                    return;
                }

                const html = columnFilterDraft.map(function(filter, index) {
                    return `
                        <div class="d-flex align-items-center justify-content-between gap-2 border-bottom py-2 px-1">
                            <div class="text-sm">
                                <span class="fw-bold">${escapeHtml(getColumnLabel(filter.key))}</span>
                                <span class="text-muted mx-1">${escapeHtml(getColumnFilterOperatorLabel(filter.operator))}</span>
                                <span class="font-monospace">${escapeHtml(filter.value)}</span>
                            </div>
                            <button type="button" class="btn btn-sm btn-link text-danger p-0 remove-column-filter"
                                data-filter-index="${index}" title="Remove filter">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    `;
                }).join('');

                $('#activeColumnFilters').html(html);
                $('#columnFilterCountText').text(
                    columnFilterDraft.length.toLocaleString('id-ID') +
                    (columnFilterDraft.length === 1 ? ' filter' : ' filters')
                );
            }

            function addColumnFilterFromForm() {
                const key = String($('#columnFilterKey').val() || '');
                const operator = String($('#columnFilterOperator').val() || '');
                const value = $.trim($('#columnFilterValue').val() || '');

                if (!key || !operator || value === '') {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Filter belum lengkap',
                        text: 'Pilih kolom, kondisi, dan isi nilai filter.'
                    });
                    return;
                }

                columnFilterDraft.push({
                    key: key,
                    operator: operator,
                    value: value
                });

                $('#columnFilterValue').val('').trigger('focus');
                renderActiveColumnFilters();
            }

            function pruneColumnFiltersForLayout() {
                const validKeys = getTemplate(currentLayout).columns.map(function(column) {
                    return column.key;
                });

                columnFilters = columnFilters.filter(function(filter) {
                    return validKeys.includes(filter.key);
                });

                columnFilterDraft = columnFilters.map(function(filter) {
                    return Object.assign({}, filter);
                });

                updateColumnFilterBadge();
                renderActiveColumnFilters();
            }

            function refreshTableForColumnChange() {
                renderHeader();

                if (selectionExecuted) {
                    loadRows(true);
                } else {
                    setRowsIdle();
                }
            }

            function renderColumnChooser() {
                const layout = currentLayout;
                const preference = loadColumnPreference(layout);
                const columns = getOrderedColumns(layout);

                const html = columns.map(function(column) {
                    const checked = !preference.hidden.includes(column.key) ? ' checked' : '';

                    return `
                        <div class="list-group-item d-flex align-items-center gap-2"
                            draggable="true"
                            data-column-key="${escapeHtml(column.key)}">
                            <i class="fas fa-grip-vertical text-muted"></i>
                            <input class="form-check-input mt-0 column-visibility-toggle"
                                type="checkbox"
                                value="${escapeHtml(column.key)}"
                                id="columnToggle_${escapeHtml(layout)}_${escapeHtml(column.key)}"${checked}>
                            <label class="form-check-label flex-grow-1 mb-0"
                                for="columnToggle_${escapeHtml(layout)}_${escapeHtml(column.key)}">
                                ${escapeHtml(column.label)}
                            </label>
                        </div>
                    `;
                }).join('');

                $('#columnChooserList').html(html);
                $('#columnChooserModalLabel').text(getTemplate(layout).name + ' Columns');
            }

            function sortIcon(columnKey) {
                if (columnKey !== currentSortKey) {
                    return '<i class="fas fa-sort ms-1 text-muted opacity-50"></i>';
                }

                return currentSortDir === 'asc' ?
                    '<i class="fas fa-sort-up ms-1 text-primary"></i>' :
                    '<i class="fas fa-sort-down ms-1 text-primary"></i>';
            }

            function renderHeader() {
                const columns = getVisibleColumns();
                const html = columns.map(function(column) {
                    const ariaSort = column.key === currentSortKey ?
                        (currentSortDir === 'asc' ? 'ascending' : 'descending') :
                        'none';

                    return '<th class="text-nowrap user-select-none" role="button" data-sort-key="' +
                        escapeHtml(column.key) + '" aria-sort="' + ariaSort + '" title="Sort by ' +
                        escapeHtml(column.label) + '">' +
                        escapeHtml(column.label) + sortIcon(column.key) + '</th>';
                }).join('');

                $('#lineItemHeader').html(html);
                $('#filter_layout').val(currentLayout);
                $('.layout-mode-btn').removeClass('active');
                $('.layout-mode-btn[data-layout="' + currentLayout + '"]').addClass('active');
            }

            function renderCell(row, column) {
                if (column.documentLink) {
                    const rawValue = row.accounting_document || '';
                    if (!rawValue) return '';
                    const displayValue = column.stripLeadingZero ? formatCodeWithoutLeadingZero(rawValue) :
                        rawValue;
                    return '<a class="link-primary text-decoration-none font-monospace" href="{{ URL::to('') }}/' +
                        baseUrl + '/show/' + row.idencrypt + '">' + escapeHtml(displayValue) + '</a>';
                }

                if (column.quantityWithUnit) {
                    const qty = row.quantity == null ? '' : String(row.quantity);
                    if (!qty) return '';
                    return escapeHtml(qty + (row.quantity_unit ? ' ' + row.quantity_unit : ''));
                }

                let rawValue = '';

                if (column.customerVendorFallback) {
                    rawValue = String(row.customer || '').trim() || String(row.vendor || '').trim();
                } else {
                    rawValue = row[column.key] == null ? '' : String(row[column.key]);
                }

                const value = column.stripLeadingZero ? formatCodeWithoutLeadingZero(rawValue) : rawValue;

                if (column.titleValue) {
                    return '<span title="' + escapeHtml(value) + '">' + escapeHtml(value) + '</span>';
                }

                return escapeHtml(value);
            }

            function renderRow(row) {
                const columns = getVisibleColumns();
                const inactiveClass = String(row.isactive) === '0' ? ' opacity-50' : '';
                const cells = columns.map(function(column) {
                    const className = column.className ? ' ' + column.className : '';
                    return '<td class="' + (className + inactiveClass).trim() + '">' + renderCell(row,
                        column) + '</td>';
                }).join('');

                return '<tr>' + cells + '</tr>';
            }

            function applyLayout(layout) {
                currentLayout = String(layout);
                if (!templates[currentLayout]) currentLayout = '2';

                pruneColumnFiltersForLayout();
                renderHeader();
                if (selectionExecuted) {
                    updateBrowserUrl(getCurrentFilters());
                    loadSummary(getCurrentFilters());
                    loadRows(true);
                } else {
                    setRowsIdle();
                }
            }

            function updateLoadedStatus() {
                const loaded = $('#lineItemBody tr[data-data-row="1"]').length;
                const search = $('#lineItemSearch').val().trim();

                if (!selectionExecuted) {
                    $('#loadedLineCount').text('No line items loaded');
                    return;
                }

                let text = loaded.toLocaleString('id-ID') + ' of ' + Number(totalFiltered || 0).toLocaleString(
                    'id-ID') + ' line items loaded';
                if (search) text += ' · search: "' + search + '"';
                if (columnFilters.length) text += ' · ' + columnFilters.length + ' column filter' + (columnFilters.length > 1 ? 's' : '');
                if (!hasMore && totalFiltered > 0) text += ' · all loaded';
                $('#loadedLineCount').text(text);
            }

            function isNearScrollBottom() {
                const container = document.getElementById('lineItemScrollContainer');
                if (!container) return false;

                return (container.scrollHeight - (container.scrollTop + container.clientHeight)) < 400;
            }

            function fillScrollContainerIfNeeded() {
                if (!selectionExecuted || !hasMore || isLoadingRows) return;

                const container = document.getElementById('lineItemScrollContainer');
                if (!container) return;

                // Jika batch pertama belum cukup membuat scrollbar penuh,
                // ambil batch berikutnya sampai area scroll terisi.
                if (container.scrollHeight <= container.clientHeight + 80 || isNearScrollBottom()) {
                    window.setTimeout(function() {
                        loadRows(false);
                    }, 100);
                }
            }

            function setRowsIdle(message) {
                $('#lineItemBody').html(
                    '<tr id="lineItemIdleRow"><td colspan="' + getVisibleColumns().length +
                    '" class="text-center text-muted py-4">' +
                    escapeHtml(message || 'Select criteria and choose Execute.') +
                    '</td></tr>'
                );
                currentOffset = 0;
                totalFiltered = 0;
                hasMore = false;
                $('#lazyLoadSentinel').addClass('d-none');
                updateLoadedStatus();
            }

            function setActionButtonsEnabled(enabled) {
                $('#btnRefresh, #btnExportExcel, #btnExportPdf, #btnPrint').prop('disabled', !enabled);
                $('#lineItemSearch').prop('disabled', !enabled);
            }

            function loadRows(reset) {
                const filters = getCurrentFilters();
                if (!selectionExecuted || !hasFilters(filters)) return;
                if (isLoadingRows && !reset) return;

                if (reset) {
                    requestGeneration++;
                    currentOffset = 0;
                    totalFiltered = 0;
                    hasMore = true;
                    $('#lineItemBody').empty();
                    $('#lineItemScrollContainer').scrollTop(0);
                    if (rowRequest && rowRequest.readyState !== 4) rowRequest.abort();
                } else if (!hasMore) {
                    return;
                }

                const generation = requestGeneration;
                isLoadingRows = true;
                $('#lazyLoadSentinel').removeClass('d-none');

                const payload = $.extend(true, {}, filters, {
                    draw: 1,
                    start: currentOffset,
                    length: batchSize,
                    'search[value]': $('#lineItemSearch').val().trim(),
                    column_filters: getColumnFiltersPayload(),
                    sort_key: currentSortKey,
                    sort_dir: currentSortDir
                });

                rowRequest = $.ajax({
                    url: detailDataUrl,
                    type: 'GET',
                    dataType: 'json',
                    data: payload
                }).done(function(response) {
                    if (generation !== requestGeneration) return;

                    const rows = Array.isArray(response.data) ? response.data : [];
                    totalFiltered = Number(response.recordsFiltered || 0);

                    if (reset && rows.length === 0) {
                        setRowsIdle($('#lineItemSearch').val().trim() ? 'No matching line items.' :
                            'No line items found for this selection.');
                        return;
                    }

                    const html = rows.map(function(row) {
                        return renderRow(row).replace('<tr', '<tr data-data-row="1"');
                    }).join('');

                    $('#lineItemBody').append(html);
                    currentOffset += rows.length;
                    hasMore = rows.length > 0 && currentOffset < totalFiltered;
                    updateLoadedStatus();

                    if (hasMore) {
                        fillScrollContainerIfNeeded();
                    }
                }).fail(function(xhr, status) {
                    if (status === 'abort') return;
                    if (generation !== requestGeneration) return;

                    if (currentOffset === 0) {
                        setRowsIdle('Unable to read line items.');
                    }
                }).always(function() {
                    if (generation !== requestGeneration) return;
                    isLoadingRows = false;
                    $('#lazyLoadSentinel').toggleClass('d-none', !hasMore);
                });
            }

            function executeSelection() {
                const typedGl = $.trim($glSearchInput.val());

                if (typedGl !== '') {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Pencarian G/L belum dipilih',
                        text: 'Pilih G/L Account dari hasil pencarian atau kosongkan kotak pencarian.'
                    });
                    return;
                }

                const filters = getCurrentFilters();

                if (!hasFilters(filters)) {
                    selectionExecuted = false;
                    requestGeneration++;
                    if (rowRequest && rowRequest.readyState !== 4) rowRequest.abort();
                    if (summaryRequest && summaryRequest.readyState !== 4) summaryRequest.abort();
                    setActionButtonsEnabled(false);
                    updateReportHeader(filters);
                    updateBrowserUrl(filters);
                    setSummaryIdle();
                    setRowsIdle('Enter at least one selection criterion, then choose Execute.');
                    return;
                }

                selectionExecuted = true;
                setActionButtonsEnabled(true);
                updateReportHeader(filters);
                updateBrowserUrl(filters);
                loadSummary(filters);
                loadRows(true);
            }

            function exportUrl(format) {
                const filters = getCurrentFilters();
                const params = new URLSearchParams();

                Object.entries(filters).forEach(function([key, value]) {
                    if (value === '' || value === null || value === undefined || value === 0 || value ===
                        'all') return;
                    params.set(key, value);
                });
                params.set('layout', currentLayout);
                params.set('columns', getVisibleColumns().map(function(column) {
                    return column.key;
                }).join(','));
                params.set('sort_key', currentSortKey);
                params.set('sort_dir', currentSortDir);
                params.set('column_filters', getColumnFiltersPayload());
                params.set('format', format);

                return exportBaseUrl + '?' + params.toString();
            }

            $('#filterForm').on('submit', function(event) {
                event.preventDefault();
                executeSelection();
            });

            $('#btnExecute').on('click', executeSelection);

            $('#btnReset').on('click', function() {
                requestGeneration++;
                if (rowRequest && rowRequest.readyState !== 4) rowRequest.abort();
                if (summaryRequest && summaryRequest.readyState !== 4) summaryRequest.abort();

                $glSearchInput.val('');
                selectedGlAccounts = [];
                syncSelectedGlAccounts();
                hideGlResults();
                $('#filter_posting_date_from').val(globalPeriod.start_date || '');
                $('#filter_posting_date_to').val(globalPeriod.end_date || '');
                $('#lineItemSearch').val('');
                lastExecutedSearch = '';
                window.clearTimeout(searchTimer);
                columnFilters = [];
                columnFilterDraft = [];
                updateColumnFilterBadge();
                renderActiveColumnFilters();

                selectionExecuted = false;
                setActionButtonsEnabled(false);
                const filters = getCurrentFilters();
                updateReportHeader(filters);
                updateBrowserUrl(filters);
                setSummaryIdle();
                setRowsIdle();
            });

            $('#btnRefresh').on('click', function() {
                if (!selectionExecuted) return;
                loadSummary(getCurrentFilters());
                loadRows(true);
            });

            $('#lineItemSearch').on('input', function() {
                window.clearTimeout(searchTimer);

                const keyword = $.trim($(this).val());

                searchTimer = window.setTimeout(function() {
                    if (!selectionExecuted) return;

                    // Jangan request ulang jika keyword yang dieksekusi belum berubah.
                    if (keyword === lastExecutedSearch) {
                        return;
                    }

                    lastExecutedSearch = keyword;
                    loadRows(true);
                }, searchTypingDelay);
            });

            $('#columnFilterModal').on('show.bs.modal', function() {
                columnFilterDraft = columnFilters.map(function(filter) {
                    return Object.assign({}, filter);
                });
                renderColumnFilterColumnOptions();
                renderActiveColumnFilters();
            });

            $('#columnFilterKey').on('change', function() {
                renderColumnFilterOperatorOptions();
            });

            $('#columnFilterValue').on('keydown', function(event) {
                if (event.key === 'Enter') {
                    event.preventDefault();
                    addColumnFilterFromForm();
                }
            });

            $('#btnAddColumnFilter').on('click', function() {
                addColumnFilterFromForm();
            });

            $('#activeColumnFilters').on('click', '.remove-column-filter', function() {
                const index = Number($(this).data('filter-index'));
                if (!Number.isInteger(index) || index < 0 || index >= columnFilterDraft.length) return;

                columnFilterDraft.splice(index, 1);
                renderActiveColumnFilters();
            });

            $('#btnClearColumnFilters').on('click', function() {
                columnFilterDraft = [];
                renderActiveColumnFilters();
            });

            $('#btnApplyColumnFilters').on('click', function() {
                columnFilters = columnFilterDraft.map(function(filter) {
                    return Object.assign({}, filter);
                });
                updateColumnFilterBadge();

                const modalEl = document.getElementById('columnFilterModal');
                const modal = bootstrap.Modal.getInstance(modalEl);
                if (modal) modal.hide();

                if (selectionExecuted) {
                    loadSummary(getCurrentFilters());
                    loadRows(true);
                }
            });

            $('#columnChooserModal').on('show.bs.modal', function() {
                renderColumnChooser();
            });

            $('#columnChooserList').on('change', '.column-visibility-toggle', function() {
                const preference = loadColumnPreference(currentLayout);
                const key = String($(this).val());
                const visibleCount = getVisibleColumns().length;
                const willHide = !this.checked;

                if (willHide && visibleCount <= 1) {
                    this.checked = true;
                    return;
                }

                preference.hidden = preference.hidden.filter(function(item) {
                    return item !== key;
                });

                if (willHide) {
                    preference.hidden.push(key);
                }

                saveColumnPreference(currentLayout);
                refreshTableForColumnChange();
            });

            $('#columnChooserList').on('dragstart', '[data-column-key]', function(event) {
                draggedColumnKey = String($(this).data('column-key'));
                event.originalEvent.dataTransfer.effectAllowed = 'move';
                event.originalEvent.dataTransfer.setData('text/plain', draggedColumnKey);
            });

            $('#columnChooserList').on('dragover', '[data-column-key]', function(event) {
                event.preventDefault();
                event.originalEvent.dataTransfer.dropEffect = 'move';
            });

            $('#columnChooserList').on('drop', '[data-column-key]', function(event) {
                event.preventDefault();

                const targetKey = String($(this).data('column-key'));
                const sourceKey = draggedColumnKey || event.originalEvent.dataTransfer.getData(
                'text/plain');

                if (!sourceKey || sourceKey === targetKey) {
                    draggedColumnKey = null;
                    return;
                }

                const preference = loadColumnPreference(currentLayout);
                const order = preference.order.slice();
                const sourceIndex = order.indexOf(sourceKey);
                const targetIndex = order.indexOf(targetKey);

                if (sourceIndex === -1 || targetIndex === -1) {
                    draggedColumnKey = null;
                    return;
                }

                order.splice(sourceIndex, 1);
                order.splice(targetIndex, 0, sourceKey);
                preference.order = order;

                saveColumnPreference(currentLayout);
                renderColumnChooser();
                refreshTableForColumnChange();
                draggedColumnKey = null;
            });

            $('#columnChooserList').on('dragend', '[data-column-key]', function() {
                draggedColumnKey = null;
            });

            $('#btnResetColumns').on('click', function() {
                resetColumnPreference(currentLayout);
                renderColumnChooser();
                refreshTableForColumnChange();
            });

            $('#lineItemHeader').on('click', 'th[data-sort-key]', function() {
                const sortKey = String($(this).data('sort-key') || '');
                if (!sortKey) return;

                if (currentSortKey === sortKey) {
                    currentSortDir = currentSortDir === 'asc' ? 'desc' : 'asc';
                } else {
                    currentSortKey = sortKey;
                    currentSortDir = 'asc';
                }

                renderHeader();
                if (selectionExecuted) loadRows(true);
            });

            $('#lineItemScrollContainer').on('scroll', function() {
                if (!selectionExecuted || !hasMore || isLoadingRows) return;

                if (isNearScrollBottom()) {
                    loadRows(false);
                }
            });

            $('.layout-mode-btn').on('click', function() {
                applyLayout($(this).data('layout'));
            });



            $('#btnExportExcel').on('click', function() {
                if (selectionExecuted) window.location.href = exportUrl('excel');
            });

            $('#btnExportPdf').on('click', function() {
                if (selectionExecuted) window.open(exportUrl('pdf'), '_blank');
            });

            $('#btnPrint').on('click', function() {
                if (selectionExecuted) window.open(exportUrl('print'), '_blank');
            });

            renderHeader();

            updateColumnFilterBadge();

            const initialFilters = getCurrentFilters();
            updateReportHeader(initialFilters);
            setActionButtonsEnabled(selectionExecuted && hasFilters(initialFilters));

            if (selectionExecuted && hasFilters(initialFilters)) {
                loadSummary(initialFilters);
                loadRows(true);
            } else {
                selectionExecuted = false;
                setSummaryIdle();
                setRowsIdle();
            }
        });
    </script>
@endpush