<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="card card-info">
    <div class="card-header">
        <h3 class="card-title"><?php echo $halaman; ?></h3>
    </div>
    <!-- /.card-header -->
    <!-- form start -->
    <form class="form-horizontal" method="post" action="<?php echo base_url(); ?>petugas/petugas/add" enctype="multipart/form-data">
        <div class="card-body">
            <div class="form-group row">
                <label for="inputEmail3" class="col-sm-2 col-form-label">Nama Lengkap</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="txt_mst_petugas_nama_lengkap" required placeholder="Nama petugas">
                </div>
            </div>

            <div class="form-group row">
                <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
                <div class="col-sm-5">
                    <input type="email" class="form-control" name="txt_mst_petugas_email" required placeholder="Email">
                </div>
            </div>

            <div class="form-group row">
                <label for="inputEmail3" class="col-sm-2 col-form-label">Password</label>
                <div class="col-sm-5">
                    <input type="password" class="form-control" name="txt_mst_petugas_password" required placeholder="Password">
                </div>
            </div>

            <div class="form-group row">
                <label for="inputEmail3" class="col-sm-2 col-form-label">Status</label>
                <div class="offset-sm-0 col-sm-10">
                    <select required class="form-control select2bs4 col-sm-2" style="width: 4 0%;" name='txt_mst_petugas_status' required>Pilih Status

                        <option value="Aktif">Aktif</option>
                        <option value="Tidak Aktif">Tidak Aktif</option>

                    </select>
                </div>
            </div>


            <!-- <div class="form-group row">
        <div class="offset-sm-2 col-sm-10">
            <div class="form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck2">
            <label class="form-check-label" for="exampleCheck2">Remember me</label>
            </div>
        </div>
        </div> -->
        </div>
        <!-- /.card-body -->
        <div class="card-footer">
            <button type="submit" class="btn btn-info">Simpan</button>
            <a id="btn" href="javascript:window.history.go(-1);" class="btn btn-default float-right">Tutup</a>
        </div>
        <!-- /.card-footer -->
    </form>
</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>



<style type="text/css">
    .preloader1 {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background-color: #fff;
        opacity: 0.5;
    }

    .preloader1 .loading {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font: 14px arial;
    }
</style>

<div id="preloader">
    <div class="loading">
        <div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        document.getElementById("preloader").style.visibility = "hidden";
        $("#btn").click(function() {
            document.getElementById("preloader").style.visibility = "visible";
            var element = document.getElementById("preloader");
            element.classList.add("preloader1");
        });

    });
</script>