@section('title')
    Add Blog
@endsection

@section('scripts')
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
@endsection

<x-app-layout>
    <form method="post" action="{{ route('post.create') }}" enctype="multipart/form-data">
        @csrf
        @method('post')
        <x-slot name="header">
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ __('messages.add_new_blog') }}
            </h2>
            <div class="flex gap-4">
                @if (session('status') === 'post-created')
                    <p
                        x-data="{ show: true }"
                        x-show="show"
                        x-transition
                        x-init="setTimeout(() => show = false, 3000)"
                        class="text-sm text-gray-600 mt-2"
                    >{{ __('Saved.') }}</p>
                @endif
                <x-primary-button class="submit">
                    {{ __('messages.save') }}
                </x-primary-button>
            </div>
        </x-slot>
        <div class="py-6">
            <div id="loading">
                {{ __('messages.loading') }}
            </div>
            <div id="backdrop">
                <div id="blog-editor-image-dialog">
                    <x-close-icon class="close-icon" />
                    <p class="text-2xl" style="color:black;">{{ __('messages.blog_content_image_modal_title') }}</p>
                    <div>
                        <x-input-label for="content-image" ></x-input-label>
                        <x-file-input accept="image/*" name="content-image" class="w-full" id="content-image" />
                    </div>
                    <div>
                        <x-input-label for="alt">alt</x-input-label>
                        <x-text-input id="alt" name="alt" class="w-full" />
                    </div>
                    <div>
                        <x-input-label for="title">title</x-input-label>
                        <x-text-input id="title" name="title" class="w-full" />
                    </div>
                    <div>
                        <x-primary-button id="save-content-image" type="button">
                            {{ __('messages.save') }}
                        </x-primary-button>
                    </div>
                </div>
            </div>
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 text-gray-900">
                        <section>
                            <header>
                                <h2 class="text-lg font-medium text-gray-900">
                                    {{ __('messages.add_new_blog') }}
                                </h2>
                            </header>
                        
                            <div class="mt-6 space-y-6">
                                <div>
                                    <x-input-label for="locale" :value="__('messages.language')" />
                                    <select id="locale" name="locale" class="border border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm mt-1 block w-full">
                                        <option value="en">EN</option>
                                        <option value="tr">TR</option>
                                    </select>
                                    <x-input-error class="mt-2" :messages="$errors->get('locale')" />
                                </div>

                                <div>
                                    <x-input-label for="title" :value="__('messages.title')" />
                                    <x-text-input id="title" name="title" type="text" class="mt-1 block w-full" :value="old('title')" autofocus autocomplete="title" />
                                    <x-input-error class="mt-2" :messages="$errors->get('title')" />
                                </div>

                                <div>
                                    <x-input-label for="meta_title" :value="__('messages.meta_title')" />
                                    <x-text-input maxlength="60" id="meta_title" name="meta_title" type="text" class="mt-1 block w-full" :value="old('meta_title')" autofocus autocomplete="meta_title" />
                                    <x-input-error class="mt-2" :messages="$errors->get('meta_title')" />
                                </div>
                                
                                <div>
                                    <x-input-label for="description" :value="__('messages.description')" />
                                    <x-textarea-input id="description" name="description" type="text" class="mt-1 block w-full" :value="old('description')" autofocus autocomplete="description" />
                                    <x-input-error class="mt-2" :messages="$errors->get('description')" />
                                </div>
                                
                                <div>
                                    <x-input-label for="featured_image" :value="__('messages.featured_image')" />
                                    <x-file-input id="featured_image" name="featured_image" type="file" class="mt-1 block w-full" :value="old('featured_image')" autofocus autocomplete="featured_image" />
                                    <x-input-error class="mt-2" :messages="$errors->get('featured_image')" />
                                </div>

                                <input type="hidden" id="image_id" name="image_id" value="">

                                <div>
                                    <x-input-label for="content" :value="__('messages.content')" />
                                    <div id="editor" name="editor" type="text" class="mt-1 block w-full" :value="old('content')" autofocus autocomplete="editor"></div>
                                    <x-textarea-input id="content" name="content" class="hidden" :value="old('content')" />
                                    <x-input-error class="mt-2" :messages="$errors->get('content')" />
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>

        <script>
            const Delta = Quill.import('delta');

            var imageIdInput = document.getElementById('image_id');
            const uuid = self.crypto.randomUUID();
            imageIdInput.value = uuid;

            var quill = new Quill('#editor', {
                theme: 'snow',
                modules: {
                    toolbar: [
                        [{ 'header': [false, 2, 3, 4, 5, 6] }],
                        ['bold', 'italic', 'underline'],
                        ['blockquote', 'code-block'],
                        ['link', 'image', 'video'],
                        [{ 'list': 'bullet' },{ 'list': 'ordered'}],
                        ['link']
                    ]
                }
            });

            // Allow img to have all attributes passed originally
            const ImageBlot = Quill.import("formats/image");
            class CustomImageBlot extends ImageBlot {
                static blotName = "customImage";
                static tagName = "img";
                
                /**
                 * Converts the HTML tag to image blot
                 * @param value
                 */
                static create(value) {
                    let node = super.create();
                    Object.getOwnPropertyNames(value).forEach((attribute_name) => {
                        node.setAttribute(attribute_name, value[attribute_name]);
                    });
                
                    return node;
                }
                
                /**
                 * Converts the image blot to HTML tag
                 * @param node
                 */
                static value(node) {
                    var blot = {};
                    node.getAttributeNames().forEach((attribute_name) => {
                        blot[attribute_name] = node.getAttribute(attribute_name);
                    });
                
                    return blot;
                }
            }
            
            Quill.register(CustomImageBlot);

            $("#editor").css("height", 300);

            var currentSelection = 0;

            // Show loading screen
            function showLoadingScreen() {
                $('#loading').css('display', 'grid');
            }

            // Hide loading screen
            function hideLoadingScreen() {
                $('#loading').css('display', 'none');
            }

            function showContentImagedUploadModal() {
                currentSelection = quill.getSelection();
                $("#backdrop").css("display", "grid");
            }

            function hideContentImagedUploadModal() {
                $("#backdrop").css("display", "none");
            }

            $("#save-content-image").click(function () {
                showLoadingScreen();
                if($("#content-image").prop('files').length === 0) {
                    hideContentImagedUploadModal();
                    return;
                }

                saveToServer($("#content-image").prop('files')[0]);
            });

            // Save image to cloud
            function saveToServer(file) {
                const fd = new FormData();
                fd.append('image', file);
                fd.append('image_id', imageIdInput.value);

                fetch('/blog/upload-content-image', {
                    method: 'POST',
                    body: fd
                })
                .then(response => response.json())
                .then(data => {
                    const imageUrl = data.success ? data.message : null;
                    insertToEditor(imageUrl);
                })
                .catch(error => {
                    console.error('Error uploading image:', error);
                    hideContentImagedUploadModal();
                    $('#alt').val('');
                    $('#title').val('');
                    $('#content-image').val(null);
                    hideLoadingScreen();
                });
            }

            function insertToEditor(url) {
                if (url !== null) {
                    // Create an object to hold image attributes
                    const imageAttributes = {
                        src: url,
                        alt: $("#alt").val() || "",
                        title: $("#title").val() || "",
                        width: "1200",
                        height: "600",
                        loading: "lazy",
                        decoding: "async"
                    };

                    // Insert image using the custom blot
                    quill.insertEmbed(currentSelection ? currentSelection.index : quill.scroll.length(), "customImage", imageAttributes);
                }
                hideContentImagedUploadModal();
                $('#alt').val('');
                $('#title').val('');
                $('#content-image').val(null);
                hideLoadingScreen();
            }

            // Add image handler to editor
            quill.getModule('toolbar').addHandler('image', () => {
                showContentImagedUploadModal();
            });

            function cleanUpHtml(html) {
                var tempDiv = document.createElement('div');
                tempDiv.innerHTML = html;
                var elements = tempDiv.querySelectorAll('*');
                elements.forEach(function(el) {
                    el.removeAttribute('class');
                    el.removeAttribute('style');
                    el.removeAttribute('contenteditable');
                    el.removeAttribute('data-list');
                });
                return tempDiv.innerHTML;
            }
        
            function updateHiddenInput() {
                var quillContent = quill.root.innerHTML;
                var cleanedHtml = cleanUpHtml(quillContent);
                document.getElementById('content').value = cleanedHtml;
            }

            $(".close-icon").click(function (e) {
                hideContentImagedUploadModal();
            });
        
            $(".submit").click(function (e) {
                updateHiddenInput();
                $("form").submit();
            });
        </script>
    </form>

    <style>
        #loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100dvw;
            height: 100dvh;
            background-color: rgba(0, 0, 0, 0.7);
            display: none;
            place-items: center;
            z-index: 1000;
            color: white;
            font-size: 1.5rem;
        }

        #backdrop {
            /* grid place-items-center bg-black/80 fixed top-0 left-0 w-screen h-screen z-[998] */
            display: none;
            place-items: center;
            position: fixed;
            top: 0;
            left: 0;
            width: 100dvw;
            height: 100dvh;
            z-index: 998;
            background-color: rgba(0, 0, 0, 0.8)
        }

        #blog-editor-image-dialog {
            z-index: 999;
            background-color: white;
            padding: 5%;
            width: min(640px, 100%);
            border-radius: .5rem;
            position: relative;
        }

        #blog-editor-image-dialog > *:not(:last-child) {
            margin-block-end: 1rem;
        }

        #blog-editor-image-dialog > svg {
            position: absolute;
            top: 10px;
            right: 10px;
        }
    </style>
</x-app-layout>