<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Inventori - Master Barang</title>

  <!-- Custom fonts for this template-->
  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

  <!-- Custom styles for this template-->
  <link href="css/sb-admin-2.min.css" rel="stylesheet">

</head>

<body id="page-top">

  <!-- Page Wrapper -->
  <div id="wrapper">

    <?php include_once('fragments/sidebar.php') ?>

    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column">

      <!-- Main Content -->
      <div id="content">

        <?php include_once('fragments/topbar.php') ?>

        <!-- Begin Page Content -->
        <div class="container-fluid">

          <!-- Page Heading -->
          <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <h1 class="h3 mb-0 text-gray-800">Master Barang</h1>
          </div>

          <!-- Content Row -->

          <div class="row">
            <div class="col-xl-12 col-lg-12">
               <form id="form">
                  <div class="form-group row">
                    <label for="inputNama" class="col-sm-2 col-form-label">Nama</label>
                    <div class="col-sm-4">
                      <input type="text" class="form-control" id="inputNama" name="nama">
                    </div>
                  </div>
                  <div class="form-group row">
                    <label for="inputJenis" class="col-sm-2 col-form-label">Jenis</label>
                    <div class="col-sm-4">
                        <select id="inputJenis" class="form-control" name="jenis">
                            <option value="">Pilih Jenis</option>
                            <option value="ELEKTRONIK">ELEKTRONIK</option>
                            <option value="NON-ELEKTRONIK">NON-ELEKTRONIK</option>
                        </select>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-sm-2 col-form-label">&nbsp;</label>
                    <div class="col-sm-10">
                        <input type="hidden" id="inputId" name="id">
                        <input type="hidden" id="typeForm" name="is_edit">
                        <input type="submit" class="btn btn-primary" value="Submit">
                    </div>
                  </div>
                </form> 

                <br>

              <div class="card shadow mb-4">
                <div class="card-header py-3">
                  <h6 class="m-0 font-weight-bold text-primary">Data Barang</h6>
                </div>
                <div class="card-body">
                  <div class="table-responsive">
                    <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                      <thead>
                        <tr>
                          <th>Nama</th>
                          <th>Jenis</th>
                          <th>Aksi</th>
                        </tr>
                      </thead>
                    </table>
                  </div>
                </div>
              </div>
            </div>

        </div>
        <!-- /.container-fluid -->

      </div>
      <!-- End of Main Content -->

      <?php include_once('fragments/footer.php') ?>

    </div>
    <!-- End of Content Wrapper -->

  </div>
  <!-- End of Page Wrapper -->

  <!-- Scroll to Top Button-->
  <a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
  </a>

<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>

<!-- Custom scripts for all pages-->
<script src="js/sb-admin-2.min.js"></script>
<script src="js/app.js"></script>

<!-- Page level plugins -->
<script src="vendor/datatables/jquery.dataTables.min.js"></script>
<script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>

<script>
$(document).ready(function() {
    // init data table
    var table = $("#dataTable").DataTable({
       "ajax": "actions/items.php",
       searching:      true,
       paging:         true,
       "order": [[ 0, 'asc' ]],
       "columns": [
           { "data": "name" },
           { "data": "type" },
           {
               "data": null,
               "defaultContent": 
                    '<button class="btn btn-danger btn-sm delete" type="button" data-target="#deleteModal" data-toggle="modal" title="Delete Data"    ><i class="fas fa-trash-alt"></i></button>' +
                    '<button class="btn btn-warning btn-sm edit" type="button" title="Edit Data"><i class="fas fa-pencil-alt"></i></button>'
           }
       ]
    });

    // event delete
    $('#dataTable tbody').on( 'click', 'button.delete', function () {
        var data = table.row( $(this).parents('tr') ).data();
        deleteData(data.id);
    } );
    
    // event edit
    $('#dataTable tbody').on( 'click', 'button.edit', function () {
        var data = table.row( $(this).parents('tr') ).data();
        editData(data.id);
    } );

    function deleteData(id) {
        var conf = confirm("Apakah Anda yakin ingin menghapus?");
        if (conf) {
            $.ajax({
                url: "../actions/items.php?id=" +id, 
                method: "DELETE",
                success: function (res) {
                    table.ajax.url('actions/items.php').load();
                    alert('Success'); 
                },
                error: function (err) {
                    alert('Failed'); 
                }
            });
        }
    }
       
    function editData(id) {
        $.ajax({
            url: "../actions/items.php?id=" +id, 
            success: function (res) {
                var item = res.data[0];

                $('#inputNama').val(item.name);
                $('#inputJenis').val(item.type);
                $('#inputId').val(item.id);
                $('#typeForm').val(1);
            },
            error: function (err) {
                alert('Failed'); 
            }
        });
    }
       
    $('#form').submit(function(e) {
        if ($('#typeForm').val() == 1) {
            // update
            $.ajax({
                url: 'actions/items.php', 
                method: 'PUT', 
                data: $(this).serialize(),
                success: function(res) {
                    table.ajax.url('actions/items.php').load();
                    alert('Success'); 
                    $('#form')[0].reset();
                },
                error: function(res) {
                    alert('Failed'); 
                }
            });

            return false;
        }

        // add
        $.ajax({
            url: 'actions/items.php', 
            method: 'POST', 
            data: $(this).serialize(),
            success: function(res) {
                table.ajax.url('actions/items.php').load();
                alert('Success'); 
                $('#form')[0].reset();
            },
            error: function(res) {
                alert('Failed'); 
            }
        });

        e.preventDefault();
    });
});
</script>
</body>

</html>