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

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

    <style>
        .tpl-header-title {
            font-weight: 700;
            font-size: 1.1rem;
        }

        .coa-tree-wrap {
            max-height: 62vh;
            overflow-y: auto;
        }

        .coa-tree-level {
            list-style: none;
            padding-left: 0;
            margin-bottom: 0;
        }

        ul.nested-sortable {
            list-style: none;
            padding-left: 1.5rem;
            min-height: 10px;
        }

        ul.field-root-list {
            padding-left: 0;
            min-height: 50px;
        }

        .coa-drop-item {
            margin-bottom: 0.5rem;
            background: #fff;
        }

        .coa-item,
        .coa-chip {
            border: 1px solid #e9ecef;
            border-radius: 0.5rem;
            padding: 0.4rem 0.6rem;
            background: #fff;
            cursor: grab;
            margin-bottom: 0.25rem;
        }

        .coa-item:active,
        .coa-chip:active {
            cursor: grabbing;
        }

        .coa-item .coa-drag {
            font-size: 0.9rem;
            color: #6c757d;
        }

        .coa-drag {
            padding: 0.25rem;
            cursor: grab;
            margin-left: auto;
        }

        .coa-drag:active {
            cursor: grabbing;
        }

        .field-card-handle {
            cursor: move;
            color: #8392ab;
        }

        .icon-btn {
            border: 0;
            background: transparent;
            padding: 0.1rem 0.25rem;
            color: #67748e;
        }

        .coa-custom-name {
            max-width: 250px;
            font-size: 0.8rem;
            height: 30px;
        }

        .coa-chip .text-muted {
            white-space: nowrap;
            font-size: 0.75rem !important;
        }

        .field-cards-wrap {
            max-height: 62vh;
            overflow-y: auto;
            padding-right: 0.25rem;
        }

        .coa-toggle {
            width: 18px;
            display: inline-block;
            cursor: pointer;
            color: #6c757d;
            text-align: center;
            margin-right: 6px;
        }

        .coa-toggle.empty {
            cursor: default;
            visibility: hidden;
        }

        .coa-children {
            list-style: none;
            padding-left: 0.75rem;
            margin-bottom: 0;
            margin-left: 0.75rem;
            border-left: 1px dashed #d6d6d6;
        }

        .coa-children.collapsed {
            display: none;
        }

        .coa-drop-children {
            list-style: none;
            padding-left: 1.5rem;
            min-height: 10px;
            margin-left: 0.5rem;
            border-left: 1px dashed #ced4da;
        }

        .coa-drop-children.collapsed {
            display: none;
        }

        .field-position-input {
            width: 52px;
            padding: 0.12rem 0.35rem;
            text-align: center;
            background-color: #eef2f7;
            color: #6c757d;
        }
    </style>

    <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form">
        @csrf
        <input type="hidden" name="isactive" value="1">

        <div class="card shadow-lg mx-4 mb-3">
            <div class="card-body py-3">
                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-file-alt text-primary me-2"></i>
                        <span class="tpl-header-title">Template Laporan</span>
                    </div>

                    <div class="d-flex align-items-center gap-2">
                        <button type="button" class="btn btn-secondary mb-0" onclick="history.back()">
                            Kembali
                        </button>
                        <button type="button" class="btn btn-info mb-0" id="btn-preview">
                            <i class="fas fa-eye me-1"></i>Preview
                        </button>
                        <button type="button" class="btn btn-primary mb-0" id="btn-add-field-top">
                            <i class="fas fa-plus me-1"></i>Tambah Grup
                        </button>
                        @if ($authorize->add == '1')
                            <button type="submit" class="btn btn-success mb-0">
                                <i class="fas fa-save me-1"></i>Simpan
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Group Type Selection Modal -->
        <div class="modal fade" id="groupTypeModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Pilih Tipe Grup</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="radio" name="groupType" id="typeDetails" value="Details"
                                checked>
                            <label class="form-check-label" for="typeDetails">
                                <strong>Details</strong> - Daftar detail seluruh COA dalam grup
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="groupType" id="typeTotal" value="Total">
                            <label class="form-check-label" for="typeTotal">
                                <strong>Total</strong> - Tampilkan hanya total jumlah dari seluruh COA
                            </label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="button" class="btn btn-primary" id="btn-confirm-group-type">Buat Grup</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid py-2">
            <div class="row g-3">
                <div class="col-xl-4 col-lg-4">
                    <div class="card h-100">
                        <div class="card-header bg-gradient-primary text-white py-3">
                            <h6 class="mb-0 text-white">Daftar COA</h6>
                        </div>
                        <div class="card-body pb-2">
                            <div class="input-group mb-3">
                                <span class="input-group-text"><i class="fas fa-search"></i></span>
                                <input type="text" class="form-control" id="coa-search" placeholder="Cari COA">
                            </div>

                            <div class="coa-tree-wrap" id="coa-tree-wrap"></div>

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

                <div class="col-xl-8 col-lg-8">
                    <div class="card mb-3">
                        <div class="card-body pb-2">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label class="form-control-label">Nama Template</label>
                                        <input type="text" name="nama" class="form-control"
                                            value="{{ old('nama') }}" maxlength="100" required>
                                        @error('nama')
                                            <p class="text-danger text-xs pt-1">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label class="form-control-label">Tipe Laporan</label>
                                        <select name="tipe_laporan" class="form-select" id="input-tipe-laporan">
                                            @php
                                                $enumTipeLaporan = DB::select(
                                                    "select value, name from sys_enum where idenum = 'tipe_laporan' and isactive = '1'",
                                                );
                                            @endphp
                                            @foreach ($enumTipeLaporan as $enum)
                                                <option value="{{ $enum->value }}"
                                                    {{ old('tipe_laporan', 'Neraca') === $enum->value ? 'selected' : '' }}>
                                                    {{ $enum->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group mb-2">
                                        <label class="form-control-label">Hak Akses User</label>
                                        <select name="id_users[]" class="form-select custom-select select-multiple"
                                            multiple>
                                            @foreach ($users_options as $user)
                                                @php
                                                    $label = trim(
                                                        ($user->firstname ?? '') . ' ' . ($user->lastname ?? ''),
                                                    );
                                                    $label =
                                                        $label === ''
                                                            ? $user->username
                                                            : $label . ' (' . $user->username . ')';
                                                @endphp
                                                <option value="{{ $user->username }}"
                                                    {{ in_array($user->username, old('id_users', [])) ? 'selected' : '' }}>
                                                    {{ $label }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <div class="field-cards-wrap">
                                <div class="row g-3" id="field-cards-container"></div>
                                <div class="text-center py-4" id="empty-field-note">
                                    <span class="text-secondary text-sm">Belum ada field. Klik "+ Tambah Grup".</span>
                                </div>
                            </div>
                            <div id="dynamic-hidden-inputs"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <!-- Preview Modal -->
    <div class="modal fade" id="previewModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Preview Template Laporan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="preview-body">
                    <!-- Preview content will be inserted here -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.select-multiple, .custom-select').select2({
                width: '100%',
                placeholder: '-- Pilih --',
                allowClear: true
            });
            let fieldCounter = 0;
            let tempIdCounter = 0; // For tracking temporary IDs
            const coaOptions = {!! json_encode(
                $coa_options->map(function ($coa) {
                        return [
                            'id' => (string) $coa->id_coa,
                            'nama' => (string) $coa->nama,
                            'id_parent' => isset($coa->id_parent) && $coa->id_parent ? (string) $coa->id_parent : null,
                            'jenis_laporan' => (string) ($coa->jenis_laporan ?? ''),
                        ];
                    })->values()->all(),
            ) !!};

            const oldFields = {!! json_encode(old('fields', [])) !!};

            function ensureCoaRoot() {
                if ($('#coa-tree-wrap #coa-root-level').length === 0) {
                    $('#coa-tree-wrap').html('<ul id="coa-root-level" class="coa-tree-level"></ul>');
                }
            }

            function buildCoaTree(items) {
                const byId = {};
                const roots = [];

                items.forEach(item => {
                    byId[item.id] = {
                        ...item,
                        children: []
                    };
                });

                items.forEach(item => {
                    const node = byId[item.id];
                    if (item.id_parent && byId[item.id_parent]) {
                        byId[item.id_parent].children.push(node);
                    } else {
                        roots.push(node);
                    }
                });

                return roots;
            }

            const fullCoaTree = buildCoaTree(coaOptions);

            function findNodeById(nodes, id) {
                for (const node of nodes) {
                    if (String(node.id) === String(id)) {
                        return node;
                    }
                    if (node.children && node.children.length > 0) {
                        const found = findNodeById(node.children, id);
                        if (found) {
                            return found;
                        }
                    }
                }
                return null;
            }

            function createNestedCoaDropItem(node) {
                const hasChildren = node.children && node.children.length > 0;
                const el = document.createElement('li');
                el.className = 'coa-drop-item';
                el.setAttribute('data-id-template-data', '');
                el.setAttribute('data-id-coa', node.id || '');
                el.setAttribute('data-kode', node.id || '');
                el.setAttribute('data-nama', node.nama || '');
                el.innerHTML = `
                    <div class="coa-chip d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center flex-grow-1">
                            <span class="coa-toggle ${hasChildren ? '' : 'empty'}"><i class="fas fa-chevron-right"></i></span>
                            <i class="fas fa-grip-vertical field-card-handle me-2"></i>
                            <input type="text" class="form-control form-control-sm coa-custom-name" value="${escapeHtml(node.nama || '')}" placeholder="Nama custom">
                            <span class="text-xs text-muted ms-2">(${escapeHtml(node.id || '')})</span>
                        </div>
                        <div class="d-flex align-items-center gap-1">
                            <button type="button" class="icon-btn text-danger btn-remove-item"><i class="fas fa-times"></i></button>
                        </div>
                    </div>
                    <ul class="coa-drop-children collapsed nested-sortable"></ul>
                `;

                const childUl = el.querySelector('ul.nested-sortable');
                (node.children || []).forEach(child => childUl.appendChild(createNestedCoaDropItem(child)));
                return el;
            }

            function renderCoaNode(node, container) {
                const hasChildren = Array.isArray(node.children) && node.children.length > 0;
                const row = $(`
                    <li class="coa-item d-flex align-items-center justify-content-between"
                        data-id-coa="${escapeHtml(node.id)}"
                        data-kode="${escapeHtml(node.id)}"
                        data-nama="${escapeHtml(node.nama)}">
                        <div class="d-flex align-items-center flex-grow-1">
                            <span class="coa-toggle ${hasChildren ? '' : 'empty'}">
                                <i class="fas fa-chevron-right"></i>
                            </span>
                            <span class="text-sm">${escapeHtml(node.id)} - ${escapeHtml(node.nama)}</span>
                        </div>
                        <span class="coa-drag">::</span>
                    </li>
                `);

                container.append(row);

                if (hasChildren) {
                    // FIX: Remove 'coa-tree-level' from child ULs - only root should have it
                    const childWrap = $('<ul class="coa-children collapsed"></ul>');
                    container.append(childWrap);
                    (node.children || []).forEach(child => renderCoaNode(child, childWrap));

                    // Click on toggle to expand/collapse
                    row.find('.coa-toggle').on('click', function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        childWrap.toggleClass('collapsed');
                        $(this).html(childWrap.hasClass('collapsed') ?
                            '<i class="fas fa-chevron-right"></i>' :
                            '<i class="fas fa-chevron-down"></i>');
                        // Re-init sortable on newly visible child lists
                        initLeftCoaSortable();
                    });
                }
            }

            function renderLeftCoaTree(search = '') {
                ensureCoaRoot();

                const wrap = $('#coa-root-level');
                wrap.empty();

                const tipeLaporan = (
                    $('#input-tipe-laporan').val() || 'Neraca'
                ).toLowerCase();

                const q = (search || '').toLowerCase();

                const neracaTypes = ['neraca', 'neracanew'];

                let filtered = coaOptions.filter(item => {
                    const coaJenis = (item.jenis_laporan || '').toLowerCase();

                    // Neraca dan NeracaNew dianggap satu kelompok
                    if (neracaTypes.includes(tipeLaporan)) {
                        return neracaTypes.includes(coaJenis);
                    }

                    // Laba Rugi tetap sesuai jenisnya sendiri
                    return coaJenis === tipeLaporan;
                });

                if (q !== '') {
                    filtered = filtered.filter(item =>
                        `${item.id} ${item.nama}`
                        .toLowerCase()
                        .includes(q)
                    );
                }

                buildCoaTree(filtered).forEach(node => {
                    renderCoaNode(node, wrap);
                });

                initLeftCoaSortable();
            }

            // Generate unique temporary ID
            function generateTempId() {
                return 'temp_' + (++tempIdCounter);
            }

            // Create group item (not tied to any COA)
            function createGroupItem(groupName = 'New Group', tempId = null) {
                if (!tempId) {
                    tempId = generateTempId();
                }

                const groupLi = $('<li>', {
                    class: 'coa-drop-item',
                    'data-is-group': '1',
                    'data-temp-id': tempId,
                    'data-id-template-data': '',
                    'data-id-coa': '',
                    'data-kode': '',
                    'data-nama': groupName
                });

                groupLi.html(`
                    <div class="coa-chip d-flex align-items-center justify-content-between" style="background: #f0f7ff; border-left: 3px solid #0d6efd;">
                        <div class="d-flex align-items-center flex-grow-1">
                            <span class="coa-toggle empty"><i class="fas fa-chevron-right"></i></span>
                            <i class="fas fa-grip-vertical field-card-handle me-2"></i>
                            <i class="fas fa-folder text-primary me-2"></i>
                            <input type="text" class="form-control form-control-sm coa-custom-name group-name-input"
                                value="${escapeHtml(groupName)}" placeholder="Nama Grup" style="max-width: 200px;">
                        </div>
                        <div class="d-flex align-items-center gap-1">
                            <button type="button" class="icon-btn text-danger btn-remove-item"><i class="fas fa-times"></i></button>
                        </div>
                    </div>
                    <ul class="coa-drop-children collapsed nested-sortable" style="border-left: 3px solid #0d6efd;"></ul>
                `);

                return groupLi;
            }

            // Call this after COA list is loaded
            renderLeftCoaTree();
            $('#coa-search').on('input', function() {
                renderLeftCoaTree($(this).val());
            });


            let previousTipeLaporan = $('#input-tipe-laporan').val() || 'Neraca';

            $('#input-tipe-laporan').on('change', function() {
                const selectEl = this;
                const newTipe = $(selectEl).val();

                // Neraca dan NeracaNew dianggap satu kelompok
                const neracaTypes = ['Neraca', 'NeracaNew'];

                const previousIsNeraca = neracaTypes.includes(previousTipeLaporan);
                const newIsNeraca = neracaTypes.includes(newTipe);

                /*
                 * Tidak perlu warning kalau:
                 *
                 * Neraca -> NeracaNew
                 * NeracaNew -> Neraca
                 */
                if (previousIsNeraca && newIsNeraca) {
                    previousTipeLaporan = newTipe;

                    renderLeftCoaTree($('#coa-search').val());

                    return;
                }

                /*
                 * Warning hanya jika berpindah kelompok:
                 *
                 * Neraca/NeracaNew -> Laba Rugi
                 * Laba Rugi -> Neraca/NeracaNew
                 */
                const bedaKelompok =
                    previousIsNeraca !== newIsNeraca;

                if (bedaKelompok && $('.field-card').length > 0) {

                    Swal.fire({
                        title: 'Apakah Anda Yakin?',
                        text: 'Mengubah tipe laporan akan mengosongkan semua grup dan COA yang sudah dimasukkan.',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#00b7bd',
                        cancelButtonColor: '#ef5350',
                        confirmButtonText: 'Ya, Lanjutkan',
                        cancelButtonText: 'Batal'
                    }).then((result) => {

                        if (result.isConfirmed) {

                            $('#field-cards-container').empty();

                            createDefaultGroups();

                            previousTipeLaporan = newTipe;

                            renderLeftCoaTree(
                                $('#coa-search').val()
                            );

                        } else {

                            // Kembalikan ke tipe sebelumnya
                            $(selectEl).val(previousTipeLaporan);
                        }

                    });

                } else {

                    previousTipeLaporan = newTipe;

                    renderLeftCoaTree(
                        $('#coa-search').val()
                    );
                }
            });

            // Modified: Serialize form data including groups
            function serializeFormData() {
                const fields = [];

                $('.field-card').each(function(fieldIndex) {
                    const card = $(this);
                    const fieldData = {
                        id_field: card.attr('data-id-field') || '',
                        nama: card.find('.field-input-nama').val() || '',
                        type: card.find('.field-input-type').val() || 'Details',
                        urut: fieldIndex + 1,
                        isactive: '1',
                        template_data: []
                    };

                    let rowIndex = 0;

                    function collectRows(ulElement, parentId = null) {
                        $(ulElement).children('.coa-drop-item').each(function() {
                            const li = $(this);
                            const isGroup = li.attr('data-is-group') === '1';
                            const idTemplateData = li.attr('data-id-template-data') || '';
                            const idCoa = li.attr('data-id-coa') || '';
                            const tempId = li.attr('data-temp-id') || '';
                            const kode = li.attr('data-kode') || '';

                            let nama;
                            if (isGroup) {
                                nama = li.find('.group-name-input').first().val() ||
                                    'Untitled Group';
                            } else {
                                nama = li.find('.coa-custom-name').first().val() || li.attr(
                                    'data-nama') || '';
                            }

                            const rowData = {
                                id_template_data: idTemplateData,
                                temp_id: tempId || idTemplateData ||
                                    idCoa, // Use temp_id for mapping
                                id_coa: isGroup ? '' : idCoa,
                                is_group: isGroup ? '1' : '0',
                                id_parent: parentId || '',
                                kode: kode,
                                nama: nama,
                                urut: ++rowIndex,
                                isactive: '1'
                            };

                            fieldData.template_data.push(rowData);

                            // Recursively collect children
                            const childUl = li.children('ul.nested-sortable');
                            if (childUl.length > 0) {
                                // Use temp_id or id_template_data as parent reference
                                const currentId = tempId || idTemplateData || idCoa;
                                collectRows(childUl, currentId);
                            }
                        });
                    }

                    collectRows(card.find('.field-root-list'));
                    fields.push(fieldData);
                });

                return fields;
            }

            // submit handler is defined once below (#{{ $dmenu }}-form)

            // Modified: Render tree nodes including groups
            function renderTreeNodes(items, container, isEdit = false) {
                if (!items || items.length === 0) return;

                items.forEach(function(item) {
                    const isGroup = item.is_group === '1' || item.is_group === 1;

                    const coaEl = $('<li>', {
                        class: 'coa-drop-item',
                        'data-is-group': isGroup ? '1' : '0',
                        'data-id-template-data': item.id_template_data || '',
                        'data-id-coa': isGroup ? '' : (item.id_coa || ''),
                        'data-temp-id': item.temp_id || '',
                        'data-kode': item.kode || '',
                        'data-nama': item.nama || ''
                    });

                    const hasChildren = item.children && item.children.length > 0;

                    if (isGroup) {
                        // Render as group
                        coaEl.html(`
                            <div class="coa-chip d-flex align-items-center justify-content-between" style="background: #f0f7ff; border-left: 3px solid #0d6efd;">
                                <div class="d-flex align-items-center flex-grow-1">
                                    <span class="coa-toggle ${hasChildren ? '' : 'empty'}"><i class="fas fa-chevron-right"></i></span>
                                    <i class="fas fa-grip-vertical field-card-handle me-2"></i>
                                    <i class="fas fa-folder text-primary me-2"></i>
                                    <input type="text" class="form-control form-control-sm coa-custom-name group-name-input"
                                        value="${escapeHtml(item.nama)}" placeholder="Nama Grup" style="max-width: 200px;">
                                </div>
                                <div class="d-flex align-items-center gap-1">
                                    <button type="button" class="icon-btn text-danger btn-remove-item"><i class="fas fa-times"></i></button>
                                </div>
                            </div>
                            <ul class="coa-drop-children collapsed nested-sortable" style="border-left: 3px solid #0d6efd;"></ul>
                        `);
                    } else {
                        // Render as COA
                        coaEl.html(`
                            <div class="coa-chip d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center flex-grow-1">
                                    <span class="coa-toggle ${hasChildren ? '' : 'empty'}"><i class="fas fa-chevron-right"></i></span>
                                    <i class="fas fa-grip-vertical field-card-handle me-2"></i>
                                    <input type="text" class="form-control form-control-sm coa-custom-name"
                                        value="${escapeHtml(item.nama)}" placeholder="Nama custom">
                                    <span class="text-xs text-muted ms-2">(${escapeHtml(item.kode || item.id_coa)})</span>
                                </div>
                                <div class="d-flex align-items-center gap-1">
                                    <button type="button" class="icon-btn text-danger btn-remove-item"><i class="fas fa-times"></i></button>
                                </div>
                            </div>
                            <ul class="coa-drop-children collapsed nested-sortable"></ul>
                        `);
                    }

                    container.append(coaEl);

                    // Recursively render children
                    if (hasChildren) {
                        const childUl = coaEl.find('ul.nested-sortable').first();
                        renderTreeNodes(item.children, childUl, isEdit);
                    }
                });
            }

            // Initialize nested sortable
            function initNestedSortables(fieldCard) {
                $(fieldCard).find('.field-root-list, .nested-sortable').each(function() {
                    if (this.sortableInstance) {
                        return;
                    }

                    this.sortableInstance = new Sortable(this, {
                        group: 'shared',
                        handle: '.field-card-handle',
                        draggable: '.coa-drop-item, .coa-item',
                        animation: 150,
                        fallbackOnBody: true,
                        swapThreshold: 0.65,
                        ghostClass: 'sortable-ghost',
                        chosenClass: 'sortable-chosen',
                        dragClass: 'sortable-drag',
                        onAdd: function(evt) {
                            const el = evt.item;
                            if (el.classList.contains('coa-item')) {
                                const idCoa = el.getAttribute('data-id-coa') || '';
                                const nodeFromTree = findNodeById(fullCoaTree, idCoa);
                                if (nodeFromTree) {
                                    const nestedEl = createNestedCoaDropItem(nodeFromTree);
                                    el.replaceWith(nestedEl);
                                    initNestedSortables(nestedEl);
                                }
                            }
                            updateGroupListSidebar();
                        },
                        onEnd: function() {
                            updateGroupListSidebar();
                        }
                    });
                });
            }

            // Toggle for drop items
            $(document).on('click', '.coa-drop-item > .coa-chip .coa-toggle', function(e) {
                e.preventDefault();
                const li = $(this).closest('.coa-drop-item');
                const childUl = li.children('ul.nested-sortable');
                if (childUl.length) {
                    childUl.toggleClass('collapsed');
                    $(this).html(childUl.hasClass('collapsed') ? '<i class="fas fa-chevron-right"></i>' :
                        '<i class="fas fa-chevron-down"></i>');
                }
            });

            function initLeftCoaSortable() {
                // Make ALL coa lists (root and children) sortable sources
                document.querySelectorAll('#coa-tree-wrap .coa-tree-level, #coa-tree-wrap .coa-children').forEach(
                    function(list) {
                        if (list.sortableInstance) list.sortableInstance.destroy();
                        list.sortableInstance = new Sortable(list, {
                            group: {
                                name: 'shared',
                                pull: 'clone',
                                put: false
                            },
                            sort: false,
                            draggable: '.coa-item',
                            animation: 150,
                            fallbackOnBody: true
                        });
                    });
            }

            function createFieldCard(fieldData = null) {
                fieldCounter++;
                const defaultName = (fieldData && fieldData.nama) ? fieldData.nama : `Group ${fieldCounter}`;
                const defaultType = (fieldData && fieldData.type) ? fieldData.type : 'Details';
                const defaultUrut = (fieldData && fieldData.urut) ? fieldData.urut : fieldCounter;
                const defaultIdField = (fieldData && fieldData.id_field) ? fieldData.id_field : '';
                const badgeClass = defaultType === 'Total' ? 'bg-warning' : 'bg-info';

                const cardHtml = `
                    <div class="col-12 field-card">
                        <div class="card shadow-none border">
                            <div class="card-header bg-light py-2 d-flex justify-content-between align-items-center">
                                <div class="d-flex align-items-center gap-2">
                                    <i class="fas fa-arrows-alt-v text-secondary ms-2 cursor-move"></i>
                                    <input type="hidden" class="field-input-id" value="${escapeHtml(defaultIdField)}">
                                    <input type="text" class="form-control form-control-sm w-auto field-input-nama" value="${escapeHtml(defaultName)}">
                                    <input type="hidden" class="field-input-type" value="${escapeHtml(defaultType)}">
                                    <input type="number" class="form-control form-control-sm field-input-urut field-position-input" value="${escapeHtml(defaultUrut)}" readonly disabled>
                                    <button type="button" class="btn btn-sm btn-light mb-0 btn-move-up" title="Naik"><i class="fas fa-chevron-up"></i></button>
                                    <button type="button" class="btn btn-sm btn-light mb-0 btn-move-down" title="Turun"><i class="fas fa-chevron-down"></i></button>
                                    <span class="badge ${badgeClass} field-type-badge">${escapeHtml(defaultType)}</span>
                                </div>
                                <div class="d-flex align-items-center gap-2">
                                    <button type="button" class="btn btn-sm btn-danger mb-0 btn-remove-field">Hapus Field</button>
                                </div>
                            </div>
                            <div class="card-body py-3 coa-container">
                                <ul class="nested-sortable field-root-list min-h-50" style="min-height: 50px; border: 2px dashed #ced4da; padding-bottom: 20px;"></ul>
                            </div>
                        </div>
                    </div>
                `;

                const card = $(cardHtml);
                $('#field-cards-container').append(card);
                $('#empty-field-note').hide();
                initNestedSortables(card[0]);
                return card;
            }

            // Helper function to escape HTML
            function escapeHtml(text) {
                const map = {
                    '&': '&amp;',
                    '<': '&lt;',
                    '>': '&gt;',
                    '"': '&quot;',
                    "'": '&#039;'
                };
                return String(text).replace(/[&<>"']/g, m => map[m]);
            }

            $('#btn-add-field-top').click(function() {
                $('#groupTypeModal').modal('show');
            });

            $('#btn-confirm-group-type').click(function() {
                const selectedType = $('input[name="groupType"]:checked').val();
                const card = createFieldCard();
                card.find('.field-input-type').val(selectedType);
                card.find('.field-type-badge').text(selectedType).removeClass('bg-info bg-warning')
                    .addClass(selectedType === 'Total' ? 'bg-warning' : 'bg-info');
                $('#groupTypeModal').modal('hide');
                initNestedSortables(document.getElementById('field-cards-container'));
                updateFieldPositions();
            });

            $(document).on('click', '.btn-remove-field', function() {
                const card = $(this).closest('.field-card');
                Swal.fire({
                    title: 'Apakah Anda Yakin?',
                    text: 'Grup ini beserta seluruh COA di dalamnya akan dihapus.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#00b7bd',
                    cancelButtonColor: '#ef5350',
                    confirmButtonText: 'Ya, Hapus',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        card.remove();
                        updateFieldPositions();
                        if ($('.field-card').length === 0) {
                            $('#empty-field-note').show();
                        }
                    }
                });
            });

            $(document).on('click', '.btn-move-up', function() {
                const card = $(this).closest('.field-card');
                const prev = card.prev('.field-card');
                if (prev.length) {
                    card.insertBefore(prev);
                    updateFieldPositions();
                }
            });

            $(document).on('click', '.btn-move-down', function() {
                const card = $(this).closest('.field-card');
                const next = card.next('.field-card');
                if (next.length) {
                    card.insertAfter(next);
                    updateFieldPositions();
                }
            });

            function updateFieldPositions() {
                let position = 1;
                $('.field-card').each(function() {
                    $(this).find('.field-input-urut').val(position);
                    position++;
                });
                updateGroupListSidebar();
            }

            function updateGroupListSidebar() {
                const groupList = $('#group-list-sidebar');
                groupList.empty();

                $('.field-card').each(function() {
                    const card = $(this);
                    const groupName = card.find('.field-input-nama').val() || 'Untitled';
                    const groupType = card.find('.field-input-type').val() || 'Details';

                    // Menghitung semua elemen .coa-drop-item di dalam card ini
                    // Menggunakan .find() agar semua level (nested) terhitung
                    const itemCount = card.find('.field-root-list').find('.coa-drop-item').length;

                    const badgeClass = groupType === 'Total' ? 'bg-warning' : 'bg-info';

                    const groupItem = $(`
            <li class="group-item" draggable="true" data-group-name="${escapeHtml(groupName)}">
                <span>
                    <i class="fas fa-folder me-1"></i>
                    <strong>${escapeHtml(groupName)}</strong>
                    <span class="text-muted ms-1">(${itemCount})</span>
                </span>
                <span class="group-item-badge ${badgeClass}">${groupType}</span>
            </li>
        `);

                    groupList.append(groupItem);
                });

                initGroupDragDrop();
            }

            function initGroupDragDrop() {
                const groupItems = document.querySelectorAll('#group-list-sidebar .group-item');

                groupItems.forEach(item => {
                    item.addEventListener('dragstart', function(e) {
                        e.dataTransfer.effectAllowed = 'copy';
                        e.dataTransfer.setData('text/plain', this.dataset.groupName);
                    });
                });
            }

            $(document).on('click', '.btn-remove-item', function() {
                $(this).closest('.coa-drop-item').remove();
            });
            // Real-time name sync on input
            $(document).on('input', '.field-input-nama', function() {
                updateGroupListSidebar();
            });

            // Watch for COA count changes via MutationObserver
            $(document).on('DOMNodeInserted DOMNodeRemoved', '.field-root-list', function() {
                updateGroupListSidebar();
            });

            // Update data-nama attribute when custom name changes
            $(document).on('input', '.coa-custom-name', function() {
                const newName = $(this).val();
                $(this).closest('.coa-drop-item').attr('data-nama', newName);
            });

            new Sortable(document.getElementById('field-cards-container'), {
                handle: '.cursor-move',
                animation: 150,
                onEnd: function() {
                    updateFieldPositions();
                }
            });

            $('#{{ $dmenu }}-form').on('submit', function(e) {
                e.preventDefault();
                $('#dynamic-hidden-inputs').empty();

                // Update field positions before submission
                updateFieldPositions();

                let payloadData = {
                    fields: []
                };
                let fieldIdx = 0;
                $('.field-card').each(function() {
                    const card = $(this);
                    const idField = card.find('.field-input-id').val();
                    const nama = card.find('.field-input-nama').val();
                    const type = card.find('.field-input-type').val() || 'Details';
                    const urut = fieldIdx + 1; // Use index-based position

                    let fieldObj = {
                        id_field: idField,
                        nama: nama,
                        type: type,
                        urut: urut,
                        template_data: []
                    };

                    let coaIdx = 0;

                    function recurseNodes(ulElement, parentIdxRef = null) {
                        $(ulElement).children('.coa-drop-item').each(function() {
                            const li = $(this);
                            const isGroupContainer = li.hasClass('group-container');
                            const idTemplateData = li.attr('data-id-template-data') || '';
                            const idCoa = li.attr('data-id-coa') || '';
                            const kode = li.attr('data-kode') || '';
                            const customName = li.find('.coa-custom-name').first().val() ||
                                li.attr('data-nama') || '';

                            const currentCoaIdx = coaIdx;

                            // Gunakan prefix folder_ untuk id_coa jika itu adalah grup agar tidak konflik dengan ID COA asli
                            const finalCoaId = isGroupContainer ? ('folder_' + customName
                                .replace(/\s+/g, '_').toLowerCase()) : idCoa;

                            let dataObj = {
                                id_template_data: idTemplateData,
                                id_coa: finalCoaId,
                                kode: isGroupContainer ? 'FOLDER' : kode,
                                nama: customName,
                                urut: coaIdx + 1,
                                id_parent: parentIdxRef
                            };

                            fieldObj.template_data.push(dataObj);
                            coaIdx++;

                            const childUl = li.children('ul.nested-sortable');
                            if (childUl.length > 0) {
                                // Rekursi ke bawah dengan membawa index saat ini sebagai parentIdxRef
                                recurseNodes(childUl, currentCoaIdx);
                            }
                        });
                    }
                    recurseNodes(card.find('.field-root-list'), null);
                    payloadData.fields.push(fieldObj);
                    fieldIdx++;
                });

                const hiddenInput = $('<input type="hidden" name="payload_json">');
                hiddenInput.val(JSON.stringify(payloadData));
                $('#dynamic-hidden-inputs').append(hiddenInput);

                console.log('Form data ready (JSON). Submitting...');
                this.submit();
            });

            function createDefaultGroups() {
                fieldCounter = 0;
                const card1 = createFieldCard();
                card1.find('.field-input-type').val('Details');
                card1.find('.field-type-badge').text('Details').removeClass('bg-info bg-warning').addClass(
                    'bg-info');

                const card2 = createFieldCard();
                card2.find('.field-input-type').val('Details');
                card2.find('.field-type-badge').text('Details').removeClass('bg-info bg-warning').addClass(
                    'bg-info');

                const card3 = createFieldCard();
                card3.find('.field-input-type').val('Total');
                card3.find('.field-type-badge').text('Total').removeClass('bg-info bg-warning').addClass(
                    'bg-warning');
                updateFieldPositions();
            }

            if (oldFields.length === 0) {
                createDefaultGroups();
            } else {
                // Load old fields from validation error or edit page
                oldFields.forEach(fieldData => {
                    const card = createFieldCard(fieldData);
                    // Set type from data
                    if (fieldData.type) {
                        card.find('.field-input-type').val(fieldData.type);
                        card.find('.field-type-badge').text(fieldData.type).removeClass(
                            'bg-info bg-warning').addClass(fieldData.type === 'Total' ? 'bg-warning' :
                            'bg-info');
                    }
                    // Load template data (COAs + nested groups) - handle both flat and tree structures
                    const templateData = fieldData.template_data || [];
                    if (templateData.length > 0) {
                        const fieldRootList = card.find('.field-root-list');

                        // Recursively render tree structure
                        function renderTreeNodes(items, container) {
                            if (!Array.isArray(items)) return;

                            items.forEach(item => {
                                const coaEl = document.createElement('div');
                                coaEl.className = 'coa-drop-item';

                                // Detect if item is a group (synthetic COA ID starts with 'folder_' or is in children)
                                const isGroup = (item.id_coa && item.id_coa.toString().startsWith(
                                        'folder_')) ||
                                    (item.kode === 'FOLDER') ||
                                    (item.children && item.children.length > 0);

                                if (isGroup) {
                                    coaEl.classList.add('group-container');
                                }

                                coaEl.setAttribute('data-id-template-data', item.id_template_data ||
                                    '');
                                coaEl.setAttribute('data-id-coa', item.id_coa || '');
                                coaEl.setAttribute('data-kode', item.kode || '');
                                coaEl.setAttribute('data-nama', item.nama || '');

                                const hasChildren = item.children && item.children.length > 0;

                                if (isGroup) {
                                    // Render as group container
                                    coaEl.innerHTML = `
                                <div class="coa-chip d-flex align-items-center justify-content-between" style="background: #f0f7ff; border-left: 3px solid #0d6efd;">
                                    <div class="d-flex align-items-center flex-grow-1">
                                        <i class="fas fa-folder text-primary me-2"></i>
                                        <span class="fw-bold text-primary">${escapeHtml(item.nama)}</span>
                                    </div>
                                    <div class="d-flex align-items-center gap-1">
                                        <button type="button" class="icon-btn text-danger btn-remove-item"><i class="fas fa-times"></i></button>
                                    </div>
                                </div>
                                <ul class="coa-tree-level nested-sortable empty-container min-h-30" style="min-height: 15px; border-left: 3px solid #0d6efd; margin-left:1rem; padding-bottom:5px;"></ul>
                            `;
                                } else {
                                    // Render as COA item
                                    coaEl.innerHTML = `
                                <div class="coa-chip d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-center flex-grow-1">
                                        <i class="fas fa-grip-vertical field-card-handle me-2"></i>
                                        <input type="text" class="form-control form-control-sm coa-custom-name" value="${escapeHtml(item.nama)}" placeholder="Nama custom">
                                        <span class="text-xs text-muted ms-2">(${escapeHtml(item.kode || item.id_coa)})</span>
                                    </div>
                                    <div class="d-flex align-items-center gap-1">
                                        <button type="button" class="icon-btn text-danger btn-remove-item"><i class="fas fa-times"></i></button>
                                    </div>
                                </div>
                                <ul class="coa-tree-level nested-sortable empty-container min-h-30" style="min-height: 15px; border-left: 1px dashed #ced4da; margin-left:1rem; padding-bottom:5px;"></ul>
                            `;
                                }

                                container.append(coaEl);

                                // Recursively render children
                                if (hasChildren) {
                                    const childUl = coaEl.querySelector('ul.nested-sortable');
                                    renderTreeNodes(item.children, $(childUl));
                                }
                            });
                        }

                        renderTreeNodes(templateData, fieldRootList);
                        initNestedSortables(card[0]);
                    }
                });
            }
            updateGroupListSidebar();
            updateGroupListSidebar();

            // Preview functionality
            $('#btn-preview').click(function() {
                const previewBody = $('#preview-body');
                previewBody.empty();

                if ($('.field-card').length === 0) {
                    previewBody.html(
                        '<p class="text-secondary">Belum ada field template untuk di-preview.</p>');
                    $('#previewModal').modal('show');
                    return;
                }

                const tipeLaporan = $('#input-tipe-laporan').val() || 'Neraca';

                if (tipeLaporan === 'Laba-Rugi') {
                    // ===== LABA-RUGI: Report format =====
                    let html = `
                        <div style="overflow-x:auto; border:1px solid #a7d6d6; border-radius:8px;">
                        <table style="width:100%; border-collapse:collapse; font-size:13px;">
                        <thead style="position:sticky; top:0; z-index:10;">
                            <tr style="background-color:#b0e9eb;">
                                <th style="border:1px solid #a7d6d6; padding:10px; width:60%; text-align:left; font-weight:700;">Keterangan / Description</th>
                                <th style="border:1px solid #a7d6d6; padding:10px; width:20%; text-align:right; font-weight:700;">Bulan Berjalan</th>
                                <th style="border:1px solid #a7d6d6; padding:10px; width:20%; text-align:right; font-weight:700;">Bulan Sebelumnya</th>
                            </tr>
                        </thead>
                        <tbody>`;

                    const fieldsList = [];
                    $('.field-card').each(function(idx) {
                        const card = $(this);
                        fieldsList.push({
                            nama: card.find('.field-input-nama').val() || 'Untitled',
                            type: card.find('.field-input-type').val() || 'Details',
                            card: card,
                            idx: idx
                        });
                    });

                    const merged = [];
                    for (let i = 0; i < fieldsList.length; i++) {
                        const f = fieldsList[i];
                        if (f.type === 'Total' && i + 1 < fieldsList.length &&
                            fieldsList[i + 1].type === 'Details' &&
                            fieldsList[i + 1].nama === f.nama) {
                            merged.push({
                                ...f,
                                hasDetails: true,
                                detailCard: fieldsList[i + 1].card
                            });
                            i++;
                        } else {
                            merged.push({
                                ...f,
                                hasDetails: f.type === 'Details',
                                detailCard: f.type === 'Details' ? f.card : null
                            });
                        }
                    }

                    let globalRowId = 0;
                    merged.forEach(function(field, idx) {
                        const isSubtotal = field.nama.toUpperCase().includes('LABA') || field.nama
                            .toUpperCase().includes('RUGI');
                        const isFinal = idx === merged.length - 1;
                        let bg = '#f0f4f8';
                        let fw = 'font-weight:600;';
                        if (isFinal) {
                            bg = 'rgba(0,183,189,0.3)';
                            fw = 'font-weight:800;';
                        } else if (isSubtotal) {
                            bg = '#e8f5e9';
                            fw = 'font-weight:700;';
                        }

                        const expandIcon = field.hasDetails ?
                            `<span style="font-size:0.7rem; color:#6c757d; margin-right:4px; cursor:pointer;" class="preview-toggle-lr" data-target="preview-lr-${idx}">\u25bc</span>` :
                            '';
                        html += `<tr style="background-color:${bg};">`;
                        html +=
                            `<td style="border:1px solid #a7d6d6; padding:6px 10px; ${fw} text-transform:uppercase;">${expandIcon}${escapeHtml(field.nama)}</td>`;
                        html +=
                            `<td style="border:1px solid #a7d6d6; padding:6px 10px; text-align:right; ${fw}">0,00</td>`;
                        html +=
                            `<td style="border:1px solid #a7d6d6; padding:6px 10px; text-align:right; ${fw}">0,00</td>`;
                        html += `</tr>`;

                        if (field.hasDetails && field.detailCard) {
                            (function renderPreviewLR(ulElement, depth, parentClass) {
                                $(ulElement).children('.coa-drop-item').each(function() {
                                    const li = $(this);
                                    const idCoa = li.attr('data-id-coa') || '';
                                    const customName = li.find('.coa-custom-name')
                                        .first().val() || li.attr('data-nama') || '';
                                    const indent = (depth * 24) + 10;
                                    const hasKids = li.children('ul.nested-sortable')
                                        .children('.coa-drop-item').length > 0;
                                    const myRowId = 'preview-lr-row-' + (globalRowId++);
                                    const kidToggle = hasKids ?
                                        `<span style="font-size:0.65rem; color:#6c757d; margin-right:4px; cursor:pointer;" class="preview-toggle-lr" data-target="${myRowId}">\u25b6</span>` :
                                        '<span style="width:14px; display:inline-block;"></span>';
                                    html +=
                                        `<tr class="${parentClass}" style="${depth > 0 ? 'display:none;' : ''}">`;
                                    html +=
                                        `<td style="border:1px solid #a7d6d6; padding:5px 10px;"><div style="padding-left:${indent}px;">${kidToggle}<span style="font-size:12px;">${escapeHtml(idCoa)} - ${escapeHtml(customName)}</span></div></td>`;
                                    html +=
                                        `<td style="border:1px solid #a7d6d6; padding:5px 10px; text-align:right; font-size:12px;">0,00</td>`;
                                    html +=
                                        `<td style="border:1px solid #a7d6d6; padding:5px 10px; text-align:right; font-size:12px;">0,00</td>`;
                                    html += `</tr>`;
                                    const childUl = li.children('ul.nested-sortable');
                                    if (childUl.length > 0) renderPreviewLR(childUl,
                                        depth + 1, myRowId);
                                });
                            })(field.detailCard.find('.field-root-list'), 0, 'preview-lr-' + idx);
                        }

                        if (isSubtotal || isFinal) {
                            html +=
                                `<tr><td colspan="3" style="height:6px; border:1px solid #a7d6d6;"></td></tr>`;
                        }
                    });

                    html += '</tbody></table></div>';
                    previewBody.html(html);

                    previewBody.find('.preview-toggle-lr').on('click', function() {
                        const target = $(this).data('target');
                        const rows = previewBody.find('tr.' + target);
                        const isVisible = rows.first().is(':visible');
                        if (isVisible) {
                            rows.hide();
                            rows.find('.preview-toggle-lr').text('\u25b6');
                            rows.each(function() {
                                const childTarget = $(this).find('.preview-toggle-lr').data(
                                    'target');
                                if (childTarget) previewBody.find('tr.' + childTarget)
                                    .hide();
                            });
                        } else {
                            rows.show();
                        }
                        $(this).text(isVisible ? '\u25b6' : '\u25bc');
                    });
                } else {
                    $('.field-card').each(function() {
                        const card = $(this);
                        const fieldName = card.find('.field-input-nama').val() || 'Untitled Field';
                        const fieldType = card.find('.field-input-type').val() || 'Details';
                        let previewHtml =
                            `<div class="template-table-container mb-3" style="border: 1px solid #dee2e6; border-radius: 0.375rem; overflow: hidden;"><div style="background-color: #3d8b8b; color: white; padding: 12px; font-weight: 600;">${escapeHtml(fieldName)} ${fieldType === 'Total' ? '<span style="font-size:0.8em;margin-left:8px;">\u2211 Total</span>' : ''}</div>`;

                        if (fieldType === 'Total') {
                            let totalCount = 0;
                            (function countRows(ulElement) {
                                $(ulElement).children('.coa-drop-item').each(function() {
                                    totalCount++;
                                    const childUl = $(this).children(
                                        'ul.nested-sortable');
                                    if (childUl.length > 0) countRows(childUl);
                                });
                            })(card.find('.field-root-list'));
                            previewHtml +=
                                `<table style="width:100%;border-collapse:collapse;"><tbody><tr style="background-color:#f8f9fa;"><td style="padding:12px;text-align:left;font-weight:600;">Total Item</td><td style="padding:12px;text-align:right;font-weight:600;">${totalCount}</td></tr></tbody></table>`;
                        } else {
                            previewHtml +=
                                `<table style="width:100%;border-collapse:collapse;"><thead style="background-color: rgba(61, 139, 139, 0.3); color: #3d8b8b;"><tr><th style="padding:12px;text-align:left;width:80px;">No.</th><th style="padding:12px;text-align:left;">Nama Rekening</th><th style="padding:12px;text-align:left;">No. COA</th></tr></thead><tbody>`;
                            let rowNumber = 1;
                            (function renderRows(ulElement, level = 0) {
                                $(ulElement).children('.coa-drop-item').each(function() {
                                    const li = $(this);
                                    const idCoa = li.attr('data-id-coa') || '-';
                                    const customName = li.find('.coa-custom-name')
                                        .first().val() || li.attr('data-nama') ||
                                        'Unknown';
                                    previewHtml +=
                                        `<tr><td style="padding:10px 12px;border-bottom:1px solid #e9ecef;">${rowNumber}</td><td style="padding:10px 12px;border-bottom:1px solid #e9ecef;"><span style="margin-left:${level * 20}px;">${escapeHtml(customName)}</span></td><td style="padding:10px 12px;border-bottom:1px solid #e9ecef;">${escapeHtml(idCoa)}</td></tr>`;
                                    rowNumber++;
                                    const childUl = li.children('ul.nested-sortable');
                                    if (childUl.length > 0) renderRows(childUl, level +
                                        1);
                                });
                            })(card.find('.field-root-list'), 0);
                            if (rowNumber === 1) previewHtml +=
                                `<tr><td colspan="3" style="padding:20px;text-align:center;color:#6c757d;">Belum ada COA pada field ini</td></tr>`;
                            previewHtml += '</tbody></table>';
                        }
                        previewHtml += '</div>';
                        previewBody.append(previewHtml);
                    });
                }

                $('#previewModal').modal('show');
            });

            function formatNumber(num) {
                return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            }
        });
    </script>
@endpush