

<?php $__env->startSection('content'); ?>
<div class="max-w-7xl mx-auto">
    <!-- Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-800 dark:text-white">Settings</h1>
        <p class="text-gray-600 dark:text-gray-400 mt-2">Manage your account settings and preferences</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
        <!-- Settings Sidebar -->
        <div class="lg:col-span-1">
            <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800 overflow-hidden">
                <div class="p-6 border-b border-gray-100 dark:border-gray-800">
                    <h3 class="font-semibold text-gray-800 dark:text-white">Settings</h3>
                </div>
                <nav class="p-4 space-y-2">
                    <button data-tab="profile" class="tab-btn w-full text-left p-3 rounded-xl bg-primary-50 dark:bg-primary-900/20 text-primary-600 dark:text-primary-400 font-medium transition-all duration-200">
                        <i class="fas fa-user-circle mr-3"></i>
                        Profile Information
                    </button>
                    <button data-tab="security" class="tab-btn w-full text-left p-3 rounded-xl text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 font-medium transition-all duration-200">
                        <i class="fas fa-shield-alt mr-3"></i>
                        Security Settings
                    </button>
                    <button data-tab="notifications" class="tab-btn w-full text-left p-3 rounded-xl text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 font-medium transition-all duration-200">
                        <i class="fas fa-bell mr-3"></i>
                        Notifications
                    </button>
                    <button data-tab="billing" class="tab-btn w-full text-left p-3 rounded-xl text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 font-medium transition-all duration-200">
                        <i class="fas fa-credit-card mr-3"></i>
                        Billing & Plans
                    </button>
                    <button data-tab="privacy" class="tab-btn w-full text-left p-3 rounded-xl text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 font-medium transition-all duration-200">
                        <i class="fas fa-lock mr-3"></i>
                        Privacy & Data
                    </button>
                    <button data-tab="preferences" class="tab-btn w-full text-left p-3 rounded-xl text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 font-medium transition-all duration-200">
                        <i class="fas fa-cog mr-3"></i>
                        Preferences
                    </button>
                </nav>
            </div>
        </div>

        <!-- Settings Content -->
        <div class="lg:col-span-3">
            <!-- Profile Information Tab -->
            <div id="profile" class="tab-content">
                <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800 overflow-hidden">
                    <div class="p-6 border-b border-gray-100 dark:border-gray-800">
                        <h2 class="text-xl font-bold text-gray-800 dark:text-white">Profile Information</h2>
                        <p class="text-gray-600 dark:text-gray-400 mt-1">Update your personal information and profile details</p>
                    </div>
                    <div class="p-6">
                        <form class="space-y-6">
                            <div class="flex items-center space-x-6">
                                <div class="relative">
                                    <div class="w-20 h-20 bg-gradient-to-r from-primary-500 to-accent-500 rounded-2xl flex items-center justify-center">
                                        <span class="text-white text-xl font-bold">JC</span>
                                    </div>
                                    <button type="button" class="absolute -bottom-2 -right-2 w-8 h-8 bg-primary-500 rounded-full flex items-center justify-center text-white hover:bg-primary-600 transition-colors">
                                        <i class="fas fa-camera text-sm"></i>
                                    </button>
                                </div>
                                <div>
                                    <h3 class="font-semibold text-gray-800 dark:text-white">Profile Photo</h3>
                                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">JPG, GIF or PNG. Max size 2MB</p>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">First Name</label>
                                    <input type="text" value="John" class="w-full px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-transparent dark:bg-dark-tertiary dark:text-white transition-all duration-200">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Last Name</label>
                                    <input type="text" value="Client" class="w-full px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-transparent dark:bg-dark-tertiary dark:text-white transition-all duration-200">
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
                                <input type="email" value="john.client@example.com" class="w-full px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-transparent dark:bg-dark-tertiary dark:text-white transition-all duration-200">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Phone Number</label>
                                <input type="tel" value="+1 (555) 123-4567" class="w-full px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-transparent dark:bg-dark-tertiary dark:text-white transition-all duration-200">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Company</label>
                                <input type="text" value="Tech Solutions Inc." class="w-full px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-transparent dark:bg-dark-tertiary dark:text-white transition-all duration-200">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Bio</label>
                                <textarea rows="4" class="w-full px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-transparent dark:bg-dark-tertiary dark:text-white transition-all duration-200">Security enthusiast and technology advisor with 8+ years of experience in cybersecurity.</textarea>
                            </div>

                            <div class="flex justify-end space-x-4 pt-6">
                                <button type="button" class="px-6 py-3 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200">
                                    Cancel
                                </button>
                                <button type="submit" class="px-6 py-3 bg-primary-500 text-white rounded-xl hover:bg-primary-600 transition-colors duration-200 font-medium">
                                    Save Changes
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Security Settings Tab -->
            <div id="security" class="tab-content hidden">
                <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800 overflow-hidden">
                    <div class="p-6 border-b border-gray-100 dark:border-gray-800">
                        <h2 class="text-xl font-bold text-gray-800 dark:text-white">Security Settings</h2>
                        <p class="text-gray-600 dark:text-gray-400 mt-1">Manage your password and security preferences</p>
                    </div>
                    <div class="p-6 space-y-6">
                        <!-- Password Change -->
                        <div class="border-b border-gray-100 dark:border-gray-800 pb-6">
                            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Change Password</h3>
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Current Password</label>
                                    <input type="password" class="w-full px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-transparent dark:bg-dark-tertiary dark:text-white transition-all duration-200">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">New Password</label>
                                    <input type="password" class="w-full px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-transparent dark:bg-dark-tertiary dark:text-white transition-all duration-200">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Confirm New Password</label>
                                    <input type="password" class="w-full px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-transparent dark:bg-dark-tertiary dark:text-white transition-all duration-200">
                                </div>
                                <button class="px-6 py-3 bg-primary-500 text-white rounded-xl hover:bg-primary-600 transition-colors duration-200 font-medium">
                                    Update Password
                                </button>
                            </div>
                        </div>

                        <!-- Two-Factor Authentication -->
                        <div class="border-b border-gray-100 dark:border-gray-800 pb-6">
                            <div class="flex items-center justify-between">
                                <div>
                                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Two-Factor Authentication</h3>
                                    <p class="text-gray-600 dark:text-gray-400 mt-1">Add an extra layer of security to your account</p>
                                </div>
                                <div class="flex items-center space-x-3">
                                    <span class="px-3 py-1 bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300 rounded-full text-sm font-medium">Disabled</span>
                                    <button class="px-4 py-2 bg-primary-500 text-white rounded-xl hover:bg-primary-600 transition-colors duration-200 text-sm font-medium">
                                        Enable
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Session Management -->
                        <div>
                            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Active Sessions</h3>
                            <div class="space-y-4">
                                <div class="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-xl">
                                    <div class="flex items-center space-x-4">
                                        <i class="fas fa-desktop text-xl text-primary-500"></i>
                                        <div>
                                            <p class="font-medium text-gray-800 dark:text-white">Chrome on Windows</p>
                                            <p class="text-sm text-gray-600 dark:text-gray-400">New York, USA • Last active: 2 hours ago</p>
                                        </div>
                                    </div>
                                    <span class="px-3 py-1 bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 rounded-full text-sm font-medium">Current</span>
                                </div>
                                <div class="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-xl">
                                    <div class="flex items-center space-x-4">
                                        <i class="fas fa-mobile-alt text-xl text-gray-500"></i>
                                        <div>
                                            <p class="font-medium text-gray-800 dark:text-white">Safari on iPhone</p>
                                            <p class="text-sm text-gray-600 dark:text-gray-400">California, USA • Last active: 1 day ago</p>
                                        </div>
                                    </div>
                                    <button class="text-red-500 hover:text-red-600 transition-colors">
                                        <i class="fas fa-sign-out-alt"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Notifications Tab -->
            <div id="notifications" class="tab-content hidden">
                <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800 overflow-hidden">
                    <div class="p-6 border-b border-gray-100 dark:border-gray-800">
                        <h2 class="text-xl font-bold text-gray-800 dark:text-white">Notification Preferences</h2>
                        <p class="text-gray-600 dark:text-gray-400 mt-1">Choose how you want to be notified</p>
                    </div>
                    <div class="p-6 space-y-6">
                        <!-- Email Notifications -->
                        <div>
                            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Email Notifications</h3>
                            <div class="space-y-4">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="font-medium text-gray-800 dark:text-white">Security Alerts</p>
                                        <p class="text-sm text-gray-600 dark:text-gray-400">Important security updates and alerts</p>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer" checked>
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none 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-500"></div>
                                    </label>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="font-medium text-gray-800 dark:text-white">Project Updates</p>
                                        <p class="text-sm text-gray-600 dark:text-gray-400">Updates on your active projects</p>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer" checked>
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none 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-500"></div>
                                    </label>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="font-medium text-gray-800 dark:text-white">Billing Notifications</p>
                                        <p class="text-sm text-gray-600 dark:text-gray-400">Invoice and payment reminders</p>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer">
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none 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-500"></div>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Push Notifications -->
                        <div>
                            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Push Notifications</h3>
                            <div class="space-y-4">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="font-medium text-gray-800 dark:text-white">New Messages</p>
                                        <p class="text-sm text-gray-600 dark:text-gray-400">When you receive new messages</p>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer" checked>
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none 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-500"></div>
                                    </label>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="font-medium text-gray-800 dark:text-white">Project Milestones</p>
                                        <p class="text-sm text-gray-600 dark:text-gray-400">When projects reach important milestones</p>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer">
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none 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-500"></div>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Billing & Plans Tab -->
            <div id="billing" class="tab-content hidden">
                <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800 overflow-hidden">
                    <div class="p-6 border-b border-gray-100 dark:border-gray-800">
                        <h2 class="text-xl font-bold text-gray-800 dark:text-white">Billing & Plans</h2>
                        <p class="text-gray-600 dark:text-gray-400 mt-1">Manage your subscription and billing information</p>
                    </div>
                    <div class="p-6 space-y-6">
                        <!-- Current Plan -->
                        <div class="border-b border-gray-100 dark:border-gray-800 pb-6">
                            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Current Plan</h3>
                            <div class="bg-gradient-to-r from-primary-50 to-accent-50 dark:from-primary-900/20 dark:to-accent-900/20 rounded-2xl p-6">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <h4 class="text-xl font-bold text-gray-800 dark:text-white">Premium Plan</h4>
                                        <p class="text-gray-600 dark:text-gray-400 mt-1">$99/month • Billed monthly</p>
                                        <p class="text-sm text-green-600 dark:text-green-400 mt-2">
                                            <i class="fas fa-check-circle mr-1"></i>
                                            Active until Dec 15, 2023
                                        </p>
                                    </div>
                                    <div class="text-right">
                                        <p class="text-2xl font-bold text-gray-800 dark:text-white">$99</p>
                                        <p class="text-gray-600 dark:text-gray-400">per month</p>
                                    </div>
                                </div>
                                <div class="mt-6 flex space-x-4">
                                    <button class="px-6 py-3 bg-primary-500 text-white rounded-xl hover:bg-primary-600 transition-colors duration-200 font-medium">
                                        Upgrade Plan
                                    </button>
                                    <button class="px-6 py-3 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200">
                                        Cancel Subscription
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Payment Method -->
                        <div class="border-b border-gray-100 dark:border-gray-800 pb-6">
                            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Payment Method</h3>
                            <div class="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-xl">
                                <div class="flex items-center space-x-4">
                                    <div class="w-12 h-8 bg-blue-500 rounded flex items-center justify-center">
                                        <i class="fab fa-cc-visa text-white"></i>
                                    </div>
                                    <div>
                                        <p class="font-medium text-gray-800 dark:text-white">Visa ending in 4242</p>
                                        <p class="text-sm text-gray-600 dark:text-gray-400">Expires 12/2024</p>
                                    </div>
                                </div>
                                <button class="text-primary-500 hover:text-primary-600 transition-colors">
                                    Edit
                                </button>
                            </div>
                            <button class="mt-4 flex items-center space-x-2 text-primary-500 hover:text-primary-600 transition-colors">
                                <i class="fas fa-plus"></i>
                                <span>Add Payment Method</span>
                            </button>
                        </div>

                        <!-- Billing History -->
                        <div>
                            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Billing History</h3>
                            <div class="space-y-4">
                                <div class="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-xl">
                                    <div>
                                        <p class="font-medium text-gray-800 dark:text-white">Invoice #INV-2023-011</p>
                                        <p class="text-sm text-gray-600 dark:text-gray-400">Nov 15, 2023</p>
                                    </div>
                                    <div class="text-right">
                                        <p class="font-medium text-gray-800 dark:text-white">$99.00</p>
                                        <span class="px-2 py-1 bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 rounded-full text-xs">Paid</span>
                                    </div>
                                </div>
                                <div class="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-xl">
                                    <div>
                                        <p class="font-medium text-gray-800 dark:text-white">Invoice #INV-2023-010</p>
                                        <p class="text-sm text-gray-600 dark:text-gray-400">Oct 15, 2023</p>
                                    </div>
                                    <div class="text-right">
                                        <p class="font-medium text-gray-800 dark:text-white">$99.00</p>
                                        <span class="px-2 py-1 bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 rounded-full text-xs">Paid</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Privacy & Data Tab -->
            <div id="privacy" class="tab-content hidden">
                <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800 overflow-hidden">
                    <div class="p-6 border-b border-gray-100 dark:border-gray-800">
                        <h2 class="text-xl font-bold text-gray-800 dark:text-white">Privacy & Data</h2>
                        <p class="text-gray-600 dark:text-gray-400 mt-1">Control your data and privacy settings</p>
                    </div>
                    <div class="p-6 space-y-6">
                        <!-- Data Collection -->
                        <div class="border-b border-gray-100 dark:border-gray-800 pb-6">
                            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Data Collection</h3>
                            <div class="space-y-4">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="font-medium text-gray-800 dark:text-white">Usage Analytics</p>
                                        <p class="text-sm text-gray-600 dark:text-gray-400">Help us improve by sharing usage data</p>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer" checked>
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none 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-500"></div>
                                    </label>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="font-medium text-gray-800 dark:text-white">Marketing Emails</p>
                                        <p class="text-sm text-gray-600 dark:text-gray-400">Receive updates about new features</p>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer">
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none 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-500"></div>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Data Export -->
                        <div class="border-b border-gray-100 dark:border-gray-800 pb-6">
                            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Data Export</h3>
                            <p class="text-gray-600 dark:text-gray-400 mb-4">Download a copy of your personal data</p>
                            <button class="px-6 py-3 border border-primary-500 text-primary-500 rounded-xl hover:bg-primary-50 dark:hover:bg-primary-900/20 transition-colors duration-200 font-medium">
                                <i class="fas fa-download mr-2"></i>
                                Export My Data
                            </button>
                        </div>

                        <!-- Account Deletion -->
                        <div>
                            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Account Deletion</h3>
                            <p class="text-gray-600 dark:text-gray-400 mb-4">Permanently delete your account and all associated data</p>
                            <button class="px-6 py-3 bg-red-500 text-white rounded-xl hover:bg-red-600 transition-colors duration-200 font-medium">
                                <i class="fas fa-trash mr-2"></i>
                                Delete Account
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Preferences Tab -->
            <div id="preferences" class="tab-content hidden">
                <div class="bg-white dark:bg-dark-secondary rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800 overflow-hidden">
                    <div class="p-6 border-b border-gray-100 dark:border-gray-800">
                        <h2 class="text-xl font-bold text-gray-800 dark:text-white">Preferences</h2>
                        <p class="text-gray-600 dark:text-gray-400 mt-1">Customize your experience</p>
                    </div>
                    <div class="p-6 space-y-6">
                        <!-- Language & Region -->
                        <div class="border-b border-gray-100 dark:border-gray-800 pb-6">
                            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Language & Region</h3>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Language</label>
                                    <select class="w-full px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-transparent dark:bg-dark-tertiary dark:text-white transition-all duration-200">
                                        <option>English</option>
                                        <option>Spanish</option>
                                        <option>French</option>
                                        <option>German</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Time Zone</label>
                                    <select class="w-full px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-transparent dark:bg-dark-tertiary dark:text-white transition-all duration-200">
                                        <option>Eastern Time (ET)</option>
                                        <option>Central Time (CT)</option>
                                        <option>Pacific Time (PT)</option>
                                        <option>UTC</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Display Preferences -->
                        <div class="border-b border-gray-100 dark:border-gray-800 pb-6">
                            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Display Preferences</h3>
                            <div class="space-y-4">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="font-medium text-gray-800 dark:text-white">Dark Mode</p>
                                        <p class="text-sm text-gray-600 dark:text-gray-400">Switch between light and dark themes</p>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer" id="darkModeToggle">
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none 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-500"></div>
                                    </label>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="font-medium text-gray-800 dark:text-white">Compact Mode</p>
                                        <p class="text-sm text-gray-600 dark:text-gray-400">Use compact spacing for lists</p>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer">
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none 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-500"></div>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Accessibility -->
                        <div>
                            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Accessibility</h3>
                            <div class="space-y-4">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="font-medium text-gray-800 dark:text-white">High Contrast Mode</p>
                                        <p class="text-sm text-gray-600 dark:text-gray-400">Increase color contrast for better visibility</p>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer">
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none 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-500"></div>
                                    </label>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="font-medium text-gray-800 dark:text-white">Reduced Motion</p>
                                        <p class="text-sm text-gray-600 dark:text-gray-400">Minimize animations and transitions</p>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" class="sr-only peer">
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none 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-500"></div>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Tab switching functionality
    document.addEventListener('DOMContentLoaded', function() {
        const tabButtons = document.querySelectorAll('.tab-btn');
        const tabContents = document.querySelectorAll('.tab-content');

        tabButtons.forEach(button => {
            button.addEventListener('click', function() {
                const targetTab = this.getAttribute('data-tab');

                // Update active tab button
                tabButtons.forEach(btn => {
                    btn.classList.remove('bg-primary-50', 'dark:bg-primary-900/20', 'text-primary-600', 'dark:text-primary-400');
                    btn.classList.add('text-gray-600', 'dark:text-gray-400', 'hover:bg-gray-50', 'dark:hover:bg-gray-800');
                });
                this.classList.add('bg-primary-50', 'dark:bg-primary-900/20', 'text-primary-600', 'dark:text-primary-400');
                this.classList.remove('text-gray-600', 'dark:text-gray-400', 'hover:bg-gray-50', 'dark:hover:bg-gray-800');

                // Show target tab content
                tabContents.forEach(content => {
                    content.classList.add('hidden');
                });
                document.getElementById(targetTab).classList.remove('hidden');
            });
        });

        // Dark mode toggle
        const darkModeToggle = document.getElementById('darkModeToggle');
        if (localStorage.theme === 'dark' || (!localStorage.theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark');
            darkModeToggle.checked = true;
        }

        darkModeToggle.addEventListener('change', function() {
            if (this.checked) {
                document.documentElement.classList.add('dark');
                localStorage.theme = 'dark';
            } else {
                document.documentElement.classList.remove('dark');
                localStorage.theme = 'light';
            }
        });
    });
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('dashboard.layout', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\crm_new\resources\views/dashboard/settings.blade.php ENDPATH**/ ?>