a

        <div class="wrapper">
            <div class="container-fluid">

                <!-- Page-Title -->
                <div class="row">
                    <div class="col-sm-12">
                        <div class="page-title-box">
                            <div class="btn-group pull-right">
                                <ol class="breadcrumb hide-phone p-0 m-0">
                                    <li class="breadcrumb-item"><a href="#"><?=$this->config->item('title');?></a></li>
                                    <li class="breadcrumb-item active">Instagram</li>
                                    <li class="breadcrumb-item active">Kelola Akun</li>
                                </ol>
                            </div>
                            <h4 class="page-title">Kelola Akun</h4>
                        </div>
                    </div>
                </div>
                <!-- end page title end breadcrumb -->
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-animation="bounce" data-target=".tambah-akun-modal">Tambah Akun</button>

<div class="modal fade tambah-akun-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="tambahAkun">Tambah Akun Instagram</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
              <div class="form" role="form">
                <div class="alert alert-danger"><b>PERINGATAN</b>!! Akun anda akan tersimpan di database. Akan tetapi kami akan mengenskripsi password anda, yang membuat akun kalian tetap aman!</div>
                  <div class="alert alert-danger">Akun anda yang tadinya di private, akan kami rubah menjadi public.</div>
                <div class="form-group row">
                    <label for="example-text-input" class="col-sm-2 col-form-label">Username</label>
                    <div class="col-sm-10">
                        <input class="form-control" type="text" placeholder="Username Instagram" id="username">
                    </div>
                </div>

                <div class="form-group row">
                    <label for="example-text-input" class="col-sm-2 col-form-label">Password</label>
                    <div class="col-sm-10">
                        <input class="form-control" type="password" placeholder="Password Instagram" id="password">
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-12">
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="customCheck1" name='accept' value='truee'>
                            <label class="custom-control-label font-weight-normal" for="customCheck1">Saya setuju dengan peringatan diatas</label>
                        </div>
                    </div>
                </div>

                <button class="btn btn-primary waves-effect waves-light" onclick="addAkun();" id="btn_login">Login</button>
              </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<br><br>

                <div class="row">

                  <!-- akun -->
                    <?php
                    $petik = "'";
                    if($data == 0){
                      echo '<h5>Belum ada akun yang terdaftar</h5>';
                    } else {
                    foreach ($data as $key) {
                      $username_ig = $key['akun_instagram_username'];
                      $picture = $key['akun_instagram_pict'];
                      echo '
                                              <div class="col-md-4 col-lg-4 col-xl-4">
                                                  <div class="card m-b-30">
                                                      <div class="card-body">
                                                          <div class="d-flex flex-row">
                                                              <div class="col-3 align-self-center">
                                                                  <div class="round">
                                                                      <img src="'.$picture.'" alt="" height="55" class="round">
                                                                  </div>
                                                              </div>
                                                              <div class="col-6 align-self-center text-center">
                                                                  <div class="m-l-10">
                                                                      <h6 class="mt-0 round-inner">'.$username_ig.'</h6>
                                                                  </div>
                                                              </div>
                                                              <div class="col-3 align-self-end align-self-center">
                                                                <button type="button" class="btn btn-light dropdown-toggle waves-effect" data-toggle="dropdown" aria-expanded="false"> Aksi <span class="caret"></span> </button>
                                                                <div class="dropdown-menu">
                                                                    <a class="dropdown-item" href="#">Edit</a>
                                                                    <a href="#" onclick="hapusUser('.$petik.$username_ig.$petik.')" class="dropdown-item btn_hapus">Hapus</a>
                                                                </div>
                                                              </div>
                                                          </div>
                                                      </div>
                                                  </div>
                                              </div>';
                    }
                  }
                    ?>
                    <!-- End Akun -->
                </div>

            </div> <!-- end container -->
        </div>
        <!-- end wrapper -->

<script type="text/javascript">
function addAkun(){
  var username = $("#username").val();
  var password = $("#password").val();
  var check = $('#customCheck1').is(":checked");
  if(username == "" || password == ""){
    swal({
      title: "Gagal!",
      text: "Input tidak boleh kosong!",
      type: "error"
    });

  } else if(check == false){
    swal({
      title: "Gagal!",
      text: "Anda belum menyetujui peringatan diatas!",
      type: "error"
    });
  } else {
    $.ajax({
        url : '<?=base_url();?>ajax/addAkunInstagram',
        data  : 'username='+username+'&password='+password,
        type  : 'POST',
        dataType: 'html',
        beforeSend: function(){
          $('#btn_login').attr("disabled", "disabled");
        },
        success : function(msg){
            if(msg == 'noValue'){
              $('#btn_login').removeAttr("disabled");
              swal({
                title: "Gagal!",
                text: "Masih ada data yang kosong!",
                type: "error"
              });
            } else if(msg == '200'){
                  swal({
                    title: "Success!",
                    text: "Berhasil menambahkan akun!",
                    type: "success"
                  });
                  $('.tambah-akun-modal').modal('hide');
                  setTimeout(function(){
                   location.reload();
                  }, 1500);
            } else if(msg == "update"){
              swal({
                title: "Success!",
                text: "Akun telah berhasil di update!",
                type: "success"
              });
              $('.tambah-akun-modal').modal('hide');
              setTimeout(function(){
               location.reload();
              }, 1500);
            } else {
              if(msg == ""){
                msg = "Jaringan terlalu lambat, silahkan coba lagi";
              }
              $('#btn_login').removeAttr("disabled");
                      swal({
                        title: "Gagal!",
                        type: "error",
                        html: msg
                      });
                    }
        }
    });
  }

}

function hapusUser(username){
  const swalWithBootstrapButtons = Swal.mixin({
    confirmButtonClass: 'btn btn-success',
    cancelButtonClass: 'btn btn-danger',
    buttonsStyling: false,
  })

  swalWithBootstrapButtons({
    title: 'Anda Yakin ?',
    text: "Anda yakin ingin menghapus "+username+" ?",
    type: 'warning',
    showCancelButton: true,
    confirmButtonText: 'Ya',
    cancelButtonText: 'Tidak',
    reverseButtons: true
  }).then((result) => {
    if (result.value) {
      $.ajax({
          url : '<?=base_url();?>ajax/hapusUserIG',
          data  : 'username='+username,
          type  : 'POST',
          dataType: 'html',
          success : function(msg){
            setTimeout(function(){
            location.reload();
          }, 1000);
          }
      });
      swalWithBootstrapButtons(
        'Deleted!',
        'Your file has been deleted.',
        'success'
      )
    } else if (
      // Read more about handling dismissals
      result.dismiss === Swal.DismissReason.cancel
    ) {
      swalWithBootstrapButtons(
        'Cancelled',
        'Anda membatalkan untuk menghapus akun!',
        'error'
      )
    }
  })
}

</script>