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

{% block title %}
    {% if object %}Edit Quality Indicator{% else %}Create Quality Indicator{% endif %} - {{ block.super }}
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1">
                <i class="fas fa-chart-line me-2"></i>
                {% if object %}Edit Quality Indicator{% else %}Create Quality Indicator{% endif %}
            </h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{% url 'quality:dashboard' %}">Quality</a></li>
                    <li class="breadcrumb-item"><a href="{% url 'quality:quality_indicator_list' %}">Indicators</a></li>
                    <li class="breadcrumb-item active">
                        {% if object %}Edit{% else %}Create{% endif %}
                    </li>
                </ol>
            </nav>
        </div>
        <div class="btn-group">
            <a href="{% url 'quality:quality_indicator_list' %}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Back to List
            </a>
            {% if object %}
            <a href="{% url 'quality:quality_indicator_detail' object.pk %}" class="btn btn-outline-info">
                <i class="fas fa-eye me-2"></i>View Details
            </a>
            {% endif %}
        </div>
    </div>

    <div class="row">
        <!-- Main Form -->
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-edit me-2"></i>Indicator Information
                    </h5>
                </div>
                <div class="card-body">
                    <form method="post" novalidate>
                        {% csrf_token %}
                        
                        <!-- Basic Information -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">
                                    <i class="fas fa-info-circle me-2"></i>Basic Information
                                </h6>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-floating">
                                    {{ form.name }}
                                    <label for="{{ form.name.id_for_label }}">Indicator Name *</label>
                                    {% if form.name.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.name.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-floating">
                                    {{ form.measurement_unit }}
                                    <label for="{{ form.measurement_unit.id_for_label }}">Measurement Unit *</label>
                                    {% if form.measurement_unit.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.measurement_unit.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-12 mb-3">
                                <div class="form-floating">
                                    {{ form.description }}
                                    <label for="{{ form.description.id_for_label }}">Description *</label>
                                    {% if form.description.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.description.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- Classification -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">
                                    <i class="fas fa-tags me-2"></i>Classification
                                </h6>
                            </div>
                            <div class="col-md-4 mb-3">
                                <div class="form-floating">
                                    {{ form.category }}
                                    <label for="{{ form.category.id_for_label }}">Category *</label>
                                    {% if form.category.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.category.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <div class="form-floating">
                                    {{ form.type }}
                                    <label for="{{ form.type.id_for_label }}">Type *</label>
                                    {% if form.type.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.type.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <div class="form-floating">
                                    {{ form.frequency }}
                                    <label for="{{ form.frequency.id_for_label }}">Frequency *</label>
                                    {% if form.frequency.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.frequency.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- Targets and Thresholds -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">
                                    <i class="fas fa-bullseye me-2"></i>Targets and Thresholds
                                </h6>
                            </div>
                            <div class="col-md-4 mb-3">
                                <div class="form-floating">
                                    {{ form.target_value }}
                                    <label for="{{ form.target_value.id_for_label }}">Target Value *</label>
                                    {% if form.target_value.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.target_value.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <div class="form-floating">
                                    {{ form.threshold_warning }}
                                    <label for="{{ form.threshold_warning.id_for_label }}">Warning Threshold *</label>
                                    {% if form.threshold_warning.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.threshold_warning.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <div class="form-floating">
                                    {{ form.threshold_critical }}
                                    <label for="{{ form.threshold_critical.id_for_label }}">Critical Threshold *</label>
                                    {% if form.threshold_critical.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.threshold_critical.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- Calculation and Data Source -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">
                                    <i class="fas fa-calculator me-2"></i>Calculation and Data Source
                                </h6>
                            </div>
                            <div class="col-12 mb-3">
                                <div class="form-floating">
                                    {{ form.calculation_method }}
                                    <label for="{{ form.calculation_method.id_for_label }}">Calculation Method *</label>
                                    {% if form.calculation_method.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.calculation_method.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-12 mb-3">
                                <div class="form-floating">
                                    {{ form.data_source }}
                                    <label for="{{ form.data_source.id_for_label }}">Data Source *</label>
                                    {% if form.data_source.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.data_source.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- Responsibility -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">
                                    <i class="fas fa-user-check me-2"></i>Responsibility
                                </h6>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-floating">
                                    {{ form.responsible_department }}
                                    <label for="{{ form.responsible_department.id_for_label }}">Responsible Department</label>
                                    {% if form.responsible_department.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.responsible_department.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-floating">
                                    {{ form.responsible_user }}
                                    <label for="{{ form.responsible_user.id_for_label }}">Responsible Person</label>
                                    {% if form.responsible_user.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.responsible_user.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- Settings -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">
                                    <i class="fas fa-cog me-2"></i>Settings
                                </h6>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-check form-switch">
                                    {{ form.is_active }}
                                    <label class="form-check-label" for="{{ form.is_active.id_for_label }}">
                                        Active Indicator
                                    </label>
                                    {% if form.is_active.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.is_active.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-check form-switch">
                                    {{ form.regulatory_requirement }}
                                    <label class="form-check-label" for="{{ form.regulatory_requirement.id_for_label }}">
                                        Regulatory Requirement
                                    </label>
                                    {% if form.regulatory_requirement.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.regulatory_requirement.errors.0 }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="d-flex justify-content-between">
                            <a href="{% url 'quality:quality_indicator_list' %}" class="btn btn-outline-secondary">
                                <i class="fas fa-times me-2"></i>Cancel
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-2"></i>
                                {% if object %}Update Indicator{% else %}Create Indicator{% endif %}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Help Panel -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-question-circle me-2"></i>Help & Guidelines
                    </h5>
                </div>
                <div class="card-body">
                    <div class="accordion" id="helpAccordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#indicatorTypes">
                                    Indicator Types
                                </button>
                            </h2>
                            <div id="indicatorTypes" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                                <div class="accordion-body">
                                    <ul class="list-unstyled">
                                        <li><strong>Structure:</strong> Resources, facilities, equipment</li>
                                        <li><strong>Process:</strong> Activities and procedures</li>
                                        <li><strong>Outcome:</strong> Results and effects</li>
                                        <li><strong>Balancing:</strong> Unintended consequences</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#thresholds">
                                    Setting Thresholds
                                </button>
                            </h2>
                            <div id="thresholds" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                                <div class="accordion-body">
                                    <p><strong>Target Value:</strong> Desired performance level</p>
                                    <p><strong>Warning:</strong> Performance requiring attention</p>
                                    <p><strong>Critical:</strong> Performance requiring immediate action</p>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#calculation">
                                    Calculation Methods
                                </button>
                            </h2>
                            <div id="calculation" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                                <div class="accordion-body">
                                    <p>Describe how the indicator value is calculated:</p>
                                    <ul>
                                        <li>Numerator and denominator</li>
                                        <li>Data collection period</li>
                                        <li>Inclusion/exclusion criteria</li>
                                        <li>Calculation formula</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {% if object %}
            <!-- Current Status -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-bar me-2"></i>Current Status
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-6">
                            <div class="text-center">
                                <h4 class="text-primary mb-1">{{ object.measurements.count }}</h4>
                                <small class="text-muted">Measurements</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-center">
                                {% if object.latest_measurement %}
                                    <h4 class="mb-1 
                                        {% if object.current_status == 'within_target' %}text-success
                                        {% elif object.current_status == 'warning' %}text-warning
                                        {% elif object.current_status == 'critical' %}text-danger
                                        {% else %}text-muted{% endif %}">
                                        {{ object.latest_measurement.value }}
                                    </h4>
                                    <small class="text-muted">Latest Value</small>
                                {% else %}
                                    <h4 class="text-muted mb-1">-</h4>
                                    <small class="text-muted">No Data</small>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% if object.latest_measurement %}
                    <div class="mt-3">
                        <small class="text-muted">
                            Last updated: {{ object.latest_measurement.measurement_date|date:"M d, Y" }}
                        </small>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<script>
// Form validation
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form');
    const inputs = form.querySelectorAll('input, select, textarea');
    
    // Add Bootstrap validation classes
    inputs.forEach(input => {
        input.addEventListener('blur', function() {
            if (this.checkValidity()) {
                this.classList.remove('is-invalid');
                this.classList.add('is-valid');
            } else {
                this.classList.remove('is-valid');
                this.classList.add('is-invalid');
            }
        });
    });
    
    // Threshold validation
    const targetValue = document.getElementById('{{ form.target_value.id_for_label }}');
    const warningThreshold = document.getElementById('{{ form.threshold_warning.id_for_label }}');
    const criticalThreshold = document.getElementById('{{ form.threshold_critical.id_for_label }}');
    
    function validateThresholds() {
        const target = parseFloat(targetValue.value) || 0;
        const warning = parseFloat(warningThreshold.value) || 0;
        const critical = parseFloat(criticalThreshold.value) || 0;
        
        // Basic validation - warning should be between target and critical
        if (target && warning && critical) {
            if (warning < target || warning > critical) {
                warningThreshold.setCustomValidity('Warning threshold should be between target and critical values');
            } else {
                warningThreshold.setCustomValidity('');
            }
        }
    }
    
    [targetValue, warningThreshold, criticalThreshold].forEach(input => {
        if (input) {
            input.addEventListener('input', validateThresholds);
        }
    });
});
</script>

<style>
.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}

.form-floating > label {
    opacity: 0.65;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.accordion-button:not(.collapsed) {
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}

.card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.card-header {
    background-color: rgba(13, 110, 253, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.btn {
    border-radius: 0.375rem;
    transition: all 0.15s ease-in-out;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

@media (max-width: 768px) {
    .d-flex.justify-content-between {
        flex-direction: column;
        gap: 1rem;
    }
    
    .btn-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .card-body {
        padding: 1rem;
    }
}
</style>
{% endblock %}