@extends('layouts.admin')

@section('title')

	News - Inserimento immagine

@stop

@section('content')

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

            <input type="file" id="upload" value="Choose a file" class="btn btn-info" accept="image/x-png,image/jpeg"><br>

            <div id="upload-h"></div>

            <div id="upload-v"></div>

            <a href="#" class="upload-result btn btn-success">Procedi</a>

            <form action="/admin/news/crop" id="form" method="POST">
                {{ csrf_field() }}
                <input type="hidden" name="imagebase64H" id="imagebase64H">
                <input type="hidden" name="imagebase64V" id="imagebase64V">
                <input type="hidden" name="news_id" id="news_id" value="{{isset($_GET['news_id']) ? $_GET['news_id'] : ''}}">
            </form>

        </div>
    </div>

@stop

@section('extra_css')

    <link rel="stylesheet" href="/css/croppie.css" />
    <style>
        .cr-image
        {
            display:none;
        }
    </style>

@stop

@section('extra_js')

    <script src="/js/croppie.js"></script>

    <script>

        $( document ).ready(function() {
            var $uploadCropV;
            var $uploadCropH;

            /*$("input[name='orientation']").click(function() {
                if ($(this).val() === 'vertical') {
                  document.location.href = '/admin/news/crop?vertical=1';
                } else if ($(this).val() === 'horizontal') {
                    document.location.href = '/admin/news/crop';
                }
              });*/

              $("#upload").change(function(){
                setTimeout(function(){ $(".cr-image").show(); }, 500);
            });

            function readFile(input) {
                if (input.files && input.files[0]) {

                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $uploadCropV.croppie('bind', {
                            url: e.target.result
                        }).then(function(){
                            $('.cr-slider').attr({'min':0.5000, 'max':3.5000});
                        });
                        $('.upload-v').addClass('ready');
                        $uploadCropH.croppie('bind', {
                            url: e.target.result
                        }).then(function(){
                            $('.cr-slider').attr({'min':0.5000, 'max':3.5000});
                        });

                        $('.upload-h').addClass('ready');
                    }
                    reader.readAsDataURL(input.files[0]);
                }
            }


                $uploadCropV = $('#upload-v').croppie({
                    viewport: {
                        width: 400,
                        height: 650,
                        type: 'rectangle'
                    },
                    boundary: {
                        width: 500,
                        height: 750
                    }
                });

                $uploadCropH = $('#upload-h').croppie({
                    viewport: {
                        width: 550,
                        height: 400,
                        type: 'rectangle'
                    },
                    boundary: {
                        width: 750,
                        height: 500
                    }
                });


            $('#upload').on('change', function () { readFile(this); });
            $('.upload-result').on('click', function (ev) {

                $uploadCropH.croppie('result', {
                    type: 'canvas',
                    size: 'viewport'
                }).then(function (resp) {
                    $('#imagebase64H').val(resp);

                });
                $uploadCropV.croppie('result', {
                    type: 'canvas',
                    size: 'viewport'
                }).then(function (resp) {
                    $('#imagebase64V').val(resp);

                });

                setTimeout(function(){ $('#form').submit(); }, 3000);

            });

        });
        /*
        function zoomin(ev) {
            targetZoom = self._currentZoom + 0.005;

                    ev.preventDefault();
                    _setZoomerVal.call(self, targetZoom);
                    change.call(self);
                }

                function zoomout(ev) {
                    targetZoom = self._currentZoom - 0.005;

                    ev.preventDefault();
                    _setZoomerVal.call(self, targetZoom);
                    change.call(self);
                }
        */
    </script>

@stop