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

{% block title %}{{ title }} - {% translate "SLA Configurations" %} - PX360{% endblock %}

{% block content %}
<div class="page-header">
    <div class="page-header-content">
        <div>
            <h1 class="page-title">
                <i class="fas fa-clock"></i>
                {{ title }}
            </h1>
            <p class="page-description">
                {% if sla_config %}
                    {% translate "Edit SLA configuration" %}
                {% else %}
                    {% translate "Create new SLA configuration" %}
                {% endif %}
            </p>
        </div>
        <a href="{% url 'complaints:sla_config_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-6">
                            <label for="id_severity" class="form-label">
                                {% translate "Severity" %} <span class="text-danger">*</span>
                            </label>
                            <select name="severity" id="id_severity" class="form-select" required>
                                <option value="">{% translate "Select Severity" %}</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>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6">
                            <label for="id_priority" class="form-label">
                                {% translate "Priority" %} <span class="text-danger">*</span>
                            </label>
                            <select name="priority" id="id_priority" class="form-select" required>
                                <option value="">{% translate "Select Priority" %}</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>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6">
                            <label for="id_sla_hours" class="form-label">
                                {% translate "SLA Deadline (Hours)" %} <span class="text-danger">*</span>
                            </label>
                            <input type="number" 
                                   name="sla_hours" 
                                   id="id_sla_hours" 
                                   class="form-control" 
                                   value="{{ form.sla_hours.value|default:'' }}" 
                                   min="1" 
                                   step="0.5" 
                                   required
                                   placeholder="{% translate 'e.g., 24' %}">
                            {% if form.sla_hours.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.sla_hours.errors.0 }}
                            </div>
                            {% else %}
                            <div class="form-text">
                                {% translate "Hours after complaint creation before deadline" %}
                            </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6">
                            <label for="id_warning_hours" class="form-label">
                                {% translate "Warning Threshold (Hours)" %} <span class="text-danger">*</span>
                            </label>
                            <input type="number" 
                                   name="warning_hours" 
                                   id="id_warning_hours" 
                                   class="form-control" 
                                   value="{{ form.warning_hours.value|default:'' }}" 
                                   min="1" 
                                   step="0.5" 
                                   required
                                   placeholder="{% translate 'e.g., 18' %}">
                            {% if form.warning_hours.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.warning_hours.errors.0 }}
                            </div>
                            {% else %}
                            <div class="form-text">
                                {% translate "Hours before deadline to send warning notification" %}
                            </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 configurations will be applied to complaints" %}
                            </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 configuration' %}">{{ 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:sla_config_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 SLA Configuration" %}
                    </h6>
                    <p class="card-text">
                        {% translate "Service Level Agreements (SLAs) define the timeframes within which complaints should be resolved based on their severity and priority." %}
                    </p>
                    <ul class="list-unstyled">
                        <li class="mb-2">
                            <i class="fas fa-check text-success me-2"></i>
                            {% translate "High severity complaints typically have shorter SLAs" %}
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check text-success me-2"></i>
                            {% translate "Warning threshold sends notifications before deadline" %}
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check text-success me-2"></i>
                            {% translate "Inactive configurations won't be applied" %}
                        </li>
                    </ul>
                    
                    <hr>
                    
                    <h6 class="card-subtitle mb-2 text-muted">
                        {% translate "Best Practices" %}
                    </h6>
                    <ul class="list-unstyled">
                        <li class="mb-2">
                            <i class="fas fa-lightbulb text-warning me-2"></i>
                            {% translate "Set warning threshold at least 4-6 hours before deadline" %}
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-lightbulb text-warning me-2"></i>
                            {% translate "Consider hospital-specific requirements" %}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}