jQuery(document).ready(function($){
    var $uploadCrop,
    tempFilename,
    rawImg,
    imageId;
    function readFile(input) {
        // console.log(input.files);
        if (input.files && input.files[0]) {
          var reader = new FileReader();
            reader.onload = function (e) {
                $('.upload-demo').addClass('ready');
                $('#cropImagePop').modal('show');
                rawImg = e.target.result;
                $uploadCrop.croppie('bind', {
                    url: rawImg
                }).then(function(){
                    
                });
            }
            reader.readAsDataURL(input.files[0]);
        }
        else {
            swal("Sorry - you're browser doesn't support the FileReader API");
        }
    }

    $uploadCrop = $('#upload-demo').croppie({
        viewport: {
            width: $('#datacapture').data('width'),
            height: $('#datacapture').data('height'),
        },
        boundary: {
            width: $('#datacapture').data('boundarywidth'),
            height: $('#datacapture').data('boundaryheight')
        },
        enableExif: true
    });

    $('#item-img').on('change', function () { 
        imageId = $(this).data('id'); 
        tempFilename = $(this).val();
        $('#cancelCropBtn').data('id', imageId);
        readFile(this);       
    });

    $('#cropImageBtn').on('click', function (ev) {
        $uploadCrop.croppie('result', {
            size: {
                width: $('#datacapture').data('width'), 
                height: $('#datacapture').data('height')
            }
        }).then(function (resp) {
            // $('#imagebase64').val(resp);
            $('#item-img-output').attr('src', resp);
            $('#item-img-output').data('updated', true);
            $('#cropImagePop').modal('hide');
        });
    });
// End upload preview image
})