@section('page-title', 'Settings')

<div class="p-6">
    <div class="max-w-7xl mx-auto space-y-6">

        {{-- Success Message --}}
        @if (session()->has('message'))
            <div class="p-4 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 rounded-lg">
                <p class="text-sm text-green-700 dark:text-green-300">{{ session('message') }}</p>
            </div>
        @endif

        {{-- Website Configuration Section --}}
        <div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
            <div class="p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-6">Website Configuration</h2>

                <form wire:submit.prevent="saveSiteConfig">

                    {{-- 2-Column Grid Layout (stacks on mobile) --}}
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                        {{-- LEFT COLUMN --}}
                        <div class="space-y-6">

                            {{-- Company Name --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Company Name
                                </label>
                                <input
                                    type="text"
                                    wire:model="name"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                                    placeholder="GB Secure"
                                />
                                @error('name') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                            </div>

                            {{-- Company Description --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Company Description
                                </label>
                                <textarea
                                    wire:model="descr"
                                    rows="3"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                                    placeholder="Gengbiz Hologram Security Sticker System uses advanced tamper-proof holograms..."
                                ></textarea>
                                @error('descr') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                            </div>

                            {{-- Email Address --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Email Address
                                </label>
                                <input
                                    type="email"
                                    wire:model="email"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                                    placeholder="webmaster@gengbiz.my"
                                />
                                @error('email') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                            </div>

                            {{-- Timezone --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Server Timezone
                                </label>
                                <select
                                    wire:model="timezone"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                                >
                                    @foreach(timezone_identifiers_list() as $tz)
                                        <option value="{{ $tz }}">{{ $tz }}</option>
                                    @endforeach
                                </select>
                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                    All timestamps will be displayed in this timezone, even on offshore servers.
                                </p>
                                @error('timezone') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                            </div>

                            {{-- Company Logo --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Company Logo
                                </label>
                                @if($logoPath)
                                    <div class="mb-2">
                                        <img src="{{ asset('images/' . $logoPath) }}" alt="Company Logo" class="mb-2" style="max-width: 200px; height: auto;">
                                        <div class="flex items-center gap-2">
                                            <span class="text-sm text-gray-600 dark:text-gray-400">{{ $logoPath }}</span>
                                            <button
                                                type="button"
                                                wire:click="deleteLogo"
                                                wire:confirm="Are you sure you want to delete this logo?"
                                                class="text-red-500 hover:text-red-700 text-xs font-semibold"
                                            >
                                                Delete
                                            </button>
                                        </div>
                                    </div>
                                @endif
                                <input
                                    type="file"
                                    wire:model="logo"
                                    accept="image/*"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                                />
                                @error('logo') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror

                                <div class="grid grid-cols-2 gap-4 mt-3">
                                    <div>
                                        <label class="block text-xs text-gray-600 dark:text-gray-400 mb-1">Logo Width</label>
                                        <input
                                            type="number"
                                            wire:model="width"
                                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                                            placeholder="120"
                                        />
                                    </div>
                                    <div>
                                        <label class="block text-xs text-gray-600 dark:text-gray-400 mb-1">Logo Height</label>
                                        <input
                                            type="number"
                                            wire:model="height"
                                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                                            placeholder="120"
                                        />
                                    </div>
                                </div>
                            </div>

                            {{-- QR Image (Hologram Sample for Step 2) --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    QR/Hologram Sample Image
                                </label>
                                <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">Displayed in Step 2 to show users how to find their PIN code (recommended size: 500x250px)</p>
                                @if($qrImagePath)
                                    <div class="mb-2">
                                        <img src="{{ asset('images/' . $qrImagePath) }}" alt="QR Sample" class="w-full max-w-xs rounded-lg border-2 border-gray-200 mb-2">
                                        <div class="flex items-center gap-2">
                                            <span class="text-sm text-gray-600 dark:text-gray-400">{{ $qrImagePath }}</span>
                                            <button
                                                type="button"
                                                wire:click="deleteQrImage"
                                                wire:confirm="Are you sure you want to delete this image?"
                                                class="text-red-500 hover:text-red-700 text-xs font-semibold"
                                            >
                                                Delete
                                            </button>
                                        </div>
                                    </div>
                                @endif
                                <input
                                    type="file"
                                    wire:model="qrImage"
                                    accept="image/*"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                                />
                                @error('qrImage') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror

                                <div class="grid grid-cols-2 gap-4 mt-3">
                                    <div>
                                        <label class="block text-xs text-gray-600 dark:text-gray-400 mb-1">Image Width</label>
                                        <input
                                            type="number"
                                            wire:model="qrWidth"
                                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                                            placeholder="500"
                                        />
                                    </div>
                                    <div>
                                        <label class="block text-xs text-gray-600 dark:text-gray-400 mb-1">Image Height</label>
                                        <input
                                            type="number"
                                            wire:model="qrHeight"
                                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                                            placeholder="250"
                                        />
                                    </div>
                                </div>
                            </div>

                            {{-- BRANDING SECTION --}}
                            <div class="border-t-2 border-gray-200 dark:border-gray-700 pt-6 mt-6">
                                <h3 class="text-md font-semibold text-gray-900 dark:text-gray-100 mb-4">Branding & SEO</h3>

                                {{-- Favicon --}}
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Favicon (Site Icon)
                                    </label>
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">Upload favicon for browser tabs (recommended: 32x32px or 64x64px .png/.ico)</p>
                                    @if($faviconPath)
                                        <div class="mb-2">
                                            <img src="{{ asset('images/' . $faviconPath) }}" alt="Favicon" class="w-8 h-8 border border-gray-200 mb-2">
                                            <div class="flex items-center gap-2">
                                                <span class="text-sm text-gray-600 dark:text-gray-400">{{ $faviconPath }}</span>
                                                <button
                                                    type="button"
                                                    wire:click="deleteFavicon"
                                                    wire:confirm="Are you sure you want to delete the favicon?"
                                                    class="text-red-500 hover:text-red-700 text-xs font-semibold"
                                                >
                                                    Delete
                                                </button>
                                            </div>
                                        </div>
                                    @endif
                                    <input
                                        type="file"
                                        wire:model="favicon"
                                        accept="image/*,.ico"
                                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                                    />
                                    @error('favicon') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                </div>

                                {{-- Site Name --}}
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Site Name
                                    </label>
                                    <input
                                        type="text"
                                        wire:model="siteName"
                                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                                        placeholder="TrueID"
                                    />
                                    @error('siteName') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Displayed in browser title and throughout the site</p>
                                </div>

                                {{-- Footer Text --}}
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Footer Text
                                    </label>
                                    <textarea
                                        wire:model="footerText"
                                        rows="3"
                                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                                        placeholder="© 2025 Your Company. All rights reserved."
                                    ></textarea>
                                    @error('footerText') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Text displayed at the bottom of your website</p>
                                </div>
                            </div>

                        </div>{{-- End LEFT COLUMN --}}

                        {{-- RIGHT COLUMN --}}
                        <div class="space-y-6">

                            {{-- Chatbot Icon --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Chatbot Icon
                                </label>
                                <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">Upload icon for the chatbot avatar (recommended size: 80x80px)</p>
                                @if($chatbotIconPath)
                                    <div class="mb-2">
                                        <img src="{{ asset('images/' . $chatbotIconPath) }}" alt="Chatbot Icon" class="w-16 h-16 rounded-full border-2 border-gray-200 mb-2">
                                        <div class="flex items-center gap-2">
                                            <span class="text-sm text-gray-600 dark:text-gray-400">{{ $chatbotIconPath }}</span>
                                            <button
                                                type="button"
                                                wire:click="deleteChatbotIcon"
                                                wire:confirm="Are you sure you want to delete this icon?"
                                                class="text-red-500 hover:text-red-700 text-xs font-semibold"
                                            >
                                                Delete
                                            </button>
                                        </div>
                                    </div>
                                @endif
                                <input
                                    type="file"
                                    wire:model="chatbotIcon"
                                    accept="image/*"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                                />
                                @error('chatbotIcon') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                            </div>

                            {{-- Contest Promotion Image --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Contest Promotion Image
                                </label>
                                <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">Displayed when code is already verified (recommended size: 600x400px)</p>
                                @if($contestPromotionImagePath)
                                    <div class="mb-2">
                                        <img src="{{ asset('images/' . $contestPromotionImagePath) }}" alt="Contest Promotion" class="w-full max-w-xs rounded-lg border-2 border-gray-200 mb-2">
                                        <div class="flex items-center gap-2">
                                            <span class="text-sm text-gray-600 dark:text-gray-400">{{ $contestPromotionImagePath }}</span>
                                            <button
                                                type="button"
                                                wire:click="deleteContestPromotionImage"
                                                wire:confirm="Are you sure you want to delete this image?"
                                                class="text-red-500 hover:text-red-700 text-xs font-semibold"
                                            >
                                                Delete
                                            </button>
                                        </div>
                                    </div>
                                @endif
                                <input
                                    type="file"
                                    wire:model="contestPromotionImage"
                                    accept="image/*"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                                />
                                @error('contestPromotionImage') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                            </div>

                            {{-- Lucky Draw Winner Image --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Lucky Draw Winner Image
                                </label>
                                <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">Displayed when customer wins lucky draw (recommended size: 600x400px)</p>
                                @if($luckyDrawImagePath)
                                    <div class="mb-2">
                                        <img src="{{ asset('images/' . $luckyDrawImagePath) }}" alt="Lucky Draw Winner" class="w-full max-w-xs rounded-lg border-2 border-gray-200 mb-2">
                                        <div class="flex items-center gap-2">
                                            <span class="text-sm text-gray-600 dark:text-gray-400">{{ $luckyDrawImagePath }}</span>
                                            <button
                                                type="button"
                                                wire:click="deleteLuckyDrawImage"
                                                wire:confirm="Are you sure you want to delete this image?"
                                                class="text-red-500 hover:text-red-700 text-xs font-semibold"
                                            >
                                                Delete
                                            </button>
                                        </div>
                                    </div>
                                @endif
                                <input
                                    type="file"
                                    wire:model="luckyDrawImage"
                                    accept="image/*"
                                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                                />
                                @error('luckyDrawImage') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                            </div>

                            {{-- Lucky Winner Modal Content --}}
                            <div class="border-t-2 border-gray-200 dark:border-gray-700 pt-6 mt-6">
                                <h3 class="text-md font-semibold text-gray-900 dark:text-gray-100 mb-4">Lucky Winner Popup Modal Content</h3>
                                <p class="text-xs text-gray-500 dark:text-gray-400 mb-4">Customize the content displayed in the popup modal when a customer wins the lucky draw. HTML formatting is supported in the message field.</p>

                                {{-- WhatsApp Number --}}
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        WhatsApp Number for Contest/Support
                                    </label>
                                    <input
                                        type="text"
                                        wire:model="whatsappNumber"
                                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                                        placeholder="e.g., +60123456789 or 60123456789"
                                    />
                                    @error('whatsappNumber') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Enter with country code (e.g., +60 for Malaysia). Used for "Claim Your Prize" and "Contact Support" buttons.</p>
                                </div>

                                {{-- Modal Title --}}
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Modal Title
                                    </label>
                                    <input
                                        type="text"
                                        wire:model="luckyWinnerModalTitle"
                                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                                        placeholder="e.g., CONGRATULATIONS!"
                                    />
                                    @error('luckyWinnerModalTitle') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Leave empty to use default: "🎉 CONGRATULATIONS! 🎉"</p>
                                </div>

                                {{-- Modal Subtitle --}}
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Modal Subtitle
                                    </label>
                                    <input
                                        type="text"
                                        wire:model="luckyWinnerModalSubtitle"
                                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                                        placeholder="e.g., You're a Lucky Winner!"
                                    />
                                    @error('luckyWinnerModalSubtitle') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Leave empty to use default: "You're a Lucky Winner!"</p>
                                </div>

                                {{-- Modal Message --}}
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Modal Message (HTML Supported)
                                    </label>
                                    <textarea
                                        wire:model="luckyWinnerModalMessage"
                                        rows="5"
                                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 font-mono text-sm"
                                        placeholder="e.g., <p>Amazing! You have won a special prize.</p><p>Please contact us to claim your reward!</p>"
                                    ></textarea>
                                    @error('luckyWinnerModalMessage') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">You can use HTML tags like &lt;p&gt;, &lt;strong&gt;, &lt;br&gt;, &lt;ul&gt;, &lt;li&gt; etc.</p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400">Leave empty to use default message from "Company Description" field above.</p>
                                </div>
                            </div>

                            {{-- FRONTEND CUSTOMIZATION SECTION --}}
                            <div class="border-t-2 border-gray-200 dark:border-gray-700 pt-6 mt-6">
                                <h3 class="text-md font-semibold text-gray-900 dark:text-gray-100 mb-4">Frontend Design Customization</h3>
                                <p class="text-xs text-gray-500 dark:text-gray-400 mb-4">Customize the look and feel of your customer-facing verification pages</p>

                                {{-- Brand Color --}}
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Brand Color
                                    </label>
                                    <div class="flex items-center gap-2">
                                        <input
                                            type="color"
                                            wire:model.live="brandColor"
                                            class="h-10 w-20 border border-gray-300 dark:border-gray-600 rounded cursor-pointer"
                                        />
                                        <input
                                            type="text"
                                            wire:model="brandColor"
                                            class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 font-mono"
                                            placeholder="#3B82F6"
                                        />
                                    </div>
                                    @error('brandColor') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Primary color used for buttons and accents</p>
                                </div>

                                {{-- Background Type --}}
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Background Type
                                    </label>
                                    <select
                                        wire:model.live="backgroundType"
                                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                                    >
                                        <option value="gradient">Gradient (2 colors)</option>
                                        <option value="solid">Solid Color</option>
                                        <option value="image">Background Image</option>
                                    </select>
                                    @error('backgroundType') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Choose how the background should appear</p>
                                </div>

                                {{-- Gradient Colors (shown when type is gradient) --}}
                                @if($backgroundType === 'gradient')
                                <div class="mb-4 grid grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Gradient Start Color
                                        </label>
                                        <div class="flex items-center gap-2">
                                            <input
                                                type="color"
                                                wire:model.live="gradientColorStart"
                                                class="h-10 w-20 border border-gray-300 dark:border-gray-600 rounded cursor-pointer"
                                            />
                                            <input
                                                type="text"
                                                wire:model="gradientColorStart"
                                                class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 font-mono text-sm"
                                                placeholder="#3B82F6"
                                            />
                                        </div>
                                        @error('gradientColorStart') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Gradient End Color
                                        </label>
                                        <div class="flex items-center gap-2">
                                            <input
                                                type="color"
                                                wire:model.live="gradientColorEnd"
                                                class="h-10 w-20 border border-gray-300 dark:border-gray-600 rounded cursor-pointer"
                                            />
                                            <input
                                                type="text"
                                                wire:model="gradientColorEnd"
                                                class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 font-mono text-sm"
                                                placeholder="#9333EA"
                                            />
                                        </div>
                                        @error('gradientColorEnd') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                    </div>
                                </div>
                                @endif

                                {{-- Background Color (shown when type is solid) --}}
                                @if($backgroundType === 'solid')
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Background Color
                                    </label>
                                    <div class="flex items-center gap-2">
                                        <input
                                            type="color"
                                            wire:model.live="backgroundColor"
                                            class="h-10 w-20 border border-gray-300 dark:border-gray-600 rounded cursor-pointer"
                                        />
                                        <input
                                            type="text"
                                            wire:model="backgroundColor"
                                            class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 font-mono"
                                            placeholder="#3B82F6"
                                        />
                                    </div>
                                    @error('backgroundColor') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Solid background color for the page</p>
                                </div>
                                @endif

                                {{-- Cover Background Image (shown when type is image) --}}
                                @if($backgroundType === 'image')
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Cover Background Image
                                    </label>
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">Background image for verification page (recommended: 1920x1080px)</p>
                                    @if($coverBackgroundImagePath)
                                        <div class="mb-2">
                                            <img src="{{ asset('images/' . $coverBackgroundImagePath) }}" alt="Cover Background" class="w-full max-w-xs rounded-lg border-2 border-gray-200 mb-2">
                                            <div class="flex items-center gap-2">
                                                <span class="text-sm text-gray-600 dark:text-gray-400">{{ $coverBackgroundImagePath }}</span>
                                                <button
                                                    type="button"
                                                    wire:click="deleteCoverBackgroundImage"
                                                    wire:confirm="Are you sure you want to delete this image?"
                                                    class="text-red-500 hover:text-red-700 text-xs font-semibold"
                                                >
                                                    Delete
                                                </button>
                                            </div>
                                        </div>
                                    @endif
                                    <input
                                        type="file"
                                        wire:model="coverBackgroundImage"
                                        accept="image/*"
                                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                                    />
                                    @error('coverBackgroundImage') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                </div>
                                @endif

                                {{-- Font Family --}}
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Font Family
                                    </label>
                                    <select
                                        wire:model="fontFamily"
                                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                                    >
                                        <option value="Inter">Inter (Default)</option>
                                        <option value="Arial">Arial</option>
                                        <option value="Helvetica">Helvetica</option>
                                        <option value="Georgia">Georgia</option>
                                        <option value="Times New Roman">Times New Roman</option>
                                        <option value="Courier New">Courier New</option>
                                        <option value="Verdana">Verdana</option>
                                        <option value="Roboto">Roboto</option>
                                        <option value="Open Sans">Open Sans</option>
                                        <option value="Lato">Lato</option>
                                    </select>
                                    @error('fontFamily') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Font used in the frontend</p>
                                </div>

                                {{-- Button Color --}}
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Button Color
                                    </label>
                                    <div class="flex items-center gap-2">
                                        <input
                                            type="color"
                                            wire:model.live="buttonColor"
                                            class="h-10 w-20 border border-gray-300 dark:border-gray-600 rounded cursor-pointer"
                                        />
                                        <input
                                            type="text"
                                            wire:model="buttonColor"
                                            class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 font-mono"
                                            placeholder="#3B82F6"
                                        />
                                    </div>
                                    @error('buttonColor') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Color for action buttons</p>
                                </div>

                                {{-- Text Color --}}
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Text Color (General)
                                    </label>
                                    <div class="flex items-center gap-2">
                                        <input
                                            type="color"
                                            wire:model.live="textColor"
                                            class="h-10 w-20 border border-gray-300 dark:border-gray-600 rounded cursor-pointer"
                                        />
                                        <input
                                            type="text"
                                            wire:model="textColor"
                                            class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 font-mono"
                                            placeholder="#1F2937"
                                        />
                                    </div>
                                    @error('textColor') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Color for general text, footer, and descriptions</p>
                                </div>

                            </div>

                        </div>{{-- End RIGHT COLUMN --}}

                    </div>{{-- End 2-Column Grid --}}

                    {{-- VERIFICATION STEPS CONTENT SECTION --}}
                    <div class="border-t-2 border-blue-200 dark:border-blue-800 pt-6 mt-6">
                        <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 mb-6">
                            <h3 class="text-md font-semibold text-blue-900 dark:text-blue-100 mb-2 flex items-center gap-2">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/>
                                </svg>
                                Verification Steps Content (Chatbot Messages)
                            </h3>
                            <p class="text-xs text-blue-800 dark:text-blue-200">
                                Customize all chatbot messages shown during the verification process. Edit text to match your brand voice or translate to other languages. HTML tags are supported in instruction steps.
                            </p>
                        </div>

                        {{-- 2x2 GRID LAYOUT --}}
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                            {{-- LEFT COLUMN --}}
                            <div class="space-y-6">

                                {{-- STEP 1 SECTION --}}
                                <div class="bg-gradient-to-r from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 rounded-lg p-5 border-2 border-green-200 dark:border-green-800">
                            <h4 class="text-md font-bold text-green-800 dark:text-green-200 mb-1 flex items-center gap-2">
                                <span class="flex items-center justify-center w-7 h-7 bg-green-500 text-white rounded-full text-sm font-bold">1</span>
                                Step 1: Serial Number Entry
                            </h4>
                            <p class="text-xs text-green-700 dark:text-green-300 mb-4">Messages shown when user enters/scans serial number</p>

                            <div class="space-y-3">
                                <div>
                                    <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                                        Greeting Title
                                    </label>
                                    <input
                                        type="text"
                                        wire:model="step1GreetingTitle"
                                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-sm"
                                        placeholder="👋 Hello there!"
                                    />
                                    @error('step1GreetingTitle') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                </div>

                                <div>
                                    <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                                        Message (QR Code Scanned)
                                    </label>
                                    <textarea
                                        wire:model="step1WithQrMessage"
                                        rows="2"
                                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-sm"
                                        placeholder="Perfect! I've detected your product serial number from the QR code you scanned."
                                    ></textarea>
                                    @error('step1WithQrMessage') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                </div>

                                <div>
                                    <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                                        Sub-message (QR Code Scanned)
                                    </label>
                                    <input
                                        type="text"
                                        wire:model="step1WithQrSubMessage"
                                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-sm"
                                        placeholder="Let's verify your product's authenticity together."
                                    />
                                    @error('step1WithQrSubMessage') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                </div>

                                <div>
                                    <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                                        Message (Manual Entry - No QR Scan)
                                    </label>
                                    <textarea
                                        wire:model="step1WithoutQrMessage"
                                        rows="2"
                                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-sm"
                                        placeholder="I'm here to help you verify your product's authenticity. Let's get started by entering your serial number."
                                    ></textarea>
                                    @error('step1WithoutQrMessage') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                </div>
                            </div>
                                </div>

                                {{-- STEP 3 SECTION --}}
                                <div class="bg-gradient-to-r from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 rounded-lg p-5 border-2 border-purple-200 dark:border-purple-800">
                            <h4 class="text-md font-bold text-purple-800 dark:text-purple-200 mb-1 flex items-center gap-2">
                                <span class="flex items-center justify-center w-7 h-7 bg-purple-500 text-white rounded-full text-sm font-bold">3</span>
                                Step 3: Form & PIN Entry
                            </h4>
                            <p class="text-xs text-purple-700 dark:text-purple-300 mb-4">Messages shown when user fills form and enters PIN</p>

                            <div class="space-y-3">
                                <div>
                                    <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                                        Title
                                    </label>
                                    <input
                                        type="text"
                                        wire:model="step3Title"
                                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-sm"
                                        placeholder="Almost there! 🎯"
                                    />
                                    @error('step3Title') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                </div>

                                <div>
                                    <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                                        Message
                                    </label>
                                    <textarea
                                        wire:model="step3Message"
                                        rows="2"
                                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-sm"
                                        placeholder="Now, please enter the PIN code you found on your hologram sticker."
                                    ></textarea>
                                    @error('step3Message') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                </div>
                            </div>
                                </div>

                            </div>{{-- End LEFT COLUMN --}}

                            {{-- RIGHT COLUMN --}}
                            <div class="space-y-6">

                                {{-- STEP 2 SECTION --}}
                                <div class="bg-gradient-to-r from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-lg p-5 border-2 border-blue-200 dark:border-blue-800">
                            <h4 class="text-md font-bold text-blue-800 dark:text-blue-200 mb-1 flex items-center gap-2">
                                <span class="flex items-center justify-center w-7 h-7 bg-blue-500 text-white rounded-full text-sm font-bold">2</span>
                                Step 2: PIN Code Instructions
                            </h4>
                            <p class="text-xs text-blue-700 dark:text-blue-300 mb-4">Messages and instructions for finding the PIN code</p>

                            <div class="space-y-3">
                                <div>
                                    <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                                        Progress Title
                                    </label>
                                    <input
                                        type="text"
                                        wire:model="step2ProgressTitle"
                                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-sm"
                                        placeholder="Great progress! 🎉"
                                    />
                                    @error('step2ProgressTitle') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                </div>

                                <div>
                                    <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
                                        Instruction Section Title
                                    </label>
                                    <input
                                        type="text"
                                        wire:model="step2InstructionTitle"
                                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-sm"
                                        placeholder="📍 How to Find Your PIN Code"
                                    />
                                    @error('step2InstructionTitle') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                </div>

                                <div class="bg-white dark:bg-gray-800 rounded p-3 space-y-2">
                                    <p class="text-xs font-semibold text-gray-700 dark:text-gray-300">Instruction Steps (HTML supported):</p>

                                    <div>
                                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
                                            Step 1
                                        </label>
                                        <input
                                            type="text"
                                            wire:model="step2InstructionStep1"
                                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-sm font-mono"
                                            placeholder="Locate the <strong>hologram sticker</strong> on your product"
                                        />
                                        @error('step2InstructionStep1') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                    </div>

                                    <div>
                                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
                                            Step 2
                                        </label>
                                        <input
                                            type="text"
                                            wire:model="step2InstructionStep2"
                                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-sm font-mono"
                                            placeholder="<strong>Scratch the thin silver film</strong> gently to reveal the code"
                                        />
                                        @error('step2InstructionStep2') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                    </div>

                                    <div>
                                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
                                            Step 3
                                        </label>
                                        <input
                                            type="text"
                                            wire:model="step2InstructionStep3"
                                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-sm font-mono"
                                            placeholder="Enter the <strong>PIN code</strong> in the next step"
                                        />
                                        @error('step2InstructionStep3') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                    </div>
                                </div>
                            </div>
                                </div>

                                {{-- RESULT MESSAGES SECTION --}}
                                <div class="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-900/20 dark:to-gray-800/20 rounded-lg p-5 border-2 border-gray-200 dark:border-gray-700">
                            <h4 class="text-md font-bold text-gray-800 dark:text-gray-200 mb-1 flex items-center gap-2">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                                Verification Result Messages
                            </h4>
                            <p class="text-xs text-gray-700 dark:text-gray-300 mb-4">Customize messages shown after verification (success, warning, error). Use placeholders: {site_name}, {used_at}, {max_attempts}</p>

                            <div class="space-y-4">
                                {{-- SUCCESS --}}
                                <div class="bg-green-50 dark:bg-green-900/30 rounded p-3 border border-green-200 dark:border-green-800">
                                    <p class="text-xs font-bold text-green-800 dark:text-green-200 mb-2">✅ Success (Genuine Product)</p>
                                    <div class="space-y-2">
                                        <div>
                                            <input
                                                type="text"
                                                wire:model="resultSuccessTitle"
                                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-green-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-xs"
                                                placeholder="✅ Great news! The code is genuine."
                                            />
                                            @error('resultSuccessTitle') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                        </div>
                                        <div>
                                            <textarea
                                                wire:model="resultSuccessMessage"
                                                rows="2"
                                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-green-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-xs"
                                                placeholder="Your product has been successfully verified by {site_name}. You're good to go!"
                                            ></textarea>
                                            @error('resultSuccessMessage') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                        </div>
                                    </div>
                                </div>

                                {{-- WARNING --}}
                                <div class="bg-yellow-50 dark:bg-yellow-900/30 rounded p-3 border border-yellow-200 dark:border-yellow-800">
                                    <p class="text-xs font-bold text-yellow-800 dark:text-yellow-200 mb-2">⚠️ Warning (Already Used)</p>
                                    <div class="space-y-2">
                                        <div>
                                            <input
                                                type="text"
                                                wire:model="resultWarningTitle"
                                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-yellow-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-xs"
                                                placeholder="⚠️ This code has already been verified."
                                            />
                                            @error('resultWarningTitle') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                        </div>
                                        <div>
                                            <textarea
                                                wire:model="resultWarningMessage"
                                                rows="2"
                                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-yellow-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-xs"
                                                placeholder="The product was first verified on {used_at}. This could mean the code was used before..."
                                            ></textarea>
                                            @error('resultWarningMessage') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                        </div>
                                    </div>
                                </div>

                                {{-- ERROR --}}
                                <div class="bg-red-50 dark:bg-red-900/30 rounded p-3 border border-red-200 dark:border-red-800">
                                    <p class="text-xs font-bold text-red-800 dark:text-red-200 mb-2">❌ Error (Invalid PIN)</p>
                                    <div class="space-y-2">
                                        <div>
                                            <input
                                                type="text"
                                                wire:model="resultErrorTitle"
                                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-red-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-xs"
                                                placeholder="❌ Oops! The PIN code doesn't match."
                                            />
                                            @error('resultErrorTitle') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                        </div>
                                        <div>
                                            <textarea
                                                wire:model="resultErrorMessage"
                                                rows="2"
                                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-red-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-xs"
                                                placeholder="The PIN you entered doesn't match our records..."
                                            ></textarea>
                                            @error('resultErrorMessage') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                        </div>
                                        <div>
                                            <input
                                                type="text"
                                                wire:model="resultErrorTip"
                                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-red-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-xs"
                                                placeholder="💡 Tip: Make sure you're scratching the correct silver film..."
                                            />
                                            @error('resultErrorTip') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                        </div>
                                    </div>
                                </div>

                                {{-- MAX ATTEMPTS --}}
                                <div class="bg-orange-50 dark:bg-orange-900/30 rounded p-3 border border-orange-200 dark:border-orange-800">
                                    <p class="text-xs font-bold text-orange-800 dark:text-orange-200 mb-2">🚫 Max Attempts Reached</p>
                                    <div class="space-y-2">
                                        <div>
                                            <input
                                                type="text"
                                                wire:model="resultMaxAttemptsTitle"
                                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-orange-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-xs"
                                                placeholder="🚫 Maximum attempts reached"
                                            />
                                            @error('resultMaxAttemptsTitle') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                        </div>
                                        <div>
                                            <textarea
                                                wire:model="resultMaxAttemptsMessage"
                                                rows="2"
                                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-orange-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-xs"
                                                placeholder="You've used all {max_attempts} verification attempts..."
                                            ></textarea>
                                            @error('resultMaxAttemptsMessage') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                        </div>
                                        <div>
                                            <input
                                                type="text"
                                                wire:model="resultMaxAttemptsContact"
                                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-orange-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-xs"
                                                placeholder="Please contact our support team for assistance."
                                            />
                                            @error('resultMaxAttemptsContact') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                                </div>

                            </div>{{-- End RIGHT COLUMN --}}

                        </div>{{-- End 2x2 Grid --}}
                    </div>

                    {{-- Save Button (Full Width) --}}
                    <div class="flex justify-end mt-6 pt-6 border-t-2 border-gray-200 dark:border-gray-700">
                        <button
                            type="submit"
                            class="px-6 py-2 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-lg transition-colors"
                        >
                            Save Configuration
                        </button>
                    </div>

                </form>
            </div>
        </div>

        {{-- GoAffPro API Configuration Section --}}
        <div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
            <div class="p-6">
                <div class="flex items-center mb-4">
                    <svg class="w-6 h-6 mr-3 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                    </svg>
                    <div>
                        <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">GoAffPro API Configuration</h2>
                        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Configure GoAffPro integration to sync seller data automatically</p>
                    </div>
                </div>

                <form wire:submit.prevent="saveSiteConfig">
                    <div class="space-y-4">
                        <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
                            <div class="flex items-start">
                                <svg class="w-5 h-5 mr-2 text-blue-600 dark:text-blue-400 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                <div class="text-sm text-blue-800 dark:text-blue-200">
                                    <p class="font-semibold mb-2">About GoAffPro Sync</p>
                                    <ul class="list-disc list-inside space-y-1 text-blue-700 dark:text-blue-300">
                                        <li>With GoAffPro API enabled, you can <strong>sync seller data automatically</strong> from GoAffPro system</li>
                                        <li>Without API token, you can still <strong>create sellers manually</strong> in this system</li>
                                        <li>Both methods work independently - choose what fits your workflow</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                GoAffPro Access Token
                                <span class="text-gray-500 dark:text-gray-400 font-normal">(Optional)</span>
                            </label>
                            <input
                                type="text"
                                wire:model="goaffproAccessToken"
                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 font-mono text-sm"
                                placeholder="Enter your GoAffPro API access token (x-goaffpro-access-token)"
                            />
                            @error('goaffproAccessToken')
                                <span class="text-xs text-red-500 mt-1">{{ $message }}</span>
                            @enderror
                            <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                                Get your API token from GoAffPro dashboard. Leave empty if you want to manage sellers manually without API sync.
                            </p>

                            @if($goaffproAccessToken)
                                <div class="mt-3 flex items-center text-sm">
                                    <svg class="w-4 h-4 mr-2 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    <span class="text-green-700 dark:text-green-300 font-medium">API Token Configured - GoAffPro sync is enabled</span>
                                </div>
                            @else
                                <div class="mt-3 flex items-center text-sm">
                                    <svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    <span class="text-gray-600 dark:text-gray-400">No API token - Manual seller creation only</span>
                                </div>
                            @endif
                        </div>

                        <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
                            <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-3">Quick Links:</h3>
                            <div class="space-y-2 text-sm">
                                <a href="{{ route('sellers.index') }}" class="flex items-center text-blue-600 dark:text-blue-400 hover:underline">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
                                    </svg>
                                    View All Sellers
                                </a>
                                <a href="{{ route('sellers.create') }}" class="flex items-center text-blue-600 dark:text-blue-400 hover:underline">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                                    </svg>
                                    Create New Seller (Manual or API Sync)
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="mt-6 flex justify-end">
                        <button
                            type="submit"
                            class="px-6 py-2 bg-blue-600 dark:bg-blue-500 text-white rounded-lg hover:bg-blue-700 dark:hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition"
                        >
                            Save Configuration
                        </button>
                    </div>
                </form>
            </div>
        </div>

        {{-- Customer Form Fields Section --}}
        <div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
            <div class="p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Customer Form Fields</h2>
                <p class="text-sm text-gray-600 dark:text-gray-300 mb-6">Enable or disable fields that appear on the product verification form.</p>

                {{-- Fields Table --}}
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                        <thead class="bg-gray-50 dark:bg-gray-700">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                    Field Name
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                    Placeholder
                                </th>
                                <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                    Visible
                                </th>
                                <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                    Required
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                            @foreach($fields as $field)
                                <tr class="{{ in_array($field['unique_key'], ['name', 'email', 'contact']) ? 'bg-blue-50 dark:bg-blue-900/20' : '' }}">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="text-sm font-medium text-gray-900 dark:text-gray-100">
                                                {{ $field['name'] }}
                                            </div>
                                            @if(in_array($field['unique_key'], ['name', 'email', 'contact']))
                                                <span class="ml-2 px-2 py-1 text-xs font-semibold text-blue-800 dark:text-blue-300 bg-blue-200 dark:bg-blue-900/50 rounded-full">
                                                    Base Field
                                                </span>
                                            @endif
                                        </div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">{{ $field['unique_key'] }}</div>
                                    </td>
                                    <td class="px-6 py-4">
                                        @if($editingPlaceholder === $field['id'])
                                            <div class="flex items-center gap-2">
                                                <input
                                                    type="text"
                                                    wire:model="placeholderValue"
                                                    wire:keydown.enter="updatePlaceholder({{ $field['id'] }})"
                                                    wire:keydown.escape="cancelEdit"
                                                    class="text-sm px-2 py-1 border border-blue-500 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                                                    autofocus
                                                />
                                                <button
                                                    wire:click="updatePlaceholder({{ $field['id'] }})"
                                                    class="px-2 py-1 text-xs bg-green-500 text-white rounded hover:bg-green-600"
                                                >
                                                    Save
                                                </button>
                                                <button
                                                    wire:click="cancelEdit"
                                                    class="px-2 py-1 text-xs bg-gray-500 text-white rounded hover:bg-gray-600"
                                                >
                                                    Cancel
                                                </button>
                                            </div>
                                        @else
                                            <div class="flex items-center gap-2">
                                                <span class="text-sm text-gray-600 dark:text-gray-300">{{ $field['placeholder'] }}</span>
                                                <button
                                                    wire:click="editPlaceholder({{ $field['id'] }}, '{{ addslashes($field['placeholder']) }}')"
                                                    class="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
                                                    title="Edit placeholder"
                                                >
                                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                                    </svg>
                                                </button>
                                            </div>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-center">
                                        <button
                                            wire:click="toggleVisible({{ $field['id'] }})"
                                            type="button"
                                            class="relative inline-flex items-center justify-center h-8 w-14 flex-shrink-0 cursor-pointer rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 {{ $field['visible'] ? 'bg-green-500 focus:ring-green-500' : 'bg-gray-300 dark:bg-gray-600 focus:ring-gray-400' }}"
                                            role="switch"
                                            aria-checked="{{ $field['visible'] ? 'true' : 'false' }}"
                                        >
                                            <span class="sr-only">Toggle visible</span>
                                            <span
                                                aria-hidden="true"
                                                class="absolute inline-block h-6 w-6 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out {{ $field['visible'] ? 'translate-x-3' : '-translate-x-3' }}"
                                            ></span>
                                        </button>
                                        <div class="text-xs mt-1 font-medium {{ $field['visible'] ? 'text-green-600 dark:text-green-400' : 'text-gray-500 dark:text-gray-400' }}">
                                            {{ $field['visible'] ? 'ON' : 'OFF' }}
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-center">
                                        <button
                                            wire:click="toggleRequired({{ $field['id'] }})"
                                            type="button"
                                            class="relative inline-flex items-center justify-center h-8 w-14 flex-shrink-0 cursor-pointer rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 {{ $field['required'] ? 'bg-blue-500 focus:ring-blue-500' : 'bg-gray-300 dark:bg-gray-600 focus:ring-gray-400' }}"
                                            role="switch"
                                            aria-checked="{{ $field['required'] ? 'true' : 'false' }}"
                                        >
                                            <span class="sr-only">Toggle required</span>
                                            <span
                                                aria-hidden="true"
                                                class="absolute inline-block h-6 w-6 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out {{ $field['required'] ? 'translate-x-3' : '-translate-x-3' }}"
                                            ></span>
                                        </button>
                                        <div class="text-xs mt-1 font-medium {{ $field['required'] ? 'text-blue-600 dark:text-blue-400' : 'text-gray-500 dark:text-gray-400' }}">
                                            {{ $field['required'] ? 'ON' : 'OFF' }}
                                        </div>
                                    </td>
                                </tr>
                            @endforeach

                            {{-- Pincode Field (Special Row - Always Required) --}}
                            <tr class="bg-blue-50 dark:bg-blue-900/30 border-t-2 border-blue-200 dark:border-blue-800">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="text-sm font-medium text-gray-900 dark:text-gray-100">
                                            {{ $pincodeField['name'] }}
                                        </div>
                                        <span class="ml-2 px-2 py-1 text-xs font-semibold text-blue-800 dark:text-blue-300 bg-blue-200 dark:bg-blue-900/50 rounded-full">
                                            Always Required
                                        </span>
                                    </div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400">{{ $pincodeField['unique_key'] }}</div>
                                </td>
                                <td class="px-6 py-4">
                                    @if($editingPlaceholder === $pincodeField['id'])
                                        <div class="flex items-center gap-2">
                                            <input
                                                type="text"
                                                wire:model="placeholderValue"
                                                wire:keydown.enter="updatePlaceholder({{ $pincodeField['id'] }})"
                                                wire:keydown.escape="cancelEdit"
                                                class="text-sm px-2 py-1 border border-blue-500 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                                                autofocus
                                            />
                                            <button
                                                wire:click="updatePlaceholder({{ $pincodeField['id'] }})"
                                                class="px-2 py-1 text-xs bg-green-500 text-white rounded hover:bg-green-600"
                                            >
                                                Save
                                            </button>
                                            <button
                                                wire:click="cancelEdit"
                                                class="px-2 py-1 text-xs bg-gray-500 text-white rounded hover:bg-gray-600"
                                            >
                                                Cancel
                                            </button>
                                        </div>
                                    @else
                                        <div class="flex items-center gap-2">
                                            <span class="text-sm text-gray-600 dark:text-gray-300">{{ $pincodeField['placeholder'] }}</span>
                                            <button
                                                wire:click="editPlaceholder({{ $pincodeField['id'] }}, '{{ addslashes($pincodeField['placeholder']) }}')"
                                                class="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
                                                title="Edit placeholder"
                                            >
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                                </svg>
                                            </button>
                                        </div>
                                    @endif
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-center">
                                    <div class="inline-flex items-center justify-center h-8 w-14 flex-shrink-0 rounded-full bg-gray-200 dark:bg-gray-700 opacity-50 cursor-not-allowed">
                                        <span class="inline-block h-6 w-6 rounded-full bg-gray-400 dark:bg-gray-600 shadow-lg"></span>
                                    </div>
                                    <div class="text-xs mt-1 font-medium text-gray-400 dark:text-gray-500">
                                        Always ON
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-center">
                                    <div class="inline-flex items-center justify-center h-8 w-14 flex-shrink-0 rounded-full bg-gray-200 dark:bg-gray-700 opacity-50 cursor-not-allowed">
                                        <span class="inline-block h-6 w-6 rounded-full bg-gray-400 dark:bg-gray-600 shadow-lg"></span>
                                    </div>
                                    <div class="text-xs mt-1 font-medium text-gray-400 dark:text-gray-500">
                                        Always ON
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

            </div>
        </div>

    </div>
</div>