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

        $.ajax({
            type: "POST",
            data: {
                id: x
            },
            url: '<?=base_url();?>process/view_merek.php',
            dataType: 'json',
            success: function(data) {
                $('[name="idmerek"]').val(data.idmerek);
                $('[name="nama_merek"]').val(data.nama_merek);
            }
        });
    }
}
</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">Merek</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="#merekModal"
                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 Merek</th>
                            <th width="50">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php 
                        $n=1;
                        $query = mysqli_query($con,"SELECT * FROM merek ORDER BY idmerek DESC")or die(mysqli_error($con));
                        while($row = mysqli_fetch_array($query)):
                        ?>
                        <tr>
                            <td><?= $n++; ?></td>
                            <td><?= $row['nama_merek']; ?></td>
                            <td>
                                <a href="#merekModal" data-toggle="modal" onclick="submit(<?=$row['idmerek'];?>)"
                                    class="btn btn-sm btn-circle btn-info"><i class="fas fa-edit"></i></a>
                                <a href="<?=base_url();?>/process/merek.php?act=<?=encrypt('delete');?>&id=<?=encrypt($row['idmerek']);?>"
                                    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 barang -->
<div class="modal fade" id="merekModal" 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/merek.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_merek">Nama Merek <span class="text-danger">*</span></label>
                                <input type="hidden" name="idmerek" class="form-control">
                                <input type="text" class="form-control" id="nama_merek" name="nama_merek" required
                                oninvalid="InvalidMsg(this)" oninput="InvalidMsg(this)" maxlength="50">
                            </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>