jQuery(document).ready(function ($) {
    $('.datatables').DataTable();
});

// var dataTable = $('#detail').DataTable();

var persen = function (data, jmldata) {
    let jmlpersen = parseInt(data) / parseInt(jmldata) * 100;
    return jmlpersen;
}

// $.ajax({
// 	url: BASE_URL + '/?m=api&f=summary',
// 	type: 'GET',
// })
// .done(function(data) {
// 	let table = '';
// 	var d = new Date().getFullYear();
// 	let total_lpse = 0;
// 	let total_sirup = 0;
// 	$.each(data, function(index, val) {
// 		total_lpse += parseInt(val['lpse']);
//         total_sirup += parseInt(val['sirup']);
// 	});
// 	$.each(data, function(index, val) {
// 		table += ` <tr id="tr-id-${index+1}" class="tr-class-${index+1}">
//                 <td id="tr-id-${index+1}" class="tr-class-${index+1}">
//                 	<a class="text-info" href="${BASE_URL}/?m=statistik_pengadaan&f=ringkasan&tahun=${val['tahun']}" class="tahun" data-tahun="${val['tahun']}">${ (val['tahun'] == d) ? val['tahun'] + ' <span class="badge badge-success">Now</span>': val['tahun']}</a>
//                 </td>
//                 <td>
//                   <div class="progress">
//                       <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: ${persen(val['lpse'], total_lpse)}%"></div>
//                   </div>
//                   <span>${rupiah(val['lpse'])}</span>
//                 </td>
//                 <td>
//                   <div class="progress">
//                       <div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: ${persen(val['sirup'], total_sirup)}%"></div>
//                   </div>
//                   <span>${rupiah(val['sirup'])}</span>
//                 </td>
//               </tr>`;
// 	});
// 	$("#isiRingkasan").html(table);
// 	$("#totalLpse").html(rupiah(total_lpse));
// 	$("#totalSirup").html(rupiah(total_sirup));
// })
// .fail(function() {
// 	alert("Gagal load ringkasan tahunan");
// });

function rupiah(bilangan) {
    var number_string = bilangan.toString(),
        sisa = number_string.length % 3,
        rupiah = number_string.substr(0, sisa),
        ribuan = number_string.substr(sisa).match(/\d{3}/g);

    if (ribuan) {
        separator = sisa ? '.' : '';
        rupiah += separator + ribuan.join('.');
    }
    return rupiah;
}

$(document).on('click', '.detail', function (e) {
    e.preventDefault();
    key2 = $(this).attr('data');
    tahun = $(this).attr('tahun');
    key = $(this).attr('key');

    const modal = $(".modal");
    modal.modal('show');

    $('#detail').DataTable().destroy();
    var dataTable = $('#detail').DataTable({
        "processing": true,
        "deferRender": true,
        "ajax": {
            "type": "post",
            "url": BASE_URL + "/?m=rencana_pengadaan&f=detail",
            "data": {
                key2: key2,
                tahun: tahun,
                key: key,
            },
            "datatype": "json",
            "dataSrc": "data"
        },
        "columns": [{
                data: 'no'
            },
            {
                data: "id_paket"
            },
            {
                data: "nama_paket"
            },
            {
                data: "jumlah_pagu"
            },
            {
                data: "nama_satker"
            },
            {
                data: "ppk"
            },
            {
                data: "tanggal_pengumuman"
            },
            {
                data: "volume"
            }
            /*and so on, keep adding data elements here for all your columns.*/
        ],
        columnDefs: [{
            targets: 3,
            className: 'text-right'
        }]
    });
    // dataTable.clear().draw();
    // $.each(response, function(index, value) {
    //     dataTable.row.add(
    //         ['', 
    //             value.id_paket, 
    //             value.nama_paket, 
    //             value.jumlah_pagu, 
    //             value.nama_satker, 
    //             value.ppk,
    //             value.tanggal_pengumuman,
    //             value.volume]).draw().node();
    // });
});

function tglindo(string) {
    bulanIndo = ['', 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];

    tanggal = string.split("-")[2];
    bulan = string.split("-")[1];
    tahun = string.split("-")[0];

    return tanggal + " " + bulanIndo[Math.abs(bulan)] + " " + tahun;
}

function format(d) {
    // `d` is the original data object for the row
    let table = `<div class="col-md-12" style="padding-top:20px;">
    	<table class="table table-bordered table-striped">
    		<tr>
    			<th width="30%" class="bg-light text-dark">Metode Pengadaan</th>
    			<td class="bg-light text-dark">${d.metode_pengadaan}</td>
    		</tr>
    		<tr>
    			<th width="30%" class="bg-info text-white">Spesifikasi</th>
    			<td>${d.spesifikasi}</td>
    		</tr>
    		<tr>
    			<th width="30%" class="bg-light text-dark">Lokasi</th>
    			<td class="bg-light text-dark">${d.lokasi}</td>
    		</tr>
    		<tr>
    			<th width="30%" class="bg-info text-white">Tanggal Awal Pemilihan</th>
    			<td>${tglindo(d.tanggal_awal_pemilihan)}</td>
    		</tr>
    		<tr>
    			<th width="30%" class="bg-light text-dark">Tanggal Akhir Pemilihan</th>
    			<td class="bg-light text-dark">${tglindo(d.tanggal_akhir_pemilihan)}</td>
    		</tr>
    		<tr>
    			<th width="30%" class="bg-info text-white">Tanggal Awal Pekerjaan</th>
    			<td>${tglindo(d.tanggal_awal_pekerjaan)}</td>
    		</tr>
    		<tr>
    			<th width="30%" class="bg-light text-dark">Tanggal Akhir Pekerjaan</th>
    			<td class="bg-light text-dark">${tglindo(d.tanggal_akhir_pekerjaan)}</td>
    		</tr>
    	</table>
    </div>`
    return table;
}

$(document).on('click', '.modal .childrow', function () {
    var tr = $(this).closest('tr');
    var row = $('#detail').DataTable().row(tr);
    console.log(tr);
    var data = $(this).data('json');

    if (row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
        $(this).removeClass('fas fa-minus').addClass('fas fa-plus');
    } else {
        // Open this row
        row.child(format(data)).show();
        tr.addClass('shown');
        $(this).removeClass('fas fa-plus').addClass('fas fa-minus');
    }
});