@push('after-styles')
<link href="{{ asset('vendor/ckeditor5/ckeditor5.css') }}" rel="stylesheet">
<style type="text/css">
    
.ck-editor__editable {
   padding-left: 40px !important;
   padding-right: 40px !important;
}


</style>
@endpush

@push ('after-scripts')

<script src="{{ asset('ckeditor/ckeditor.js') }}"></script>
<script>
class MyCustomUploadAdapter {
    constructor(loader) {
        this.loader = loader;
        this.xhr = null;
    }

    upload() {
        return this.loader.file
            .then(file => new Promise((resolve, reject) => {
                this._initRequest();
                this._initListeners(resolve, reject, file);
                this._sendRequest(file);
            }));
    }

    abort() {
        if (this.xhr) {
            this.xhr.abort();
        }
    }

    _initRequest() {
        const xhr = this.xhr = new XMLHttpRequest();
        xhr.open('POST', '{{ route('backend.upload.image') }}', true);
        xhr.setRequestHeader('X-CSRF-TOKEN', '{{ csrf_token() }}');
        xhr.responseType = 'json';
    }

    _initListeners(resolve, reject, file) {
        const xhr = this.xhr;
        const loader = this.loader;
        const genericErrorText = `Couldn't upload file: ${file.name}.`;

        xhr.addEventListener('error', () => reject(genericErrorText));
        xhr.addEventListener('abort', () => reject());
        xhr.addEventListener('load', () => {
            const response = xhr.response;

            if (!response || response.error) {
                return reject(response && response.error ? response.error.message : genericErrorText);
            }

            file.deleteUrl = response.delete_url;

            resolve({
                default: response.url
            });
        });

        if (xhr.upload) {
            xhr.upload.addEventListener('progress', evt => {
                if (evt.lengthComputable) {
                    loader.uploadTotal = evt.total;
                    loader.uploaded = evt.loaded;
                }
            });
        }
    }

    _sendRequest(file) {
        const data = new FormData();
        data.append('upload', file);

        this.xhr.send(data);
    }

    delete(url) {
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.open('DELETE', url, true);
            xhr.setRequestHeader('X-CSRF-TOKEN', '{{ csrf_token() }}');
            xhr.responseType = 'json';

            xhr.addEventListener('load', () => {
                if (xhr.status === 204) {
                    resolve();
                } else {
                    reject(xhr.response ? xhr.response.error : 'An error occurred.');
                }
            });

            xhr.addEventListener('error', () => reject('An error occurred.'));
            xhr.addEventListener('abort', () => reject('Request was aborted.'));

            xhr.send();
        });
    }
}

function MyCustomUploadAdapterPlugin(editor) {
    editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
        return new MyCustomUploadAdapter(loader);
    };
}

class DeleteImageCommand {
    constructor(editor) {
        this.editor = editor;
    }

    execute() {
        const selectedImage = this.editor.model.document.selection.getSelectedElement();
        if (selectedImage && selectedImage.name === 'image') {
            const deleteUrl = selectedImage.getAttribute('deleteUrl');
            if (deleteUrl) {
                const adapter = new MyCustomUploadAdapter({});
                adapter.delete(deleteUrl)
                    .then(() => {
                        this.editor.model.change(writer => {
                            writer.remove(selectedImage);
                        });
                    })
                    .catch(error => {
                        console.error('Failed to delete image:', error);
                    });
            }
        }
    }
}

function DeleteImagePlugin(editor) {
    editor.commands.add('deleteImage', new DeleteImageCommand(editor));
    editor.ui.componentFactory.add('deleteImage', locale => {
        const button = new ButtonView(locale);

        button.set({
            label: 'Delete Image',
            withText: true,
            tooltip: true
        });

        button.on('execute', () => {
            editor.execute('deleteImage');
            editor.editing.view.focus();
        });

        return button;
    });
}

ClassicEditor
    .create(document.querySelector('#description'), {
        extraPlugins: [MyCustomUploadAdapterPlugin, DeleteImagePlugin],
        heading: {
            options: [
                { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                { model: 'heading3', view: 'h3', title: 'Heading 3', class: ' ck-heading_heading3' },
                { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
                { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' }
            ]
        },
        image: {
            resizeUnit: 'px',
            toolbar: [
                'imageStyle:inline',
                'imageStyle:wrapText',
                'imageStyle:breakText',
                '|',
                'toggleImageCaption',
                'imageTextAlternative',
                'deleteImage',
                '|',
                'linkImage'
            ]
        }
    })
    .catch(error => {
        console.error(error);
    });

function showImage() {
    return {
        showPreview(event) {
            if (event.target.files.length > 0) {
                var src = URL.createObjectURL(event.target.files[0]);
                var preview = document.getElementById("preview");
                preview.src = src;
                preview.style.display = "block";
            }
        }
    }
}
</script>

@endpush