const App = document.getElementById('app');

let year = Number(tanggal().normal.split('-')[0])

_id('next').addEventListener('click', function(){
    year++;
    if(typeof makeTable != 'undefined'){
        makeTable();
    }
},false);

_id('prev').addEventListener('click', function(){
    year--;
    if (typeof makeTable != 'undefined') {
        makeTable();
    }
},false);

const actionPrint = function(e){
    e = e.el;
    if(
        e.querySelector('button') != undefined
        || e.querySelector('button') != null
    ){
        let btn = e.querySelector('button.utama')
        btn.onclick = function(){
            var url = '{{PATH}}/admin/api/export/excel/'+(this.dataset.setup?`neraca_tahunan`:`neraca`)+'/'+ year + '/' + this.dataset.kode+'/1/usp';
            console.log(url);
            location.href = url;
        }
        let btn2 = e.querySelector('button.pembantu')
        btn2.onclick = function(){
            var url = '{{PATH}}/admin/api/export/excel/'+(this.dataset.setup?`neraca_tahunan`:`neraca`)+'/'+ year + '/' + this.dataset.kode+'/0/usp';
            location.href = url;
        }
        let btn3 = e.querySelector('button.pembantuinduk')
        btn3.onclick = function(){
            var url = '{{PATH}}/admin/api/export/excel/'+(this.dataset.setup?`neraca_tahunan`:`neraca`)+'/' + year + '/' + this.dataset.kode +'/0/induk';
            location.href = url;
        }
        let btn4 = e.querySelector('button.utamainduk')
        btn4.onclick = function () {
            var url = '{{PATH}}/admin/api/export/excel/'+(this.dataset.setup?`neraca_tahunan`:`neraca`)+'/' + year + '/' + this.dataset.kode + '/1/induk';
            location.href = url;
        }
    }
}

const NamaBulan = [
    "Januari",
    "Februari",
    "Maret",
    "April",
    "Mei",
    "Juni",
    "Juli",
    "Agustus",
    "September",
    "Oktober",
    "November",
    "Desember"
]

const addRow = function(arr, i){
    let tr = el('tr').data('kode', i);
    if(Array.isArray(arr)){
        arr.forEach(function(w){
            let y = el('td').html(w);
            tr.child(
                y
            );
        });
    };
    tr.load(actionPrint);
    return tr;
}

const makeTable = function(callback){
    let x = el('div').class('card');
    let tbl = el('table').class('table')
    let ArrayData = [];
    ArrayData.push(['Tahun', 'Bulan', '#'])
    let bulan = 12;
    for (let bln = 0; bln < bulan; bln++) {
        ArrayData.push([
            year
            , NamaBulan[bln]
            , `
            <div style="display: grid; grid-template-columns: auto auto;grid-gap:5px;">
                <button data-kode="${(bln + 1).pad(2)}" class="btn btn-sm btn-primary utama">Print Neraca Lajur Utama USP</button>
                <button data-kode="${(bln + 1).pad(2)}" class="btn btn-sm btn-primary utamainduk">Print Neraca Lajur Utama Induk</button>
                <button data-kode="${(bln + 1).pad(2)}" class="btn btn-sm btn-success pembantu">Print Neraca Lajur Pembantu USP</button>
                <button data-kode="${(bln + 1).pad(2)}" class="btn btn-sm btn-success pembantuinduk">Print Neraca Lajur Pembantu Induk</button>
            <div>
            `
        ]);
    }
    
    ArrayData.push([
            year
            , 'Tahunan'
            , `
            <div style="display: grid; grid-template-columns: auto auto;grid-gap:5px;">
                <button data-setup="1" data-kode="${(12).pad(2)}" class="btn btn-sm btn-primary utama">Print Neraca Lajur Utama USP</button>
                <button data-setup="1" data-kode="${(12).pad(2)}" class="btn btn-sm btn-primary utamainduk">Print Neraca Lajur Utama Induk</button>
                <button data-setup="1" data-kode="${(12).pad(2)}" class="btn btn-sm btn-success pembantu">Print Neraca Lajur Pembantu USP</button>
                <button data-setup="1" data-kode="${(12).pad(2)}" class="btn btn-sm btn-success pembantuinduk">Print Neraca Lajur Pembantu Induk</button>
            <div>
            `
        ]);
    ArrayData.forEach(function(o, i){
        tbl.child(
            addRow(o, i)
        );
    });
    x.child(
        el('div').class('card-body')
        .child(
            tbl
        )
    );
    App.innerHTML = '';
    App.appendChild(x.get());
};

makeTable();