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">
                    <div class="text-center">
                      <h3 class="font-normal">${val['judul']}</h3>
                    </div>
                    <hr>
                    <table width="100%">
                        <tr>
                            <td>Penulis : ${val['user']}</td>
                            <td class="text-right"><i class="far fa-clock"></i> ${val['last_update']} yang lalu</td>
                        </tr>
                    </table>
                    <hr>
                    ${val['deskripsi'].substring(0, 150)}
                </div>
                <div class="card-footer">
                  <a href="#" sumber="berita" data-id='${val['id']}' class="btn btn-primary w-100 lengkap">Baca Selengkapnya</a>
                </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;
}

$(document).on('click', '.lengkap', function(e){
  e.preventDefault();
  let id = $(this).data('id');
  let url = '/?m=api&f=list_berita';
  $.ajax({
    url: BASE_URL + url,
    type: 'POST',
    data: {idberita: id},
  })
  .done(function(data) {
    const modal = $(".modal");
    modal.find('.modal-title').html(data[0]['judul']);
    modal.find('.modal-body').html(`
      <div class="w-100 text-center">
        <img class="card-img-top img-thumbnail w-50 text-center" src="${data[0]['gambar']}" alt="${data[0]['gambar_caption']}">
      </div>
      <hr>
      ${data[0]['deskripsi']}
      `);
    modal.modal('show');
  })
  .fail(function() {
    console.log("error");
  });
});

var limit = 3;
var ajax = function(limit){
  $.ajax({
  	url: BASE_URL + '/?m=api&f=list_berita',
  	type: 'POST',
  	data: {limit: limit},
  })
  .done(function(data) {
    console.log(data[0]['jumlah']);
    // if (data.length > 3 && data.length == limit) {
    //   $(".load").hide();
    // }
  	if ( data.length == 0 ) {
  		$("#dataisii").html(kosong("Tidak ada data"));
  	}else {
  		$("#dataisii").html(agenda(data));
  	}
  })
  .fail(function() {
  	$("#dataisii").html(kosong("Tidak ada data"));
  });
}

$(function() {
  ajax(limit);
});

// Block page
$(document).on('click', '.load', function() {
    limit += 3;
    ajax(limit);
    $.blockUI({
        message: '<i class="fas fa-spin fa-sync text-white"></i>',
        timeout: 2000, //unblock after 2 seconds
        overlayCSS: {
            backgroundColor: '#000',
            opacity: 0.5,
            cursor: 'wait'
        },
        css: {
            border: 0,
            padding: 0,
            backgroundColor: 'transparent'
        }
    });
});