
<script>
function submit(x) {
    if (x == 'add') {
        $('[name="nama_konsumen"]').val("");
        $('[name="lokasi"]').val("");
        $('#konsumenModal .modal-title').html('Tambah Konsumen');
        $('[name="ubah"]').hide();
        $('[name="tambah"]').show();
    } else {
        $('#konsumenModal .modal-title').html('Edit Konsumen');
        $('[name="tambah"]').hide();
        $('[name="ubah"]').show();

        $.ajax({
            type: "POST",
            data: {
                id: x
            },
            url: '<?=base_url();?>process/view_konsumen.php',
            dataType: 'json',
            success: function(data) {
                $('[name="id_konsumen"]').val(data.id_konsumen);
                $('[name="nama_konsumen"]').val(data.nama_konsumen);
                $('[name="lokasi"]').val(data.lokasi);
            }
        });
    }
}
</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">Konsumen</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="#konsumenModal"
                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>Nama Konsumen</th>
                            <th>Lokasi</th>
                            <th width="50">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                    <?php 
                        $n=1;
                        $query = mysqli_query($con,"SELECT * FROM konsumen ORDER BY id_konsumen DESC")or die(mysqli_error($con));
                        while($row = mysqli_fetch_array($query)):
                        ?>
                        <tr>
                            <td><?= $n++; ?></td>
                            <td><?= $row['nama_konsumen']; ?></td>
                            <td><?= $row['lokasi']; ?></td>
                            <td>
                                <a href="#konsumenModal" data-toggle="modal" onclick="submit(<?=$row['id_konsumen'];?>)"
                                    class="btn btn-sm btn-circle btn-info"><i class="fas fa-edit"></i></a>
                                <a href="<?=base_url();?>/process/konsumen.php?act=<?=encrypt('delete');?>&id=<?=encrypt($row['id_konsumen']);?>"
                                    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 konsumen -->
<div class="modal fade" id="konsumenModal" 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/konsumen.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-12">
                            <div class="form-group">
                                <label for="nama_konsumen">Nama konsumen <span class="text-danger">*</span></label>
                                <input type="hidden" name="id_konsumen" class="form-control">
                                <input type="text" class="form-control" id="nama_konsumen" name="nama_konsumen" required
                                oninvalid="InvalidMsg(this)" oninput="InvalidMsg(this)" maxlength="50">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="lokasi">Lokasi <span class="text-danger">*</span></label>
                                <textarea name="lokasi" id="lokasi" cols="30" rows="5" class="form-control"
                                    required oninvalid="InvalidMsg(this)" oninput="InvalidMsg(this)" maxlength="205"></textarea>
                            </div>
                        </div>
                    </div>
                    <script>
                        function InvalidMsg(textbox) {
                            if (textbox.value === '') {
                                textbox.setCustomValidity
                                ('Tidak Boleh Kosong!');
                            } else {
                                textbox.setCustomValidity('');
                            }
                                return true;
                            }
                    </script>
                    <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>