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

{% block title %}Update Encounter{% endblock %}

{% block content %}
<div id="content" class="app-content">
    <div class="container">
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{% url 'emr:dashboard' %}">EMR</a></li>
            <li class="breadcrumb-item"><a href="{% url 'emr:encounter_list' %}">Encounters</a></li>
            <li class="breadcrumb-item"><a href="{% url 'emr:encounter_detail' encounter.encounter_id %}">{{ encounter.encounter_id }}</a></li>
            <li class="breadcrumb-item active">Update</li>
        </ul>
        
        <div class="row align-items-center mb-3">
            <div class="col">
                <h1 class="page-header">Update Encounter</h1>
                <p class="text-muted">Modify encounter details and documentation</p>
            </div>
            <div class="col-auto">
                <a href="{% url 'emr:encounter_detail' encounter.encounter_id %}" class="btn btn-outline-secondary">
                    <i class="fa fa-arrow-left me-2"></i>Back to Encounter
                </a>
            </div>
        </div>
        
        <!-- Patient Information -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Patient Information</h4>
                        <div class="card-tools">
                            <span class="badge bg-info">{{ encounter.encounter_id }}</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <strong>{{ encounter.patient.first_name }} {{ encounter.patient.last_name }}</strong><br>
                                <small class="text-muted">ID: {{ encounter.patient.patient_id }}</small>
                            </div>
                            <div class="col-md-3">
                                <strong>DOB:</strong> {{ encounter.patient.date_of_birth|date:"M d, Y" }}<br>
                                <small class="text-muted">Age: {{ encounter.patient.age }}</small>
                            </div>
                            <div class="col-md-3">
                                <strong>Gender:</strong> {{ encounter.patient.get_gender_display }}<br>
                                <small class="text-muted">{{ encounter.patient.phone_primary }}</small>
                            </div>
                            <div class="col-md-3">
                                <a href="{% url 'patients:patient_detail' encounter.patient.patient_id %}" class="btn btn-outline-primary btn-sm">
                                    <i class="fa fa-eye me-1"></i>View Profile
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Update Form -->
        <form id="encounterUpdateForm" method="post">
            {% csrf_token %}
            
            <!-- Encounter Details -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Encounter Details</h4>
                            <div class="card-tools">
                                <span class="badge bg-{{ encounter.status|default:'secondary' }}">
                                    {{ encounter.get_status_display|default:'Unknown' }}
                                </span>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Encounter Type <span class="text-danger">*</span></label>
                                        <select name="encounter_type" class="form-select" required>
                                            <option value="">Select encounter type...</option>
                                            <option value="office_visit" {% if encounter.encounter_type == 'office_visit' %}selected{% endif %}>Office Visit</option>
                                            <option value="emergency" {% if encounter.encounter_type == 'emergency' %}selected{% endif %}>Emergency</option>
                                            <option value="inpatient" {% if encounter.encounter_type == 'inpatient' %}selected{% endif %}>Inpatient</option>
                                            <option value="outpatient" {% if encounter.encounter_type == 'outpatient' %}selected{% endif %}>Outpatient</option>
                                            <option value="consultation" {% if encounter.encounter_type == 'consultation' %}selected{% endif %}>Consultation</option>
                                            <option value="follow_up" {% if encounter.encounter_type == 'follow_up' %}selected{% endif %}>Follow-up</option>
                                            <option value="preventive" {% if encounter.encounter_type == 'preventive' %}selected{% endif %}>Preventive Care</option>
                                            <option value="procedure" {% if encounter.encounter_type == 'procedure' %}selected{% endif %}>Procedure</option>
                                            <option value="telemedicine" {% if encounter.encounter_type == 'telemedicine' %}selected{% endif %}>Telemedicine</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Priority</label>
                                        <select name="priority" class="form-select">
                                            <option value="routine" {% if encounter.priority == 'routine' %}selected{% endif %}>Routine</option>
                                            <option value="urgent" {% if encounter.priority == 'urgent' %}selected{% endif %}>Urgent</option>
                                            <option value="emergent" {% if encounter.priority == 'emergent' %}selected{% endif %}>Emergent</option>
                                            <option value="stat" {% if encounter.priority == 'stat' %}selected{% endif %}>STAT</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Encounter Date <span class="text-danger">*</span></label>
                                        <input type="datetime-local" name="encounter_date" class="form-control" 
                                               value="{{ encounter.encounter_date|date:'Y-m-d\TH:i' }}" required>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Department</label>
                                        <select name="department" class="form-select">
                                            <option value="">Select department...</option>
                                            {% for dept in departments %}
                                                <option value="{{ dept.id }}" {% if encounter.department.id == dept.id %}selected{% endif %}>
                                                    {{ dept.name }}
                                                </option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Provider <span class="text-danger">*</span></label>
                                        <select name="provider" class="form-select" required>
                                            <option value="">Select provider...</option>
                                            {% for provider in providers %}
                                                <option value="{{ provider.id }}" {% if encounter.provider.id == provider.id %}selected{% endif %}>
                                                    {{ provider.get_full_name }} - {{ provider.title }}
                                                </option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Location</label>
                                        <select name="location" class="form-select">
                                            <option value="">Select location...</option>
                                            {% for location in locations %}
                                                <option value="{{ location.id }}" {% if encounter.location.id == location.id %}selected{% endif %}>
                                                    {{ location.name }}
                                                </option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Chief Complaint & History -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Chief Complaint & History</h4>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label">Chief Complaint <span class="text-danger">*</span></label>
                                <textarea name="chief_complaint" class="form-control" rows="3" required>{{ encounter.chief_complaint }}</textarea>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">History of Present Illness (HPI)</label>
                                <textarea name="history_present_illness" class="form-control" rows="4">{{ encounter.history_present_illness }}</textarea>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Review of Systems</label>
                                        <textarea name="review_of_systems" class="form-control" rows="3">{{ encounter.review_of_systems }}</textarea>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Past Medical History</label>
                                        <textarea name="past_medical_history" class="form-control" rows="3">{{ encounter.past_medical_history }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Vital Signs -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Vital Signs</h4>
                            <div class="card-tools">
                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="loadPreviousVitals()">
                                    <i class="fa fa-history me-1"></i>Load Previous
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="form-label">Blood Pressure</label>
                                        <div class="input-group">
                                            <input type="number" name="systolic_bp" class="form-control" placeholder="Systolic" 
                                                   value="{{ encounter.systolic_bp }}">
                                            <span class="input-group-text">/</span>
                                            <input type="number" name="diastolic_bp" class="form-control" placeholder="Diastolic" 
                                                   value="{{ encounter.diastolic_bp }}">
                                            <span class="input-group-text">mmHg</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="form-label">Heart Rate</label>
                                        <div class="input-group">
                                            <input type="number" name="heart_rate" class="form-control" placeholder="HR" 
                                                   value="{{ encounter.heart_rate }}">
                                            <span class="input-group-text">bpm</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="form-label">Temperature</label>
                                        <div class="input-group">
                                            <input type="number" name="temperature" class="form-control" step="0.1" placeholder="Temp" 
                                                   value="{{ encounter.temperature }}">
                                            <select name="temp_unit" class="form-select" style="max-width: 80px;">
                                                <option value="F" {% if encounter.temp_unit == 'F' %}selected{% endif %}>°F</option>
                                                <option value="C" {% if encounter.temp_unit == 'C' %}selected{% endif %}>°C</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="form-label">Respiratory Rate</label>
                                        <div class="input-group">
                                            <input type="number" name="respiratory_rate" class="form-control" placeholder="RR" 
                                                   value="{{ encounter.respiratory_rate }}">
                                            <span class="input-group-text">rpm</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="form-label">Oxygen Saturation</label>
                                        <div class="input-group">
                                            <input type="number" name="oxygen_saturation" class="form-control" placeholder="O2 Sat" 
                                                   value="{{ encounter.oxygen_saturation }}">
                                            <span class="input-group-text">%</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="form-label">Weight</label>
                                        <div class="input-group">
                                            <input type="number" name="weight" class="form-control" step="0.1" placeholder="Weight" 
                                                   value="{{ encounter.weight }}">
                                            <select name="weight_unit" class="form-select" style="max-width: 80px;">
                                                <option value="lbs" {% if encounter.weight_unit == 'lbs' %}selected{% endif %}>lbs</option>
                                                <option value="kg" {% if encounter.weight_unit == 'kg' %}selected{% endif %}>kg</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="form-label">Height</label>
                                        <div class="input-group">
                                            <input type="number" name="height" class="form-control" step="0.1" placeholder="Height" 
                                                   value="{{ encounter.height }}">
                                            <select name="height_unit" class="form-select" style="max-width: 80px;">
                                                <option value="in" {% if encounter.height_unit == 'in' %}selected{% endif %}>in</option>
                                                <option value="cm" {% if encounter.height_unit == 'cm' %}selected{% endif %}>cm</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="form-label">BMI</label>
                                        <div class="input-group">
                                            <input type="number" name="bmi" class="form-control" step="0.1" placeholder="BMI" 
                                                   value="{{ encounter.bmi }}" readonly>
                                            <span class="input-group-text">kg/m²</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Physical Examination -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Physical Examination</h4>
                            <div class="card-tools">
                                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="useTemplate()">
                                    <i class="fa fa-file-text me-1"></i>Use Template
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label">General Appearance</label>
                                <textarea name="general_appearance" class="form-control" rows="2">{{ encounter.general_appearance }}</textarea>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">HEENT (Head, Eyes, Ears, Nose, Throat)</label>
                                        <textarea name="heent" class="form-control" rows="3">{{ encounter.heent }}</textarea>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Cardiovascular</label>
                                        <textarea name="cardiovascular" class="form-control" rows="3">{{ encounter.cardiovascular }}</textarea>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Respiratory</label>
                                        <textarea name="respiratory" class="form-control" rows="3">{{ encounter.respiratory }}</textarea>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Abdomen</label>
                                        <textarea name="abdomen" class="form-control" rows="3">{{ encounter.abdomen }}</textarea>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Musculoskeletal</label>
                                        <textarea name="musculoskeletal" class="form-control" rows="3">{{ encounter.musculoskeletal }}</textarea>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Neurological</label>
                                        <textarea name="neurological" class="form-control" rows="3">{{ encounter.neurological }}</textarea>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">Skin</label>
                                <textarea name="skin" class="form-control" rows="2">{{ encounter.skin }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Assessment & Plan -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Assessment & Plan</h4>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label">Assessment <span class="text-danger">*</span></label>
                                <textarea name="assessment" class="form-control" rows="4" required>{{ encounter.assessment }}</textarea>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">Plan</label>
                                <textarea name="plan" class="form-control" rows="4">{{ encounter.plan }}</textarea>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Follow-up Instructions</label>
                                        <textarea name="followup_instructions" class="form-control" rows="3">{{ encounter.followup_instructions }}</textarea>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Patient Education</label>
                                        <textarea name="patient_education" class="form-control" rows="3">{{ encounter.patient_education }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Additional Information -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Additional Information</h4>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Encounter Status</label>
                                        <select name="status" class="form-select">
                                            <option value="in_progress" {% if encounter.status == 'in_progress' %}selected{% endif %}>In Progress</option>
                                            <option value="completed" {% if encounter.status == 'completed' %}selected{% endif %}>Completed</option>
                                            <option value="cancelled" {% if encounter.status == 'cancelled' %}selected{% endif %}>Cancelled</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Duration (minutes)</label>
                                        <input type="number" name="duration" class="form-control" value="{{ encounter.duration }}">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">Additional Notes</label>
                                <textarea name="additional_notes" class="form-control" rows="3">{{ encounter.additional_notes }}</textarea>
                            </div>
                            
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="requires_followup" 
                                       {% if encounter.requires_followup %}checked{% endif %}>
                                <label class="form-check-label">
                                    Requires follow-up appointment
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Audit Information -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Audit Information</h4>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <p><strong>Created:</strong> {{ encounter.created_at|date:"M d, Y g:i A" }}</p>
                                    <p><strong>Created by:</strong> {{ encounter.created_by.get_full_name }}</p>
                                </div>
                                <div class="col-md-6">
                                    <p><strong>Last Updated:</strong> {{ encounter.updated_at|date:"M d, Y g:i A" }}</p>
                                    <p><strong>Last Updated by:</strong> {{ encounter.updated_by.get_full_name|default:"System" }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Form Actions -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <button type="button" class="btn btn-outline-secondary" onclick="saveDraft()">
                                        <i class="fa fa-save me-2"></i>Save as Draft
                                    </button>
                                </div>
                                <div>
                                    <a href="{% url 'emr:encounter_detail' encounter.encounter_id %}" class="btn btn-secondary me-2">
                                        <i class="fa fa-times me-2"></i>Cancel
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fa fa-check me-2"></i>Update Encounter
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Template Selection Modal -->
<div class="modal fade" id="templateModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Select Examination Template</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="list-group">
                    <button type="button" class="list-group-item list-group-item-action" onclick="applyTemplate('general')">
                        General Physical Examination
                    </button>
                    <button type="button" class="list-group-item list-group-item-action" onclick="applyTemplate('cardiac')">
                        Cardiac Examination
                    </button>
                    <button type="button" class="list-group-item list-group-item-action" onclick="applyTemplate('respiratory')">
                        Respiratory Examination
                    </button>
                    <button type="button" class="list-group-item list-group-item-action" onclick="applyTemplate('neurological')">
                        Neurological Examination
                    </button>
                    <button type="button" class="list-group-item list-group-item-action" onclick="applyTemplate('pediatric')">
                        Pediatric Examination
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
$(document).ready(function() {
    setupEventHandlers();
    calculateBMI();
});

function setupEventHandlers() {
    // BMI calculation
    $('input[name="weight"], input[name="height"]').on('input', function() {
        calculateBMI();
    });
    
    // Form submission
    $('#encounterUpdateForm').submit(function(e) {
        e.preventDefault();
        updateEncounter();
    });
}

function calculateBMI() {
    var weight = parseFloat($('input[name="weight"]').val());
    var height = parseFloat($('input[name="height"]').val());
    var weightUnit = $('select[name="weight_unit"]').val();
    var heightUnit = $('select[name="height_unit"]').val();
    
    if (weight && height) {
        // Convert to metric if needed
        var weightKg = weightUnit === 'lbs' ? weight * 0.453592 : weight;
        var heightM = heightUnit === 'in' ? height * 0.0254 : height / 100;
        
        var bmi = weightKg / (heightM * heightM);
        $('input[name="bmi"]').val(bmi.toFixed(1));
    }
}

function loadPreviousVitals() {
    var patientId = '{{ encounter.patient.patient_id }}';
    
    $.get('{% url "emr:get_previous_vitals" %}', {patient_id: patientId}, function(data) {
        if (data.vitals) {
            $('input[name="systolic_bp"]').val(data.vitals.systolic_bp);
            $('input[name="diastolic_bp"]').val(data.vitals.diastolic_bp);
            $('input[name="heart_rate"]').val(data.vitals.heart_rate);
            $('input[name="temperature"]').val(data.vitals.temperature);
            $('input[name="respiratory_rate"]').val(data.vitals.respiratory_rate);
            $('input[name="oxygen_saturation"]').val(data.vitals.oxygen_saturation);
            $('input[name="weight"]').val(data.vitals.weight);
            $('input[name="height"]').val(data.vitals.height);
            
            calculateBMI();
            toastr.success('Previous vitals loaded');
        } else {
            toastr.info('No previous vitals found');
        }
    });
}

function useTemplate() {
    $('#templateModal').modal('show');
}

function applyTemplate(templateType) {
    var templates = {
        'general': {
            'general_appearance': 'Patient appears well-developed, well-nourished, and in no acute distress.',
            'heent': 'Head: Normocephalic, atraumatic. Eyes: PERRL, EOMI, conjunctiva clear. Ears: TMs clear bilaterally. Nose: Nares patent. Throat: Oropharynx clear.',
            'cardiovascular': 'Regular rate and rhythm, no murmurs, rubs, or gallops. Peripheral pulses intact.',
            'respiratory': 'Clear to auscultation bilaterally, no wheezes, rales, or rhonchi.',
            'abdomen': 'Soft, non-tender, non-distended, bowel sounds present.',
            'musculoskeletal': 'Full range of motion, no deformities or tenderness.',
            'neurological': 'Alert and oriented x3, cranial nerves II-XII intact, motor and sensory function normal.',
            'skin': 'Warm, dry, intact, no rashes or lesions.'
        },
        'cardiac': {
            'cardiovascular': 'Heart rate regular, S1 and S2 normal, no murmurs, rubs, or gallops. Point of maximal impulse not displaced. No peripheral edema. Carotid pulses 2+ bilaterally without bruits.',
            'respiratory': 'Clear to auscultation bilaterally, no signs of pulmonary edema.',
            'abdomen': 'No hepatomegaly or ascites.',
            'musculoskeletal': 'No clubbing or cyanosis of extremities.'
        },
        'respiratory': {
            'respiratory': 'Inspection: Symmetric chest expansion, no use of accessory muscles. Palpation: No tenderness or crepitus. Percussion: Resonant throughout. Auscultation: Clear breath sounds bilaterally.',
            'cardiovascular': 'No signs of right heart strain.',
            'heent': 'No cyanosis, no nasal flaring.'
        },
        'neurological': {
            'neurological': 'Mental status: Alert, oriented x3. Cranial nerves: II-XII intact. Motor: 5/5 strength all extremities. Sensory: Intact to light touch and vibration. Reflexes: 2+ and symmetric. Coordination: Finger-to-nose and heel-to-shin intact. Gait: Normal.',
            'heent': 'PERRL, EOMI, no nystagmus, facial sensation intact.'
        },
        'pediatric': {
            'general_appearance': 'Well-appearing child, interactive, appropriate for age.',
            'heent': 'Fontanelles soft and flat (if applicable), TMs clear, throat clear.',
            'cardiovascular': 'Regular rate and rhythm appropriate for age, no murmurs.',
            'respiratory': 'Clear breath sounds, no retractions or nasal flaring.',
            'abdomen': 'Soft, non-tender, no masses.',
            'skin': 'No rashes, good color and perfusion.'
        }
    };
    
    var template = templates[templateType];
    if (template) {
        Object.keys(template).forEach(function(field) {
            $('textarea[name="' + field + '"]').val(template[field]);
        });
        
        $('#templateModal').modal('hide');
        toastr.success('Template applied');
    }
}

function saveDraft() {
    var formData = new FormData($('#encounterUpdateForm')[0]);
    formData.append('save_as_draft', 'true');
    
    $.ajax({
        url: '{% url "emr:encounter_update" encounter.encounter_id %}',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(data) {
            if (data.success) {
                toastr.success('Draft saved successfully');
            } else {
                toastr.error('Failed to save draft: ' + data.error);
            }
        },
        error: function() {
            toastr.error('Failed to save draft');
        }
    });
}

function updateEncounter() {
    var formData = new FormData($('#encounterUpdateForm')[0]);
    
    $.ajax({
        url: '{% url "emr:encounter_update" encounter.encounter_id %}',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(data) {
            if (data.success) {
                toastr.success('Encounter updated successfully');
                window.location.href = '{% url "emr:encounter_detail" encounter.encounter_id %}';
            } else {
                toastr.error('Failed to update encounter: ' + data.error);
            }
        },
        error: function() {
            toastr.error('Failed to update encounter');
        }
    });
}
</script>

<style>
.card-tools {
    margin-left: auto;
}

.input-group-text {
    background-color: #f8f9fa;
    border-color: #ced4da;
}

.form-label {
    font-weight: 500;
}

.text-danger {
    color: #dc3545 !important;
}

textarea {
    resize: vertical;
}

.btn-group-sm .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.card-header h4 {
    margin-bottom: 0;
}

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

.badge {
    font-size: 0.75em;
}

.alert {
    margin-bottom: 0;
}
</style>
{% endblock %}