var agenda = function(data){
	let insert = '';
	$.each(data, function(index, val) {
		insert += `<div class="col-lg-4">
            <div class="card">
                <img class="card-img-top img-responsive" src="${val['gambar']}" alt="${val['gambar_caption']}">
                <div class="card-body">
                    <table>
                        <tr>
                            <td><i class=" fas fa-calendar-alt"></i></td>
                            <td> </td>
                            <td>${val['tgl_mulai']}</td>
                        </tr>
                        <tr>
                            <td><i class=" fas fa-calendar-check"></i></td>
                            <td> </td>
                            <td>${val['tgl_selesai']}</td>
                        </tr>
                        <tr>
                            <td><i class="fas fa-map-marker-alt"></i></td>
                            <td> </td>
                            <td>${val['lokasi']}</td>
                        </tr>
                    </table>
                    <hr>
                    <div class="text-center">
                        <h3 class="font-normal">${val['agenda']}</h3>
                        ${val['deskripsi'].replaceAll('&gt;', '>').replaceAll('&lt;', '<').substring(0, 150)}
                    </div>
                </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_agenda',
	type: 'POST',
	data: {id: '0'},
})
.done(function(data) {
    console.log(data);
	if ( data.length == 0 ) {
		$("#dataisii").html(kosong("Tidak ada data"));
	}else {
		$("#dataisii").html(agenda(data));
	}
})
.fail(function() {
	$("#dataisii").html(kosong("Tidak ada data"));
});