<!-- Page Heading -->
          <!-- <h1 class="h3 mb-2 text-gray-800">Tables</h1>
          <p class="mb-4">DataTables is a third party plugin that is used to generate the demo table below. For more information about DataTables, please visit the <a target="_blank" href="https://datatables.net">official DataTables documentation</a>.</p> -->
          <!-- DataTales Example -->
  
          <div class="card shadow mb-4">
            <div class="card-header py-3">
              <h6 class="m-0 font-weight-bold text-primary">Profile</h6>
            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-md-6">
                  <img id="img" style="width: 100%" class="rounded d-block" alt="...">
                    <hr>
                    <form enctype="multipart/form-data" id="form-img" >
                      <input type="hidden" name="kode_user_image" value="<?=$this->session->userdata("kode_user")?>">
                      <div class="custom-file">
                        <input type="file" class="custom-file-input form-control-sm" name="gambar" id="preview_gambar" multiple accept='image/*'>
                        <label class="custom-file-label" for="customFile">Choose file</label>
                      </div>
                    </form>
                </div>
                <div class="col-md-6">
                  <form id="form_detail_user" >
                  <input type="hidden" name="kode_user" value="<?=$this->session->userdata("kode_user")?>">
                  <div class="form-group">
                    <label for="exampleInputEmail1">User Name</label>
                    <input type="text" class="form-control editable" id="username" name="username" value="" disabled>
                  </div>
                  <div class="form-group">
                    <label for="exampleInputPassword1">Email</label>
                    <input type="email" class="form-control editable" id="email" name="email" disabled>
                  </div>
                  <div class="form-group">
                    <label for="exampleInputPassword1">No. Whatsapp</label>
                    <input type="text" class="form-control editable" id="tlp" name="tlp" onkeypress="return hanyaAngka(event)" disabled>
                  </div>
                  <div class="form-group">
                    <div id="gpw">
                      <label for="exampleInputPassword1">Password</label>
                      <div class="input-group mb-3" >
                        <input type="password" class="form-control" id="password" name="password" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2" disabled>
                        <div class="input-group-append">
                          <button type="button" class="input-group-text" id="ganti">Ganti</button>
                        </div>
                      </div>
                    </div>
                    <div class="row" id="upw" style="display: none;">
                      <div class="col-md-5">
                        <label for="exampleInputPassword1">Ganti password</label>
                        <input type="password" class="form-control editable" id="pw" name="pw">
                      </div>
                      <div class="col-md-7">
                        <label for="exampleInputPassword1">Ulang password</label>
                        <div class="input-group mb-3">
                          <input type="password" class="form-control" id="ulang_pw" name="ulang_pw" aria-label="Recipient's username" aria-describedby="basic-addon2">
                          <div class="input-group-append">
                            <button type="button" class="input-group-text" id="upd">Update</button>
                          </div>
                          <div class="input-group-append">
                            <button type="button" class="input-group-text" id="btl"><i class="fas fa-times-circle"></i></button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="modal-footer mt-2">
                    <button type="button" id="edit" class="btn btn-primary btn-sm"><i class="fas fa-user-edit"></i> Edit Profile</button>
                    <div class="btn-group btn-group-sm" id="group_update" role="group" style="display: none;">
                      <button type="button" id="batal" class="btn btn-secondary"><i class="fas fa-times-circle"></i></button>
                      <button type="submit" id="update" class="btn btn-success">Update Profile</button>
                    </div>
                  </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
<script type="text/javascript">
$(document).ready(function(){
    
    var base_url = "<?=base_url()?>";
    var kode_user = "<?=$this->session->userdata("kode_user")?>"
    var user_detail = function(){
      $.ajax({ 
        url: base_url + 'Profile/data_user',
        type: "post",
        data:{kode_user:kode_user},
        dataType: "json",
        async : 'false',
        success: function(data){
          // alert(JSON.stringify(row))
          $("#username").val(data.r.username);
          $("#email").val(data.r.email);
          $("#tlp").val("0"+data.r.tlp.substr(2));
          $("#password").val(data.r.password);
          
          if (data.r.foto == "") {
            $("#img").attr("src",'<?=base_url("assets/img/profile/default-user.png")?>');
          }else{
            $("#img").attr("src",'<?=base_url("assets/img/profile/")?>'+data.r.foto);
          }
        },
        error: function(jqXHR, textStatus, errorThrown) {
          $('#loading').modal('show');
          Command: toastr["error"](errorThrown, "Error");
        },
        beforeSend: function () {
          $('#loading').modal('show');
        },
        complete: function () {
          $('#loading').modal('hide');
        }
      })
    }
    user_detail();
    $("#ganti").click(function(){
      $("#gpw").hide();
      $("#upw").show();
    });
    $("#btl").click(function(){
      $("#gpw").show();
      $("#upw").hide();
    });
    $("#upd").click(function(){
      var pw = $("#pw").val();
      var ulang_pw = $("#ulang_pw").val();
      if(pw != ulang_pw){
        Command: toastr["info"]("Password Tidak Cocok", "Info");
      }else{
        bootbox.confirm("Apakah Anda Yakin Akan Meng-Update Password?", function(result){ 
          if (result==true) {
            $.ajax({ 
              url: base_url + 'Profile/ganti_pw',
              type: "post",
              data:{kode_user:kode_user,pw:pw},
              dataType: "json",
              async : 'false',
              success: function(response){
                if (response == true) {
                  Command: toastr["success"]("Anda Berhasil Mengganti Password", "success");
                  $("#gpw").show();
                  $("#upw").hide();
                  
                }
              },
              error: function(jqXHR, textStatus, errorThrown) {
                $('#loading').modal('show');
                Command: toastr["error"](errorThrown, "Error");
              },
              beforeSend: function () {
                $('#loading').modal('show');
              },
              complete: function () {
                $('#loading').modal('hide');
              }
            })
          }
        });
      }
      
    })
    $("#edit").click(function(){
      $(".editable").attr("disabled",false);
      $("#edit").hide();
      $("#group_update").show();
    });
    $("#batal").click(function(){
      $(".editable").attr("disabled",true);
      $("#edit").show();
      $("#group_update").hide();
    });
    $("#form_detail_user").submit(function(){
      var form_data = new FormData($('#form_detail_user')[0]);
      bootbox.confirm("Apakah Anda Yakin Akan Meng-Update Data?", function(result){ 
        if (result==true) {
          $.ajax({
                url             : base_url + 'Profile/update_detail_user', 
                type            : "POST",
                dataType        : 'json',
                mimeType        : 'multipart/form-data',
                data            : form_data,
                contentType     : false,
                cache           : false,
                processData     : false,
                success         : function(response){
                  // alert(JSON.stringify(response))
                    if(response == true){
                        // $('#'+id_modal).modal('hide');  
                        // swal.close();
                        Command: toastr["success"]("Anda Berhasil Meng-Update Data User Anda<br>Halaman Akan reload otomatis", "Berhasil");
                        $(".editable").attr("disabled",true);
                        $("#edit").show();
                        $("#group_update").hide();
                        user_detail();
                        setInterval(function(){window.location.replace(base_url);}, 3000);
                    }else{
                        Command: toastr["error"]("Simpan error, data tidak berhasil disimpan", "Error");
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                  $('#loading').modal('show');
                        Command: toastr["error"](errorThrown, "Error");
                },
                beforeSend: function () {
                  $('#loading').modal('show');
                },
                complete: function () {
                    $('#loading').modal('hide');
                }
          });
        }
      });
          
        return false;
      });
    $("#preview_gambar").change(function(){
       bacaGambar(this);
       //////////////////////upload gambar //////////////
       var form_data = new FormData($('#form-img')[0]);
       $.ajax({
                url             : base_url + 'Profile/update_foto_profile', 
                type            : "POST",
                dataType        : 'json',
                mimeType        : 'multipart/form-data',
                data            : form_data,
                contentType     : false,
                cache           : false,
                processData     : false,
                success         : function(response){
                  // alert(JSON.stringify(response))
                  if (response ==true) {
                    Command: toastr["success"]("Anda Berhasil Mengganti Foto Profile", "Berhasil");
                    setInterval(function(){window.location.replace(base_url);}, 3000);
                  }else if(response =="size"){
                    Command: toastr["warning"]("Ukuran file lebih dari 2MB", "warning");
                  }else if(response =="ext"){
                    Command: toastr["warning"]("Extensi file bukan JPEG,JPG,GIF, atau PNG", "warning");
                  }else{
                    Command: toastr["warning"]("Maaf, Anda Gagal Mengganti Foto Profile", "warning");
                  }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                  $('#loading').modal('show');
                        Command: toastr["error"](errorThrown, "Error");
                },
                beforeSend: function () {
                  $('#loading').modal('show');
                },
                complete: function () {
                    $('#loading').modal('hide');
                }
      });
    });
  });
function bacaGambar(input) {
   if (input.files && input.files[0]) {
      var reader = new FileReader();
 
      reader.onload = function (e) {
          $('#img').attr('src', e.target.result);
      }
 
      reader.readAsDataURL(input.files[0]);
   }
}
function hanyaAngka(evt) {
      var charCode = (evt.which) ? evt.which : event.keyCode
       if (charCode > 31 && (charCode < 48 || charCode > 57))
 
        return false;
      return true;
    }
</script>
