<?php $__env->startSection('content'); ?>
    <div class="md:max-w-[80%] max-w-[90%] mx-auto min-h-screen bg-[#f8f9fa]">
        <div class="md:mt-0 mt-16 bg-white border-b border-[#E5E7EB] px-8 py-6">
            <h1 class="text-2xl font-bold text-[#101828]">Settings</h1>
            <p class="text-[#4A5565] mt-1">Manage your account settings and preferences</p>
        </div>

        <div class="flex-1 overflow-auto px-0 py-2">
            <div class="max-w-4xl">
                <?php if(session('status') === 'settings-updated'): ?>
                    <div id="status-alert" class="p-4 mb-6 flex items-center text-green-700 bg-green-100 rounded-lg shadow-md transition-opacity duration-500" role="alert">
                        <svg class="flex-shrink-0 w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                        </svg>
                        <div class="ml-3 text-sm font-bold">
                            Settings updated successfully!
                        </div>
                        <button type="button" onclick="document.getElementById('status-alert').style.display='none'" class="ml-auto -mx-1.5 -my-1.5 p-1.5 inline-flex h-8 w-8 items-center justify-center rounded-lg hover:bg-emerald-700 transition-colors">
                            <span class="sr-only">Close</span>
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                            </svg>
                        </button>
                    </div>
                <?php endif; ?>
                <form action="<?php echo e(route('settings.update')); ?>" method="POST" id="settingsForm">
                    <?php echo csrf_field(); ?>
                    <?php echo method_field('PATCH'); ?>

                    
                    <input type="hidden" name="active_tab" id="active_tab_input" value="account">

                    <div class="flex md:flex-row flex-col gap-8">
                        <div class="md:w-72 w-full flex-shrink-0">
                            <div class="bg-white rounded-lg border border-[#E5E7EB] p-4 sticky top-8">
                                <nav class="space-y-2">
                                    <button type="button" onclick="switchTab('account')" data-tab="account"
                                        class="settings-tab w-full flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-colors">
                                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                            <path d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"></path>
                                        </svg>
                                        Account
                                        </button>
                                        <button type="button" onclick="switchTab('privacy')" data-tab="privacy"
                                            class="settings-tab w-full flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-colors">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0zM2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
                                            </path>
                                        </svg>
                                        Privacy
                                        </button>
                                        <button type="button" onclick="switchTab('notifications')" data-tab="notifications"
                                            class="settings-tab w-full flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-colors">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9">
                                            </path>
                                        </svg>
                                        Notifications
                                        </button>
                                        <button type="button" onclick="switchTab('security')" data-tab="security"
                                            class="settings-tab w-full flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-colors">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
                                            </path>
                                        </svg>
                                        Security
                                        </button>
                                        <button type="button" onclick="switchTab('preferences')" data-tab="preferences"
                                            class="settings-tab w-full flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-colors">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                                        </svg>
                                        Data & Preferences
                                        </button>
                                        </nav>
                                        </div>
                                        </div>

                        <div class="flex-1">
                            <div id="account" class="settings-section bg-white rounded-lg border border-[#E5E7EB] p-8 mb-6" data-section="account">
                                <h2 class="text-lg font-semibold text-[#101828] mb-6">Profile Information</h2>

                                <div class="grid grid-cols-2 gap-6 mb-6">
                                    <div>
                                        <label class="block text-sm font-medium text-[#101828] mb-2">First Name</label>
                                        <input type="text" name="first_name" value="<?php echo e(explode(' ', $user->name)[0]); ?>"
                                            class="w-full px-4 py-2 border border-[#D0D5DD] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#2F3D7E]">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-[#101828] mb-2">Last Name</label>
                                        <input type="text" name="last_name"
                                            value="<?php echo e(count(explode(' ', $user->name)) > 1 ? implode(' ', array_slice(explode(' ', $user->name), 1)) : ''); ?>"
                                            class="w-full px-4 py-2 border border-[#D0D5DD] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#2F3D7E]">
                                        </div>
                                        </div>

                                <div class="mb-6">
                                    <label class="block text-sm font-medium text-[#101828] mb-2">Username</label>
                                    <input type="text" name="user_name" value="<?php echo e($user->user_name); ?>"
                                        class="w-full px-4 py-2 border border-[#D0D5DD] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#2F3D7E]">
                                    </div>

                                <div class="mb-6">
                                    <label class="block text-sm font-medium text-[#101828] mb-2">Email Address</label>
                                    <input type="email" name="email" value="<?php echo e($user->email); ?>"
                                        class="w-full px-4 py-2 border border-[#D0D5DD] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#2F3D7E]">
                                    </div>

                                <div class="mb-6">
                                    <label class="block text-sm font-medium text-[#101828] mb-2">Job Title</label>
                                    <input type="text" name="job_title" value="<?php echo e($activeJob->job_title ?? ''); ?>"
                                        class="w-full px-4 py-2 border border-[#D0D5DD] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#2F3D7E]">
                                    </div>

                                <div class="mb-6">
                                    <label class="block text-sm font-medium text-[#101828] mb-2">Company</label>
                                    <input type="text" name="company" value="<?php echo e($activeJob->company_name ?? ''); ?>"
                                        class="w-full px-4 py-2 border border-[#D0D5DD] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#2F3D7E]">
                                    </div>

                                <div class="mb-8">
                                    <label class="block text-sm font-medium text-[#101828] mb-2">Location</label>
                                    <input type="text" name="location" value="<?php echo e($activeJob->location ?? ''); ?>"
                                        class="w-full px-4 py-2 border border-[#D0D5DD] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#2F3D7E]">
                                    </div>

                                
                                <div class="pt-6 border-t border-[#E5E7EB] mb-8">
                                    <h2 class="text-lg font-semibold text-[#101828] mb-6">Email Preferences</h2>
                                    <div class="space-y-4">
                                        <div class="flex items-start gap-3">
                                            <input type="checkbox" name="product_updates" id="product-updates"
                                                class="mt-1 w-4 h-4 rounded border-[#D0D5DD]" <?php echo e($user->product_updates ? 'checked' : ''); ?>>
                                            <div class="flex-1">
                                                <label for="product-updates" class="block font-medium text-[#101828]">Product Updates</label>
                                                <p class="text-sm text-[#4A5565]">Get notified about new features and updates</p>
                                            </div>
                                        </div>
                                        <div class="flex items-start gap-3">
                                            <input type="checkbox" name="weekly_reports" id="weekly-reports"
                                                class="mt-1 w-4 h-4 rounded border-[#D0D5DD]" <?php echo e($user->weekly_reports ? 'checked' : ''); ?>>
                                            <div class="flex-1">
                                                <label for="weekly-reports" class="block font-medium text-[#101828]">Weekly Reports</label>
                                                <p class="text-sm text-[#4A5565]">Receive weekly salary insights and trends</p>
                                            </div>
                                        </div>
                                        <div class="flex items-start gap-3">
                                            <input type="checkbox" name="marketing_emails" id="marketing-emails"
                                                class="mt-1 w-4 h-4 rounded border-[#D0D5DD]" <?php echo e($user->marketing_emails ? 'checked' : ''); ?>>
                                            <div class="flex-1">
                                                <label for="marketing-emails" class="block font-medium text-[#101828]">Marketing Emails</label>
                                                <p class="text-sm text-[#4A5565]">Promotional content and special offers</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="flex justify-end gap-4 pt-6 border-t border-[#E5E7EB]">
                                    <button type="button"
                                        class="px-6 py-2 text-[#4A5565] border border-[#D0D5DD] rounded-lg font-medium hover:bg-gray-50 transition-colors">Cancel</button>
                                    <button type="submit"
                                        class="px-6 py-2 bg-[#2F3D7E] text-white rounded-lg font-medium hover:bg-[#1A234A] transition-colors">Save
                                        Changes</button>
                                    </div>
                                    </div>

                            <div id="privacy" class="settings-section bg-white rounded-lg border border-[#E5E7EB] p-8 mb-6 hidden"
                                data-section="privacy">
                                <h2 class="text-lg font-semibold text-[#101828] mb-6">Profile Visibility</h2>

                                <div class="mb-8">
                                    <label class="block text-sm font-medium text-[#101828] mb-3">Who can see your profile?</label>
                                    <select name="profile_visibility"
                                        class="w-full px-4 py-3 border border-[#D0D5DD] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#2F3D7E] bg-white">
                                        <option value="public" <?php echo e($user->profile_visibility == 'public' ? 'selected' : ''); ?>>Everyone</option>
                                        <option value="connections" <?php echo e($user->profile_visibility == 'connections' ? 'selected' : ''); ?>>Connections
                                            Only</option>
                                        <option value="private" <?php echo e($user->profile_visibility == 'private' ? 'selected' : ''); ?>>Private</option>
                                        </select>
                                        </div>

                                <div class="mb-8">
                                    <label class="block text-sm font-medium text-[#101828] mb-3">Display name</label>
                                    <select name="display_name_format"
                                        class="w-full px-4 py-3 border border-[#D0D5DD] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#2F3D7E] bg-white">
                                        <option value="full_name" <?php echo e($user->display_name_format == 'full_name' ? 'selected' : ''); ?>>Full Name</option>
                                        <option value="first_name" <?php echo e($user->display_name_format == 'first_name' ? 'selected' : ''); ?>>First Name Only
                                        </option>
                                        <option value="username" <?php echo e($user->display_name_format == 'username' ? 'selected' : ''); ?>>Username</option>
                                        </select>
                                        </div>

                                <h3 class="text-lg font-semibold text-[#101828] mb-4 pt-6 border-t border-[#E5E7EB]">Salary Data Privacy</h3>

                                <div class="space-y-4 mb-6">
                                    <div class="flex items-start gap-3">
                                        <input type="checkbox" name="include_in_stats" id="public-stats"
                                            class="mt-1 w-4 h-4 rounded border-[#D0D5DD] accent-[#2F3D7E]" <?php echo e($user->include_in_stats ? 'checked' : ''); ?>>
                                        <div class="flex-1">
                                            <label for="public-stats" class="block font-medium text-[#101828]">Include my data in public
                                                statistics</label>
                                            <p class="text-sm text-[#4A5565]">Help improve market insights (anonymised)</p>
                                            </div>
                                            </div>
                                            <div class="flex items-start gap-3">
                                        <input type="checkbox" name="show_salary_to_connections" id="salary-connections"
                                            class="mt-1 w-4 h-4 rounded border-[#D0D5DD] accent-[#2F3D7E]" <?php echo e($user->show_salary_to_connections ? 'checked' : ''); ?>>
                                        <div class="flex-1">
                                            <label for="salary-connections" class="block font-medium text-[#101828]">Show salary details to
                                                connections</label>
                                            <p class="text-sm text-[#4A5565]">Allow trusted connections to view your compensation</p>
                                            </div>
                                            </div>
                                            <div class="flex items-start gap-3">
                                        <input type="checkbox" name="allow_comparison_requests" id="salary-comparison"
                                            class="mt-1 w-4 h-4 rounded border-[#D0D5DD] accent-[#2F3D7E]" <?php echo e($user->allow_comparison_requests ? 'checked' : ''); ?>>
                                        <div class="flex-1">
                                            <label for="salary-comparison" class="block font-medium text-[#101828]">Allow salary comparison
                                                requests</label>
                                            <p class="text-sm text-[#4A5565]">Other users can request to compare salaries with you</p>
                                            </div>
                                            </div>
                                            </div>

                                <h3 class="text-lg font-semibold text-[#101828] mb-4 pt-6 border-t border-[#E5E7EB]">Activity Privacy</h3>

                                <div class="space-y-4">
                                    <div class="flex items-start gap-3">
                                        <input type="checkbox" name="show_activity_to_connections" id="activity-connections"
                                            class="mt-1 w-4 h-4 rounded border-[#D0D5DD] accent-[#2F3D7E]" <?php echo e($user->show_activity_to_connections ? 'checked' : ''); ?>>
                                        <div class="flex-1">
                                            <label for="activity-connections" class="block font-medium text-[#101828]">Show my activity to
                                                connections</label>
                                            <p class="text-sm text-[#4A5565]">Posts, comments, and likes</p>
                                            </div>
                                            </div>
                                            <div class="flex items-start gap-3">
                                        <input type="checkbox" name="show_online_status" id="online-status"
                                            class="mt-1 w-4 h-4 rounded border-[#D0D5DD] accent-[#2F3D7E]" <?php echo e($user->show_online_status ? 'checked' : ''); ?>>
                                        <div class="flex-1">
                                            <label for="online-status" class="block font-medium text-[#101828]">Show when I'm online</label>
                                            <p class="text-sm text-[#4A5565]">Display active status to other users</p>
                                        </div>
                                        </div>
                                        </div>

                                        <div class="flex justify-end gap-4 pt-6 border-t border-[#E5E7EB] mt-6">
                                    <button type="submit"
                                        class="px-6 py-2 bg-[#2F3D7E] text-white rounded-lg font-medium hover:bg-[#1A234A] transition-colors">Save
                                        Privacy Settings</button>
                                    </div>
                                    </div>

                            <div id="notifications" class="settings-section bg-white rounded-lg border border-[#E5E7EB] p-8 mb-6 hidden"
                                data-section="notifications">
                                <h2 class="text-lg font-semibold text-[#101828] mb-6">Notification Preferences</h2>

                                <div class="space-y-6">
                                    <div>
                                        <h3 class="font-semibold text-[#101828] mb-4">Email Notifications</h3>
                                        <div class="space-y-4">
                                            <div class="flex items-start gap-3">
                                                <input type="checkbox" name="notify_messages" id="email-messages"
                                                    class="mt-1 w-4 h-4 rounded border-[#D0D5DD] accent-[#2F3D7E]" <?php echo e($user->notify_messages ? 'checked' : ''); ?>>
                                                <div class="flex-1">
                                                    <label for="email-messages" class="block font-medium text-[#101828]">New messages</label>
                                                    <p class="text-sm text-[#4A5565]">Get notified when you receive a new message</p>
                                                </div>
                                                </div>
                                                <div class="flex items-start gap-3">
                                                <input type="checkbox" name="notify_connections" id="email-connections"
                                                    class="mt-1 w-4 h-4 rounded border-[#D0D5DD] accent-[#2F3D7E]" <?php echo e($user->notify_connections ? 'checked' : ''); ?>>
                                                <div class="flex-1">
                                                    <label for="email-connections" class="block font-medium text-[#101828]">Connection
                                                        requests</label>
                                                    <p class="text-sm text-[#4A5565]">Notify when someone wants to connect with you</p>
                                                    </div>
                                                    </div>
                                                    <div class="flex items-start gap-3">
                                                <input type="checkbox" name="notify_activity" id="email-activity"
                                                    class="mt-1 w-4 h-4 rounded border-[#D0D5DD] accent-[#2F3D7E]" <?php echo e($user->notify_activity ? 'checked' : ''); ?>>
                                                <div class="flex-1">
                                                    <label for="email-activity" class="block font-medium text-[#101828]">Activity on your
                                                        posts</label>
                                                    <p class="text-sm text-[#4A5565]">Likes, comments, and shares on your posts</p>
                                                    </div>
                                                    </div>
                                                    </div>
                                                    </div>

                                    <div class="pt-6 border-t border-[#E5E7EB]">
                                        <h3 class="font-semibold text-[#101828] mb-4">Push Notifications</h3>
                                        <div class="space-y-4">
                                            <div class="flex items-start gap-3">
                                                <input type="checkbox" name="push_messages" id="push-messages"
                                                    class="mt-1 w-4 h-4 rounded border-[#D0D5DD] accent-[#2F3D7E]" <?php echo e($user->push_messages ? 'checked' : ''); ?>>
                                                <div class="flex-1">
                                                    <label for="push-messages" class="block font-medium text-[#101828]">Messages</label>
                                                    <p class="text-sm text-[#4A5565]">Receive push notifications for messages</p>
                                                </div>
                                                </div>
                                                <div class="flex items-start gap-3">
                                                <input type="checkbox" name="push_alerts" id="push-alerts"
                                                    class="mt-1 w-4 h-4 rounded border-[#D0D5DD] accent-[#2F3D7E]" <?php echo e($user->push_alerts ? 'checked' : ''); ?>>
                                                <div class="flex-1">
                                                    <label for="push-alerts" class="block font-medium text-[#101828]">Important alerts</label>
                                                    <p class="text-sm text-[#4A5565]">Critical account and security alerts</p>
                                                </div>
                                                </div>
                                                </div>
                                                </div>
                                                </div>

                                                <div class="flex justify-end pt-6 border-t border-[#E5E7EB] mt-6">
                                        <button type="submit"
                                            class="px-6 py-2 bg-[#2F3D7E] text-white rounded-lg font-medium hover:bg-[#1A234A] transition-colors">Save
                                            Preferences</button>
                                        </div>
                                        </div>

                            <div id="security" class="settings-section bg-white rounded-lg border border-[#E5E7EB] p-8 mb-6 hidden"
                                data-section="security">
                                <h2 class="text-lg font-semibold text-[#101828] mb-6">Security Settings</h2>
                                <div class="space-y-6">
                                    <div class="pb-6 border-b border-[#E5E7EB]">
                                        <h3 class="font-semibold text-[#101828] mb-3">Password</h3>
                                        <p class="text-sm text-[#4A5565] mb-4">Change your password regularly to keep your account secure</p>

                                        <div class="mb-8">
                                            <label class="block text-sm font-medium text-[#101828] mb-2">Current Password</label>
                                            <div class="relative w-full">
                                                <input type="password" name="current_password" id="current_password"
                                                    class="w-full px-4 py-2.5 border <?php $__errorArgs = ['current_password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> border-red-500 <?php else: ?> border-[#D0D5DD] <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?> rounded-lg focus:outline-none focus:ring-2 focus:ring-[#2F3D7E]">
                                                <button type="button" onclick="togglePassword('current_password')" 
                                                    class="absolute inset-y-0 right-0 pr-4 flex items-center text-gray-500 hover:text-[#2F3D7E] transition-colors">
                                                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" id="current_password_icon">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                                    </svg>
                                                </button>
                                            </div>
                                            <?php $__errorArgs = ['current_password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <p class="text-red-500 text-xs mt-1"><?php echo e($message); ?></p> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                        </div>

                                        <div class="mb-8">
                                            <label class="block text-sm font-medium text-[#101828] mb-2">New Password</label>
                                            <div class="relative w-full">
                                                <input type="password" name="password" id="password"
                                                    class="w-full px-4 py-2.5 border <?php $__errorArgs = ['password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> border-red-500 <?php else: ?> border-[#D0D5DD] <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?> rounded-lg focus:outline-none focus:ring-2 focus:ring-[#2F3D7E]">
                                                <button type="button" onclick="togglePassword('password')" 
                                                    class="absolute inset-y-0 right-0 pr-4 flex items-center text-gray-500 hover:text-[#2F3D7E] transition-colors">
                                                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" id="password_icon">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                                    </svg>
                                                </button>
                                            </div>
                                            <?php $__errorArgs = ['password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> <p class="text-red-500 text-xs mt-1"><?php echo e($message); ?></p> <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                        </div>

                                        <div class="mb-8">
                                            <label class="block text-sm font-medium text-[#101828] mb-2">Confirm New Password</label>
                                            <div class="relative w-full">
                                                <input type="password" name="password_confirmation" id="password_confirmation"
                                                    class="w-full px-4 py-2.5 border border-[#D0D5DD] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#2F3D7E]">
                                                <button type="button" onclick="togglePassword('password_confirmation')" 
                                                    class="absolute inset-y-0 right-0 pr-4 flex items-center text-gray-500 hover:text-[#2F3D7E] transition-colors">
                                                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" id="password_confirmation_icon">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                                    </svg>
                                                </button>
                                            </div>
                                        </div>

                                        <div class="flex justify-end mt-4">
                                            <button type="submit"
                                                class="px-6 py-2 bg-[#2F3D7E] text-white rounded-lg font-medium hover:bg-[#1A234A] transition-colors">
                                                Change Password
                                            </button>
                                        </div>
            
                                    </div>
                                        
                                        <input type="hidden" name="email" value="<?php echo e($user->email); ?>">
                                </div>
                            </div>

                            <div id="preferences" class="settings-section bg-white rounded-lg border border-[#E5E7EB] p-8 mb-6 hidden"
                                data-section="preferences">
                                <h2 class="text-lg font-semibold text-[#101828] mb-6">Data & Preferences</h2>
                                <div class="space-y-6">
                                    <div class="pb-6 border-b border-[#E5E7EB]">
                                        <h3 class="font-semibold text-[#101828] mb-3">Language</h3>
                                        <select name="language"
                                            class="w-full px-4 py-3 border border-[#D0D5DD] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#2F3D7E] bg-white">
                                            <option value="en_US" <?php echo e($user->language == 'en_US' ? 'selected' : ''); ?>>English (US)</option>
                                            <option value="en_GB" <?php echo e($user->language == 'en_GB' ? 'selected' : ''); ?>>English (UK)</option>
                                        </select>
                                        </div>
                                        <div class="pb-6 border-b border-[#E5E7EB]">
                                            <h3 class="font-semibold text-[#101828] mb-3">Theme</h3>
                                        <select name="theme"
                                            class="w-full px-4 py-3 border border-[#D0D5DD] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#2F3D7E] bg-white">
                                            <option value="light" <?php echo e($user->theme == 'light' ? 'selected' : ''); ?>>Light</option>
                                            <option value="dark" <?php echo e($user->theme == 'dark' ? 'selected' : ''); ?>>Dark</option>
                                        </select>
                                        </div>
                                        <div class="flex justify-end">
                                        <button type="submit"
                                            class="px-6 py-2 bg-[#2F3D7E] text-white rounded-lg font-medium hover:bg-[#1A234A] transition-colors">Save
                                            Preferences</button>
                                        </div>
                                        </div>
                                        </div>
                                        </div>
                                        </div>
                                        </form>
                                        </div>
                                        </div>
                                        </div>

    <script>
        function switchTab(tabName) {
            // Hide all sections
            document.querySelectorAll('.settings-section').forEach(section => section.classList.add('hidden'));

            // Reset all tabs
            document.querySelectorAll('.settings-tab').forEach(tab => {
                tab.classList.remove('bg-[#2F3D7E]', 'text-white');
                tab.classList.add('text-[#4A5565]', 'hover:bg-gray-50');
            });

            // Show selected section
            const section = document.querySelector(`[data-section="${tabName}"]`);
            if (section) section.classList.remove('hidden');

            // Highlight selected tab
            const activeTab = document.querySelector(`[data-tab="${tabName}"]`);
            if (activeTab) {
                activeTab.classList.remove('text-[#4A5565]', 'hover:bg-gray-50');
                activeTab.classList.add('bg-[#2F3D7E]', 'text-white');
            }

            // Update hidden input for backend redirection
            document.getElementById('active_tab_input').value = tabName;
        }

        // On page load, check URL hash or fallback to active tab input
        document.addEventListener('DOMContentLoaded', function () {
            <?php if($errors->has('current_password') || $errors->has('password')): ?>
                switchTab('security');
            <?php elseif($errors->has('first_name') || $errors->has('last_name') || $errors->has('user_name') || $errors->has('email')): ?>
                switchTab('account');
            <?php else: ?>
                // If no errors, check URL Hash or fallback to 'account'
                const hash = window.location.hash.replace('#', '') || 'account';
                switchTab(hash);
            <?php endif; ?>

            const statusAlert = document.getElementById('status-alert');
            if (statusAlert) {
                setTimeout(() => {
                    statusAlert.style.opacity = '0';
                    setTimeout(() => statusAlert.remove(), 500);
                }, 5000);
            }
        });

        function togglePassword(inputId) {
            const input = document.getElementById(inputId);
            const icon = document.getElementById(inputId + '_icon');
            
            if (input.type === 'password') {
                input.type = 'text';
                // Change icon to "eye-off"
                icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l18 18" />';
            } else {
                input.type = 'password';
                // Reset to "eye"
                icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />';
            }
        }

    </script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.dashboard', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /var/www/ratemypay/resources/views/dashboard/settings/index.blade.php ENDPATH**/ ?>