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

{% block title %}{{ title }} - {% translate "Complaint Thresholds" %} - PX360{% endblock %}

{% block content %}
<div class="page-header">
    <div class="page-header-content">
        <div>
            <h1 class="page-title">
                <i class="fas fa-chart-line"></i>
                {{ title }}
            </h1>
            <p class="page-description">
                {% if threshold %}
                    {% translate "Edit complaint threshold" %}
                {% else %}
                    {% translate "Create new complaint threshold" %}
                {% endif %}
            </p>
        </div>
        <a href="{% url 'complaints:complaint_threshold_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 "Threshold 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., Daily Complaint Limit' %}">
                            {% 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_threshold_type" class="form-label">
                                {% translate "Threshold Type" %} <span class="text-danger">*</span>
                            </label>
                            <select name="threshold_type" id="id_threshold_type" class="form-select" required>
                                <option value="">{% translate "Select Type" %}</option>
                                {% for value, label in form.threshold_type.field.choices %}
                                <option value="{{ value }}" 
                                        {% if form.threshold_type.value == value %}selected{% endif %}>
                                    {{ label }}
                                </option>
                                {% endfor %}
                            </select>
                            {% if form.threshold_type.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.threshold_type.errors.0 }}
                            </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6">
                            <label for="id_metric_type" class="form-label">
                                {% translate "Metric Type" %} <span class="text-danger">*</span>
                            </label>
                            <select name="metric_type" id="id_metric_type" class="form-select" required>
                                <option value="">{% translate "Select Metric" %}</option>
                                {% for value, label in form.metric_type.field.choices %}
                                <option value="{{ value }}" 
                                        {% if form.metric_type.value == value %}selected{% endif %}>
                                    {{ label }}
                                </option>
                                {% endfor %}
                            </select>
                            {% if form.metric_type.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.metric_type.errors.0 }}
                            </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6">
                            <label for="id_threshold_value" class="form-label">
                                {% translate "Threshold Value" %} <span class="text-danger">*</span>
                            </label>
                            <input type="number" 
                                   name="threshold_value" 
                                   id="id_threshold_value" 
                                   class="form-control" 
                                   value="{{ form.threshold_value.value|default:'' }}" 
                                   min="1" 
                                   required
                                   placeholder="{% translate 'e.g., 10' %}">
                            {% if form.threshold_value.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.threshold_value.errors.0 }}
                            </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6">
                            <label for="id_action" class="form-label">
                                {% translate "Action to Take" %} <span class="text-danger">*</span>
                            </label>
                            <select name="action" id="id_action" class="form-select" required>
                                <option value="">{% translate "Select Action" %}</option>
                                {% for value, label in form.action.field.choices %}
                                <option value="{{ value }}" 
                                        {% if form.action.value == value %}selected{% endif %}>
                                    {{ label }}
                                </option>
                                {% endfor %}
                            </select>
                            {% if form.action.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.action.errors.0 }}
                            </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-12">
                            <label for="id_complaint_category" class="form-label">
                                {% translate "Complaint Category (Optional)" %}
                            </label>
                            <select name="complaint_category" id="id_complaint_category" class="form-select">
                                <option value="">{% translate "All Categories" %}</option>
                                {% for category in form.complaint_category.field.queryset %}
                                <option value="{{ category.id }}" 
                                        {% if form.complaint_category.value == category.id|stringformat:"s" %}selected{% endif %}>
                                    {{ category.name }}
                                </option>
                                {% endfor %}
                            </select>
                            {% if form.complaint_category.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.complaint_category.errors.0 }}
                            </div>
                            {% else %}
                            <div class="form-text">
                                {% translate "Leave empty to apply to all complaint categories" %}
                            </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-12">
                            <label for="id_notify_emails" class="form-label">
                                {% translate "Notify Emails (Optional)" %}
                            </label>
                            <input type="text" 
                                   name="notify_emails" 
                                   id="id_notify_emails" 
                                   class="form-control" 
                                   value="{{ form.notify_emails.value|default:'' }}" 
                                   placeholder="{% translate 'email1@example.com, email2@example.com' %}">
                            {% if form.notify_emails.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.notify_emails.errors.0 }}
                            </div>
                            {% else %}
                            <div class="form-text">
                                {% translate "Comma-separated list of email addresses to notify when threshold is reached" %}
                            </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 thresholds will be monitored" %}
                            </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 threshold' %}">{{ 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:complaint_threshold_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 Complaint Thresholds" %}
                    </h6>
                    <p class="card-text">
                        {% translate "Thresholds monitor complaint metrics and trigger actions when limits are exceeded." %}
                    </p>
                    
                    <h6 class="card-subtitle mb-2 text-muted">
                        {% translate "Threshold Types" %}
                    </h6>
                    <ul class="list-unstyled">
                        <li class="mb-2">
                            <i class="fas fa-calendar-day text-primary me-2"></i>
                            <strong>{% translate "Daily" %}</strong> - {% translate "Monitor daily complaint volume" %}
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-calendar-week text-success me-2"></i>
                            <strong>{% translate "Weekly" %}</strong> - {% translate "Monitor weekly complaint volume" %}
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-calendar text-warning me-2"></i>
                            <strong>{% translate "Monthly" %}</strong> - {% translate "Monitor monthly complaint volume" %}
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-tags text-info me-2"></i>
                            <strong>{% translate "By Category" %}</strong> - {% translate "Monitor specific complaint categories" %}
                        </li>
                    </ul>
                    
                    <hr>
                    
                    <h6 class="card-subtitle mb-2 text-muted">
                        {% translate "Metric Types" %}
                    </h6>
                    <ul class="list-unstyled">
                        <li class="mb-2">
                            <i class="fas fa-list-ol text-secondary me-2"></i>
                            {% translate "Count" %} - {% translate "Number of complaints" %}
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-percentage text-secondary me-2"></i>
                            {% translate "Percentage" %} - {% translate "Percentage of total complaints" %}
                        </li>
                    </ul>
                    
                    <hr>
                    
                    <h6 class="card-subtitle mb-2 text-muted">
                        {% translate "Actions" %}
                    </h6>
                    <ul class="list-unstyled">
                        <li class="mb-2">
                            <i class="fas fa-bell text-warning me-2"></i>
                            {% translate "Send Alert" %} - {% translate "Notify administrators" %}
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-envelope text-info me-2"></i>
                            {% translate "Send Email" %} - {% translate "Send email notifications" %}
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-file-alt text-success me-2"></i>
                            {% translate "Generate Report" %} - {% translate "Create detailed report" %}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}