@extends('layouts.app')
@section('css')
<style type="text/css">
    .cr-boundary{
        width: 300px !important;
        padding-top: 100%;
        height: 300px !important;
    }
    .cr-viewport{}
    .croppie-container {
    padding: 0px !important;
    width: 300px !important;
    padding-top: 100%;
    height: 300px !important;
    }
</style>
@endsection

@section('header')
<div class="header" style="padding:20px;">
    <div class="row">
        <div class="col-sm-10">
<h5 style="font-weight: 600;"><i class="fa fa-edit"></i> Upload customer picture </h5>
</div>
<div class="col-sm-2">
    <a href="{{url('/')}}/customer/{{$customer->id}}" class="btn btn-sm btn-warning"><i class="fa fa-chevron-left"></i> Return to customer</a>
</div>
</div>
</div>
@endsection

@section('content')


    <div class="row">
    	<div class="col-sm-10">
            <div class="panel-body">
        <div class="row">
            <div class="col-md-6">
                <div class="card mb-3" style="max-width: 345px;">
                    <div class="card-body">
                <div class="form-group">
                <label>Select Image:</label>
                <input type="file" id="upload" class="form-control-file" style="max-width: 300px;">
                </div>
                
                <div><h5 style="font-weight: 600; margin-bottom: 10px; font-size: 14px;">Crop your image below by moving the slider.</h5></div>
                <div id="upload-demo" style="width:350px"></div>
                <div class="form-group mt-3">
                <button class="btn btn-sm btn-success upload-result btn-block" style="max-width: 300px;"> Upload Image</button>
                </div>
            </div>
        </div>
    </div>
</div>
      </div>

    	</div>
    </div>

@endsection
@section('scripts')
<script type="text/javascript">


$.ajaxSetup({
headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});

$uploadCrop = $('#upload-demo').croppie({
    enableExif: true,
    viewport: {
        width: 200,
        height: 200,
        type: 'circle'
    },
    boundary: {
        width: 300,
        height: 300
    }
});


$('#upload').on('change', function () { 
    var reader = new FileReader();
    reader.onload = function (e) {
        $uploadCrop.croppie('bind', {
            url: e.target.result
        }).then(function(){
            console.log('jQuery bind complete');
        });
    }
    reader.readAsDataURL(this.files[0]);
});


$('.upload-result').on('click', function (ev) {
    $uploadCrop.croppie('result', {
        type: 'canvas',
        size: 'viewport'
    }).then(function (resp) {
        $.ajax({
            url: "{{url('/')}}/image-crop/{{$customer->id}}",
            type: "POST",
            data: {"_token": "{{ csrf_token() }}","image":resp},
            success: function (data) {
                html = '<img src="' + resp + '" />';
                /*$("#upload-demo-i").html(html);*/
                window.location = "{{url('/')}}/customer/{{$customer->id}}";
            }
        });
    });
});


</script>
@endsection