<h3 class="page-header">Data Mahasiswa</h3>
<a class="btn btn-primary" onclick="addForm()">Tambah</a><br><br>

<!-- Membuat tabel /-->
<table width="100%" class="table table-striped">
   <thead>
      <tr>
         <td width="25">No</td>
         <td>NIM</td>
         <td>Nama</td>
         <td>Matkul</td>
         <td width="200">Aksi</td>
      </tr>
   </thead>
   <tbody></tbody>
</table>
<div class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">

<form class="form-horizontal" method="post" onsubmit="return saveData()" id="newModalForm">
   <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"> &times; </span> </button>
      <h3 class="modal-title"></h3>
   </div>

   <div class="modal-body">
      <input type="hidden" name="id" id="id">

<div class="form-group">
   <label class="control-label col-md-2">Nim</label>
   <div class="col-md-4">
      <input type="number" name="nim" id="nim" class="form-control">
   </div>
</div>

<div class="form-group">
   <label class="control-label col-md-2">Nama</label>
   <div class="col-md-4">
      <input type="text" name="nama" id="nama" class="form-control">
   </div>
</div>

<div class="form-group">
   <label class="control-label col-md-2">Matkul</label>
   <div class="col-md-4">
     <select class="form-control" name="id_matkul">
       <option value="1">Web</option>
       <option value="2">Ansi</option>
       <option value="3">English</option>
       <option value="4">Fuzzy</option>
     </select>
   </div>
</div>

   <div class="modal-footer">
      <button type="submit" class="btn btn-primary btn-save"> Simpan </button>
      <button type="button" class="btn btn-warning" data-dismiss="modal"> Batal </button>
   </div>

</form>

       </div>
   </div>
</div>

<script type="text/javascript">
var table, save_method;
$(function(){
   table = $('.table').DataTable({
      "processing" : true,
      "ajax" : {
         "url" : "<?= BASE_PATH ?>/home/listData",
         "type" : "POST"
      }
   });
   $("#newModalForm").validate({
    rules: {
      nim: {
        required: true,
        minlength: 8
      },
      nama: "required"
    },
    messages: {
      nim: {
        required: "Please enter some data",
        minlength: "Your data must be at least 8 characters"
      },
      nama: "Please provide some data"
    }
  });
});

   function addForm(){
      save_method = "add";
      $('#modal-form').modal('show');
      $('#modal-form form')[0].reset();
      $('.modal-title').text('Tambah Data Mahasiswa');
   }

   function editForm(id){
      save_method = "edit";
      $('#modal-form form')[0].reset();
      $.ajax({
        url : "<?= BASE_PATH ?>/home/edit/"+id,
        type : "GET",
        dataType : "JSON",
        success : function(data){
          $('#modal-form').modal('show');
          $('.modal-title').text('Edit Data Mahasiswa');

          $('#id').val(data.id_mhs);
          $('#nim').val(data.nim);
          $('#nama').val(data.nama);
          $('#matkul').val(data.id_matkul);
        },
        error : function(){
          alert("Tidak dapat menampilkan data!");
        }
      });
   }

   function saveData(){
      if(save_method == "add") url = "<?= BASE_PATH ?>/home/insert";
      else url = "<?= BASE_PATH ?>/home/update";

      $.ajax({
        url : url,
        type : "POST",
        data : $('#modal-form form').serialize(),
        success : function(data){
          $('#modal-form').modal('hide');
          table.ajax.reload();
        },
        error : function(){
          alert("Tidak dapat menyimpan data!");
        }
      });
      return false;
   }

   function deleteData(id){
      if(confirm("Apakah yakin data akan dihapus?")){
        $.ajax({
          url : "<?= BASE_PATH ?>/home/delete/"+id,
          type : "GET",
          success : function(data){
            table.ajax.reload();
          },
          error : function(){
            alert("Tidak dapat menghapus data!");
          }
        });
      }
   }
</script>