@extends('admin.layouts.app')

@section('title', 'Settings')

@section('content')
<div class="space-y-6" x-data="{ activeTab: 'general' }">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h1 class="text-2xl font-bold text-slate-800 dark:text-white">Settings</h1>
            <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Manage your store configuration</p>
        </div>
    </div>

    @if(session('success'))
    <div class="bg-emerald-50 dark:bg-emerald-900/30 border border-emerald-200 dark:border-emerald-800 text-emerald-700 dark:text-emerald-400 px-4 py-3 rounded-xl">
        {{ session('success') }}
    </div>
    @endif

    <!-- Tabs Navigation -->
    <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700">
        <div class="border-b border-slate-200 dark:border-slate-700">
            <nav class="flex space-x-1 p-2 overflow-x-auto">
                <button @click="activeTab = 'general'" :class="activeTab === 'general' ? 'bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-400' : 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700'" class="px-4 py-2 rounded-xl text-sm font-medium whitespace-nowrap transition-colors">
                    <i data-lucide="settings" class="w-4 h-4 inline mr-2"></i>General
                </button>
                <button @click="activeTab = 'social'" :class="activeTab === 'social' ? 'bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-400' : 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700'" class="px-4 py-2 rounded-xl text-sm font-medium whitespace-nowrap transition-colors">
                    <i data-lucide="share-2" class="w-4 h-4 inline mr-2"></i>Social Media
                </button>
                <button @click="activeTab = 'analytics'" :class="activeTab === 'analytics' ? 'bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-400' : 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700'" class="px-4 py-2 rounded-xl text-sm font-medium whitespace-nowrap transition-colors">
                    <i data-lucide="bar-chart-2" class="w-4 h-4 inline mr-2"></i>Analytics
                </button>
                <button @click="activeTab = 'fraud'" :class="activeTab === 'fraud' ? 'bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-400' : 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700'" class="px-4 py-2 rounded-xl text-sm font-medium whitespace-nowrap transition-colors">
                    <i data-lucide="shield" class="w-4 h-4 inline mr-2"></i>Fraud Prevention
                </button>
                <button @click="activeTab = 'email'" :class="activeTab === 'email' ? 'bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-400' : 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700'" class="px-4 py-2 rounded-xl text-sm font-medium whitespace-nowrap transition-colors">
                    <i data-lucide="mail" class="w-4 h-4 inline mr-2"></i>Email & SMS
                </button>
                <button @click="activeTab = 'theme'" :class="activeTab === 'theme' ? 'bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-400' : 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700'" class="px-4 py-2 rounded-xl text-sm font-medium whitespace-nowrap transition-colors">
                    <i data-lucide="palette" class="w-4 h-4 inline mr-2"></i>Theme
                </button>
            </nav>
        </div>

        <form action="{{ route('admin.settings.update') }}" method="POST" class="p-6" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <!-- General Settings Tab -->
            <div x-show="activeTab === 'general'" x-cloak>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Site Name</label>
                        <input type="text" name="site_name" value="{{ $settings['site_name'] ?? '' }}"
                            class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Tagline</label>
                        <input type="text" name="site_tagline" value="{{ $settings['site_tagline'] ?? '' }}"
                            class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Site Logo</label>
                        @if(!empty($settings['logo']))
                        <div class="mb-2">
                            <img src="{{ asset('storage/' . $settings['logo']) }}" alt="Logo" class="h-12 object-contain bg-slate-100 dark:bg-slate-700 rounded-lg p-2">
                        </div>
                        @endif
                        <input type="file" name="logo" accept="image/*"
                            class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                        <p class="mt-1 text-xs text-slate-500">Recommended: PNG with transparent background</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Favicon</label>
                        @if(!empty($settings['favicon']))
                        <div class="mb-2">
                            <img src="{{ asset('storage/' . $settings['favicon']) }}" alt="Favicon" class="h-8 w-8 object-contain bg-slate-100 dark:bg-slate-700 rounded-lg p-1">
                        </div>
                        @endif
                        <input type="file" name="favicon" accept="image/*"
                            class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                        <p class="mt-1 text-xs text-slate-500">Recommended: 32x32 or 64x64 PNG/ICO</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Contact Email</label>
                        <input type="email" name="contact_email" value="{{ $settings['contact_email'] ?? '' }}"
                            class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Contact Phone</label>
                        <input type="text" name="contact_phone" value="{{ $settings['contact_phone'] ?? '' }}"
                            class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Address</label>
                        <textarea name="address" rows="2"
                            class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">{{ $settings['address'] ?? '' }}</textarea>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Business Hours</label>
                        <input type="text" name="business_hours" value="{{ $settings['business_hours'] ?? '' }}" placeholder="Sat-Thu: 10AM - 8PM"
                            class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Footer Description</label>
                        <textarea name="footer_description" rows="2" placeholder="Your trusted online shopping destination..."
                            class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">{{ $settings['footer_description'] ?? '' }}</textarea>
                    </div>
                </div>
            </div>

            <!-- Social Media Tab -->
            <div x-show="activeTab === 'social'" x-cloak>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
                            <i data-lucide="facebook" class="w-4 h-4 inline mr-1 text-blue-600"></i>Facebook URL
                        </label>
                        <input type="url" name="facebook_url" value="{{ $settings['facebook_url'] ?? '' }}"
                            class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
                            <i data-lucide="instagram" class="w-4 h-4 inline mr-1 text-pink-600"></i>Instagram URL
                        </label>
                        <input type="url" name="instagram_url" value="{{ $settings['instagram_url'] ?? '' }}"
                            class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
                            <i data-lucide="youtube" class="w-4 h-4 inline mr-1 text-red-600"></i>YouTube URL
                        </label>
                        <input type="url" name="youtube_url" value="{{ $settings['youtube_url'] ?? '' }}"
                            class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
                            <i data-lucide="message-circle" class="w-4 h-4 inline mr-1 text-green-600"></i>WhatsApp Number
                        </label>
                        <input type="text" name="whatsapp_number" value="{{ $settings['whatsapp_number'] ?? '' }}" placeholder="01XXXXXXXXX"
                            class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
                            <i data-lucide="twitter" class="w-4 h-4 inline mr-1 text-sky-500"></i>Twitter/X URL
                        </label>
                        <input type="url" name="twitter_url" value="{{ $settings['twitter_url'] ?? '' }}"
                            class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
                            <i data-lucide="linkedin" class="w-4 h-4 inline mr-1 text-blue-700"></i>LinkedIn URL
                        </label>
                        <input type="url" name="linkedin_url" value="{{ $settings['linkedin_url'] ?? '' }}"
                            class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                    </div>
                </div>
            </div>

            <!-- Analytics Tab -->
            <div x-show="activeTab === 'analytics'" x-cloak>
                <div class="space-y-6">
                    <div class="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-xl border border-blue-200 dark:border-blue-800">
                        <h4 class="font-medium text-blue-800 dark:text-blue-300 mb-2">
                            <i data-lucide="info" class="w-4 h-4 inline mr-1"></i>Analytics Integration
                        </h4>
                        <p class="text-sm text-blue-600 dark:text-blue-400">Add your tracking IDs to enable analytics on your store.</p>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Google Analytics ID</label>
                            <input type="text" name="google_analytics_id" value="{{ $settings['google_analytics_id'] ?? '' }}" placeholder="G-XXXXXXXXXX"
                                class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                            <p class="mt-1 text-xs text-slate-500">Format: G-XXXXXXXXXX or UA-XXXXXXXX-X</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Google Tag Manager ID</label>
                            <input type="text" name="gtm_id" value="{{ $settings['gtm_id'] ?? '' }}" placeholder="GTM-XXXXXXX"
                                class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                            <p class="mt-1 text-xs text-slate-500">Format: GTM-XXXXXXX</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Facebook Pixel ID</label>
                            <input type="text" name="facebook_pixel_id" value="{{ $settings['facebook_pixel_id'] ?? '' }}" placeholder="XXXXXXXXXXXXXXXX"
                                class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                            <p class="mt-1 text-xs text-slate-500">15-16 digit number from Facebook Business</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">TikTok Pixel ID</label>
                            <input type="text" name="tiktok_pixel_id" value="{{ $settings['tiktok_pixel_id'] ?? '' }}" placeholder="XXXXXXXXXXXXXXXX"
                                class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Fraud Prevention Tab -->
            <div x-show="activeTab === 'fraud'" x-cloak>
                <div class="space-y-6">
                    <!-- Nirvor API -->
                    <div class="p-4 bg-orange-50 dark:bg-orange-900/20 rounded-xl border border-orange-200 dark:border-orange-800">
                        <div class="flex items-center justify-between mb-2">
                            <h4 class="font-medium text-orange-800 dark:text-orange-300">Fraud Check API (Nirvor)</h4>
                            <a href="https://nirvor.app" target="_blank" class="text-xs text-orange-600 hover:underline">Get API Keys →</a>
                        </div>
                        <p class="text-sm text-orange-600 dark:text-orange-400">Check customer courier history before processing orders.</p>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">API Key</label>
                            <input type="text" name="fraud_check_api_key" value="{{ $settings['fraud_check_api_key'] ?? '' }}"
                                class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">API Secret</label>
                            <input type="password" name="fraud_check_api_secret" value="{{ $settings['fraud_check_api_secret'] ?? '' }}"
                                class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                        </div>
                    </div>

                    <!-- Duplicate Order Prevention -->
                    <div class="border-t border-slate-200 dark:border-slate-700 pt-6">
                        <h4 class="font-medium text-slate-800 dark:text-white mb-4">Duplicate Order Prevention</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Blocking Period</label>
                                <select name="duplicate_order_hours" class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                                    <option value="1" {{ ($settings['duplicate_order_hours'] ?? '24') == '1' ? 'selected' : '' }}>1 Hour</option>
                                    <option value="6" {{ ($settings['duplicate_order_hours'] ?? '24') == '6' ? 'selected' : '' }}>6 Hours</option>
                                    <option value="12" {{ ($settings['duplicate_order_hours'] ?? '24') == '12' ? 'selected' : '' }}>12 Hours</option>
                                    <option value="24" {{ ($settings['duplicate_order_hours'] ?? '24') == '24' ? 'selected' : '' }}>24 Hours</option>
                                    <option value="48" {{ ($settings['duplicate_order_hours'] ?? '24') == '48' ? 'selected' : '' }}>48 Hours</option>
                                </select>
                            </div>
                            <div class="flex items-center">
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" name="duplicate_order_enabled" value="1" {{ ($settings['duplicate_order_enabled'] ?? '1') == '1' ? 'checked' : '' }} class="sr-only peer">
                                    <div class="w-11 h-6 bg-slate-200 peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                                    <span class="ml-3 text-sm font-medium text-slate-700 dark:text-slate-300">Enable blocking</span>
                                </label>
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Blocking Message (shown to customer)</label>
                                <textarea name="duplicate_order_message" rows="2" placeholder="আপনি ইতিমধ্যে একটি অর্ডার করেছেন..."
                                    class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">{{ $settings['duplicate_order_message'] ?? 'আপনি ইতিমধ্যে একটি অর্ডার করেছেন। অনুগ্রহ করে কিছুক্ষণ পর আবার চেষ্টা করুন অথবা আমাদের সাথে যোগাযোগ করুন।' }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Email & SMS Tab -->
            <div x-show="activeTab === 'email'" x-cloak>
                <div class="space-y-6">
                    <!-- SMTP Settings -->
                    <div>
                        <h4 class="font-medium text-slate-800 dark:text-white mb-4">SMTP Email Settings</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">SMTP Host</label>
                                <input type="text" name="smtp_host" value="{{ $settings['smtp_host'] ?? '' }}" placeholder="smtp.gmail.com"
                                    class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">SMTP Port</label>
                                <input type="text" name="smtp_port" value="{{ $settings['smtp_port'] ?? '587' }}" placeholder="587"
                                    class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">SMTP Username</label>
                                <input type="text" name="smtp_username" value="{{ $settings['smtp_username'] ?? '' }}"
                                    class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">SMTP Password</label>
                                <input type="password" name="smtp_password" value="{{ $settings['smtp_password'] ?? '' }}"
                                    class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">From Email</label>
                                <input type="email" name="mail_from_address" value="{{ $settings['mail_from_address'] ?? '' }}"
                                    class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">From Name</label>
                                <input type="text" name="mail_from_name" value="{{ $settings['mail_from_name'] ?? '' }}"
                                    class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                            </div>
                        </div>
                    </div>

                    <!-- SMS Gateway -->
                    <div class="border-t border-slate-200 dark:border-slate-700 pt-6">
                        <h4 class="font-medium text-slate-800 dark:text-white mb-4">SMS Gateway</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">SMS Provider</label>
                                <select name="sms_provider" class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                                    <option value="">Select Provider</option>
                                    <option value="bulksmsbd" {{ ($settings['sms_provider'] ?? '') == 'bulksmsbd' ? 'selected' : '' }}>BulkSMSBD</option>
                                    <option value="sslwireless" {{ ($settings['sms_provider'] ?? '') == 'sslwireless' ? 'selected' : '' }}>SSL Wireless</option>
                                    <option value="mimsms" {{ ($settings['sms_provider'] ?? '') == 'mimsms' ? 'selected' : '' }}>MIM SMS</option>
                                    <option value="twilio" {{ ($settings['sms_provider'] ?? '') == 'twilio' ? 'selected' : '' }}>Twilio</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">API Key</label>
                                <input type="text" name="sms_api_key" value="{{ $settings['sms_api_key'] ?? '' }}"
                                    class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Sender ID</label>
                                <input type="text" name="sms_sender_id" value="{{ $settings['sms_sender_id'] ?? '' }}"
                                    class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white focus:ring-2 focus:ring-indigo-500">
                            </div>
                            <div class="flex items-center">
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" name="sms_enabled" value="1" {{ ($settings['sms_enabled'] ?? '') == '1' ? 'checked' : '' }} class="sr-only peer">
                                    <div class="w-11 h-6 bg-slate-200 peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                                    <span class="ml-3 text-sm font-medium text-slate-700 dark:text-slate-300">Enable SMS notifications</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Theme Tab -->
            <div x-show="activeTab === 'theme'" x-cloak>
                <div class="space-y-6">
                    <!-- Color Settings -->
                    <div>
                        <h4 class="font-medium text-slate-800 dark:text-white mb-4">Color Settings</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Primary Color</label>
                                <div class="flex items-center space-x-3">
                                    <input type="color" name="primary_color" value="{{ $settings['primary_color'] ?? '#e2007c' }}"
                                        class="w-12 h-10 rounded-lg border border-slate-200 dark:border-slate-600 cursor-pointer">
                                    <input type="text" name="primary_color_text" value="{{ $settings['primary_color'] ?? '#e2007c' }}" 
                                        class="flex-1 px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                                </div>
                                <p class="mt-1 text-xs text-slate-500">Main brand color (buttons, links, highlights)</p>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Secondary Color</label>
                                <div class="flex items-center space-x-3">
                                    <input type="color" name="secondary_color" value="{{ $settings['secondary_color'] ?? '#5e308a' }}"
                                        class="w-12 h-10 rounded-lg border border-slate-200 dark:border-slate-600 cursor-pointer">
                                    <input type="text" name="secondary_color_text" value="{{ $settings['secondary_color'] ?? '#5e308a' }}" 
                                        class="flex-1 px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                                </div>
                                <p class="mt-1 text-xs text-slate-500">Footer, secondary buttons</p>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Header Background</label>
                                <div class="flex items-center space-x-3">
                                    <input type="color" name="header_bg_color" value="{{ $settings['header_bg_color'] ?? '#ffffff' }}"
                                        class="w-12 h-10 rounded-lg border border-slate-200 dark:border-slate-600 cursor-pointer">
                                    <input type="text" name="header_bg_color_text" value="{{ $settings['header_bg_color'] ?? '#ffffff' }}" 
                                        class="flex-1 px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Footer Background</label>
                                <div class="flex items-center space-x-3">
                                    <input type="color" name="footer_bg_color" value="{{ $settings['footer_bg_color'] ?? '#5e308a' }}"
                                        class="w-12 h-10 rounded-lg border border-slate-200 dark:border-slate-600 cursor-pointer">
                                    <input type="text" name="footer_bg_color_text" value="{{ $settings['footer_bg_color'] ?? '#5e308a' }}" 
                                        class="flex-1 px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Menu Background</label>
                                <div class="flex items-center space-x-3">
                                    <input type="color" name="menu_bg_color" value="{{ $settings['menu_bg_color'] ?? '#e2097d' }}"
                                        class="w-12 h-10 rounded-lg border border-slate-200 dark:border-slate-600 cursor-pointer">
                                    <input type="text" name="menu_bg_color_text" value="{{ $settings['menu_bg_color'] ?? '#e2097d' }}" 
                                        class="flex-1 px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Button Color</label>
                                <div class="flex items-center space-x-3">
                                    <input type="color" name="btn_color" value="{{ $settings['btn_color'] ?? '#5e308a' }}"
                                        class="w-12 h-10 rounded-lg border border-slate-200 dark:border-slate-600 cursor-pointer">
                                    <input type="text" name="btn_color_text" value="{{ $settings['btn_color'] ?? '#5e308a' }}" 
                                        class="flex-1 px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Sale Badge Color</label>
                                <div class="flex items-center space-x-3">
                                    <input type="color" name="sale_badge_color" value="{{ $settings['sale_badge_color'] ?? '#e2007c' }}"
                                        class="w-12 h-10 rounded-lg border border-slate-200 dark:border-slate-600 cursor-pointer">
                                    <input type="text" name="sale_badge_color_text" value="{{ $settings['sale_badge_color'] ?? '#e2007c' }}" 
                                        class="flex-1 px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Price Color</label>
                                <div class="flex items-center space-x-3">
                                    <input type="color" name="price_color" value="{{ $settings['price_color'] ?? '#e2007c' }}"
                                        class="w-12 h-10 rounded-lg border border-slate-200 dark:border-slate-600 cursor-pointer">
                                    <input type="text" name="price_color_text" value="{{ $settings['price_color'] ?? '#e2007c' }}" 
                                        class="flex-1 px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Typography Settings -->
                    <div class="border-t border-slate-200 dark:border-slate-700 pt-6">
                        <h4 class="font-medium text-slate-800 dark:text-white mb-4">Typography</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Primary Font</label>
                                <select name="primary_font" class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                                    <option value="Hind Siliguri" {{ ($settings['primary_font'] ?? '') == 'Hind Siliguri' ? 'selected' : '' }}>Hind Siliguri (Bengali)</option>
                                    <option value="Poppins" {{ ($settings['primary_font'] ?? '') == 'Poppins' ? 'selected' : '' }}>Poppins</option>
                                    <option value="Inter" {{ ($settings['primary_font'] ?? '') == 'Inter' ? 'selected' : '' }}>Inter</option>
                                    <option value="Roboto" {{ ($settings['primary_font'] ?? '') == 'Roboto' ? 'selected' : '' }}>Roboto</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Heading Font</label>
                                <select name="heading_font" class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                                    <option value="Poppins" {{ ($settings['heading_font'] ?? '') == 'Poppins' ? 'selected' : '' }}>Poppins</option>
                                    <option value="Hind Siliguri" {{ ($settings['heading_font'] ?? '') == 'Hind Siliguri' ? 'selected' : '' }}>Hind Siliguri (Bengali)</option>
                                    <option value="Inter" {{ ($settings['heading_font'] ?? '') == 'Inter' ? 'selected' : '' }}>Inter</option>
                                    <option value="Roboto" {{ ($settings['heading_font'] ?? '') == 'Roboto' ? 'selected' : '' }}>Roboto</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Layout Settings -->
                    <div class="border-t border-slate-200 dark:border-slate-700 pt-6">
                        <h4 class="font-medium text-slate-800 dark:text-white mb-4">Layout Settings</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Products Per Row (Desktop)</label>
                                <select name="products_per_row" class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                                    <option value="4" {{ ($settings['products_per_row'] ?? '5') == '4' ? 'selected' : '' }}>4 Products</option>
                                    <option value="5" {{ ($settings['products_per_row'] ?? '5') == '5' ? 'selected' : '' }}>5 Products</option>
                                    <option value="6" {{ ($settings['products_per_row'] ?? '5') == '6' ? 'selected' : '' }}>6 Products</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Border Radius</label>
                                <select name="border_radius" class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                                    <option value="none" {{ ($settings['border_radius'] ?? 'rounded') == 'none' ? 'selected' : '' }}>None (Sharp)</option>
                                    <option value="sm" {{ ($settings['border_radius'] ?? 'rounded') == 'sm' ? 'selected' : '' }}>Small</option>
                                    <option value="rounded" {{ ($settings['border_radius'] ?? 'rounded') == 'rounded' ? 'selected' : '' }}>Medium (Default)</option>
                                    <option value="lg" {{ ($settings['border_radius'] ?? 'rounded') == 'lg' ? 'selected' : '' }}>Large</option>
                                    <option value="full" {{ ($settings['border_radius'] ?? 'rounded') == 'full' ? 'selected' : '' }}>Full (Pill)</option>
                                </select>
                            </div>
                            <div class="flex items-center">
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" name="show_stock_bar" value="1" {{ ($settings['show_stock_bar'] ?? '1') == '1' ? 'checked' : '' }} class="sr-only peer">
                                    <div class="w-11 h-6 bg-slate-200 peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                                    <span class="ml-3 text-sm font-medium text-slate-700 dark:text-slate-300">Show Stock Progress Bar</span>
                                </label>
                            </div>
                            <div class="flex items-center">
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" name="show_sale_badge" value="1" {{ ($settings['show_sale_badge'] ?? '1') == '1' ? 'checked' : '' }} class="sr-only peer">
                                    <div class="w-11 h-6 bg-slate-200 peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                                    <span class="ml-3 text-sm font-medium text-slate-700 dark:text-slate-300">Show Sale Badge on Products</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-6 pt-6 border-t border-slate-200 dark:border-slate-700 flex justify-end">
                <button type="submit" class="px-6 py-2 bg-indigo-600 text-white rounded-xl text-sm font-medium hover:bg-indigo-700 transition-colors">
                    <i data-lucide="save" class="w-4 h-4 inline mr-2"></i>Save Settings
                </button>
            </div>
        </form>
    </div>
</div>
@endsection