{# app/templates/vendor/settings.html #}
{% extends "vendor/base.html" %}
{% from 'shared/macros/headers.html' import page_header_flex %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% from 'shared/macros/tabs.html' import tabs_nav, tab_button %}

{% block title %}Settings{% endblock %}

{% block alpine_data %}vendorSettings(){% endblock %}

{% block content %}
<!-- Page Header -->
{% call page_header_flex(title='Settings', subtitle='Configure your vendor preferences') %}
{% endcall %}

{{ loading_state('Loading settings...') }}

{{ error_state('Error loading settings') }}

<!-- Settings Content -->
<div x-show="!loading && !error" class="mb-8">
    <!-- Section Tabs -->
    {% call tabs_nav(tab_var='activeSection') %}
        {{ tab_button('general', 'General', tab_var='activeSection', icon='cog') }}
        {{ tab_button('business', 'Business', tab_var='activeSection', icon='office-building') }}
        {{ tab_button('localization', 'Localization', tab_var='activeSection', icon='globe') }}
        {{ tab_button('marketplace', 'Marketplace', tab_var='activeSection', icon='shopping-cart') }}
        {{ tab_button('invoices', 'Invoices', tab_var='activeSection', icon='document-text') }}
        {{ tab_button('branding', 'Branding', tab_var='activeSection', icon='color-swatch') }}
        {{ tab_button('email', 'Email', tab_var='activeSection', icon='envelope') }}
        {{ tab_button('domains', 'Domains', tab_var='activeSection', icon='globe-alt') }}
        {{ tab_button('api', 'API', tab_var='activeSection', icon='key') }}
        {{ tab_button('notifications', 'Notifications', tab_var='activeSection', icon='bell') }}
    {% endcall %}

    <!-- Settings Panels -->
    <div>
            <!-- General Settings -->
            <div x-show="activeSection === 'general'" class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
                <div class="p-4 border-b dark:border-gray-700">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">General Settings</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Basic vendor configuration</p>
                </div>
                <div class="p-4">
                    <div class="space-y-6">
                        <!-- Subdomain -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Subdomain
                            </label>
                            <div class="flex items-center">
                                <input
                                    type="text"
                                    x-model="generalForm.subdomain"
                                    disabled
                                    class="flex-1 px-4 py-2 text-sm text-gray-500 bg-gray-100 border border-gray-200 rounded-l-lg dark:text-gray-400 dark:bg-gray-700 dark:border-gray-600"
                                />
                                <span class="px-4 py-2 text-sm text-gray-500 bg-gray-50 border border-l-0 border-gray-200 rounded-r-lg dark:text-gray-400 dark:bg-gray-600 dark:border-gray-600">
                                    .letzshop.lu
                                </span>
                            </div>
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Contact support to change your subdomain</p>
                        </div>

                        <!-- Active Status -->
                        <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                            <div>
                                <p class="font-medium text-gray-700 dark:text-gray-300">Store Status</p>
                                <p class="text-sm text-gray-500 dark:text-gray-400">Your store is currently visible to customers</p>
                            </div>
                            <span
                                :class="settings?.is_active
                                    ? 'px-3 py-1 text-sm font-semibold text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100'
                                    : 'px-3 py-1 text-sm font-semibold text-gray-700 bg-gray-200 rounded-full dark:bg-gray-600 dark:text-gray-100'"
                                x-text="settings?.is_active ? 'Active' : 'Inactive'"
                            ></span>
                        </div>

                        <!-- Verification Status -->
                        <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                            <div>
                                <p class="font-medium text-gray-700 dark:text-gray-300">Verification Status</p>
                                <p class="text-sm text-gray-500 dark:text-gray-400">Verified vendors get a badge on their store</p>
                            </div>
                            <span
                                :class="settings?.is_verified
                                    ? 'px-3 py-1 text-sm font-semibold text-blue-700 bg-blue-100 rounded-full dark:bg-blue-700 dark:text-blue-100'
                                    : 'px-3 py-1 text-sm font-semibold text-gray-700 bg-gray-200 rounded-full dark:bg-gray-600 dark:text-gray-100'"
                                x-text="settings?.is_verified ? 'Verified' : 'Not Verified'"
                            ></span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Business Info Settings -->
            <div x-show="activeSection === 'business'" class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
                <div class="p-4 border-b dark:border-gray-700">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Business Information</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">
                        Store details and contact information
                        <template x-if="companyName">
                            <span class="text-purple-600 dark:text-purple-400"> (inheriting from <span x-text="companyName"></span>)</span>
                        </template>
                    </p>
                </div>
                <div class="p-4">
                    <div class="space-y-6">
                        <!-- Store Name -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Store Name
                            </label>
                            <input
                                type="text"
                                x-model="businessForm.name"
                                @input="markBusinessChanged()"
                                class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                                placeholder="Your store name"
                            />
                        </div>

                        <!-- Description -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Store Description
                            </label>
                            <textarea
                                x-model="businessForm.description"
                                @input="markBusinessChanged()"
                                rows="3"
                                class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                                placeholder="Describe your store..."
                            ></textarea>
                        </div>

                        <!-- Contact Email (inheritable) -->
                        <div>
                            <label class="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Contact Email
                                <template x-if="isFieldInherited('contact_email')">
                                    <span class="ml-2 px-2 py-0.5 text-xs font-medium text-purple-600 bg-purple-100 rounded dark:bg-purple-900/30 dark:text-purple-400">
                                        Inherited
                                    </span>
                                </template>
                            </label>
                            <div class="flex gap-2">
                                <input
                                    type="email"
                                    x-model="businessForm.contact_email"
                                    @input="markBusinessChanged()"
                                    :placeholder="getEffectiveBusinessValue('contact_email') || 'contact@example.com'"
                                    class="flex-1 px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                                />
                                <template x-if="businessForm.contact_email">
                                    <button
                                        @click="resetToCompany('contact_email')"
                                        class="px-3 py-2 text-xs text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 dark:text-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600"
                                        title="Reset to company value"
                                    >
                                        Reset
                                    </button>
                                </template>
                            </div>
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                Leave empty to use company default
                            </p>
                        </div>

                        <!-- Contact Phone (inheritable) -->
                        <div>
                            <label class="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Contact Phone
                                <template x-if="isFieldInherited('contact_phone')">
                                    <span class="ml-2 px-2 py-0.5 text-xs font-medium text-purple-600 bg-purple-100 rounded dark:bg-purple-900/30 dark:text-purple-400">
                                        Inherited
                                    </span>
                                </template>
                            </label>
                            <div class="flex gap-2">
                                <input
                                    type="tel"
                                    x-model="businessForm.contact_phone"
                                    @input="markBusinessChanged()"
                                    :placeholder="getEffectiveBusinessValue('contact_phone') || '+352 123 456'"
                                    class="flex-1 px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                                />
                                <template x-if="businessForm.contact_phone">
                                    <button
                                        @click="resetToCompany('contact_phone')"
                                        class="px-3 py-2 text-xs text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 dark:text-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600"
                                        title="Reset to company value"
                                    >
                                        Reset
                                    </button>
                                </template>
                            </div>
                        </div>

                        <!-- Website (inheritable) -->
                        <div>
                            <label class="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Website
                                <template x-if="isFieldInherited('website')">
                                    <span class="ml-2 px-2 py-0.5 text-xs font-medium text-purple-600 bg-purple-100 rounded dark:bg-purple-900/30 dark:text-purple-400">
                                        Inherited
                                    </span>
                                </template>
                            </label>
                            <div class="flex gap-2">
                                <input
                                    type="url"
                                    x-model="businessForm.website"
                                    @input="markBusinessChanged()"
                                    :placeholder="getEffectiveBusinessValue('website') || 'https://'"
                                    class="flex-1 px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                                />
                                <template x-if="businessForm.website">
                                    <button
                                        @click="resetToCompany('website')"
                                        class="px-3 py-2 text-xs text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 dark:text-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600"
                                        title="Reset to company value"
                                    >
                                        Reset
                                    </button>
                                </template>
                            </div>
                        </div>

                        <!-- Business Address (inheritable) -->
                        <div>
                            <label class="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Business Address
                                <template x-if="isFieldInherited('business_address')">
                                    <span class="ml-2 px-2 py-0.5 text-xs font-medium text-purple-600 bg-purple-100 rounded dark:bg-purple-900/30 dark:text-purple-400">
                                        Inherited
                                    </span>
                                </template>
                            </label>
                            <div class="flex gap-2">
                                <textarea
                                    x-model="businessForm.business_address"
                                    @input="markBusinessChanged()"
                                    rows="2"
                                    :placeholder="getEffectiveBusinessValue('business_address') || 'Street, City, Country'"
                                    class="flex-1 px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                                ></textarea>
                                <template x-if="businessForm.business_address">
                                    <button
                                        @click="resetToCompany('business_address')"
                                        class="px-3 py-2 text-xs text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 dark:text-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600"
                                        title="Reset to company value"
                                    >
                                        Reset
                                    </button>
                                </template>
                            </div>
                        </div>

                        <!-- Tax Number (inheritable) -->
                        <div>
                            <label class="flex items-center text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Tax / VAT Number
                                <template x-if="isFieldInherited('tax_number')">
                                    <span class="ml-2 px-2 py-0.5 text-xs font-medium text-purple-600 bg-purple-100 rounded dark:bg-purple-900/30 dark:text-purple-400">
                                        Inherited
                                    </span>
                                </template>
                            </label>
                            <div class="flex gap-2">
                                <input
                                    type="text"
                                    x-model="businessForm.tax_number"
                                    @input="markBusinessChanged()"
                                    :placeholder="getEffectiveBusinessValue('tax_number') || 'LU12345678'"
                                    class="flex-1 px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                                />
                                <template x-if="businessForm.tax_number">
                                    <button
                                        @click="resetToCompany('tax_number')"
                                        class="px-3 py-2 text-xs text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 dark:text-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600"
                                        title="Reset to company value"
                                    >
                                        Reset
                                    </button>
                                </template>
                            </div>
                        </div>

                        <!-- Save Button -->
                        <div class="flex justify-end pt-4 border-t dark:border-gray-600">
                            <button
                                @click="saveBusinessInfo()"
                                :disabled="saving || !hasBusinessChanges"
                                class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50"
                            >
                                <span x-show="!saving">Save Business Info</span>
                                <span x-show="saving">Saving...</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Localization Settings -->
            <div x-show="activeSection === 'localization'" class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
                <div class="p-4 border-b dark:border-gray-700">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Localization</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Configure language and regional settings</p>
                </div>
                <div class="p-4">
                    <div class="space-y-6">
                        <!-- Currency (Read-only) -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Currency
                            </label>
                            <div class="flex items-center gap-3">
                                <input
                                    type="text"
                                    :value="settings?.localization?.platform_currency || 'EUR'"
                                    disabled
                                    class="w-32 px-4 py-2 text-sm text-gray-500 bg-gray-100 border border-gray-200 rounded-lg dark:text-gray-400 dark:bg-gray-700 dark:border-gray-600"
                                />
                                <span class="text-sm text-gray-500 dark:text-gray-400">
                                    Platform-wide currency (contact admin to change)
                                </span>
                            </div>
                        </div>

                        <!-- Storefront Locale -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Number & Currency Format
                            </label>
                            <select
                                x-model="localizationForm.storefront_locale"
                                @change="markLocalizationChanged()"
                                class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                            >
                                <option value="">Use platform default (<span x-text="settings?.localization?.platform_default_locale"></span>)</option>
                                <template x-for="locale in settings?.options?.supported_locales || []" :key="locale.code">
                                    <option :value="locale.code" x-text="`${locale.name} (${locale.example})`"></option>
                                </template>
                            </select>
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                Controls how prices and numbers are displayed (e.g., "29,99 EUR" vs "EUR29.99")
                            </p>
                        </div>

                        <!-- Dashboard Language -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Dashboard Language
                            </label>
                            <select
                                x-model="localizationForm.dashboard_language"
                                @change="markLocalizationChanged()"
                                class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                            >
                                <template x-for="lang in settings?.options?.supported_languages || []" :key="lang.code">
                                    <option :value="lang.code" x-text="lang.name"></option>
                                </template>
                            </select>
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                Language for the vendor dashboard interface
                            </p>
                        </div>

                        <!-- Default Content Language -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Default Content Language
                            </label>
                            <select
                                x-model="localizationForm.default_language"
                                @change="markLocalizationChanged()"
                                class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                            >
                                <template x-for="lang in settings?.options?.supported_languages || []" :key="lang.code">
                                    <option :value="lang.code" x-text="lang.name"></option>
                                </template>
                            </select>
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                Primary language for products, emails, and other content
                            </p>
                        </div>

                        <!-- Storefront Default Language -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Storefront Default Language
                            </label>
                            <select
                                x-model="localizationForm.storefront_language"
                                @change="markLocalizationChanged()"
                                class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                            >
                                <template x-for="lang in settings?.options?.supported_languages || []" :key="lang.code">
                                    <option :value="lang.code" x-text="lang.name"></option>
                                </template>
                            </select>
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                Default language shown to customers visiting your shop
                            </p>
                        </div>

                        <!-- Enabled Storefront Languages -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Enabled Storefront Languages
                            </label>
                            <div class="flex flex-wrap gap-3">
                                <template x-for="lang in settings?.options?.supported_languages || []" :key="lang.code">
                                    <label class="inline-flex items-center cursor-pointer">
                                        <input
                                            type="checkbox"
                                            :value="lang.code"
                                            :checked="localizationForm.storefront_languages?.includes(lang.code)"
                                            @change="toggleStorefrontLanguage(lang.code)"
                                            class="w-4 h-4 text-purple-600 bg-gray-100 border-gray-300 rounded focus:ring-purple-500 dark:focus:ring-purple-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                                        />
                                        <span class="ml-2 text-sm text-gray-700 dark:text-gray-300" x-text="lang.name"></span>
                                    </label>
                                </template>
                            </div>
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                Languages available in the storefront language selector
                            </p>
                        </div>

                        <!-- Save Button -->
                        <div class="flex justify-end pt-4 border-t dark:border-gray-600">
                            <button
                                @click="saveLocalizationSettings()"
                                :disabled="saving || !hasLocalizationChanges"
                                class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50"
                            >
                                <span x-show="!saving">Save Localization Settings</span>
                                <span x-show="saving">Saving...</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Marketplace Settings -->
            <div x-show="activeSection === 'marketplace'" class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
                <div class="p-4 border-b dark:border-gray-700">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Marketplace Integration</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Configure Letzshop marketplace feed settings</p>
                </div>
                <div class="p-4">
                    <div class="space-y-6">
                        <!-- Letzshop Vendor Info (read-only) -->
                        <template x-if="settings?.letzshop?.vendor_id">
                            <div class="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
                                <div class="flex items-center gap-2 mb-2">
                                    <span x-html="$icon('check-circle', 'w-5 h-5 text-green-600 dark:text-green-400')"></span>
                                    <span class="font-medium text-green-800 dark:text-green-300">Connected to Letzshop</span>
                                </div>
                                <p class="text-sm text-green-700 dark:text-green-400">
                                    Vendor ID: <span x-text="settings?.letzshop?.vendor_id"></span>
                                    <template x-if="settings?.letzshop?.vendor_slug">
                                        <span> (<span x-text="settings?.letzshop?.vendor_slug"></span>)</span>
                                    </template>
                                </p>
                                <template x-if="settings?.letzshop?.auto_sync_enabled">
                                    <p class="text-sm text-green-700 dark:text-green-400 mt-1">
                                        Auto-sync is enabled
                                    </p>
                                </template>
                            </div>
                        </template>

                        <!-- Letzshop CSV URLs -->
                        <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                            <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-4">Letzshop CSV Feed URLs</h4>
                            <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
                                Enter the URLs for your Letzshop product feeds in different languages.
                            </p>

                            <!-- French URL -->
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    French (FR)
                                </label>
                                <div class="flex gap-2">
                                    <input
                                        type="url"
                                        x-model="marketplaceForm.letzshop_csv_url_fr"
                                        @input="markMarketplaceChanged()"
                                        class="flex-1 px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                                        placeholder="https://..."
                                    />
                                    <button
                                        @click="testLetzshopUrl('fr')"
                                        :disabled="saving"
                                        class="px-3 py-2 text-sm text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 dark:text-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500"
                                    >
                                        Test
                                    </button>
                                </div>
                            </div>

                            <!-- English URL -->
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    English (EN)
                                </label>
                                <div class="flex gap-2">
                                    <input
                                        type="url"
                                        x-model="marketplaceForm.letzshop_csv_url_en"
                                        @input="markMarketplaceChanged()"
                                        class="flex-1 px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                                        placeholder="https://..."
                                    />
                                    <button
                                        @click="testLetzshopUrl('en')"
                                        :disabled="saving"
                                        class="px-3 py-2 text-sm text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 dark:text-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500"
                                    >
                                        Test
                                    </button>
                                </div>
                            </div>

                            <!-- German URL -->
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    German (DE)
                                </label>
                                <div class="flex gap-2">
                                    <input
                                        type="url"
                                        x-model="marketplaceForm.letzshop_csv_url_de"
                                        @input="markMarketplaceChanged()"
                                        class="flex-1 px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                                        placeholder="https://..."
                                    />
                                    <button
                                        @click="testLetzshopUrl('de')"
                                        :disabled="saving"
                                        class="px-3 py-2 text-sm text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 dark:text-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500"
                                    >
                                        Test
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Letzshop Feed Options -->
                        <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                            <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-4">Feed Options</h4>

                            <!-- Default Tax Rate -->
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Default VAT Rate
                                </label>
                                <select
                                    x-model="marketplaceForm.letzshop_default_tax_rate"
                                    @change="markMarketplaceChanged()"
                                    class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                                >
                                    <option :value="null">Not set</option>
                                    <template x-for="rate in settings?.options?.tax_rates || []" :key="rate.value">
                                        <option :value="rate.value" x-text="rate.label"></option>
                                    </template>
                                </select>
                                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                    Default VAT rate for products without explicit rate
                                </p>
                            </div>

                            <!-- Delivery Method -->
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Delivery Method
                                </label>
                                <select
                                    x-model="marketplaceForm.letzshop_delivery_method"
                                    @change="markMarketplaceChanged()"
                                    class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                                >
                                    <option value="">Not set</option>
                                    <template x-for="method in settings?.options?.delivery_methods || []" :key="method.value">
                                        <option :value="method.value" x-text="method.label"></option>
                                    </template>
                                </select>
                            </div>

                            <!-- Boost Sort -->
                            {# noqa: FE-008 - Decimal input with 0.1 step and custom @input handler, not suited for number_stepper #}
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Boost Sort Priority
                                </label>
                                <input
                                    type="number"
                                    step="0.1"
                                    min="0"
                                    max="10"
                                    x-model="marketplaceForm.letzshop_boost_sort"
                                    @input="markMarketplaceChanged()"
                                    class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                                    placeholder="0.0 - 10.0"
                                />
                                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                    Higher values boost product visibility (0.0 - 10.0)
                                </p>
                            </div>

                            <!-- Preorder Days -->
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Pre-order Lead Time (days)
                                </label>
                                <input
                                    type="number"
                                    min="0"
                                    x-model="marketplaceForm.letzshop_preorder_days"
                                    @input="markMarketplaceChanged()"
                                    class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                                    placeholder="0"
                                />
                            </div>
                        </div>

                        <!-- Save Button -->
                        <div class="flex justify-end pt-4 border-t dark:border-gray-600">
                            <button
                                @click="saveMarketplaceSettings()"
                                :disabled="saving || !hasMarketplaceChanges"
                                class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50"
                            >
                                <span x-show="!saving">Save Marketplace Settings</span>
                                <span x-show="saving">Saving...</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Invoice Settings -->
            <div x-show="activeSection === 'invoices'" class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
                <div class="p-4 border-b dark:border-gray-700">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Invoice Settings</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Configure invoice generation and billing details</p>
                </div>
                <div class="p-4">
                    <template x-if="settings?.invoice_settings">
                        <div class="space-y-6">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <!-- Company Name -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Company Name</label>
                                    <p class="text-sm text-gray-600 dark:text-gray-400" x-text="settings?.invoice_settings?.company_name || '-'"></p>
                                </div>
                                <!-- VAT Number -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">VAT Number</label>
                                    <p class="text-sm text-gray-600 dark:text-gray-400" x-text="settings?.invoice_settings?.vat_number || '-'"></p>
                                </div>
                                <!-- Address -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Address</label>
                                    <p class="text-sm text-gray-600 dark:text-gray-400">
                                        <span x-text="settings?.invoice_settings?.company_address || '-'"></span>
                                        <template x-if="settings?.invoice_settings?.company_postal_code || settings?.invoice_settings?.company_city">
                                            <br/><span x-text="`${settings?.invoice_settings?.company_postal_code || ''} ${settings?.invoice_settings?.company_city || ''}`"></span>
                                        </template>
                                    </p>
                                </div>
                                <!-- Invoice Prefix -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Invoice Prefix</label>
                                    <p class="text-sm text-gray-600 dark:text-gray-400" x-text="settings?.invoice_settings?.invoice_prefix || '-'"></p>
                                </div>
                                <!-- Default VAT Rate -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Default VAT Rate</label>
                                    <p class="text-sm text-gray-600 dark:text-gray-400" x-text="settings?.invoice_settings?.default_vat_rate ? settings.invoice_settings.default_vat_rate + '%' : '-'"></p>
                                </div>
                                <!-- Payment Terms -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Payment Terms</label>
                                    <p class="text-sm text-gray-600 dark:text-gray-400" x-text="settings?.invoice_settings?.payment_terms || '-'"></p>
                                </div>
                            </div>

                            <!-- Bank Details -->
                            <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                                <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-3">Bank Details</h4>
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">Bank</label>
                                        <p class="text-sm text-gray-800 dark:text-gray-200" x-text="settings?.invoice_settings?.bank_name || '-'"></p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">IBAN</label>
                                        <p class="text-sm text-gray-800 dark:text-gray-200" x-text="settings?.invoice_settings?.bank_iban || '-'"></p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">BIC</label>
                                        <p class="text-sm text-gray-800 dark:text-gray-200" x-text="settings?.invoice_settings?.bank_bic || '-'"></p>
                                    </div>
                                </div>
                            </div>

                            <p class="text-sm text-gray-500 dark:text-gray-400 italic">
                                Contact support to update invoice settings.
                            </p>
                        </div>
                    </template>
                    <template x-if="!settings?.invoice_settings">
                        <div class="text-center py-8">
                            <span x-html="$icon('document-text', 'w-12 h-12 mx-auto text-gray-400 dark:text-gray-500')"></span>
                            <p class="mt-2 text-gray-500 dark:text-gray-400">No invoice settings configured</p>
                            <p class="text-sm text-gray-400 dark:text-gray-500">Contact support to set up invoicing.</p>
                        </div>
                    </template>
                </div>
            </div>

            <!-- Branding Settings -->
            <div x-show="activeSection === 'branding'" class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
                <div class="p-4 border-b dark:border-gray-700">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Branding & Theme</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Customize your storefront appearance</p>
                </div>
                <div class="p-4">
                    <template x-if="settings?.theme_settings">
                        <div class="space-y-6">
                            <!-- Theme Name -->
                            <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                                <div>
                                    <p class="font-medium text-gray-700 dark:text-gray-300">Active Theme</p>
                                    <p class="text-sm text-gray-500 dark:text-gray-400" x-text="settings?.theme_settings?.theme_name || 'Default'"></p>
                                </div>
                                <span class="px-3 py-1 text-sm font-semibold text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
                                    Active
                                </span>
                            </div>

                            <!-- Logos -->
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <template x-if="settings?.theme_settings?.logo_url">
                                    <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                                        <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Logo</p>
                                        <img :src="settings?.theme_settings?.logo_url" alt="Logo" class="max-h-16 object-contain" />
                                    </div>
                                </template>
                                <template x-if="settings?.theme_settings?.favicon_url">
                                    <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                                        <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Favicon</p>
                                        <img :src="settings?.theme_settings?.favicon_url" alt="Favicon" class="max-h-8 object-contain" />
                                    </div>
                                </template>
                            </div>

                            <!-- Layout Style -->
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Layout Style</label>
                                    <p class="text-sm text-gray-600 dark:text-gray-400" x-text="settings?.theme_settings?.layout_style || 'Default'"></p>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Header Style</label>
                                    <p class="text-sm text-gray-600 dark:text-gray-400" x-text="settings?.theme_settings?.header_style || 'Default'"></p>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Product Card Style</label>
                                    <p class="text-sm text-gray-600 dark:text-gray-400" x-text="settings?.theme_settings?.product_card_style || 'Default'"></p>
                                </div>
                            </div>

                            <!-- Social Links -->
                            <template x-if="settings?.theme_settings?.social_links && Object.keys(settings.theme_settings.social_links).length > 0">
                                <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Social Links</p>
                                    <div class="flex flex-wrap gap-3">
                                        <template x-for="(url, platform) in settings?.theme_settings?.social_links || {}" :key="platform">
                                            <a :href="url" target="_blank" class="px-3 py-1 text-sm bg-white dark:bg-gray-600 rounded border dark:border-gray-500 hover:bg-gray-100 dark:hover:bg-gray-500">
                                                <span x-text="platform"></span>
                                            </a>
                                        </template>
                                    </div>
                                </div>
                            </template>

                            <p class="text-sm text-gray-500 dark:text-gray-400 italic">
                                Theme customization coming soon. Contact support for custom branding requests.
                            </p>
                        </div>
                    </template>
                    <template x-if="!settings?.theme_settings">
                        <div class="text-center py-8">
                            <span x-html="$icon('color-swatch', 'w-12 h-12 mx-auto text-gray-400 dark:text-gray-500')"></span>
                            <p class="mt-2 text-gray-500 dark:text-gray-400">Using default theme</p>
                            <p class="text-sm text-gray-400 dark:text-gray-500">Contact support for custom branding.</p>
                        </div>
                    </template>
                </div>
            </div>

            <!-- Email Settings -->
            <div x-show="activeSection === 'email'" class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
                <div class="p-4 border-b dark:border-gray-700">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Email Settings</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Configure your email sending settings for customer communications</p>
                </div>
                <div class="p-4">
                    <!-- Loading state for email settings -->
                    <div x-show="emailSettingsLoading" class="flex justify-center py-8">
                        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600"></div>
                    </div>

                    <div x-show="!emailSettingsLoading" class="space-y-6">
                        <!-- Configuration Status Banner -->
                        <template x-if="!emailSettings?.is_configured">
                            <div class="p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
                                <div class="flex items-start gap-3">
                                    <span x-html="$icon('exclamation-triangle', 'w-5 h-5 text-yellow-600 dark:text-yellow-400 flex-shrink-0 mt-0.5')"></span>
                                    <div>
                                        <p class="font-medium text-yellow-800 dark:text-yellow-300">Email not configured</p>
                                        <p class="text-sm text-yellow-700 dark:text-yellow-400 mt-1">
                                            Configure your SMTP settings to send emails to your customers (order confirmations, shipping updates, etc.)
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </template>

                        <template x-if="emailSettings?.is_configured && !emailSettings?.is_verified">
                            <div class="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                                <div class="flex items-start gap-3">
                                    <span x-html="$icon('information-circle', 'w-5 h-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5')"></span>
                                    <div>
                                        <p class="font-medium text-blue-800 dark:text-blue-300">Email configured but not verified</p>
                                        <p class="text-sm text-blue-700 dark:text-blue-400 mt-1">
                                            Send a test email to verify your settings are working correctly.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </template>

                        <template x-if="emailSettings?.is_configured && emailSettings?.is_verified">
                            <div class="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
                                <div class="flex items-start gap-3">
                                    <span x-html="$icon('check-circle', 'w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5')"></span>
                                    <div>
                                        <p class="font-medium text-green-800 dark:text-green-300">Email configured and verified</p>
                                        <p class="text-sm text-green-700 dark:text-green-400 mt-1">
                                            Your email settings are ready. Emails will be sent from <span class="font-medium" x-text="emailForm.from_email"></span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </template>

                        <!-- Sender Identity -->
                        <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                            <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-4">Sender Identity</h4>
                            <div class="space-y-4">
                                <!-- From Email -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        From Email <span class="text-red-500">*</span>
                                    </label>
                                    <input
                                        type="email"
                                        x-model="emailForm.from_email"
                                        @input="markEmailChanged()"
                                        class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                                        placeholder="orders@yourstore.com"
                                    />
                                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                        Email address that customers will see in their inbox
                                    </p>
                                </div>

                                <!-- From Name -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        From Name <span class="text-red-500">*</span>
                                    </label>
                                    <input
                                        type="text"
                                        x-model="emailForm.from_name"
                                        @input="markEmailChanged()"
                                        class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                                        placeholder="Your Store Name"
                                    />
                                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                        Name that appears as the sender (e.g., "Your Store Name")
                                    </p>
                                </div>

                                <!-- Reply-To Email -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Reply-To Email
                                    </label>
                                    <input
                                        type="email"
                                        x-model="emailForm.reply_to_email"
                                        @input="markEmailChanged()"
                                        class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                                        placeholder="support@yourstore.com"
                                    />
                                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                        Optional: Where replies should go (defaults to From Email)
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- Email Provider -->
                        <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                            <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-4">Email Provider</h4>
                            <div class="space-y-4">
                                <!-- Provider Selection -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Provider
                                    </label>
                                    <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                                        <template x-for="provider in emailProviders" :key="provider.code">
                                            <button
                                                type="button"
                                                @click="provider.available ? (emailForm.provider = provider.code, markEmailChanged()) : null"
                                                :class="emailForm.provider === provider.code
                                                    ? 'border-purple-500 bg-purple-50 dark:bg-purple-900/30'
                                                    : provider.available
                                                        ? 'border-gray-200 dark:border-gray-600 hover:border-purple-300'
                                                        : 'border-gray-200 dark:border-gray-600 opacity-50 cursor-not-allowed'"
                                                class="relative p-3 border-2 rounded-lg transition-colors"
                                            >
                                                <div class="text-sm font-medium text-gray-700 dark:text-gray-300" x-text="provider.name"></div>
                                                <div class="text-xs text-gray-500 dark:text-gray-400 mt-1" x-text="provider.description"></div>
                                                <template x-if="!provider.available">
                                                    <div class="absolute top-1 right-1">
                                                        <span class="px-1.5 py-0.5 text-xs font-medium text-purple-600 bg-purple-100 rounded dark:bg-purple-900/50 dark:text-purple-400">
                                                            Business+
                                                        </span>
                                                    </div>
                                                </template>
                                                <template x-if="emailForm.provider === provider.code">
                                                    <div class="absolute top-1 right-1">
                                                        <span x-html="$icon('check-circle', 'w-5 h-5 text-purple-600 dark:text-purple-400')"></span>
                                                    </div>
                                                </template>
                                            </button>
                                        </template>
                                    </div>
                                </div>

                                <!-- SMTP Settings -->
                                <template x-if="emailForm.provider === 'smtp'">
                                    <div class="space-y-4 pt-4 border-t dark:border-gray-600">
                                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                            <!-- SMTP Host -->
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                                    SMTP Host <span class="text-red-500">*</span>
                                                </label>
                                                <input
                                                    type="text"
                                                    x-model="emailForm.smtp_host"
                                                    @input="markEmailChanged()"
                                                    class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                                                    placeholder="smtp.yourprovider.com"
                                                />
                                            </div>

                                            <!-- SMTP Port -->
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                                    SMTP Port <span class="text-red-500">*</span>
                                                </label>
                                                <input
                                                    type="number"
                                                    x-model.number="emailForm.smtp_port"
                                                    @input="markEmailChanged()"
                                                    class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                                                    placeholder="587"
                                                />
                                            </div>
                                        </div>

                                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                            <!-- SMTP Username -->
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                                    SMTP Username <span class="text-red-500">*</span>
                                                </label>
                                                <input
                                                    type="text"
                                                    x-model="emailForm.smtp_username"
                                                    @input="markEmailChanged()"
                                                    class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                                                    placeholder="your-username"
                                                />
                                            </div>

                                            <!-- SMTP Password -->
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                                    SMTP Password <span class="text-red-500">*</span>
                                                </label>
                                                <input
                                                    type="password"
                                                    x-model="emailForm.smtp_password"
                                                    @input="markEmailChanged()"
                                                    class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                                                    :placeholder="emailSettings?.smtp_password_set ? '••••••••' : 'Enter password'"
                                                />
                                            </div>
                                        </div>

                                        <!-- TLS/SSL Options -->
                                        <div class="flex items-center gap-6">
                                            <label class="flex items-center cursor-pointer">
                                                <input
                                                    type="checkbox"
                                                    x-model="emailForm.smtp_use_tls"
                                                    @change="markEmailChanged()"
                                                    class="w-4 h-4 text-purple-600 bg-gray-100 border-gray-300 rounded focus:ring-purple-500"
                                                />
                                                <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Use TLS (STARTTLS)</span>
                                            </label>
                                            <label class="flex items-center cursor-pointer">
                                                <input
                                                    type="checkbox"
                                                    x-model="emailForm.smtp_use_ssl"
                                                    @change="markEmailChanged()"
                                                    class="w-4 h-4 text-purple-600 bg-gray-100 border-gray-300 rounded focus:ring-purple-500"
                                                />
                                                <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Use SSL (port 465)</span>
                                            </label>
                                        </div>
                                    </div>
                                </template>

                                <!-- SendGrid Settings -->
                                <template x-if="emailForm.provider === 'sendgrid'">
                                    <div class="space-y-4 pt-4 border-t dark:border-gray-600">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                                SendGrid API Key <span class="text-red-500">*</span>
                                            </label>
                                            <input
                                                type="password"
                                                x-model="emailForm.sendgrid_api_key"
                                                @input="markEmailChanged()"
                                                class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                                                :placeholder="emailSettings?.sendgrid_api_key_set ? '••••••••' : 'SG.xxxxx'"
                                            />
                                        </div>
                                    </div>
                                </template>

                                <!-- Mailgun Settings -->
                                <template x-if="emailForm.provider === 'mailgun'">
                                    <div class="space-y-4 pt-4 border-t dark:border-gray-600">
                                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                                    Mailgun API Key <span class="text-red-500">*</span>
                                                </label>
                                                <input
                                                    type="password"
                                                    x-model="emailForm.mailgun_api_key"
                                                    @input="markEmailChanged()"
                                                    class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                                                    :placeholder="emailSettings?.mailgun_api_key_set ? '••••••••' : 'key-xxxxx'"
                                                />
                                            </div>
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                                    Mailgun Domain <span class="text-red-500">*</span>
                                                </label>
                                                <input
                                                    type="text"
                                                    x-model="emailForm.mailgun_domain"
                                                    @input="markEmailChanged()"
                                                    class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                                                    placeholder="mg.yourdomain.com"
                                                />
                                            </div>
                                        </div>
                                    </div>
                                </template>

                                <!-- SES Settings -->
                                <template x-if="emailForm.provider === 'ses'">
                                    <div class="space-y-4 pt-4 border-t dark:border-gray-600">
                                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                                    AWS Access Key ID <span class="text-red-500">*</span>
                                                </label>
                                                <input
                                                    type="text"
                                                    x-model="emailForm.ses_access_key_id"
                                                    @input="markEmailChanged()"
                                                    class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                                                    placeholder="AKIAIOSFODNN7EXAMPLE"
                                                />
                                            </div>
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                                    AWS Secret Access Key <span class="text-red-500">*</span>
                                                </label>
                                                <input
                                                    type="password"
                                                    x-model="emailForm.ses_secret_access_key"
                                                    @input="markEmailChanged()"
                                                    class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                                                    :placeholder="emailSettings?.ses_access_key_id_set ? '••••••••' : 'Enter secret'"
                                                />
                                            </div>
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                                AWS Region
                                            </label>
                                            <select
                                                x-model="emailForm.ses_region"
                                                @change="markEmailChanged()"
                                                class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                                            >
                                                <option value="eu-west-1">EU (Ireland)</option>
                                                <option value="eu-central-1">EU (Frankfurt)</option>
                                                <option value="us-east-1">US East (N. Virginia)</option>
                                                <option value="us-west-2">US West (Oregon)</option>
                                            </select>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>

                        <!-- Signature (Optional) -->
                        <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                            <h4 class="font-medium text-gray-700 dark:text-gray-300 mb-4">Email Signature (Optional)</h4>
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Plain Text Signature
                                    </label>
                                    <textarea
                                        x-model="emailForm.signature_text"
                                        @input="markEmailChanged()"
                                        rows="3"
                                        class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                                        placeholder="Best regards,&#10;The Your Store Team"
                                    ></textarea>
                                </div>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="flex flex-col sm:flex-row justify-between gap-4 pt-4 border-t dark:border-gray-600">
                            <!-- Test Email -->
                            <div class="flex items-center gap-2">
                                <input
                                    type="email"
                                    x-model="testEmailAddress"
                                    class="px-4 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
                                    placeholder="test@example.com"
                                />
                                <button
                                    @click="sendTestEmail()"
                                    :disabled="!emailSettings?.is_configured || sendingTestEmail || !testEmailAddress"
                                    class="px-4 py-2 text-sm font-medium text-purple-600 bg-purple-100 rounded-lg hover:bg-purple-200 disabled:opacity-50 dark:bg-purple-900/30 dark:text-purple-400"
                                >
                                    <span x-show="!sendingTestEmail">Send Test</span>
                                    <span x-show="sendingTestEmail">Sending...</span>
                                </button>
                            </div>

                            <!-- Save Button -->
                            <button
                                @click="saveEmailSettings()"
                                :disabled="saving || !hasEmailChanges"
                                class="px-6 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50"
                            >
                                <span x-show="!saving">Save Email Settings</span>
                                <span x-show="saving">Saving...</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Domains Settings -->
            <div x-show="activeSection === 'domains'" class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
                <div class="p-4 border-b dark:border-gray-700">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Domains</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Manage your storefront domains</p>
                </div>
                <div class="p-4">
                    <div class="space-y-4">
                        <!-- Default Subdomain -->
                        <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                            <div>
                                <p class="font-medium text-gray-700 dark:text-gray-300">Default Subdomain</p>
                                <p class="text-sm text-purple-600 dark:text-purple-400" x-text="settings?.default_subdomain"></p>
                            </div>
                            <span class="px-3 py-1 text-sm font-semibold text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
                                Active
                            </span>
                        </div>

                        <!-- Custom Domains -->
                        <template x-if="settings?.domains?.length > 0">
                            <div class="space-y-3">
                                <h4 class="font-medium text-gray-700 dark:text-gray-300">Custom Domains</h4>
                                <template x-for="domain in settings?.domains" :key="domain.id">
                                    <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                                        <div>
                                            <p class="font-medium text-gray-700 dark:text-gray-300" x-text="domain.domain"></p>
                                            <div class="flex items-center gap-2 mt-1">
                                                <span
                                                    :class="domain.is_verified
                                                        ? 'text-green-600 dark:text-green-400'
                                                        : 'text-yellow-600 dark:text-yellow-400'"
                                                    class="text-xs"
                                                    x-text="domain.is_verified ? 'Verified' : 'Pending verification'"
                                                ></span>
                                                <span class="text-gray-300 dark:text-gray-600">|</span>
                                                <span
                                                    :class="domain.ssl_status === 'active'
                                                        ? 'text-green-600 dark:text-green-400'
                                                        : 'text-yellow-600 dark:text-yellow-400'"
                                                    class="text-xs"
                                                    x-text="domain.ssl_status === 'active' ? 'SSL Active' : 'SSL ' + (domain.ssl_status || 'pending')"
                                                ></span>
                                            </div>
                                        </div>
                                        <div class="flex items-center gap-2">
                                            <template x-if="domain.is_primary">
                                                <span class="px-2 py-1 text-xs font-medium text-purple-600 bg-purple-100 rounded dark:bg-purple-900/30 dark:text-purple-400">
                                                    Primary
                                                </span>
                                            </template>
                                            <span
                                                :class="domain.is_active
                                                    ? 'px-3 py-1 text-sm font-semibold text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100'
                                                    : 'px-3 py-1 text-sm font-semibold text-gray-700 bg-gray-200 rounded-full dark:bg-gray-600 dark:text-gray-100'"
                                                x-text="domain.is_active ? 'Active' : 'Inactive'"
                                            ></span>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </template>

                        <div class="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                            <div class="flex items-start gap-2">
                                <span x-html="$icon('information-circle', 'w-5 h-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5')"></span>
                                <div>
                                    <p class="text-sm text-blue-800 dark:text-blue-300">
                                        Need a custom domain? Contact support to set up your own domain with SSL.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- API & Payments Settings -->
            <div x-show="activeSection === 'api'" class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
                <div class="p-4 border-b dark:border-gray-700">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">API & Payments</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Payment integrations and API access</p>
                </div>
                <div class="p-4">
                    <div class="space-y-6">
                        <!-- Stripe Integration -->
                        <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                            <div class="flex items-center gap-3 mb-4">
                                <div class="w-10 h-10 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center">
                                    <span x-html="$icon('credit-card', 'w-6 h-6 text-purple-600 dark:text-purple-400')"></span>
                                </div>
                                <div>
                                    <h4 class="font-medium text-gray-700 dark:text-gray-300">Stripe</h4>
                                    <p class="text-sm text-gray-500 dark:text-gray-400">Payment processing</p>
                                </div>
                            </div>

                            <template x-if="settings?.stripe_info?.has_stripe_customer">
                                <div class="space-y-3">
                                    <div class="flex items-center gap-2">
                                        <span x-html="$icon('check-circle', 'w-5 h-5 text-green-600 dark:text-green-400')"></span>
                                        <span class="text-sm text-green-700 dark:text-green-300">Connected</span>
                                    </div>
                                    <div>
                                        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Customer ID</label>
                                        <p class="text-sm font-mono text-gray-700 dark:text-gray-300" x-text="settings?.stripe_info?.customer_id_masked"></p>
                                    </div>
                                </div>
                            </template>
                            <template x-if="!settings?.stripe_info?.has_stripe_customer">
                                <div class="flex items-center gap-2">
                                    <span x-html="$icon('x-circle', 'w-5 h-5 text-gray-400 dark:text-gray-500')"></span>
                                    <span class="text-sm text-gray-500 dark:text-gray-400">Not connected</span>
                                </div>
                            </template>
                        </div>

                        <!-- Letzshop API (if credentials exist) -->
                        <template x-if="settings?.letzshop?.has_credentials">
                            <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                                <div class="flex items-center gap-3 mb-4">
                                    <div class="w-10 h-10 bg-orange-100 dark:bg-orange-900/30 rounded-lg flex items-center justify-center">
                                        <span x-html="$icon('shopping-cart', 'w-6 h-6 text-orange-600 dark:text-orange-400')"></span>
                                    </div>
                                    <div>
                                        <h4 class="font-medium text-gray-700 dark:text-gray-300">Letzshop API</h4>
                                        <p class="text-sm text-gray-500 dark:text-gray-400">Marketplace integration</p>
                                    </div>
                                </div>
                                <div class="flex items-center gap-2">
                                    <span x-html="$icon('check-circle', 'w-5 h-5 text-green-600 dark:text-green-400')"></span>
                                    <span class="text-sm text-green-700 dark:text-green-300">Credentials configured</span>
                                </div>
                            </div>
                        </template>

                        <div class="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                            <div class="flex items-start gap-2">
                                <span x-html="$icon('information-circle', 'w-5 h-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5')"></span>
                                <div>
                                    <p class="text-sm text-blue-800 dark:text-blue-300">
                                        API keys and payment credentials are managed securely. Contact support for changes.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Notification Settings -->
            <div x-show="activeSection === 'notifications'" class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
                <div class="p-4 border-b dark:border-gray-700">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Notification Preferences</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Control how you receive notifications</p>
                </div>
                <div class="p-4">
                    <div class="space-y-4">
                        <!-- Email Notifications -->
                        <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                            <div>
                                <p class="font-medium text-gray-700 dark:text-gray-300">Email Notifications</p>
                                <p class="text-sm text-gray-500 dark:text-gray-400">Receive important updates via email</p>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" x-model="notificationForm.email_notifications" class="sr-only peer" />
                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-500 peer-checked:bg-purple-600"></div>
                            </label>
                        </div>

                        <!-- Order Notifications -->
                        <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                            <div>
                                <p class="font-medium text-gray-700 dark:text-gray-300">Order Notifications</p>
                                <p class="text-sm text-gray-500 dark:text-gray-400">Get notified when you receive new orders</p>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" x-model="notificationForm.order_notifications" class="sr-only peer" />
                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-500 peer-checked:bg-purple-600"></div>
                            </label>
                        </div>

                        <!-- Marketing Emails -->
                        <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                            <div>
                                <p class="font-medium text-gray-700 dark:text-gray-300">Marketing Emails</p>
                                <p class="text-sm text-gray-500 dark:text-gray-400">Receive tips, updates, and promotional content</p>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" x-model="notificationForm.marketing_emails" class="sr-only peer" />
                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-500 peer-checked:bg-purple-600"></div>
                            </label>
                        </div>

                        <p class="text-sm text-gray-500 dark:text-gray-400 italic">
                            Note: Notification settings are currently display-only. Full notification management coming soon.
                        </p>
                    </div>
                </div>
            </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script src="{{ url_for('static', path='vendor/js/settings.js') }}"></script>
{% endblock %}