@extends('layouts.app')

@section('mobile-title', $document ? 'Edit Document' : 'New Document')
@section('mobile-subtitle', 'Document Centre')
@section('mobile-back', $document ? route('documents.show', $document) : route('documents.folders.show', $selectedFolderId))

@section('content')
    @php($editing = (bool) $document)
    <div class="mx-auto max-w-6xl">
        <div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
            <div>
                <div class="mb-2 flex items-center gap-2 text-sm text-[var(--construct-muted)]">
                    <a href="{{ route('documents.index') }}" class="font-semibold text-[var(--construct-primary-dark)]">Document Centre</a>
                    <span class="material-symbols-outlined text-[16px]">chevron_right</span>
                    <span>{{ $editing ? 'Edit '.$document->title : 'Create document' }}</span>
                </div>
                <h1 class="text-3xl font-bold">{{ $editing ? 'Edit Document' : 'Create a Document' }}</h1>
                <p class="mt-2 text-sm text-[var(--construct-muted)]">Type, format text, and add pictures. Every save keeps the previous version.</p>
            </div>
            @if ($editing)
                <div class="flex gap-2">
                    <a href="{{ route('documents.authored.word', $document) }}" class="rounded border border-[var(--construct-border)] bg-white px-4 py-2 text-sm font-bold">Word</a>
                    <a href="{{ route('documents.authored.pdf', $document) }}" class="rounded border border-[var(--construct-border)] bg-white px-4 py-2 text-sm font-bold">PDF</a>
                </div>
            @endif
        </div>

        <form method="POST" action="{{ $editing ? route('documents.authored.update', $document) : route('documents.authored.store') }}" data-document-editor-form>
            @csrf
            @if ($editing) @method('PUT') @endif

            <div class="mb-4 grid gap-3 rounded border border-[var(--construct-border)] bg-white p-4 md:grid-cols-2 lg:grid-cols-4">
                <label class="lg:col-span-2">
                    <span class="mb-1 block text-sm font-bold">Document title</span>
                    <input name="title" value="{{ old('title', $document?->title) }}" required maxlength="255" class="w-full rounded border border-zinc-300 px-3 py-2" placeholder="Untitled document">
                    @error('title') <span class="mt-1 block text-xs text-red-700">{{ $message }}</span> @enderror
                </label>
                <label>
                    <span class="mb-1 block text-sm font-bold">Folder</span>
                    <select name="document_folder_id" required @disabled($editing) class="w-full rounded border border-zinc-300 px-3 py-2 disabled:bg-zinc-100">
                        @foreach ($folders as $folder)
                            <option value="{{ $folder->id }}" @selected((int) old('document_folder_id', $selectedFolderId) === $folder->id)>{{ $folder->name }}</option>
                        @endforeach
                    </select>
                    @if ($editing)<input type="hidden" name="document_folder_id" value="{{ $selectedFolderId }}">@endif
                </label>
                <label>
                    <span class="mb-1 block text-sm font-bold">Document type</span>
                    <input name="document_type" value="{{ old('document_type', $document?->document_type) }}" maxlength="120" class="w-full rounded border border-zinc-300 px-3 py-2" placeholder="e.g. Site memo">
                </label>
                <label class="lg:col-span-2">
                    <span class="mb-1 block text-sm font-bold">Tags</span>
                    <input name="tags" value="{{ old('tags', collect($document?->tags ?? [])->implode(', ')) }}" maxlength="500" class="w-full rounded border border-zinc-300 px-3 py-2" placeholder="site, safety, client">
                </label>
                @if ($editing)
                    <label class="lg:col-span-2">
                        <span class="mb-1 block text-sm font-bold">Version note</span>
                        <input name="version_notes" value="{{ old('version_notes') }}" maxlength="1000" class="w-full rounded border border-zinc-300 px-3 py-2" placeholder="What changed?">
                    </label>
                @endif
            </div>

            <section class="overflow-hidden rounded border border-[var(--construct-border)] bg-white shadow-sm">
                <div class="flex flex-wrap items-center gap-1 border-b border-[var(--construct-border)] bg-[var(--construct-surface-low)] p-2" role="toolbar" aria-label="Text formatting">
                    <select data-editor-block class="h-9 rounded border border-zinc-300 bg-white px-2 text-sm" aria-label="Text style">
                        <option value="p">Paragraph</option><option value="h1">Heading 1</option><option value="h2">Heading 2</option><option value="h3">Heading 3</option><option value="blockquote">Quote</option>
                    </select>
                    @foreach ([['bold','format_bold','Bold'],['italic','format_italic','Italic'],['underline','format_underlined','Underline'],['strikeThrough','strikethrough_s','Strike through']] as [$command,$icon,$label])
                        <button type="button" data-editor-command="{{ $command }}" class="inline-flex h-9 w-9 items-center justify-center rounded hover:bg-white" title="{{ $label }}"><span class="material-symbols-outlined text-[20px]">{{ $icon }}</span></button>
                    @endforeach
                    <span class="mx-1 h-6 border-l border-zinc-300"></span>
                    @foreach ([['insertUnorderedList','format_list_bulleted','Bulleted list'],['insertOrderedList','format_list_numbered','Numbered list'],['justifyLeft','format_align_left','Align left'],['justifyCenter','format_align_center','Align centre'],['justifyRight','format_align_right','Align right']] as [$command,$icon,$label])
                        <button type="button" data-editor-command="{{ $command }}" class="inline-flex h-9 w-9 items-center justify-center rounded hover:bg-white" title="{{ $label }}"><span class="material-symbols-outlined text-[20px]">{{ $icon }}</span></button>
                    @endforeach
                    <span class="mx-1 h-6 border-l border-zinc-300"></span>
                    <label class="inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded hover:bg-white" title="Text colour"><span class="material-symbols-outlined text-[20px]">format_color_text</span><input type="color" data-editor-colour class="absolute h-0 w-0 opacity-0"></label>
                    <button type="button" data-editor-link class="inline-flex h-9 w-9 items-center justify-center rounded hover:bg-white" title="Add link"><span class="material-symbols-outlined text-[20px]">link</span></button>
                    <label class="inline-flex cursor-pointer items-center gap-2 rounded px-3 py-2 text-sm font-bold hover:bg-white" title="Add picture">
                        <span class="material-symbols-outlined text-[20px]">add_photo_alternate</span><span class="hidden sm:inline">Picture</span>
                        <input type="file" accept="image/png,image/jpeg,image/gif,image/webp" data-editor-image class="hidden">
                    </label>
                    <button type="button" data-editor-command="removeFormat" class="ml-auto inline-flex items-center gap-1 rounded px-3 py-2 text-sm font-bold hover:bg-white"><span class="material-symbols-outlined text-[18px]">format_clear</span> Clear</button>
                </div>

                <div data-document-editor contenteditable="true" role="textbox" aria-multiline="true" data-placeholder="Start typing your document..." class="prose min-h-[620px] max-w-none p-8 text-base leading-relaxed outline-none sm:p-12 [&_h1]:mb-4 [&_h1]:text-4xl [&_h1]:font-bold [&_h2]:mb-3 [&_h2]:mt-6 [&_h2]:text-2xl [&_h2]:font-bold [&_h3]:mb-2 [&_h3]:mt-5 [&_h3]:text-xl [&_h3]:font-bold [&_img]:my-5 [&_img]:max-w-full [&_img]:rounded [&_ol]:list-decimal [&_ol]:pl-6 [&_p]:mb-3 [&_table]:w-full [&_td]:border [&_td]:border-zinc-300 [&_td]:p-2 [&_th]:border [&_th]:border-zinc-300 [&_th]:p-2 [&_ul]:list-disc [&_ul]:pl-6 empty:before:text-zinc-400 empty:before:content-[attr(data-placeholder)]">{!! old('content', $content) !!}</div>
                <input type="hidden" name="content" data-document-content>
            </section>
            @error('content') <div class="mt-2 text-sm text-red-700">{{ $message }}</div> @enderror
            <div data-editor-error class="mt-2 hidden text-sm font-semibold text-red-700"></div>

            <div class="mt-4 flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-between">
                <span class="text-xs text-[var(--construct-muted)]">Pictures are resized for reliable Word and PDF export. Maximum source image: 5 MB.</span>
                <div class="flex gap-2">
                    <a href="{{ $editing ? route('documents.show', $document) : route('documents.folders.show', $selectedFolderId) }}" class="rounded border border-[var(--construct-border)] bg-white px-5 py-2.5 text-sm font-bold">Cancel</a>
                    <button class="inline-flex items-center gap-2 rounded bg-[var(--construct-primary)] px-5 py-2.5 text-sm font-bold text-white"><span class="material-symbols-outlined text-[18px]">save</span>{{ $editing ? 'Save new version' : 'Save document' }}</button>
                </div>
            </div>
        </form>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const form = document.querySelector('[data-document-editor-form]');
            const editor = form?.querySelector('[data-document-editor]');
            const content = form?.querySelector('[data-document-content]');
            const error = form?.querySelector('[data-editor-error]');
            if (!form || !editor || !content) return;

            document.execCommand('styleWithCSS', false, true);

            const run = (command, value = null) => { editor.focus(); document.execCommand(command, false, value); };
            form.querySelectorAll('[data-editor-command]').forEach(button => button.addEventListener('click', () => run(button.dataset.editorCommand)));
            form.querySelector('[data-editor-block]')?.addEventListener('change', event => run('formatBlock', event.target.value));
            form.querySelector('[data-editor-colour]')?.addEventListener('input', event => run('foreColor', event.target.value));
            form.querySelector('[data-editor-link]')?.addEventListener('click', () => {
                const url = window.prompt('Enter a web address (https://...)');
                if (url) run('createLink', url);
            });

            form.querySelector('[data-editor-image]')?.addEventListener('change', event => {
                const file = event.target.files?.[0];
                if (!file) return;
                if (file.size > 5 * 1024 * 1024) {
                    error.textContent = 'That picture is larger than 5 MB.'; error.classList.remove('hidden'); event.target.value = ''; return;
                }
                const reader = new FileReader();
                reader.onload = () => {
                    const image = new Image();
                    image.onload = () => {
                        const scale = Math.min(1, 1600 / image.width, 1600 / image.height);
                        const canvas = document.createElement('canvas');
                        canvas.width = Math.max(1, Math.round(image.width * scale)); canvas.height = Math.max(1, Math.round(image.height * scale));
                        canvas.getContext('2d').drawImage(image, 0, 0, canvas.width, canvas.height);
                        const type = file.type === 'image/png' ? 'image/png' : 'image/jpeg';
                        run('insertImage', canvas.toDataURL(type, 0.86));
                        error.classList.add('hidden'); event.target.value = '';
                    };
                    image.src = reader.result;
                };
                reader.readAsDataURL(file);
            });

            form.addEventListener('submit', event => {
                content.value = editor.innerHTML;
                if (!editor.textContent.trim() && !editor.querySelector('img')) {
                    event.preventDefault(); error.textContent = 'Add some text or a picture before saving.'; error.classList.remove('hidden'); editor.focus();
                }
            });
        });
    </script>
@endsection