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

{% block title %}System Settings{% endblock %}

{% block css %}
<link href="{% static 'assets/plugins/select2/dist/css/select2.min.css' %}" rel="stylesheet" />
{% endblock %}

{% block content %}
<div id="content" class="app-content">
    <div class="container">
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item active">System Settings</li>
        </ul>
        
        <div class="row align-items-center mb-3">
            <div class="col">
                <h1 class="page-header">System Settings</h1>
                <p class="text-muted">Configure global system settings and preferences</p>
            </div>
            <div class="col-auto">
                <button type="button" class="btn btn-success" onclick="saveAllSettings()">
                    <i class="fa fa-save me-2"></i>Save All Changes
                </button>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-3">
                <div class="nav flex-column nav-pills" id="settingsTab" role="tablist">
                    <a class="nav-link active" id="general-tab" data-bs-toggle="pill" href="#general" role="tab">
                        <i class="fa fa-cog me-2"></i>General Settings
                    </a>
                    <a class="nav-link" id="security-tab" data-bs-toggle="pill" href="#security" role="tab">
                        <i class="fa fa-shield-alt me-2"></i>Security
                    </a>
                    <a class="nav-link" id="notifications-tab" data-bs-toggle="pill" href="#notifications" role="tab">
                        <i class="fa fa-bell me-2"></i>Notifications
                    </a>
                    <a class="nav-link" id="email-tab" data-bs-toggle="pill" href="#email" role="tab">
                        <i class="fa fa-envelope me-2"></i>Email Settings
                    </a>
                    <a class="nav-link" id="backup-tab" data-bs-toggle="pill" href="#backup" role="tab">
                        <i class="fa fa-database me-2"></i>Backup & Recovery
                    </a>
                    <a class="nav-link" id="integration-tab" data-bs-toggle="pill" href="#integration" role="tab">
                        <i class="fa fa-plug me-2"></i>Integrations
                    </a>
                    <a class="nav-link" id="maintenance-tab" data-bs-toggle="pill" href="#maintenance" role="tab">
                        <i class="fa fa-wrench me-2"></i>Maintenance
                    </a>
                </div>
            </div>
            
            <div class="col-md-9">
                <div class="tab-content" id="settingsTabContent">
                    <!-- General Settings -->
                    <div class="tab-pane fade show active" id="general" role="tabpanel">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">General Settings</h4>
                            </div>
                            <div class="card-body">
                                <form id="generalSettingsForm">
                                    {% csrf_token %}
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">Hospital Name</label>
                                        <div class="col-md-9">
                                            <input type="text" name="hospital_name" class="form-control" 
                                                   value="{{ settings.hospital_name|default:'General Hospital' }}">
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">Hospital Address</label>
                                        <div class="col-md-9">
                                            <textarea name="hospital_address" class="form-control" rows="3">{{ settings.hospital_address|default:'' }}</textarea>
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">Contact Phone</label>
                                        <div class="col-md-9">
                                            <input type="tel" name="contact_phone" class="form-control" 
                                                   value="{{ settings.contact_phone|default:'' }}">
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">Contact Email</label>
                                        <div class="col-md-9">
                                            <input type="email" name="contact_email" class="form-control" 
                                                   value="{{ settings.contact_email|default:'' }}">
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">Time Zone</label>
                                        <div class="col-md-9">
                                            <select name="timezone" class="form-select">
                                                <option value="UTC" {% if settings.timezone == 'UTC' %}selected{% endif %}>UTC</option>
                                                <option value="America/New_York" {% if settings.timezone == 'America/New_York' %}selected{% endif %}>Eastern Time</option>
                                                <option value="America/Chicago" {% if settings.timezone == 'America/Chicago' %}selected{% endif %}>Central Time</option>
                                                <option value="America/Denver" {% if settings.timezone == 'America/Denver' %}selected{% endif %}>Mountain Time</option>
                                                <option value="America/Los_Angeles" {% if settings.timezone == 'America/Los_Angeles' %}selected{% endif %}>Pacific Time</option>
                                            </select>
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">Date Format</label>
                                        <div class="col-md-9">
                                            <select name="date_format" class="form-select">
                                                <option value="MM/DD/YYYY" {% if settings.date_format == 'MM/DD/YYYY' %}selected{% endif %}>MM/DD/YYYY</option>
                                                <option value="DD/MM/YYYY" {% if settings.date_format == 'DD/MM/YYYY' %}selected{% endif %}>DD/MM/YYYY</option>
                                                <option value="YYYY-MM-DD" {% if settings.date_format == 'YYYY-MM-DD' %}selected{% endif %}>YYYY-MM-DD</option>
                                            </select>
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">Language</label>
                                        <div class="col-md-9">
                                            <select name="language" class="form-select">
                                                <option value="en" {% if settings.language == 'en' %}selected{% endif %}>English</option>
                                                <option value="es" {% if settings.language == 'es' %}selected{% endif %}>Spanish</option>
                                                <option value="fr" {% if settings.language == 'fr' %}selected{% endif %}>French</option>
                                            </select>
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">Session Timeout</label>
                                        <div class="col-md-9">
                                            <div class="input-group">
                                                <input type="number" name="session_timeout" class="form-control" 
                                                       value="{{ settings.session_timeout|default:30 }}" min="5" max="480">
                                                <span class="input-group-text">minutes</span>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Security Settings -->
                    <div class="tab-pane fade" id="security" role="tabpanel">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Security Settings</h4>
                            </div>
                            <div class="card-body">
                                <form id="securitySettingsForm">
                                    {% csrf_token %}
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">Password Policy</label>
                                        <div class="col-md-9">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="require_uppercase" 
                                                       {% if settings.require_uppercase %}checked{% endif %}>
                                                <label class="form-check-label">Require uppercase letters</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="require_lowercase" 
                                                       {% if settings.require_lowercase %}checked{% endif %}>
                                                <label class="form-check-label">Require lowercase letters</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="require_numbers" 
                                                       {% if settings.require_numbers %}checked{% endif %}>
                                                <label class="form-check-label">Require numbers</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="require_special_chars" 
                                                       {% if settings.require_special_chars %}checked{% endif %}>
                                                <label class="form-check-label">Require special characters</label>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">Minimum Password Length</label>
                                        <div class="col-md-9">
                                            <input type="number" name="min_password_length" class="form-control" 
                                                   value="{{ settings.min_password_length|default:8 }}" min="6" max="32">
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">Password Expiry</label>
                                        <div class="col-md-9">
                                            <div class="input-group">
                                                <input type="number" name="password_expiry_days" class="form-control" 
                                                       value="{{ settings.password_expiry_days|default:90 }}" min="0">
                                                <span class="input-group-text">days (0 = never)</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">Max Login Attempts</label>
                                        <div class="col-md-9">
                                            <input type="number" name="max_login_attempts" class="form-control" 
                                                   value="{{ settings.max_login_attempts|default:5 }}" min="3" max="10">
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">Account Lockout Duration</label>
                                        <div class="col-md-9">
                                            <div class="input-group">
                                                <input type="number" name="lockout_duration" class="form-control" 
                                                       value="{{ settings.lockout_duration|default:30 }}" min="5">
                                                <span class="input-group-text">minutes</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">Two-Factor Authentication</label>
                                        <div class="col-md-9">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" name="enable_2fa" 
                                                       {% if settings.enable_2fa %}checked{% endif %}>
                                                <label class="form-check-label">Enable 2FA for all users</label>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Notifications Settings -->
                    <div class="tab-pane fade" id="notifications" role="tabpanel">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Notification Settings</h4>
                            </div>
                            <div class="card-body">
                                <form id="notificationSettingsForm">
                                    {% csrf_token %}
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">Default Notification Methods</label>
                                        <div class="col-md-9">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="enable_email_notifications" 
                                                       {% if settings.enable_email_notifications %}checked{% endif %}>
                                                <label class="form-check-label">Email notifications</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="enable_sms_notifications" 
                                                       {% if settings.enable_sms_notifications %}checked{% endif %}>
                                                <label class="form-check-label">SMS notifications</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="enable_push_notifications" 
                                                       {% if settings.enable_push_notifications %}checked{% endif %}>
                                                <label class="form-check-label">Push notifications</label>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">Notification Frequency</label>
                                        <div class="col-md-9">
                                            <select name="notification_frequency" class="form-select">
                                                <option value="immediate" {% if settings.notification_frequency == 'immediate' %}selected{% endif %}>Immediate</option>
                                                <option value="hourly" {% if settings.notification_frequency == 'hourly' %}selected{% endif %}>Hourly digest</option>
                                                <option value="daily" {% if settings.notification_frequency == 'daily' %}selected{% endif %}>Daily digest</option>
                                            </select>
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">Quiet Hours</label>
                                        <div class="col-md-9">
                                            <div class="row">
                                                <div class="col-6">
                                                    <input type="time" name="quiet_hours_start" class="form-control" 
                                                           value="{{ settings.quiet_hours_start|default:'22:00' }}">
                                                    <small class="form-text text-muted">Start time</small>
                                                </div>
                                                <div class="col-6">
                                                    <input type="time" name="quiet_hours_end" class="form-control" 
                                                           value="{{ settings.quiet_hours_end|default:'06:00' }}">
                                                    <small class="form-text text-muted">End time</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Email Settings -->
                    <div class="tab-pane fade" id="email" role="tabpanel">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Email Configuration</h4>
                            </div>
                            <div class="card-body">
                                <form id="emailSettingsForm">
                                    {% csrf_token %}
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">SMTP Server</label>
                                        <div class="col-md-9">
                                            <input type="text" name="smtp_server" class="form-control" 
                                                   value="{{ settings.smtp_server|default:'' }}" placeholder="smtp.gmail.com">
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">SMTP Port</label>
                                        <div class="col-md-9">
                                            <input type="number" name="smtp_port" class="form-control" 
                                                   value="{{ settings.smtp_port|default:587 }}">
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">From Email</label>
                                        <div class="col-md-9">
                                            <input type="email" name="from_email" class="form-control" 
                                                   value="{{ settings.from_email|default:'' }}">
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">From Name</label>
                                        <div class="col-md-9">
                                            <input type="text" name="from_name" class="form-control" 
                                                   value="{{ settings.from_name|default:'Hospital Management System' }}">
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">Use TLS</label>
                                        <div class="col-md-9">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" name="use_tls" 
                                                       {% if settings.use_tls %}checked{% endif %}>
                                                <label class="form-check-label">Enable TLS encryption</label>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <div class="col-md-9 offset-md-3">
                                            <button type="button" class="btn btn-outline-primary" onclick="testEmailSettings()">
                                                <i class="fa fa-paper-plane me-2"></i>Send Test Email
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Backup Settings -->
                    <div class="tab-pane fade" id="backup" role="tabpanel">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Backup & Recovery</h4>
                            </div>
                            <div class="card-body">
                                <form id="backupSettingsForm">
                                    {% csrf_token %}
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">Automatic Backups</label>
                                        <div class="col-md-9">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" name="enable_auto_backup" 
                                                       {% if settings.enable_auto_backup %}checked{% endif %}>
                                                <label class="form-check-label">Enable automatic backups</label>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">Backup Frequency</label>
                                        <div class="col-md-9">
                                            <select name="backup_frequency" class="form-select">
                                                <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>
                                            </select>
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">Backup Time</label>
                                        <div class="col-md-9">
                                            <input type="time" name="backup_time" class="form-control" 
                                                   value="{{ settings.backup_time|default:'02:00' }}">
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">Retention Period</label>
                                        <div class="col-md-9">
                                            <div class="input-group">
                                                <input type="number" name="backup_retention_days" class="form-control" 
                                                       value="{{ settings.backup_retention_days|default:30 }}" min="7">
                                                <span class="input-group-text">days</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <div class="col-md-9 offset-md-3">
                                            <button type="button" class="btn btn-outline-primary" onclick="createBackup()">
                                                <i class="fa fa-database me-2"></i>Create Backup Now
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Integration Settings -->
                    <div class="tab-pane fade" id="integration" role="tabpanel">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">External Integrations</h4>
                            </div>
                            <div class="card-body">
                                <form id="integrationSettingsForm">
                                    {% csrf_token %}
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">API Rate Limiting</label>
                                        <div class="col-md-9">
                                            <div class="input-group">
                                                <input type="number" name="api_rate_limit" class="form-control" 
                                                       value="{{ settings.api_rate_limit|default:1000 }}" min="100">
                                                <span class="input-group-text">requests/hour</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">API Key Expiry</label>
                                        <div class="col-md-9">
                                            <div class="input-group">
                                                <input type="number" name="api_key_expiry_days" class="form-control" 
                                                       value="{{ settings.api_key_expiry_days|default:365 }}" min="30">
                                                <span class="input-group-text">days</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">Webhook Timeout</label>
                                        <div class="col-md-9">
                                            <div class="input-group">
                                                <input type="number" name="webhook_timeout" class="form-control" 
                                                       value="{{ settings.webhook_timeout|default:30 }}" min="5" max="300">
                                                <span class="input-group-text">seconds</span>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Maintenance Settings -->
                    <div class="tab-pane fade" id="maintenance" role="tabpanel">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">System Maintenance</h4>
                            </div>
                            <div class="card-body">
                                <form id="maintenanceSettingsForm">
                                    {% csrf_token %}
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">Maintenance Mode</label>
                                        <div class="col-md-9">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" name="maintenance_mode" 
                                                       {% if settings.maintenance_mode %}checked{% endif %}>
                                                <label class="form-check-label">Enable maintenance mode</label>
                                            </div>
                                            <small class="form-text text-muted">When enabled, only administrators can access the system</small>
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">Maintenance Message</label>
                                        <div class="col-md-9">
                                            <textarea name="maintenance_message" class="form-control" rows="3">{{ settings.maintenance_message|default:'System is under maintenance. Please try again later.' }}</textarea>
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <label class="col-form-label col-md-3">Log Retention</label>
                                        <div class="col-md-9">
                                            <div class="input-group">
                                                <input type="number" name="log_retention_days" class="form-control" 
                                                       value="{{ settings.log_retention_days|default:90 }}" min="7">
                                                <span class="input-group-text">days</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <div class="col-md-9 offset-md-3">
                                            <button type="button" class="btn btn-outline-warning" onclick="clearCache()">
                                                <i class="fa fa-trash me-2"></i>Clear System Cache
                                            </button>
                                            <button type="button" class="btn btn-outline-danger ms-2" onclick="clearLogs()">
                                                <i class="fa fa-file-alt me-2"></i>Clear Old Logs
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script src="{% static 'assets/plugins/select2/dist/js/select2.min.js' %}"></script>

<script>
$(document).ready(function() {
    // Initialize Select2
    $('.form-select').select2({
        minimumResultsForSearch: Infinity
    });
});

function saveAllSettings() {
    var forms = ['general', 'security', 'notification', 'email', 'backup', 'integration', 'maintenance'];
    var allData = {};
    
    forms.forEach(function(formType) {
        var formData = new FormData($('#' + formType + 'SettingsForm')[0]);
        for (var pair of formData.entries()) {
            allData[pair[0]] = pair[1];
        }
    });
    
    $.post('{% url "core:save_system_settings" %}', allData, function(response) {
        if (response.success) {
            toastr.success('Settings saved successfully');
        } else {
            toastr.error('Failed to save settings: ' + response.error);
        }
    }).fail(function() {
        toastr.error('Failed to save settings');
    });
}

function testEmailSettings() {
    var formData = new FormData($('#emailSettingsForm')[0]);
    
    $.post('{% url "core:test_email_settings" %}', formData, function(response) {
        if (response.success) {
            toastr.success('Test email sent successfully');
        } else {
            toastr.error('Failed to send test email: ' + response.error);
        }
    }).fail(function() {
        toastr.error('Failed to test email settings');
    });
}

function createBackup() {
    if (confirm('Create a backup now? This may take several minutes.')) {
        $.post('{% url "core:create_backup" %}', {
            'csrfmiddlewaretoken': '{{ csrf_token }}'
        }, function(response) {
            if (response.success) {
                toastr.success('Backup created successfully');
            } else {
                toastr.error('Failed to create backup: ' + response.error);
            }
        }).fail(function() {
            toastr.error('Failed to create backup');
        });
    }
}

function clearCache() {
    if (confirm('Clear system cache? This may temporarily slow down the system.')) {
        $.post('{% url "core:clear_cache" %}', {
            'csrfmiddlewaretoken': '{{ csrf_token }}'
        }, function(response) {
            if (response.success) {
                toastr.success('Cache cleared successfully');
            } else {
                toastr.error('Failed to clear cache: ' + response.error);
            }
        }).fail(function() {
            toastr.error('Failed to clear cache');
        });
    }
}

function clearLogs() {
    if (confirm('Clear old log files? This action cannot be undone.')) {
        $.post('{% url "core:clear_logs" %}', {
            'csrfmiddlewaretoken': '{{ csrf_token }}'
        }, function(response) {
            if (response.success) {
                toastr.success('Old logs cleared successfully');
            } else {
                toastr.error('Failed to clear logs: ' + response.error);
            }
        }).fail(function() {
            toastr.error('Failed to clear logs');
        });
    }
}
</script>
{% endblock %}