<?php $this->load->view('meta') ?>
<div class="wrapper">
  <?php $this->load->view('sidebar') ?>
  <?php $this->load->view('navbar') ?>

  <div class="container-fluid">

    <!-- DataTales Example -->
    <div class="card shadow mb-4">
      <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
        <h6 class="m-0 font-weight-bold text-primary"><?php echo $title ?></h6>
        <div class="dropdown no-arrow">
          <button class="btn btn-sm btn-success" id="btnAdd" onclick="tambah()"><span class="fa fa-plus"></span> Tambah Data</button>
        </div>
      </div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-bordered datatable" cellspacing="0">
            <thead>
              <tr>
                <th>No</th>
                <th>Kode Kirim</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              <?php
              $no = 1;
              foreach ($kode_batubara_kirim as $kode_batubara_kirim) {
              ?>
                <tr>
                  <td><?php echo $no; ?></td>
                  <td><?php echo $kode_batubara_kirim->nama_kode_batubara_kirim; ?></td>
                  <td class="center">
                    <button type="button" id="edit<?= encrypt($kode_batubara_kirim->id_kode_batubara_kirim) ?>" class="btn btn-warning btn-sm" data-toggle="tooltip" title="Ubah" onclick="ubah('<?= encrypt($kode_batubara_kirim->id_kode_batubara_kirim) ?>')"><i class="fas fa-fw fa-pencil-alt"></i></button>
                    <button type="button" class="btn btn-danger btn-sm" data-toggle="tooltip" title="Hapus" onclick="hapus('<?= encrypt($kode_batubara_kirim->id_kode_batubara_kirim) ?>')"><i class="fas fa-fw fa-trash-alt"></i></button>
                  </td>
                </tr>
              <?php
                $no++;
              }
              ?>
            </tbody>
          </table>
        </div>
      </div>
    </div>

  </div>


  <!-- Modal -->
  <div id="modalAdd" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
          <h6 class="m-0 font-weight-bold text-primary">Tambah <?php echo $title ?></h6>
          <div class="dropdown no-arrow">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
        </div>
        <form id="formAdd" class="form-horizontal" method="post" enctype="multipart/form-data">
          <div class="modal-body">
            <div class="container-fluid">
              <div class="row">
                <div class="col-md-3">Kode Kirim</div>
                <div class="col-md-8">
                  <input type="text" name="nama_kode_batubara_kirim" class="form-control" placeholder="Kode Kirim" autofocus="true" required />
                  <br />
                </div>
              </div>

            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Batal</button>
            <button id="btnSubmitAdd" type="submit" class="btn btn-success">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>


  <div id="modalEdit" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
          <h6 class="m-0 font-weight-bold text-primary">Edit <?php echo $title ?></h6>
          <div class="dropdown no-arrow">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
        </div>
        <form id="formEdit" class="form-horizontal" method="post" enctype="multipart/form-data">
          <input type="hidden" name="id_kode_batubara_kirim" id="id_kode_batubara_kirim" class="form-control" required />
          <div class="modal-body">
            <div class="container-fluid">
              <div class="row">
                <div class="col-md-3">Kode Kirim</div>
                <div class="col-md-8">
                  <input type="text" name="nama_kode_batubara_kirim" id="nama_kode_batubara_kirim" class="form-control" placeholder="Kode Kirim" required />
                  <br />
                </div>
              </div>

            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Batal</button>
            <button id="btnSubmitEdit" type="submit" class="btn btn-success">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>



  <?php $this->load->view('footer') ?>
</div><!-- ./wrapper -->
<?php $this->load->view('js') ?>
<!-- DATA TABLES-->
<script>
  function tambah() {
    $('#btnAdd').html('<i class="fas fa-spinner fa-spin"></i> Loading...');
    $('#formAdd')[0].reset();

    $('#btnAdd').html('<span class="fa fa-plus"></span> Tambah Data');
    $('#modalAdd').modal('show');
  }

  $('#formAdd').submit(function(e) {
    e.preventDefault();
    $('#btnSubmitAdd').html('<i class="fas fa-spinner fa-spin"></i> Loading...');
    $('#btnSubmitAdd').attr('disabled', true);
    var formData = new FormData($(this)[0]);
    $.ajax({
      type: 'post',
      enctype: 'multipart/form-data',
      url: '<?php echo base_url(); ?>kode_batubara_kirim/add',
      data: formData,
      async: true,
      cache: false,
      contentType: false,
      processData: false
    }).done(function(res) {
      $('#btnSubmitAdd').html('Submit');
      $('#btnSubmitAdd').removeAttr('disabled');
      if (res == '1') {
        $("#modalAdd").modal('toggle');
        swal({
          title: 'Data Behasil Ditambah',
          text: 'Data berhasil disimpan ke database.',
          type: 'success',
          closeOnConfirm: false
        }, function(isConfirm) {
          if (isConfirm) {
            location.reload();
          }
        })
      } else {
        swal("Kesalahan!", "kirimkan data dengan lengkap!", 'error');
      }
    }).fail(function(res) {
      console.log(res);
    });
  });

  function ubah(id) {
    $('#edit' + id).html('<i class="fas fa-spinner fa-spin"></i>');
    $('#formEdit')[0].reset();
    $.ajax({
      type: 'post',
      url: '<?php echo base_url(); ?>kode_batubara_kirim/get_data',
      data: 'id=' + id
    }).done(function(res) {
      var data = $.parseJSON(res);
      $('#nama_kode_batubara_kirim').val(data.nama_kode_batubara_kirim);
      $('#id_kode_batubara_kirim').val(id);

      $('#edit' + id).html('<i class="fas fa-fw fa-pencil-alt"></i>');
      $('#modalEdit').modal('show');

    }).fail(function(res) {
      console.log(res);
    });
  }


  $('#formEdit').submit(function(e) {
    e.preventDefault();
    $('#btnSubmitEdit').html('<i class="fas fa-spinner fa-spin"></i> Loading...');
    $('#btnSubmitEdit').attr('disabled', true);
    var formData = new FormData($(this)[0]);
    $.ajax({
      type: 'post',
      url: '<?php echo base_url(); ?>kode_batubara_kirim/update',
      data: formData,
      async: true,
      cache: false,
      contentType: false,
      processData: false
    }).done(function(res) {
      $('#btnSubmitEdit').html('Submit');
      $('#btnSubmitEdit').removeAttr('disabled');
      if (res == '1') {
        $("#modalEdit").modal('toggle');
        swal({
          title: 'Data Behasil Diubah',
          text: 'Data berhasil disimpan ke database.',
          type: 'success',
          closeOnConfirm: false
        }, function(isConfirm) {
          if (isConfirm) {
            location.reload();
          }
        })
      } else {
        swal("Kesalahan!", "kirimkan data dengan lengkap", 'error');
      }
    }).fail(function(res) {
      console.log(res);
    });
  });


  function hapus(code) {
    swal({
        title: "Apakah anda yakin?",
        text: "Data akan dihapus permanen dari Database!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#EF5350",
        confirmButtonText: "Hapus",
        cancelButtonText: "Batal",
        closeOnConfirm: false,
        showLoaderOnConfirm: true
      },
      function() {
        $.ajax({
          type: 'post',
          url: '<?php echo base_url(); ?>kode_batubara_kirim/delete',
          data: {
            submit: true,
            id: code
          }
        }).done(function() {
          swal({
              title: "Berhasil",
              text: "Data Berhasil Dihapus",
              type: "success",
              showCancelButton: false,
              closeOnConfirm: true
            },
            function(isConfirm) {
              if (isConfirm) {
                location.reload();
              }
            });
        });
      }
    );
  }
</script>
<script type="text/javascript">
  function validasiFile() {
    var inputFile = document.getElementById('icon_add');
    var pathFile = inputFile.value;
    var ekstensiOk = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
    if (!ekstensiOk.exec(pathFile)) {
      alert('Silakan upload file yang memiliki ekstensi .jpeg/.jpg/.png/.gif');
      inputFile.value = '';
      return false;
    } else {
      //Pratinjau gambar
      if (inputFile.files && inputFile.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
          document.getElementById('pratinjauGambar').innerHTML = '<img src="' + e.target.result + '" width="100%"/>';
        };
        reader.readAsDataURL(inputFile.files[0]);
      }
    }
  }


  function validasiFileEdit() {
    var inputFile = document.getElementById('icon_edit');
    var pathFile = inputFile.value;
    var ekstensiOk = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
    if (!ekstensiOk.exec(pathFile)) {
      alert('Silakan upload file yang memiliki ekstensi .jpeg/.jpg/.png/.gif');
      inputFile.value = '';
      return false;
    } else {
      //Pratinjau gambar
      if (inputFile.files && inputFile.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
          document.getElementById('pratinjauGambarEdit').innerHTML = '<img src="' + e.target.result + '" width="100%"/>';
        };
        reader.readAsDataURL(inputFile.files[0]);
      }
    }
  }
</script>
</body>

</html>