@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">Create New Portfolio Entry</h2>
        </header>
        <section>
            <span class="float-end">
                <a href="{{ route('admin.portfolio.index') }}"><i class="fa-solid fa-left-long"> Back</i></a>
            </span>
            <form id="form" action="{{ route('admin.portfolio.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="form-group mb-3">
                    <label for="slug">{{ __('Slug') }}</label>
                    <input id="slug" name="slug" class="form-control" type="text" required>
                </div>
                <div class="form-group mb-3">
                    <label for="title">{{ __('Title') }}</label>
                    <input id="title" name="title" class="form-control" required>
                </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">
                </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>
                </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">
                </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 for="content">{{ __('Content') }}</label>
                    <div id="content" name="content" class="form-control" style="height: 25em;"></div>
                </div>
                <button id="submit" type="submit" class="btn btn-primary">{{ __('Create New Portfolio Entry') }}</button>
            </form>
        </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: '{{ old('slug', Ramsey\Uuid\v4()) }}',
            title: '{{ old('title') }}',
            meta_title: '{{ old('meta_title') }}',
            meta_description: '{{ old('meta_description') }}',
            canonical_url: '{{ old('canonical_url') }}',
            published_at: @if(old('published_at')) true @else false @endif,
            content: @if(empty(old('content'))) [] @else {!! old('content') !!} @endif,
        };
        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="published_at"]').checked = initialData.published_at;
            quill.setContents(initialData.content);
        };
        resetForm();
        const form = document.querySelector('#form');
        form.addEventListener('formdata', (event) => {
            event.formData.append('content', JSON.stringify(quill.getContents().ops));
        });
    </script>
@endsection