<script setup>
import CustomerLayout from '@/Layouts/CustomerLayout.vue'
import { Head, Link, useForm } from '@inertiajs/vue3'
import { ref, computed } from 'vue'
import axios from 'axios'
import {
    ArrowLeftIcon, EnvelopeIcon, ServerStackIcon, LockClosedIcon, KeyIcon,
    ArrowTopRightOnSquareIcon, GlobeAltIcon, ClipboardDocumentIcon, ClipboardDocumentCheckIcon,
    CheckCircleIcon, ExclamationTriangleIcon, InformationCircleIcon,
    DevicePhoneMobileIcon, ComputerDesktopIcon, ArrowsRightLeftIcon, MegaphoneIcon,
    ChartBarSquareIcon, SparklesIcon, ArrowDownTrayIcon,
} from '@heroicons/vue/24/outline'

const props = defineProps({
    mailbox: { type: Object, required: true },
    forwarders: { type: Array, default: () => [] },
    autoresponders: { type: Array, default: () => [] },
    webmail_url: { type: String, default: null },
    webmail_name: { type: String, default: 'Webmail' },
    connect_info: { type: Object, required: true },
})

const showPasswordModal = ref(false)
const passwordForm = useForm({ password: '' })
const copied = ref({})
const ssoLoading = ref(false)
const ssoError = ref(null)

async function openWebmailSso() {
    if (ssoLoading.value) return
    ssoLoading.value = true
    ssoError.value = null
    try {
        const { data } = await axios.post(
            route('customer.email.webmail-sso', { emailAccount: props.mailbox.id })
        )
        if (data?.redirect_url) {
            window.open(data.redirect_url, '_blank', 'noopener')
        } else {
            ssoError.value = 'Webmail erişim URL üretilemedi.'
        }
    } catch (err) {
        ssoError.value = err?.response?.data?.message || 'Webmail açılamadı — webmail kurulu olmayabilir.'
    } finally {
        ssoLoading.value = false
    }
}

function submitPassword() {
    passwordForm.patch(route('customer.email.update-password', { emailAccount: props.mailbox.id }), {
        preserveScroll: true,
        onSuccess: () => { showPasswordModal.value = false; passwordForm.reset() },
    })
}

function copy(key, text) {
    navigator.clipboard?.writeText(text).then(() => {
        copied.value = { ...copied.value, [key]: true }
        setTimeout(() => {
            const c = { ...copied.value }
            delete c[key]
            copied.value = c
        }, 1500)
    })
}

function generatePassword() {
    const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$'
    let pwd = ''
    for (let i = 0; i < 16; i++) pwd += chars.charAt(Math.floor(Math.random() * chars.length))
    passwordForm.password = pwd
}

const quotaColor = computed(() => {
    const p = props.mailbox.usage_percent
    if (p >= 90) return 'bg-red-500'
    if (p >= 70) return 'bg-amber-500'
    return 'bg-emerald-500'
})
</script>

<template>
    <Head :title="`${mailbox.email} — Mail Hesabım`" />
    <CustomerLayout>
        <template #header>
            <Link :href="route('customer.email.index')" class="text-slate-400 hover:text-indigo-600 mr-2">
                <ArrowLeftIcon class="h-5 w-5" />
            </Link>
            <span>E-posta:</span>
            <code class="font-mono text-base text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-900/30 px-2 py-0.5 rounded ml-1">{{ mailbox.email }}</code>
        </template>

        <!-- Üst Kart: Email + Aksiyonlar -->
        <div class="rounded-2xl bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-600 p-px shadow-xl">
            <div class="rounded-2xl bg-white dark:bg-slate-900 p-6 lg:p-8">
                <div class="flex items-start justify-between flex-wrap gap-6">
                    <div class="flex items-start gap-4">
                        <div class="rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 p-3 shadow-lg shadow-indigo-500/30">
                            <EnvelopeIcon class="h-7 w-7 text-white" />
                        </div>
                        <div>
                            <p class="text-xs uppercase tracking-widest font-semibold text-indigo-600 dark:text-indigo-400">
                                Mail Hesabım
                            </p>
                            <h2 class="mt-1 text-3xl font-bold text-slate-900 dark:text-white font-mono">{{ mailbox.email }}</h2>
                            <div class="mt-2 flex items-center gap-3 flex-wrap text-sm">
                                <span class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 font-medium bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400 ring-1 ring-emerald-200 dark:ring-emerald-800">
                                    <CheckCircleIcon class="h-3.5 w-3.5" />
                                    {{ mailbox.status === 'active' ? 'Aktif' : mailbox.status }}
                                </span>
                                <span class="text-slate-500 text-xs">{{ mailbox.created_at_human }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="flex flex-wrap gap-2">
                        <button v-if="webmail_url" type="button" :disabled="ssoLoading" @click="openWebmailSso"
                                class="group inline-flex items-center gap-1.5 rounded-lg bg-gradient-to-r from-purple-600 to-pink-600 px-5 py-2.5 text-sm font-semibold text-white shadow hover:shadow-lg hover:scale-105 transition disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:scale-100">
                            <ArrowTopRightOnSquareIcon class="h-4 w-4" />
                            <span v-if="ssoLoading">Açılıyor...</span>
                            <span v-else>{{ webmail_name }} Aç</span>
                        </button>
                        <button @click="showPasswordModal = true" type="button"
                                class="inline-flex items-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">
                            <KeyIcon class="h-4 w-4" />
                            Parola Değiştir
                        </button>
                    </div>
                </div>
                <p v-if="ssoError" class="mt-3 text-xs text-red-600 flex items-center gap-1.5">
                    <ExclamationTriangleIcon class="h-4 w-4" />
                    {{ ssoError }}
                </p>
            </div>
        </div>

        <!-- Storage usage -->
        <div class="mt-6 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-5">
            <h3 class="text-base font-semibold text-slate-900 dark:text-slate-100 flex items-center gap-2 mb-3">
                <ChartBarSquareIcon class="h-5 w-5 text-indigo-500" />
                Depolama Kullanımı
            </h3>
            <div>
                <div class="flex items-center justify-between mb-1.5">
                    <span class="text-sm text-slate-500">{{ mailbox.usage_mb }} MB / {{ mailbox.quota_mb }} MB ({{ mailbox.usage_gb }} GB)</span>
                    <span :class="['text-sm font-bold', mailbox.usage_percent >= 90 ? 'text-red-600' : mailbox.usage_percent >= 70 ? 'text-amber-600' : 'text-emerald-600']">
                        %{{ mailbox.usage_percent }}
                    </span>
                </div>
                <div class="h-3 bg-slate-100 dark:bg-slate-700 rounded-full overflow-hidden">
                    <div :class="['h-full transition-all', quotaColor]" :style="{ width: Math.min(100, mailbox.usage_percent) + '%' }"></div>
                </div>
                <p v-if="mailbox.usage_percent >= 80" class="mt-2 text-xs text-amber-700 dark:text-amber-400 flex items-center gap-1.5">
                    <ExclamationTriangleIcon class="h-3.5 w-3.5" />
                    Quota'ya yaklaştınız — eski mailleri temizleyin veya destek ile iletişime geçin.
                </p>
            </div>
        </div>

        <!-- Mail Client Setup Cards -->
        <div class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-5">
            <!-- IMAP (Gelen) -->
            <div class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 overflow-hidden">
                <div class="px-5 py-3 border-b border-slate-100 dark:border-slate-700 bg-sky-50 dark:bg-sky-950/30">
                    <h3 class="text-base font-semibold text-sky-900 dark:text-sky-200 flex items-center gap-2">
                        <ServerStackIcon class="h-5 w-5" />
                        IMAP — Gelen Mail
                    </h3>
                    <p class="mt-0.5 text-xs text-sky-700 dark:text-sky-400">
                        Outlook, Thunderbird, iPhone Mail, Gmail uygulaması için
                    </p>
                </div>
                <div class="divide-y divide-slate-100 dark:divide-slate-700">
                    <div v-for="opt in connect_info.imap" :key="opt.port"
                         :class="['px-5 py-3', opt.recommended && 'bg-emerald-50/50 dark:bg-emerald-950/20']">
                        <div class="flex items-center justify-between gap-2 mb-1.5">
                            <span class="text-sm font-medium text-slate-900 dark:text-slate-100">{{ opt.name }}</span>
                            <span v-if="opt.recommended" class="inline-flex items-center gap-1 rounded-full bg-emerald-100 text-emerald-700 px-2 py-0.5 text-[10px] font-bold uppercase">
                                <SparklesIcon class="h-3 w-3" />
                                Önerilen
                            </span>
                        </div>
                        <div class="grid grid-cols-2 gap-2 text-xs">
                            <div class="flex items-center gap-2">
                                <span class="text-slate-500 w-16 shrink-0">Sunucu:</span>
                                <code class="flex-1 font-mono text-slate-900 dark:text-slate-100 truncate">{{ opt.host }}</code>
                                <button @click="copy(`imap_host_${opt.port}`, opt.host)" type="button"
                                        class="text-slate-400 hover:text-indigo-600">
                                    <component :is="copied[`imap_host_${opt.port}`] ? ClipboardDocumentCheckIcon : ClipboardDocumentIcon" class="h-3.5 w-3.5" />
                                </button>
                            </div>
                            <div class="flex items-center gap-2">
                                <span class="text-slate-500 w-12 shrink-0">Port:</span>
                                <code class="font-mono font-bold text-slate-900 dark:text-slate-100">{{ opt.port }}</code>
                                <span class="text-slate-400 text-[10px] ml-auto">{{ opt.security }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- SMTP (Giden) -->
            <div class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 overflow-hidden">
                <div class="px-5 py-3 border-b border-slate-100 dark:border-slate-700 bg-purple-50 dark:bg-purple-950/30">
                    <h3 class="text-base font-semibold text-purple-900 dark:text-purple-200 flex items-center gap-2">
                        <ServerStackIcon class="h-5 w-5" />
                        SMTP — Giden Mail
                    </h3>
                    <p class="mt-0.5 text-xs text-purple-700 dark:text-purple-400">
                        Mail göndermek için
                    </p>
                </div>
                <div class="divide-y divide-slate-100 dark:divide-slate-700">
                    <div v-for="opt in connect_info.smtp" :key="opt.port"
                         :class="['px-5 py-3', opt.recommended && 'bg-emerald-50/50 dark:bg-emerald-950/20']">
                        <div class="flex items-center justify-between gap-2 mb-1.5">
                            <span class="text-sm font-medium text-slate-900 dark:text-slate-100">{{ opt.name }}</span>
                            <span v-if="opt.recommended" class="inline-flex items-center gap-1 rounded-full bg-emerald-100 text-emerald-700 px-2 py-0.5 text-[10px] font-bold uppercase">
                                <SparklesIcon class="h-3 w-3" />
                                Önerilen
                            </span>
                        </div>
                        <div class="grid grid-cols-2 gap-2 text-xs">
                            <div class="flex items-center gap-2">
                                <span class="text-slate-500 w-16 shrink-0">Sunucu:</span>
                                <code class="flex-1 font-mono text-slate-900 dark:text-slate-100 truncate">{{ opt.host }}</code>
                                <button @click="copy(`smtp_host_${opt.port}`, opt.host)" type="button"
                                        class="text-slate-400 hover:text-indigo-600">
                                    <component :is="copied[`smtp_host_${opt.port}`] ? ClipboardDocumentCheckIcon : ClipboardDocumentIcon" class="h-3.5 w-3.5" />
                                </button>
                            </div>
                            <div class="flex items-center gap-2">
                                <span class="text-slate-500 w-12 shrink-0">Port:</span>
                                <code class="font-mono font-bold text-slate-900 dark:text-slate-100">{{ opt.port }}</code>
                                <span class="text-slate-400 text-[10px] ml-auto">{{ opt.security }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Username + Authentication info -->
        <div class="mt-6 rounded-xl border border-indigo-200 dark:border-indigo-800 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-indigo-950/30 dark:to-purple-950/30 p-5">
            <h3 class="text-base font-semibold text-slate-900 dark:text-slate-100 flex items-center gap-2 mb-3">
                <InformationCircleIcon class="h-5 w-5 text-indigo-600 dark:text-indigo-400" />
                Tüm Bağlantılarda Aynı Bilgiler
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
                <div class="rounded-lg bg-white dark:bg-slate-800 p-3">
                    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Kullanıcı Adı</p>
                    <div class="flex items-center gap-2">
                        <code class="flex-1 font-mono text-slate-900 dark:text-slate-100">{{ connect_info.username }}</code>
                        <button @click="copy('username', connect_info.username)" type="button"
                                class="text-slate-400 hover:text-indigo-600">
                            <component :is="copied.username ? ClipboardDocumentCheckIcon : ClipboardDocumentIcon" class="h-4 w-4" />
                        </button>
                    </div>
                </div>
                <div class="rounded-lg bg-white dark:bg-slate-800 p-3">
                    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Kimlik Doğrulama</p>
                    <p class="text-slate-900 dark:text-slate-100">{{ connect_info.authentication }}</p>
                    <p class="mt-1 text-xs text-slate-500">Parolanızla — "Parola Değiştir" ile yenileyin</p>
                </div>
            </div>
        </div>

        <!-- Mail Client Tutorials -->
        <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-5">
                <div class="flex items-center gap-3 mb-3">
                    <DevicePhoneMobileIcon class="h-6 w-6 text-emerald-500" />
                    <h3 class="text-base font-semibold text-slate-900 dark:text-slate-100">Mobil Cihazlar</h3>
                </div>
                <ul class="space-y-1.5 text-sm text-slate-600 dark:text-slate-400">
                    <li class="flex items-start gap-1.5">
                        <CheckCircleIcon class="h-4 w-4 text-emerald-500 mt-0.5 shrink-0" />
                        <span><strong>iPhone:</strong> Ayarlar → Mail → Hesap Ekle → Diğer → Mail Hesabı Ekle</span>
                    </li>
                    <li class="flex items-start gap-1.5">
                        <CheckCircleIcon class="h-4 w-4 text-emerald-500 mt-0.5 shrink-0" />
                        <span><strong>Android:</strong> Gmail uygulaması → Hesap Ekle → Diğer → Manuel kurulum</span>
                    </li>
                    <li class="flex items-start gap-1.5">
                        <CheckCircleIcon class="h-4 w-4 text-emerald-500 mt-0.5 shrink-0" />
                        <span>"IMAP" seçin, yukarıdaki Önerilen ayarları girin</span>
                    </li>
                </ul>
            </div>
            <div class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-5">
                <div class="flex items-center gap-3 mb-3">
                    <ComputerDesktopIcon class="h-6 w-6 text-indigo-500" />
                    <h3 class="text-base font-semibold text-slate-900 dark:text-slate-100">Masaüstü</h3>
                </div>
                <ul class="space-y-1.5 text-sm text-slate-600 dark:text-slate-400">
                    <li class="flex items-start gap-1.5">
                        <CheckCircleIcon class="h-4 w-4 text-emerald-500 mt-0.5 shrink-0" />
                        <span><strong>Outlook:</strong> Dosya → Hesap Ekle → Manuel kurulum → IMAP</span>
                    </li>
                    <li class="flex items-start gap-1.5">
                        <CheckCircleIcon class="h-4 w-4 text-emerald-500 mt-0.5 shrink-0" />
                        <span><strong>Thunderbird:</strong> Hesap Oluştur → E-posta hesabı → Manuel kurulum</span>
                    </li>
                    <li class="flex items-start gap-1.5">
                        <CheckCircleIcon class="h-4 w-4 text-emerald-500 mt-0.5 shrink-0" />
                        <span>SSL/TLS veya STARTTLS seçimine dikkat edin</span>
                    </li>
                </ul>
            </div>
        </div>

        <!-- iPhone/iPad Autoconfig (.mobileconfig) -->
        <div class="mt-6 rounded-2xl border border-emerald-200 dark:border-emerald-800 bg-gradient-to-br from-emerald-50 via-teal-50 to-cyan-50 dark:from-emerald-950/40 dark:via-teal-950/30 dark:to-cyan-950/30 p-5 lg:p-6">
            <div class="flex items-start gap-4 flex-wrap">
                <div class="rounded-xl bg-gradient-to-br from-emerald-500 to-teal-600 p-3 shadow-lg shadow-emerald-500/30 shrink-0">
                    <DevicePhoneMobileIcon class="h-7 w-7 text-white" />
                </div>
                <div class="flex-1 min-w-[260px]">
                    <div class="flex items-center gap-2 flex-wrap">
                        <h3 class="text-lg font-bold text-slate-900 dark:text-slate-100">iPhone / iPad için Otomatik Kurulum</h3>
                        <span class="inline-flex items-center gap-1 rounded-full bg-emerald-600 text-white px-2 py-0.5 text-[10px] font-bold uppercase">
                            <SparklesIcon class="h-3 w-3" />
                            Yeni
                        </span>
                    </div>
                    <p class="mt-1 text-sm text-slate-700 dark:text-slate-300">
                        Aşağıdaki butonla .mobileconfig dosyasını indirin. iPhone/iPad'inizde dosyayı açın →
                        <strong>Ayarlar → Profil İndir → Yükle</strong>.
                        IMAP &amp; SMTP otomatik yapılandırılır, manuel ayar girmeniz gerekmez.
                    </p>
                    <ul class="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-1 text-xs text-slate-600 dark:text-slate-400">
                        <li class="flex items-center gap-1.5"><CheckCircleIcon class="h-3.5 w-3.5 text-emerald-500 shrink-0" />IMAP 993 (SSL/TLS) — gelen</li>
                        <li class="flex items-center gap-1.5"><CheckCircleIcon class="h-3.5 w-3.5 text-emerald-500 shrink-0" />SMTP 587 (STARTTLS) — giden</li>
                        <li class="flex items-center gap-1.5"><CheckCircleIcon class="h-3.5 w-3.5 text-emerald-500 shrink-0" />Profil iOS Mail.app'a eklenir</li>
                        <li class="flex items-center gap-1.5"><CheckCircleIcon class="h-3.5 w-3.5 text-emerald-500 shrink-0" />Profili istediğinizde kaldırabilirsiniz</li>
                    </ul>
                </div>
                <a :href="route('customer.email.mobileconfig', { emailAccount: mailbox.id })"
                   class="inline-flex items-center gap-2 rounded-lg bg-gradient-to-r from-emerald-600 to-teal-600 px-5 py-2.5 text-sm font-semibold text-white shadow hover:shadow-lg hover:scale-105 transition self-start">
                    <ArrowDownTrayIcon class="h-4 w-4" />
                    .mobileconfig indir
                </a>
            </div>
        </div>

        <!-- Forwarders + Autoresponders Section -->
        <div class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-5">
            <div class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 overflow-hidden">
                <div class="px-5 py-3 border-b border-slate-100 dark:border-slate-700 flex items-center justify-between">
                    <h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100 flex items-center gap-2">
                        <ArrowsRightLeftIcon class="h-4 w-4 text-sky-500" />
                        Yönlendirmelerim ({{ forwarders.length }})
                    </h3>
                    <Link :href="route('customer.email.index')" class="text-xs text-indigo-600 hover:underline">
                        Yönet →
                    </Link>
                </div>
                <ul v-if="forwarders.length > 0" class="divide-y divide-slate-100 dark:divide-slate-700">
                    <li v-for="f in forwarders" :key="f.id" class="px-5 py-2.5 text-xs">
                        <span class="font-mono text-slate-700">→ {{ Array.isArray(f.destinations) ? f.destinations.join(', ') : f.destinations }}</span>
                    </li>
                </ul>
                <p v-else class="px-5 py-6 text-center text-sm text-slate-400">Yönlendirme yok</p>
            </div>

            <div class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 overflow-hidden">
                <div class="px-5 py-3 border-b border-slate-100 dark:border-slate-700 flex items-center justify-between">
                    <h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100 flex items-center gap-2">
                        <MegaphoneIcon class="h-4 w-4 text-purple-500" />
                        Otomatik Yanıtlayıcılar ({{ autoresponders.length }})
                    </h3>
                    <Link :href="route('customer.email.autoresponders.index')" class="text-xs text-indigo-600 hover:underline">
                        Yönet →
                    </Link>
                </div>
                <ul v-if="autoresponders.length > 0" class="divide-y divide-slate-100 dark:divide-slate-700">
                    <li v-for="a in autoresponders" :key="a.id" class="px-5 py-2.5 text-xs">
                        <span :class="['inline-flex h-2 w-2 rounded-full mr-2', a.active ? 'bg-emerald-500' : 'bg-slate-300']"></span>
                        <span class="font-semibold">{{ a.subject }}</span>
                    </li>
                </ul>
                <p v-else class="px-5 py-6 text-center text-sm text-slate-400">Otomatik yanıt yok</p>
            </div>
        </div>

        <!-- Password Change Modal -->
        <div v-if="showPasswordModal"
             class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 backdrop-blur-sm p-4">
            <div class="w-full max-w-md rounded-2xl bg-white dark:bg-slate-800 p-6 shadow-2xl">
                <h3 class="text-lg font-bold text-slate-900 dark:text-slate-100 flex items-center gap-2 mb-4">
                    <KeyIcon class="h-5 w-5 text-indigo-500" />
                    E-posta Parolası Değiştir
                </h3>
                <p class="text-sm text-slate-500 dark:text-slate-400 mb-4">
                    <code class="font-mono">{{ mailbox.email }}</code> için yeni parola.
                    Tüm mail client'larınızı yeni parolayla güncellemeyi unutmayın.
                </p>
                <form @submit.prevent="submitPassword" class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium mb-1">Yeni Parola</label>
                        <div class="flex gap-2">
                            <input v-model="passwordForm.password" type="text" required minlength="8"
                                   class="flex-1 rounded-lg border border-slate-300 dark:border-slate-600 dark:bg-slate-900 px-3 py-2 font-mono text-sm" />
                            <button type="button" @click="generatePassword"
                                    class="rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 px-3 hover:bg-slate-50 dark:hover:bg-slate-600">
                                <SparklesIcon class="h-4 w-4 text-amber-500" />
                            </button>
                        </div>
                        <p class="mt-1 text-xs text-slate-500">Min 8 karakter. Güçlü parola için ✨ butonu.</p>
                        <p v-if="passwordForm.errors.password" class="mt-1 text-xs text-red-600">{{ passwordForm.errors.password }}</p>
                    </div>
                    <div class="flex justify-end gap-2 pt-2">
                        <button type="button" @click="showPasswordModal = false"
                                class="rounded-lg border border-slate-300 dark:border-slate-600 px-4 py-2 text-sm">
                            İptal
                        </button>
                        <button type="submit" :disabled="passwordForm.processing"
                                class="rounded-lg bg-indigo-600 px-5 py-2 text-sm font-semibold text-white hover:bg-indigo-700 disabled:opacity-50">
                            <span v-if="passwordForm.processing">Kaydediliyor...</span>
                            <span v-else>Parolayı Değiştir</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </CustomerLayout>
</template>
