// var lastScrollTop = 0;
// $(window).scroll(function(event){
//    var st = $(this).scrollTop();
//    if (st > lastScrollTop){
//        $(".navbar").addClass('fixed-top');
//    } else {
//       $(".navbar").removeClass('fixed-top');
//    }
//    lastScrollTop = st;
// });

var berita = function(data){
  let databerita = '';
  let desc = "";
  console.log(data);
  data.forEach( function(val, index) {
    if (index <=2) {
    databerita += `<div class="col-lg-4 p-3">
          <div class="card h-100">
            <img class="card-img-top" src="${val['gambar']}" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title lengkap" sumber="berita"  data-id="${val['id']}"" style="cursor:pointer;text-transform:uppercase">${val['judul']}</h5>
              <hr>
                <table class="w-100">
                   <tr>
                      <td><i class="far fa-user"></i> ${val['user']}</td>
                      <td class="text-right"><i class="far fa-clock"></i> ${val['last_update']} yang lalu</td>
                  </tr>
                </table>
              <hr>
              <p class="card-text">${val['deskripsi'].substring(0, 150)} ...</p>
            </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 databerita;
}

var pengumuman = function(data){
  let struktur = '';
  data.forEach( function(val, index) {
    if (index <=2) {
    struktur += `<div class="col-lg-4 p-3">
          <div class="card h-100">
            <img class="card-img-top" src="${val['gambar']}" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title lengkap" sumber="pengumuman"  data-id="${val['id']}"" style="cursor:pointer;text-transform:uppercase">${val['judul']}</h5>
              <hr>
                <table class="w-100">
                   <tr>
                      <td><i class="far fa-user"></i> ${val['user']}</td>
                      <td class="text-right"><i class="far fa-clock"></i> ${val['last_update']} yang lalu</td>
                  </tr>
                </table>
              <hr>
              <p class="card-text">${val['deskripsi'].substring(0, 150)} ...</p>
            </div>
            <div class="card-footer">
              <a href="#" data-id='${val['id']}' class="btn btn-primary w-100 lengkap" sumber="pengumuman">Baca Selengkapnya</a>
            </div>
          </div>
        </div>`;
    }
  });
  return struktur;
}

var agenda = function(data){
  let struktur = '';
  console.log(data);
  data.forEach( function(val, index) {
    let bg = '';
    let span = '';
    if (val['last_update'] == "Acara Selesai") {
      bg = 'bg-danger text-white';
      span = `<span class="badge badge-danger float-right">${val['last_update']}</span>`;
    }
    else if (val['last_update'] == "Acara sedang berlangsung") {
      bg = 'bg-warning text-white';
      span = `<span class="badge badge-warning float-right">${val['last_update']}</span>`;
    }
    else{
      bg = 'bg-info text-white';
      span = `<span class="badge badge-info float-right">${val['last_update']} lagi</span> `;
    }
    if (index <=10) {
      struktur += `
        <div class="card agenda" style="cursor:pointer" data-json='${JSON.stringify(val)}'>
            <div class="card-header ${bg}">
                ${val['agenda']}
            </div>
            <div class="card-body">
                ${span}
                <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>
            </div>
          </div>`;
    }
  });
  return struktur;
}

var download = function(data){
  let struktur = '';
  data.forEach( function(val, index) {
    if (index <=10) {}
    struktur += `
<div class="card">
    <div class="bg-success text-white card-header">
        ${val['judul']}
    </div>
    <div class="card-body">
        <a target="_blank" href="${BASE_URL + '/views/upload/download_center/' + val['file']}">Download File</a>
    </div>
</div>`;
  });
  return struktur;
}

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

var ajax = function(url, id, output){
  $.ajax({
    url: url,
    type: 'POST',
    data: {idberita: id},
  })
  .done(function(data) {
    output(data);
  })
  .fail(function() {
    console.log("error");
  });
};


$(document).on('click', '.agenda', function(e){
  e.preventDefault();
  let data = $(this).data('json');
  console.log(data);
  const modal = $(".modal");
  modal.find('.modal-title').html(data['agenda']);

  let kategori = '';
  data['kategorisasi'].forEach( function(element, index) {
    kategori +=  `<span class="badge badge-primary">${element['urai_kategorisasi']}</span>` + " "
  });
  modal.find('.modal-body').html(`

    <div class="w-100 text-center">
      <img class="card-img-top img-thumbnail w-50 text-center" src="${data['gambar']}" alt="${data['gambar_caption']}">
    </div>
    <hr>
    <table>
       <tr>
          <td><i class=" fas fa-calendar-alt"></i></td>
          <td> </td>
          <td>${data['tgl_mulai']}</td>
      </tr>
      <tr>
          <td><i class=" fas fa-calendar-check"></i></td>
          <td> </td>
          <td>${data['tgl_selesai']}</td>
      </tr>
      <tr>
          <td><i class="fas fa-map-marker-alt"></i></td>
          <td> </td>
          <td>${data['lokasi']}</td>
      </tr>
    </table>
    <hr>
    ${data['deskripsi'].replaceAll('&gt;', '>').replaceAll('&lt;', '<')}
  `);
  modal.modal('show');
});

$(document).on('click', '.lengkap', function(e){
  e.preventDefault();
  let id = $(this).data('id');
  let sumber = $(this).attr('sumber');
  console.log(sumber);
  let url = '';
  if (sumber === "berita") {
    url =  '/?m=api&f=list_berita';
  } else {
    url = '/?m=api&f=list_pengumuman';
  }
  $.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");
  });
});

jQuery(document).ready(function($) {
  // list berita
  $.ajax({
    url: BASE_URL + '/?m=api&f=list_berita',
    type: 'POST',
    data: {id: '0'},
  })
  .done(function(data) {
    if ( data.length == 0 ) {
      $("#listberita").html(kosong("Tidak ada berita"));
    }else {
      $("#listberita").html(berita(data));
    }
  })
  .fail(function() {
    $("#listberita").html(kosong("Tidak ada berita"));
  })

  // list pengumuman
  $.ajax({
    url: BASE_URL + '/?m=api&f=list_pengumuman',
    type: 'POST',
    data: {id: '0'},
  })
  .done(function(data) {
    if ( data.length == 0 ) {
      $("#listpengumuman").html(kosong("Tidak ada pengumuman"));
    }else {
      $("#listpengumuman").html(pengumuman(data));
    }
  })
  .fail(function() {
    $("#listpengumuman").html(kosong("Tidak ada berita"));
  })

  // list download
  $.ajax({
    url: BASE_URL + '/?m=api&f=list_download',
    type: 'POST',
    data: {id: '0'},
  })
  .done(function(data) {
    if ( data.length == 0 ) {
      $("#listdownload").html(kosong("Tidak ada file"));
    }else {
      $("#listdownload").html(download(data));
    }
  })
  .fail(function() {
    $("#listdownload").html(kosong("Tidak ada file"));
  })

  // list Agenda
  $.ajax({
    url: BASE_URL + '/?m=api&f=list_agenda',
    type: 'POST',
    data: {id: '0'},
  })
  .done(function(data) {
    if ( data.length == 0 ) {
      $("#listagenda").html(kosong("Tidak ada agenda"));
    }else {
      $("#listagenda").html(agenda(data));
    }
  })
  .fail(function() {
    $("#listagenda").html(kosong("Tidak ada agenda"));
  })

  get_widget_1();
  get_widget_2();
  get_latest_news();
  get_latest_agenda();
  get_pengumuman();
});

function get_widget_1() {
  $.getJSON(URL+'/dataset/info1.php', res => {
    if(res.length){
      res.forEach(item => {
        $('.row-widget_1').append(`
        <div class="col-md-3">
          <div class="widget_1 w1-${item.color}">
            <div class="w1-icon"><i class="fa fa-${item.icon}"></i></div>
            <div class="w1-title">
              ${item.title}
            </div>
            <div class="w1-konten">
              ${item.value}
            </div>
            <div class="w1-sub-konten">
              ${item.sub_value_1} | ${item.sub_value_2}
            </div>
            <div class="w1-footer">
              ${item.deskripsi}
            </div>
          </div>
        </div>`)
      })
    }
  })
}

function get_widget_2() {
  $.getJSON(URL+'/dataset/info2.php', res => {
    if(res.length){
      res.forEach(item => {
        $('.row-widget_2').append(`
        <div class="col-md-3">
          <div class="widget_2 w2-${item.color}">
            <div class="w2-title">
              ${item.title}
            </div>
            <div class="w2-konten">
              <span class="w2-icon"><i class="fa fa-${item.icon}"></i></span>
              ${item.value}
            </div>
            <div class="w2-footer">
              ${item.deskripsi} | ${item.sub_value_1} | ${item.sub_value_2}
            </div>
          </div>
        </div>
        `)
      })
    }
  })
}

function get_latest_news() {
  $.getJSON(BASE_URL+'/?m=home&f=latest_news', res => {
    if(res.length){
      res.forEach(item => {
        let tag = "";
        if(item.tag){
          tag = item.tag.join(', ');
        }
        
        $('.row-berita').append(`
          <div class="berita">
            <img src="${item.gambar}" alt="">
            <div class="berita-konten">
              <div class="berita-judul">${item.judul}</div>
              <div class="berita-kategori"><span>${tag}</span> ${item.tgl_up}</div>
            </div>
          </div>
        `)
      })
    }else{
      $('.row-berita').append(`
          <div class="alert alert-info">
            Belum ada data.
          </div>
        `)
    }
  })
}

function get_latest_agenda() {
  $.getJSON(BASE_URL+'/?m=home&f=latest_agenda', res => {
    if(res.length){
      res.forEach(item => {
        let tag = "";
        if(item.tag){
          tag = item.tag.join(', ');
        }
        
        $('.row-agenda').append(`
        <div class="agenda">
            <img src="${item.gambar}" alt="">
            <div class="agenda-konten">
              <div class="agenda-judul">${item.agenda}</div>
              <div class="agenda-kategori"><span>${tag}</span></div>
              <div class="agenda-kategori">
                <i class="fa fa-calendar-alt text-info"></i> ${item.tgl_mulai} 
                <br><i class="fa fa-calendar-check text-success"></i> ${item.tgl_selesai}
                <br><i class="fa fa-map-marker-alt text-danger"></i> ${item.lokasi}
              </div>
            </div>
          </div>
        `)
      })
    }else{
      $('.row-agenda').append(`
          <div class="alert alert-info">
            Belum ada data.
          </div>
        `)
    }
  })
}

function get_pengumuman() {
  $.getJSON(BASE_URL+'/?m=home&f=pengumuman', res => {
    console.log(res);
    if(res.length){
      let text = "";
      let i = 1;
      let l = res.length;
      res.forEach(item => {
        text += `<strong>${item.judul}</strong> - ${item.deskripsi}`;

        if(i !== l){
          text += ` <b>|</b> `;
        }

        i += 1;
      })

      $('.marquee-pengumuman').html(text);
    }
  })
}