<script>
function submit(x) {
    if (x == 'add') {
        $('[name="nama_pengguna"]').val("");
        $('#penggunaModal .modal-title').html('Tambah Pengguna');
        $('[name="kata_sandi"]').prop('required', true);
        $('[name="nama_pengguna"]').prop('readonly', false);
        $('#passwordHelp').hide();
        $('[name="ubah"]').hide();
        $('[name="tambah"]').show();
    } else {
        $('#penggunaModal .modal-title').html('Edit Pengguna');
        $('[name="kata_sandi"]').prop('required', false);
        $('[name="nama_pengguna"]').prop('readonly', true);
        $('#passwordHelp').show();
        $('[name="tambah"]').hide();
        $('[name="ubah"]').show();

        $.ajax({
            type: "POST",
            data: {
                id: x
            },
            url: '<?=base_url();?>process/view_user.php',
            dataType: 'json',
            success: function(data) {
                $('[name="id"]').val(data.id_users);
                $('[name="nama_pengguna"]').val(data.nama_pengguna);
            }
        });
    }
}
</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">Pengguna</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="#penggunaModal"
                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>ID Pengguna</th>
                            <th>Nama Pengguna</th>
                            <!-- <th>LEVEL</th> -->
                            <th width="50">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php 
                        $n=1;
                        $query = mysqli_query($con,"SELECT * FROM users ORDER BY id_users DESC")or die(mysqli_error($con));
                        while($row = mysqli_fetch_array($query)):
                        ?>
                        <tr>
                            <td><?= $n++; ?></td>
                            <td><?= $row['id_users']; ?></td>
                            <td><?= $row['nama_pengguna']; ?></td>
                            <td>
                                <a href="#penggunaModal" data-toggle="modal" onclick="submit(<?=$row['id_users'];?>)"
                                    class="btn btn-sm btn-circle btn-info"><i class="fas fa-edit"></i></a>
                                <a href="<?=base_url();?>/process/pengguna.php?act=<?=encrypt('delete');?>&id=<?=encrypt($row['id_users']);?>"
                                    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 Pengguna -->
<div class="modal fade" id="penggunaModal" 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/pengguna.php" method="post">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"></h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                        <div class="form-group">
                                <label for="nama_pengguna">Nama Pengguna <span class="text-danger">*</span></label>
                                <input type="hidden" name="idmerek" class="form-control">
                                <input type="text" class="form-control" id="nama_pengguna" name="nama_pengguna" required>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Kata Sandi</label>
                                <input type="password" class="form-control" name="kata_sandi"
                                    aria-describedby="passwordHelp">
                                <small id="passwordHelp" class="form-text" style="color:red;">Biarkan kosong
                                    jika tidak ingin merubah kata sandi</small>
                            </div>
                        </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>