@csrf
<div class="grid gap-4 sm:grid-cols-2">
    <div class="sm:col-span-1">
        <label for="title" class="block text-sm font-medium text-slate-700">Title <span class="text-red-600">*</span></label>
        <input id="title" name="title" value="{{ old('title', $page->title ?? '') }}" required class="mt-1 w-full rounded-xl border border-slate-300 bg-slate-50 px-3 py-2.5 focus:border-cyan-500 focus:bg-white focus:outline-none">
        @error('title')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </div>

    <div class="sm:col-span-1">
        <label for="slug" class="block text-sm font-medium text-slate-700">Slug</label>
        <input id="slug" name="slug" value="{{ old('slug', $page->slug ?? '') }}" class="mt-1 w-full rounded-xl border border-slate-300 bg-slate-50 px-3 py-2.5 focus:border-cyan-500 focus:bg-white focus:outline-none">
        @error('slug')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </div>

    <div class="sm:col-span-2">
        <div class="flex items-center justify-between gap-2">
            <label for="content" class="block text-sm font-medium text-slate-700">Content <span class="text-red-600">*</span></label>
            <button
                type="button"
                id="paste-html-content"
                class="rounded-lg border border-slate-300 bg-white px-2.5 py-1 text-xs font-medium text-slate-700 hover:bg-slate-50"
            >
                Paste HTML
            </button>
        </div>
        <div id="content-editor" class="mt-1 rounded-xl border border-slate-300 bg-white"></div>
        <textarea id="content" name="content" rows="10" required class="hidden">{{ old('content', $page->content ?? '') }}</textarea>
        @error('content')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </div>

    <div class="sm:col-span-2 rounded-xl border border-slate-200 bg-slate-50 p-4">
        <div class="mb-3 flex items-center justify-between">
            <h3 class="text-sm font-semibold text-slate-800">SEO Settings</h3>
            <button type="button" id="auto-seo-page" class="rounded-lg border border-cyan-200 bg-cyan-50 px-2.5 py-1 text-xs font-medium text-cyan-700 hover:bg-cyan-100">
                Auto Generate
            </button>
        </div>
        <div class="grid gap-3 sm:grid-cols-2">
            <div class="sm:col-span-2">
                <label for="seo_title" class="block text-xs font-medium text-slate-700">SEO Title</label>
                <input id="seo_title" name="seo_title" value="{{ old('seo_title', $page->seo_title ?? '') }}" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none">
                @error('seo_title')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
            <div class="sm:col-span-2">
                <label for="seo_description" class="block text-xs font-medium text-slate-700">SEO Description</label>
                <textarea id="seo_description" name="seo_description" rows="3" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none">{{ old('seo_description', $page->seo_description ?? '') }}</textarea>
                @error('seo_description')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
            <div class="sm:col-span-2">
                <label for="seo_keywords" class="block text-xs font-medium text-slate-700">SEO Keywords</label>
                <input id="seo_keywords" name="seo_keywords" value="{{ old('seo_keywords', $page->seo_keywords ?? '') }}" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none">
                @error('seo_keywords')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
        </div>
    </div>

    <label class="sm:col-span-2 inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm">
        <input type="checkbox" name="is_active" value="1" class="h-4 w-4 rounded border-slate-300 text-cyan-600 focus:ring-cyan-500" @checked((bool) old('is_active', $page->is_active ?? true))>
        <span>Active Page</span>
    </label>
</div>

<link href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>

<script>
    (() => {
        const contentEditor = document.getElementById('content-editor');
        const titleInput = document.getElementById('title');
        const slugInput = document.getElementById('slug');
        const contentInput = document.getElementById('content');
        const seoTitleInput = document.getElementById('seo_title');
        const seoDescriptionInput = document.getElementById('seo_description');
        const seoKeywordsInput = document.getElementById('seo_keywords');
        const autoSeoBtn = document.getElementById('auto-seo-page');
        const pasteHtmlBtn = document.getElementById('paste-html-content');
        const form = titleInput?.closest('form');

        if (!titleInput || !slugInput || !contentInput || !contentEditor) return;

        let quill = null;
        if (window.Quill) {
            quill = new Quill(contentEditor, {
                theme: 'snow',
                placeholder: 'Write page content here...',
                modules: {
                    toolbar: [
                        [{ header: [1, 2, 3, false] }],
                        ['bold', 'italic', 'underline', 'strike'],
                        [{ list: 'ordered' }, { list: 'bullet' }],
                        [{ color: [] }, { background: [] }],
                        ['blockquote', 'code-block', 'link'],
                        ['clean'],
                    ],
                },
            });

            quill.root.style.minHeight = '220px';
            quill.root.innerHTML = contentInput.value || '';
            contentInput.value = quill.root.innerHTML;
        }

        let slugTouched = slugInput.value.trim() !== '';

        const toSlug = (value) =>
            value
                .toLowerCase()
                .trim()
                .replace(/[^a-z0-9\s-]/g, '')
                .replace(/\s+/g, '-')
                .replace(/-+/g, '-');

        const autoSeo = (force = false) => {
            const title = titleInput.value.trim();
            const content = (quill ? quill.getText() : contentInput.value || '').trim();
            const generatedTitle = title;
            const generatedDescription = (content || title).slice(0, 155);
            const generatedKeywords = title ? `${title}, ${title} page`.toLowerCase() : '';

            if (seoTitleInput && (force || !seoTitleInput.value.trim())) seoTitleInput.value = generatedTitle;
            if (seoDescriptionInput && (force || !seoDescriptionInput.value.trim())) seoDescriptionInput.value = generatedDescription;
            if (seoKeywordsInput && (force || !seoKeywordsInput.value.trim())) seoKeywordsInput.value = generatedKeywords;
        };

        slugInput.addEventListener('input', () => {
            slugTouched = slugInput.value.trim() !== '';
        });

        titleInput.addEventListener('input', () => {
            if (!slugTouched) slugInput.value = toSlug(titleInput.value);
            autoSeo(false);
        });

        if (quill) {
            quill.on('text-change', () => {
                contentInput.value = quill.root.innerHTML;
                autoSeo(false);
            });
        } else {
            contentInput.addEventListener('input', () => autoSeo(false));
        }

        form?.addEventListener('submit', () => {
            if (quill) contentInput.value = quill.root.innerHTML;
        });

        pasteHtmlBtn?.addEventListener('click', () => {
            if (!quill) return;

            const rawHtml = window.prompt('Paste HTML content');
            if (rawHtml === null) return;

            const html = rawHtml.trim();
            if (!html) return;

            const range = quill.getSelection(true);
            if (range) {
                quill.clipboard.dangerouslyPasteHTML(range.index, html, 'user');
            } else {
                quill.clipboard.dangerouslyPasteHTML(quill.getLength(), html, 'user');
            }

            contentInput.value = quill.root.innerHTML;
            autoSeo(false);
        });

        autoSeoBtn?.addEventListener('click', () => autoSeo(true));
        autoSeo(false);
    })();
</script>