{!! html()->modelForm($image, 'POST', route('admin.images.store', ['relationType' => $relationType, 'relationId' => $relationId, 'previewSize' => $previewSize]))->acceptsFiles()->class('image-form')->open() !!}
<div class="image-create">
    <div class="modal-body">

        <div class="alert alert-danger" id="errors" style="display: none">
            <strong> İşlem sırasında hata oluştu! </strong>
            <ul class="#error-list">
                <li>
                </li>
            </ul>

        </div>
        <label for="image" class="image w100 clickable">
            <div>
                <img id="image-preview" class="image-preview w100"
                     src="{{ ($image->id ? $image->getUrl('200') : '/assets/images/placeholder.png') }}">
            </div>
        </label>
        {!! html()->file('image')->id('image')->class('image')->style(['display' => 'none']) !!}
        <input type="hidden" name="crop[x]" value="0">
        <input type="hidden" name="crop[y]" value="0">
        <input type="hidden" name="crop[width]" value="0">
        <input type="hidden" name="crop[height]" value="0">
        <br>
        <label>Başlık</label>
        <div class="form-group mb-0">
            {!! html()->text('title')->class('form-control') !!}
        </div>
    </div>

    <div class="modal-footer justify-content-between">
        <label for="image" class="btn btn-primary w100">
            <i class="fa fa-folder-open"></i>&nbsp;
            Görsel Seç
        </label>

        <button id="submitBtn" class="btn btn-success w100">
            <i class="fa fa-upload"></i>&nbsp;
            Kaydet
        </button>
        <button id="submitBtnLoading" class="btn btn-success w100 disabled" style="display: none">
            <i class="fa fa-refresh fa-spin"></i>&nbsp;
            Yükleniyor...
        </button>
    </div>
</div>
{!! html()->closeModelForm() !!}

<script>

    /* ----------------------------------------------------------------------------------------------------------------------- Init Create Form -F- */
    (function() {

        var $modal        = $('#image-upload-modal')
        var $fileInput    = $modal.find('input.image')
        var $imagePreview = $modal.find('.image-preview')
        var defaultImage  = $imagePreview.attr('src')
        var cropper       = false
        var targetWidth   = "{{ $width }}" || 16
        var targetHeight  = "{{ $height }}" || 9

        console.log($modal, $fileInput)

        // ajax request to get items
        $fileInput.on('change', function(e) {
            console.log('CHANGE')
            if ($(e.target).val() !== '') {
                var reader = new FileReader()
                if (cropper) {
                    cropper.destroy()
                }
                updateCropInputs(0, 0, 0, 0)

                reader.onloadend = function() {
                    $imagePreview.attr('src', reader.result)
                    startCropper()
                }

                reader.readAsDataURL(e.target.files[0])
            } else {
                $imagePreview.attr('src', defaultImage)
            }
        })


        function startCropper() {
            console.log('starting cropper')
            // deactivate label
            $modal.find('label.image').attr('for', '')

            cropper = new Cropper($imagePreview[0], {
                aspectRatio             : Number(targetWidth) / Number(targetHeight),
                dragMode                : 'move',
                cropBoxMovable          : false,
                cropBoxResizable        : false,
                toggleDragModeOnDblclick: false,
                autoCropArea            : 0.8,
                wheelZoomRatio          : 0.08,
                crop                    : function(e) {
                    updateCropInputs(e)
                    //console.log(e.detail.x);
                    //console.log(e.detail.y);
                    //console.log(e.detail.width);
                    //console.log(e.detail.height);
                },
                ready                   : function() {
                    cropper.zoom(-0.25)
                    console.log('ready')
                }
            })
            $modal.find('.image').dblclick(function() {
                cropper.reset()
                cropper.zoom(-0.25)
            })
        }

        var $cropX      = $modal.find('input[name="crop[x]"]')
        var $cropY      = $modal.find('input[name="crop[y]"]')
        var $cropWidth  = $modal.find('input[name="crop[width]"]')
        var $cropHeight = $modal.find('input[name="crop[height]"]')

        function updateCropInputs(x, y, width, height) {
            if (typeof x === 'object') {
                y      = x.detail.y
                width  = x.detail.width
                height = x.detail.height
                x      = x.detail.x
            }

            $cropX.val(x)
            $cropY.val(y)
            $cropWidth.val(width)
            $cropHeight.val(height)
        }

        var $errorsContainer = $modal.find('.image-create #errors')

        var imageFormBusy = false
        $modal.find('form.image-form').submit(function(e) {
            if (!imageFormBusy) {
                $errorsContainer.hide()
                imageFormBusy = true

                $modal.find('.image-create #submitBtn').hide()
                $modal.find('.image-create #submitBtnLoading').show()
                $.ajax({
                    url        : $(this).attr('action'),
                    type       : 'POST',
                    data       : new FormData(this),
                    processData: false,
                    contentType: false,
                    success    : function(data) {
                        $modal.trigger('image-gallery:create', data)
                    },
                    error      : function(jqXHR) {
                        printErrors(jqXHR.responseJSON)
                    },
                    complete   : function() {
                        $modal.find('.image-create #submitBtn').show()
                        $modal.find('.image-create #submitBtnLoading').hide()
                        imageFormBusy = false
                    }
                })
            } else {
                console.log('busy')
            }
            e.preventDefault()
        })

        function printErrors(errors) {
            var $errorList = $errorsContainer.find('ul').html('')
            for (var key in errors) {
                if (errors.hasOwnProperty(key)) {
                    console.log(key + ' -> ' + errors[key])
                    $errorList.append('<li>' + errors[key] + '</li>')
                }
            }
            $errorsContainer.show()
        }
    })()
</script>