@extends('include.app')
@section('content')
<div id="page-container" class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed main-content-narrow">
    @include('include.sidebar')
    @include('include.headnavbar')
    <main id="main-container">
        <div class="bg-body-light">
            <div class="content content-full">
                <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
                    <h1 class="flex-sm-fill h3 my-2 text-primary">Banners</h1>
                    <nav class="flex-sm-00-auto ml-sm-3" aria-label="breadcrumb">
                        <ol class="breadcrumb breadcrumb-alt">
                            <li class="breadcrumb-item text-dark">
                                <a class="link-fx text-dark" href="{{ url('ab/banners') }}">Banners</a>
                            </li>
                            <li class="breadcrumb-item" aria-current="page">
                                <a class="link-fx" href="">Edit</a>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="block block-rounded">
                <div class="block-content block-content-full">
                    <form action="{{ url('ab/banners/'.$banner->id) }}" method="post" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        @if ($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show">
                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                            <ul>
                                @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                        @endif
                        <div class="row push">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <div class="form-group">
                                        <div class="block block-rounded">
                                            <div class="block-header">
                                                <h3 class="block-title text-amethyst">Heading</h3>
                                            </div>
                                            <div class="block-content">
                                                <form action="be_forms_editors.html" method="POST" onsubmit="return false;">
                                                    <div class="form-group scroll">
                                                        <textarea id="js-ckeditor5-classic" class="w-100" placeholder="Text here..." name="heading">{!! $banner->heading !!}</textarea>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group ml-3">
                                        <label class="text-primary">Image</label>
                                        <div class="custom-file">
                                            <input type="file" name="image" id="image" onchange="readURL(this);" />
                                            @error('croped_image')
                                            <div class="error text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <img src="{{ asset('storage/'.$banner->image)}}" width="500" height="300" class="mt-4" />
                                    </div>
                                    <div class="form-group crop mb-3 mt-3">
                                        <img id="blah" src="#" name="crop_image" alt="your image" width="600px" height="300px" />
                                        <input name="cropped_image" type="hidden" id="cropped_image" />
                                        <div id="cropped_result"></div>
                                        <button type="button" id="crop_button" class="mt-5 mb-5 btn btn-primary">Crop</button>
                                        <button type="button" id="reset" class="mt-5 mb-5 btn btn-danger">Reset</button>
                                    </div>
                                </div>
                                <br>
                                <div class="text-left ml-3">
                                    <button type="submit" id="subBtn" class="btn btn-alt-success px-5 mr-3">Submit</button>
                                    <a class="btn btn-alt-info" href="{{url('ab/banners')}}"> Back</a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
</div>
</main>
</div>
@endsection

@section('script')
<script>
    $('.crop').hide();
    $('#reset').hide();

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('.crop').show();
                $('#blah').attr('src', e.target.result)
            };
            reader.readAsDataURL(input.files[0]);
            setTimeout(initCropper, 1000);
        }
    }

    function initCropper() {
        var image = document.getElementById('blah');
        var cropper = new Cropper(image, {
            aspectRatio: 2.73 / 1,
            crop: function(e) {}
        });
        if (cropper.element.classList.contains("cropper-hidden")) {
            cropper.element.cropper.destroy();
            var cropper = new Cropper(image, {
                aspectRatio: 2.73 / 1,
                crop: function(e) {}
            });
        }
        document.getElementById('crop_button').addEventListener('click', function() {
            var imgurl = cropper.getCroppedCanvas().toDataURL();
            var img = document.createElement("img");
            img.src = imgurl;
            img.style.cssText = "width:900px;height:600px;";
            document.getElementById("cropped_result").appendChild(img);
            $('#cropped_image').val(imgurl);
            $('#reset').show();
            $('#crop_button').hide();

            document.getElementById('reset').addEventListener('click', function() {
                document.getElementById("cropped_result").appendChild(img).remove();
                $('#reset').hide();
                $('#crop_button').show();
            });

        });

    }
</script>
@endsection