{% extends 'layouts/base.html' %}
{% load i18n %}

{% block title %}{% trans "Settings" %} - PX360{% endblock %}

{% block content %}
<div class="container-fluid px-4 py-4">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0">{% trans "Settings" %}</h1>
            </div>

            <div class="card shadow-sm">
                <!-- Tab Navigation -->
                <ul class="nav nav-tabs nav-fill" id="settingsTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab">
                            <i class="fas fa-user-circle me-2"></i>{% trans "Profile" %}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="notifications-tab" data-bs-toggle="tab" data-bs-target="#notifications" type="button" role="tab">
                            <i class="fas fa-bell me-2"></i>{% trans "Notifications" %}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="security-tab" data-bs-toggle="tab" data-bs-target="#security" type="button" role="tab">
                            <i class="fas fa-shield-alt me-2"></i>{% trans "Security" %}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="account-tab" data-bs-toggle="tab" data-bs-target="#account" type="button" role="tab">
                            <i class="fas fa-info-circle me-2"></i>{% trans "Account" %}
                        </button>
                    </li>
                    {% if user.is_px_admin or user.is_hospital_admin %}
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="sla-tab" data-bs-toggle="tab" data-bs-target="#sla" type="button" role="tab">
                            <i class="fas fa-clock me-2"></i>{% trans "SLA" %}
                        </button>
                    </li>
                    {% endif %}
                </ul>

                <!-- Tab Content -->
                <div class="tab-content p-4" id="settingsTabsContent">
                    
                    <!-- Profile Tab -->
                    <div class="tab-pane fade show active" id="profile" role="tabpanel">
                        <div class="row">
                            <div class="col-lg-8">
                                <h5 class="mb-4">
                                    <i class="fas fa-user-circle text-primary me-2"></i>{% trans "Profile Settings" %}
                                </h5>
                                
                                <form method="post" enctype="multipart/form-data">
                                    {% csrf_token %}
                                    <input type="hidden" name="form_type" value="profile">
                                    
                                    <!-- Avatar -->
                                    <div class="text-center mb-4">
                                        {% if user.avatar %}
                                            <img src="{{ user.avatar.url }}" alt="{{ user.get_full_name }}" class="rounded-circle mb-2 border" style="width: 120px; height: 120px; object-fit: cover;">
                                        {% else %}
                                            <div class="rounded-circle bg-light d-flex align-items-center justify-content-center mb-2 border" style="width: 120px; height: 120px; margin: 0 auto;">
                                                <i class="fas fa-user fa-4x text-muted"></i>
                                            </div>
                                        {% endif %}
                                        <div class="mt-2">
                                            <label for="avatar" class="btn btn-outline-primary btn-sm">
                                                <i class="fas fa-camera me-1"></i>{% trans "Change Avatar" %}
                                            </label>
                                            <input type="file" id="avatar" name="avatar" class="d-none" accept="image/*">
                                        </div>
                                    </div>

                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label for="first_name" class="form-label">{% trans "First Name" %}</label>
                                            <input type="text" class="form-control" id="first_name" name="first_name" value="{{ user.first_name }}" required>
                                        </div>

                                        <div class="col-md-6">
                                            <label for="last_name" class="form-label">{% trans "Last Name" %}</label>
                                            <input type="text" class="form-control" id="last_name" name="last_name" value="{{ user.last_name }}" required>
                                        </div>

                                        <div class="col-md-12">
                                            <label for="email" class="form-label">{% trans "Email" %}</label>
                                            <input type="email" class="form-control" id="email" value="{{ user.email }}" readonly>
                                            <small class="form-text text-muted">{% trans "Contact administrator to change email" %}</small>
                                        </div>

                                        <div class="col-md-6">
                                            <label for="phone" class="form-label">{% trans "Phone Number" %}</label>
                                            <input type="tel" class="form-control" id="phone" name="phone" value="{{ user.phone|default:'' }}">
                                            <small class="form-text text-muted">{% trans "Required for SMS notifications" %}</small>
                                        </div>

                                        <div class="col-md-6">
                                            <label for="language" class="form-label">{% trans "Language" %}</label>
                                            <select class="form-select" id="language" name="language">
                                                {% for lang_code, lang_name in languages %}
                                                    <option value="{{ lang_code }}" {% if user.language == lang_code %}selected{% endif %}>
                                                        {{ lang_name }}
                                                    </option>
                                                {% endfor %}
                                            </select>
                                        </div>

                                        <div class="col-12">
                                            <label for="bio" class="form-label">{% trans "Bio" %}</label>
                                            <textarea class="form-control" id="bio" name="bio" rows="4">{{ user.bio|default:'' }}</textarea>
                                        </div>

                                        <div class="col-12">
                                            <button type="submit" class="btn btn-primary">
                                                <i class="fas fa-save me-2"></i>{% trans "Save Profile" %}
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            
                            <div class="col-lg-4">
                                <div class="card bg-light">
                                    <div class="card-body">
                                        <h6 class="card-title">
                                            <i class="fas fa-info-circle text-info me-2"></i>{% trans "Profile Tips" %}
                                        </h6>
                                        <ul class="list-unstyled small">
                                            <li class="mb-2">
                                                <i class="fas fa-check text-success me-2"></i>
                                                {% trans "Add a professional photo to help others recognize you" %}
                                            </li>
                                            <li class="mb-2">
                                                <i class="fas fa-check text-success me-2"></i>
                                                {% trans "Keep your phone number updated for SMS notifications" %}
                                            </li>
                                            <li class="mb-2">
                                                <i class="fas fa-check text-success me-2"></i>
                                                {% trans "Add a bio to share your role and expertise" %}
                                            </li>
                                            <li class="mb-2">
                                                <i class="fas fa-check text-success me-2"></i>
                                                {% trans "Choose your preferred language for the interface" %}
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Notifications Tab -->
                    <div class="tab-pane fade" id="notifications" role="tabpanel">
                        <div class="row">
                            <div class="col-lg-8">
                                <h5 class="mb-4">
                                    <i class="fas fa-bell text-info me-2"></i>{% trans "Notification Preferences" %}
                                </h5>
                                
                                <form method="post">
                                    {% csrf_token %}
                                    <input type="hidden" name="form_type" value="preferences">

                                    <!-- Email Notifications -->
                                    <div class="card mb-4">
                                        <div class="card-body">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="notification_email_enabled" name="notification_email_enabled" {% if user.notification_email_enabled %}checked{% endif %}>
                                                <label class="form-check-label" for="notification_email_enabled">
                                                    <strong>{% trans "Email Notifications" %}</strong>
                                                </label>
                                            </div>
                                            <small class="text-muted d-block mt-1">{% trans "Receive notifications via email for complaint assignments, updates, and escalations" %}</small>
                                        </div>
                                    </div>

                                    <!-- SMS Notifications -->
                                    <div class="card mb-4">
                                        <div class="card-body">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="notification_sms_enabled" name="notification_sms_enabled" {% if user.notification_sms_enabled %}checked{% endif %}>
                                                <label class="form-check-label" for="notification_sms_enabled">
                                                    <strong>{% trans "SMS Notifications" %}</strong>
                                                </label>
                                            </div>
                                            <small class="text-muted d-block mt-1">{% trans "Receive critical notifications via SMS (requires phone number)" %}</small>
                                        </div>
                                    </div>

                                    <div class="row g-3">
                                        <div class="col-md-12">
                                            <label for="preferred_notification_channel" class="form-label">
                                                <strong>{% trans "Preferred Notification Channel" %}</strong>
                                            </label>
                                            <select class="form-select" id="preferred_notification_channel" name="preferred_notification_channel">
                                                {% for channel_code, channel_name in notification_channels %}
                                                    <option value="{{ channel_code }}" {% if user.preferred_notification_channel == channel_code %}selected{% endif %}>
                                                        {{ channel_name }}
                                                    </option>
                                                {% endfor %}
                                            </select>
                                            <small class="form-text text-muted">{% trans "Default channel for general notifications" %}</small>
                                        </div>

                                        <div class="col-md-12">
                                            <label for="explanation_notification_channel" class="form-label">
                                                <strong>{% trans "Explanation Request Channel" %}</strong>
                                            </label>
                                            <select class="form-select" id="explanation_notification_channel" name="explanation_notification_channel">
                                                {% for channel_code, channel_name in notification_channels %}
                                                    <option value="{{ channel_code }}" {% if user.explanation_notification_channel == channel_code %}selected{% endif %}>
                                                        {{ channel_name }}
                                                    </option>
                                                {% endfor %}
                                            </select>
                                            <small class="form-text text-muted">{% trans "Default channel when requesting complaint explanations" %}</small>
                                        </div>

                                        <div class="col-md-12">
                                            <label for="phone" class="form-label">
                                                <strong>{% trans "Phone Number for SMS" %}</strong>
                                            </label>
                                            <input type="tel" class="form-control" id="phone" name="phone" value="{{ user.phone|default:'' }}" placeholder="+966 5X XXX XXXX">
                                            <small class="form-text text-muted">{% trans "Required to receive SMS notifications" %}</small>
                                        </div>

                                        <div class="col-12 mt-4">
                                            <button type="submit" class="btn btn-info">
                                                <i class="fas fa-save me-2"></i>{% trans "Save Preferences" %}
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            
                            <div class="col-lg-4">
                                <div class="card bg-light">
                                    <div class="card-body">
                                        <h6 class="card-title">
                                            <i class="fas fa-info-circle text-info me-2"></i>{% trans "Notification Tips" %}
                                        </h6>
                                        <p class="small text-muted mb-3">
                                            {% trans "Configure how you receive notifications to stay informed without being overwhelmed." %}
                                        </p>
                                        <ul class="list-unstyled small">
                                            <li class="mb-2">
                                                <i class="fas fa-envelope text-primary me-2"></i>
                                                {% trans "Email is best for detailed information" %}
                                            </li>
                                            <li class="mb-2">
                                                <i class="fas fa-mobile-alt text-success me-2"></i>
                                                {% trans "SMS is best for urgent alerts" %}
                                            </li>
                                            <li class="mb-2">
                                                <i class="fas fa-bell text-warning me-2"></i>
                                                {% trans "In-app notifications are always enabled" %}
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Security Tab -->
                    <div class="tab-pane fade" id="security" role="tabpanel">
                        <div class="row">
                            <div class="col-lg-8">
                                <h5 class="mb-4">
                                    <i class="fas fa-shield-alt text-warning me-2"></i>{% trans "Security Settings" %}
                                </h5>
                                
                                <form method="post">
                                    {% csrf_token %}
                                    <input type="hidden" name="form_type" value="password">

                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row g-3">
                                                <div class="col-12">
                                                    <label for="current_password" class="form-label">{% trans "Current Password" %}</label>
                                                    <input type="password" class="form-control" id="current_password" name="current_password" required>
                                                </div>

                                                <div class="col-md-6">
                                                    <label for="new_password" class="form-label">{% trans "New Password" %}</label>
                                                    <input type="password" class="form-control" id="new_password" name="new_password" required minlength="8">
                                                    <small class="form-text text-muted">{% trans "Minimum 8 characters" %}</small>
                                                </div>

                                                <div class="col-md-6">
                                                    <label for="confirm_password" class="form-label">{% trans "Confirm New Password" %}</label>
                                                    <input type="password" class="form-control" id="confirm_password" name="confirm_password" required minlength="8">
                                                </div>

                                                <div class="col-12 mt-4">
                                                    <button type="submit" class="btn btn-warning text-dark">
                                                        <i class="fas fa-key me-2"></i>{% trans "Change Password" %}
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>

                                <div class="card bg-light mt-4">
                                    <div class="card-body">
                                        <h6 class="card-title">
                                            <i class="fas fa-history text-secondary me-2"></i>{% trans "Password History" %}
                                        </h6>
                                        <p class="small text-muted mb-0">
                                            <i class="fas fa-clock me-1"></i>
                                            {% trans "Last password change:" %} {% if user.password %}{% trans "Recently" %}{% else %}{% trans "Never" %}{% endif %}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-lg-4">
                                <div class="card bg-light">
                                    <div class="card-body">
                                        <h6 class="card-title">
                                            <i class="fas fa-info-circle text-info me-2"></i>{% trans "Security Tips" %}
                                        </h6>
                                        <ul class="list-unstyled small">
                                            <li class="mb-2">
                                                <i class="fas fa-check text-success me-2"></i>
                                                {% trans "Use strong passwords with letters, numbers, and symbols" %}
                                            </li>
                                            <li class="mb-2">
                                                <i class="fas fa-check text-success me-2"></i>
                                                {% trans "Don't reuse passwords from other sites" %}
                                            </li>
                                            <li class="mb-2">
                                                <i class="fas fa-check text-success me-2"></i>
                                                {% trans "Change your password regularly" %}
                                            </li>
                                            <li class="mb-2">
                                                <i class="fas fa-check text-success me-2"></i>
                                                {% trans "Never share your password with anyone" %}
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Account Tab -->
                    <div class="tab-pane fade" id="account" role="tabpanel">
                        <div class="row">
                            <div class="col-lg-8">
                                <h5 class="mb-4">
                                    <i class="fas fa-info-circle text-secondary me-2"></i>{% trans "Account Information" %}
                                </h5>
                                
                                <div class="card">
                                    <div class="card-body">
                                        <table class="table table-borderless">
                                            <tbody>
                                                <tr>
                                                    <td class="text-muted" style="width: 200px;">
                                                        <i class="fas fa-user me-2"></i>{% trans "Full Name" %}
                                                    </td>
                                                    <td><strong>{{ user.get_full_name }}</strong></td>
                                                </tr>
                                                <tr>
                                                    <td class="text-muted">
                                                        <i class="fas fa-envelope me-2"></i>{% trans "Email" %}
                                                    </td>
                                                    <td><strong>{{ user.email }}</strong></td>
                                                </tr>
                                                <tr>
                                                    <td class="text-muted">
                                                        <i class="fas fa-calendar me-2"></i>{% trans "Member Since" %}
                                                    </td>
                                                    <td><strong>{{ user.date_joined|date:"F d, Y" }}</strong></td>
                                                </tr>
                                                <tr>
                                                    <td class="text-muted">
                                                        <i class="fas fa-hospital me-2"></i>{% trans "Hospital" %}
                                                    </td>
                                                    <td><strong>{% if user.hospital %}{{ user.hospital.name }}{% else %}{% trans "Not assigned" %}{% endif %}</strong></td>
                                                </tr>
                                                <tr>
                                                    <td class="text-muted">
                                                        <i class="fas fa-building me-2"></i>{% trans "Department" %}
                                                    </td>
                                                    <td><strong>{% if user.department %}{{ user.department.name }}{% else %}{% trans "Not assigned" %}{% endif %}</strong></td>
                                                </tr>
                                                <tr>
                                                    <td class="text-muted">
                                                        <i class="fas fa-id-badge me-2"></i>{% trans "Employee ID" %}
                                                    </td>
                                                    <td><strong>{{ user.employee_id|default:"N/A" }}</strong></td>
                                                </tr>
                                                <tr>
                                                    <td class="text-muted">
                                                        <i class="fas fa-user-tie me-2"></i>{% trans "Role" %}
                                                    </td>
                                                    <td>
                                                        {% if user.is_px_admin %}
                                                            <span class="badge bg-primary">{% trans "PX Admin" %}</span>
                                                        {% elif user.is_hospital_admin %}
                                                            <span class="badge bg-success">{% trans "Hospital Admin" %}</span>
                                                        {% elif user.is_department_head %}
                                                            <span class="badge bg-info">{% trans "Department Head" %}</span>
                                                        {% else %}
                                                            <span class="badge bg-secondary">{% trans "Staff" %}</span>
                                                        {% endif %}
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-lg-4">
                                <div class="card bg-light">
                                    <div class="card-body">
                                        <h6 class="card-title">
                                            <i class="fas fa-info-circle text-info me-2"></i>{% trans "Account Info" %}
                                        </h6>
                                        <p class="small text-muted">
                                            {% trans "This information is managed by your organization's administrators. Contact them if you need to update your hospital, department, or employee ID." %}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- SLA Configuration Tab (Admins only) -->
                    {% if user.is_px_admin or user.is_hospital_admin %}
                    <div class="tab-pane fade" id="sla" role="tabpanel">
                        <div class="row">
                            <div class="col-12">
                                <h5 class="mb-4">
                                    <i class="fas fa-clock text-success me-2"></i>{% trans "SLA Configuration" %}
                                </h5>
                                
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle me-2"></i>
                                    {% trans "Configure Service Level Agreements, escalation rules, and complaint thresholds for your organization." %}
                                </div>
                                
                                <div class="row g-4">
                                    <!-- SLA Configurations -->
                                    <div class="col-md-4">
                                        <a href="{% url 'complaints:sla_config_list' %}" class="card text-decoration-none text-dark h-100">
                                            <div class="card-body text-center py-4">
                                                <i class="fas fa-clock fa-3x text-primary mb-3"></i>
                                                <h5 class="card-title">{% trans "SLA Configurations" %}</h5>
                                                <p class="card-text text-muted small">{% trans "Manage deadline settings for complaint resolution" %}</p>
                                                <span class="btn btn-outline-primary btn-sm">{% trans "Manage" %}</span>
                                            </div>
                                        </a>
                                    </div>
                                    
                                    <!-- Escalation Rules -->
                                    <div class="col-md-4">
                                        <a href="{% url 'complaints:escalation_rule_list' %}" class="card text-decoration-none text-dark h-100">
                                            <div class="card-body text-center py-4">
                                                <i class="fas fa-arrow-up fa-3x text-warning mb-3"></i>
                                                <h5 class="card-title">{% trans "Escalation Rules" %}</h5>
                                                <p class="card-text text-muted small">{% trans "Configure automatic escalation when deadlines are exceeded" %}</p>
                                                <span class="btn btn-outline-warning btn-sm">{% trans "Configure" %}</span>
                                            </div>
                                        </a>
                                    </div>
                                    
                                    <!-- Complaint Thresholds -->
                                    <div class="col-md-4">
                                        <a href="{% url 'complaints:complaint_threshold_list' %}" class="card text-decoration-none text-dark h-100">
                                            <div class="card-body text-center py-4">
                                                <i class="fas fa-chart-line fa-3x text-info mb-3"></i>
                                                <h5 class="card-title">{% trans "Complaint Thresholds" %}</h5>
                                                <p class="card-text text-muted small">{% trans "Set alert thresholds for complaint volume monitoring" %}</p>
                                                <span class="btn btn-outline-info btn-sm">{% trans "Setup" %}</span>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                
                                <div class="card bg-light mt-4">
                                    <div class="card-body">
                                        <h6 class="card-title">
                                            <i class="fas fa-info-circle text-info me-2"></i>{% trans "SLA Best Practices" %}
                                        </h6>
                                        <ul class="list-unstyled small">
                                            <li class="mb-2">
                                                <i class="fas fa-check text-success me-2"></i>
                                                {% trans "Set realistic deadlines based on complaint severity" %}
                                            </li>
                                            <li class="mb-2">
                                                <i class="fas fa-check text-success me-2"></i>
                                                {% trans "Configure multiple escalation levels for smooth handoffs" %}
                                            </li>
                                            <li class="mb-2">
                                                <i class="fas fa-check text-success me-2"></i>
                                                {% trans "Monitor thresholds to identify trends and issues early" %}
                                            </li>
                                            <li class="mb-2">
                                                <i class="fas fa-check text-success me-2"></i>
                                                {% trans "Review and adjust SLA settings regularly" %}
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Password confirmation validation
document.addEventListener('DOMContentLoaded', function() {
    const passwordForm = document.querySelector('form input[name="form_type"][value="password"]')?.closest('form');
    if (passwordForm) {
        passwordForm.addEventListener('submit', function(e) {
            const newPassword = this.querySelector('#new_password').value;
            const confirmPassword = this.querySelector('#confirm_password').value;
            
            if (newPassword !== confirmPassword) {
                e.preventDefault();
                alert('{% trans "Passwords do not match!" %}');
            }
        });
    }
    
    // Store active tab in localStorage
    const tabLinks = document.querySelectorAll('#settingsTabs button[data-bs-toggle="tab"]');
    const savedTab = localStorage.getItem('activeSettingsTab');
    
    if (savedTab) {
        const tabButton = document.querySelector(`#settingsTabs button[data-bs-target="${savedTab}"]`);
        if (tabButton) {
            const tabInstance = new bootstrap.Tab(tabButton);
            tabInstance.show();
        }
    }
    
    tabLinks.forEach(tabLink => {
        tabLink.addEventListener('shown.bs.tab', function(e) {
            const target = e.target.getAttribute('data-bs-target');
            localStorage.setItem('activeSettingsTab', target);
        });
    });
});
</script>
{% endblock %}