@extends('backend.layouts.app')

@section('title', app_name() . ' | ' .'Update clipart')

@section('content')

    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-sm-5">
                    <h4 class="card-title mb-0">
                        Background management
                        <small class="text-muted">Edit Background</small>
                    </h4>
                </div><!--col-->
            </div><!--row-->

            <hr>

            <div class="row mt-4 mb-4">
                <div class="col">
                    <div class=" form-group row " style="border-bottom: 1px solid darkgrey">
                        <h5>Metadata</h5>
                    </div>


                    <div class=" form-group row " style="border-bottom: 1px solid darkgrey">
                        <h5>Files</h5>
                    </div>
                    <div class=" form-group row " style="margin-bottom: 0">
                        <div class="col">
                            <div class="form-group ">
                                <div class="row no-gutters">

                                    <div class="col-auto" style="padding: 0; margin: 0">
                                        <img id="preview"
                                            src="{{$background->path()}}"
                                            alt="{{$background->name}}"
                                            style="width: auto; height: 200px">

                                    </div>
                                    <div class="col-auto" style="padding: 0; margin: 0">
                                    <form action="{{route('admin.backgrounds.update', $background->id)}}" method="PATCH" class="dropzone needsclick dz-clickable"
                                          id="new_image_dropzone">
                                        <div id="dropzone">
                                            <div class="dz-message needsclick">
                                                <button type="button" class="dz-button">Drop image here to update or click to upload.</button>
                                            </div>
                                        </div>
                                    </form>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                </div><!--col-->
            </div><!--row-->
        </div><!--card-body-->

        <div class="card-footer">
            <div class="row">
                <div class="col">
                    {{ form_cancel(route('admin.shapes.index'), __('buttons.general.cancel')) }}
                </div><!--col-->

{{--                <div class="col text-right">--}}
{{--                    {{ form_submit(__('buttons.general.crud.update')) }}--}}
{{--                </div><!--row-->--}}
            </div><!--row-->
        </div><!--card-footer-->
    </div><!--card-->

@endsection
@push('after-scripts')
    <script src="{{ asset('js/dropzone.min.js') }}"></script>
    <script>
        // the user uploaded image upload functionality
        Dropzone.options.newImageDropzone = {
            // autoProcessQueue: false,
            params: {
                '_token': "{{ csrf_token() }}",
                '_method':'PATCH'
            },

            maxFiles: 1,
            acceptedFiles: "image/*",
            init: function (e) {
                console.log(e)
                this.on("addedfile", function (file) {
                    let reader = new FileReader();
                    console.log(file);
                    //alert("Added file."); });
                });
                // clean up and append new file entry to selector
                this.on("success", function (file) {
                    this.removeFile(file);
                    console.log('success!');
                   // console.log(JSON.parse(file.xhr.response).location);
                    $("#preview").attr('src', JSON.parse(file.xhr.response).location+'?'+(new Date()).getTime())

                })
                $('#add_image_btn').on("click", function () {
                    console.log('Processing...')
                    //  myDropzone.processQueue(); // Tell Dropzone to process all queued files.
                });

            }
        };
    </script>
@endpush

@push('after-styles')
    <link href="{{ asset('css/dropzone.min.css') }}" rel="stylesheet">
    <style>
        .dropzone {
            border: 2px dashed #0087F7;
            border-radius: 5px;
            background: white;
            box-sizing: border-box;
        }

        .dropzone .dz-message {
            text-align: center;
            margin: 2em 0;
            font-weight: 400;
            cursor: pointer;
        }

        .dropzone .dz-message .dz-button {
            background: none;
            color: inherit;
            border: none;
            padding: 0;
            font: inherit;
            cursor: pointer;
            outline: inherit;
        }
    </style>
@endpush