@extends('layouts.master')
@section('page-css')
    <link rel="stylesheet" href="{{asset('assets/styles/vendor/cropper.min.css')}}">
@endsection
<style>/* Limit image width to avoid overflow the container */
    img {
        max-width: 100%; /* This rule is very important, please do not ignore this! */
    }

    #canvas {
        /*height: 600px;
        width: 600px;*/
        background-color: #ffffff;
        cursor: default;
        border: 1px solid black;
    }
</style>
@section('main-content')
    <div class="">

        <form action="{{ route('photo') }}" method="post" enctype="multipart/form-data" name="frmPhoto" id="frmPhoto" novalidate class="needs-validation">
            @csrf
            <div class="row">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">
                            <h3>Upload Profile Photo</h3>
                        </div>
                        <div class="card-body">
                            <div>
                                <!-- Below are a series of inputs which allow file selection and interaction with the cropper api -->
                                <input type="file" id="fileInput" class="btn btn-primary" accept="image/*" />
                                <input type="button" id="btnRestore" class="btn btn-primary float-right" value="Reset" />
                                <input type="button" id="btnCrop" class="btn btn-primary float-right mr-2 ml-2" value="Crop & Save" />
                            </div>
                            <div class="col-md-11"><canvas id="canvas">Upload</canvas></div>


                            {{--<div id="result"></div>--}}
                            <textarea name="imageData"  id="imageData" style="display: none"></textarea>

                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <h3>Preview</h3>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <div class="docs-preview clearfix user-profile">
                                    <div class="img-preview preview-lg profile-picture mb-2" style="width: 150px; height: 150px"><img src="{{$path}}" width="120" height="120" /></div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>



@endsection
@section('bottom-js')
    <script>
        var canvas  = $("#canvas"),
            context = canvas.get(0).getContext("2d"),
            $result = $('#result');

        $('#fileInput').on( 'change', function(){
            if (this.files && this.files[0]) {
                $result.empty();
                if ( this.files[0].type.match(/^image\//) ) {
                    //canvas.cropper('reset');
                    var reader = new FileReader();
                    reader.onload = function(evt) {
                        var img = new Image();
                        img.onload = function() {
                            context.canvas.height = img.height;
                            context.canvas.width  = img.width;
                            context.drawImage(img, 0, 0);
                            var cropper = canvas.cropper({
                                aspectRatio: 1/1,
                                preview:'.img-preview'
                            });
                            $('#btnCrop').click(function() {
                                // Get a string base 64 data url
                                var croppedImageDataURL = canvas.cropper('getCroppedCanvas').toDataURL("image/png");
                                //$result.append( $('<img>').attr('src', croppedImageDataURL) );
                                $('#imageData').val(croppedImageDataURL);
                                $('#frmPhoto').submit();
                            });
                            $('#btnRestore').click(function() {
                                canvas.cropper('reset');
                                $result.empty();
                            });
                        };
                        img.src = evt.target.result;
                    };
                    reader.readAsDataURL(this.files[0]);
                }
                else {
                    alert("Invalid file type! Please select an image file.");
                }
            }
            else {
                alert('No file(s) selected.');
            }
        });
        /*


        function scaleToFit(img){
            canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');

            // get the scale
            var scale = Math.min(canvas.width / img.width, canvas.height / img.height);
            // get the top left position of the image
            var x = (canvas.width / 2) - (img.width / 2) * scale;
            var y = (canvas.height / 2) - (img.height / 2) * scale;
            ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
        }*/
    </script>
    <script src="{{asset('assets/js/vendor/cropper.min.js')}}"></script>
    <script src="{{asset('assets/js/cropper.script.js')}}"></script>
@endsection