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

{% block title %}{{ title }} - {% translate "Escalation Rules" %} - PX360{% endblock %}

{% block content %}
<div class="page-header">
    <div class="page-header-content">
        <div>
            <h1 class="page-title">
                <i class="fas fa-arrow-up"></i>
                {{ title }}
            </h1>
            <p class="page-description">
                {% if escalation_rule %}
                    {% translate "Edit escalation rule" %}
                {% else %}
                    {% translate "Create new escalation rule" %}
                {% endif %}
            </p>
        </div>
        <a href="{% url 'complaints:escalation_rule_list' %}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left"></i>
            {% translate "Back to List" %}
        </a>
    </div>
</div>

<div class="page-content">
    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    <form method="post" class="row g-3">
                        {% csrf_token %}
                        
                        {% if request.user.is_px_admin %}
                        <div class="col-md-12">
                            <label for="id_hospital" class="form-label">
                                {% translate "Hospital" %} <span class="text-danger">*</span>
                            </label>
                            <select name="hospital" id="id_hospital" class="form-select" required>
                                <option value="">{% translate "Select Hospital" %}</option>
                                {% for hospital in form.hospital.field.queryset %}
                                <option value="{{ hospital.id }}" 
                                        {% if form.hospital.value == hospital.id|stringformat:"s" %}selected{% endif %}>
                                    {{ hospital.name }}
                                </option>
                                {% endfor %}
                            </select>
                            {% if form.hospital.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.hospital.errors.0 }}
                            </div>
                            {% endif %}
                        </div>
                        {% endif %}
                        
                        <div class="col-md-12">
                            <label for="id_name" class="form-label">
                                {% translate "Rule Name" %} <span class="text-danger">*</span>
                            </label>
                            <input type="text" 
                                   name="name" 
                                   id="id_name" 
                                   class="form-control" 
                                   value="{{ form.name.value|default:'' }}" 
                                   required
                                   placeholder="{% translate 'e.g., Level 1 Escalation - High Priority' %}">
                            {% if form.name.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.name.errors.0 }}
                            </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6">
                            <label for="id_escalation_level" class="form-label">
                                {% translate "Escalation Level" %} <span class="text-danger">*</span>
                            </label>
                            <select name="escalation_level" id="id_escalation_level" class="form-select" required>
                                <option value="">{% translate "Select Level" %}</option>
                                {% for value, label in form.escalation_level.field.choices %}
                                <option value="{{ value }}" 
                                        {% if form.escalation_level.value == value %}selected{% endif %}>
                                    {{ label }}
                                </option>
                                {% endfor %}
                            </select>
                            {% if form.escalation_level.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.escalation_level.errors.0 }}
                            </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6">
                            <label for="id_trigger_hours" class="form-label">
                                {% translate "Trigger Hours" %} <span class="text-danger">*</span>
                            </label>
                            <input type="number" 
                                   name="trigger_hours" 
                                   id="id_trigger_hours" 
                                   class="form-control" 
                                   value="{{ form.trigger_hours.value|default:'' }}" 
                                   min="1" 
                                   step="0.5" 
                                   required
                                   placeholder="{% translate 'e.g., 24' %}">
                            {% if form.trigger_hours.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.trigger_hours.errors.0 }}
                            </div>
                            {% else %}
                            <div class="form-text">
                                {% translate "Hours after complaint creation to trigger escalation" %}
                            </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6">
                            <label for="id_escalate_to_role" class="form-label">
                                {% translate "Escalate To Role" %}
                            </label>
                            <select name="escalate_to_role" id="id_escalate_to_role" class="form-select">
                                <option value="">{% translate "Select Role" %}</option>
                                {% for value, label in form.escalate_to_role.field.choices %}
                                <option value="{{ value }}" 
                                        {% if form.escalate_to_role.value == value %}selected{% endif %}>
                                    {{ label }}
                                </option>
                                {% endfor %}
                            </select>
                            {% if form.escalate_to_role.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.escalate_to_role.errors.0 }}
                            </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6">
                            <label for="id_escalate_to_user" class="form-label">
                                {% translate "Escalate To Specific User" %}
                            </label>
                            <select name="escalate_to_user" id="id_escalate_to_user" class="form-select">
                                <option value="">{% translate "Select User (Optional)" %}</option>
                                {% for user in users %}
                                <option value="{{ user.id }}" 
                                        {% if form.escalate_to_user.value == user.id|stringformat:"s" %}selected{% endif %}>
                                    {{ user.get_full_name }} ({{ user.email }})
                                </option>
                                {% endfor %}
                            </select>
                            {% if form.escalate_to_user.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.escalate_to_user.errors.0 }}
                            </div>
                            {% else %}
                            <div class="form-text">
                                {% translate "Overrides role if specified" %}
                            </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6">
                            <label for="id_severity" class="form-label">
                                {% translate "Severity (Optional)" %}
                            </label>
                            <select name="severity" id="id_severity" class="form-select">
                                <option value="">{% translate "All Severities" %}</option>
                                {% for value, label in form.severity.field.choices %}
                                <option value="{{ value }}" 
                                        {% if form.severity.value == value %}selected{% endif %}>
                                    {{ label }}
                                </option>
                                {% endfor %}
                            </select>
                            {% if form.severity.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.severity.errors.0 }}
                            </div>
                            {% else %}
                            <div class="form-text">
                                {% translate "Leave empty to apply to all severities" %}
                            </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6">
                            <label for="id_priority" class="form-label">
                                {% translate "Priority (Optional)" %}
                            </label>
                            <select name="priority" id="id_priority" class="form-select">
                                <option value="">{% translate "All Priorities" %}</option>
                                {% for value, label in form.priority.field.choices %}
                                <option value="{{ value }}" 
                                        {% if form.priority.value == value %}selected{% endif %}>
                                    {{ label }}
                                </option>
                                {% endfor %}
                            </select>
                            {% if form.priority.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.priority.errors.0 }}
                            </div>
                            {% else %}
                            <div class="form-text">
                                {% translate "Leave empty to apply to all priorities" %}
                            </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-12">
                            <div class="form-check form-switch">
                                <input type="checkbox" 
                                       name="is_active" 
                                       id="id_is_active" 
                                       class="form-check-input"
                                       {% if form.is_active.value == 'on' or not form.is_active.value %}checked{% endif %}>
                                <label class="form-check-label" for="id_is_active">
                                    {% translate "Active" %}
                                </label>
                            </div>
                            <div class="form-text">
                                {% translate "Only active rules will be triggered" %}
                            </div>
                        </div>
                        
                        <div class="col-12">
                            <label for="id_description" class="form-label">
                                {% translate "Description" %}
                            </label>
                            <textarea name="description" 
                                      id="id_description" 
                                      class="form-control" 
                                      rows="3"
                                      placeholder="{% translate 'Optional notes about this escalation rule' %}">{{ form.description.value|default:'' }}</textarea>
                            {% if form.description.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.description.errors.0 }}
                            </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-12">
                            <div class="d-flex gap-2">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i>
                                    {{ action }}
                                </button>
                                <a href="{% url 'complaints:escalation_rule_list' %}" class="btn btn-outline-secondary">
                                    <i class="fas fa-times"></i>
                                    {% translate "Cancel" %}
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <div class="card bg-light">
                <div class="card-body">
                    <h5 class="card-title">
                        <i class="fas fa-info-circle"></i>
                        {% translate "Help" %}
                    </h5>
                    <h6 class="card-subtitle mb-3 text-muted">
                        {% translate "Understanding Escalation Rules" %}
                    </h6>
                    <p class="card-text">
                        {% translate "Escalation rules automatically reassign complaints to higher-level staff when they exceed specified time thresholds." %}
                    </p>
                    <ul class="list-unstyled">
                        <li class="mb-2">
                            <i class="fas fa-check text-success me-2"></i>
                            {% translate "Level 1: Escalate to department head" %}
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check text-success me-2"></i>
                            {% translate "Level 2: Escalate to hospital admin" %}
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check text-success me-2"></i>
                            {% translate "Level 3: Escalate to PX admin" %}
                        </li>
                    </ul>
                    
                    <hr>
                    
                    <h6 class="card-subtitle mb-2 text-muted">
                        {% translate "Escalation Flow" %}
                    </h6>
                    <div class="alert alert-info">
                        <ol class="mb-0">
                            <li>{% translate "Complaint created" %}</li>
                            <li>{% translate "Trigger hours pass" %}</li>
                            <li>{% translate "Rule checks severity/priority" %}</li>
                            <li>{% translate "Complaint reassigned automatically" %}</li>
                            <li>{% translate "Notification sent to new assignee" %}</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}