<div class="panel panel-grey">
    <div class="panel-heading">
        <div class="panel-heading-btn">
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-inverse" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
        </div>
        <h4 class="panel-title">Data</h4>
        <hr>
    </div>
    <form class="form-horizontal" action="<?php echo site_url('akun/create_edit?type=user'); ?>" method="post">
      <div class="panel-body">
            <input type="hidden" name="id_user" value="<?php echo !empty($edit) ? $edit['id_user'] : '' ?>">
            <div class="form-group m-b-12">
                <label class="col-sm-2 control-label">User Name</label>
                <div class="col-sm-7">
                    <input type="text" name="username" class="form-control" placeholder="User Name" value="<?php echo !empty($edit) ? $edit['username'] : '' ?>">
                </div>
            </div>
            <div class="form-group m-b-12">
                <label class="col-sm-2 control-label">Email</label>
                <div class="col-sm-7">
                    <input type="email" name="email" class="form-control" placeholder="Email" value="<?php echo !empty($edit) ? $edit['email'] : '' ?>">
                </div>
            </div>
            <div class="form-group m-b-12">
                <label class="col-sm-2 control-label">Role User</label>
                <div class="col-sm-7">
                    <select id="role_user" name="role_user[]" class="form-control default-select2" style="width: 100%;" multiple="">
                        <option></option>
                        <?php foreach ($user_role as $r) { ?>
                            <option <?php echo !empty($edit) && strpos(','.$edit['id_group'].',', $r['id_group'].',') != false ? 'selected':'' ?> value="<?php echo $r['id_group']; ?>"><?php echo $r['nama_group']; ?></option>
                        <?php } ?>
                    </select>
                </div>
            </div>
            <div class="form-group m-b-12" id="analis">
                <label class="col-sm-2 control-label">Role Analis</label>
                <div class="col-sm-7">
                    <select name="role_analis[]" class="form-control default-select2" style="width: 100%;" multiple="">
                        <option></option>
                        <?php foreach ($analis_role as $r) { ?>
                            <option <?php echo !empty($edit) && strpos($edit['role_analis'], $r['id_jenis'].'|') != false ? 'selected':'' ?> value="<?php echo $r['id_jenis']; ?>">
                              <?php echo $r['nama_jenis']; ?>
                            </option>
                        <?php } ?>
                    </select>
                </div>
            </div>
            <div class="form-group m-b-12 ubah_password">
                <label class="col-sm-2 control-label"></label>
                <div class="col-sm-7">
                    <label><input type="checkbox" id='ubah_password' onclick="edit_password()">Ubah Password</label>
                </div>
            </div>
            <div class="form-group m-b-12 password">
                <label class="col-sm-2 control-label">Password<?php echo !empty($edit) ? ' Baru' : ''; ?></label>
                <div class="col-sm-7">
                    <input type="password" id='password' name="password" onkeyup="openRePass();" class="form-control" placeholder="Password">
                </div>
            </div>
            <div class="form-group m-b-12 repassword">
                <label class="col-sm-2 control-label">Konfirmasi Password<?php echo !empty($edit) ? ' Baru' : ''; ?></label>
                <div class="col-sm-7">
                    <input type="password" id='repassword' name="repassword" onkeyup="cekPass();" class="form-control" placeholder="Konfirmasi Password">
                    <span class='bg-danger' id='note'> Repassword yang anda masukkan salah!!</span>
                </div>
            </div>
          </div>
          <div class="panel-footer">
            <div class="form-group m-b-12">
            <div class="col-sm-2"></div>
              <div class="col-sm-7">
                  <button type="submit" class="btn btn-success" >Simpan</button>
                  <button type="reset" class="btn btn-warning" >Reset</button>
                  <a href="<?php echo site_url('akun/data_user') ?>" class="btn btn-danger">Batal</a>
              </div>
            </div>
          </div>
      </form>
</div>

<script>
    $(document).ready(function () {
      <?php if(!empty($edit) && strpos(','.$edit['id_group'].',', '3,') != false) { ?>
        $('#analis').show();
      <?php } else{ ?>
        $('#analis').hide();
      <?php } ?>

      <?php if(!empty($edit)) { ?>
        $('.password').hide();
        $('.repassword').hide();
        $('.ubah_password').show();
      <?php } else{ ?>
        $('.password').show();
        $('.repassword').show();
        $('.ubah_password').hide();
      <?php } ?>
    });
    $('#note').hide();
    $('#repassword').prop('disabled', true);
    function cekPass() {
        var pass = $('#password').val();
        var repass = $('#repassword').val();
        if (repass !== pass) {
            $('#note').show();
            $(':input[type="submit"]').prop('disabled', true);
        } else {
            $('#note').hide();
            $(':input[type="submit"]').prop('disabled', false);
        }
    }
    function openRePass() {
        $('#repassword').prop('disabled', false);
    }
    function add() {
        $("#modalTitle").text("Tambah User");
    }
    function edit(obj) {
        $("#modalTitle").text("Edit User");
    }
    $("#role_user").change(function () {
        var roles = $(this).val();
        if (roles.includes("3")) {
            $('#analis').show();
        } else {
            $('#analis').hide();
        }
    });

    function edit_password(){
      if ($('#ubah_password').is(':checked')) {
        $('.password').show();
        $('.repassword').show();
      }else {
        $('.password').hide();
        $('.repassword').hide();
      }
    }
</script>
