@extends('layouts.master')

@section('title','Durga Bhawani Dashboard')

@section('styles')

<link rel="stylesheet" href="{{asset('css/cropper.css')}}">
<style type="text/css">
  
        #img-upload {
          max-width: 100%; /* This rule is very important, please do not ignore this! */
        }
       
        #result canvas{
            width:100%;
        }
    </s
    .error{
        color:orange;
    }
</style>
@endsection

@section('content')

<div class="sb2-2">



<div class="sb2-2-2">
</div>

@if(session()->has('success'))

<div class="alert alert-success alert-dismissible">

  <button type="button" class="close" data-dismiss="alert">&times;</button>

  <strong>Success!</strong> {{session('success')}}

</div>

@endif

@if(session()->has('failure'))

<div class="alert alert-success alert-dismissible">

  <button type="button" class="close" data-dismiss="alert">&times;</button>

  <strong>Failure!</strong> {{session('failure')}}

</div>

@endif



<div class="sb2-2-add-blog sb2-2-1">

    <div class="box-inn-sp">

        <div class="inn-title">

            <h4>Dontaion Block</h4>

        </div>

        <div class="bor">

            <form method="post" action="{{ url('admin/donationBlock') }}" enctype="multipart/form-data">

                {{ csrf_field() }}

                <div class="row">  
                	
                    <div class="input-field col s12">
                        <span class="label-title">Image</span>
                        <div class="input-group mb-10">
                            <span class="input-group-btn">
                                <span class="btn btn-default btn-file">
                                    Browse… <input type="file" id="imgInp" name="image">
                                </span>
                            </span>
                            <input type="text" class="form-control banner-upload" readonly>
                        </div>

                        
                        <div id="originalImage">
                            <img id='img-upload' src="{{ asset('uploads/dontaion/'.$dontaion->image) }}" />
                        </div>
                        
                        <div id="result" style="display: none" ></div>
                        <input type="hidden" name="image_data" value="" id="imageData">
                        <button type="button" onclick="getCroppedImage()">Save Changes</button>
                        <button type="button" onclick="resetCroppedImage()" id="btnResetCrop" style="display: none">Reset Changes</button>
                    </div>

                    <div class="input-field col s12">
                        <input type="text" value="{{ $dontaion==null?'':$dontaion->title}}" class="validate" name="title">
                        <label>Title</label>
                    </div>
                    <div class="input-field col s12" style="margin-top: 35px;">
                        <span class="label-title">Sub Title:</span>
                        <textarea class="full-featured" name="subtitle">  
                        	{{$dontaion==null?'':$dontaion->subtitle}}
                        </textarea>
                    </div>

                    <div class="input-field col s12" style="margin-top: 35px;">
                        <span class="label-title">Descriptions:</span>
                        <textarea class="full-featured" name="description">  
                        	{{$dontaion==null?'':$dontaion->description}}
                        </textarea>
                    </div>
                </div>

                <div class="row">

                    <div class="input-field col s12">

                        <input type="submit" class="waves-effect waves-light btn-large" value="Submit">

                    </div>

                </div>

            </form>

        </div>

    </div>

</div>

</div>

@endsection

@section('scripts')
    <script src="{{asset('js/cropper.js')}}"></script>
    <script src="{{asset('js/jquery-cropper.js')}}"></script>
    <script>
        $image=$('#img-upload');
        $image.on('load',function(){
            $image.cropper({
              aspectRatio: 3 / 4,
              crop: function(event) {
                console.log(event.detail.x);
                console.log(event.detail.y);
                console.log(event.detail.width);
                console.log(event.detail.height);
                console.log(event.detail.rotate);
                console.log(event.detail.scaleX);
                console.log(event.detail.scaleY);
              }
            });

            // Get the Cropper.js instance after initialized
            var cropper = $image.data('cropper');
        });

        function getCroppedImage(){
            $('#originalImage').hide();
            $('#result').show();
            $('#imageData').val(JSON.stringify($('#img-upload').cropper('getData','rounded')));
            document.getElementById('result').innerHTML="";
            document.getElementById('result').append($('#img-upload').cropper('getCroppedCanvas'));
            console.log($('#img-upload').cropper('getCroppedCanvas'));
            $('#btnResetCrop').show()
        }
        function resetCroppedImage(){
            $('#originalImage').show();
            $('#result').hide();
            $('#imageData').val("");
            
            $('#btnResetCrop').hide();
        }
    </script>
       
   
@endsection