const noDataTextTabel = "No data available in table";
const serverErrorText =
  "Gagal terhubung ke Server, cek koneksi internet anda!!!";
const ajaxTimeout = 15000;
let idTANow;
let dataKonsul = [];

const logoutModal = {
  show: () => {
    $("#logoutModal").modal({
      onApprove: function(){
        doLogout();
        return false;
      }
    }).modal("show");
  },
  hide: () => {
    $("#logoutModal").modal("hide");
  }
};

const loader = {
  show: () => {
    $("#loaderSegment").show();
  },
  hide: () => {
    $("#loaderSegment").hide();
  }
};

const konsultasiModal = {
  show: (status, idKonsul = "") => {
    if (status == "tambah") {
      $("#konsultasiModal")
        .modal({
          autofocus: false,
          onApprove: function() {
            postTambahKonsultasi();
            return false;
          },
          allowMultiple: true
        })
        .modal("show");
    } else {
      $("#konsultasiModal")
        .modal({
          onApprove: function() {
            postEditKonsultasi(idKonsul);
            return false;
          },
          allowMultiple: true
        })
        .modal("show");
    }
  },
  hide: () => {
    $("#konsultasiModal").modal("hide");
  }
};

const hapusDataModal = {
  show: (idKonsultasi) => {
    $("#hapusDataModal")
      .modal({
        onApprove: function() {
          postHapusKonsultasi(idKonsultasi);
          return false;
        },
        allowMultiple: true
      })
      .modal("show");
  },
  hide: () => {
    $("#hapusDataModal").modal("hide");
  }
};


$(document).ready(function() {
  document.getElementById("x").click();
  setInterval(refreshSession, 60 * 1000);
  initForm();
});

function initForm() {
  $("#formKonsultasi").form({
    fields: {
      dateKonsultasiField: "empty",
      topikField: "empty"
    }
  });

  $("#formPengaturan").form({
    fields: {
      userEmail: ["empty", "email"],
      userHP: "empty"
    }
  });
}

function refreshSession() {
  let request = $.ajax({
    url: urlAPI + `/web-refreshSession.php`,
    type: "GET",
    contentType: "application/json",
    processData: false,
    contentType: false,
    cache: false
  });

  request.done(function(msg) {});

  request.fail(function(jqXHR, textStatus) {});
}

function doLogout() {
  window.location.replace("logout.php");
}


function sideBar() {
  $(".ui.sidebar").sidebar("toggle");
}

function openTab(evt, divName) {
  var i, tabcontent, tablinks;

  var namatabcontent = "tabContent";
  var namatablink = "tabLinks";

  let judul = "";

  tabcontent = document.getElementsByName(namatabcontent);
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  tablinks = document.getElementsByName(namatablink);
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace("active", "");
  }

  $(".ui.sidebar").sidebar("hide");

  evt.currentTarget.className += " active";
  document.getElementById(divName).style.display = "block";
  doEvent(divName);
}

function doEvent(namaEvent) {
  judul = "";

  switch (namaEvent) {
    case "konsultasi":
      judul = "Konsultasi Tugas Akhir";
      getMyTugasAkhirList();
      break;
    case "pengaturan":
      judul = "Ubah Data Pribadi";
      getMyPengaturan();
      break;
  }

  $("#judulMenu").html(judul);
}

function openLogoutModal() {
  sideBar();
  logoutModal.show();
}

function getMyTugasAkhirList() {
  let formData = new FormData();
  formData.append("token", token);
  formData.append("tipe", "mahasiswa");
  $('#tabelTugasAkhir > tbody').html(`<tr><td colspan="4"><div class="ui active primary centered inline loader"></div></td></tr>`);
  let request = $.ajax({
    url: urlAPI + "/getTugasAkhirMahasiswa.php",
    timeout: ajaxTimeout,
    type: "POST",
    data: formData,
    processData: false,
    contentType: false
  });

  request.done(function(msg) {
    const status = msg.status;
    if(status === 1){
      const data = msg.tugasAkhir;
      const banyakData = data.length;
      if(banyakData === 0){
        $('#tabelTugasAkhir > tbody').html(`<tr><td colspan="4" style="text-align:center">Tidak Ada Data</td></tr>`);
      }else{
        let isiTabel = '';
        for(let i = 0; i < banyakData; i++){
          const tugasAkhir = data[i];
          const id = tugasAkhir.id;
          const judul = tugasAkhir.judul;
          const semester = tugasAkhir.semester;
          const no = i + 1;
          isiTabel += `<tr><td>${no}</td><td>${judul}</td><td>${semester}</td><td><button class="ui blue icon button" title="Detail Tugas Akhir" onClick="showDetailTugasAkhir(${id})"><i class="eye icon"></i></button></td></tr>`;
        }
        $('#tabelTugasAkhir > tbody').html(isiTabel);   
      }
    }else{
      showToast('warning', msg.msg);
    }
  });

  request.fail(function(jqXHR, textStatus) {
    $('#tabelTugasAkhir > tbody').html(`<tr><td colspan="4" style="text-align:center">Gagal mengambil data, cek koneksi internet anda.</td></tr>`); 
    showToast("error", serverErrorText);
  });
}

function showDetailTugasAkhir(idTA){
  let formData = new FormData();
  formData.append("token", token);
  formData.append("id", idTA);
  formData.append("tipe", "mahasiswa");
  
  loader.show();
  let request = $.ajax({
    url: urlAPI + "/getDetailTA.php",
    timeout: ajaxTimeout,
    type: "POST",
    data: formData,
    processData: false,
    contentType: false
  });

  request.done(function(msg) {
    const status = msg.status;
    loader.hide();
    if(status === 1){
      const data = msg.tugasAkhir;
      const judul = data.judul;
      const mahasiswa = data.mahasiswa;
      const nim = data.nim;
      const pembimbing1 = data.pembimbing1;
      const pembimbing2 = data.pembimbing2;
      const penguji1 = data.penguji1;
      const penguji2 = data.penguji2;
      const semester = data.semester;
      const tahun = data.tahun;
      const tanggalKeputusan = data.tanggalKeputusan;
        
      $('#judulTugasAkhir').html(judul);
      $('#semTATugasAkhir').html(semester);
      $('#waktuKepTugasAkhir').html(tanggalKeputusan);
      $('#pemb1TugasAkhir').html(pembimbing1);
      $('#pemb2TugasAkhir').html(pembimbing2);
      $('#peng1TugasAkhir').html(penguji1);
      $('#peng2TugasAkhir').html(penguji2);
      idTANow = idTA;
      $('#detailTugasAkhirModal').modal({allowMultiple: true, autofocus: false}).modal('show');
      fillKonsultasiHistory();
    }else{
      showToast('warning', msg.msg);
    }
  });

  request.fail(function(jqXHR, textStatus) {
    loader.hide();
    showToast("error", serverErrorText);
  });
}

function fillKonsultasiHistory(){
  dataKonsul = [];
  const idTA = idTANow;
  let formData = new FormData();
  formData.append("token", token);
  formData.append("id", idTA);
  formData.append("tipe", "mahasiswa");
  
  $('#tabelListKonsultasi > tbody').html(`<tr><td colspan="6" style="text-align:center">Tidak Ada Data</td></tr>`);
  let request = $.ajax({
    url: urlAPI + "/getKonsultasiHistory.php",
    timeout: ajaxTimeout,
    type: "POST",
    data: formData,
    processData: false,
    contentType: false
  });

  request.done(function(msg) {
    const status = msg.status;
    loader.hide();
    if(status === 1){
      const listData = msg.data;
      const banyakData = listData.length;
      if(banyakData === 0){
        $('#tabelListKonsultasi > tbody').html(`<tr><td colspan="6" style="text-align:center">Tidak Ada Data</td></tr>`);
      }else{
        let isiTabel = '';
        for(let i = (banyakData-1); i >= 0; i--){
          let konsultasi = listData[i];
          const id = konsultasi.id;
          const waktu = konsultasi.waktu;
          const topik = konsultasi.topik;
          const editable = konsultasi.editable;
          const verifPemb1 = konsultasi.verifPemb1;
          const verifPemb2 = konsultasi.verifPemb2;
        
          const no = i + 1;
          konsultasi.konsulKe = no;
          dataKonsul[id] = konsultasi;
          let aksi = `<button class="ui blue icon button" title="Detail Konsultasi" onClick="showDetailKonsultasi(${id})"><i class="eye icon"></i></button> `;
          if(editable){
            aksi += `<button class="ui yellow icon button" title="Edit Data Konsultasi" onClick="showEditKonsultasi(${id})"><i class="pen icon"></i></button> <button class="ui red icon button" title="Edit Data Konsultasi" onClick="showHapusKonsultasi(${id})"><i class="trash icon"></i></button>`;
          }
          isiTabel += `<tr><td>${no}</td><td>${waktu}</td><td><span class="giveMeEllipsis">${topik}</span></td><td>${getVerifikasiLabel(verifPemb1)}</td><td>${getVerifikasiLabel(verifPemb2)}</td><td>${aksi}</td></tr>`;
        }
        $('#tabelListKonsultasi > tbody').html(isiTabel);  
      }
    }else{
      showToast('warning', msg.msg);
    }
  });

  request.fail(function(jqXHR, textStatus) {
    $('#tabelListKonsultasi > tbody').html(`<tr><td colspan="6" style="text-align:center">Gagal mengambil data, cek koneksi internet anda.</td></tr>`); 
    showToast("error", serverErrorText);
  });
}

function showToast(status, pesan) {
  $("body").toast({
    class: status,
    message: pesan
  });
}

function getVerifikasiLabel(verif){
  if(verif){
    return `<label class="ui green label">SUDAH</label>`;
  }else{
    return `<label class="ui grey label">BELUM</label>`;
  }
}

function showTambahKonsultasiModal(){
  $('#judulFormKonsultasi').html('Tambah Data Konsultasi');
  $('#formKonsultasi').form('clear');
  konsultasiModal.show('tambah');
  
  initCalendarHari('dateKonsultasiCalendar');
  $('#dateKonsultasiField').val(todayDMY);
}

function postTambahKonsultasi(){
  if (!$("#formKonsultasi").form("validate form")) {
    return;
  }

  const allFields = $("#formKonsultasi").form("get values");
  const topik = allFields.topikField;

  let formData = new FormData();
  formData.append("token", token);
  formData.append("id", idTANow);
  formData.append("topik", topik);
  formData.append("tanggal", $('#dateKonsultasiField').val());
  
  loader.show();
  let request = $.ajax({
    url: urlAPI + "/tambahKonsultasi.php",
    timeout: ajaxTimeout,
    type: "POST",
    data: formData,
    processData: false,
    contentType: false
  });

  request.done(function(msg) {
    const status = msg.status;
    const pesan = msg.msg;
    loader.hide();
    if(status === 1){
      showToast('success', pesan);
      konsultasiModal.hide();
      fillKonsultasiHistory();
    }else{
      showToast('warning', pesan);
    }
  });

  request.fail(function(jqXHR, textStatus) {
    loader.hide();
    showToast("error", serverErrorText);
  });

}

function showEditKonsultasi(id){
  $('#judulFormKonsultasi').html('Edit Data Konsultasi');
  $('#formKonsultasi').form('clear');
  $('#formKonsultasi').form('set values',{
    topikField: dataKonsul[id].topik
  });
  konsultasiModal.show('edit', id);
  
  initCalendarHari('dateKonsultasiCalendar');
  $('#dateKonsultasiField').val(dataKonsul[id].waktu);
}

function showHapusKonsultasi(id){
  const tanggalKonsul = dataKonsul[id].waktu;
  const topik = dataKonsul[id].topik;
  $('#isiDataHapus').html(`Data Konsultasi tanggal ${tanggalKonsul} dengan topik ${topik}?`);
  hapusDataModal.show(id);
}

function showDetailKonsultasi(id){
  const konsultasi = dataKonsul[id];
  const namaPemb1 = konsultasi.pemb1;
  const namaPemb2 = konsultasi.pemb2;
  const verifPemb1 = getVerifikasiLabel(konsultasi.verifPemb1);
  const verifPemb2 = getVerifikasiLabel(konsultasi.verifPemb2);
  let waktuPemb1 = konsultasi.waktuPemb1;
  let waktuPemb2 = konsultasi.waktuPemb2;
  const topik = konsultasi.topik;
  const konsulKe = konsultasi.konsulKe;
  const catatanPemb1 = konsultasi.catatanPemb1;
  const catatanPemb2 = konsultasi.catatanPemb2;
  
  if(!konsultasi.verifPemb1){
    waktuPemb1 = '-';
  }

  if(!konsultasi.verifPemb2){
    waktuPemb2 = '-';
  }
  $('#detailKonsulKe').html(konsulKe);
  $('#detailKonsulTopik').html(topik);
  $('#catatanPemb1').html(catatanPemb1);
  $('#catatanPemb2').html(catatanPemb2);
  $('#detailKonsulPemb1').html(`${namaPemb1}<br>Status Konsultasi : ${verifPemb1}<br>Waktu Verifikasi : ${waktuPemb1}`);
  $('#detailKonsulPemb2').html(`${namaPemb2}<br>Status Konsultasi : ${verifPemb2}<br>Waktu Verifikasi : ${waktuPemb2}`);
  $('#detailKonsultasiModal').modal({allowMultiple:true}).modal('show');
}

function postEditKonsultasi(id){
  if (!$("#formKonsultasi").form("validate form")) {
    return;
  }

  const allFields = $("#formKonsultasi").form("get values");
  const topik = allFields.topikField;

  let formData = new FormData();
  formData.append("token", token);
  formData.append("id", id);
  formData.append("topik", topik);
  formData.append("tanggal", $('#dateKonsultasiField').val());
  
  loader.show();
  let request = $.ajax({
    url: urlAPI + "/editKonsultasi.php",
    timeout: ajaxTimeout,
    type: "POST",
    data: formData,
    processData: false,
    contentType: false
  });

  request.done(function(msg) {
    const status = msg.status;
    const pesan = msg.msg;
    loader.hide();
    if(status === 1){
      showToast('success', pesan);
      konsultasiModal.hide();
      fillKonsultasiHistory();
    }else{
      showToast('warning', pesan);
    }
  });

  request.fail(function(jqXHR, textStatus) {
    loader.hide();
    showToast("error", serverErrorText);
  });
}

function postHapusKonsultasi(id){
  let formData = new FormData();
  formData.append("token", token);
  formData.append("id", id);
  
  loader.show();
  let request = $.ajax({
    url: urlAPI + "/hapusKonsultasi.php",
    timeout: ajaxTimeout,
    type: "POST",
    data: formData,
    processData: false,
    contentType: false
  });

  request.done(function(msg) {
    const status = msg.status;
    const pesan = msg.msg;
    loader.hide();
    if(status === 1){
      showToast('success', pesan);
      hapusDataModal.hide();
      fillKonsultasiHistory();
    }else{
      showToast('warning', pesan);
    }
  });

  request.fail(function(jqXHR, textStatus) {
    loader.hide();
    showToast("error", serverErrorText);
  });
}

function getMyPengaturan(){
  let formData = new FormData();
  formData.append("token", token);

  loader.show();
  let request = $.ajax({
    url: urlAPI + "/getMyPengaturan.php",
    timeout: ajaxTimeout,
    type: "POST",
    data: formData,
    processData: false,
    contentType: false
  });

  request.done(function(msg) {
    const status = msg.status;
    loader.hide();
    if(status === 1){
     const hp = msg.hp;
     const email = msg.email;
     $('#formPengaturan').form('set values',{
        userEmail: email,
        userHP: hp
     });
    }else{
      const pesan = msg.msg;
      showToast('warning', pesan);
    }
  });

  request.fail(function(jqXHR, textStatus) {
    loader.hide();
    showToast("error", serverErrorText);
  });
}

function postPengaturan(){
  if (!$("#formPengaturan").form("validate form")) {
    return;
  }
  
  const allFields = $('#formPengaturan').form('get values');
  let formData = new FormData();
  formData.append("token", token);
  formData.append("email", allFields.userEmail);
  formData.append("hp", allFields.userHP);

  loader.show();
  let request = $.ajax({
    url: urlAPI + "/postPengaturan.php",
    timeout: ajaxTimeout,
    type: "POST",
    data: formData,
    processData: false,
    contentType: false
  });

  request.done(function(msg) {
    loader.hide();
    
    const status = msg.status;
    const pesan = msg.msg;
    
    if(status === 1){
      showToast('success', pesan);
    }else{
      showToast('warning', pesan);
    }
  });

  request.fail(function(jqXHR, textStatus) {
    loader.hide();
    showToast("error", serverErrorText);
  });
}

function cetakB4(){
  window.open(`../print/cetak_konsultasi_ta.php?id=${idTANow}`, '_blank');
}

function initCalendarHari(idCalendar) {
  $(`#${idCalendar}`).calendar({
    type: "date",
    monthFirst: false,
    formatter: {
      date: function (date, settings) {
        if (!date) return "";
        var day = "" + date.getDate();
        var month = "" + (date.getMonth() + 1);
        var year = date.getFullYear();

        if (day.length == 1) {
          day = "0" + day;
        }

        if (month.length == 1) {
          month = "0" + month;
        }

        return day + "-" + month + "-" + year;
      },
    },
    popupOptions: {
      position: "bottom left",
      forcePosition: true,
      lastResort: "bottom left",
      prefer: "opposite",
      hideOnScroll: false,
    },
  }).calendar('set date', new Date());;
}