<div class="breadcrumb">
<h4><?php echo $breadcrumb ?></h4>
</div>
<div class="row">
    <div class="" id="messagealert">
        <a href="#" class="close" data-dismiss="alert"></a>
        <strong id="message"></strong>
    </div>
    <p align="center"><img src="<?= base_url('asset/images/loading.gif') ?>" id="loaderIcon" style="display:none" /></p>
   <div class="col-md-12" id="layoutFormAddUser">
    <div class="box">
      <div class="topright btn-group btn-group-devided">
      </div>
      <div class="box-header with-border">
          <h3 class="box-title">Form Ganti Password</h3>
      </div>
      <div class="row">
        <form  id="myfrm" method="POST" class="form-horizontal" enctype="multipart/form-data">
          <div class="col-sm-6" >
            <table class="table">
                <tr>
                    <td  width="150px;"><label>Username</label></td>
                    <td width="10px;">:</td>
                    <td>
                        <input type="text" class="form-control" name="txtUsername"
                         id="txtUsername" value="<?PHP  echo $username; ?>" autocomplete="off">
                         <input type="hidden" name="username" id="username" value="<?PHP  echo $username; ?>"/>
                    </td>
                </tr>
                <tr>
                    <td  width="150px;"><label>Password Lama</label></td>
                    <td width="10px;">:</td>
                    <td>
                        <input type="password" class="form-control" name="txtoldpassword"
                         id="txtoldpassword" autocomplete="off" onBlur="CheckPassword()">
                          <span id="password_status"></span> 
                    </td>
                </tr>
                <tr>
                    <td  width="150px;"><label>Password Baru</label></td>
                    <td width="10px;">:</td>
                    <td>
                        <input type="password" class="form-control" name="txtNewPassword"
                         id="txtNewPassword" autocomplete="off">
                    </td>
                </tr>
                <tr>
                    <td  width="150px;"><label>Confirmasi Password</label></td>
                    <td width="10px;">:</td>
                    <td>
                        <input type="password" class="form-control" 
                        name="txtConfirmasiPassword" id="txtConfirmasiPassword" onBlur="CheckConfirmationPassword()" autocomplete="off">
                        <span id="password_status_confirmation"></span> 
                    </td>
                </tr>
            </table>
          </div>
            <div class="col-sm-12">
              <div class="box-footer with-border">
               <input  type="submit" id="save" name="save" class="btn btn-primary btn-sm" Value="Ubah Password">
              </div>
            </div>
          </form>
        </div>
    </div>
  </div>
</div>

<script>
    
    function CheckPassword() {
      $("#loaderIcon").show();
      jQuery.ajax({
         url : "<?php echo base_url('change/CheckPassword') ?>",
         data:'username='+$("#username").val()  + '&oldpassword='+$("#txtoldpassword").val(),
         type: "POST",
         success:function(data)
         {
            if (data != "")
            {
              $("#save").prop('disabled', true);
              $("#txtoldpassword").val('');
              $("#password_status").html(data);
            }else {
              $("#save").prop('disabled', false);
               $("#password_status").text('');
            }
            $("#loaderIcon").hide();
         },
         error:function (){}
      });
   }

   function CheckConfirmationPassword() 
   {
      var txtNewPassword        = $("#txtNewPassword").val();
      var txtConfirmasiPassword = $("#txtConfirmasiPassword").val();
      if(txtNewPassword != txtConfirmasiPassword){
         $("#loaderIcon").show();
         $("#password_status_confirmation").text('password baru tidak sama dengan Confirmasi password');
         $("#save").prop('disabled', true);
      }else {
        $("#password_status_confirmation").text('');
        $("#save").prop('disabled', false);
      }
       $("#loaderIcon").hide();
   }

    $(document).ready(function () 
    {
      $("#messagealert").hide();
      $('form#myfrm').submit(function(event) 
      {
        event.preventDefault();
        var txtoldpassword  = $('#txtoldpassword').val();
        var txtNewPassword  = $('#txtNewPassword').val();
        var txtConfirmasiPassword = $("#txtConfirmasiPassword").val();
        
        if(txtoldpassword == "") 
        {
            alert('Password lama Tidak boleh kosong');
            $("#txtoldpassword").focus();
            return;
        }

        if(txtNewPassword == "") 
        {
            alert('Password Baru Tidak boleh kosong');
            $("#txtNewPassword").focus();
            return;
        }

        if(txtNewPassword != txtConfirmasiPassword)
        {
           $("#password_status_confirmation").text('password baru tidak sama dengan Confirmasi password');
           $("#txtNewPassword").focus();
          return;
        }

        var formData = new FormData($(this)[0]);    
        $.ajax({
                  type: "POST",
                  url : "<?php echo base_url('change/UpdatePassword') ?>",
                  data: formData,
                  async: false,
                  cache: false,
                  contentType: false,
                  processData: false,
                  beforeSend: function() 
                  {
                     $("#messagealert").show();
                  },
         }).done(function(data){
              if (data=='ok'){
                $("#message").text('password Berhasil Di Upate');
                $("#messagealert").addClass("alert alert-info");
                $("#txtoldpassword").val('');
                $("#txtNewPassword").val('');
                $("#txtConfirmasiPassword").val('');
              }
             
              $("#messagealert").fadeOut(3000);
        });
      });
       
    });

   
</script>

<style type="text/css">
  input[type=text], textarea
  {
      border: 1px solid #ccc;
  }
  input[type=text]:focus, textarea:focus
  {
      background-color: #FFBFFF;
      border: 1px solid #ccc;
  }
</style>