@extends('admin.layouts.index')

@section('content')
    <section class="content">
        <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="view-header">
                            <div class="pull-right text-right" style="margin-top: 8px;">
                                <button class="btn btn-default" type=""><span class="bold">Vissza</span></button>
                                <button class="btn btn-success" type="submit" id="crop-submit"><span class="bold">Mentés</span> <i class="fa fa-floppy-o"></i></button>
                            </div>
                            <div class="header-icon">
                                <i class="pe page-header-icon pe-7s-box2"></i>
                            </div>
                            <div class="header-title">
                                <h3 class="m-b-xs">Előnézeti kép vágása</h3>
                                <small></small>
                            </div>
                        </div>
                        <hr>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">

                                                <div class="cropperContainer" style="width: {{ $fullWidth }}px; height: {{ $fullHeight }}px" id="cropperContainer">
                            <img id="cropper" src="{{ url($image->path) }}">
                        </div>

                    </div>
                </div>

        </div>
    </section>
@stop

@section('custom-css')
    <link href="{{ url('assets/admin/vendor/chosen/chosen-bs.css') }}" rel="stylesheet">
    <link href="{{ url('assets/admin/vendor/icheck/custom.css') }}" rel="stylesheet">
    <link href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css" rel="stylesheet">
    <link href="{{ url('assets/admin/vendor/cropper/cropper.min.css') }}" rel="stylesheet">
    <style>
        label small {
            font-size: 75%;
            font-weight: normal;
            color: #848c94;
        }
        .mb9 {
            margin-bottom: 9px;
        }
        .chosen-select.active + .chosen-container-single .chosen-single {
            background-color: #1bbf89 !important;
            color: white !important;
            font-weight: bold !important;
        }
        .dropzone {
            border: 2px dashed #f6a821;
            border-radius: 5px;
            background: rgba(246, 168, 33, 0.1);
            color: #f6a821;
            font-weight: bold;
            font-size: 19px;
        }
        .dropzone .dz-preview.dz-image-preview { background: none; }
        .dropzone .dz-preview .dz-image { border-radius: 5px!important; }
        .img-custom {
            width: 75px;
            height: 75px;
            background-size: cover;
        }
        .media-body {
            vertical-align: middle !important;
        }
        .active-img {
            border: 2px solid #f6a821;
        }
        .modal {
            background: rgba(0,0,0,0.8)!important;
        }
        .modal-content .modal-header {
            border-top-left-radius: 6px!important;
            border-top-right-radius: 6px!important;
        }
        .modal-content .modal-footer {
            border-bottom-left-radius: 6px!important;
            border-bottom-right-radius: 6px!important;
        }
    </style>
@stop

@section('custom-js')
    <script src="{{ url('assets/admin/vendor/chosen/chosen.jquery.js') }}"></script>
    <script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
    <script src="{{ url('assets/admin/vendor/cropper/cropper.min.js') }}"></script>
    <script src="{{ url('assets/admin/vendor/icheck/icheck.min.js') }}"></script>
    <script>
        $(document).ready(function(){
            var config = {
                '.chosen-select'           : {width:"100%"},
                '.chosen-select-deselect'  : {allow_single_deselect:true},
                '.chosen-select-no-single' : {disable_search_threshold:10},
                '.chosen-select-no-results': {no_results_text:'Nincs találat.'},
                '.chosen-select-width'     : {width:"95%"}
            };
            for (var selector in config) {
                $(selector).chosen(config[selector]);
            };

            Dropzone.options.dropzone = {
                paramName: "file",
                maxFilesize: 10, // MB
                maxFiles: 100,
                autoProcessQueue: true,
                init: function () {
                    this.on("success", function (file, data) {
                        //console.log(data);
                    });
                }
            };

            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_flat-orange',
                radioClass: 'icheckbox_flat-orange'
            });

            $('.cropperContainer > img').cropper({
                aspectRatio: {{ $width / $height }},
                autoCropArea: 0.8,
                minCropBoxWidth: 100,
                minContainerWidth: 100,
                minContainerHeight: 100,
                zoomable: false
            });

            $("#crop-submit").click(function() {
                var cropperData = $('.cropperContainer > img').cropper("getData");
                cropperData._token = '{{ csrf_token() }}';

                var posting = $.post('{{ action('AdminController@postCropThumbnail', [$image->id, 400, 400]) }}', cropperData);

                posting.done(function( data ) {
                    window.location.replace(get('r'));
                });
            });

            function get(name){
                if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
                    return decodeURIComponent(name[1]);
            }
        });
    </script>
@stop