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

{% block title %}
{% if form.instance.id %}Edit Problem: {{ form.instance.problem_name }}{% else %}New Problem{% endif %}
{% endblock %}

{% block css %}
<link href="{% static 'plugins/select2/dist/css/select2.min.css' %}" rel="stylesheet" />
<link href="{% static 'plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css' %}" rel="stylesheet" />
<link href="{% static 'plugins/bootstrap-icons/font/bootstrap-icons.css' %}" rel="stylesheet" />
<style>
    .form-floating > .form-control:focus ~ label,
    .form-floating > .form-control:not(:placeholder-shown) ~ label,
    .form-floating > .form-select ~ label {
        opacity: .65;
        transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
    }
    .form-floating > label {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        padding: 1rem 0.75rem;
        pointer-events: none;
        border: 1px solid transparent;
        transform-origin: 0 0;
        transition: opacity .1s ease-in-out, transform .1s ease-in-out;
    }
    .form-section {
        padding: 1.5rem;
        border-radius: 0.5rem;
        background-color: rgba(var(--bs-light-rgb), 0.5);
        margin-bottom: 1.5rem;
    }
    .form-section-title {
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--bs-gray-300);
    }
    .required-field label::after {
        content: " *";
        color: var(--bs-danger);
    }
    .help-sidebar {
        position: sticky;
        top: 1rem;
    }
    .help-card {
        transition: all 0.2s;
    }
    .help-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
</style>
{% endblock %}

{% block content %}
<!-- begin breadcrumb -->
<ol class="breadcrumb float-xl-end">
    <li class="breadcrumb-item"><a href="{% url 'dashboard' %}">Home</a></li>
    <li class="breadcrumb-item"><a href="{% url 'emr:dashboard' %}">EMR</a></li>
    <li class="breadcrumb-item"><a href="{% url 'emr:problem_list' %}">Problems</a></li>
    <li class="breadcrumb-item active">
        {% if form.instance.id %}Edit Problem{% else %}New Problem{% endif %}
    </li>
</ol>
<!-- end breadcrumb -->

<!-- begin page-header -->
<h1 class="page-header">
    {% if form.instance.id %}
    Edit Problem <small>Update problem information</small>
    {% else %}
    New Problem <small>Create a new patient problem</small>
    {% endif %}
</h1>
<!-- end page-header -->

<!-- begin row -->
<div class="row">
    <!-- begin col-9 -->
    <div class="col-xl-9">
        <!-- begin panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">
                    {% if form.instance.id %}
                    Edit Problem: {{ form.instance.problem_name }}
                    {% else %}
                    Problem Information
                    {% endif %}
                </h4>
                <div class="panel-heading-btn">
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
                </div>
            </div>
            <div class="panel-body">
                <form method="post" id="problemForm">
                    {% csrf_token %}
                    
                    {% if form.errors %}
                    <div class="alert alert-danger">
                        <strong>Error!</strong> Please correct the errors below.
                        {% if form.non_field_errors %}
                        <ul>
                            {% for error in form.non_field_errors %}
                            <li>{{ error }}</li>
                            {% endfor %}
                        </ul>
                        {% endif %}
                    </div>
                    {% endif %}
                    
                    <!-- Basic Information Section -->
                    <div class="form-section">
                        <h5 class="form-section-title">Basic Information</h5>
                        <div class="row">
                            <div class="col-md-6 mb-3 required-field">
                                <div class="form-floating">
                                    {{ form.patient }}
                                    <label for="{{ form.patient.id_for_label }}">Patient</label>
                                </div>
                                {% if form.patient.errors %}
                                <div class="invalid-feedback d-block">{{ form.patient.errors }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-6 mb-3 required-field">
                                <div class="form-floating">
                                    {{ form.problem_name }}
                                    <label for="{{ form.problem_name.id_for_label }}">Problem Name</label>
                                </div>
                                {% if form.problem_name.errors %}
                                <div class="invalid-feedback d-block">{{ form.problem_name.errors }}</div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3 required-field">
                                <div class="form-floating">
                                    {{ form.problem_type }}
                                    <label for="{{ form.problem_type.id_for_label }}">Problem Type</label>
                                </div>
                                {% if form.problem_type.errors %}
                                <div class="invalid-feedback d-block">{{ form.problem_type.errors }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-floating">
                                    {{ form.related_encounter }}
                                    <label for="{{ form.related_encounter.id_for_label }}">Related Encounter</label>
                                </div>
                                {% if form.related_encounter.errors %}
                                <div class="invalid-feedback d-block">{{ form.related_encounter.errors }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <!-- Coding Information Section -->
                    <div class="form-section">
                        <h5 class="form-section-title">Coding Information</h5>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="form-floating">
                                    {{ form.problem_code }}
                                    <label for="{{ form.problem_code.id_for_label }}">Problem Code</label>
                                </div>
                                {% if form.problem_code.errors %}
                                <div class="invalid-feedback d-block">{{ form.problem_code.errors }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-floating">
                                    {{ form.coding_system }}
                                    <label for="{{ form.coding_system.id_for_label }}">Coding System</label>
                                </div>
                                {% if form.coding_system.errors %}
                                <div class="invalid-feedback d-block">{{ form.coding_system.errors }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <!-- Clinical Information Section -->
                    <div class="form-section">
                        <h5 class="form-section-title">Clinical Information</h5>
                        <div class="row">
                            <div class="col-md-4 mb-3 required-field">
                                <div class="form-floating">
                                    {{ form.severity }}
                                    <label for="{{ form.severity.id_for_label }}">Severity</label>
                                </div>
                                {% if form.severity.errors %}
                                <div class="invalid-feedback d-block">{{ form.severity.errors }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-4 mb-3 required-field">
                                <div class="form-floating">
                                    {{ form.priority }}
                                    <label for="{{ form.priority.id_for_label }}">Priority</label>
                                </div>
                                {% if form.priority.errors %}
                                <div class="invalid-feedback d-block">{{ form.priority.errors }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-4 mb-3 required-field">
                                <div class="form-floating">
                                    {{ form.status }}
                                    <label for="{{ form.status.id_for_label }}">Status</label>
                                </div>
                                {% if form.status.errors %}
                                <div class="invalid-feedback d-block">{{ form.status.errors }}</div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="form-floating">
                                    {{ form.onset_date }}
                                    <label for="{{ form.onset_date.id_for_label }}">Onset Date</label>
                                </div>
                                {% if form.onset_date.errors %}
                                <div class="invalid-feedback d-block">{{ form.onset_date.errors }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-floating">
                                    {{ form.onset_description }}
                                    <label for="{{ form.onset_description.id_for_label }}">Onset Description</label>
                                </div>
                                {% if form.onset_description.errors %}
                                <div class="invalid-feedback d-block">{{ form.onset_description.errors }}</div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="form-floating">
                                    {{ form.body_site }}
                                    <label for="{{ form.body_site.id_for_label }}">Body Site</label>
                                </div>
                                {% if form.body_site.errors %}
                                <div class="invalid-feedback d-block">{{ form.body_site.errors }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-floating">
                                    {{ form.laterality }}
                                    <label for="{{ form.laterality.id_for_label }}">Laterality</label>
                                </div>
                                {% if form.laterality.errors %}
                                <div class="invalid-feedback d-block">{{ form.laterality.errors }}</div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="row status-resolved-fields" style="display: none;">
                            <div class="col-md-6 mb-3">
                                <div class="form-floating">
                                    {{ form.resolution_date }}
                                    <label for="{{ form.resolution_date.id_for_label }}">Resolution Date</label>
                                </div>
                                {% if form.resolution_date.errors %}
                                <div class="invalid-feedback d-block">{{ form.resolution_date.errors }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-floating">
                                    {{ form.resolution_notes }}
                                    <label for="{{ form.resolution_notes.id_for_label }}">Resolution Notes</label>
                                </div>
                                {% if form.resolution_notes.errors %}
                                <div class="invalid-feedback d-block">{{ form.resolution_notes.errors }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <!-- Provider Information Section -->
                    <div class="form-section">
                        <h5 class="form-section-title">Provider Information</h5>
                        <div class="row">
                            <div class="col-md-6 mb-3 required-field">
                                <div class="form-floating">
                                    {{ form.diagnosing_provider }}
                                    <label for="{{ form.diagnosing_provider.id_for_label }}">Diagnosing Provider</label>
                                </div>
                                {% if form.diagnosing_provider.errors %}
                                <div class="invalid-feedback d-block">{{ form.diagnosing_provider.errors }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="form-floating">
                                    {{ form.managing_provider }}
                                    <label for="{{ form.managing_provider.id_for_label }}">Managing Provider</label>
                                </div>
                                {% if form.managing_provider.errors %}
                                <div class="invalid-feedback d-block">{{ form.managing_provider.errors }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <!-- Notes Section -->
                    <div class="form-section">
                        <h5 class="form-section-title">Notes & Documentation</h5>
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label for="{{ form.clinical_notes.id_for_label }}">Clinical Notes</label>
                                {{ form.clinical_notes }}
                                {% if form.clinical_notes.errors %}
                                <div class="invalid-feedback d-block">{{ form.clinical_notes.errors }}</div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label for="{{ form.patient_concerns.id_for_label }}">Patient Concerns</label>
                                {{ form.patient_concerns }}
                                {% if form.patient_concerns.errors %}
                                <div class="invalid-feedback d-block">{{ form.patient_concerns.errors }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <!-- Goals & Outcomes Section -->
                    <div class="form-section">
                        <h5 class="form-section-title">Goals & Outcomes</h5>
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label for="{{ form.treatment_goals.id_for_label }}">Treatment Goals</label>
                                {{ form.treatment_goals }}
                                {% if form.treatment_goals.errors %}
                                <div class="invalid-feedback d-block">{{ form.treatment_goals.errors }}</div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label for="{{ form.outcome_measures.id_for_label }}">Outcome Measures</label>
                                {{ form.outcome_measures }}
                                {% if form.outcome_measures.errors %}
                                <div class="invalid-feedback d-block">{{ form.outcome_measures.errors }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <!-- Verification Section -->
                    <div class="form-section">
                        <h5 class="form-section-title">Verification</h5>
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <div class="form-check form-switch">
                                    {{ form.verified }}
                                    <label class="form-check-label" for="{{ form.verified.id_for_label }}">Verified</label>
                                </div>
                                {% if form.verified.errors %}
                                <div class="invalid-feedback d-block">{{ form.verified.errors }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-8 mb-3 verified-fields" style="display: none;">
                                <div class="form-floating">
                                    {{ form.verified_by }}
                                    <label for="{{ form.verified_by.id_for_label }}">Verified By</label>
                                </div>
                                {% if form.verified_by.errors %}
                                <div class="invalid-feedback d-block">{{ form.verified_by.errors }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <!-- Form Actions -->
                    <div class="d-flex justify-content-between mt-4">
                        <a href="{% url 'emr:problem_list' %}" class="btn btn-secondary">
                            <i class="fa fa-arrow-left me-1"></i> Cancel
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fa fa-save me-1"></i> 
                            {% if form.instance.id %}Update Problem{% else %}Create Problem{% endif %}
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <!-- end panel -->
    </div>
    <!-- end col-9 -->
    
    <!-- begin col-3 -->
    <div class="col-xl-3">
        <!-- begin help sidebar -->
        <div class="help-sidebar">
            <!-- Quick Tips Card -->
            <div class="card mb-3 help-card">
                <div class="card-header bg-primary text-white">
                    <h5 class="card-title mb-0">
                        <i class="fa fa-lightbulb me-1"></i> Quick Tips
                    </h5>
                </div>
                <div class="card-body">
                    <ul class="ps-3">
                        <li class="mb-2">Fields marked with <span class="text-danger">*</span> are required.</li>
                        <li class="mb-2">Use ICD-10 codes when available for standardized documentation.</li>
                        <li class="mb-2">Set appropriate priority to ensure proper attention to critical problems.</li>
                        <li class="mb-2">Include specific body site and laterality for physical conditions.</li>
                    </ul>
                </div>
            </div>
            
            <!-- Problem Types Card -->
            <div class="card mb-3 help-card">
                <div class="card-header bg-info text-white">
                    <h5 class="card-title mb-0">
                        <i class="fa fa-info-circle me-1"></i> Problem Types
                    </h5>
                </div>
                <div class="card-body">
                    <dl>
                        <dt>Diagnosis</dt>
                        <dd>Confirmed medical condition</dd>
                        
                        <dt>Finding</dt>
                        <dd>Clinical observation without definitive diagnosis</dd>
                        
                        <dt>Symptom</dt>
                        <dd>Patient-reported subjective experience</dd>
                        
                        <dt>Complaint</dt>
                        <dd>Patient concern or issue</dd>
                        
                        <dt>Condition</dt>
                        <dd>Health state requiring attention</dd>
                    </dl>
                </div>
            </div>
            
            <!-- Status Information Card -->
            <div class="card help-card">
                <div class="card-header bg-success text-white">
                    <h5 class="card-title mb-0">
                        <i class="fa fa-check-circle me-1"></i> Status Information
                    </h5>
                </div>
                <div class="card-body">
                    <dl>
                        <dt>Active</dt>
                        <dd>Current problem requiring attention</dd>
                        
                        <dt>Resolved</dt>
                        <dd>Problem no longer present</dd>
                        
                        <dt>Remission</dt>
                        <dd>Problem temporarily subsided</dd>
                        
                        <dt>Recurrence</dt>
                        <dd>Problem has returned after resolution</dd>
                        
                        <dt>Inactive</dt>
                        <dd>Problem still exists but not currently active</dd>
                    </dl>
                </div>
            </div>
        </div>
        <!-- end help sidebar -->
    </div>
    <!-- end col-3 -->
</div>
<!-- end row -->
{% endblock %}

{% block js %}
<script src="{% static 'plugins/select2/dist/js/select2.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js' %}"></script>
<script>
$(document).ready(function() {
    // Initialize select2
    $('.form-select').select2({
        theme: 'bootstrap',
        width: '100%'
    });
    
    // Initialize datepicker
    $('.datepicker').datepicker({
        format: 'yyyy-mm-dd',
        autoclose: true,
        todayHighlight: true
    });
    
    // Show/hide resolution fields based on status
    function toggleResolutionFields() {
        var status = $('#{{ form.status.id_for_label }}').val();
        if (status === 'RESOLVED' || status === 'REMISSION') {
            $('.status-resolved-fields').show();
        } else {
            $('.status-resolved-fields').hide();
        }
    }
    
    // Show/hide verified by field based on verified checkbox
    function toggleVerifiedFields() {
        if ($('#{{ form.verified.id_for_label }}').is(':checked')) {
            $('.verified-fields').show();
        } else {
            $('.verified-fields').hide();
        }
    }
    
    // Initial toggle
    toggleResolutionFields();
    toggleVerifiedFields();
    
    // Toggle on change
    $('#{{ form.status.id_for_label }}').change(toggleResolutionFields);
    $('#{{ form.verified.id_for_label }}').change(toggleVerifiedFields);
    
    // Form validation
    $('#problemForm').submit(function(e) {
        var isValid = true;
        
        // Check required fields
        $('.required-field select, .required-field input, .required-field textarea').each(function() {
            if (!$(this).val()) {
                $(this).addClass('is-invalid');
                isValid = false;
            } else {
                $(this).removeClass('is-invalid');
            }
        });
        
        // Check resolution date if status is resolved
        var status = $('#{{ form.status.id_for_label }}').val();
        if ((status === 'RESOLVED' || status === 'REMISSION') && !$('#{{ form.resolution_date.id_for_label }}').val()) {
            $('#{{ form.resolution_date.id_for_label }}').addClass('is-invalid');
            isValid = false;
        }
        
        // Check verified by if verified is checked
        if ($('#{{ form.verified.id_for_label }}').is(':checked') && !$('#{{ form.verified_by.id_for_label }}').val()) {
            $('#{{ form.verified_by.id_for_label }}').addClass('is-invalid');
            isValid = false;
        }
        
        if (!isValid) {
            e.preventDefault();
            $('html, body').animate({
                scrollTop: $('.is-invalid').first().offset().top - 100
            }, 200);
        }
    });
});
</script>
{% endblock %}