<script src="{{ asset('quickadmin/plugins/fileUpload/js/jquery.iframe-transport.js') }}"></script>
<script src="{{ asset('quickadmin/plugins/fileUpload/js/jquery.fileupload.js') }}"></script>
<script src="{{ asset('adminlte/js/image/validation/image-validate.js/') }}"></script>

<script>
    $(document).ready(function () {
        var cropper;
        var img;
        var container = $('#backgroundCropper');
        var buttonCrop = $('#crop');
        var aspectRatio = '{{ $aspectRatio }}';
        var model = '{{ $model }}';
        var cropperEventSubmit;
        var fileName;
        var scaleX = 1;
        var scaleY = 1;


        $('#crop').on('click', function (e) {

            var $this = $('.file-upload');
            var $parent = $this.parent();
            var inputFile = $('.file-upload');

            cropper.crop();
            containerHide();
            var base64 = cropper.getCroppedCanvas().toDataURL('image/png');
            var url = inputFile.data('url');
            var canvas = cropper.getCroppedCanvas({});
            canvas.toBlob(function (blob) {
                var formData = new FormData();
                formData.append(inputFile.data('filekey') + '[]', blob, fileName);

                if (fileName) {
                    formData.append('file_name', fileName);
                }
                formData.append('model_name', model);
                formData.append('bucket', inputFile.data('bucket'));
                formData.append('file_key', inputFile.data('filekey'));
                formData.append('_token', '{{ csrf_token() }}');

                $.ajax({
                    url: url,
                    type: 'POST',
                    processData: false,
                    contentType: false,
                    data: formData
                }).done(function (data) {
                    $.each(data.files, function (index, file) {
                        var $line = $($('<p/>', {class: "form-group"}).html(file.file_name + ' (' + file.size + ' bytes)').appendTo($parent.find('.files-list')));
                        $line.append('<a href="#" class="btn btn-xs btn-danger remove-file">Видалити</a>');
                        $line.append('<input type="hidden" name="' + $this.data('bucket') + '_id[]" value="' + file.id + '"/>');
                        if ($parent.find('.' + $this.data('bucket') + '-ids').val() != '') {
                            $parent.find('.' + $this.data('bucket') + '-ids').val($parent.find('.' + $this.data('bucket') + '-ids').val() + ',');
                        }
                        $parent.find('.' + $this.data('bucket') + '-ids').val($parent.find('.' + $this.data('bucket') + '-ids').val() + file.id);
                    });
                    $parent.find('.progress-bar').hide().css(
                        'width',
                        '0%'
                    );
                    destroyCropper();
                }).fail(function () {
                    destroyCropper();
                    console.log('request fail');
                });
            })
        });

        // check is click was putside of container
        container.on('click', function (e) {
            console.log($(e.target));
            $(e.target).is("#cropper");
            if (
                $(e.target).parents("#cropper").length > 0
                ||
                $(e.target).is("#cropper") == true
            ) {

            } else {
                console.log('destroy cropper zone');
                destroyCropper()
            }
        });

        $('.file-upload').each(function () {
            var $this = $(this);
            var $parent = $(this).parent();

            $(this).fileupload({
                dataType: 'json',
                formData: {
                    model_name: model,
                    bucket: $this.data('bucket'),
                    file_key: $this.data('filekey'),
                    _token: '{{ csrf_token() }}'
                },
                add: function (e, data) {
                    while (preview.firstChild) {
                        preview.removeChild(preview.firstChild);
                    }

                    var useCropper = $('#use_cropper');
                    console.log(useCropper);
                    console.log(useCropper.length);
                    console.log(useCropper[0].checked);
                    if (useCropper.length > 0 && useCropper[0].checked == false) {
                        console.log('false');
                        console.log(useCropper[0].checked);
                        if (data.files.length > 0 && validFileType(data.files[0])) {
                            data.submit();
                        } else {
                            showErrorMessage(data.files[0].name);
                        }
                    } else if(useCropper.length > 0 && useCropper[0].checked == true) {
                        console.log('true');
                        if (data.files.length > 0) {
                            if (validFileType(data.files[0])) {
                                console.log(aspectRatio);
                                var reader = new FileReader();
                                reader.onload = function (e) {
                                    if (cropper) {
                                        destroyCropper();
                                    }

                                    img = $('#newImage');
                                    $(img)
                                        .attr('src', e.target.result);

                                    container.attr("style", "visibility: visible");

                                    cropper = new Cropper(img.get(0), {
                                        aspectRatio: 1 / 1.1837,
                                        width: 160,
                                        height: 90,
                                        minWidth: 256,
                                        minHeight: 256,
                                        maxWidth: 4096,

                                        viewMode: 1,
                                        // aspectRatio: 5 / 4,
                                        crop(event) {
                                        },
                                    });
                                };
                                fileName = data.files[0].name;
                                reader.readAsDataURL(data.files[0]);

                                cropperEventSubmit = data;
                            } else {
                                showErrorMessage(data.files[0].name);
                            }
                        } else {
                            showErrorMessage(data.files[0].name);
                        }
                    }


                },

                done: function (e, data) {
                    $.each(data.result.files, function (index, file) {
                        var $line = $($('<p/>', {class: "form-group"}).html(file.file_name + ' (' + file.size + ' bytes)').appendTo($parent.find('.files-list')));
                        $line.append('<a href="#" class="btn btn-xs btn-danger remove-file">Видалити</a>');
                        $line.append('<input type="hidden" name="' + $this.data('bucket') + '_id[]" value="' + file.id + '"/>');
                        if ($parent.find('.' + $this.data('bucket') + '-ids').val() != '') {
                            $parent.find('.' + $this.data('bucket') + '-ids').val($parent.find('.' + $this.data('bucket') + '-ids').val() + ',');
                        }
                        $parent.find('.' + $this.data('bucket') + '-ids').val($parent.find('.' + $this.data('bucket') + '-ids').val() + file.id);
                    });
                    $parent.find('.progress-bar').hide().css(
                        'width',
                        '0%'
                    );
                }
            })
                .on('fileuploadprogressall', function (e, data) {
                    // var progress = parseInt(data.loaded / data.total * 100, 10);
                    // $parent.find('.progress-bar').show().css(
                    //     'width',
                    //     progress + '%'
                    // );
                });
        });

        $(document).on('click', '.remove-file', function () {
            var $parent = $(this).parent();
            $parent.remove();
            return false;
        });

        function destroyCropper() {
            if (cropperEventSubmit) {
                // cropperEventSubmit.cancel();
            }

            if (cropper) {
                cropper.destroy();
            }

            container.attr("style", "visibility: hidden");
        }

        function containerHide() {
            container.attr("style", "visibility: hidden");
        }

        $('#scale-x-up').on('click', function (e) {
            scaleX += 0.1;
            cropper.scaleX(scaleX);
        });

        $('#scale-x-down').on('click', function (e) {
            scaleX -= 0.1;
            cropper.scaleX(scaleX);
        });

        $('#scale-y-up').on('click', function (e) {
            scaleY += 0.1;
            cropper.scaleY(scaleY);
        });

        $('#scale-y-down').on('click', function (e) {
            scaleY -= 0.1;
            cropper.scaleY(scaleY);
        });

    });

</script>