@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"> 
                @if(session()->has('success'))
                <div class="alert alert-success alert-dismissible">
                  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                  <strong>Success!</strong> {{session('success')}}
                </div>
                @endif
                @if(session()->has('failure'))
                <div class="alert alert-danger alert-dismissible">
                  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                  <strong>failure!</strong> {{session('failure')}}
                </div>
                @endif
                @if($errors->any())
                <div class="alert alert-warning alert-dismissible">
                  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                  <ul>
                  @foreach($errors->all() as $error)
                      <li class="">{{$error}}</li>
                      @endforeach
                  </ul>
                </div>
                @endif
                <div class="sb2-2-add-blog sb2-2-1">
                    <div class="box-inn-sp">
                        <div class="inn-title">
                            <h4>Add Activities</h4>
                            <a href="{{url('admin/activities/')}}" class="mantra-btn pull-right">Back to list</a>
                        </div>
                        <div class="bor">
                            <form action="{{url('admin/activities')}}" method="post" 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'/>
                                        </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 id="list-title" type="text" value="" class="validate" name="title">
                                        <label for="list-title">Title </label>
                                    </div>
                                    <div class="input-field col s12" style="margin-top: 35px;">
                                        <span class="label-title">Descriptions:</span>
                                        <textarea class="full-featured" name="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: 350 / 233,
              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