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

{% block title %}{% if form.instance.pk %}Edit{% else %}Create{% endif %} Imaging Study{% endblock %}

{% block breadcrumb %}
<ol class="breadcrumb float-sm-right">
    <li class="breadcrumb-item"><a href="{% url 'radiology:dashboard' %}">Radiology</a></li>
    <li class="breadcrumb-item"><a href="{% url 'radiology:imaging_study_list' %}">Studies</a></li>
    <li class="breadcrumb-item active">{% if form.instance.pk %}Edit{% else %}Create{% endif %}</li>
</ol>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-8">
            <form method="post" id="studyForm" novalidate>
                {% csrf_token %}
                
                <!-- Study Information -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-x-ray me-2"></i>Study Information
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.study_description.id_for_label }}" class="form-label">
                                    Study Description <span class="text-danger">*</span>
                                </label>
                                {{ form.study_description }}
                                {% if form.study_description.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.study_description.errors.0 }}
                                </div>
                                {% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.modality.id_for_label }}" class="form-label">
                                    Modality <span class="text-danger">*</span>
                                </label>
                                {{ form.modality }}
                                {% if form.modality.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.modality.errors.0 }}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.body_part.id_for_label }}" class="form-label">
                                    Body Part <span class="text-danger">*</span>
                                </label>
                                {{ form.body_part }}
                                {% if form.body_part.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.body_part.errors.0 }}
                                </div>
                                {% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.priority.id_for_label }}" class="form-label">
                                    Priority <span class="text-danger">*</span>
                                </label>
                                {{ form.priority }}
                                {% if form.priority.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.priority.errors.0 }}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.study_date.id_for_label }}" class="form-label">
                                    Study Date <span class="text-danger">*</span>
                                </label>
                                {{ form.study_date }}
                                {% if form.study_date.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.study_date.errors.0 }}
                                </div>
                                {% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.study_time.id_for_label }}" class="form-label">
                                    Study Time <span class="text-danger">*</span>
                                </label>
                                {{ form.study_time }}
                                {% if form.study_time.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.study_time.errors.0 }}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        {% if not form.instance.pk %}
                        <div class="mb-3">
                            <label for="{{ form.study_instance_uid.id_for_label }}" class="form-label">
                                Study Instance UID
                                <small class="text-muted">(Leave blank to auto-generate)</small>
                            </label>
                            {{ form.study_instance_uid }}
                            {% if form.study_instance_uid.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.study_instance_uid.errors.0 }}
                            </div>
                            {% endif %}
                        </div>
                        {% endif %}
                    </div>
                </div>

                <!-- Patient and Provider Information -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-users me-2"></i>Patient and Provider Information
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.patient.id_for_label }}" class="form-label">
                                    Patient <span class="text-danger">*</span>
                                </label>
                                {{ form.patient }}
                                {% if form.patient.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.patient.errors.0 }}
                                </div>
                                {% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.referring_physician.id_for_label }}" class="form-label">
                                    Referring Physician <span class="text-danger">*</span>
                                </label>
                                {{ form.referring_physician }}
                                {% if form.referring_physician.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.referring_physician.errors.0 }}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.radiologist.id_for_label }}" class="form-label">
                                    Radiologist
                                </label>
                                {{ form.radiologist }}
                                {% if form.radiologist.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.radiologist.errors.0 }}
                                </div>
                                {% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.encounter.id_for_label }}" class="form-label">
                                    Related Encounter
                                </label>
                                {{ form.encounter }}
                                {% if form.encounter.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.encounter.errors.0 }}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Clinical Information -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-notes-medical me-2"></i>Clinical Information
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="{{ form.clinical_indication.id_for_label }}" class="form-label">
                                Clinical Indication
                            </label>
                            {{ form.clinical_indication }}
                            {% if form.clinical_indication.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.clinical_indication.errors.0 }}
                            </div>
                            {% endif %}
                        </div>
                        <div class="mb-3">
                            <label for="{{ form.clinical_history.id_for_label }}" class="form-label">
                                Clinical History
                            </label>
                            {{ form.clinical_history }}
                            {% if form.clinical_history.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.clinical_history.errors.0 }}
                            </div>
                            {% endif %}
                        </div>
                        <div class="mb-3">
                            <label for="{{ form.diagnosis_code.id_for_label }}" class="form-label">
                                ICD-10 Diagnosis Code
                            </label>
                            {{ form.diagnosis_code }}
                            {% if form.diagnosis_code.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.diagnosis_code.errors.0 }}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Technical Parameters -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-cogs me-2"></i>Technical Parameters
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="{{ form.kvp.id_for_label }}" class="form-label">
                                    kVp
                                </label>
                                {{ form.kvp }}
                                {% if form.kvp.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.kvp.errors.0 }}
                                </div>
                                {% endif %}
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="{{ form.mas.id_for_label }}" class="form-label">
                                    mAs
                                </label>
                                {{ form.mas }}
                                {% if form.mas.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.mas.errors.0 }}
                                </div>
                                {% endif %}
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="{{ form.exposure_time.id_for_label }}" class="form-label">
                                    Exposure Time (ms)
                                </label>
                                {{ form.exposure_time }}
                                {% if form.exposure_time.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.exposure_time.errors.0 }}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.slice_thickness.id_for_label }}" class="form-label">
                                    Slice Thickness (mm)
                                </label>
                                {{ form.slice_thickness }}
                                {% if form.slice_thickness.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.slice_thickness.errors.0 }}
                                </div>
                                {% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.image_quality.id_for_label }}" class="form-label">
                                    Image Quality
                                </label>
                                {{ form.image_quality }}
                                {% if form.image_quality.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.image_quality.errors.0 }}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Equipment Information -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-desktop me-2"></i>Equipment Information
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="{{ form.station_name.id_for_label }}" class="form-label">
                                    Station Name
                                </label>
                                {{ form.station_name }}
                                {% if form.station_name.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.station_name.errors.0 }}
                                </div>
                                {% endif %}
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="{{ form.manufacturer.id_for_label }}" class="form-label">
                                    Manufacturer
                                </label>
                                {{ form.manufacturer }}
                                {% if form.manufacturer.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.manufacturer.errors.0 }}
                                </div>
                                {% endif %}
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="{{ form.model_name.id_for_label }}" class="form-label">
                                    Model Name
                                </label>
                                {{ form.model_name }}
                                {% if form.model_name.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.model_name.errors.0 }}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <a href="{% url 'radiology:imaging_study_list' %}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Cancel
                            </a>
                            <div>
                                <button type="button" class="btn btn-outline-primary me-2" onclick="saveDraft()">
                                    <i class="fas fa-save"></i> Save Draft
                                </button>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-check"></i> {% if form.instance.pk %}Update{% else %}Create{% endif %} Study
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <!-- Sidebar with Help and Guidelines -->
        <div class="col-lg-4">
            <div class="card sticky-top" style="top: 1rem;">
                <div class="card-header">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-question-circle me-2"></i>Study Creation Guidelines
                    </h6>
                </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="#studyInfo">
                                    Study Information
                                </button>
                            </h2>
                            <div id="studyInfo" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                                <div class="accordion-body">
                                    <ul class="list-unstyled mb-0">
                                        <li><i class="fas fa-check text-success me-2"></i>Use descriptive study names</li>
                                        <li><i class="fas fa-check text-success me-2"></i>Select appropriate modality</li>
                                        <li><i class="fas fa-check text-success me-2"></i>Set correct priority level</li>
                                        <li><i class="fas fa-check text-success me-2"></i>Verify study date/time</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="#clinicalInfo">
                                    Clinical Information
                                </button>
                            </h2>
                            <div id="clinicalInfo" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                                <div class="accordion-body">
                                    <ul class="list-unstyled mb-0">
                                        <li><i class="fas fa-info text-info me-2"></i>Include relevant clinical history</li>
                                        <li><i class="fas fa-info text-info me-2"></i>Specify indication for study</li>
                                        <li><i class="fas fa-info text-info me-2"></i>Add ICD-10 codes when available</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="#technicalParams">
                                    Technical Parameters
                                </button>
                            </h2>
                            <div id="technicalParams" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
                                <div class="accordion-body">
                                    <ul class="list-unstyled mb-0">
                                        <li><i class="fas fa-cog text-warning me-2"></i>Optional but recommended</li>
                                        <li><i class="fas fa-cog text-warning me-2"></i>Used for quality assurance</li>
                                        <li><i class="fas fa-cog text-warning me-2"></i>Can be updated after acquisition</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Auto-save functionality
let autoSaveTimer;

function saveDraft() {
    // Implement auto-save functionality
    console.log('Saving draft...');
}

function startAutoSave() {
    clearTimeout(autoSaveTimer);
    autoSaveTimer = setTimeout(saveDraft, 30000); // Auto-save every 30 seconds
}

// Form validation
document.getElementById('studyForm').addEventListener('submit', function(e) {
    const form = this;
    if (!form.checkValidity()) {
        e.preventDefault();
        e.stopPropagation();
    }
    form.classList.add('was-validated');
});

// Initialize auto-save
document.addEventListener('DOMContentLoaded', function() {
    const formInputs = document.querySelectorAll('#studyForm input, #studyForm select, #studyForm textarea');
    formInputs.forEach(input => {
        input.addEventListener('change', startAutoSave);
    });
});
</script>
{% endblock %}