<script setup lang="ts">
import { Head, useForm } from '@inertiajs/vue3';
import { ref } from 'vue';
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { Save, UploadCloud, AlertCircle, CheckCircle2, Info } from 'lucide-vue-next';

const props = defineProps<{
    settings: {
        site_name: string;
        site_description: string | null;
        site_logo: string | null;
        site_favicon: string | null;
        thermal_logo: string | null;
        qris_image?: string | null;
        tax_percentage?: string | number | null;
        service_charge_percentage?: string | number | null;
        tax_enabled?: string | number | null;
        service_charge_enabled?: string | number | null;
    };
}>();

const showToast = ref(false);
const toastMessage = ref('');

const triggerToast = (msg: string) => {
    toastMessage.value = msg;
    showToast.value = true;
    setTimeout(() => {
        showToast.value = false;
    }, 4000);
};

const form = useForm({
    site_name: props.settings.site_name || '',
    site_description: props.settings.site_description || '',
    site_logo: null as File | null,
    site_favicon: null as File | null,
    thermal_logo: null as File | null,
    qris_image: null as File | null,
    tax_percentage: props.settings.tax_percentage || '0',
    service_charge_percentage: props.settings.service_charge_percentage || '0',
    tax_enabled: props.settings.tax_enabled === '1' || props.settings.tax_enabled === undefined || props.settings.tax_enabled === null,
    service_charge_enabled: props.settings.service_charge_enabled === '1' || props.settings.service_charge_enabled === undefined || props.settings.service_charge_enabled === null,
});

// File upload preview refs
const logoPreview = ref<string | null>(props.settings.site_logo);
const faviconPreview = ref<string | null>(props.settings.site_favicon);
const thermalLogoPreview = ref<string | null>(props.settings.thermal_logo || '/images/logo-thermal.png');
const qrisPreview = ref<string | null>(props.settings.qris_image || '/images/radhcloud-qris.png');

const handleLogoChange = (e: Event) => {
    const target = e.target as HTMLInputElement;
    if (target.files && target.files[0]) {
        const file = target.files[0];
        form.site_logo = file;
        logoPreview.value = URL.createObjectURL(file);
    }
};

const handleFaviconChange = (e: Event) => {
    const target = e.target as HTMLInputElement;
    if (target.files && target.files[0]) {
        const file = target.files[0];
        form.site_favicon = file;
        faviconPreview.value = URL.createObjectURL(file);
    }
};

const handleThermalLogoChange = (e: Event) => {
    const target = e.target as HTMLInputElement;
    if (target.files && target.files[0]) {
        const file = target.files[0];
        form.thermal_logo = file;
        thermalLogoPreview.value = URL.createObjectURL(file);
    }
};

const handleQrisChange = (e: Event) => {
    const target = e.target as HTMLInputElement;
    if (target.files && target.files[0]) {
        const file = target.files[0];
        form.qris_image = file;
        qrisPreview.value = URL.createObjectURL(file);
    }
};

const submit = () => {
    // Inertia requires a POST request for multipart/form-data uploads to Laravel
    form.post(route('settings.update'), {
        forceFormData: true,
        preserveScroll: true,
        onSuccess: () => {
            triggerToast('Site settings updated successfully.');
            // Reset files
            form.site_logo = null;
            form.site_favicon = null;
            form.thermal_logo = null;
            form.qris_image = null;
        },
    });
};
</script>

<template>
    <AdminLayout>
        <Head title="System Settings" />

        <!-- Toast Notification -->
        <Transition
            enter-active-class="transform ease-out duration-300 transition"
            enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
            enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
            leave-active-class="transition ease-in duration-200"
            leave-from-class="opacity-100"
            leave-to-class="opacity-0"
        >
            <div 
                v-if="showToast" 
                class="fixed top-4 right-4 z-50 max-w-md w-full bg-white dark:bg-slate-900 border border-emerald-200 dark:border-emerald-950/30 rounded-xl shadow-xl p-4 flex items-start gap-3"
            >
                <CheckCircle2 class="h-5 w-5 text-emerald-600 dark:text-emerald-400 flex-shrink-0 mt-0.5" />
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-semibold text-slate-950 dark:text-slate-50">Success</p>
                    <p class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">{{ toastMessage }}</p>
                </div>
            </div>
        </Transition>

        <div class="w-full space-y-6">
            <!-- Header -->
            <div>
                <h1 class="text-2xl font-bold tracking-tight text-slate-900 dark:text-slate-100">System Settings</h1>
                <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">
                    Manage your application branding, configurations, and assets here.
                </p>
            </div>

            <!-- Form -->
            <form @submit.prevent="submit" class="space-y-6">
                <!-- Branding Card -->
                <div class="bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl p-6 shadow-sm space-y-6">
                    <h2 class="text-md font-semibold text-slate-900 dark:text-slate-100 border-b border-slate-100 dark:border-slate-900 pb-3">
                        General Settings
                    </h2>

                    <!-- Inputs -->
                    <div class="grid grid-cols-1 gap-6">
                        <div class="space-y-2">
                            <div class="flex items-center gap-1.5">
                                <label for="site_name" class="text-sm font-semibold text-slate-900 dark:text-slate-100">
                                    Site Name (Nama Aplikasi)
                                </label>
                                <div class="group relative inline-block cursor-help">
                                    <Info class="h-4 w-4 text-slate-400 dark:text-slate-500 hover:text-slate-650" />
                                    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-slate-950 text-white text-[11px] p-2 rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 leading-relaxed font-normal">
                                        Nama utama kafe/toko Anda yang akan muncul di tab browser web, judul halaman admin, serta kepala struk pembayaran.
                                    </div>
                                </div>
                            </div>
                            <input
                                id="site_name"
                                v-model="form.site_name"
                                type="text"
                                class="w-full px-3.5 py-2 rounded-lg border border-slate-200 dark:border-slate-800 bg-transparent text-sm text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-red-500/20 focus:border-red-500 transition-all"
                                placeholder="Enter application name"
                            />
                            <p class="text-xs text-slate-450 dark:text-slate-500 leading-normal">
                                Identitas bisnis utama Anda di sistem. Digunakan di seluruh interface POS dan administrasi.
                            </p>
                            <p v-if="form.errors.site_name" class="text-xs text-rose-600 mt-1 flex items-center gap-1.5">
                                <AlertCircle class="h-3.5 w-3.5" />
                                {{ form.errors.site_name }}
                            </p>
                        </div>

                        <div class="space-y-2">
                            <div class="flex items-center gap-1.5">
                                <label for="site_description" class="text-sm font-semibold text-slate-900 dark:text-slate-100">
                                    Site Description (Deskripsi Aplikasi)
                                </label>
                                <div class="group relative inline-block cursor-help">
                                    <Info class="h-4 w-4 text-slate-400 dark:text-slate-500 hover:text-slate-650" />
                                    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-slate-950 text-white text-[11px] p-2 rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 leading-relaxed font-normal">
                                        Deskripsi singkat mengenai bisnis atau kafe Anda. Digunakan untuk metadata SEO pada mesin pencari.
                                    </div>
                                </div>
                            </div>
                            <textarea
                                id="site_description"
                                v-model="form.site_description"
                                rows="3"
                                class="w-full px-3.5 py-2 rounded-lg border border-slate-200 dark:border-slate-800 bg-transparent text-sm text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-red-500/20 focus:border-red-500 transition-all resize-none"
                                placeholder="Short description of the website"
                            />
                            <p class="text-xs text-slate-450 dark:text-slate-500 leading-normal">
                                Penjelasan singkat mengenai sistem POS atau profil usaha Anda (membantu dalam optimasi pencarian).
                            </p>
                            <p v-if="form.errors.site_description" class="text-xs text-rose-600 mt-1 flex items-center gap-1.5">
                                <AlertCircle class="h-3.5 w-3.5" />
                                {{ form.errors.site_description }}
                            </p>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 border-t border-slate-100 dark:border-slate-900 pt-6">
                            <!-- Sales Tax Section -->
                            <div class="space-y-4 bg-slate-50/50 dark:bg-slate-900/10 p-5 rounded-xl border border-slate-150 dark:border-slate-850">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-1.5">
                                        <span class="text-sm font-semibold text-slate-900 dark:text-slate-100">
                                            Sales Tax (Pajak Penjualan)
                                        </span>
                                        <div class="group relative inline-block cursor-help">
                                            <Info class="h-4 w-4 text-slate-400 dark:text-slate-500 hover:text-slate-650" />
                                            <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-slate-950 text-white text-[11px] p-2 rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 leading-relaxed font-normal">
                                                Jika dinonaktifkan, pajak penjualan tidak akan dihitung di POS, tidak muncul di struk/invoice, dan Grand Total dihitung bersih tanpa pajak.
                                            </div>
                                        </div>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer select-none">
                                        <input type="checkbox" v-model="form.tax_enabled" class="sr-only peer">
                                        <div class="w-9 h-5 bg-slate-200 dark:bg-slate-800 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-305 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-red-600"></div>
                                    </label>
                                </div>
                                <div class="space-y-2" :class="{ 'opacity-50 pointer-events-none': !form.tax_enabled }">
                                    <label for="tax_percentage" class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase">
                                        Persentase Pajak (%)
                                    </label>
                                    <input
                                        id="tax_percentage"
                                        v-model="form.tax_percentage"
                                        type="number"
                                        step="0.01"
                                        min="0"
                                        max="100"
                                        :disabled="!form.tax_enabled"
                                        class="w-full px-3.5 py-2 rounded-lg border border-slate-200 dark:border-slate-800 bg-transparent text-sm text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-red-500/20 focus:border-red-500 transition-all disabled:bg-slate-100/50 dark:disabled:bg-slate-900/30"
                                        placeholder="e.g. 10"
                                    />
                                </div>
                                <p class="text-xs text-slate-450 dark:text-slate-500 leading-normal">
                                    Mengatur apakah sistem POS membebankan pajak restoran (PB1) kepada pelanggan secara otomatis.
                                </p>
                                <p v-if="form.errors.tax_percentage" class="text-xs text-rose-600 mt-1 flex items-center gap-1.5">
                                    <AlertCircle class="h-3.5 w-3.5" />
                                    {{ form.errors.tax_percentage }}
                                </p>
                            </div>

                            <!-- Service Charge Section -->
                            <div class="space-y-4 bg-slate-50/50 dark:bg-slate-900/10 p-5 rounded-xl border border-slate-150 dark:border-slate-850">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-1.5">
                                        <span class="text-sm font-semibold text-slate-900 dark:text-slate-100">
                                            Service Charge (Biaya Layanan)
                                        </span>
                                        <div class="group relative inline-block cursor-help">
                                            <Info class="h-4 w-4 text-slate-400 dark:text-slate-500 hover:text-slate-655" />
                                            <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-slate-950 text-white text-[11px] p-2 rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 leading-relaxed font-normal">
                                                Jika dinonaktifkan, biaya layanan (service charge) tidak akan ditambahkan pada struk POS maupun invoice pelanggan.
                                            </div>
                                        </div>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer select-none">
                                        <input type="checkbox" v-model="form.service_charge_enabled" class="sr-only peer">
                                        <div class="w-9 h-5 bg-slate-200 dark:bg-slate-800 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-305 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-red-600"></div>
                                    </label>
                                </div>
                                <div class="space-y-2" :class="{ 'opacity-50 pointer-events-none': !form.service_charge_enabled }">
                                    <label for="service_charge_percentage" class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase">
                                        Persentase Biaya Layanan (%)
                                    </label>
                                    <input
                                        id="service_charge_percentage"
                                        v-model="form.service_charge_percentage"
                                        type="number"
                                        step="0.01"
                                        min="0"
                                        max="100"
                                        :disabled="!form.service_charge_enabled"
                                        class="w-full px-3.5 py-2 rounded-lg border border-slate-200 dark:border-slate-800 bg-transparent text-sm text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-red-500/20 focus:border-red-500 transition-all disabled:bg-slate-100/50 dark:disabled:bg-slate-900/30"
                                        placeholder="e.g. 5"
                                    />
                                </div>
                                <p class="text-xs text-slate-450 dark:text-slate-500 leading-normal">
                                    Mengatur apakah sistem POS menambahkan biaya layanan tambahan per transaksi konsumen secara otomatis.
                                </p>
                                <p v-if="form.errors.service_charge_percentage" class="text-xs text-rose-600 mt-1 flex items-center gap-1.5">
                                    <AlertCircle class="h-3.5 w-3.5" />
                                    {{ form.errors.service_charge_percentage }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Assets & Logos Card -->
                <div class="bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl p-6 shadow-sm space-y-6">
                    <h2 class="text-md font-semibold text-slate-900 dark:text-slate-100 border-b border-slate-100 dark:border-slate-900 pb-3">
                        Visual Identity Assets
                    </h2>

                    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6">
                        <!-- Logo Upload -->
                        <div class="space-y-3 bg-slate-50/30 dark:bg-slate-900/5 p-4 rounded-xl border border-slate-100 dark:border-slate-900">
                            <div class="flex items-center gap-1.5">
                                <label class="text-sm font-semibold text-slate-900 dark:text-slate-100">Site Logo</label>
                                <div class="group relative inline-block cursor-help">
                                    <Info class="h-4 w-4 text-slate-400 dark:text-slate-500 hover:text-slate-650" />
                                    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-slate-950 text-white text-[11px] p-2 rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 leading-relaxed font-normal">
                                        Logo utama berwarna yang akan dipasang pada halaman login kasir/admin, dashboard manajemen, dan PDF laporan penjualan.
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Preview Box -->
                            <div class="h-40 w-full rounded-lg border border-dashed border-slate-200 dark:border-slate-800 flex items-center justify-center bg-slate-50/50 dark:bg-slate-900/30 overflow-hidden relative group">
                                <img 
                                    v-if="logoPreview" 
                                    :src="logoPreview" 
                                    alt="Logo Preview" 
                                    class="max-h-24 max-w-full object-contain p-2"
                                />
                                <div v-else class="text-center p-4">
                                    <UploadCloud class="h-8 w-8 text-slate-400 mx-auto" />
                                    <span class="text-xs text-slate-400 mt-2 block">No Logo Configured</span>
                                </div>
                            </div>

                            <!-- File Button -->
                            <div class="relative">
                                <input
                                    type="file"
                                    id="site_logo"
                                    accept="image/*"
                                    class="hidden"
                                    @change="handleLogoChange"
                                />
                                <label
                                    for="site_logo"
                                    class="inline-flex w-full items-center justify-center gap-2 px-3 py-2 rounded-lg border border-slate-200 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-900 text-xs font-semibold text-slate-700 dark:text-slate-300 transition-colors cursor-pointer"
                                >
                                    Choose Logo File
                                </label>
                            </div>
                            <p class="text-[10px] text-slate-450 dark:text-slate-500 leading-normal">
                                Format: PNG/JPG/WebP/SVG (Maks. 2MB). Gunakan versi transparan.
                            </p>
                            <p v-if="form.errors.site_logo" class="text-xs text-rose-600 mt-1 flex items-center gap-1.5">
                                <AlertCircle class="h-3.5 w-3.5" />
                                {{ form.errors.site_logo }}
                            </p>
                        </div>

                        <!-- Favicon Upload -->
                        <div class="space-y-3 bg-slate-50/30 dark:bg-slate-900/5 p-4 rounded-xl border border-slate-100 dark:border-slate-900">
                            <div class="flex items-center gap-1.5">
                                <label class="text-sm font-semibold text-slate-900 dark:text-slate-100">Site Favicon</label>
                                <div class="group relative inline-block cursor-help">
                                    <Info class="h-4 w-4 text-slate-400 dark:text-slate-500 hover:text-slate-655" />
                                    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-slate-950 text-white text-[11px] p-2 rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 leading-relaxed font-normal">
                                        Ikon kecil berukuran persegi yang tampil di bagian kiri judul tab web browser ketika sistem POS ini sedang diakses.
                                    </div>
                                </div>
                            </div>

                            <!-- Preview Box -->
                            <div class="h-40 w-full rounded-lg border border-dashed border-slate-200 dark:border-slate-800 flex items-center justify-center bg-slate-50/50 dark:bg-slate-900/30 overflow-hidden relative group">
                                <img 
                                    v-if="faviconPreview" 
                                    :src="faviconPreview" 
                                    alt="Favicon Preview" 
                                    class="h-12 w-12 object-contain p-1 rounded bg-white dark:bg-slate-800 shadow border border-slate-100 dark:border-slate-700"
                                />
                                <div v-else class="text-center p-4">
                                    <UploadCloud class="h-8 w-8 text-slate-400 mx-auto" />
                                    <span class="text-xs text-slate-400 mt-2 block">No Favicon Configured</span>
                                </div>
                            </div>

                            <!-- File Button -->
                            <div class="relative">
                                <input
                                    type="file"
                                    id="site_favicon"
                                    accept=".ico,image/*"
                                    class="hidden"
                                    @change="handleFaviconChange"
                                />
                                <label
                                    for="site_favicon"
                                    class="inline-flex w-full items-center justify-center gap-2 px-3 py-2 rounded-lg border border-slate-200 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-900 text-xs font-semibold text-slate-700 dark:text-slate-300 transition-colors cursor-pointer"
                                >
                                    Choose Favicon File
                                </label>
                            </div>
                            <p class="text-[10px] text-slate-450 dark:text-slate-500 leading-normal">
                                Format: ICO/PNG/JPG/SVG (Maks. 1MB). Disarankan bentuk persegi murni.
                            </p>
                            <p v-if="form.errors.site_favicon" class="text-xs text-rose-600 mt-1 flex items-center gap-1.5">
                                <AlertCircle class="h-3.5 w-3.5" />
                                {{ form.errors.site_favicon }}
                            </p>
                        </div>

                        <!-- Thermal Logo Upload -->
                        <div class="space-y-3 bg-slate-50/30 dark:bg-slate-900/5 p-4 rounded-xl border border-slate-100 dark:border-slate-900">
                            <div class="flex items-center gap-1.5">
                                <label class="text-sm font-semibold text-slate-900 dark:text-slate-100">Logo Thermal (Struk)</label>
                                <div class="group relative inline-block cursor-help">
                                    <Info class="h-4 w-4 text-slate-400 dark:text-slate-500 hover:text-slate-655" />
                                    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-slate-950 text-white text-[11px] p-2 rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 leading-relaxed font-normal">
                                        Logo berformat hitam-putih kontras tinggi yang dicetak di bagian paling atas struk belanja fisik menggunakan printer thermal kasir.
                                    </div>
                                </div>
                            </div>

                            <!-- Preview Box -->
                            <div class="h-40 w-full rounded-lg border border-dashed border-slate-200 dark:border-slate-800 flex items-center justify-center bg-slate-50/50 dark:bg-slate-900/30 overflow-hidden relative group font-sans">
                                <img 
                                    v-if="thermalLogoPreview" 
                                    :src="thermalLogoPreview" 
                                    alt="Thermal Logo Preview" 
                                    class="max-h-24 max-w-full object-contain p-2"
                                />
                                <div v-else class="text-center p-4">
                                    <UploadCloud class="h-8 w-8 text-slate-400 mx-auto" />
                                    <span class="text-xs text-slate-400 mt-2 block">No Thermal Logo Configured</span>
                                </div>
                            </div>

                            <!-- File Button -->
                            <div class="relative">
                                <input
                                    type="file"
                                    id="thermal_logo"
                                    accept="image/*"
                                    class="hidden"
                                    @change="handleThermalLogoChange"
                                />
                                <label
                                    for="thermal_logo"
                                    class="inline-flex w-full items-center justify-center gap-2 px-3 py-2 rounded-lg border border-slate-200 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-900 text-xs font-semibold text-slate-700 dark:text-slate-300 transition-colors cursor-pointer"
                                >
                                    Choose Thermal Logo File
                                </label>
                            </div>
                            <p class="text-[10px] text-slate-450 dark:text-slate-500 leading-normal">
                                Format: PNG/JPG/JPEG/WebP (Maks. 2MB). Disarankan logo 1 warna (Hitam-Putih).
                            </p>
                            <p v-if="form.errors.thermal_logo" class="text-xs text-rose-600 mt-1 flex items-center gap-1.5">
                                <AlertCircle class="h-3.5 w-3.5" />
                                {{ form.errors.thermal_logo }}
                            </p>
                        </div>

                        <!-- QRIS Manual Image Upload -->
                        <div class="space-y-3 bg-slate-50/30 dark:bg-slate-900/5 p-4 rounded-xl border border-slate-100 dark:border-slate-900">
                            <div class="flex items-center gap-1.5">
                                <label class="text-sm font-semibold text-slate-900 dark:text-slate-100">Gambar QRIS Manual</label>
                                <div class="group relative inline-block cursor-help">
                                    <Info class="h-4 w-4 text-slate-400 dark:text-slate-500 hover:text-slate-655" />
                                    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-slate-950 text-white text-[11px] p-2 rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 leading-relaxed font-normal">
                                        Gambar barcode / QRIS fisik toko Anda yang akan ditampilkan pada modal pembayaran Self-Order HP pelanggan.
                                    </div>
                                </div>
                            </div>

                            <!-- Preview Box -->
                            <div class="h-40 w-full rounded-lg border border-dashed border-slate-200 dark:border-slate-800 flex items-center justify-center bg-slate-50/50 dark:bg-slate-900/30 overflow-hidden relative group font-sans">
                                <img 
                                    v-if="qrisPreview" 
                                    :src="qrisPreview" 
                                    alt="QRIS Image Preview" 
                                    class="max-h-36 max-w-full object-contain p-2"
                                />
                                <div v-else class="text-center p-4">
                                    <UploadCloud class="h-8 w-8 text-slate-400 mx-auto" />
                                    <span class="text-xs text-slate-400 mt-2 block">No QRIS Configured</span>
                                </div>
                            </div>

                            <!-- File Button -->
                            <div class="relative">
                                <input
                                    type="file"
                                    id="qris_image"
                                    accept="image/*"
                                    class="hidden"
                                    @change="handleQrisChange"
                                />
                                <label
                                    for="qris_image"
                                    class="inline-flex w-full items-center justify-center gap-2 px-3 py-2 rounded-lg border border-slate-200 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-900 text-xs font-semibold text-slate-700 dark:text-slate-300 transition-colors cursor-pointer"
                                >
                                    Choose QRIS File
                                </label>
                            </div>
                            <p class="text-[10px] text-slate-450 dark:text-slate-500 leading-normal">
                                Format: PNG/JPG/JPEG/WebP (Maks. 2MB). Default dari public/images/radhcloud-qris.png.
                            </p>
                            <p v-if="form.errors.qris_image" class="text-xs text-rose-600 mt-1 flex items-center gap-1.5">
                                <AlertCircle class="h-3.5 w-3.5" />
                                {{ form.errors.qris_image }}
                            </p>
                        </div>
                    </div>

                    <!-- Upload Progress -->
                    <div v-if="form.progress" class="w-full bg-slate-100 dark:bg-slate-900 rounded-full h-2 overflow-hidden mt-4">
                        <div 
                            class="bg-red-600 dark:bg-red-500 h-full rounded-full transition-all duration-150"
                            :style="{ width: form.progress.percentage + '%' }"
                        ></div>
                    </div>
                </div>

                <!-- Form Submit Card -->
                <div class="flex items-center justify-end gap-3">
                    <button
                        type="submit"
                        :disabled="form.processing"
                        class="inline-flex items-center gap-2 px-4 py-2 bg-red-600 hover:bg-red-500 text-white rounded-lg text-sm font-semibold shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500/20 disabled:opacity-50 transition-all cursor-pointer"
                    >
                        <Save class="h-4 w-4" />
                        <span>{{ form.processing ? 'Saving Settings...' : 'Save Settings' }}</span>
                    </button>
                </div>
            </form>
        </div>
    </AdminLayout>
</template>
