{% extends 'base/base.html' %}
{% load static %}

{% block title %}
    {% if object %}Edit Laboratory Test{% else %}Add Laboratory Test{% endif %}
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0">
                    {% if object %}
                        Edit Laboratory Test: {{ object.test_name }}
                    {% else %}
                        Add New Laboratory Test
                    {% endif %}
                </h1>
                <a href="{% url 'laboratory:lab_test_list' %}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left"></i> Back to Tests
                </a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}
                        
                        {% if form.non_field_errors %}
                            <div class="alert alert-danger">
                                {{ form.non_field_errors }}
                            </div>
                        {% endif %}

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="{{ form.test_code.id_for_label }}" class="form-label">
                                        Test Code <span class="text-danger">*</span>
                                    </label>
                                    {{ form.test_code }}
                                    {% if form.test_code.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.test_code.errors }}
                                        </div>
                                    {% endif %}
                                    <small class="form-text text-muted">Unique identifier for this test</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="{{ form.test_name.id_for_label }}" class="form-label">
                                        Test Name <span class="text-danger">*</span>
                                    </label>
                                    {{ form.test_name }}
                                    {% if form.test_name.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.test_name.errors }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="{{ form.test_description.id_for_label }}" class="form-label">
                                Test Description
                            </label>
                            {{ form.test_description }}
                            {% if form.test_description.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.test_description.errors }}
                                </div>
                            {% endif %}
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="{{ form.test_category.id_for_label }}" class="form-label">
                                        Category <span class="text-danger">*</span>
                                    </label>
                                    {{ form.test_category }}
                                    {% if form.test_category.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.test_category.errors }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="{{ form.specimen_type.id_for_label }}" class="form-label">
                                        Specimen Type <span class="text-danger">*</span>
                                    </label>
                                    {{ form.specimen_type }}
                                    {% if form.specimen_type.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.specimen_type.errors }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="{{ form.methodology.id_for_label }}" class="form-label">
                                        Methodology
                                    </label>
                                    {{ form.methodology }}
                                    {% if form.methodology.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.methodology.errors }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="{{ form.turnaround_time_hours.id_for_label }}" class="form-label">
                                        Turnaround Time (Hours) <span class="text-danger">*</span>
                                    </label>
                                    {{ form.turnaround_time_hours }}
                                    {% if form.turnaround_time_hours.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.turnaround_time_hours.errors }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="{{ form.units.id_for_label }}" class="form-label">
                                        Units
                                    </label>
                                    {{ form.units }}
                                    {% if form.units.errors %}
                                        <div class="invalid-feedback d-block">
                                            {{ form.units.errors }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="form-label">Options</label>
                                    <div class="form-check">
                                        {{ form.is_active }}
                                        <label for="{{ form.is_active.id_for_label }}" class="form-check-label">
                                            Active
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        {{ form.requires_fasting }}
                                        <label for="{{ form.requires_fasting.id_for_label }}" class="form-check-label">
                                            Requires Fasting
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="{{ form.normal_range_text.id_for_label }}" class="form-label">
                                Normal Range Text
                            </label>
                            {{ form.normal_range_text }}
                            {% if form.normal_range_text.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.normal_range_text.errors }}
                                </div>
                            {% endif %}
                            <small class="form-text text-muted">General description of normal range</small>
                        </div>

                        <div class="form-group">
                            <label for="{{ form.special_instructions.id_for_label }}" class="form-label">
                                Special Instructions
                            </label>
                            {{ form.special_instructions }}
                            {% if form.special_instructions.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.special_instructions.errors }}
                                </div>
                            {% endif %}
                            <small class="form-text text-muted">Special collection or processing instructions</small>
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> 
                                {% if object %}Update Test{% else %}Create Test{% endif %}
                            </button>
                            <a href="{% url 'laboratory:lab_test_list' %}" class="btn btn-secondary">
                                <i class="fas fa-times"></i> Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Help</h5>
                </div>
                <div class="card-body">
                    <h6>Test Code</h6>
                    <p class="small text-muted">
                        Use a unique, standardized code for this test. Common formats include LOINC codes or internal lab codes.
                    </p>

                    <h6>Category</h6>
                    <p class="small text-muted">
                        Select the appropriate category to help organize and filter tests.
                    </p>

                    <h6>Turnaround Time</h6>
                    <p class="small text-muted">
                        Expected time from specimen collection to result availability in hours.
                    </p>

                    <h6>Fasting Requirement</h6>
                    <p class="small text-muted">
                        Check if this test requires the patient to fast before specimen collection.
                    </p>
                </div>
            </div>

            {% if object %}
            <div class="card mt-3">
                <div class="card-header">
                    <h5 class="mb-0">Test Statistics</h5>
                </div>
                <div class="card-body">
                    <p class="small">
                        <strong>Created:</strong> {{ object.created_at|date:"M d, Y H:i" }}<br>
                        <strong>Last Updated:</strong> {{ object.updated_at|date:"M d, Y H:i" }}
                    </p>
                    {% if object.reference_ranges.count %}
                    <p class="small">
                        <strong>Reference Ranges:</strong> {{ object.reference_ranges.count }}
                    </p>
                    {% endif %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
$(document).ready(function() {
    // Add Bootstrap classes to form fields
    $('input[type="text"], input[type="number"], select, textarea').addClass('form-control');
    $('input[type="checkbox"]').addClass('form-check-input');
    
    // Auto-uppercase test code
    $('#id_test_code').on('input', function() {
        this.value = this.value.toUpperCase();
    });
});
</script>
{% endblock %}