<script type="text/javascript">
        var $uploadCrop;

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

                reader.onload = function (e) {
                    $('.nextpp').addClass('readyr');
                    if (e.target.result !== undefined) {
                        $uploadCrop.croppie('bind', {
                            url: e.target.result
                        }).then(function () {
                        });
                    }
                };

                reader.readAsDataURL(input.files[0]);
            }
            else {
                if (!window.FileReader) {
                    swal("Sorry - you're browser doesn't support the FileReader API");
                }
            }
        }

        $('#profile_picture').on('change', function () {
            $(".currentpp").hide();
            if(!($('.nextpp').hasClass('readyr')))
            {
                $uploadCrop = $('.nextpp').croppie({
                    enableExif: true,
                    viewport: {
                        width: 350,
                        height: 350
                    },
                    boundary: {
                        width: 400,
                        height: 400
                    }
                });
            }
            readFile(this);
        });

        $('.nextpp').on('update.croppie', function(ev, cropData) {
            $(".preview-section").removeClass('hide');
                var base64 = $(this).croppie('result',{type: 'base64', circle: 'false' , size: 'original' }).then(function(data){
                    $(".preview").attr("src",data);
                    $(".preview-circle").attr("src",data);
                    $("#pbase64").val(data);
                });


        });




        $(document).on("click","#change_profile_picture",function(e){
                   $("#details_pp").remove('col-md-3').addClass('col-md-12 expanded');
                   $("#details_personal").remove('col-md-9').addClass('col-md-12');
        });




    </script>