@extends('admin.layouts.admin')

@section('title', 'Site Settings')
@section('page_title', 'Global Configuration')

@section('content')
    <form action="{{ route('admin.settings.update') }}" method="POST" class="max-w-4xl" x-data="{
        color_primary: '{{ $settings['color_primary'] ?? 'var(--site-primary)' }}',
        color_primary_hover: '{{ $settings['color_primary_hover'] ?? 'var(--site-primary-hover)' }}',
        color_bg_light: '{{ $settings['color_bg_light'] ?? '#f2f7fb' }}',
        color_bg_dark: '{{ $settings['color_bg_dark'] ?? '#0f172a' }}',
        color_card_light: '{{ $settings['color_card_light'] ?? '#ffffff' }}',
        color_card_dark: '{{ $settings['color_card_dark'] ?? '#1a233a' }}',
        color_text_main: '{{ $settings['color_text_main'] ?? '#111827' }}',
        color_text_body: '{{ $settings['color_text_body'] ?? '#4b5563' }}',
        color_text_dark_main: '{{ $settings['color_text_dark_main'] ?? '#ffffff' }}',
        color_text_dark_body: '{{ $settings['color_text_dark_body'] ?? '#94a3b8' }}',
        color_success: '{{ $settings['color_success'] ?? '#22c55e' }}',
        color_danger: '{{ $settings['color_danger'] ?? '#ef4444' }}'
    }">
        @csrf
        <div
            class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden dark:bg-[#1a233a] dark:border-white/5 transition-colors duration-300">
            <div class="px-8 py-6 border-b border-slate-100 bg-slate-50/30 dark:bg-white/5 dark:border-white/5">
                <h3 class="text-lg font-bold text-[#404e67] dark:text-slate-200">General Settings</h3>
                <p class="text-xs text-slate-400 mt-1">Configure your primary website identity and contact information.</p>
            </div>

            <div class="p-8 space-y-10">

                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <!-- Site Logo -->
                    <div class="space-y-4">
                        <label
                            class="text-[11px] font-bold text-slate-500 uppercase tracking-wider dark:text-slate-400">Site
                            Logo</label>
                        <div class="flex items-center space-x-6">
                            <div
                                class="w-20 h-20 bg-slate-100 rounded-xl flex items-center justify-center border border-slate-200 dark:bg-white/5 dark:border-white/10 overflow-hidden shadow-inner">
                                <img id="logo-preview"
                                    src="{{ asset($settings['site_logo'] ?? 'admin-assets/img/placeholder.png') }}"
                                    class="w-full h-full object-contain p-2"
                                    onerror="this.src='https://placehold.co/200x200?text=Logo'">
                            </div>
                            <div class="flex-1 space-y-3">
                                <input type="hidden" name="site_logo" id="site_logo_input"
                                    value="{{ $settings['site_logo'] ?? '' }}">
                                <button type="button"
                                    @click="$dispatch('open-media-picker', { inputId: 'site_logo_input', previewId: 'logo-preview' })"
                                    class="bg-primary text-white px-6 py-2.5 rounded-lg font-black text-[10px] uppercase tracking-widest shadow-lg shadow-blue-500/20 hover:bg-primary-hover transition-all">
                                    <i class="fas fa-images mr-2"></i> Choose Logo
                                </button>
                                <p class="text-[10px] text-slate-400 font-medium">Recommended: 150x50 PNG with transparency
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Site Favicon -->
                    <div class="space-y-4">
                        <label
                            class="text-[11px] font-bold text-slate-500 uppercase tracking-wider dark:text-slate-400">Site
                            Favicon</label>
                        <div class="flex items-center space-x-6">
                            <div
                                class="w-20 h-20 bg-slate-100 rounded-xl flex items-center justify-center border border-slate-200 dark:bg-white/5 dark:border-white/10 overflow-hidden shadow-inner">
                                <img id="favicon-preview"
                                    src="{{ asset($settings['site_favicon'] ?? 'admin-assets/img/placeholder.png') }}"
                                    class="w-10 h-10 object-contain" onerror="this.src='https://placehold.co/32x32?text=F'">
                            </div>
                            <div class="flex-1 space-y-3">
                                <input type="hidden" name="site_favicon" id="site_favicon_input"
                                    value="{{ $settings['site_favicon'] ?? '' }}">
                                <button type="button"
                                    @click="$dispatch('open-media-picker', { inputId: 'site_favicon_input', previewId: 'favicon-preview' })"
                                    class="bg-primary text-white px-6 py-2.5 rounded-lg font-black text-[10px] uppercase tracking-widest shadow-lg shadow-blue-500/20 hover:bg-primary-hover transition-all">
                                    <i class="fas fa-icons mr-2"></i> Choose Favicon
                                </button>
                                <p class="text-[10px] text-slate-400 font-medium">Recommended: 32x32 ICO or PNG</p>
                            </div>
                        </div>
                    </div>
                    <!-- Site Name -->
                    <div class="space-y-2">
                        <label
                            class="text-[11px] font-bold text-slate-500 uppercase tracking-wider dark:text-slate-400">Website
                            Name</label>
                        <input type="text" name="site_name" value="{{ $settings['site_name'] ?? 'OneHost BD' }}"
                            class="w-full bg-slate-50 border-slate-200 rounded-lg px-4 py-3 text-sm font-semibold text-slate-700 focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all dark:bg-white/5 dark:border-white/10 dark:text-slate-200 dark:focus:border-blue-500/50">
                    </div>

                    <!-- Support Email -->
                    <div class="space-y-2">
                        <label
                            class="text-[11px] font-bold text-slate-500 uppercase tracking-wider dark:text-slate-400">Support
                            Email</label>
                        <input type="email" name="support_email"
                            value="{{ $settings['support_email'] ?? 'support@onehostbd.com' }}"
                            class="w-full bg-slate-50 border-slate-200 rounded-lg px-4 py-3 text-sm font-semibold text-slate-700 focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all dark:bg-white/5 dark:border-white/10 dark:text-slate-200 dark:focus:border-blue-500/50">
                    </div>

                    <!-- Contact Phone -->
                    <div class="space-y-2">
                        <label
                            class="text-[11px] font-bold text-slate-500 uppercase tracking-wider dark:text-slate-400">Contact
                            Phone</label>
                        <input type="text" name="contact_phone"
                            value="{{ $settings['contact_phone'] ?? '+880 123 456 789' }}"
                            class="w-full bg-slate-50 border-slate-200 rounded-lg px-4 py-3 text-sm font-semibold text-slate-700 focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all dark:bg-white/5 dark:border-white/10 dark:text-slate-200 dark:focus:border-blue-500/50">
                    </div>

                    <!-- Site Address -->
                    <div class="space-y-2 col-span-2">
                        <label
                            class="text-[11px] font-bold text-slate-500 uppercase tracking-wider dark:text-slate-400">Site
                            Address</label>
                        <textarea name="site_address" rows="2"
                            class="w-full bg-slate-50 border-slate-200 rounded-lg px-4 py-3 text-sm font-semibold text-slate-700 focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all dark:bg-white/5 dark:border-white/10 dark:text-slate-200 dark:focus:border-blue-500/50">{{ $settings['site_address'] ?? '' }}</textarea>
                    </div>

                    <!-- Currency -->
                    <div class="space-y-2">
                        <label
                            class="text-[11px] font-bold text-slate-500 uppercase tracking-wider dark:text-slate-400">Default
                            Currency</label>
                        <select name="default_currency"
                            class="w-full bg-slate-50 border-slate-200 rounded-lg px-4 py-3 text-sm font-semibold text-slate-700 appearance-none focus:ring-2 focus:ring-primary/20 dark:bg-white/5 dark:border-white/10 dark:text-slate-200">
                            @php $curr = $settings['default_currency'] ?? 'USD ($)'; @endphp
                            <option {{ $curr == 'USD ($)' ? 'selected' : '' }}>USD ($)</option>
                            <option {{ $curr == 'BDT (৳)' ? 'selected' : '' }}>BDT (৳)</option>
                            <option {{ $curr == 'EUR (€)' ? 'selected' : '' }}>EUR (€)</option>
                        </select>
                    </div>

                    <!-- Footer Text -->
                    <div class="space-y-2 col-span-2">
                        <label
                            class="text-[11px] font-bold text-slate-500 uppercase tracking-wider dark:text-slate-400">Footer
                            Description</label>
                        <textarea name="footer_description" rows="3"
                            class="w-full bg-slate-50 border-slate-200 rounded-lg px-4 py-3 text-sm font-semibold text-slate-700 focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all dark:bg-white/5 dark:border-white/10 dark:text-slate-200 dark:focus:border-blue-500/50">{{ $settings['footer_description'] ?? 'No 1 Hosting Provider in Bangladesh.' }}</textarea>
                    </div>
                </div>

                <div class="pt-10 mt-10 border-t border-slate-100 dark:border-white/5">
                    <h3 class="text-sm font-black text-primary uppercase tracking-[0.2em] mb-8 italic">Top Header Configuration</h3>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <!-- Active Offer (WHMCS) -->
                        <div class="space-y-2">
                            <label class="text-[11px] font-bold text-slate-500 uppercase tracking-wider dark:text-slate-400">Offer (Promotions from WHMCS)</label>
                            <select name="top_header_offer" class="w-full bg-slate-50 border-slate-200 rounded-lg px-4 py-3 text-sm font-semibold text-slate-700 appearance-none focus:ring-2 focus:ring-primary/20 dark:bg-white/5 dark:border-white/10 dark:text-slate-200">
                                <option value="">No Active Offer</option>
                                @foreach($promotions as $promo)
                                    <option value="{{ $promo['code'] }}" 
                                        {{ ($settings['top_header_offer'] ?? '') == $promo['code'] ? 'selected' : '' }}>
                                        {{ $promo['code'] }} ({{ $promo['type'] }} - {{ $promo['value'] }}{{ $promo['type'] == 'Percentage' ? '%' : '' }})
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Top Header Menu 1 (About) -->
                        <div class="space-y-2">
                            <label class="text-[11px] font-bold text-slate-500 uppercase tracking-wider dark:text-slate-400">About Menu Link (Top Header)</label>
                            <input type="text" name="top_header_menu1_link" value="{{ $settings['top_header_menu1_link'] ?? '#' }}"
                                class="w-full bg-slate-50 border-slate-200 rounded-lg px-4 py-3 text-sm font-semibold text-slate-700 focus:ring-2 focus:ring-primary/20 transition-all dark:bg-white/5 dark:border-white/10 dark:text-slate-200">
                        </div>

                        <!-- Top Header Menu 2 (Contact) -->
                        <div class="space-y-2">
                            <label class="text-[11px] font-bold text-slate-500 uppercase tracking-wider dark:text-slate-400">Contact Menu Link (Top Header)</label>
                            <input type="text" name="top_header_menu2_link" value="{{ $settings['top_header_menu2_link'] ?? '#' }}"
                                class="w-full bg-slate-50 border-slate-200 rounded-lg px-4 py-3 text-sm font-semibold text-slate-700 focus:ring-2 focus:ring-primary/20 transition-all dark:bg-white/5 dark:border-white/10 dark:text-slate-200">
                        </div>

                        <!-- Top Header Menu 3 (Sitemap) -->
                        <div class="space-y-2">
                            <label class="text-[11px] font-bold text-slate-500 uppercase tracking-wider dark:text-slate-400">Sitemap Menu Link (Top Header)</label>
                            <input type="text" name="top_header_menu3_link" value="{{ $settings['top_header_menu3_link'] ?? '#' }}"
                                class="w-full bg-slate-50 border-slate-200 rounded-lg px-4 py-3 text-sm font-semibold text-slate-700 focus:ring-2 focus:ring-primary/20 transition-all dark:bg-white/5 dark:border-white/10 dark:text-slate-200">
                        </div>
                    </div>
                </div>

                <div class="pt-10 mt-10 border-t border-slate-100 dark:border-white/5">
                    <h3 class="text-sm font-black text-primary uppercase tracking-[0.2em] mb-8 italic">WHMCS API
                        Configuration</h3>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div class="space-y-2 col-span-2">
                            <label
                                class="text-[11px] font-bold text-slate-500 uppercase tracking-wider dark:text-slate-400">WHMCS
                                URL</label>
                            <input type="url" name="whmcs_url" value="{{ $settings['whmcs_url'] ?? '' }}"
                                placeholder="https://billing.yourdomain.com"
                                class="w-full bg-primary/5 border-slate-200 rounded-lg px-4 py-3 text-sm font-bold text-[#404e67] focus:ring-2 focus:ring-primary/20 transition-all dark:border-white/10 dark:text-slate-200">
                        </div>

                        <div class="space-y-2">
                            <label
                                class="text-[11px] font-bold text-slate-500 uppercase tracking-wider dark:text-slate-400">API
                                Identifier</label>
                            <input type="text" name="whmcs_api_id" value="{{ $settings['whmcs_api_id'] ?? '' }}"
                                class="w-full bg-slate-50 border-slate-200 rounded-lg px-4 py-3 text-sm font-bold text-slate-700 focus:ring-2 focus:ring-primary/20 transition-all dark:bg-white/5 dark:border-white/10 dark:text-slate-200">
                        </div>

                        <div class="space-y-2">
                            <label
                                class="text-[11px] font-bold text-slate-500 uppercase tracking-wider dark:text-slate-400">API
                                Secret</label>
                            <input type="password" name="whmcs_api_secret" value="{{ $settings['whmcs_api_secret'] ?? '' }}"
                                class="w-full bg-slate-50 border-slate-200 rounded-lg px-4 py-3 text-sm font-bold text-slate-700 focus:ring-2 focus:ring-primary/20 transition-all dark:bg-white/5 dark:border-white/10 dark:text-slate-200">
                        </div>

                        <div class="space-y-2">
                            <label
                                class="text-[11px] font-bold text-slate-500 uppercase tracking-wider dark:text-slate-400">API
                                Access Key (Optional)</label>
                            <input type="text" name="whmcs_access_key" value="{{ $settings['whmcs_access_key'] ?? '' }}"
                                class="w-full bg-slate-50 border-slate-200 rounded-lg px-4 py-3 text-sm font-bold text-slate-700 focus:ring-2 focus:ring-primary/20 transition-all dark:bg-white/5 dark:border-white/10 dark:text-slate-200">
                        </div>

                        <div class="space-y-2">
                            <label
                                class="text-[11px] font-bold text-slate-500 uppercase tracking-wider dark:text-slate-400">AutoAuth
                                Key</label>
                            <input type="text" name="whmcs_autoauth_key" value="{{ $settings['whmcs_autoauth_key'] ?? '' }}"
                                class="w-full bg-slate-50 border-slate-200 rounded-lg px-4 py-3 text-sm font-bold text-slate-700 focus:ring-2 focus:ring-primary/20 transition-all dark:bg-white/5 dark:border-white/10 dark:text-slate-200">
                        </div>

                        <div class="space-y-2">
                            <label
                                class="text-[11px] font-bold text-[#ff5c35] uppercase tracking-wider">WHMCS Currency ID (e.g., 8 for BDT)</label>
                            <input type="number" name="whmcs_currency_id" value="{{ $settings['whmcs_currency_id'] ?? '8' }}"
                                class="w-full bg-orange-50 border-orange-100 rounded-lg px-4 py-3 text-sm font-bold text-[#ff5c35] focus:ring-2 focus:ring-orange-500/20 transition-all dark:bg-white/5 dark:border-white/10">
                            <p class="text-[10px] text-slate-400 font-medium">This ID is used for all order links. (ID 1 = USD, ID 8 = BDT in your system)</p>
                        </div>
                    </div>
                </div>

                <div class="pt-10 mt-10 border-t border-slate-100 dark:border-white/5">
                    <h3 class="text-sm font-black text-rose-500 uppercase tracking-[0.2em] mb-8 italic flex items-center gap-2">
                        <i class="fas fa-shield-alt"></i> Security Configuration
                    </h3>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div class="space-y-2">
                            <label class="text-[11px] font-bold text-slate-500 uppercase tracking-wider dark:text-slate-400">Admin Security PIN (Optional)</label>
                            <input type="password" name="admin_security_pin" value="{{ $settings['admin_security_pin'] ?? '' }}"
                                placeholder="Enter 4-6 digit PIN"
                                class="w-full bg-rose-50/30 border-rose-100 rounded-lg px-4 py-3 text-sm font-black text-rose-600 focus:ring-2 focus:ring-rose-500/20 transition-all dark:bg-white/5 dark:border-white/10 dark:text-rose-400">
                            <p class="text-[10px] text-slate-400 font-medium">If set, this PIN must be entered before the login form is shown. Leave empty to disable.</p>
                        </div>
                    </div>
                </div>

                <div class="pt-8 border-t border-slate-100 dark:border-white/5 flex justify-end">
                    <button type="submit"
                        class="bg-primary text-white px-10 py-4 rounded-xl font-black text-xs shadow-2xl shadow-blue-500/30 hover:bg-primary-hover transition-all transform hover:-translate-y-1 uppercase tracking-widest">
                        Apply Configuration
                    </button>
                </div>
            </div>
        </div>

        <!-- AI Configuration -->
        <div
            class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden mt-8 dark:bg-[#1a233a] dark:border-white/5">
            <div class="px-8 py-6 border-b border-slate-100 bg-slate-50/30 dark:bg-white/5 dark:border-white/5">
                <h3 class="text-lg font-bold text-primary flex items-center gap-2">
                    <i class="fas fa-robot"></i> AI Configuration
                </h3>
                <p class="text-xs text-slate-400 mt-1">Manage AI service providers and API keys.</p>
            </div>
            <div class="p-8 space-y-8">

                <!-- Gemini -->
                <div class="p-6 rounded-xl border border-slate-100 bg-slate-50/50 dark:border-white/5 dark:bg-white/5">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600">
                                <i class="fas fa-gem"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-slate-700 dark:text-slate-200">Google Gemini</h4>
                                <div class="flex items-center gap-2">
                                    <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Primary Provider</span>
                                    <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400 border border-blue-100 dark:border-blue-500/20">
                                        Used: {{ $settings['gemini_usage_count'] ?? 0 }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="hidden" name="gemini_enabled" value="false">
                            <input type="checkbox" name="gemini_enabled" value="true" class="sr-only peer"
                                {{ ($settings['gemini_enabled'] ?? 'true') === 'true' ? 'checked' : '' }}>
                            <div
                                class="w-11 h-6 bg-slate-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary">
                            </div>
                        </label>
                    </div>
                    <input type="text" name="gemini_api_key"
                        value="{{ $settings['gemini_api_key'] ?? env('GEMINI_API_KEY') }}"
                        placeholder="AIza..."
                        class="w-full bg-white border-slate-200 rounded-lg px-4 py-3 text-sm font-mono text-slate-600 focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all dark:bg-[#1a233a] dark:border-white/10 dark:text-slate-300">
                </div>

                <!-- Groq -->
                <div class="p-6 rounded-xl border border-slate-100 bg-slate-50/50 dark:border-white/5 dark:bg-white/5">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center text-orange-600">
                                <i class="fas fa-bolt"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-slate-700 dark:text-slate-200">Groq (Llama 3)</h4>
                                <div class="flex items-center gap-2">
                                    <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Fallback #1</span>
                                    <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-orange-50 text-orange-600 dark:bg-orange-500/10 dark:text-orange-400 border border-orange-100 dark:border-orange-500/20">
                                        Used: {{ $settings['groq_usage_count'] ?? 0 }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="hidden" name="groq_enabled" value="false">
                            <input type="checkbox" name="groq_enabled" value="true" class="sr-only peer"
                                {{ ($settings['groq_enabled'] ?? 'true') === 'true' ? 'checked' : '' }}>
                            <div
                                class="w-11 h-6 bg-slate-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary">
                            </div>
                        </label>
                    </div>
                    <input type="text" name="groq_api_key"
                        value="{{ $settings['groq_api_key'] ?? env('GROQ_API_KEY') }}"
                        placeholder="gsk_..."
                        class="w-full bg-white border-slate-200 rounded-lg px-4 py-3 text-sm font-mono text-slate-600 focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all dark:bg-[#1a233a] dark:border-white/10 dark:text-slate-300">
                </div>

                <!-- Mistral -->
                <div class="p-6 rounded-xl border border-slate-100 bg-slate-50/50 dark:border-white/5 dark:bg-white/5">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center text-purple-600">
                                <i class="fas fa-wind"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-slate-700 dark:text-slate-200">Mistral AI</h4>
                                <div class="flex items-center gap-2">
                                    <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Fallback #2</span>
                                    <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-purple-50 text-purple-600 dark:bg-purple-500/10 dark:text-purple-400 border border-purple-100 dark:border-purple-500/20">
                                        Used: {{ $settings['mistral_usage_count'] ?? 0 }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="hidden" name="mistral_enabled" value="false">
                            <input type="checkbox" name="mistral_enabled" value="true" class="sr-only peer"
                                {{ ($settings['mistral_enabled'] ?? 'true') === 'true' ? 'checked' : '' }}>
                            <div
                                class="w-11 h-6 bg-slate-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary">
                            </div>
                        </label>
                    </div>
                    <input type="text" name="mistral_api_key"
                        value="{{ $settings['mistral_api_key'] ?? env('MISTRAL_API_KEY') }}"
                        placeholder="Key..."
                        class="w-full bg-white border-slate-200 rounded-lg px-4 py-3 text-sm font-mono text-slate-600 focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500 transition-all dark:bg-[#1a233a] dark:border-white/10 dark:text-slate-300">
                </div>

                <div class="flex justify-end pt-4">
                    <button type="submit"
                        class="bg-primary text-white px-8 py-3 rounded-lg font-bold text-xs uppercase tracking-widest shadow-lg shadow-blue-500/20 hover:bg-primary-hover transition-all">
                        Save AI Config
                    </button>
                </div>
            </div>
        </div>

        <!-- Visual Identity & Colors -->
        <div
            class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden mt-8 dark:bg-[#1a233a] dark:border-white/5">
            <div class="px-8 py-6 border-b border-slate-100 bg-slate-50/30 dark:bg-white/5 dark:border-white/5">
                <h3 class="text-lg font-bold text-[#404e67] dark:text-slate-200">Visual Identity & Colors</h3>
                <p class="text-xs text-slate-400 mt-1">Customize the frontend color scheme to match your brand.</p>
            </div>
            <div class="p-8 space-y-12">

                <!-- Group 1: Primary Colors -->
                <div>
                    <h4 class="text-sm font-black text-primary uppercase tracking-[0.2em] mb-6 italic">1. Primary Action
                        Colors</h4>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div class="space-y-4">
                            <label
                                class="text-[11px] font-bold text-slate-500 uppercase tracking-wider dark:text-slate-400">Main
                                Primary Color</label>
                            <div class="flex items-center space-x-3">
                                <input type="color" name="color_primary"
                                    x-model="color_primary"
                                    class="w-12 h-12 rounded-lg cursor-pointer border-none bg-transparent">
                                <input type="text" x-model="color_primary"
                                    class="flex-1 bg-slate-50 border-slate-200 rounded-lg px-4 py-2.5 text-xs font-mono font-bold dark:bg-white/5 dark:border-white/10 dark:text-slate-300">
                            </div>
                        </div>
                        <div class="space-y-4">
                            <label
                                class="text-[11px] font-bold text-slate-500 uppercase tracking-wider dark:text-slate-400">Primary
                                Hover Color</label>
                            <div class="flex items-center space-x-3">
                                <input type="color" name="color_primary_hover"
                                    x-model="color_primary_hover"
                                    class="w-12 h-12 rounded-lg cursor-pointer border-none bg-transparent">
                                <input type="text" x-model="color_primary_hover"
                                    class="flex-1 bg-slate-50 border-slate-200 rounded-lg px-4 py-2.5 text-xs font-mono font-bold dark:bg-white/5 dark:border-white/10 dark:text-slate-300">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Group 2: Background Colors -->
                <div>
                    <h4 class="text-sm font-black text-primary uppercase tracking-[0.2em] mb-6 italic">2. Background
                        Colors
                    </h4>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                        @php
                            $bgGroups = [
                                'color_bg_light' => ['label' => 'Light Theme BG', 'default' => '#f2f7fb'],
                                'color_bg_dark' => ['label' => 'Dark Theme BG', 'default' => '#0f172a'],
                                'color_card_light' => ['label' => 'Card BG Light', 'default' => '#ffffff'],
                                'color_card_dark' => ['label' => 'Card BG Dark', 'default' => '#1a233a'],
                            ];
                        @endphp
                        @foreach($bgGroups as $key => $data)
                            <div class="space-y-3">
                                <label
                                    class="text-[10px] font-bold text-slate-500 uppercase tracking-wider dark:text-slate-400">{{ $data['label'] }}</label>
                                <div class="flex items-center space-x-2">
                                    <input type="color" name="{{ $key }}" x-model="{{ $key }}"
                                        class="w-10 h-10 rounded-lg cursor-pointer border-none bg-transparent">
                                    <input type="text" x-model="{{ $key }}"
                                        class="flex-1 bg-slate-50 border-slate-200 rounded-lg px-3 py-2 text-[10px] font-mono font-bold dark:bg-white/5 dark:border-white/10 dark:text-slate-400">
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- Group 3: Typography Colors -->
                <div>
                    <h4 class="text-sm font-black text-primary uppercase tracking-[0.2em] mb-6 italic">3. Typography
                        Colors
                    </h4>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                        @php
                            $textGroups = [
                                'color_text_main' => ['label' => 'Main Headings', 'default' => '#111827'],
                                'color_text_body' => ['label' => 'Body Text', 'default' => '#4b5563'],
                                'color_text_dark_main' => ['label' => 'Dark Mode Header', 'default' => '#ffffff'],
                                'color_text_dark_body' => ['label' => 'Dark Mode Body', 'default' => '#94a3b8'],
                            ];
                        @endphp
                        @foreach($textGroups as $key => $data)
                            <div class="space-y-3">
                                <label
                                    class="text-[10px] font-bold text-slate-500 uppercase tracking-wider dark:text-slate-400">{{ $data['label'] }}</label>
                                <div class="flex items-center space-x-2">
                                    <input type="color" name="{{ $key }}" x-model="{{ $key }}"
                                        class="w-10 h-10 rounded-lg cursor-pointer border-none bg-transparent">
                                    <input type="text" x-model="{{ $key }}"
                                        class="flex-1 bg-slate-50 border-slate-200 rounded-lg px-3 py-2 text-[10px] font-mono font-bold dark:bg-white/5 dark:border-white/10 dark:text-slate-400">
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- Group 4: Status Colors -->
                <div>
                    <h4 class="text-sm font-black text-primary uppercase tracking-[0.2em] mb-6 italic">4. Status Colors
                    </h4>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div class="space-y-4">
                            <label
                                class="text-[11px] font-bold text-slate-500 uppercase tracking-wider dark:text-slate-400">Success
                                Color</label>
                             <div class="flex items-center space-x-3">
                                 <input type="color" name="color_success"
                                     x-model="color_success"
                                     class="w-12 h-12 rounded-lg cursor-pointer border-none bg-transparent">
                                 <input type="text" x-model="color_success"
                                     class="flex-1 bg-slate-50 border-slate-200 rounded-lg px-4 py-2.5 text-xs font-mono font-bold dark:bg-white/5 dark:border-white/10 dark:text-slate-300">
                             </div>
                        </div>
                        <div class="space-y-4">
                            <label
                                class="text-[11px] font-bold text-slate-500 uppercase tracking-wider dark:text-slate-400">Danger
                                Color</label>
                             <div class="flex items-center space-x-3">
                                 <input type="color" name="color_danger" x-model="color_danger"
                                     class="w-12 h-12 rounded-lg cursor-pointer border-none bg-transparent">
                                 <input type="text" x-model="color_danger"
                                     class="flex-1 bg-slate-50 border-slate-200 rounded-lg px-4 py-2.5 text-xs font-mono font-bold dark:bg-white/5 dark:border-white/10 dark:text-slate-300">
                             </div>
                        </div>
                    </div>
                </div>

                <div class="pt-8 border-t border-slate-100 dark:border-white/5 flex justify-end">
                    <button type="submit"
                        class="bg-primary text-white px-10 py-4 rounded-xl font-black text-xs shadow-2xl shadow-blue-500/30 hover:bg-primary-hover transition-all transform hover:-translate-y-1 uppercase tracking-widest">
                        Save Color Palette
                    </button>
                </div>
            </div>
        </div>

        <!-- Footer Configuration -->
        <div class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden mt-8 dark:bg-[#1a233a] dark:border-white/5">
            <div class="px-8 py-6 border-b border-slate-100 bg-slate-50/30 dark:bg-white/5 dark:border-white/5">
                <h3 class="text-lg font-bold text-[#404e67] dark:text-slate-200">Footer Configuration</h3>
                <p class="text-xs text-slate-400 mt-1">Configure footer content, columns, and legal links.</p>
            </div>
            
            <div class="p-8 space-y-10">
                <!-- Copyright & General -->
                <div>
                    <h4 class="text-sm font-black text-primary uppercase tracking-[0.2em] mb-6 italic">1. Copyright & Legal</h4>
                    <div class="grid grid-cols-1 gap-6 mb-6">
                        <div class="space-y-2">
                            <label class="text-[11px] font-bold text-slate-500 uppercase tracking-wider dark:text-slate-400">Copyright Text</label>
                            <input type="text" name="footer_copyright" value="{{ $settings['footer_copyright'] ?? '© 2024 OneHost BD Cloud Hosting Company. All Rights Reserved.' }}"
                                class="w-full bg-slate-50 border-slate-200 rounded-lg px-4 py-3 text-sm font-semibold text-slate-700 focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all dark:bg-white/5 dark:border-white/10 dark:text-slate-200">
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    @for($i=1; $i<=3; $i++)
                        @php 
                            $defaultLegalLabel = $i == 1 ? 'Privacy Policy' : ($i == 2 ? 'Terms of Service' : 'Cookie Policy');
                        @endphp
                        <div class="space-y-4 bg-slate-50 p-5 rounded-xl border border-slate-100 dark:bg-white/5 dark:border-white/10">
                            <h5 class="text-xs font-bold text-slate-600 dark:text-slate-300">Legal Link {{ $i }}</h5>
                            <div class="space-y-2">
                                <label class="text-[10px] font-bold text-slate-500 uppercase tracking-wider">Label</label>
                                <input type="text" name="footer_legal{{ $i }}_label" value="{{ $settings['footer_legal'.$i.'_label'] ?? $defaultLegalLabel }}"
                                    class="w-full bg-white border-slate-200 rounded-lg px-3 py-2 text-sm font-semibold text-slate-700 focus:ring-2 focus:ring-primary/20 dark:bg-[#1a233a] dark:border-white/10 dark:text-slate-200">
                            </div>
                            <div class="space-y-2">
                                <label class="text-[10px] font-bold text-slate-500 uppercase tracking-wider">URL</label>
                                <input type="text" name="footer_legal{{ $i }}_url" value="{{ $settings['footer_legal'.$i.'_url'] ?? '#' }}"
                                    class="w-full bg-white border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-600 focus:ring-2 focus:ring-primary/20 dark:bg-[#1a233a] dark:border-white/10 dark:text-slate-300">
                            </div>
                        </div>
                    @endfor
                    </div>
                </div>

                <!-- Footer Columns -->
                <div>
                    <h4 class="text-sm font-black text-primary uppercase tracking-[0.2em] mb-6 italic">2. Footer Columns</h4>
                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                        @for($col=1; $col<=3; $col++)
                        @php 
                            $defaultTitle = $col == 1 ? 'Company' : ($col == 2 ? 'Support' : 'Resources');
                            $defaultLabels = [
                                1 => ['About Us', 'Careers', 'Blog', 'Contact'],
                                2 => ['Help Center', 'Documentation', 'Community', 'Status'],
                                3 => ['Pricing', 'API', 'Partners', 'Affiliates']
                            ];
                        @endphp
                        <div class="space-y-4 bg-slate-50/50 p-6 rounded-xl border border-slate-200 dark:bg-white/[0.02] dark:border-white/5 shadow-sm">
                            <div class="space-y-2 mb-6">
                                <label class="text-[11px] font-black text-primary uppercase tracking-wider">Column {{ $col }} Title</label>
                                <input type="text" name="footer_col{{ $col }}_title" value="{{ $settings['footer_col'.$col.'_title'] ?? $defaultTitle }}"
                                    class="w-full bg-white border-slate-200 rounded-lg px-4 py-3 text-sm font-bold text-slate-800 shadow-sm focus:ring-2 focus:ring-primary/20 dark:bg-white/5 dark:border-white/10 dark:text-slate-100">
                            </div>

                            <div class="space-y-4">
                                @for($link=1; $link<=4; $link++)
                                <div class="p-4 bg-white rounded-lg border border-slate-100 dark:bg-white/5 dark:border-white/5">
                                    <h6 class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-3">Link {{ $link }}</h6>
                                    <div class="space-y-3">
                                        <div>
                                            <input type="text" name="footer_col{{ $col }}_label_{{ $link }}" value="{{ $settings['footer_col'.$col.'_label_'.$link] ?? $defaultLabels[$col][$link-1] }}" placeholder="Label"
                                                class="w-full bg-slate-50 border-slate-200 rounded-md px-3 py-2 text-xs font-semibold text-slate-700 focus:ring-2 focus:ring-primary/20 dark:bg-[#1a233a] dark:border-white/10 dark:text-slate-300">
                                        </div>
                                        <div>
                                            <input type="text" name="footer_col{{ $col }}_url_{{ $link }}" value="{{ $settings['footer_col'.$col.'_url_'.$link] ?? '#' }}" placeholder="URL"
                                                class="w-full bg-slate-50 border-slate-200 rounded-md px-3 py-2 text-xs text-slate-600 focus:ring-2 focus:ring-primary/20 dark:bg-[#1a233a] dark:border-white/10 dark:text-slate-400">
                                        </div>
                                    </div>
                                </div>
                                @endfor
                            </div>
                        </div>
                        @endfor
                    </div>
                </div>

                <div class="flex justify-end pt-6 border-t border-slate-100 dark:border-white/5">
                    <button type="submit" class="bg-primary text-white px-8 py-3 rounded-lg font-bold text-xs uppercase tracking-widest hover:bg-primary-hover transition-all">Save Footer Settings</button>
                </div>
            </div>
        </div>

        <!-- Social Links Card -->
        <div
            class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden mt-8 dark:bg-[#1a233a] dark:border-white/5">
            <div class="px-8 py-6 border-b border-slate-100 bg-slate-50/30 dark:bg-white/5 dark:border-white/5">
                <h3 class="text-lg font-bold text-[#404e67] dark:text-slate-200">Social Media Links</h3>
                <p class="text-xs text-slate-400 mt-1">Manage your brand presence on social platforms.</p>
            </div>
            <div class="p-8 space-y-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div
                            class="flex items-center space-x-3 bg-slate-50 p-4 rounded-lg border border-slate-200 dark:bg-white/[0.02] dark:border-white/10">
                            <i class="fab fa-facebook text-blue-600 text-xl"></i>
                            <input type="text" name="social_facebook" value="{{ $settings['social_facebook'] ?? '' }}"
                                placeholder="https://facebook.com/onehostbd"
                                class="flex-1 bg-transparent border-none text-sm font-semibold text-slate-700 dark:text-slate-300 focus:ring-0">
                        </div>
                        <div
                            class="flex items-center space-x-3 bg-slate-50 p-4 rounded-lg border border-slate-200 dark:bg-white/[0.02] dark:border-white/10">
                            <i class="fab fa-x-twitter text-slate-900 dark:text-white text-xl"></i>
                            <input type="text" name="social_twitter" value="{{ $settings['social_twitter'] ?? '' }}"
                                placeholder="https://x.com/onehostbd"
                                class="flex-1 bg-transparent border-none text-sm font-semibold text-slate-700 dark:text-slate-300 focus:ring-0">
                        </div>
                        <div
                            class="flex items-center space-x-3 bg-slate-50 p-4 rounded-lg border border-slate-200 dark:bg-white/[0.02] dark:border-white/10">
                            <i class="fab fa-linkedin text-blue-700 text-xl"></i>
                            <input type="text" name="social_linkedin" value="{{ $settings['social_linkedin'] ?? '' }}"
                                placeholder="https://linkedin.com/company/onehostbd"
                                class="flex-1 bg-transparent border-none text-sm font-semibold text-slate-700 dark:text-slate-300 focus:ring-0">
                        </div>
                        <div
                            class="flex items-center space-x-3 bg-slate-50 p-4 rounded-lg border border-slate-200 dark:bg-white/[0.02] dark:border-white/10">
                            <i class="fab fa-instagram text-pink-500 text-xl"></i>
                            <input type="text" name="social_instagram" value="{{ $settings['social_instagram'] ?? '' }}"
                                placeholder="https://instagram.com/onehostbd"
                                class="flex-1 bg-transparent border-none text-sm font-semibold text-slate-700 dark:text-slate-300 focus:ring-0">
                        </div>
                        <div
                            class="flex items-center space-x-3 bg-slate-50 p-4 rounded-lg border border-slate-200 dark:bg-white/[0.02] dark:border-white/10">
                            <i class="fab fa-whatsapp text-green-500 text-xl"></i>
                            <input type="text" name="social_whatsapp" value="{{ $settings['social_whatsapp'] ?? '' }}"
                                placeholder="+8801700000000"
                                class="flex-1 bg-transparent border-none text-sm font-semibold text-slate-700 dark:text-slate-300 focus:ring-0">
                        </div>
                        <div
                            class="flex items-center space-x-3 bg-slate-50 p-4 rounded-lg border border-slate-200 dark:bg-white/[0.02] dark:border-white/10">
                            <i class="fab fa-youtube text-red-600 text-xl"></i>
                            <input type="text" name="social_youtube" value="{{ $settings['social_youtube'] ?? '' }}"
                                placeholder="https://youtube.com/@onehostbd"
                                class="flex-1 bg-transparent border-none text-sm font-semibold text-slate-700 dark:text-slate-300 focus:ring-0">
                        </div>
                    </div>
                    <div class="flex justify-end pt-6">
                        <button type="submit"
                            class="bg-slate-800 text-white px-6 py-2.5 rounded-lg font-bold text-xs uppercase tracking-widest hover:bg-slate-900 transition-all dark:bg-primary dark:hover:bg-primary-hover">Save
                            Links</button>
                    </div>
            </div>
        </div>

        <!-- Floating Save Button -->
        <div class="fixed bottom-8 right-8 z-50">
            <button type="submit"
                class="bg-primary text-white px-8 py-4 rounded-2xl font-black text-sm shadow-[0_20px_50px_rgba(78,79,235,0.3)] hover:bg-primary-hover transition-all transform hover:-translate-y-1 active:scale-95 uppercase tracking-widest flex items-center gap-3">
                <i class="fas fa-save"></i>
                Save All Settings
            </button>
        </div>
    </form>
@endsection