@extends('layouts.app')

@section('head')
    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/2.0.2/quill.core.css" integrity="sha512-a7lWBqHHHcLWWynFie8nxZ2haAUHs34w7XiVra9AjlL+/XpDK1GOAGfzcAoLW978tD8/fym7JYxDxg8uPszyfw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        #content {
            border-top-left-radius: initial;
            border-top-right-radius: initial;
            border-left: 1px white;
            border-right: 1px white;
            border-bottom: 1px white;
        }
        div[role="toolbar"] {
            border-top-left-radius: var(--bs-border-radius);
            border-top-right-radius: var(--bs-border-radius);
        }
    </style>
@endsection

@section('content')
    <article class="active text">
        <header>
            <h2 class="h2 article-title">Update Blog Entry</h2>
        </header>
        <section>
            <span class="float-end">
                <a href="{{ route('admin.blog.index') }}"><i class="fa-solid fa-left-long"> Back</i></a>
            </span>
            <div class="container">
                <form id="form" action="{{ route('admin.blog.update', ['blog'=>$blog]) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    {{ method_field('PUT') }}
                    <div class="form-group mb-3">
                        <label for="slug">{{ __('Slug') }}</label>
                        <input id="slug" name="slug" class="form-control" type="text" required>
                        @error('slug')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group mb-3">
                        <label for="title">{{ __('Title') }}</label>
                        <input id="title" name="title" class="form-control" required>
                        @error('title')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group mb-3">
                        <label for="meta_title">{{ __('Meta Title') }}</label>
                        <input id="meta_title" name="meta_title" class="form-control" type="text">
                        @error('meta_title')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group mb-3">
                        <label for="meta_description">{{ __('Meta Description') }}</label>
                        <textarea id="meta_description" name="meta_description" class="form-control" rows="3"></textarea>
                        @error('meta_description')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group mb-3">
                        <label for="canonical_url">{{ __('Canonical URL') }}</label>
                        <input id="canonical_url" name="canonical_url" class="form-control" type="url">
                        @error('canonical_url')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group mb-3">
                        <label for="blog_category_id" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ __('Category') }}</label>
                        <select id="blog_category_id" name="blog_category_id" class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg block w-full">
                            <option value="" disabled>Choose a category</option>
                            @foreach(App\Models\BlogCategory::all() as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                        @error('blog_category_id')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-check mb-3">
                        <input type="checkbox" class="form-check-input" id="published_at" name="published_at">
                        <label class="form-check-label" for="published_at">{{ __('Published?') }}</label>
                    </div>
                    <div class="form-group mb-3">
                        <label for="thumbnail" class="form-label">Thumbnail Image</label>
                        <input type="file" class="form-control" id="thumbnail" name="thumbnail" accept=".jpeg,.png,.jpg,.gif,.svg">
                        @error('thumbnail')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group mb-3">
                        <label>{{ __('Content') }}</label>
                        <div id="content" class="form-control border-1 border-dark" style="height: 25em;">
                        </div>
                    </div>
                    @error('content')
                    <span class="text-danger">{{ $message }}</span>
                    @enderror
                    <button id="submitBlog" type="submit" class="btn btn-primary">{{ __('Update Blog') }}</button>
                    <button id="resetForm" type="button" class="btn btn-secondary">{{ __('resetForm') }}</button>
                </form>
            </div>
        </section>
    </article>
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
    <script src="https://unpkg.com/quill-html-edit-button@2.2.7/dist/quill.htmlEditButton.min.js"></script>
    <script>
        Quill.register('modules/htmlEditButton', htmlEditButton);
        const toolbarOptions = [
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            ['blockquote', 'code-block'],
            ['link', 'image', 'video', 'formula'],

            [{ 'header': 1 }, { 'header': 2 }],               // custom button values
            [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
            [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
            [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
            [{ 'direction': 'rtl' }],                         // text direction

            [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

            [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
            [{ 'font': [] }],
            [{ 'align': [] }],

            ['clean']                                         // remove formatting button
        ];

        const initialData = {
            slug: '{{ $blog->slug }}',
            title: '{{ $blog->title }}',
            meta_title: '{{ $blog->meta_title }}',
            meta_description: '{{ $blog->meta_description }}',
            canonical_url: '{{ $blog->canonical_url }}',
            blog_category_id: '{{ $blog->blog_category_id }}',
            published_at: @if($blog->published_at) true @else false @endif,
            content: {!! $blog->content !!},
        };

        const quill = new Quill('#content', {
            modules: {
                toolbar: toolbarOptions,
                htmlEditButton: {}
            },
            theme: 'snow'
        });

        const resetForm = () => {
            document.querySelector('[name="slug"]').value = initialData.slug;
            document.querySelector('[name="title"]').value = initialData.title;
            document.querySelector('[name="meta_title"]').value = initialData.meta_title;
            document.querySelector('[name="meta_description"]').value = initialData.meta_description;
            document.querySelector('[name="canonical_url"]').value = initialData.canonical_url;
            document.querySelector('[name="blog_category_id"]').value = initialData.blog_category_id;
            document.querySelector('[name="published_at"]').checked = initialData.published_at;
            quill.setContents(initialData.content);
        };

        resetForm();

        const form = document.querySelector('#form');
        form.addEventListener('formdata', (event) => {
            // Append Quill content before submitting
            event.formData.append('content', JSON.stringify(quill.getContents().ops));
        });
        document.querySelector('#resetForm').addEventListener('click', (event) => {
            resetForm();
            event.stopPropagation();
            event.preventDefault();
        });
    </script>
@endsection