<script>


    //Initializing Image Croppie
    $image_crop = $('#image_demo').croppie({
            enableExif: false,
            viewport: {
            width:300,
            height:300,
            type:'square' //circle
            },
            boundary:{
            width:350,
            height:350
            }    
    });

        $('#insert_image').on('change', function(){
            var reader = new FileReader();
            reader.onload = function (event) {
                $image_crop.croppie('bind', {
                url: event.target.result
                }).then(function(){
                    console.log('jQuery bind complete');
                });
            };
            reader.readAsDataURL(this.files[0]);
            $('#insertimageModal').modal('show');

        });




        $('.crop_image').click(function(event){
            
           

            var userID = '<?php echo $ApplicantID; ?>';
            var CampusID= '<?php echo  $CampusID; ?>';
            
            $image_crop.croppie('result', {
                type: 'canvas',
                size: 'viewport'
            }).then(function(response){

                $('.crop_image').html('saving... <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
               
                $.ajax({
                    type: "POST",
                    url: "../../../controller/scripts/applicant/owner_imageUpload.php",
                    data: {
                            image:response,
                            userID:userID,
                            CampusID:CampusID
                            },
                    success: function(result) {
                       
                        if(result.trim() != 'success'){

                            $.wnoty({
                            type: 'danger',
                            message: 'Image Not Uploaded',
                            autohideDelay: 5000, // 5 seconds
                            position:'top-right',
                            autohide:true
                            });

                        }else{

                            $('.crop_image').html('Crop Image', false);
                            $('.crop_image').prop("disabled", false);
                            $('.user-profile-img').prop("disabled", false);

                            $('.user-profile-img').attr('src', response);


                           
                            
                            $('#insertimageModal').modal('hide');

                            $.wnoty({
                                type: 'success',
                                message: 'Image Uploaded Successfully',
                                autohideDelay: 5000, // 5 seconds
                                position:'top-right',
                                autohide:true
                            });
                            
                           
                            
                        }

                        

                        
                    }
                });
            });

        });





</script>