@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;
        }

        .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 {
            margin-left: 0.75rem;
            padding-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 . '/' . $idencrypt) }}" id="{{ $dmenu }}-form">
        @csrf
        @method('PUT')
        <input type="hidden" name="isactive" value="{{ $list->isactive }}">

        <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">Edit 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->edit == '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>

        <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', $list->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', $list->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_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>

    <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"></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;

            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 initialFields = {!! json_encode(old('fields', $field_templates)) !!};

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

            function ensureCoaRoot() {
                if ($('#coa-tree-wrap .coa-tree-level').length === 0) {
                    $('#coa-tree-wrap').html('<ul 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-is-group', '0');
                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) {
                    const childWrap = $('<ul class="coa-tree-level coa-children collapsed"></ul>');
                    container.append(childWrap);
                    (node.children || []).forEach(child => renderCoaNode(child, childWrap));
                    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-tree-wrap')
                    .children('.coa-tree-level')
                    .first();
                wrap.empty();

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

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

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

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

                    // Kalau tipe yang dipilih Neraca / NeracaNew,
                    // tampilkan COA dari kedua jenis tersebut
                    if (neracaTypes.includes(tipeLaporan)) {
                        return neracaTypes.includes(coaJenis);
                    }

                    // Selain Neraca, tetap exact match
                    return coaJenis === tipeLaporan;
                });

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

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

                initLeftCoaSortable();
            }

            function initLeftCoaSortable() {
                // Make ALL coa-tree-level lists (root and children) sortable sources
                document.querySelectorAll('#coa-tree-wrap .coa-tree-level').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 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,
                        onAdd: function(evt) {
                            const el = evt.item;
                            if (el.classList.contains('coa-item')) {
                                const idCoa = el.getAttribute('data-id-coa') || '';
                                const node = findNodeById(fullCoaTree, idCoa);
                                if (node) {
                                    const nestedEl = createNestedCoaDropItem(node);
                                    el.replaceWith(nestedEl);
                                    initNestedSortables(nestedEl);
                                }
                            }
                        }
                    });
                });
            }

            // 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 renderTreeNodes(items, container) {
                if (!Array.isArray(items) || items.length === 0) return;
                items.forEach(item => {
                    const isGroup = item.is_group === '1' || item.is_group === 1 || item.id_coa === '' ||
                        item.id_coa === null;
                    const coaId = item.id_coa || item.kode || '';

                    // Render exactly as it is in the database

                    const el = document.createElement('li');
                    el.className = 'coa-drop-item';
                    el.setAttribute('data-is-group', isGroup ? '1' : '0');
                    el.setAttribute('data-id-template-data', item.id_template_data || '');
                    el.setAttribute('data-id-coa', isGroup ? '' : coaId);
                    el.setAttribute('data-kode', item.kode || '');
                    el.setAttribute('data-nama', item.nama || '');

                    if (isGroup) {
                        el.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">
                            <span class="coa-toggle ${item.children && item.children.length ? '' : '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 {
                        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 ${item.children && item.children.length ? '' : '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(el);
                    if (item.children && item.children.length > 0) renderTreeNodes(item.children, $(el)
                        .children('ul.nested-sortable').first());
                });
            }

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

                const card = $(`
            <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>
                        <button type="button" class="btn btn-sm btn-danger mb-0 btn-remove-field">Hapus Field</button>
                    </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>
        `);

                $('#field-cards-container').append(card);
                $('#empty-field-note').hide();

                if (fieldData?.template_data && Array.isArray(fieldData.template_data) && fieldData.template_data
                    .length > 0) {
                    renderTreeNodes(fieldData.template_data, card.find('.field-root-list'));
                }

                initNestedSortables(card[0]);
                return card;
            }

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

            function serializeFormData() {
                $('#dynamic-hidden-inputs').empty();
                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;

                    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 isGroup = li.attr('data-is-group') === '1';
                            const idTemplateData = li.attr('data-id-template-data') || '';
                            const idCoa = li.attr('data-id-coa') || '';
                            const kode = li.attr('data-kode') || '';
                            const nameValue = li.find('.coa-custom-name').first().val() || li.attr(
                                'data-nama') || '';
                            const currentIdx = coaIdx;

                            let dataObj = {
                                id_template_data: idTemplateData,
                                is_group: isGroup ? '1' : '0',
                                id_coa: isGroup ? '' : idCoa,
                                kode: isGroup ? 'FOLDER' : kode,
                                nama: nameValue,
                                urut: coaIdx + 1,
                                id_parent: parentIdxRef
                            };

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

                            const childUl = li.children('ul.nested-sortable');
                            if (childUl.length > 0) recurseNodes(childUl, currentIdx);
                        });
                    }

                    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);
            }

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

            renderLeftCoaTree();
            $('#coa-search').on('input', function() {
                renderLeftCoaTree($(this).val());
            });

            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();
            }

            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);

                if (previousIsNeraca && newIsNeraca) {
                    previousTipeLaporan = newTipe;

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

                    return;
                }

                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()
                    );
                }
            });

            if (Array.isArray(initialFields) && initialFields.length > 0) {
                initialFields.forEach(field => createFieldCard(field));
            } else {
                $('#empty-field-note').show();
            }
            updateFieldPositions();

            $('#btn-add-field-top').on('click', function() {
                $('#groupTypeModal').modal('show');
            });
            $('#btn-confirm-group-type').on('click', function() {
                const selectedType = $('input[name="groupType"]:checked').val() || 'Details';
                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');
                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();
                }
            });

            $(document).on('click', '.btn-remove-item', function() {
                $(this).closest('.coa-drop-item').remove();
            });
            $(document).on('input', '.coa-custom-name', function() {
                $(this).closest('.coa-drop-item').attr('data-nama', $(this).val());
            });

            $('#{{ $dmenu }}-form').on('submit', function(e) {
                e.preventDefault();
                serializeFormData();
                this.submit();
            });

            $('#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') {
                    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 = fieldsList.map(f => ({
                        ...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 rowClass = parentClass;
                                    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="${rowClass}" 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('▶');
                            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 ? '▶' : '▼');
                    });
                } 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;">∑ 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');
            });
        });
    </script>
@endpush