<script setup>
import { ref } from 'vue'
import { Head, Link, router, useForm } from '@inertiajs/vue3'
import CustomerLayout from '@/Layouts/CustomerLayout.vue'
import { useConfirm } from '@/composables/useConfirm'
import { GlobeAltIcon, PlusIcon, TrashIcon, LockClosedIcon, XMarkIcon, CodeBracketIcon, EnvelopeIcon, FolderIcon, ArrowPathIcon, ChevronDownIcon, ChevronRightIcon, ArrowTopRightOnSquareIcon, SparklesIcon, ArrowsRightLeftIcon, BoltIcon } from '@heroicons/vue/24/outline'
import EmptyState from '@/Components/EmptyState.vue'

const { ask } = useConfirm()

const props = defineProps({
    domains: Array,
    limits: Object,
    usage: Object,
    php_versions: Array,
    parents: Array,
    active_web_server: { type: String, default: 'apache' },
})

const showForm = ref(false)
const showPhpForm = ref(false)
const editingDomain = ref(null)
const expandedSubdomains = ref(new Set()) // domain.id'leri tutar — expand state

const toggleSubdomains = (domainId) => {
    if (expandedSubdomains.value.has(domainId)) {
        expandedSubdomains.value.delete(domainId)
    } else {
        expandedSubdomains.value.add(domainId)
    }
}

const reprovisionSubdomains = async (domain) => {
    const ok = await ask({
        title: 'Sistem subdomain\'lerini yeniden oluştur',
        message: `${domain.name} için 6 sistem subdomain (mail, webmail, panel, webdisk, autodiscover, autoconfig) yeniden provision edilecek.`,
        variant: 'warning',
        confirmText: 'Yeniden Oluştur',
        cancelText: 'İptal',
    })
    if (!ok) return
    router.post(route('customer.domains.reprovision-system-subdomains', domain.id), {}, {
        preserveScroll: true,
    })
}

const subdomainIcon = (type) => {
    if (type === 'webmail_proxy') return EnvelopeIcon
    if (type === 'panel_redirect') return ArrowTopRightOnSquareIcon
    if (type === 'webdisk') return FolderIcon
    if (type === 'mail_autoconfig') return EnvelopeIcon
    return GlobeAltIcon
}

const subdomainLabel = (sub) => {
    const prefix = sub.name.split('.')[0]
    const labels = {
        mail: 'Webmail (mail)',
        webmail: 'Webmail',
        panel: 'Panel Erişimi',
        webdisk: 'WebDisk (WebDAV)',
        autodiscover: 'Outlook Autodiscover',
        autoconfig: 'Thunderbird Autoconfig',
    }
    return labels[prefix] ?? sub.name
}

const form = useForm({
    name: '',
    type: 'addon',
    parent_domain_id: null,
    php_version: props.php_versions[0] ?? '8.2',
    ssl_enabled: true,
    reverse_proxy_enabled: false,
})

const phpForm = useForm({ php_version: '' })

const editPhp = (domain) => {
    editingDomain.value = domain
    phpForm.php_version = domain.php_version
    showPhpForm.value = true
}

const submitPhp = () => phpForm.patch(route('customer.domains.php-version', editingDomain.value.id), {
    onSuccess: () => { showPhpForm.value = false; editingDomain.value = null },
})

const submit = () => {
    form.post(route('customer.domains.store'), {
        onSuccess: () => { showForm.value = false; form.reset(); form.php_version = props.php_versions[0] ?? '8.2'; form.ssl_enabled = true },
    })
}

// ── Wildcard subdomain ────────────────────────────────────────────────────────
const showWildcardForm = ref(false)
const wildcardDomain = ref(null)
const wildcardForm = useForm({ wildcard_target_path: '' })

const openWildcard = (domain) => {
    wildcardDomain.value = domain
    wildcardForm.wildcard_target_path = domain.wildcard_target_path ?? ''
    showWildcardForm.value = true
}

const enableWildcard = () => {
    if (!wildcardDomain.value) return
    wildcardForm.post(route('customer.domains.wildcard-enable', wildcardDomain.value.id), {
        preserveScroll: true,
        onSuccess: () => {
            showWildcardForm.value = false
            wildcardDomain.value = null
            wildcardForm.reset()
        },
    })
}

const disableWildcard = async (domain) => {
    const ok = await ask({
        title: 'Wildcard\'ı kapat',
        message: `*.${domain.name} catch-all kuralı kaldırılacak. Mevcut subdomain isteklerinin tümü bağımsız vhost veya 404 dönecek.`,
        variant: 'warning',
        confirmText: 'Kapat',
        cancelText: 'İptal',
    })
    if (!ok) return
    router.post(route('customer.domains.wildcard-disable', domain.id), {}, { preserveScroll: true })
}

const removeDomain = async (domain) => {
    const ok = await ask({
        title: 'Alan adını kaldır',
        message: `'${domain.name}' alan adı panelden kaldırılacak. DNS kayıtları ve subdomain yapılandırması temizlenecek.`,
        variant: 'danger',
        confirmText: 'Kaldır',
        cancelText: 'İptal',
    })
    if (!ok) return
    router.delete(route('customer.domains.destroy', domain.id))
}

const statusBadge = (status) => {
    if (status === 'active') return 'bg-emerald-100 text-emerald-700'
    if (status === 'error') return 'bg-red-100 text-red-700'
    if (status === 'provisioning') return 'bg-amber-100 text-amber-700'
    return 'bg-slate-100 text-slate-700'
}

const typeBadge = (type) => {
    if (type === 'main') return 'bg-indigo-100 text-indigo-700'
    if (type === 'addon') return 'bg-purple-100 text-purple-700'
    if (type === 'parked') return 'bg-slate-100 text-slate-600'
    return 'bg-cyan-100 text-cyan-700'
}
</script>

<template>
    <Head title="Alan Adlarım" />

    <CustomerLayout>
        <template #header>Alan Adlarım</template>

        <!-- Usage summary -->
        <div class="mb-4 grid grid-cols-1 gap-3 sm:grid-cols-3">
            <div class="rounded-xl border border-slate-200 bg-white p-4">
                <p class="text-xs font-medium uppercase tracking-wide text-slate-500">Ana Alan Adı</p>
                <p class="mt-1 text-xl font-bold text-slate-900">
                    {{ usage.main }} <span class="text-sm font-normal text-slate-500">/ {{ limits.main ?? 'sınırsız' }}</span>
                </p>
            </div>
            <div class="rounded-xl border border-slate-200 bg-white p-4">
                <p class="text-xs font-medium uppercase tracking-wide text-slate-500">Ek + Park Edilmiş</p>
                <p class="mt-1 text-xl font-bold text-slate-900">
                    {{ usage.addon }} <span class="text-sm font-normal text-slate-500">/ {{ limits.addon ?? 'sınırsız' }}</span>
                </p>
            </div>
            <div class="rounded-xl border border-slate-200 bg-white p-4">
                <p class="text-xs font-medium uppercase tracking-wide text-slate-500">Alt Alan Adı</p>
                <p class="mt-1 text-xl font-bold text-slate-900">
                    {{ usage.subdomain }} <span class="text-sm font-normal text-slate-500">/ {{ limits.subdomain ?? 'sınırsız' }}</span>
                </p>
            </div>
        </div>

        <div class="mb-4 flex flex-wrap items-center justify-end gap-2">
            <button
                @click="showForm = true"
                class="inline-flex items-center gap-1.5 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
            >
                <PlusIcon class="h-4 w-4" /> Hızlı Ekle
            </button>
            <Link
                :href="route('customer.domains.wizard')"
                class="inline-flex items-center gap-2 rounded-lg bg-gradient-to-r from-indigo-600 to-purple-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:from-indigo-700 hover:to-purple-700"
            >
                <SparklesIcon class="h-4 w-4" /> Yeni Domain Ekle (Sihirbaz)
            </Link>
        </div>

        <!-- Empty state -->
        <EmptyState
            v-if="domains.length === 0"
            :icon="GlobeAltIcon"
            title="Henüz alan adı eklenmemiş"
            description="Hosting hesabınıza ilk domain'i eklemek için aşağıdaki butona basın."
        >
            <template #action>
                <Link
                    :href="route('customer.domains.wizard')"
                    class="inline-flex items-center gap-2 rounded-lg bg-gradient-to-r from-indigo-600 to-purple-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:shadow-md transition"
                >
                    <SparklesIcon class="h-4 w-4" /> Sihirbazla Domain Kur
                </Link>
            </template>
        </EmptyState>

        <!-- Cards -->
        <div v-else class="space-y-3">
            <div
                v-for="d in domains"
                :key="d.id"
                class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm transition hover:shadow-md"
            >
                <div class="flex items-start justify-between gap-4">
                    <div class="flex items-start gap-4">
                        <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-gradient-to-br from-purple-100 to-indigo-100">
                            <GlobeAltIcon class="h-6 w-6 text-purple-600" />
                        </div>
                        <div>
                            <div class="flex flex-wrap items-center gap-2">
                                <a
                                    :href="(d.ssl_enabled ? 'https://' : 'http://') + d.name"
                                    target="_blank"
                                    rel="noopener"
                                    class="font-mono text-lg font-semibold text-slate-900 hover:text-indigo-600"
                                >
                                    {{ d.name }}
                                </a>
                                <span :class="['inline-flex rounded-full px-2 py-0.5 text-xs font-medium', typeBadge(d.type)]">
                                    {{ d.type_label }}
                                </span>
                                <span :class="['inline-flex rounded-full px-2 py-0.5 text-xs font-medium', statusBadge(d.status)]">
                                    {{ d.status_label }}
                                </span>
                            </div>
                            <p v-if="d.parent" class="mt-1 text-xs text-slate-500">
                                Bağlı: <span class="font-mono">{{ d.parent }}</span>
                            </p>
                            <p class="mt-1 text-xs text-slate-500">
                                <code class="rounded bg-slate-100 px-1 font-mono">{{ d.document_root }}</code>
                            </p>
                            <div class="mt-2 flex flex-wrap gap-3 text-xs text-slate-600">
                                <button @click="editPhp(d)" class="inline-flex items-center gap-1 rounded bg-slate-100 px-2 py-0.5 hover:bg-indigo-100 hover:text-indigo-700">
                                    <CodeBracketIcon class="h-3 w-3" /> PHP {{ d.php_version }} <span class="text-slate-400">değiştir</span>
                                </button>
                                <span v-if="d.ssl_enabled" class="inline-flex items-center gap-0.5 text-emerald-600">
                                    <LockClosedIcon class="h-3 w-3" /> SSL aktif
                                </span>
                                <span
                                    v-if="d.is_wildcard"
                                    class="inline-flex items-center gap-0.5 rounded bg-amber-100 px-1.5 py-0.5 font-medium text-amber-700"
                                    :title="`*.${d.name} her subdomain isteği bu vhost'a düşüyor`"
                                >
                                    <ArrowsRightLeftIcon class="h-3 w-3" /> Wildcard *.{{ d.name }}
                                </span>
                                <span class="text-slate-400">{{ d.created_at }}</span>
                            </div>
                            <p v-if="d.last_error" class="mt-2 rounded bg-red-50 px-2 py-1 text-xs text-red-700">{{ d.last_error }}</p>
                        </div>
                    </div>

                    <button
                        v-if="d.type !== 'main'"
                        @click="removeDomain(d)"
                        class="inline-flex items-center gap-1 rounded-lg border border-red-200 px-3 py-1.5 text-xs font-medium text-red-700 hover:bg-red-50"
                    >
                        <TrashIcon class="h-3.5 w-3.5" /> Kaldır
                    </button>
                </div>

                <!-- Sistem subdomain'leri: mail/webmail/panel/webdisk/autodiscover/autoconfig -->
                <div v-if="d.system_subdomains && d.system_subdomains.length > 0" class="mt-4 border-t border-slate-100 pt-3">
                    <button
                        @click="toggleSubdomains(d.id)"
                        class="flex w-full items-center justify-between text-sm font-medium text-slate-700 hover:text-indigo-600"
                    >
                        <span class="inline-flex items-center gap-2">
                            <component :is="expandedSubdomains.has(d.id) ? ChevronDownIcon : ChevronRightIcon" class="h-4 w-4" />
                            Sistem Subdomain'leri
                            <span class="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700">
                                {{ d.system_subdomains.filter(s => s.active).length }}/{{ d.system_subdomains.length }} aktif
                            </span>
                        </span>
                        <button
                            v-if="expandedSubdomains.has(d.id)"
                            @click.stop="reprovisionSubdomains(d)"
                            class="inline-flex items-center gap-1 rounded-md border border-slate-200 bg-white px-2 py-1 text-xs font-medium text-slate-700 hover:bg-slate-50"
                        >
                            <ArrowPathIcon class="h-3.5 w-3.5" /> Yeniden Provision Et
                        </button>
                    </button>

                    <div v-if="expandedSubdomains.has(d.id)" class="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
                        <div
                            v-for="sub in d.system_subdomains"
                            :key="sub.name"
                            class="flex items-center gap-3 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2"
                        >
                            <component :is="subdomainIcon(sub.type)" class="h-5 w-5 flex-shrink-0 text-indigo-500" />
                            <div class="min-w-0 flex-1">
                                <p class="truncate text-xs font-medium text-slate-700">{{ subdomainLabel(sub) }}</p>
                                <a
                                    :href="sub.url"
                                    target="_blank"
                                    rel="noopener"
                                    class="block truncate font-mono text-[11px] text-slate-500 hover:text-indigo-600"
                                >
                                    {{ sub.name }}
                                </a>
                            </div>
                            <span
                                :class="['inline-flex h-2 w-2 flex-shrink-0 rounded-full', sub.active ? 'bg-emerald-500' : 'bg-amber-500']"
                                :title="sub.active ? 'Aktif' : 'Yapılandırma bekliyor'"
                            ></span>
                        </div>
                    </div>
                </div>

                <!-- Wildcard subdomain card — yalnız main/addon -->
                <div
                    v-if="d.type === 'main' || d.type === 'addon'"
                    class="mt-4 rounded-lg border border-amber-100 bg-amber-50/50 p-3"
                >
                    <div class="flex items-start justify-between gap-3">
                        <div class="flex items-start gap-2">
                            <BoltIcon class="mt-0.5 h-5 w-5 flex-shrink-0 text-amber-500" />
                            <div>
                                <p class="text-sm font-medium text-slate-800">
                                    Wildcard Subdomain
                                    <span
                                        v-if="d.is_wildcard"
                                        class="ml-1 rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700"
                                    >Açık</span>
                                    <span
                                        v-else
                                        class="ml-1 rounded-full bg-slate-200 px-2 py-0.5 text-xs font-medium text-slate-600"
                                    >Kapalı</span>
                                </p>
                                <p class="mt-0.5 text-xs text-slate-600">
                                    Açıkken
                                    <code class="rounded bg-white px-1 font-mono text-[11px] text-amber-700">*.{{ d.name }}</code>
                                    her subdomain isteğini main vhost'a yönlendirir.
                                </p>
                                <p v-if="d.is_wildcard && d.wildcard_target_path" class="mt-0.5 text-xs text-slate-500">
                                    Hedef: <code class="font-mono">{{ d.wildcard_target_path }}</code>
                                </p>
                            </div>
                        </div>
                        <div class="flex-shrink-0">
                            <button
                                v-if="!d.is_wildcard"
                                @click="openWildcard(d)"
                                class="inline-flex items-center gap-1 rounded-lg border border-amber-300 bg-white px-3 py-1.5 text-xs font-medium text-amber-700 hover:bg-amber-100"
                            >
                                <BoltIcon class="h-3.5 w-3.5" /> Etkinleştir
                            </button>
                            <button
                                v-else
                                @click="disableWildcard(d)"
                                class="inline-flex items-center gap-1 rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-100"
                            >
                                <XMarkIcon class="h-3.5 w-3.5" /> Kapat
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- PHP version modal -->
        <div v-if="showPhpForm" class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 p-4">
            <div class="w-full max-w-md rounded-xl bg-white p-6 shadow-xl">
                <div class="mb-4 flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-slate-900">
                        PHP Versiyonu Değiştir
                    </h3>
                    <button @click="showPhpForm = false"><XMarkIcon class="h-5 w-5 text-slate-400" /></button>
                </div>
                <p class="mb-4 text-sm text-slate-600">
                    <span class="font-mono">{{ editingDomain?.name }}</span> için yeni PHP versiyonu seçin.
                    Değişiklik anında FPM pool reload edilir, kısa downtime (~1-2sn) olabilir.
                </p>
                <form @submit.prevent="submitPhp" class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-700">PHP Sürümü</label>
                        <div class="mt-2 grid grid-cols-3 gap-2">
                            <label v-for="v in php_versions" :key="v" :class="[
                                'flex cursor-pointer items-center justify-center rounded-lg border px-3 py-2 text-sm font-medium',
                                phpForm.php_version === v ? 'border-indigo-500 bg-indigo-50 text-indigo-700' : 'border-slate-300 text-slate-700 hover:bg-slate-50',
                            ]">
                                <input v-model="phpForm.php_version" type="radio" :value="v" class="sr-only" />
                                PHP {{ v }}
                            </label>
                        </div>
                    </div>
                    <div class="flex justify-end gap-2">
                        <button type="button" @click="showPhpForm = false" class="rounded-lg border border-slate-300 px-4 py-2 text-sm">İptal</button>
                        <button type="submit" :disabled="phpForm.processing" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">Değiştir</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Add domain modal -->
        <div v-if="showForm" class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 p-4">
            <div class="w-full max-w-lg rounded-xl bg-white p-6 shadow-xl">
                <div class="mb-4 flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-slate-900">Yeni Alan Adı Ekle</h3>
                    <button @click="showForm = false" class="text-slate-400 hover:text-slate-600">
                        <XMarkIcon class="h-5 w-5" />
                    </button>
                </div>

                <form @submit.prevent="submit" class="space-y-4">
                    <div>
                        <label class="mb-1 block text-sm font-medium text-slate-700">Domain Adı <span class="text-red-500">*</span></label>
                        <input
                            v-model="form.name"
                            type="text"
                            placeholder="ornek.com"
                            class="w-full rounded-lg border border-slate-300 px-3 py-2 font-mono text-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
                        />
                        <p v-if="form.errors.name" class="mt-1 text-xs text-red-600">{{ form.errors.name }}</p>
                    </div>

                    <div>
                        <label class="mb-1 block text-sm font-medium text-slate-700">Tip</label>
                        <select v-model="form.type" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500">
                            <option value="addon">Ek Alan Adı (kendi klasörü)</option>
                            <option value="parked">Park Edilmiş (mevcut bir adın alias'ı)</option>
                            <option value="subdomain">Alt Alan Adı (örn: blog.ornek.com)</option>
                        </select>
                    </div>

                    <div v-if="form.type === 'parked' || form.type === 'subdomain'">
                        <label class="mb-1 block text-sm font-medium text-slate-700">Üst Domain</label>
                        <select v-model="form.parent_domain_id" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500">
                            <option :value="null">Seçin...</option>
                            <option v-for="p in parents" :key="p.id" :value="p.id">{{ p.name }} ({{ p.type }})</option>
                        </select>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="mb-1 block text-sm font-medium text-slate-700">PHP Sürümü</label>
                            <select v-model="form.php_version" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500">
                                <option v-for="v in php_versions" :key="v" :value="v">PHP {{ v }}</option>
                            </select>
                        </div>
                        <div class="flex items-end">
                            <label class="flex items-center gap-2 text-sm">
                                <input v-model="form.ssl_enabled" type="checkbox" class="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                Let's Encrypt SSL etkin
                            </label>
                        </div>
                    </div>

                    <div v-if="active_web_server === 'nginx'" class="rounded-lg bg-blue-50 px-3 py-2">
                        <label class="flex items-start gap-2 text-sm">
                            <input v-model="form.reverse_proxy_enabled" type="checkbox" class="mt-0.5 h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                            <span>
                                <strong class="text-slate-800">Reverse Proxy modu</strong> (Nginx önde + Apache arkada)
                                <p class="mt-0.5 text-xs text-slate-600">
                                    Static dosyalar Nginx tarafından doğrudan serve edilir, dynamic PHP istekleri
                                    Apache backend'e proxy_pass ile iletilir. <code>.htaccess</code> uyumluluğu korunur.
                                </p>
                            </span>
                        </label>
                    </div>

                    <div class="flex justify-end gap-2 border-t border-slate-200 pt-4">
                        <button type="button" @click="showForm = false" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
                            İptal
                        </button>
                        <button
                            type="submit"
                            :disabled="form.processing"
                            class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50"
                        >
                            Ekle
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Wildcard enable modal -->
        <div v-if="showWildcardForm" class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 p-4">
            <div class="w-full max-w-lg rounded-xl bg-white p-6 shadow-xl">
                <div class="mb-4 flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-slate-900">
                        <BoltIcon class="inline h-5 w-5 text-amber-500" />
                        Wildcard Subdomain Etkinleştir
                    </h3>
                    <button @click="showWildcardForm = false" class="text-slate-400 hover:text-slate-600">
                        <XMarkIcon class="h-5 w-5" />
                    </button>
                </div>
                <div class="mb-4 rounded-lg bg-amber-50 px-3 py-2 text-sm text-amber-800">
                    <p>
                        <span class="font-mono">*.{{ wildcardDomain?.name }}</span> aktifleştirildiğinde
                        <strong>her subdomain isteği</strong> bu vhost'a düşer. Bağımsız subdomain
                        kayıtları (örn. <code class="font-mono text-xs">blog.{{ wildcardDomain?.name }}</code>)
                        kendi vhost'larına yönlenir; wildcard yalnız tanımsız subdomain'leri yakalar.
                    </p>
                    <p class="mt-1">DNS zone'a otomatik <code class="font-mono text-xs">*.{{ wildcardDomain?.name }} A {server_ip}</code> kaydı eklenir.</p>
                </div>
                <form @submit.prevent="enableWildcard" class="space-y-4">
                    <div>
                        <label class="mb-1 block text-sm font-medium text-slate-700">
                            Özel hedef path <span class="text-slate-400">(opsiyonel)</span>
                        </label>
                        <input
                            v-model="wildcardForm.wildcard_target_path"
                            type="text"
                            :placeholder="`/home/user/public_html/wildcard`"
                            class="w-full rounded-lg border border-slate-300 px-3 py-2 font-mono text-sm focus:border-amber-500 focus:ring-1 focus:ring-amber-500"
                        />
                        <p class="mt-1 text-xs text-slate-500">
                            Boş bırakırsanız default <code class="font-mono">public_html</code> kullanılır.
                            Tüm wildcard subdomain'lerini ayrı bir klasöre yönlendirmek için path girin.
                        </p>
                        <p v-if="wildcardForm.errors.wildcard_target_path" class="mt-1 text-xs text-red-600">
                            {{ wildcardForm.errors.wildcard_target_path }}
                        </p>
                    </div>
                    <div class="flex justify-end gap-2 border-t border-slate-200 pt-4">
                        <button
                            type="button"
                            @click="showWildcardForm = false"
                            class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
                        >
                            İptal
                        </button>
                        <button
                            type="submit"
                            :disabled="wildcardForm.processing"
                            class="rounded-lg bg-gradient-to-r from-amber-500 to-orange-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:from-amber-600 hover:to-orange-700 disabled:opacity-50"
                        >
                            <BoltIcon class="mr-1 inline h-4 w-4" />
                            Etkinleştir
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </CustomerLayout>
</template>
