var info_grafis = function(data){
	let insert = '';
	$.each(data, function(index, val) {
		insert += `<div class="col-lg-3">
            <div class="card">
                <img class="card-img-top img-responsive image-popup-vertical-fit el-link" src="${val['gambar']}" title="${val['caption']}" href="${val['gambar']}">
                <div class="card-body">
                    ${val['caption']}
                    <br>
                    <small>${val['tgl_up']}</small>
                </div>
            </div>
        </div>`;
	});
	return insert;
}

var kosong = function(kalimat){
  let kata = `<div class="col-12"><div class="alert alert-danger" role="alert">
    ${kalimat}
  </div></div>`;
  return kata;
}

$.ajax({
	url: BASE_URL + '/?m=api&f=list_info_grafis',
	type: 'POST',
	data: {id: '0'},
})
.done(function(data) {
    console.log(data);
	if ( data.length == 0 ) {
		$("#dataisii").html(kosong("Tidak ada data"));
	}else {
		$("#dataisii").html(info_grafis(data));

        $('.image-popup-vertical-fit').magnificPopup({
            type: 'image',
            mainClass: 'mfp-img-mobile',
            callbacks: {
                open: function () {
                    this.contentContainer.addClass('zoomIn animated')
                }
            },
            image: {
                verticalFit: true
            }

        });
	}
})
.fail(function() {
	$("#dataisii").html(kosong("Tidak ada data"));
});