@extends('layouts.master')

@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">

    <ul>

        <li><a href="index.html"><i class="fa fa-home" aria-hidden="true"></i> Home</a>

        </li>

        <li class="active-bre"><a href="#"> Software Edit</a>

        </li>

        <li class="page-back"><a href="index.html"><i class="fa fa-backward" aria-hidden="true"></i> Back</a>

        </li>

    </ul>

</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>Add Gallery</h4>

            <a href="{{url('admin/gallery/')}}" class="mantra-btn pull-right">Back to list</a>

        </div>

        <div class="bor">

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

                {{ csrf_field() }}

                <div class="row">

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

                        <input type="text" value="" class="validate" name="title">

                        <label>Gallery Album Title</label>

                    </div>

                   <div class="input-field col s12">
	                    <span class="label-title">Slider 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="mainimg">
	                            </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">

                        <div class="file-field">

                            <div class=" image-uploader">

                            <span class="label-title">Content Images</span>

                                <input type="file" id="files" class="image-uploader custom-file-input" name="files[]" multiple />

                                

                            </div>

                        </div>

                    </div>

                    <div class="input-field col s12">
                        <p class="label-title">Status</p>
                            <input type="radio" name="status" value="1" class="slider-status" checked="checked">Show
                            <input type="radio" name="status" value="0"  class="slider-status">Hide
                    </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: 510 / 383,
              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