<link rel="stylesheet" href="<?php echo base_url(); ?>assets/plugins/select2/css/select2.min.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">

<link rel="stylesheet" href="<?php echo base_url(); ?>assets/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/plugins/datatables-buttons/css/buttons.bootstrap4.min.css">



<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <!-- general form elements -->
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Pilih Petugas</h3>
                </div>
                <!-- /.card-header -->
                <!-- form start -->
                <form>
                    <div class="card-body">
                        <div class="form-group">
                            <select select class="form-control select2bs4" style="width: 100%;" id="mst_petugas_id" name='mst_petugas_id' required onchange='loadData()'>
                                <option selected="selected"></option>
                                <?php foreach ($petugas as $rows) { ?>
                                    <option value="<?= $rows->mst_petugas_id ?>">
                                        <?= $rows->mst_petugas_nama_lengkap ?>
                                    </option>
                                <?php } ?>
                            </select>

                        </div>
                    </div>
                </form>
            </div>
        </div>


        <div class="col-md-6">
            <!-- general form elements -->
            <div class="card card-warning">
                <div class="card-header">
                    <h3 class="card-title"> <?php echo $halaman; ?></h3>
                </div>

                <div class="card-body">
                    <div class="form-group">
                        <div id="tabel"></div>
                    </div>
                </div>

            </div>
        </div>



    </div>
</div>


<script src="<?php echo base_url(); ?>assets/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="<?php echo base_url(); ?>assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        loadData();
    });

    $(function() {
        //Initialize Select2 Elements
        $('.select2').select2()

        //Initialize Select2 Elements
        $('.select2bs4').select2({
            theme: 'bootstrap4'
        })

    })

    function loadData() {
        var mst_petugas_id = $("#mst_petugas_id").val();
        $.ajax({
            type: 'GET',
            url: '<?php echo base_url() ?>petugas/hakakses/modul',
            data: 'mst_petugas_id=' + mst_petugas_id,
            success: function(html) {
                $("#tabel").html(html);
            }
        })
    }

    function addRule(mst_menu_id) {
        var mst_petugas_id = $("#mst_petugas_id").val();
        $.ajax({
            type: 'GET',
            url: '<?php echo base_url() ?>petugas/hakakses/addrule',
            data: 'mst_petugas_id=' + mst_petugas_id + '&mst_menu_id=' + mst_menu_id,
            success: function(html) {
                //$("#tabel").html(html);
                //loadData();
                //alert('suksess memberikan akses');
                //window.location.reload();
            }
        })
    }
</script>