koperasi/script/report.js

window.popupCenter = ({ url, title, w, h }) => {
    // Fixes dual-screen position                             Most browsers      Firefox
    const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : window.screenX;
    const dualScreenTop = window.screenTop !== undefined ? window.screenTop : window.screenY;

    const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
    const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

    const systemZoom = width / window.screen.availWidth;
    const left = (width - w) / 2 / systemZoom + dualScreenLeft;
    const top = (height - h) / 2 / systemZoom + dualScreenTop;
    const newWindow = window.open(url, title,
        `
      scrollbars=yes,
      width=${w / systemZoom}, 
      height=${h / systemZoom}, 
      top=${top}, 
      left=${left}
      `
    )

    if (window.focus) newWindow.focus();
}

const ReportArea = _id('cardMenuArea');

const ReportMenu = _id('cardMenuReport');

const SubLap = _id('sublap');

const search = _id('searchInput');

const loaderS = _id('loaderSearch');

let _rightPanelReport = document.querySelector('.content-header-right');

window._filter = function (nx) {
    let d = el('div');
    d.class('modal-filter').css({
        position: 'fixed',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        top: '0',
        left: '0',
        width: '100vw',
        height: '100vh',
        overflow: 'auto',
        background: 'rgba(125,125,125,0.5)',
        zIndex: '1524',
    })
    let ct = div().css('background', 'white').radius('8px').width('320px').padding('18px')
    let dt = _rpt.getData();
    if (dt.filter != undefined) {
        ct.child(div().css('font-size', '18px').text('Filter Laporan'));
        ct.child(el('hr'));
        let fill = dt.filter;
        Object.keys(fill).forEach(function (n) {
            let ff = fill[n];
            if (ff.type == 'number') {
                let pl = div().css({ marginBottom: '10px', display: 'grid' });
                pl.child(
                    el('label').attr('for', ff.name).text(ff.title)
                )
                pl.child(
                    el('input').hold(0).data('type', ff.type).data('kode', n).class('form-control').type('text').id(ff.name).name(ff.name).class('dim')
                        .load(function (c) {
                            ConfStyle(c.el);
                            c.el.inputRupiah()
                        })
                )
                ct.child(pl)
            }
            if (ff.type == 'text') {
                let pl = div().css({ marginBottom: '10px', display: 'grid' });
                pl.child(
                    el('label').attr('for', ff.name).text(ff.title)
                )
                pl.child(
                    el('input').data('type', ff.type).data('kode', n).hold('...').class('form-control').type('text').id(ff.name).name(ff.name).class('dim')
                )
                ct.child(pl)
            }
            if (ff.type == 'select') {
                let pl = div().css({ marginBottom: '10px', display: 'grid' });
                pl.child(
                    el('label').attr('for', ff.name).text(ff.title)
                );
                let f = el('select').data('type', ff.type).data('kode', n).class('form-control').id(ff.name).name(ff.name).class('dim')
                f.child(el('option').val('').html('...'))
                nx[ff.table].forEach(function (cc) {
                    f.child(el('option').val(cc.id).html(cc.text))
                })
                pl.child(
                    f
                );
                ct.child(pl)
            }
        })
        ct.child(el('hr'));
        ct.child(el('div')
            .child(
                el('button').text('simpan').class('btn btn-primary').click(function () {
                    let sx = Array.from(document.querySelectorAll('.dim')).map(function (w) {
                        return {
                            sx: w.dataset.kode,
                            type: w.dataset.type,
                            value: (function () {
                                if (w.dataset.type === 'number') {
                                    return 'Rp. ' + w.value.number().currency(0);
                                } else {
                                    return w.value;
                                }
                            })(),
                        }
                    }).filter(function (w) {
                        if (w.value != '' && w.value != 'Rp. 0' && w.value != 'Rp. ') {
                            return w;
                        }
                    })
                    document.querySelector('.modal-filter').remove();
                    window._dataFilter = sx;
                    localStorage.setItem('report' + location.href, JSON.stringify(sx))
                    if (window._rpt.dataLoad.filterUnDo != true) {
                        window._rpt.call();
                    }
                })
            )
            .child(
                el('button').text('clear').css('margin-left', '10px').class('btn btn-warning').click(function () {
                    let sx = [];
                    document.querySelector('.modal-filter').remove();
                    window._dataFilter = sx;
                    localStorage.setItem('report' + location.href, JSON.stringify(sx))
                    if (window._rpt.dataLoad.filterUnDo != true) {
                        window._rpt.call();
                    }
                })
            )
        );
    }
    d.child(
        ct
    )
    d.load(function () {
        let s = window._rpt.dataLoad.filter;
        let m = Object.keys(s)
            .map(function (m) {
                return s[m];
            })
            .filter(function (m) {
                if (m.table != undefined) {
                    return m;
                }
            })
            .map(function (m) {
                return {
                    table: m.table,
                    name: m.name,
                    select: m.select
                }
            });
        m.forEach(function (w) {
            $(".dim[name='" + w.name + "']").select2();
        })
        window._dataFilter.forEach(function (w) {
            if (w.type == 'number') {
                document.querySelector(".dim[name='" + w.sx + "']").value = w.value.number().currency(0);
            } else if (w.type == 'select') {
                $(".dim[name='" + w.sx + "']").val(w.value).trigger('change');
            } else {
                document.querySelector(".dim[name='" + w.sx + "']").value = w.value;
            }
        })
    })
    document.body.appendChild(d.get());
}


if (_rightPanelReport != undefined) {
    _rightPanelReport.appendChild(
        div().html(`
            <style>
                .select2-container .select2-dropdown{
                    z-index:9999;
                }
            </style>
            <div id="reportrange" style="display:none;background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                <i class="la la-calendar-o"></i>&nbsp;
                <span></span> <i class="fa fa-caret-down"></i>
            </div>
        `).load(function () {


            $("#reportrange").click(function () {
                setTimeout(function () {
                    document.querySelector(".ranges .active").scrollIntoView()
                }, 10)
            })

            $(function () {

                window._cekSession = (function () {
                    return {
                        get: function () {
                            let t = localStorage.getItem(location.href + 'ds');
                            let w = localStorage.getItem(location.href + 'dn');
                            if (t != undefined) {
                                return {
                                    start: t,
                                    end: w
                                }
                            }
                            return null;
                        },
                        set: function (start, end) {
                            localStorage.setItem(location.href + 'ds', start)
                            localStorage.setItem(location.href + 'dn', end)
                        }
                    }
                })()

                window._startDate = moment().startOf('month');
                window._endDate = moment().endOf('month');

                if (window._cekSession.get() != null) {
                    window._startDate = moment(window._cekSession.get().start)
                    window._endDate = moment(window._cekSession.get().end);
                }

                function cb(d1, d2) {
                    $('#reportrange span').html(d1.format('MMMM D, YYYY') + ' - ' + d2.format('MMMM D, YYYY'));
                    window._rpt.call()
                }

                function cb2(d1, d2) {
                    window._startDate = d1
                    window._endDate = d2
                    window._cekSession.set(d1, d2)
                    $('#reportrange span').html(d1.format('MMMM D, YYYY') + ' - ' + d2.format('MMMM D, YYYY'));
                    window._rpt.call()
                }

                $('#reportrange').daterangepicker({
                    startDate: _startDate,
                    endDate: _endDate,
                    ranges: {
                        'Januari': [moment(moment().format('YYYY') + '-01').startOf('month'), moment(moment().format('YYYY') + '-01').endOf('month')],
                        'Februari': [moment(moment().format('YYYY') + '-02').startOf('month'), moment(moment().format('YYYY') + '-02').endOf('month')],
                        'Maret': [moment(moment().format('YYYY') + '-03').startOf('month'), moment(moment().format('YYYY') + '-03').endOf('month')],
                        'April': [moment(moment().format('YYYY') + '-04').startOf('month'), moment(moment().format('YYYY') + '-04').endOf('month')],
                        'Mei': [moment(moment().format('YYYY') + '-05').startOf('month'), moment(moment().format('YYYY') + '-05').endOf('month')],
                        'Juni': [moment(moment().format('YYYY') + '-06').startOf('month'), moment(moment().format('YYYY') + '-06').endOf('month')],
                        'Juli': [moment(moment().format('YYYY') + '-07').startOf('month'), moment(moment().format('YYYY') + '-07').endOf('month')],
                        'Agustus': [moment(moment().format('YYYY') + '-08').startOf('month'), moment(moment().format('YYYY') + '-08').endOf('month')],
                        'September': [moment(moment().format('YYYY') + '-09').startOf('month'), moment(moment().format('YYYY') + '-09').endOf('month')],
                        'Oktober': [moment(moment().format('YYYY') + '-10').startOf('month'), moment(moment().format('YYYY') + '-10').endOf('month')],
                        'November': [moment(moment().format('YYYY') + '-11').startOf('month'), moment(moment().format('YYYY') + '-11').endOf('month')],
                        'Desember': [moment(moment().format('YYYY') + '-12').startOf('month'), moment(moment().format('YYYY') + '-12').endOf('month')],
                        '1 Tahun': [moment().startOf('year'), moment().endOf('year')]
                    }
                }, cb2);

                cb(_startDate, _endDate);

            });

        }).get()
    )
}
// search action

search.addEventListener('keydown', function () {
    loaderS.style.display = 'block';
}, false);

search.addEventListener('search', function () {
    loaderS.style.display = 'block';
    Report(globalThis.reportActive).unload().call();
}, false);

search.addEventListener('keyup', delay(function () {
    Report(globalThis.reportActive).unload().call();
}, 500), false);

// end search action

const printAction = document.querySelector('.print-data');
const filterAction = document.querySelector('.filter-data');
filterAction.style.display = 'none';
let dataPrintX = {};
window._dataFilter = [];
if (localStorage.getItem('report' + location.href) != undefined) {
    window._dataFilter = JSON.parse(localStorage.getItem('report' + location.href));
}

// Add event listener for export
if (printAction) {
    printAction.addEventListener('click', function(e) {
        e.preventDefault();
        exportToExcelWithStyle();
    });
}

// filter click
filterAction.addEventListener('click', function () {
    if (window._rpt.dataLoad.filter != undefined) {
        let s = window._rpt.dataLoad.filter;
        let m = Object.keys(s)
            .map(function (m) {
                return s[m];
            })
            .filter(function (m) {
                if (m.table != undefined) {
                    return m;
                }
            })
            .map(function (m) {
                return {
                    table: m.table,
                    select: m.select
                }
            });
        let _ld = cssLoader()
        $.ajax({
            url: dataApi.path + 'admin/master/api/data',
            dataType: 'json',
            method: 'POST',
            data: {
                data: m
            },
            success: function (res) {
                _ld.remove();
                window._filter(res);
            }, error: function () {
                _ld.remove();
                Swal('Warning', 'your connection is lost', 'warning');
                throw 'error connection';
            }
        })
    } else {
        window._filter();
    }
});

// Backup fungsi export yang lama
const exportToExcelBasic = function() {
    let reportExcelmain = document.getElementById('tableReport');
    let reportExcel = el('table').html(reportExcelmain.innerHTML).get();

    console.log(reportExcel)
    /* Create worksheet from HTML DOM TABLE */
    for (let tdR of Array.from(reportExcel.querySelectorAll('td'))) {
        if (tdR.getAttribute('style').indexOf('mso-number-format') != -1 && tdR.innerHTML.indexOf('Rp') != -1) {
            // Convert currency to number but keep the format
            let value = tdR.innerText.replace('Rp', '').replace(/\./g, '').trim();
            tdR.innerText = value;
            // Set Excel format to Indonesian currency format with Rp prefix and proper thousand separators
            tdR.setAttribute('style', 'mso-number-format:"Rp "#,##0');
        }
        if (tdR.dataset.type && tdR.dataset.type === 'date') {
            // Parse date from dd-mm-yyyy format
            const dateText = tdR.innerText.trim();
            if (dateText) {
                const [day, month, year] = dateText.split('-').map(num => parseInt(num));
                if (!isNaN(day) && !isNaN(month) && !isNaN(year)) {
                    // Array nama bulan dalam Bahasa Indonesia
                    const monthNames = [
                        'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
                        'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
                    ];
                    
                    // Format dengan leading zero untuk tanggal
                    const formattedDay = day.toString().padStart(2, '0');
                    tdR.innerText = `${formattedDay} ${monthNames[month - 1]} ${year}`;
                    // Set Excel format untuk memastikan format tetap sama
                    tdR.setAttribute('style', tdR.getAttribute('style') + ';mso-number-format:"dd mmmm yyyy"');
                }
            }
        }
    }
    const wb = XLSX.utils.table_to_book(reportExcel, { sheet: 'sheet-1' });
    /* Export to file (start a download) */
    const ws = wb.Sheets['sheet-1'];  // Get the worksheet

    /* Calculate and set column widths */
    const range = XLSX.utils.decode_range(ws['!ref']);
    const colWidths = [];

    for (let C = range.s.c; C <= range.e.c; ++C) {
        let maxWidth = 10; // Default width
        for (let R = range.s.r; R <= range.e.r; ++R) {
            const cell_address = XLSX.utils.encode_cell({ r: R, c: C });
            const cell = ws[cell_address];
            if (cell && cell.v) {
                const cellValue = cell.v.toString();
                maxWidth = Math.max(maxWidth, cellValue.length + 2);
            }
        }
        colWidths.push({ wch: maxWidth });
    }

    ws['!cols'] = colWidths;

    /* Export to file (start a download) */
    XLSX.writeFile(wb, 'Laporan.xlsx');
}
// Fungsi export baru yang mempertahankan style HTML

const exportToExcelWithStyle_bc = function() {
    let reportExcelmain = document.getElementById('tableReport');
    let reportExcel = el('table').html(reportExcelmain.innerHTML).get();

    // Clone table untuk mempertahankan style
    const tableClone = reportExcel.cloneNode(true);
    
    // Proses data dan format
    for (let tdR of Array.from(tableClone.querySelectorAll('td'))) {
        if (tdR.getAttribute('style')?.indexOf('mso-number-format') != -1 && tdR.innerHTML.indexOf('Rp') != -1) {
            // Convert currency to number
            let value = tdR.innerText.replace('Rp', '').replace(/\./g, '').replace(/,/g, '').trim();
            tdR.innerText = new Intl.NumberFormat('en-US', { style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value);
            tdR.dataset.t = 'n';
            tdR.dataset.z = '"Rp"#,##0.00';
            tdR.style.textAlign = 'right';
        }
        if (tdR.dataset.type && tdR.dataset.type === 'date') {
            // Parse date from dd-mm-yyyy format
            const dateText = tdR.innerText.trim();
            if (dateText) {
                const [day, month, year] = dateText.split('-').map(num => parseInt(num));
                if (!isNaN(day) && !isNaN(month) && !isNaN(year)) {
                    // Array nama bulan dalam Bahasa Indonesia
                    const monthNames = [
                        'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
                        'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
                    ];
                    
                    // Format dengan leading zero untuk tanggal
                    const formattedDay = day.toString().padStart(2, '0');
                    tdR.innerText = `${formattedDay} ${monthNames[month - 1]} ${year}`;
                    // Set cell type dan format untuk tanggal
                    tdR.dataset.t = 'd';  // date type
                    tdR.dataset.z = 'dd mmmm yyyy';  // format string
                }
            }
        }
        // Rata kanan untuk semua cell yang berisi angka
        if (tdR.dataset.type === 'number' || !isNaN(tdR.innerText.replace(/[,.]/g, ''))) {
            tdR.style.textAlign = 'right';
        }
    }

    // Konversi ke Excel dengan mempertahankan style
    const wb = XLSX.utils.table_to_book(tableClone, { 
        sheet: 'sheet-1',
        raw: true,
        cellStyles: true,
        cellDates: true,
        dateNF: 'dd mmmm yyyy',
        cellNF: true
    });

    const ws = wb.Sheets['sheet-1'];

    // Set column widths
    const range = XLSX.utils.decode_range(ws['!ref']);
    const colWidths = [];

    for (let C = range.s.c; C <= range.e.c; ++C) {
        let maxWidth = 10;
        for (let R = range.s.r; R <= range.e.r; ++R) {
            const cell_address = XLSX.utils.encode_cell({ r: R, c: C });
            const cell = ws[cell_address];
            if (cell && cell.v) {
                const cellValue = cell.v.toString();
                maxWidth = Math.max(maxWidth, cellValue.length + 2);
                // Apply number format to currency cells
                if (cell.t === 'n' && tableClone.rows[R].cells[C].dataset.type === 'number') {
                    cell.z = '#,##0.00';
                    cell.w = XLSX.SSF.format('#,##0.00', cell.v);
                }
            }
        }
        colWidths.push({ wch: maxWidth });
    }

    ws['!cols'] = colWidths;

    // Export ke file
    XLSX.writeFile(wb, 'Laporan_Styled.xlsx');
};

const exportToExcelWithStyle = function() {
    let reportExcelmain = document.getElementById('tableReport');
    if (!reportExcelmain) {
        Swal('Error', 'Table not found', 'error');
        return;
    }

    let reportExcel = el('table').html(reportExcelmain.innerHTML).get();

    // Clone table untuk mempertahankan style
    const tableClone = reportExcel.cloneNode(true);
    
    let excelData = {
        data: [],
        columnTypes: []
    };

    // Get headers
    const headers = Array.from(tableClone.querySelectorAll('th')).map(th => th.innerText);
    excelData.headers = headers;

    // Process rows
    const rows = Array.from(tableClone.querySelectorAll('tr')).slice(1);
    rows.forEach(row => {
        let rowData = {};
        Array.from(row.querySelectorAll('td')).forEach((td, index) => {
            let value = td.innerText.trim();
            let type = 'general';

            if (td.getAttribute('style')?.indexOf('mso-number-format') != -1 && value.indexOf('Rp') != -1) {
                // Currency type
                value = value.replace('Rp', '').replace(/\./g, '').replace(/,/g, '').trim();
                value = parseFloat(value);
                type = 'currency';
            } else if (td.dataset.type === 'date') {
                // Date type - Convert from dd-mm-yyyy to yyyy-mm-dd
                const [day, month, year] = value.split('-').map(num => parseInt(num));
                if (!isNaN(day) && !isNaN(month) && !isNaN(year)) {
                    // Create date in yyyy-mm-dd format
                    value = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
                    type = 'date';
                }
            } else if (td.dataset.type === 'number' || !isNaN(value.replace(/[,.]/g, ''))) {
                // Number type
                value = parseFloat(value.replace(/[,.]/g, ''));
                type = 'number';
            }

            rowData[headers[index]] = {
                value: value,
                type: type
            };
        });
        excelData.data.push(rowData);
    });

    // Get column types
    headers.forEach((header, index) => {
        let type = 'general';
        if (excelData.data.some(row => row[header].type === 'currency')) {
            type = 'currency';
        } else if (excelData.data.some(row => row[header].type === 'date')) {
            type = 'date';
        } else if (excelData.data.some(row => row[header].type === 'number')) {
            type = 'number';
        }
        excelData.columnTypes.push({
            header: header,
            type: type
        });
    });

    // Debug: Log data being sent
    console.log('Data being sent to export:', excelData);

    // Create form and submit
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '/usp/export/excel/auto';
    form.target = '_blank'; // Open in new tab/window
    form.enctype = 'application/x-www-form-urlencoded';

    // Add data as hidden input
    const dataInput = document.createElement('input');
    dataInput.type = 'hidden';
    dataInput.name = 'data';
    dataInput.value = JSON.stringify(excelData);
    form.appendChild(dataInput);

    // Debug: Log form data
    console.log('Form data:', {
        method: form.method,
        action: form.action,
        data: dataInput.value
    });

    // Add form to document, submit, and remove
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
};

const Report = function (a = 'instansi') {
    let conf = {
        kode: a,
        idReport: false,
        contentHead: false,
        contentArea: false,
        dataLoad: {},
        loadContentReport: function () {
            this.idReport = Date.now();
            this.contentHead = ReportArea.querySelector('table thead');
            this.contentArea = ReportArea.querySelector('table tbody');
            return this;
        }
        , close: function () {
            history.pushState({}, "", '{{PATH}}/admin/laporan');
            ReportArea.style.display = 'none';
            ReportMenu.style.display = 'block';
        }
        , loadTableData(data) {

            let ct = this.dataLoad;
            let co = this.contentArea;
            co.innerHTML = '';

            let hM = '<tr>';
            if (ct.button != undefined) {
                hM += `<th style="text-align:center;box-shadow: inset 0 0 0 1000px var(--greenKop); border: 1px solid #ddd;padding:5px 8px;background:var(--greenKop) !important; color:#FFFFFF;">#</th>`;
            }
            hM += ct.headName.map(function (cw) {
                return `<th style="box-shadow: inset 0 0 0 1000px var(--greenKop); border: 1px solid #ddd;padding:5px 8px;background:var(--greenKop) !important; color:#FFFFFF;">${cw}</th>`
            }).join('');
            hM += '</tr>';
            this.contentHead.innerHTML = hM;
            if (data.length > 0) {
                let numberR = [];
                data.forEach(function (a, i) {
                    let tr = el('tr');
                    if (ct.button != undefined) {
                        tr.child(
                            el('td')
                                .attr('style', 'white-space: nowrap; background: var(--greenKop) !important;box-shadow:inset 0 0 0 1000px #DDEEFE;padding:5px 8px;border:1px solid #ddd;')
                                .css('text-align', 'center')
                                .addModule('btn', ct.button)
                                .padding('5px 8px')
                                .load(function (e) {
                                    let btn = e.el.btn;
                                    e = e.el;
                                    btn.forEach(function (h) {
                                        let b = el('button')
                                            .data('btn-act', i)
                                            .data('link', h.link)
                                            .data('kode', h.kode)
                                            .data('report', h.report)
                                            .class('btn btn-primary btn-sm')
                                            .margin('0px 3px')
                                            .addModule('obj', a)
                                        b.click(function (e) {
                                            let t = e.target;
                                            if (t.tagName == 'I' || t.tagName == 'SPAN') {
                                                t = t.parentNode;
                                            }
                                            let obj = t.obj;
                                            let data = t.dataset;
                                            let url = dataApi.path + data.link + btoa(obj[data.kode]);
                                            popupCenter({ url: url, title: 'xtf', w: 1024, h: 500 });
                                        })
                                        b.child(
                                            el('i').class(h.icon)
                                        );
                                        b.child(
                                            el('span').text(h.title)
                                        );
                                        e.appendChild(
                                            b.get()
                                        );
                                    })
                                })
                        )
                    }
                    ct.name.map(function (nm) {
                        let f = el('td').html((function (w) {
                            if (ct.format != undefined) {
                                if (ct.format[nm] == 'number') {
                                    numberR.push({
                                        kode: nm,
                                        value: w.number()
                                    })
                                }
                            }
                            return w;
                        })(a[nm]))
                        if (i % 2 === 0) {
                            f.attr('style', 'mso-number-format:"#\,##0";white-space: nowrap; background:#DDEEFE !important;box-shadow:inset 0 0 0 1000px #DDEEFE;padding:5px 8px;border:1px solid #ddd;')
                            if (ct.format != undefined) {
                                if (ct.format[nm] != undefined) {
                                    if (ct.format[nm] == 'number') {
                                        f.attr('style', 'mso-number-format:"#\,##0";text-align:right;white-space: nowrap; background:#DDEEFE !important;box-shadow:inset 0 0 0 1000px #DDEEFE;padding:5px 8px;border:1px solid #ddd;')
                                        f.class('number');
                                    } else if (ct.format[nm] == 'date') {
                                        f.css('text-align', 'center');
                                        f.data('type', 'date');
                                    }
                                }
                            }
                        } else {
                            f.css({
                                padding: '5px 8px'
                                , border: '1px solid #ddd'
                            });
                            if (ct.format != undefined) {
                                if (ct.format[nm] != undefined) {
                                    if (ct.format[nm] == 'number') {
                                        f.attr('style', 'mso-number-format:"#\,##0";text-align:right;')
                                        f.class('number');
                                    } else if (ct.format[nm] == 'date') {
                                        f.css('text-align', 'center');
                                        f.data('type', 'date');
                                    }
                                }
                            }
                        };
                        tr.child(
                            f
                        );
                    });
                    co.appendChild(
                        tr.get()
                    );
                });
                let footer = el('tr');
                ct.name.forEach(function (q, i) {
                    if (ct.format != undefined) {
                        if (ct.format[q] == 'number') {
                            let x = numberR.cond(q, 'kode')
                            let v = 0;
                            if (x.length > 0) {
                                v = x.map(function (vv) {
                                    return vv.value;
                                }).sum();
                            }
                            footer.child(
                                el('td').attr('style', "white-space:nowrap;text-align:right;box-shadow: inset 0 0 0 1000px var(--greenKop); padding:5px 8px;background:var(--greenKop) !important; color:#FFFFFF;mso-number-format:\"#\\,##0\"").class('number').html('Rp ' + v.currency(0))
                            )
                        } else {
                            if (i == 0) {
                                footer.child(
                                    el('td').attr('style', "text-align:center;box-shadow: inset 0 0 0 1000px var(--greenKop); padding:5px 8px;background:var(--greenKop) !important; color:#FFFFFF;").html('Grand Total')
                                )
                            } else {
                                footer.child(
                                    el('td').attr('style', "text-align:center;box-shadow: inset 0 0 0 1000px var(--greenKop); padding:5px 8px;background:var(--greenKop) !important; color:#FFFFFF;").html('')
                                )
                            }
                        }
                    }
                });
                co.appendChild(
                    footer.get()
                );
            } else {
                co.innerHTML = `
                    <tr>
                        <td colspan="${ct.headName.length}" style="text-align: center;padding;10px;border:1px solid #ddd;"> Data tidak tersedia. </td>
                    </tr>
                `;
            }
        }
        , sqlDate(date) {
            let dt = date.split(' ');
            let f = dt.slice(-1);
            dt.pop();
            return `DATE_FORMAT(${dt.join(' ')}, "%d-%m-%Y") ${f}`;
        }
        , sqlNumber(number) {
            let dt = number.split(' ');
            let f = dt.slice(-1);
            dt.pop();
            return `concat("Rp. ", format(${dt.join(' ')},0, "id_ID")) ${f}`;
        }
        , getData: function () {
            let data = this.dataLoad;
            return data;
        }, table: function (ld = null) {
            let data = this.dataLoad;
            let custaCt = this;
            let custome = {
                date: 'sqlDate',
                number: 'sqlNumber'
            };

            let getData = 'SELECT ' + data.views.map(function (a, i) {
                let c = data.name[i];
                if (data.format != undefined) {
                    if (data.format[c] != undefined) {
                        let f = custome[data.format[c]]
                        if (f != undefined) {
                            let v = custaCt[f](a);
                            return v;
                        } else {
                            return a;
                        }
                    } else {
                        return a;
                    }
                } else {
                    return a;
                }
            }).join(',') + ' FROM ' + data.table;

            if (data.join != undefined) {
                getData += data.join.map(function (aj) {
                    let tb = aj.table;
                    let ntb = aj.table;
                    if (tb.indexOf("||") != -1) {
                        let gh = tb.split("||")
                        ntb = gh[1];
                        tb = gh.join(" ");
                    };
                    return ` LEFT JOIN ${tb} ON ${ntb}.${aj.kode} = ${aj.koneksiTable}.${aj.koneksi} `
                }).join(" \n ");
            };
            if (data.filterDate == true && data.filterDateData != undefined) {
                if (getData.indexOf('WHERE') != -1) {
                    getData += " AND " + data.filterDateData + " >= \"" + window._startDate.format("YYYY-MM-DD") + "\"";
                    getData += " AND " + data.filterDateData + " <= \"" + window._endDate.format("YYYY-MM-DD") + "\"";
                } else {
                    getData += " WHERE 1+1";
                    getData += " AND " + data.filterDateData + " >= \"" + window._startDate.format("YYYY-MM-DD") + "\"";
                    getData += " AND " + data.filterDateData + " <= \"" + window._endDate.format("YYYY-MM-DD") + "\"";
                }
            }
            if (data.filterDate == "max" && data.filterDateData != undefined) {
                if (getData.indexOf('WHERE') != -1) {
                    getData += " AND " + data.filterDateData + " <= \"" + window._endDate.format("YYYY-MM-DD") + "\"";
                } else {
                    getData += " WHERE 1+1 ";
                    getData += " AND " + data.filterDateData + " <= \"" + window._endDate.format("YYYY-MM-DD") + "\"";
                }
            }
            if (typeof data.condition != 'undefined' && Array.isArray(data.condition)) {
                if (getData.indexOf('WHERE') === -1) {
                    getData += " WHERE 1+1 ";
                }
                getData += ' AND ' + data.condition.map(function (c) {
                    return c;
                }).join(" AND ");
            }
            if (data.search != undefined) {
                if (getData.indexOf(" HAVING ") == -1) {
                    getData += ` HAVING `
                } else {
                    getData += ` AND `
                }
                getData += ' ( ' + data.search.map(function (a) {
                    return ` ${a} LIKE "\%${search.value}\%" `
                }).join(" OR ") + ' ) ';
            };
            if (window._dataFilter.length > 0 && data.filterUnDo != true) {
                if (getData.indexOf(" HAVING ") == -1) {
                    getData += ` HAVING `
                } else {
                    getData += ` AND `
                }
                getData += window._dataFilter.map(function (w) {
                    if (w.type == 'number') {
                        let sx = w.value.replaceAll("Rp. ", "");
                        sx = sx.replace(/\"/g, "\\\"")
                        return ` ${w.sx} LIKE "%${sx}%" `;
                    } else {
                        return ` ${w.sx} LIKE "%${w.value.replace(/\"/g, "\\\"")}%" `;
                    }
                }).join(" AND ");
            }
            if (data.order != undefined) {
                getData += " ORDER BY " + data.order.join(",");
            }
            let cp = this;
            console.log(getData);
            AuditDevQuery(`
            call cekCashSimpanan()
            `, function () {
                AuditDevQuery(getData + '[;]SELECT 1=1 total', function (datas) {
                    let [data] = datas;
                    cp.loadTableData(data)
                    if (ld != undefined) {
                        ld.remove();
                    } else {
                        loaderS.style.display = 'none';
                    };
                });
            })
        }
        , unLoad: null
        , unload() {
            this.unLoad = true;
            return this;
        }
        , call: function () {
            this.loadContentReport();
            let ct = this.dataLoad;
            let co = this.contentArea;
            co.innerHTML = '';
            this.contentHead.innerHTML = '';
            ReportArea.style.display = 'block';
            ReportMenu.style.display = 'none';
            let cp = this;
            let ld = undefined;
            if (this.unLoad != true) {
                ld = cssLoader();
            };
            $.ajax({
                url: '{{PATH}}/admin/laporan/api/' + this.kode,
                dataType: 'json',
                success: function (res) {
                    cp.dataLoad = res;
                    dataPrintX = res;
                    if (res.noprint === true) {
                        document.querySelector('button.print-data').style.display = 'none';
                    }
                    SubLap.innerHTML = res.title;
                    if (res.filterDate) {
                        _id('reportrange').style.display = 'block';
                    } else {
                        _id('reportrange').style.display = 'none';
                    };
                    if (res.filter != undefined) {
                        filterAction.style.display = 'inline-block';
                    } else {
                        filterAction.style.display = 'none';
                    };
                    cp.table(ld);
                },
                error: function () {
                    Array.from(document.querySelectorAll('.css-loader')).forEach(function (e) {
                        e.remove();
                    });
                    Swal('warning', 'Connectioin lost,please try again', 'warning');
                    throw 'error connection';
                }
            });
        }
    };
    return conf;
}

Array.from(document.querySelectorAll('[data-report]')).forEach(function (r) {
    r.addEventListener('click', function (event) {
        event.preventDefault();
        history.pushState({}, "", '{{PATH}}/admin/laporan/auto/' + this.getAttribute('data-report'));
    }, false);
});

let linkCheck = null;
(function cekUrl() {
    let f = location.href;
    f = f.split('/laporan/')[1];
    if (f == undefined) {
        ReportArea.style.display = 'none';
        ReportMenu.style.display = 'block';
        linkCheck = location.href;
        SubLap.innerHTML = '';
    } else {
        if (linkCheck != location.href) {
            globalThis.reportActive = f;
            window._rpt = Report(f);
            if (window._startDate == undefined) {
                setTimeout(() => {
                    cekUrl();
                }, 100);
            } else {
                _rpt.call();
                linkCheck = location.href;
            }
        };
    };
    setTimeout(() => {
        cekUrl();
    }, 100);
})();