<link href="<?=base_url();?>assets/template/front/css/croppie.css" rel="stylesheet" async="async" />
    <script src="<?=base_url();?>assets/template/front/js/croppie.min.js" async="async"></script>
    <script src="<?=base_url();?>assets/template/front/js/app.js" async="async"></script>
    <!-- Gambar crop -->
    <div id="preview">
          <div id="crop-area">
            <img src="<?=base_url();?>assets/upload/image/images/1.png" id="profile-pic" />
          </div>
          <img src="<?=base_url()?>assets/upload/image/produk/frame-1.png" id="fg" data-design="1" />
        </div>
        </br></br>
        <input type="file" name="file" onchange="onFileChange(this)">

        <p>
          <button id="download" disabled>Upload Profile Picture</button>
        </p>
	            <!-- Selsai -->
	            <script type="text/javascript">
  function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {type:mimeString});
}

window.uploadPicture = function(callback){
  croppie.result({
    size: "viewport"
  }).then(function(dataURI){
    var formData = new FormData();
    formData.append("design", $("#fg").data("design"));
    formData.append("image", dataURItoBlob(dataURI));
    $.ajax({
      url: '<?=base_url();?>coba/coba',
      data: formData,
      type: "POST",
      contentType: false,
      processData: false,
      success: callback,
      error: function(){
        document.getElementById("download").innerHTML = "Download Profile Picture";
      },
      xhr: function() {
        var myXhr = $.ajaxSettings.xhr();
        if(myXhr.upload){
            myXhr.upload.addEventListener('progress', function(e){
              if(e.lengthComputable){
                var max = e.total;
                var current = e.loaded;

                var percentage = Math.round((current * 100)/max);
                document.getElementById("download").innerHTML = "Uploading... Please Wait... " + percentage + "%";
              }
            }, false);
        }
        return myXhr;
      },
    });
  });
}

window.updatePreview = function(url) {
  document.getElementById("crop-area").innerHTML = "";
  window.croppie = new Croppie(document.getElementById("crop-area"), {
    "url": url,
    boundary: {
      height: 500,
      width: 500
    },
    viewport: {
      width: 500,
      height: 500
    },
  });

  $("#fg").on('mouseover touchstart', function(){
    document.getElementById("fg").style.zIndex = -1;
  });
  $(".cr-boundary").on('mouseleave touchend', function(){
    document.getElementById("fg").style.zIndex = 10;
  });

  document.getElementById("download").onclick = function(){
    this.innerHTML = "Uploading... Please wait...";
    uploadPicture(function(r){
      document.getElementById("download").innerHTML = "Uploaded";
      window.location = "download.php?i=" + r;
    });
  };
  document.getElementById("download").removeAttribute("disabled");
};

window.onFileChange = function(input){
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
      image = new Image();
      image.onload = function() {
        var width = this.width;
        var height = this.height;
        if(width >= 500 && height >= 500)
          updatePreview(e.target.result);
        else
          alert("Image should be atleast have 500px width and 500px height");
      };
      image.src = e.target.result;
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$(document).ready(function(){
  $(".design").on("click", function(){
    $("#fg").attr("src", $(this).attr("src")).data("design", $(this).data("design"));
    $(".design.active").removeClass("active");
    $(this).addClass("active");
  });
});
</script>