<x-admin-layout>
    <x-slot name="header">
        <h2 class="font-bold text-2xl text-gray-900 dark:text-white leading-tight">Edit Halaman</h2>
    </x-slot>

    <div class="max-w-5xl">
        <form action="{{ route('admin.pages.update', $page) }}" method="POST" id="page-form">
            @csrf
            @method('PUT')

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

                {{-- KIRI: Konten Utama --}}
                <div class="lg:col-span-2 space-y-6">
                    <div class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-100 dark:border-slate-700 overflow-hidden shadow-sm">
                        <div class="p-6 border-b border-gray-100 dark:border-slate-700">
                            <label for="title" class="block text-sm font-bold text-gray-700 dark:text-gray-200 mb-2">Judul Halaman <span class="text-red-500">*</span></label>
                            <input type="text" name="title" id="title" value="{{ old('title', $page->title) }}"
                                class="block w-full rounded-xl border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-3 px-4 border text-lg font-bold dark:bg-slate-700 dark:text-white"
                                placeholder="Contoh: Tentang Kami" required>
                            @error('title') <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p> @enderror
                        </div>

                        <div class="p-6">
                            <label class="block text-sm font-bold text-gray-700 dark:text-gray-200 mb-3">Konten Halaman</label>
                            <div id="quill-editor" style="min-height: 380px; font-size: 15px;" class="rounded-xl border border-gray-200 dark:border-slate-600 bg-white dark:bg-slate-700"></div>
                            <input type="hidden" name="content" id="content-input" value="{{ old('content', $page->content) }}">
                        </div>
                    </div>
                </div>

                {{-- KANAN: Sidebar Pengaturan --}}
                <div class="space-y-5">
                    {{-- Publish Card --}}
                    <div class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-100 dark:border-slate-700 overflow-hidden shadow-sm">
                        <div class="px-5 py-4 border-b border-gray-100 dark:border-slate-700">
                            <h3 class="font-bold text-sm text-gray-900 dark:text-white">Publikasi</h3>
                        </div>
                        <div class="p-5 space-y-4">
                            <div>
                                <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">Status</label>
                                <select name="status" class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border text-sm dark:bg-slate-700 dark:text-white">
                                    <option value="draft" {{ old('status', $page->status) == 'draft' ? 'selected' : '' }}>📝 Draft</option>
                                    <option value="published" {{ old('status', $page->status) == 'published' ? 'selected' : '' }}>✅ Terbitkan</option>
                                </select>
                            </div>

                            <div class="flex items-start gap-3 p-3 bg-indigo-50/50 dark:bg-slate-700 rounded-xl border border-indigo-100 dark:border-slate-600"
                                 x-data="{ checked: {{ old('show_in_footer', $page->show_in_footer) ? 'true' : 'false' }} }">
                                <button type="button" @click="checked = !checked"
                                    :class="checked ? 'bg-indigo-600' : 'bg-gray-200 dark:bg-slate-600'"
                                    class="relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full transition-colors duration-200 ease-in-out mt-0.5">
                                    <span :class="checked ? 'translate-x-4' : 'translate-x-0'"
                                        class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
                                </button>
                                <input type="hidden" name="show_in_footer" :value="checked ? '1' : '0'">
                                <div>
                                    <p class="text-sm font-semibold text-gray-800 dark:text-white leading-tight">Tampilkan di Footer</p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Link halaman ini akan muncul otomatis di kolom Menu footer.</p>
                                </div>
                            </div>
                        </div>
                        <div class="px-5 py-4 bg-gray-50 dark:bg-slate-700/50 border-t border-gray-100 dark:border-slate-700 flex gap-2">
                            <button type="submit" class="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-bold rounded-xl transition-colors">
                                <x-heroicon-s-check class="w-4 h-4" /> Simpan Perubahan
                            </button>
                            <a href="{{ route('admin.pages.index') }}" class="flex items-center justify-center px-3 py-2.5 bg-white dark:bg-slate-600 border border-gray-200 dark:border-slate-500 text-gray-700 dark:text-white text-sm font-bold rounded-xl hover:bg-gray-50 transition-colors">
                                Batal
                            </a>
                        </div>
                    </div>

                    {{-- Slug Card --}}
                    <div class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-100 dark:border-slate-700 overflow-hidden shadow-sm">
                        <div class="px-5 py-4 border-b border-gray-100 dark:border-slate-700">
                            <h3 class="font-bold text-sm text-gray-900 dark:text-white">URL Halaman</h3>
                        </div>
                        <div class="p-5">
                            <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">Slug</label>
                            <div class="flex items-center gap-0 bg-gray-50 dark:bg-slate-700 border border-gray-200 dark:border-slate-600 rounded-lg overflow-hidden">
                                <span class="px-2.5 py-2 text-xs text-gray-400 font-mono bg-gray-100 dark:bg-slate-600 border-r border-gray-200 dark:border-slate-500 whitespace-nowrap">/page/</span>
                                <input type="text" name="slug" id="slug-input" value="{{ old('slug', $page->slug) }}"
                                    class="flex-1 py-2 px-2.5 text-sm font-mono bg-transparent border-none focus:ring-0 text-gray-800 dark:text-white min-w-0">
                            </div>
                            <div class="mt-2.5">
                                <a href="{{ route('page.show', $page->slug) }}" target="_blank"
                                   class="text-xs text-indigo-600 hover:underline flex items-center gap-1">
                                    <x-heroicon-o-arrow-top-right-on-square class="w-3 h-3" />
                                    Lihat Halaman Publik
                                </a>
                            </div>
                            @error('slug') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                        </div>
                    </div>

                    {{-- SEO Card --}}
                    <div class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-100 dark:border-slate-700 overflow-hidden shadow-sm">
                        <div class="px-5 py-4 border-b border-gray-100 dark:border-slate-700">
                            <h3 class="font-bold text-sm text-gray-900 dark:text-white">SEO</h3>
                        </div>
                        <div class="p-5">
                            <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">Meta Description</label>
                            <textarea name="meta_description" rows="3"
                                class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 px-3 border text-sm dark:bg-slate-700 dark:text-white resize-none"
                                placeholder="Deskripsi singkat halaman untuk mesin pencari..." maxlength="300">{{ old('meta_description', $page->meta_description) }}</textarea>
                        </div>
                    </div>

                </div>
            </div>
        </form>
    </div>

    <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>
    <script>
        const quill = new Quill('#quill-editor', {
            theme: 'snow',
            placeholder: 'Tulis konten halaman di sini...',
            modules: {
                toolbar: [
                    [{ 'header': [1, 2, 3, 4, false] }],
                    ['bold', 'italic', 'underline', 'strike'],
                    [{ 'color': [] }, { 'background': [] }],
                    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                    [{ 'indent': '-1' }, { 'indent': '+1' }],
                    [{ 'align': [] }],
                    ['blockquote', 'code-block'],
                    ['link', 'image'],
                    ['clean']
                ]
            }
        });

        // Load existing content
        const existingContent = document.getElementById('content-input').value;
        if (existingContent) {
            quill.clipboard.dangerouslyPasteHTML(existingContent);
        }

        // Sync on submit
        document.getElementById('page-form').addEventListener('submit', function () {
            document.getElementById('content-input').value = quill.getSemanticHTML();
        });
    </script>

    <style>
        .ql-container { font-family: inherit; font-size: 15px; }
        .ql-editor { min-height: 350px; }
        .dark .ql-toolbar { background: #334155; border-color: #475569; }
        .dark .ql-container { border-color: #475569; background: #334155; color: #f1f5f9; }
        .dark .ql-editor.ql-blank::before { color: #64748b; }
        .dark .ql-picker-label { color: #f1f5f9; }
        .dark .ql-stroke { stroke: #94a3b8; }
        .dark .ql-fill { fill: #94a3b8; }
    </style>
</x-admin-layout>
