@extends('admin.layout.main')

@section('content')



<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">

        <div class="page-content">
            <!-- BEGIN PAGE HEADER-->
            <!-- breadcrumbs -->
            <div class="page-bar">
                <ul class="page-breadcrumb">
                    <li>
                        <i class="fa fa-home"></i>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="{{ route('admin.images.index') }}">{{ trans('admin.image_breadcrumbs_title') }}</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="{{ route('admin.images.create') }}" class="text-purple">{{ trans('admin.image_breadcrumbs_addnew') }}</a>
                    </li>
                </ul>
            </div>

            <!-- mass buttons -->
            <div class="row">
                <div class="col-xs-12">
                    <div class="bg-grey" id="grey-field">
                        <div class="action-mass-buttons pull-right">
                            <a href="{{ route('admin.images.index') }}" role="button" class="btn btn-lg grey-salt tooltips"  data-toggle="tooltip" data-placement="left" title="{{ trans('admin.view_global_btn_back') }}"><i class="fa fa-reply"></i></a>
                        </div>
                    </div>
                </div>
            </div>


            <!-- message -->
            <div class="row">
                <div class="col-xs-12">
                    @if(session()->has('message-valid'))
                        <div class="alert alert-success">
                            {!! session()->get('message-valid') !!}
                            <span class="pull-right"><a role="button" class="close-msg-btn"><i class="fa fa-times"></i></a></span>
                        </div>
                    @endif

                    @if(session()->has('message-unvalid'))
                        <div class="alert alert-danger">
                            {!! session()->get('message-unvalid') !!}
                            <span class="pull-right"><a role="button" class="close-msg-btn"><i class="fa fa-times"></i></a></span>
                        </div>
                    @endif

                    @if($errors->any())
                        <div class="alert alert-danger">
                            {!! trans('admin.msg_data_error') !!}
                            @foreach ($errors->all() as $error)
                                {{ $error }}
                            @endforeach
                            <span class="pull-right"><a role="button" class="close-msg-btn"><i class="fa fa-times"></i></a></span>
                        </div>
                    @endif
                </div>
            </div>


            <!-- BEGIN PAGE CONTENT-->
            <div class="row">
                <div class="col-sm-12">
                    <form  action="{{ route('admin.images.index') }}" id="UploadForm" class="dropzone">
                        <input name="_token" type="hidden" value="{{ session()->token() }}">
                        <div class="dz-message needsclick">
                            <h2>{{ trans('admin.image_dropzone_header') }}</h2>
                            <span class="">{{ trans('admin.image_dropzone_text') }}</span>
                        </div>
                    </form>
                </div>
                <!-- END PAGE CONTENT-->
            </div>

            <!-- Big Modal -->
            <div class="modal cropmodal fade bs-new-modal-lg" tabindex="-1" role="dialog" id="myModal" data-keyboard="false" data-backdrop="static">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button>
                                <h4 class="modal-title">{{ trans('admin.image_modal_title') }}</h4>
                            </div>
                            <div class="modal-body">
                                <div class="image-container"><img src="" /></div>
                                <hr>
                                <div class="row" >
                                    <div class="col-sm-6">
                                        <div class="img-preview preview-lg"></div>
                                    </div>
                                    <div class="col-sm-6" id="actions">
                                        <div class="row" style="text-align: right;">
                                            <div class="col-sm-12 docs-toggles">
                                                <div class="btn-group docs-aspect-ratios" data-toggle="buttons">
                                                    <label class="btn btn-default active">
                                                        <input type="radio" class="sr-only" id="aspectRatio5" name="aspectRatio" value="NaN">
                                                        <span>{{ trans('admin.image_crop_free') }}</span>
                                                    </label>
                                                    <label class="btn btn-default">
                                                        <input type="radio" class="sr-only" id="aspectRatio1" name="aspectRatio" value="1.7777777777777777">
                                                        <span>16:9</span>
                                                    </label>
                                                    <label class="btn btn-default">
                                                        <input type="radio" class="sr-only" id="aspectRatio2" name="aspectRatio" value="1.3333333333333333">
                                                        <span>4:3</span>
                                                    </label>
                                                    <label class="btn btn-default">
                                                        <input type="radio" class="sr-only" id="aspectRatio3" name="aspectRatio" value="1">
                                                        <span >1:1</span>
                                                    </label>
                                                    <label class="btn btn-default">
                                                        <input type="radio" class="sr-only" id="aspectRatio5" name="aspectRatio" value="1.6666666666666666">
                                                        <span>3:2</span>
                                                    </label>
                                                    <label class="btn btn-default">
                                                        <input type="radio" class="sr-only" id="aspectRatio4" name="aspectRatio" value="0.6666666666666666">
                                                        <span>2:3 </span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row" style="margin-top: 30px">
                                            <div class="col-sm-6">
                                                <div class="input-group">
                                                    <label class="input-group-addon" for="dataWidth">{{ trans('admin.image_crop_width') }}</label>
                                                    <input class="form-control" name="width" id="dataWidth" type="text" placeholder="{{ trans('admin.image_crop_width_placeholder') }}" disabled>
                                                    <span class="input-group-addon">px</span>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="input-group">
                                                    <label class="input-group-addon" for="dataHeight">{{ trans('admin.image_crop_height') }}</label>
                                                    <input class="form-control" name="height" id="dataHeight" type="text" placeholder="{{ trans('admin.image_crop_height_placeholder') }}" disabled>
                                                    <span class="input-group-addon">px</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row" style="margin-top: 30px">
                                            <div class="col-sm-6">
                                                <div class="input-group">
                                                    <label class="input-group-addon" for="dataX">X</label>
                                                    <input class="form-control" name="x" id="dataX" type="text" placeholder="x" disabled>
                                                    <span class="input-group-addon">px</span>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="input-group">
                                                    <label class="input-group-addon" for="dataY">Y</label>
                                                    <input class="form-control" name="y" id="dataY" type="text" placeholder="y" disabled>
                                                    <span class="input-group-addon">px</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default crop-cancel" data-dismiss="modal">{{ trans('admin.image_modal_btn_cancel') }}</button>
                                <button type="button" class="btn btn-primary crop-upload">{{ trans('admin.image_modal_btn_upload') }}</button>
                            </div>
                        </div>
                    </div>
                </div>


            <!-- Thumb Modal -->
            <div class="modal cropmodal fade bs-new-modal-lg" tabindex="-1" role="dialog" id="myModalThumb" data-keyboard="false" data-backdrop="static">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button>
                            <h4 class="modal-title">{{ trans('admin.image_modal_title_thumb') }}</h4>
                        </div>
                        <div class="modal-body">
                            <div class="image-container-thumb"><img src="" /></div>
                            <hr>
                            <div class="row" >
                                <div class="col-sm-6">
                                    <div class="img-preview-thumb preview-lg"></div>
                                </div>
                                <div class="col-sm-6" id="actionsThumb">
                                    <div class="row" style="text-align: right;">
                                        <div class="col-sm-12 docs-toggles-thumb">
                                            <div class="btn-group docs-aspect-ratios" data-toggle="buttons">
                                                <label class="btn btn-default active">
                                                    <input type="radio" class="sr-only" id="aspectRatio5Thumb" name="aspectRatio" value="NaN">
                                                    <span>{{ trans('admin.image_crop_free') }}</span>
                                                </label>
                                                <label class="btn btn-default">
                                                    <input type="radio" class="sr-only" id="aspectRatio1Thumb" name="aspectRatio" value="1.7777777777777777">
                                                    <span>16:9</span>
                                                </label>
                                                <label class="btn btn-default">
                                                    <input type="radio" class="sr-only" id="aspectRatio2Thumb" name="aspectRatio" value="1.3333333333333333">
                                                    <span>4:3</span>
                                                </label>
                                                <label class="btn btn-default">
                                                    <input type="radio" class="sr-only" id="aspectRatio3Thumb" name="aspectRatio" value="1">
                                                    <span >1:1</span>
                                                </label>
                                                <label class="btn btn-default">
                                                    <input type="radio" class="sr-only" id="aspectRatio5Thumb" name="aspectRatio" value="1.6666666666666666">
                                                    <span>3:2</span>
                                                </label>
                                                <label class="btn btn-default">
                                                    <input type="radio" class="sr-only" id="aspectRatio4Thumb" name="aspectRatio" value="0.6666666666666666">
                                                    <span>2:3 </span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" style="margin-top: 30px">
                                        <div class="col-sm-6">
                                            <div class="input-group">
                                                <label class="input-group-addon" for="dataWidthThumb">{{ trans('admin.image_crop_width') }}</label>
                                                <input class="form-control" name="width" id="dataWidthThumb" type="text" placeholder="{{ trans('admin.image_crop_width_placeholder') }}" disabled>
                                                <span class="input-group-addon">px</span>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="input-group">
                                                <label class="input-group-addon" for="dataHeightThumb">{{ trans('admin.image_crop_height') }}</label>
                                                <input class="form-control" name="height" id="dataHeightThumb" type="text" placeholder="{{ trans('admin.image_crop_height_placeholder') }}" disabled>
                                                <span class="input-group-addon">px</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" style="margin-top: 30px">
                                        <div class="col-sm-6">
                                            <div class="input-group">
                                                <label class="input-group-addon" for="dataX">X</label>
                                                <input class="form-control" name="x" id="dataXThumb" type="text" placeholder="x" disabled>
                                                <span class="input-group-addon">px</span>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="input-group">
                                                <label class="input-group-addon" for="dataY">Y</label>
                                                <input class="form-control" name="y" id="dataYThumb" type="text" placeholder="y" disabled>
                                                <span class="input-group-addon">px</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>
                        <div class="modal-footer">
                            <!--
                            <button type="button" class="btn btn-default crop-cancel-thumb" data-dismiss="modal">{{ trans('admin.image_modal_btn_cancel') }}</button>
                            -->
                            <button type="button" class="btn btn-primary crop-upload-thumb">{{ trans('admin.image_modal_btn_upload') }}</button>
                        </div>
                    </div>
                </div>
            </div>


            <div id="modalTranslate" data-modal="{{ trans('admin.image_modal_title') }}" data-cancel="{{ trans('admin.image_modal_btn_cancel') }}" data-upload="{{ trans('admin.image_modal_btn_upload') }}"></div>



        </div>
</div>
<!-- END CONTENT -->



<!-- DropZone configuration -->
<script>
/*    Dropzone.options.UploadForm = {
        acceptedFiles: 'image/!*',
        maxFilesize: 32,
        maxFiles: 5
    };*/
</script>
<!-- //DropZone configuration -->





<script>
    jQuery(document).ready(function($){

        // for on change only
        var actions = document.getElementById('actions');
        var $image = $('.image-container img');
        var options = {
            autoCropArea: 1,
            movable: false,
            cropBoxResizable: true,
            cropBoxMovable: true,
            viewMode : 3,
            responsive: true,
            zoomable: false,
            preview: '.img-preview',
            crop: function (data) {
                dataX.value = Math.round(data.x);
                dataY.value = Math.round(data.y);
                dataHeight.value = Math.round(data.height);
                dataWidth.value = Math.round(data.width + 0.02);
            }
        };
        var dataHeight = document.getElementById('dataHeight');
        var dataWidth = document.getElementById('dataWidth');



        // Options / change Aspect Ratio buttons
        $('.docs-toggles').on('change', 'input', function () {
            var $this = $(this);
            var name = $this.attr('name');
            var type = $this.prop('type');
            var cropBoxData;
            var canvasData;


            if (!$image.data('cropper')) {
                return;
            }

            // not using checkbox
            if (type === 'checkbox') {
                options[name] = $this.prop('checked');
                cropBoxData = $image.cropper('getCropBoxData');
                canvasData = $image.cropper('getCanvasData');

                options.built = function () {
                    $image.cropper('setCropBoxData', cropBoxData);
                    $image.cropper('setCanvasData', canvasData);
                };
            } else if (type === 'radio') {
                options[name] = $this.val();
            }

            $image.cropper('destroy').cropper(options);
        });


        // THUMB
        var actionsThumb = document.getElementById('actionsThumb');
        var $imageThumb = $('.image-container-thumb img');
        var optionsThumb = {
            autoCropArea: 1,
            movable: false,
            cropBoxResizable: true,
            cropBoxMovable: true,
            viewMode : 3,
            responsive: true,
            zoomable: false,
            preview: '.img-preview-thumb',
            crop: function (data) {
                dataXThumb.value = Math.round(data.x);
                dataYThumb.value = Math.round(data.y);
                dataHeightThumb.value = Math.round(data.height);
                dataWidthThumb.value = Math.round(data.width + 0.02);
            }
        };
        var dataHeightThumb = document.getElementById('dataHeightThumb');
        var dataWidthThumb = document.getElementById('dataWidthThumb');

        // Options / change Aspect Ratio buttons
        $('.docs-toggles-thumb').on('change', 'input', function () {
            var $this = $(this);
            var name = $this.attr('name');
            var type = $this.prop('type');
            var cropBoxData;
            var canvasData;


            if (!$imageThumb.data('cropper')) {
                return;
            }

            // not using checkbox
            if (type === 'checkbox') {
                optionsThumb[name] = $this.prop('checked');
                cropBoxData = $imageThumb.cropper('getCropBoxData');
                canvasData = $imageThumb.cropper('getCanvasData');

                optionsThumb.built = function () {
                    $imageThumb.cropper('setCropBoxData', cropBoxData);
                    $imageThumb.cropper('setCanvasData', canvasData);
                };
            } else if (type === 'radio') {
                optionsThumb[name] = $this.val();
            }

            $imageThumb.cropper('destroy').cropper(optionsThumb);
        });





        // transform cropper dataURI output to a Blob which Dropzone accepts
        function dataURItoBlob(dataURI) {
            var byteString = atob(dataURI.split(',')[1]);
            var ab = new ArrayBuffer(byteString.length);
            var ia = new Uint8Array(ab);
            for (var i = 0; i < byteString.length; i++) {
                ia[i] = byteString.charCodeAt(i);
            }
            return new Blob([ab], { type: 'image/jpeg' });
        }








            // initialize dropzone
            Dropzone.autoDiscover = false;
            var myDropzone = new Dropzone(
                    "#UploadForm",
                    {
                        autoProcessQueue: false,
                        maxFilesize: 32,
                        maxFiles: 1,
                        parallelUploads: 1,
                        //uploadMultiple: true,
                        acceptedFiles: '.jpg, .jpeg, .png, .bmp',
                    }
            );

        // modal window template
        var modalTemplate = $('#myModal');
        var dataX = document.getElementById('dataX');
        var dataY = document.getElementById('dataY');
        var dataCanvas = document.getElementById('dataCanvas');
        var modalTemplateThumb = $('#myModalThumb');
        var dataXThumb = document.getElementById('dataXThumb');
        var dataYThumb = document.getElementById('dataYThumb');
        var dataCanvasThumb = document.getElementById('dataCanvasThumb');
        var dataFiles = [];


        // listen to thumbnail event
        myDropzone.on('thumbnail', function (file) {

            if (file.cropped) {
                return;
            }
/*            if (file.width < 600) {
                myDropzone.processQueue();
                // autoProcessQueue = true
                // maxFiles: 5
                // ne pokazvai crop ako e po-malko ot 600
                 // validate width to prevent too small files to be uploaded
                 // .. add some error message here
                 return;
             }*/


            // cache filename to re-assign it to cropped file
            var cachedFilename = file.name;
            // remove not cropped file from dropzone (we will replace it later)
            myDropzone.removeFile(file);

            // dynamically create modals to allow multiple files processing
            var $cropperModal = $(modalTemplate);
            // 'Crop and Upload' button in a modal
            var $uploadCrop = $cropperModal.find('.crop-upload');
            var $uploadCancel = $cropperModal.find('.crop-cancel');

            var $img = $('.image-container img');
            // initialize FileReader which reads uploaded file
            var reader = new FileReader();


            // THUMB
            // dynamically create modals to allow multiple files processing
            var $cropperModalThumb = $(modalTemplateThumb);
            // 'Crop and Upload' button in a modal
            var $uploadCropThumb = $cropperModalThumb.find('.crop-upload-thumb');
            var $uploadCancelThumb = $cropperModalThumb.find('.crop-cancel-thumb');

            var $imgThumb = $('.image-container-thumb img');
            // initialize FileReader which reads uploaded file
            var readerThumb = new FileReader();

            reader.onloadend = function () {
                $cropperModal.modal('show');

                $cropperModal.on('shown.bs.modal', function (e) {
                    // add uploaded and read image to modal
                    // $cropperModal.find('.image-container').html($img);
                    $img.attr('src', reader.result); // + '?v=' + (new Date()).getTime()
                    // initialize cropper for uploaded image

                    $img.cropper({
                        autoCropArea: 1,
                        movable: false,
                        cropBoxResizable: true,
                        cropBoxMovable: true,
                        viewMode : 3,
                        responsive: true,
                        zoomable: false,
                        preview: '.img-preview',
                        crop: function (data) {
                            dataX.value = Math.round(data.x);
                            dataY.value = Math.round(data.y);
                            dataHeight.value = Math.round(data.height);
                            dataWidth.value = Math.round(data.width + 0.04);
                        }
                    });
                });

            };
            // read uploaded file (triggers code above)
            reader.readAsDataURL(file);

            // listener for 'Crop and Upload' button in modal
            $uploadCrop.on('click', function() {
                var imageData = $img.cropper('getImageData');

                // get cropped image data
                var blob = $img.cropper('getCroppedCanvas').toDataURL();
                // transform it to Blob object
                var newFile = dataURItoBlob(blob);
                // set 'cropped to true' (so that we don't get to that listener again)
                newFile.cropped = true;
                // assign original filename
                newFile.name = cachedFilename;
                newFile.tip = 'big';


                // add cropped file to dropzone
                myDropzone.addFile(newFile);


                $img.cropper('destroy');
                $cropperModal.modal('hide');

                myDropzone.processQueue();
                myDropzone.on("complete", function(file) {
                    myDropzone.removeFile(file);
                });


                readerThumb.onloadend = function () {
                    $cropperModalThumb.modal('show');

                    $cropperModalThumb.on('shown.bs.modal', function (e) {
                        // add uploaded and read image to modal
                        // $cropperModal.find('.image-container').html($img);
                        $imgThumb.attr('src', readerThumb.result); // + '?v=' + (new Date()).getTime()
                        // initialize cropper for uploaded image

                        $imgThumb.cropper({
                            autoCropArea: 1,
                            movable: false,
                            cropBoxResizable: true,
                            cropBoxMovable: true,
                            viewMode : 3,
                            responsive: true,
                            zoomable: false,
                            preview: '.img-preview-thumb',
                            crop: function (data) {
                                dataXThumb.value = Math.round(data.x);
                                dataYThumb.value = Math.round(data.y);
                                dataHeightThumb.value = Math.round(data.height);
                                dataWidthThumb.value = Math.round(data.width + 0.04);
                            }
                        });
                    });

                };
                // read uploaded file (triggers code above)
                readerThumb.readAsDataURL(file);


                // listener for 'Crop and Upload' button in modal
                $uploadCropThumb.on('click', function() {
                    var imageDataThumb = $imgThumb.cropper('getImageData');

                    // get cropped image data
                    var blobThumb = $imgThumb.cropper('getCroppedCanvas').toDataURL();
                    // transform it to Blob object
                    var newFileThumb = dataURItoBlob(blobThumb);
                    // set 'cropped to true' (so that we don't get to that listener again)
                    newFileThumb.cropped = true;
                    // assign original filename
                    newFileThumb.name = cachedFilename;
                    newFileThumb.tip = 'thumb';

                    // add cropped file to dropzone
                    myDropzone.addFile(newFileThumb);
                    // upload cropped file with dropzone
                    myDropzone.processQueue();

                    $imgThumb.cropper('destroy');
                    $cropperModalThumb.modal('hide');
                });

                myDropzone.on('sending', function(file, xhr, formData){
                    if (file.tip == 'thumb') {
                        formData.append('tip', 'thumb');

                    }

                    if (file.tip == 'big') {
                        formData.append('tip', 'big');
                    }

                });


                // listener for 'Cancel' button in modal
                $uploadCancelThumb.on('click', function() {
                    location.reload();
                });




            });






            // upload cropped file with dropzone
            myDropzone.processQueue();



            // listener for 'Cancel' button in modal
            $uploadCancel.on('click', function() {
                location.reload();
            });

        });











/*        myDropzone.on('queuecomplete', function (file) {
            location.reload();
        });*/


    });
</script>

@stop