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

    <ul>

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

        </li>

        <li class="active-bre"><a href="#"> Banner Edit</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-3">

    <div class="row">

        <div class="col-md-12">

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

                <div class="inn-title">

                    <h4>Add Banner</h4>

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

                </div>

                <div class="tab-inn">

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

                        {{ csrf_field() }}

                        <div class="row">

                           

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

                                <span class="label-title">Banner 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">Banner Title </label>

                            </div>

                            <div class="input-field col s12" style="margin-top: 35px;">

                                <textarea id="textarea1" class="materialize-textarea" name="description"></textarea>

                                <label for="textarea1">Banner Descriptions:</label>

                            </div>

                            <div class="input-field col s12" style="margin-top: 35px;">

                                <select name="relation" id="">

                                    <option value="App\about">About</option>

                                    <option value="App\activities">Activities</option>

                                    <option value="App\contact">Contact</option>

                                    <option value="App\donationPage">Donation</option>

                                    <option value="App\gallery">Gallery</option>

                                    <option value="App\member">Membership</option>

                                    <option value="App\news">News</option>

                                    <option value="App\newsdetail">News Detail</option>

                                    <option value="App\project">Project</option>

                                    <option value="App\publication">Publication</option>
                                    <!-- 

                                    @foreach($relations as $relation)

                                    <option value="App\{{ $relation }}">{{ $relation }}</option>

                                    @endforeach -->

                                </select>

                                <label for="textarea1">Banner Relation:</label>

                            </div>

                            

                        </div>

                        <div class="row">

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

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

                            </div>

                        </div>

                    </form>

                </div>

            </div>

        </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: 45 / 14,

              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