<script>
function submit(x) {
    if (x == 'add') {
        $('[name="nama_satuan"]').val("");
        $('#satuanModal .modal-title').html('Tambah Satuan');
        $('[name="ubah"]').hide();
        $('[name="tambah"]').show();
    } else {
        $('#satuanModal .modal-title').html('Ubah Data Satuan');
        $('[name="tambah"]').hide();
        $('[name="ubah"]').show();

        $.ajax({
            type: "POST",
            data: {
                id: x
            },
            url: '<?=base_url();?>process/view_satuan.php',
            dataType: 'json',
            success: function(data) {
                $('[name="id_satuan"]').val(data.id_satuan);
                $('[name="nama_satuan"]').val(data.nama_satuan);
            }
        });
    }
}
</script>
<!-- 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">Satuan</h1>
    </div>
    <!-- DataTales Example -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <a href="#" class="btn btn-primary btn-icon-split btn-sm" data-toggle="modal" data-target="#satuanModal"
            onclick="submit('add')">
                <span class="icon text-white-50">
                    <i class="fas fa-plus"></i>
                </span>
                <span class="text">Tambah</span>
            </a>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover" id="dataTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th width="20">No</th>
                            <th>Satuan</th>
                            <th width="50">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php 
                        $n=1;
                        $query = mysqli_query($con,"SELECT * FROM satuan ORDER BY id_satuan DESC")or die(mysqli_error($con));
                        while($row = mysqli_fetch_array($query)):
                        ?>
                        <tr>
                            <td><?= $n++; ?></td>
                            <td><?= $row['nama_satuan']; ?></td>
                            <td>
                            <a href="#satuanModal" data-toggle="modal" onclick="submit(<?=$row['id_satuan'];?>)"
                                    class="btn btn-sm btn-circle btn-info"><i class="fas fa-edit"></i></a>
                                <a href="<?=base_url();?>/process/satuan.php?act=<?=encrypt('delete');?>&id=<?=encrypt($row['id_satuan']);?>"
                                    class="btn btn-sm btn-circle btn-danger btn-hapus"><i class="fas fa-trash"></i></a>
                            </td>
                        </tr>
                        <?php endwhile; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

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

<!-- Modal Tambah satuan -->
<div class="modal fade" id="satuanModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <form action="<?=base_url();?>process/satuan.php" method="post">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Tambah Satuan</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-la``bel="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="nama_satuan">Nama Satuan <span class="text-danger">*</span></label>
                                <input type="hidden" name="id_satuan" class="form-control">
                                <input type="text" class="form-control" name="nama_satuan" required
                                oninvalid="InvalidMsg(this)" oninput="InvalidMsg(this)" maxlength="12">
                            </div>
                            <script>
                                function InvalidMsg(textbox) {
                                    if (textbox.value === '') {
                                        textbox.setCustomValidity
                                        ('Tidak Boleh Kosong!');
                                    } else {
                                        textbox.setCustomValidity('');
                                    }
                                        return true;
                                    }
                            </script>
                        </div>
                    </div>
                    <hr class="sidebar-divider">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal"><i class="fas fa-times"></i>
                        Batal</button>
                    <button class="btn btn-primary float-right" type="submit" name="tambah"><i class="fas fa-save"></i>
                        Tambah</button>
                    <button class="btn btn-primary float-right" type="submit" name="ubah"><i class="fas fa-save"></i>
                        Ubah</button>
                </div>
            </form>
        </div>
    </div>
</div>