<script setup>
import { ref, computed, watch } from 'vue'
import { Head, useForm, router } from '@inertiajs/vue3'
import AdminLayout from '@/Layouts/AdminLayout.vue'
import {
    SwatchIcon,
    PhotoIcon,
    TrashIcon,
    ArrowUturnLeftIcon,
    ArrowUpTrayIcon,
    EyeIcon,
    CodeBracketIcon,
    InformationCircleIcon,
    CheckIcon,
} from '@heroicons/vue/24/outline'

// ---------------------------------------------------------------------------
// Props
// ---------------------------------------------------------------------------
const props = defineProps({
    settings: {
        type: Object,
        default: () => ({}),
    },
})

// ---------------------------------------------------------------------------
// Main form (text/boolean settings only — assets uploaded separately)
// ---------------------------------------------------------------------------
const form = useForm({
    brand_name:         props.settings.brand_name         ?? 'Onoxsoft Panel',
    brand_tagline:      props.settings.brand_tagline      ?? 'Kontrol Paneli',
    primary_color:      props.settings.primary_color      ?? '#4f46e5',
    accent_color:       props.settings.accent_color       ?? '#10b981',
    support_email:      props.settings.support_email      ?? '',
    support_phone:      props.settings.support_phone      ?? '',
    hide_powered_by:    props.settings.hide_powered_by === '1',
    custom_css:         props.settings.custom_css         ?? '',
    custom_footer_html: props.settings.custom_footer_html ?? '',
})

const submit = () => form.patch(route('admin.branding.update'), { preserveScroll: true })

// ---------------------------------------------------------------------------
// Live preview — reactive copies that update as user types
// ---------------------------------------------------------------------------
const preview = computed(() => ({
    brand_name:    form.brand_name    || 'Onoxsoft Panel',
    brand_tagline: form.brand_tagline || 'Kontrol Paneli',
    primary_color: /^#[0-9a-fA-F]{6}$/.test(form.primary_color) ? form.primary_color : '#4f46e5',
    accent_color:  /^#[0-9a-fA-F]{6}$/.test(form.accent_color)  ? form.accent_color  : '#10b981',
    logo_url:      props.settings.logo_url ?? '',
}))

// ---------------------------------------------------------------------------
// Asset upload helpers
// ---------------------------------------------------------------------------
const logoInput    = ref(null)
const faviconInput = ref(null)
const loginBgInput = ref(null)

function uploadAsset(file, uploadRoute) {
    const data = new FormData()
    data.append('file', file)
    router.post(uploadRoute, data, { preserveScroll: true, forceFormData: true })
}

function onLogo(e) {
    const file = e.target.files?.[0]
    if (file) uploadAsset(file, route('admin.branding.logo.upload'))
}

function onFavicon(e) {
    const file = e.target.files?.[0]
    if (file) uploadAsset(file, route('admin.branding.favicon.upload'))
}

function onLoginBg(e) {
    const file = e.target.files?.[0]
    if (file) uploadAsset(file, route('admin.branding.login-bg.upload'))
}

function removeAsset(key) {
    router.delete(route('admin.branding.asset.remove', { key }), { preserveScroll: true })
}

// ---------------------------------------------------------------------------
// Reset
// ---------------------------------------------------------------------------
const showResetConfirm = ref(false)

function confirmReset() {
    showResetConfirm.value = false
    router.post(route('admin.branding.reset'), {}, { preserveScroll: true })
}
</script>

<template>
    <Head title="Markalama (Branding)" />
    <AdminLayout>
        <template #header>
            <span class="flex items-center gap-2">
                <SwatchIcon class="h-5 w-5 text-indigo-500" />
                Markalama / White-Label
            </span>
        </template>

        <!-- Info banner -->
        <div class="mb-5 rounded-xl border border-indigo-200 bg-indigo-50 p-4 text-sm text-indigo-900">
            <div class="flex gap-3">
                <InformationCircleIcon class="h-5 w-5 flex-shrink-0 text-indigo-600" />
                <div>
                    <strong>WHM Branding muadili :</strong>
                    Marka ayarları DB'ye kaydedilir. Bir sonraki sürümde Inertia shared props ile tüm layout'lara uygulanır.
                    Logo yüklemek için <code class="rounded bg-indigo-100 px-1 font-mono text-xs">php artisan storage:link</code> komutu çalıştırılmış olmalıdır.
                </div>
            </div>
        </div>

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

            <!-- ================================================================
                 Column 1 (2/3): Form
                 ================================================================ -->
            <div class="space-y-6 lg:col-span-2">

                <!-- ── 1. Brand Identity ── -->
                <section class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
                    <h2 class="mb-4 flex items-center gap-2 text-sm font-semibold text-slate-800">
                        <SwatchIcon class="h-4 w-4 text-indigo-500" />
                        Marka Kimliği
                    </h2>
                    <form @submit.prevent="submit" id="brand-form">
                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <!-- Brand Name -->
                            <div>
                                <label class="mb-1 block text-xs font-medium text-slate-700">Marka Adı <span class="text-red-500">*</span></label>
                                <input v-model="form.brand_name" type="text" maxlength="50" required
                                       class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
                                       placeholder="Onoxsoft Panel" />
                                <p v-if="form.errors.brand_name" class="mt-1 text-xs text-red-600">{{ form.errors.brand_name }}</p>
                            </div>

                            <!-- Tagline -->
                            <div>
                                <label class="mb-1 block text-xs font-medium text-slate-700">Slogan / Alt Başlık</label>
                                <input v-model="form.brand_tagline" type="text" maxlength="80"
                                       class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
                                       placeholder="Kontrol Paneli" />
                                <p v-if="form.errors.brand_tagline" class="mt-1 text-xs text-red-600">{{ form.errors.brand_tagline }}</p>
                            </div>

                            <!-- Support Email -->
                            <div>
                                <label class="mb-1 block text-xs font-medium text-slate-700">Destek E-postası</label>
                                <input v-model="form.support_email" type="email"
                                       class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
                                       placeholder="destek@firma.com" />
                                <p v-if="form.errors.support_email" class="mt-1 text-xs text-red-600">{{ form.errors.support_email }}</p>
                            </div>

                            <!-- Support Phone -->
                            <div>
                                <label class="mb-1 block text-xs font-medium text-slate-700">Destek Telefonu</label>
                                <input v-model="form.support_phone" type="text" maxlength="30"
                                       class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
                                       placeholder="+90 850 000 0000" />
                                <p v-if="form.errors.support_phone" class="mt-1 text-xs text-red-600">{{ form.errors.support_phone }}</p>
                            </div>
                        </div>
                    </form>
                </section>

                <!-- ── 2. Color Tokens ── -->
                <section class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
                    <h2 class="mb-4 flex items-center gap-2 text-sm font-semibold text-slate-800">
                        <SwatchIcon class="h-4 w-4 text-indigo-500" />
                        Renk Tokenları
                    </h2>
                    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                        <!-- Primary Color -->
                        <div>
                            <label class="mb-1 block text-xs font-medium text-slate-700">Birincil Renk <span class="text-red-500">*</span></label>
                            <div class="flex items-center gap-2">
                                <input type="color" v-model="form.primary_color" form="brand-form"
                                       class="h-9 w-14 cursor-pointer rounded border border-slate-300 p-0.5" />
                                <input type="text" v-model="form.primary_color" form="brand-form"
                                       pattern="^#[0-9a-fA-F]{6}$"
                                       class="flex-1 rounded-lg border border-slate-300 px-3 py-2 font-mono text-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
                                       placeholder="#4f46e5" />
                            </div>
                            <p v-if="form.errors.primary_color" class="mt-1 text-xs text-red-600">{{ form.errors.primary_color }}</p>
                            <p class="mt-1 text-xs text-slate-400">Butonlar, aktif menü, vurgular</p>
                        </div>

                        <!-- Accent Color -->
                        <div>
                            <label class="mb-1 block text-xs font-medium text-slate-700">Vurgu Rengi <span class="text-red-500">*</span></label>
                            <div class="flex items-center gap-2">
                                <input type="color" v-model="form.accent_color" form="brand-form"
                                       class="h-9 w-14 cursor-pointer rounded border border-slate-300 p-0.5" />
                                <input type="text" v-model="form.accent_color" form="brand-form"
                                       pattern="^#[0-9a-fA-F]{6}$"
                                       class="flex-1 rounded-lg border border-slate-300 px-3 py-2 font-mono text-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
                                       placeholder="#10b981" />
                            </div>
                            <p v-if="form.errors.accent_color" class="mt-1 text-xs text-red-600">{{ form.errors.accent_color }}</p>
                            <p class="mt-1 text-xs text-slate-400">Badge'lar, başarı durumları, istatistikler</p>
                        </div>
                    </div>
                </section>

                <!-- ── 3. Assets ── -->
                <section class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
                    <h2 class="mb-4 flex items-center gap-2 text-sm font-semibold text-slate-800">
                        <PhotoIcon class="h-4 w-4 text-indigo-500" />
                        Görseller
                    </h2>
                    <div class="space-y-5">

                        <!-- Logo -->
                        <div class="flex flex-wrap items-start gap-4">
                            <div class="flex-1 min-w-0">
                                <p class="text-xs font-medium text-slate-700">Logo <span class="text-slate-400 font-normal">(PNG · JPG · SVG · WebP, maks. 2 MB)</span></p>
                                <p class="text-[11px] text-slate-400 mt-0.5">Sidebar header'ında gösterilir. Boşsa OnoxLogo bileşeni kullanılır.</p>
                                <div class="mt-2 flex gap-2">
                                    <button type="button" @click="logoInput.click()"
                                            class="inline-flex items-center gap-1.5 rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50">
                                        <ArrowUpTrayIcon class="h-3.5 w-3.5" />
                                        Logo Yükle
                                    </button>
                                    <button v-if="settings.logo_url" type="button" @click="removeAsset('logo_url')"
                                            class="inline-flex items-center gap-1.5 rounded-lg border border-red-200 bg-red-50 px-3 py-1.5 text-xs font-medium text-red-700 hover:bg-red-100">
                                        <TrashIcon class="h-3.5 w-3.5" />
                                        Kaldır
                                    </button>
                                    <input ref="logoInput" type="file" accept=".png,.jpg,.jpeg,.svg,.webp" class="hidden" @change="onLogo" />
                                </div>
                            </div>
                            <div class="h-14 w-14 flex-shrink-0 overflow-hidden rounded-lg border border-slate-200 bg-slate-50 flex items-center justify-center">
                                <img v-if="settings.logo_url" :src="settings.logo_url" alt="Logo" class="h-full w-full object-contain" />
                                <span v-else class="text-xs font-bold text-slate-400">LOGO</span>
                            </div>
                        </div>

                        <hr class="border-slate-100" />

                        <!-- Favicon -->
                        <div class="flex flex-wrap items-start gap-4">
                            <div class="flex-1 min-w-0">
                                <p class="text-xs font-medium text-slate-700">Favicon <span class="text-slate-400 font-normal">(ICO · PNG · SVG, maks. 512 KB)</span></p>
                                <p class="text-[11px] text-slate-400 mt-0.5">Tarayıcı sekme ikonu.</p>
                                <div class="mt-2 flex gap-2">
                                    <button type="button" @click="faviconInput.click()"
                                            class="inline-flex items-center gap-1.5 rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50">
                                        <ArrowUpTrayIcon class="h-3.5 w-3.5" />
                                        Favicon Yükle
                                    </button>
                                    <button v-if="settings.favicon_url" type="button" @click="removeAsset('favicon_url')"
                                            class="inline-flex items-center gap-1.5 rounded-lg border border-red-200 bg-red-50 px-3 py-1.5 text-xs font-medium text-red-700 hover:bg-red-100">
                                        <TrashIcon class="h-3.5 w-3.5" />
                                        Kaldır
                                    </button>
                                    <input ref="faviconInput" type="file" accept=".ico,.png,.svg" class="hidden" @change="onFavicon" />
                                </div>
                            </div>
                            <div class="h-10 w-10 flex-shrink-0 overflow-hidden rounded border border-slate-200 bg-slate-50 flex items-center justify-center">
                                <img v-if="settings.favicon_url" :src="settings.favicon_url" alt="Favicon" class="h-full w-full object-contain" />
                                <span v-else class="text-[9px] font-bold text-slate-400">ICO</span>
                            </div>
                        </div>

                        <hr class="border-slate-100" />

                        <!-- Login Background -->
                        <div class="flex flex-wrap items-start gap-4">
                            <div class="flex-1 min-w-0">
                                <p class="text-xs font-medium text-slate-700">Giriş Arka Planı <span class="text-slate-400 font-normal">(JPG · PNG · WebP, maks. 5 MB)</span></p>
                                <p class="text-[11px] text-slate-400 mt-0.5">Login sayfasının arka plan görseli.</p>
                                <div class="mt-2 flex gap-2">
                                    <button type="button" @click="loginBgInput.click()"
                                            class="inline-flex items-center gap-1.5 rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50">
                                        <ArrowUpTrayIcon class="h-3.5 w-3.5" />
                                        Görsel Yükle
                                    </button>
                                    <button v-if="settings.login_bg_url" type="button" @click="removeAsset('login_bg_url')"
                                            class="inline-flex items-center gap-1.5 rounded-lg border border-red-200 bg-red-50 px-3 py-1.5 text-xs font-medium text-red-700 hover:bg-red-100">
                                        <TrashIcon class="h-3.5 w-3.5" />
                                        Kaldır
                                    </button>
                                    <input ref="loginBgInput" type="file" accept=".jpg,.jpeg,.png,.webp" class="hidden" @change="onLoginBg" />
                                </div>
                            </div>
                            <div class="h-14 w-24 flex-shrink-0 overflow-hidden rounded-lg border border-slate-200 bg-slate-50 flex items-center justify-center">
                                <img v-if="settings.login_bg_url" :src="settings.login_bg_url" alt="Login BG" class="h-full w-full object-cover" />
                                <span v-else class="text-[9px] font-bold text-slate-400">BG</span>
                            </div>
                        </div>

                    </div>
                </section>

                <!-- ── 4. Footer ── -->
                <section class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
                    <h2 class="mb-4 flex items-center gap-2 text-sm font-semibold text-slate-800">
                        <CodeBracketIcon class="h-4 w-4 text-indigo-500" />
                        Footer
                    </h2>
                    <div class="space-y-4">
                        <!-- Custom Footer HTML -->
                        <div>
                            <label class="mb-1 block text-xs font-medium text-slate-700">Özel Footer HTML <span class="text-slate-400">(maks. 5000 karakter)</span></label>
                            <textarea v-model="form.custom_footer_html" form="brand-form" rows="4"
                                      class="w-full rounded-lg border border-slate-300 px-3 py-2 font-mono text-xs focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
                                      placeholder="<p>© 2026 Firma Adı A.Ş. Tüm hakları saklıdır.</p>"></textarea>
                            <p v-if="form.errors.custom_footer_html" class="mt-1 text-xs text-red-600">{{ form.errors.custom_footer_html }}</p>
                        </div>

                        <!-- Hide Powered By -->
                        <div class="flex items-center justify-between rounded-lg border border-slate-100 bg-slate-50 px-4 py-3">
                            <div>
                                <p class="text-sm font-medium text-slate-700">"Powered by Onoxsoft Panel" metnini gizle</p>
                                <p class="text-xs text-slate-400">White-label kullanımlar için footer atıf metnini kaldırır.</p>
                            </div>
                            <button type="button" form="brand-form"
                                    @click="form.hide_powered_by = !form.hide_powered_by"
                                    :class="['relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200',
                                             form.hide_powered_by ? 'bg-indigo-600' : 'bg-slate-300']">
                                <span :class="['inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform duration-200',
                                               form.hide_powered_by ? 'translate-x-6' : 'translate-x-1']"></span>
                            </button>
                        </div>
                    </div>
                </section>

                <!-- ── 5. Advanced: Custom CSS ── -->
                <section class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
                    <h2 class="mb-4 flex items-center gap-2 text-sm font-semibold text-slate-800">
                        <CodeBracketIcon class="h-4 w-4 text-indigo-500" />
                        Gelişmiş: Özel CSS
                    </h2>
                    <div>
                        <label class="mb-1 block text-xs font-medium text-slate-700">Özel CSS <span class="text-slate-400">(maks. 10 000 karakter)</span></label>
                        <textarea v-model="form.custom_css" form="brand-form" rows="12"
                                  class="w-full rounded-lg border border-slate-300 px-3 py-2 font-mono text-xs leading-relaxed whitespace-pre focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
                                  placeholder="/* Örnek: root renk override */&#10;:root { --color-primary: #4f46e5; }"></textarea>
                        <p v-if="form.errors.custom_css" class="mt-1 text-xs text-red-600">{{ form.errors.custom_css }}</p>
                        <p class="mt-1 text-xs text-slate-400">Bir sonraki sürümde tüm sayfalara <code class="font-mono">&lt;style&gt;</code> etiketi içinde eklenir.</p>
                    </div>
                </section>

                <!-- ── Save + Reset bar ── -->
                <div class="flex items-center justify-between rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
                    <!-- Reset -->
                    <div>
                        <button type="button" @click="showResetConfirm = true"
                                class="inline-flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm font-medium text-red-700 hover:bg-red-100">
                            <ArrowUturnLeftIcon class="h-4 w-4" />
                            Varsayılana Sıfırla
                        </button>
                    </div>

                    <!-- Save -->
                    <button type="submit" form="brand-form"
                            :disabled="form.processing"
                            class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-6 py-2 text-sm font-semibold text-white hover:bg-indigo-700 disabled:opacity-50">
                        <CheckIcon class="h-4 w-4" />
                        {{ form.processing ? 'Kaydediliyor...' : 'Değişiklikleri Kaydet' }}
                    </button>
                </div>

                <!-- Reset confirm dialog -->
                <div v-if="showResetConfirm"
                     class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
                    <div class="w-full max-w-sm rounded-xl border border-slate-200 bg-white p-6 shadow-xl">
                        <h3 class="mb-2 text-base font-semibold text-slate-900">Varsayılana sıfırla?</h3>
                        <p class="mb-5 text-sm text-slate-600">Tüm marka ayarları fabrika değerlerine dönecek. Bu işlem geri alınamaz.</p>
                        <div class="flex gap-3 justify-end">
                            <button type="button" @click="showResetConfirm = false"
                                    class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
                                İptal
                            </button>
                            <button type="button" @click="confirmReset"
                                    class="rounded-lg bg-red-600 px-4 py-2 text-sm font-semibold text-white hover:bg-red-700">
                                Sıfırla
                            </button>
                        </div>
                    </div>
                </div>

            </div>

            <!-- ================================================================
                 Column 2 (1/3): Live Preview
                 ================================================================ -->
            <aside class="lg:col-span-1">
                <div class="sticky top-24">
                    <div class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
                        <h2 class="mb-4 flex items-center gap-2 text-sm font-semibold text-slate-800">
                            <EyeIcon class="h-4 w-4 text-indigo-500" />
                            Canlı Önizleme
                        </h2>

                        <!-- Mini panel mockup -->
                        <div class="overflow-hidden rounded-lg border border-slate-200 shadow-sm">
                            <!-- Mock sidebar header -->
                            <div class="flex items-center gap-2 px-3 py-2.5"
                                 :style="{ backgroundColor: '#0f172a' }">
                                <!-- Logo or wordmark -->
                                <div class="h-7 w-7 flex-shrink-0 overflow-hidden rounded-md flex items-center justify-center bg-white/10">
                                    <img v-if="preview.logo_url" :src="preview.logo_url" alt="logo" class="h-full w-full object-contain" />
                                    <span v-else class="text-[8px] font-black text-white">{{ preview.brand_name.slice(0,2).toUpperCase() }}</span>
                                </div>
                                <div>
                                    <p class="text-xs font-bold leading-none text-white">{{ preview.brand_name }}</p>
                                    <p class="mt-0.5 text-[9px] leading-none text-slate-400">{{ preview.brand_tagline }}</p>
                                </div>
                            </div>

                            <!-- Mock content area -->
                            <div class="bg-slate-50 p-3 space-y-2">
                                <!-- Mock nav item (active) -->
                                <div class="flex items-center gap-1.5 rounded px-2 py-1"
                                     :style="{ backgroundColor: preview.primary_color }">
                                    <div class="h-2.5 w-2.5 rounded-sm bg-white/70"></div>
                                    <div class="h-1.5 w-14 rounded-full bg-white/80"></div>
                                </div>
                                <!-- Mock nav item (inactive) -->
                                <div class="flex items-center gap-1.5 rounded px-2 py-1 bg-slate-200/60">
                                    <div class="h-2.5 w-2.5 rounded-sm bg-slate-400/70"></div>
                                    <div class="h-1.5 w-10 rounded-full bg-slate-400/70"></div>
                                </div>
                                <div class="flex items-center gap-1.5 rounded px-2 py-1 bg-slate-200/60">
                                    <div class="h-2.5 w-2.5 rounded-sm bg-slate-400/70"></div>
                                    <div class="h-1.5 w-12 rounded-full bg-slate-400/70"></div>
                                </div>

                                <!-- Mock button (primary) -->
                                <div class="mt-3 pt-2 border-t border-slate-200">
                                    <div class="inline-flex items-center gap-1 rounded px-2.5 py-1 text-[9px] font-semibold text-white"
                                         :style="{ backgroundColor: preview.primary_color }">
                                        Birincil Buton
                                    </div>
                                </div>

                                <!-- Mock badge (accent) -->
                                <div class="flex items-center gap-1.5">
                                    <div class="rounded-full px-1.5 py-0.5 text-[8px] font-bold text-white"
                                         :style="{ backgroundColor: preview.accent_color }">
                                        YENİ
                                    </div>
                                    <div class="h-1.5 w-16 rounded-full bg-slate-300"></div>
                                </div>
                            </div>
                        </div>

                        <!-- Color swatches -->
                        <div class="mt-4 flex gap-2">
                            <div class="flex-1 rounded-lg p-2 text-center text-[10px] font-semibold text-white"
                                 :style="{ backgroundColor: preview.primary_color }">
                                Birincil
                            </div>
                            <div class="flex-1 rounded-lg p-2 text-center text-[10px] font-semibold text-white"
                                 :style="{ backgroundColor: preview.accent_color }">
                                Vurgu
                            </div>
                        </div>

                        <!-- Info note -->
                        <p class="mt-3 text-[11px] text-slate-400 leading-snug">
                            Önizleme gerçek zamanlı güncellenir. Kaydedilmeden önce taslak görünümüdür.
                        </p>
                    </div>
                </div>
            </aside>

        </div><!-- /grid -->
    </AdminLayout>
</template>
