_id('underground').appendChild(
    div().html(`
            <table id="tabledata" class="display" style="width:100%">
                <thead style="min-width:100%">
                    <tr id="headn1">
                        <th>#</th>
                        <th>Kode</th>
                        <th>Nama Rek.</th>
                        <th>D/K</th>
                        <th>Kel. Aruskas</th>
                    </tr>
                </thead>
                <tfoot style="min-width:100%" >
                    <tr id="headn2">
                        <th>#</th>
                        <th>Kode</th>
                        <th>Nama Rek.</th>
                        <th>D/K</th>
                        <th>Kel. Aruskas</th>
                    </tr>
                </tfoot>
            </table>
        `).get()
);

Array.from(document.querySelectorAll('.nav-tabs .nav-link')).forEach(function (tabs) {
    tabs.addEventListener('click', function () {
        var g = this.getAttribute('data-kode');
        if (g === 'main') {
            _id('coatitle').innerHTML = 'Main Rek. COA';
            var pos = ['#', 'Kode', 'Nama Rek.', 'D/K'];
            pos = pos.map(function (a) {
                return `<th>${a}</th>`;
            }).join('');
            _id('underground').innerHTML = '';
            var nid = Date.now();
            _id('underground').appendChild(
                div().html(`
                        <table id="tabledata${nid}" class="display" style="width:100%">
                            <thead style="min-width:100%">
                                <tr id="headn1">
                                    <th>#</th>
                                    <th>Kode</th>
                                    <th>Nama Rek.</th>
                                    <th>D/K</th>
                                    <th>Kel. Aruskas</th>
                                </tr>
                            </thead>
                            <tfoot style="min-width:100%" >
                                <tr id="headn2">
                                    <th>#</th>
                                    <th>Kode</th>
                                    <th>Nama Rek.</th>
                                    <th>D/K</th>
                                    <th>Kel. Aruskas</th>
                                </tr>
                            </tfoot>
                        </table>
                    `).get()
            );
            objectForm = mainObj;
            __forms();
            globalThis._loadCust = function () {
                table.buttons('.export').remove();
                table = $('#tabledata' + nid).DataTable({
                    dom: 'Bfrtip',
                    scrollY: '200px',
                    scrollX: true,
                    scrollCollapse: true,
                    paging: true,
                    "lengthChange": true,
                    "lengthMenu": [[25, 50, 100, 500, 1000], [25, 50, 100, 500, "Max"]],
                    "pageLength": 50,
                    "columnDefs": [
                        { "width": "59px", "targets": 0 }
                    ],
                    fixedColumns: {
                        left: 1
                    },
                    buttons: [
                        'copy',
                        {
                            title: function () {
                                var titleX = 'Data ' + (function () {
                                    var titleX = '';
                                    if (objectForm.title != undefined) {
                                        titleX = objectForm.title();
                                    }
                                    return titleX;
                                })();
                                return titleX;
                            },
                            extend: 'excel',
                            exportOptions: {
                                columns: objectForm.columnsExport
                            }
                        },
                        {
                            title: 'Data ' + (function () {
                                var titleX = '';
                                if (objectForm.title != undefined) {
                                    titleX = objectForm.title();
                                }
                                return titleX;
                            })(),
                            extend: 'pdf',
                            download: 'open',
                            messageBottom: null,
                            exportOptions: {
                                columns: objectForm.columnsExport
                            },
                            customize: function (doc) {
                                doc.content[0].text = 'Data ' + (function () {
                                    var titleX = '';
                                    if (objectForm.title != undefined) {
                                        titleX = objectForm.title();
                                    }
                                    return titleX;
                                })();
                            }
                        },
                        {
                            title: function () {
                                var titleX = 'Data ' + (function () {
                                    var titleX = '';
                                    if (objectForm.title != undefined) {
                                        titleX = objectForm.title();
                                    }
                                    return titleX;
                                })();
                                return titleX;
                            },
                            extend: 'print',
                            exportOptions: {
                                columns: objectForm.columnsExport
                            },
                            messageBottom: null,
                            customize: function (doc) {
                            }
                        }
                    ]
                });
                _load();
            };
            globalThis._loadCust();
        };
        if (g === 'rek') {
            _id('coatitle').innerHTML = 'Rek. COA';
            var pos = ['#', 'Kode Main', 'App', 'Nama Rek Utama', 'Kode Rek.', 'Nama Rek Pembatu'];
            pos = pos.map(function (a) {
                return `<th>${a}</th>`;
            }).join('');
            _id('underground').innerHTML = '';
            var nid = Date.now();
            _id('underground').appendChild(
                div().html(`
                        <table id="tabledata${nid}" class="display" style="width:100%">
                            <thead style="min-width:100%">
                                <tr id="headn1">
                                    ${pos}
                                </tr>
                            </thead>
                            <tfoot style="min-width:100%" >
                                <tr id="headn2">
                                    ${pos}
                                </tr>
                            </tfoot>
                        </table>
                    `).get()
            );
            objectForm = rekObj;
            globalThis._loadCust = function () {
                var gld = cssLoader();
                AuditDevQuery(`SELECT kode id, nama text, dk FROM mainacc ORDER BY kode ASC`, function (a) {
                    gld.remove();
                    globalThis.ObjDataMain = a;
                    __forms({ main: { data: globalThis.ObjDataMain } });
                    table.buttons('.export').remove();
                    table = $('#tabledata' + nid).DataTable({
                        dom: 'Bfrtip',
                        scrollY: '200px',
                        scrollX: true,
                        scrollCollapse: true,
                        paging: true,
                        "lengthChange": true,
                        "lengthMenu": [[25, 50, 100, 500, 1000], [25, 50, 100, 500, "Max"]],
                        "pageLength": 50,
                        "columnDefs": [
                            { "width": "59px", "targets": 0 }
                        ],
                        fixedColumns: {
                            left: 1
                        },
                        buttons: [
                            'copy',
                            {
                                title: function () {
                                    var titleX = 'Data ' + (function () {
                                        var titleX = '';
                                        if (objectForm.title != undefined) {
                                            titleX = objectForm.title();
                                        }
                                        return titleX;
                                    })();
                                    return titleX;
                                },
                                extend: 'excel',
                                exportOptions: {
                                    columns: objectForm.columnsExport
                                }
                            },
                            {
                                title: 'Data ' + (function () {
                                    var titleX = '';
                                    if (objectForm.title != undefined) {
                                        titleX = objectForm.title();
                                    }
                                    return titleX;
                                })(),
                                extend: 'pdf',
                                download: 'open',
                                messageBottom: null,
                                exportOptions: {
                                    columns: objectForm.columnsExport
                                },
                                customize: function (doc) {
                                    doc.content[0].text = 'Data ' + (function () {
                                        var titleX = '';
                                        if (objectForm.title != undefined) {
                                            titleX = objectForm.title();
                                        }
                                        return titleX;
                                    })();
                                }
                            },
                            {
                                title: function () {
                                    var titleX = 'Data ' + (function () {
                                        var titleX = '';
                                        if (objectForm.title != undefined) {
                                            titleX = objectForm.title();
                                        }
                                        return titleX;
                                    })();
                                    return titleX;
                                },
                                extend: 'print',
                                exportOptions: {
                                    columns: objectForm.columnsExport
                                },
                                messageBottom: null,
                                customize: function (doc) {
                                }
                            }
                        ]
                    });
                    _load();
                });
            }
            globalThis._loadCust();
        };
        if (g === 'group') {
            _id('coatitle').innerHTML = 'Group Main';
            var pos = ['#', 'Kode Main','Jenis Rek', 'Nama Group'];
            pos = pos.map(function (a) {
                return `<th>${a}</th>`;
            }).join('');
            _id('underground').innerHTML = '';
            var nid = Date.now();
            _id('underground').appendChild(
                div().html(`
                        <table id="tabledata${nid}" class="display" style="width:100%">
                            <thead style="min-width:100%">
                                <tr id="headn1">
                                    ${pos}
                                </tr>
                            </thead>
                            <tfoot style="min-width:100%" >
                                <tr id="headn2">
                                    ${pos}
                                </tr>
                            </tfoot>
                        </table>
                    `).get()
            );
            objectForm = groupObj;
            globalThis._loadCust = function () {
                var gld = cssLoader();
                AuditDevQuery(`SELECT kode id, nama text, dk FROM mainacc ORDER BY kode ASC`, function (a) {
                    gld.remove();
                    globalThis.ObjDataMain = a;
                    __forms({ main: { data: globalThis.ObjDataMain } });
                    table.buttons('.export').remove();
                    table = $('#tabledata' + nid).DataTable({
                        dom: 'Bfrtip',
                        scrollY: '200px',
                        scrollX: true,
                        scrollCollapse: true,
                        paging: true,
                        "lengthChange": true,
                        "lengthMenu": [[25, 50, 100, 500, 1000], [25, 50, 100, 500, "Max"]],
                        "pageLength": 50,
                        "columnDefs": [
                            { "width": "59px", "targets": 0 }
                        ],
                        fixedColumns: {
                            left: 1
                        },
                        buttons: [
                            'copy',
                            {
                                title: function () {
                                    var titleX = 'Data ' + (function () {
                                        var titleX = '';
                                        if (objectForm.title != undefined) {
                                            titleX = objectForm.title();
                                        }
                                        return titleX;
                                    })();
                                    return titleX;
                                },
                                extend: 'excel',
                                exportOptions: {
                                    columns: objectForm.columnsExport
                                }
                            },
                            {
                                title: 'Data ' + (function () {
                                    var titleX = '';
                                    if (objectForm.title != undefined) {
                                        titleX = objectForm.title();
                                    }
                                    return titleX;
                                })(),
                                extend: 'pdf',
                                download: 'open',
                                messageBottom: null,
                                exportOptions: {
                                    columns: objectForm.columnsExport
                                },
                                customize: function (doc) {
                                    doc.content[0].text = 'Data ' + (function () {
                                        var titleX = '';
                                        if (objectForm.title != undefined) {
                                            titleX = objectForm.title();
                                        }
                                        return titleX;
                                    })();
                                }
                            },
                            {
                                title: function () {
                                    var titleX = 'Data ' + (function () {
                                        var titleX = '';
                                        if (objectForm.title != undefined) {
                                            titleX = objectForm.title();
                                        }
                                        return titleX;
                                    })();
                                    return titleX;
                                },
                                extend: 'print',
                                exportOptions: {
                                    columns: objectForm.columnsExport
                                },
                                messageBottom: null,
                                customize: function (doc) {
                                }
                            }
                        ]
                    });
                    _load();
                });
            }
            globalThis._loadCust();
        };
    }, false);
});


function updateLocal(){
    fetch('{{PATH}}/api/local/data/acc')
    .then(function(r){
        return r.json();
    })
    .then(function(r){
        console.log(r);
    })
    .catch(function(r){
        console.log(r);
    })
}

updateLocal();

globalThis._update = function(){
    updateLocal();
}

globalThis._insert = function(){
    updateLocal();
}