{% extends 'accounts/base.html' %}
{% load static %}

{% block title %}Settings - Accounts{% endblock %}

{% block breadcrumb_items %}
    <li class="breadcrumb-item active">Settings</li>
{% endblock %}

{% block page_title %}Account Settings{% endblock %}

{% block page_actions %}
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-primary" onclick="saveAllSettings()">
            <i class="fas fa-save me-1"></i>Save All Changes
        </button>
        <button type="button" class="btn btn-outline-secondary" onclick="resetToDefaults()">
            <i class="fas fa-undo me-1"></i>Reset to Defaults
        </button>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-outline-info dropdown-toggle" data-bs-toggle="dropdown">
                <i class="fas fa-download me-1"></i>Export
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="?export=json"><i class="fas fa-file-code me-1"></i>Export as JSON</a></li>
                <li><a class="dropdown-item" href="?export=csv"><i class="fas fa-file-csv me-1"></i>Export as CSV</a></li>
            </ul>
        </div>
    </div>
{% endblock %}

{% block content %}
<div class="row">
    <!-- Settings Navigation -->
    <div class="col-lg-3">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-cog me-2"></i>Settings</h5>
            </div>
            <div class="list-group list-group-flush">
                <a href="#general" class="list-group-item list-group-item-action active" data-bs-toggle="pill">
                    <i class="fas fa-user me-2"></i>General
                </a>
                <a href="#security" class="list-group-item list-group-item-action" data-bs-toggle="pill">
                    <i class="fas fa-shield-alt me-2"></i>Security
                </a>
                <a href="#notifications" class="list-group-item list-group-item-action" data-bs-toggle="pill">
                    <i class="fas fa-bell me-2"></i>Notifications
                </a>
                <a href="#privacy" class="list-group-item list-group-item-action" data-bs-toggle="pill">
                    <i class="fas fa-eye-slash me-2"></i>Privacy
                </a>
                <a href="#system" class="list-group-item list-group-item-action" data-bs-toggle="pill">
                    <i class="fas fa-server me-2"></i>System
                </a>
                <a href="#advanced" class="list-group-item list-group-item-action" data-bs-toggle="pill">
                    <i class="fas fa-tools me-2"></i>Advanced
                </a>
            </div>
        </div>
    </div>
    
    <!-- Settings Content -->
    <div class="col-lg-9">
        <div class="tab-content">
            <!-- General Settings -->
            <div class="tab-pane fade show active" id="general">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">General Settings</h5>
                    </div>
                    <div class="card-body">
                        <form id="generalForm">
                            {% csrf_token %}
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="site_name" class="form-label">Site Name</label>
                                        <input type="text" class="form-control" id="site_name" name="site_name" 
                                               value="{{ settings.site_name }}" placeholder="Enter site name">
                                        <div class="form-text">The name of your application or organization.</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="site_description" class="form-label">Site Description</label>
                                        <input type="text" class="form-control" id="site_description" name="site_description" 
                                               value="{{ settings.site_description }}" placeholder="Brief description">
                                        <div class="form-text">A brief description of your site.</div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="default_timezone" class="form-label">Default Timezone</label>
                                        <select class="form-select" id="default_timezone" name="default_timezone">
                                            {% for tz in timezones %}
                                                <option value="{{ tz.0 }}" {% if tz.0 == settings.default_timezone %}selected{% endif %}>
                                                    {{ tz.1 }}
                                                </option>
                                            {% endfor %}
                                        </select>
                                        <div class="form-text">Default timezone for new users.</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="default_language" class="form-label">Default Language</label>
                                        <select class="form-select" id="default_language" name="default_language">
                                            {% for lang in languages %}
                                                <option value="{{ lang.0 }}" {% if lang.0 == settings.default_language %}selected{% endif %}>
                                                    {{ lang.1 }}
                                                </option>
                                            {% endfor %}
                                        </select>
                                        <div class="form-text">Default language for the interface.</div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="date_format" class="form-label">Date Format</label>
                                        <select class="form-select" id="date_format" name="date_format">
                                            <option value="Y-m-d" {% if settings.date_format == 'Y-m-d' %}selected{% endif %}>YYYY-MM-DD</option>
                                            <option value="m/d/Y" {% if settings.date_format == 'm/d/Y' %}selected{% endif %}>MM/DD/YYYY</option>
                                            <option value="d/m/Y" {% if settings.date_format == 'd/m/Y' %}selected{% endif %}>DD/MM/YYYY</option>
                                            <option value="F j, Y" {% if settings.date_format == 'F j, Y' %}selected{% endif %}>Month DD, YYYY</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="time_format" class="form-label">Time Format</label>
                                        <select class="form-select" id="time_format" name="time_format">
                                            <option value="H:i" {% if settings.time_format == 'H:i' %}selected{% endif %}>24-hour (HH:MM)</option>
                                            <option value="g:i A" {% if settings.time_format == 'g:i A' %}selected{% endif %}>12-hour (H:MM AM/PM)</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="allow_registration" name="allow_registration" 
                                           {% if settings.allow_registration %}checked{% endif %}>
                                    <label class="form-check-label" for="allow_registration">
                                        Allow User Registration
                                    </label>
                                </div>
                                <div class="form-text">Allow new users to register accounts.</div>
                            </div>
                            
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="require_email_verification" name="require_email_verification" 
                                           {% if settings.require_email_verification %}checked{% endif %}>
                                    <label class="form-check-label" for="require_email_verification">
                                        Require Email Verification
                                    </label>
                                </div>
                                <div class="form-text">New users must verify their email address.</div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
            <!-- Security Settings -->
            <div class="tab-pane fade" id="security">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">Security Settings</h5>
                    </div>
                    <div class="card-body">
                        <form id="securityForm">
                            {% csrf_token %}
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="password_min_length" class="form-label">Minimum Password Length</label>
                                        <input type="number" class="form-control" id="password_min_length" name="password_min_length" 
                                               value="{{ settings.password_min_length }}" min="6" max="50">
                                        <div class="form-text">Minimum number of characters for passwords.</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="max_login_attempts" class="form-label">Max Login Attempts</label>
                                        <input type="number" class="form-control" id="max_login_attempts" name="max_login_attempts" 
                                               value="{{ settings.max_login_attempts }}" min="3" max="10">
                                        <div class="form-text">Maximum failed login attempts before account lock.</div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="account_lockout_duration" class="form-label">Account Lockout Duration (minutes)</label>
                                        <input type="number" class="form-control" id="account_lockout_duration" name="account_lockout_duration" 
                                               value="{{ settings.account_lockout_duration }}" min="5" max="1440">
                                        <div class="form-text">How long accounts remain locked after max attempts.</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="session_timeout" class="form-label">Session Timeout (hours)</label>
                                        <input type="number" class="form-control" id="session_timeout" name="session_timeout" 
                                               value="{{ settings.session_timeout }}" min="1" max="168">
                                        <div class="form-text">Automatic logout after inactivity.</div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="require_strong_passwords" name="require_strong_passwords" 
                                           {% if settings.require_strong_passwords %}checked{% endif %}>
                                    <label class="form-check-label" for="require_strong_passwords">
                                        Require Strong Passwords
                                    </label>
                                </div>
                                <div class="form-text">Passwords must contain uppercase, lowercase, numbers, and symbols.</div>
                            </div>
                            
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="enable_two_factor" name="enable_two_factor" 
                                           {% if settings.enable_two_factor %}checked{% endif %}>
                                    <label class="form-check-label" for="enable_two_factor">
                                        Enable Two-Factor Authentication
                                    </label>
                                </div>
                                <div class="form-text">Allow users to enable 2FA for their accounts.</div>
                            </div>
                            
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="log_security_events" name="log_security_events" 
                                           {% if settings.log_security_events %}checked{% endif %}>
                                    <label class="form-check-label" for="log_security_events">
                                        Log Security Events
                                    </label>
                                </div>
                                <div class="form-text">Log login attempts, password changes, etc.</div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
            <!-- Notification Settings -->
            <div class="tab-pane fade" id="notifications">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">Notification Settings</h5>
                    </div>
                    <div class="card-body">
                        <form id="notificationForm">
                            {% csrf_token %}
                            <div class="row">
                                <div class="col-md-6">
                                    <h6 class="text-primary">Email Notifications</h6>
                                    <div class="mb-3">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="email_new_user" name="email_new_user" 
                                                   {% if settings.email_new_user %}checked{% endif %}>
                                            <label class="form-check-label" for="email_new_user">
                                                New User Registration
                                            </label>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="email_password_reset" name="email_password_reset" 
                                                   {% if settings.email_password_reset %}checked{% endif %}>
                                            <label class="form-check-label" for="email_password_reset">
                                                Password Reset Requests
                                            </label>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="email_security_alerts" name="email_security_alerts" 
                                                   {% if settings.email_security_alerts %}checked{% endif %}>
                                            <label class="form-check-label" for="email_security_alerts">
                                                Security Alerts
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h6 class="text-primary">System Notifications</h6>
                                    <div class="mb-3">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="notify_admin_new_user" name="notify_admin_new_user" 
                                                   {% if settings.notify_admin_new_user %}checked{% endif %}>
                                            <label class="form-check-label" for="notify_admin_new_user">
                                                Notify Admins of New Users
                                            </label>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="notify_failed_logins" name="notify_failed_logins" 
                                                   {% if settings.notify_failed_logins %}checked{% endif %}>
                                            <label class="form-check-label" for="notify_failed_logins">
                                                Notify of Failed Login Attempts
                                            </label>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="notify_role_changes" name="notify_role_changes" 
                                                   {% if settings.notify_role_changes %}checked{% endif %}>
                                            <label class="form-check-label" for="notify_role_changes">
                                                Notify of Role Changes
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <hr>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="notification_email" class="form-label">Admin Notification Email</label>
                                        <input type="email" class="form-control" id="notification_email" name="notification_email" 
                                               value="{{ settings.notification_email }}" placeholder="admin@example.com">
                                        <div class="form-text">Email address for admin notifications.</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="email_from_name" class="form-label">Email From Name</label>
                                        <input type="text" class="form-control" id="email_from_name" name="email_from_name" 
                                               value="{{ settings.email_from_name }}" placeholder="Your App Name">
                                        <div class="form-text">Name shown in outgoing emails.</div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
            <!-- Privacy Settings -->
            <div class="tab-pane fade" id="privacy">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">Privacy Settings</h5>
                    </div>
                    <div class="card-body">
                        <form id="privacyForm">
                            {% csrf_token %}
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="allow_profile_visibility" name="allow_profile_visibility" 
                                           {% if settings.allow_profile_visibility %}checked{% endif %}>
                                    <label class="form-check-label" for="allow_profile_visibility">
                                        Allow Users to Control Profile Visibility
                                    </label>
                                </div>
                                <div class="form-text">Users can choose who can see their profile information.</div>
                            </div>
                            
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="show_last_login" name="show_last_login" 
                                           {% if settings.show_last_login %}checked{% endif %}>
                                    <label class="form-check-label" for="show_last_login">
                                        Show Last Login Information
                                    </label>
                                </div>
                                <div class="form-text">Display when users last logged in.</div>
                            </div>
                            
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="track_user_activity" name="track_user_activity" 
                                           {% if settings.track_user_activity %}checked{% endif %}>
                                    <label class="form-check-label" for="track_user_activity">
                                        Track User Activity
                                    </label>
                                </div>
                                <div class="form-text">Log user actions for audit purposes.</div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="data_retention_days" class="form-label">Data Retention (days)</label>
                                        <input type="number" class="form-control" id="data_retention_days" name="data_retention_days" 
                                               value="{{ settings.data_retention_days }}" min="30" max="3650">
                                        <div class="form-text">How long to keep user activity data.</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="default_profile_visibility" class="form-label">Default Profile Visibility</label>
                                        <select class="form-select" id="default_profile_visibility" name="default_profile_visibility">
                                            <option value="public" {% if settings.default_profile_visibility == 'public' %}selected{% endif %}>Public</option>
                                            <option value="users" {% if settings.default_profile_visibility == 'users' %}selected{% endif %}>Registered Users Only</option>
                                            <option value="private" {% if settings.default_profile_visibility == 'private' %}selected{% endif %}>Private</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
            <!-- System Settings -->
            <div class="tab-pane fade" id="system">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">System Settings</h5>
                    </div>
                    <div class="card-body">
                        <form id="systemForm">
                            {% csrf_token %}
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="max_users" class="form-label">Maximum Users</label>
                                        <input type="number" class="form-control" id="max_users" name="max_users" 
                                               value="{{ settings.max_users }}" min="1">
                                        <div class="form-text">Maximum number of user accounts (0 = unlimited).</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="backup_frequency" class="form-label">Backup Frequency</label>
                                        <select class="form-select" id="backup_frequency" name="backup_frequency">
                                            <option value="daily" {% if settings.backup_frequency == 'daily' %}selected{% endif %}>Daily</option>
                                            <option value="weekly" {% if settings.backup_frequency == 'weekly' %}selected{% endif %}>Weekly</option>
                                            <option value="monthly" {% if settings.backup_frequency == 'monthly' %}selected{% endif %}>Monthly</option>
                                            <option value="never" {% if settings.backup_frequency == 'never' %}selected{% endif %}>Never</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="enable_api" name="enable_api" 
                                           {% if settings.enable_api %}checked{% endif %}>
                                    <label class="form-check-label" for="enable_api">
                                        Enable API Access
                                    </label>
                                </div>
                                <div class="form-text">Allow API access to user management functions.</div>
                            </div>
                            
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="enable_debug_mode" name="enable_debug_mode" 
                                           {% if settings.enable_debug_mode %}checked{% endif %}>
                                    <label class="form-check-label" for="enable_debug_mode">
                                        Enable Debug Mode
                                    </label>
                                </div>
                                <div class="form-text">Show detailed error messages (development only).</div>
                            </div>
                            
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="maintenance_mode" name="maintenance_mode" 
                                           {% if settings.maintenance_mode %}checked{% endif %}>
                                    <label class="form-check-label" for="maintenance_mode">
                                        Maintenance Mode
                                    </label>
                                </div>
                                <div class="form-text">Temporarily disable user access for maintenance.</div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
            <!-- Advanced Settings -->
            <div class="tab-pane fade" id="advanced">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">Advanced Settings</h5>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle me-1"></i>
                            <strong>Warning:</strong> These settings are for advanced users only. Incorrect values may cause system issues.
                        </div>
                        
                        <form id="advancedForm">
                            {% csrf_token %}
                            <div class="mb-3">
                                <label for="custom_css" class="form-label">Custom CSS</label>
                                <textarea class="form-control" id="custom_css" name="custom_css" rows="6" 
                                          placeholder="/* Add your custom CSS here */">{{ settings.custom_css }}</textarea>
                                <div class="form-text">Custom CSS to apply to the accounts interface.</div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="custom_js" class="form-label">Custom JavaScript</label>
                                <textarea class="form-control" id="custom_js" name="custom_js" rows="6" 
                                          placeholder="// Add your custom JavaScript here">{{ settings.custom_js }}</textarea>
                                <div class="form-text">Custom JavaScript for additional functionality.</div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="webhook_url" class="form-label">Webhook URL</label>
                                <input type="url" class="form-control" id="webhook_url" name="webhook_url" 
                                       value="{{ settings.webhook_url }}" placeholder="https://example.com/webhook">
                                <div class="form-text">URL to send user events to external systems.</div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="rate_limit_requests" class="form-label">Rate Limit (requests/minute)</label>
                                        <input type="number" class="form-control" id="rate_limit_requests" name="rate_limit_requests" 
                                               value="{{ settings.rate_limit_requests }}" min="10" max="1000">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="cache_timeout" class="form-label">Cache Timeout (seconds)</label>
                                        <input type="number" class="form-control" id="cache_timeout" name="cache_timeout" 
                                               value="{{ settings.cache_timeout }}" min="60" max="3600">
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Save Confirmation Modal -->
<div class="modal fade" id="saveModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Save Settings</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to save all settings changes?</p>
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-1"></i>
                    Some changes may require a system restart to take effect.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="confirmSaveSettings()">Save Changes</button>
            </div>
        </div>
    </div>
</div>

<!-- Reset Confirmation Modal -->
<div class="modal fade" id="resetModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reset to Defaults</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to reset all settings to their default values?</p>
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle me-1"></i>
                    <strong>Warning:</strong> This action cannot be undone. All custom settings will be lost.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-warning" onclick="confirmResetSettings()">Reset Settings</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Track changes
let hasUnsavedChanges = false;

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    // Track form changes
    document.querySelectorAll('input, select, textarea').forEach(element => {
        element.addEventListener('change', function() {
            hasUnsavedChanges = true;
            updateSaveButton();
        });
    });
    
    // Warn before leaving with unsaved changes
    window.addEventListener('beforeunload', function(e) {
        if (hasUnsavedChanges) {
            e.preventDefault();
            e.returnValue = '';
        }
    });
});

// Update save button state
function updateSaveButton() {
    const saveButton = document.querySelector('[onclick="saveAllSettings()"]');
    if (hasUnsavedChanges) {
        saveButton.classList.remove('btn-primary');
        saveButton.classList.add('btn-warning');
        saveButton.innerHTML = '<i class="fas fa-exclamation-triangle me-1"></i>Save Changes';
    } else {
        saveButton.classList.remove('btn-warning');
        saveButton.classList.add('btn-primary');
        saveButton.innerHTML = '<i class="fas fa-save me-1"></i>Save All Changes';
    }
}

// Save all settings
function saveAllSettings() {
    if (!hasUnsavedChanges) {
        showNotification('No changes to save', 'info');
        return;
    }
    
    new bootstrap.Modal(document.getElementById('saveModal')).show();
}

// Confirm save settings
function confirmSaveSettings() {
    const forms = ['generalForm', 'securityForm', 'notificationForm', 'privacyForm', 'systemForm', 'advancedForm'];
    const formData = new FormData();
    
    // Collect all form data
    forms.forEach(formId => {
        const form = document.getElementById(formId);
        if (form) {
            const data = new FormData(form);
            for (let [key, value] of data.entries()) {
                formData.append(key, value);
            }
        }
    });
    
    // Add CSRF token
    formData.append('csrfmiddlewaretoken', document.querySelector('[name=csrfmiddlewaretoken]').value);
    
    // Submit via AJAX
    fetch('{% url "accounts:settings" %}', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            hasUnsavedChanges = false;
            updateSaveButton();
            showNotification('Settings saved successfully', 'success');
            
            // Close modal
            bootstrap.Modal.getInstance(document.getElementById('saveModal')).hide();
            
            // Reload if needed
            if (data.reload_required) {
                setTimeout(() => {
                    window.location.reload();
                }, 2000);
            }
        } else {
            showNotification('Error saving settings: ' + (data.error || 'Unknown error'), 'danger');
        }
    })
    .catch(error => {
        showNotification('Error saving settings: ' + error.message, 'danger');
    });
}

// Reset to defaults
function resetToDefaults() {
    new bootstrap.Modal(document.getElementById('resetModal')).show();
}

// Confirm reset settings
function confirmResetSettings() {
    fetch('{% url "accounts:settings_reset" %}', {
        method: 'POST',
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showNotification('Settings reset to defaults', 'success');
            setTimeout(() => {
                window.location.reload();
            }, 1500);
        } else {
            showNotification('Error resetting settings: ' + (data.error || 'Unknown error'), 'danger');
        }
    })
    .catch(error => {
        showNotification('Error resetting settings: ' + error.message, 'danger');
    });
    
    // Close modal
    bootstrap.Modal.getInstance(document.getElementById('resetModal')).hide();
}

// Show notification
function showNotification(message, type = 'info') {
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
    alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    document.body.appendChild(alertDiv);
    
    // Auto-remove after 5 seconds
    setTimeout(() => {
        if (alertDiv.parentNode) {
            alertDiv.remove();
        }
    }, 5000);
}

// Tab switching with unsaved changes warning
document.querySelectorAll('[data-bs-toggle="pill"]').forEach(tab => {
    tab.addEventListener('click', function(e) {
        if (hasUnsavedChanges) {
            if (!confirm('You have unsaved changes. Are you sure you want to switch tabs?')) {
                e.preventDefault();
                return false;
            }
        }
    });
});
</script>
{% endblock %}