//saat klik tombol tambah foto
            $('.btn-img').click(function(){
                $('.input-img').click();
            });

            // function untuk ambil foto dengan pluigins readfile
            function readFile(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $('.crop').addClass('ready');
                        $('.boat-img').css('display','none');

                        // ini ulang plugin dengan metode bind
                        $uploadCrop.croppie('bind', {
                            url: e.target.result
                        }).then(function(){
                            console.log('jQuery bind complete');
                        });
                    }
                    reader.readAsDataURL(input.files[0]);
                }
                else {
                    swal("Sorry - you're browser doesn't support the FileReader API");
                }
            }
            // initialize plugin upload foto croppie
            $uploadCrop = $('.crop').croppie({
                enableExif: true,
                viewport: {
                    width: $('.card-image').width(),
                    height: $('.card-image').width() * 2/3,
                    type : 'square'
                },
                 boundary: {
                    width: $('.card-image').width(),
                    height: $('.card-image').width()
                }
            })
            ;
            // saat gambar sudah dipilih
            $('.input-img').change(function(event){
                readFile(this)
            })
            // saat menekan tombol simpan
            $('.btn-save-img').click(function(){
                $uploadCrop.croppie('result',{
                    type: 'base64',
                    size: {width:600,height:400}
                }).then(function (resp) {
                    var data_id = <?php echo $boat->id_boat ?>;
                    var base_url = '<?php echo base_url() ?>';
                    $.ajax({
                        url: ""+base_url+"admin/boat/upload_image/"+data_id+"",
                        dataType: 'json',
                        type: "POST",
                        data:{'userfile':resp,'id_boat': data_id},
                        beforeSend: function() {
                            $('.btn-img').css('display','none');
                            $('.crop').removeClass('ready');
                            $('.loader').fadeIn();
                        },
                        success: function (data) {
                            $('.btn-img').fadeIn();
                            $('.loader').fadeOut();
                            $('.boat-img').attr('src',resp);
                            $('.boat-img').css('display','block');
                             Materialize.toast(data.status, 4000);
                        },
                        error: function (xhr, status, err) {
                            // console.log(xhr);
                            // console.log(status);
                            // console.log(err);
                        },
                    });
                });
            })