<?= form_open('', 'id="users_form"', ['id' => $id]) ?>
	<?= xform_input('username', 'Nama', $username, 3, 9, true, 200, 'ginputx') ?>
	<?= xform_input('nip', 'NIP', $nip, 3, 9, true, 30, 'ginputx') ?>
	<?= xform_input('email', 'Email', $email, 3, 9, true, 200, 'ginputx') ?>
	<?= xform_input('whatsapp', 'Whatsapp', $whatsapp, 3, 9, true, 30, 'angkax') ?>
	<?= xform_select2('unit', $dd_pdk_unit, $unit, 'Unit', 3, 9) ?>
	<?= xform_select2('jabatan', $dd_pdk_jabatan, $jabatan, 'Jabatan', 3, 9) ?>
	<?= xform_select2('id_kantor', $dd_pdk_satker, $id_kantor, 'Kantor', 3, 9) ?>

	<div class="row mb-3">
        <label class="col-sm-3 col-form-label text-right">Password:</label>
        <div class="col-sm-9">
            <input type="password" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent ginputx" id="password" name="password" placeholder="Password" value="">
            <div class="invalid-feedback" id="em_password"></div>
        </div>
    </div>

    <div class="row mb-3">
        <label class="col-sm-3 col-form-label text-right"></label>
        <div class="col-sm-9">
            <input type="password" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent ginputx" id="password_confirm" name="password_confirm" placeholder="Konfirmasi Password" value="">
            <div class="invalid-feedback" id="em_password_confirm"></div>
        </div>
    </div>
    <hr>
    <div class="invalid-feedback text-center" id="em_message"></div>
	<div class="modal-footer">
      <button type="button" class="btn btn-secondary waves-effect waves-themed" data-dismiss="modal">Close</button>
      <button type="submit" id="btn_rekam" class="btn btn-primary waves-effect waves-themed">
         Save Changes
      </button>
   </div>
</form>

<script type="text/javascript">
	$('.ginputx').inputmask({
     	regex: "^[a-zA-Z0-9\\s.,@-]*$"
 	});

 	$('.angkax').numeric();

	$('.select2').select2({
      	dropdownCssClass:'increasezindex'
   	});

	$("#users_form").submit(function(e){
	   e.preventDefault();
	   var url = '<?= $action ?>'
	   var formData = $(this).serialize();
	   $.ajax({
	      url: url,
	      type: "post",
	      dataType: 'json',
	      data: formData,
	      beforeSend  : function() {
	         $(".form-group").removeClass("is-invalid");
	         $(".invalid-feedback").html('').hide();
	         BtnLoading($("#btn_rekam"));
	      },
	      error: function (xhr, status, message) {
	         var res = JSON.parse(xhr.responseText);
	         $(res.messages).each(function(i,val){
	            var inputname = Object.keys(val)[0];
	            $.each(val,function(k,v){
	               $("#"+inputname).focus();
	               $("#"+k).addClass("is-invalid");
	               $("#em_"+k).html(v).fadeIn();
	            });
	         });
	         BtnReset($("#btn_rekam"));
	      },
	      success: function(res) {
	         $('#modal-user').modal('hide');
	         $('#datagrid_users').datagrid('load');
	         toastr.success(res.message, 'Updated!!', {timeOut: 3000});
	      },
	      complete: function() {
	         BtnReset($("#btn_rekam"));
	      }
	   });
	});
</script>