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

{% block title %}{{ problem.problem_name }} | Problem Detail{% endblock %}

{% block css %}
<link href="{% static 'plugins/timeline/timeline.css' %}" rel="stylesheet" />
<link href="{% static 'plugins/bootstrap-icons/font/bootstrap-icons.css' %}" rel="stylesheet" />
<style>
    .problem-badge {
        font-size: 0.85rem;
        padding: 0.35em 0.65em;
    }
    .problem-header {
        background: linear-gradient(45deg, var(--bs-indigo), var(--bs-purple));
        color: white;
        padding: 1.5rem;
        border-radius: 0.5rem;
        margin-bottom: 1.5rem;
    }
    .problem-status-active {
        background-color: var(--bs-success);
        color: white;
    }
    .problem-status-resolved {
        background-color: var(--bs-secondary);
        color: white;
    }
    .problem-status-inactive {
        background-color: var(--bs-warning);
        color: white;
    }
    .problem-priority-high {
        background-color: var(--bs-danger);
        color: white;
    }
    .problem-priority-medium {
        background-color: var(--bs-warning);
        color: white;
    }
    .problem-priority-low {
        background-color: var(--bs-info);
        color: white;
    }
    .problem-severity-mild {
        background-color: var(--bs-info);
        color: white;
    }
    .problem-severity-moderate {
        background-color: var(--bs-warning);
        color: white;
    }
    .problem-severity-severe {
        background-color: var(--bs-danger);
        color: white;
    }
    .timeline-item {
        padding: 1rem;
        border-left: 3px solid var(--bs-primary);
        margin-bottom: 1rem;
        background-color: rgba(var(--bs-light-rgb), 0.5);
    }
    .related-item {
        transition: all 0.2s;
    }
    .related-item: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">{{ problem.problem_name }}</li>
</ol>
<!-- end breadcrumb -->

<!-- begin page-header -->
<h1 class="page-header">Problem Detail <small>Comprehensive problem information</small></h1>
<!-- end page-header -->

<!-- begin row -->
<div class="row">
    <!-- begin col-12 -->
    <div class="col-xl-12">
        <!-- begin problem header -->
        <div class="problem-header d-flex justify-content-between align-items-center">
            <div>
                <h2 class="mb-1">{{ problem.problem_name }}</h2>
                <div class="d-flex align-items-center">
                    <span class="me-3">
                        <i class="bi bi-person-fill me-1"></i> {{ problem.patient.get_full_name }}
                    </span>
                    <span class="me-3">
                        <i class="bi bi-calendar-event me-1"></i> Onset: {{ problem.onset_date|default:"Not specified" }}
                    </span>
                    {% if problem.problem_code %}
                    <span>
                        <i class="bi bi-upc-scan me-1"></i> {{ problem.get_coding_system_display }}: {{ problem.problem_code }}
                    </span>
                    {% endif %}
                </div>
            </div>
            <div class="d-flex">
                <span class="badge problem-status-{{ problem.status|lower }} me-2">{{ problem.get_status_display }}</span>
                <span class="badge problem-priority-{{ problem.priority|lower }} me-2">{{ problem.get_priority_display }} Priority</span>
                <span class="badge problem-severity-{{ problem.severity|lower }}">{{ problem.get_severity_display }}</span>
            </div>
        </div>
        <!-- end problem header -->
        
        <!-- begin panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Problem Information</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">
                <div class="row">
                    <!-- begin col-6 -->
                    <div class="col-md-6">
                        <div class="mb-4">
                            <h5 class="mb-3">Basic Information</h5>
                            <table class="table table-bordered">
                                <tbody>
                                    <tr>
                                        <th width="35%">Problem ID</th>
                                        <td>{{ problem.problem_id }}</td>
                                    </tr>
                                    <tr>
                                        <th>Problem Type</th>
                                        <td>{{ problem.get_problem_type_display }}</td>
                                    </tr>
                                    <tr>
                                        <th>Status</th>
                                        <td>{{ problem.get_status_display }}</td>
                                    </tr>
                                    <tr>
                                        <th>Onset Date</th>
                                        <td>{{ problem.onset_date|default:"Not specified" }}</td>
                                    </tr>
                                    {% if problem.status == 'RESOLVED' or problem.status == 'REMISSION' %}
                                    <tr>
                                        <th>Resolution Date</th>
                                        <td>{{ problem.resolution_date }}</td>
                                    </tr>
                                    <tr>
                                        <th>Duration</th>
                                        <td>{{ problem.duration.days }} days</td>
                                    </tr>
                                    {% endif %}
                                    <tr>
                                        <th>Body Site</th>
                                        <td>{{ problem.body_site|default:"Not specified" }}</td>
                                    </tr>
                                    <tr>
                                        <th>Laterality</th>
                                        <td>{{ problem.get_laterality_display|default:"Not specified" }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        
                        {% if problem.clinical_notes %}
                        <div class="mb-4">
                            <h5 class="mb-3">Clinical Notes</h5>
                            <div class="p-3 bg-light rounded">
                                {{ problem.clinical_notes|linebreaks }}
                            </div>
                        </div>
                        {% endif %}
                        
                        {% if problem.patient_concerns %}
                        <div class="mb-4">
                            <h5 class="mb-3">Patient Concerns</h5>
                            <div class="p-3 bg-light rounded">
                                {{ problem.patient_concerns|linebreaks }}
                            </div>
                        </div>
                        {% endif %}
                    </div>
                    <!-- end col-6 -->
                    
                    <!-- begin col-6 -->
                    <div class="col-md-6">
                        <div class="mb-4">
                            <h5 class="mb-3">Provider Information</h5>
                            <table class="table table-bordered">
                                <tbody>
                                    <tr>
                                        <th width="35%">Diagnosing Provider</th>
                                        <td>{{ problem.diagnosing_provider.get_full_name }}</td>
                                    </tr>
                                    <tr>
                                        <th>Managing Provider</th>
                                        <td>{{ problem.managing_provider.get_full_name|default:"Not assigned" }}</td>
                                    </tr>
                                    <tr>
                                        <th>Related Encounter</th>
                                        <td>
                                            {% if problem.related_encounter %}
                                            <a href="{% url 'emr:encounter_detail' problem.related_encounter.id %}">
                                                {{ problem.related_encounter.encounter_type }} ({{ problem.related_encounter.start_datetime|date:"M d, Y" }})
                                            </a>
                                            {% else %}
                                            Not linked to an encounter
                                            {% endif %}
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>Verified</th>
                                        <td>
                                            {% if problem.verified %}
                                            <span class="badge bg-success">Verified</span>
                                            by {{ problem.verified_by.get_full_name }} on {{ problem.verified_date|date:"M d, Y" }}
                                            {% else %}
                                            <span class="badge bg-warning">Not Verified</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        
                        {% if problem.treatment_goals %}
                        <div class="mb-4">
                            <h5 class="mb-3">Treatment Goals</h5>
                            <div class="p-3 bg-light rounded">
                                {{ problem.treatment_goals|linebreaks }}
                            </div>
                        </div>
                        {% endif %}
                        
                        {% if problem.outcome_measures %}
                        <div class="mb-4">
                            <h5 class="mb-3">Outcome Measures</h5>
                            <div class="p-3 bg-light rounded">
                                {{ problem.outcome_measures|linebreaks }}
                            </div>
                        </div>
                        {% endif %}
                        
                        {% if problem.status == 'RESOLVED' or problem.status == 'REMISSION' %}
                        <div class="mb-4">
                            <h5 class="mb-3">Resolution Notes</h5>
                            <div class="p-3 bg-light rounded">
                                {{ problem.resolution_notes|linebreaks|default:"No resolution notes provided." }}
                            </div>
                        </div>
                        {% endif %}
                    </div>
                    <!-- end col-6 -->
                </div>
            </div>
        </div>
        <!-- end panel -->
        
        <!-- begin related care plans panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Related Care Plans</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">
                {% if problem.care_plans.all %}
                <div class="row">
                    {% for care_plan in problem.care_plans.all %}
                    <div class="col-md-6 col-xl-4 mb-3">
                        <div class="card related-item h-100">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="card-title mb-0">{{ care_plan.title }}</h5>
                                <span class="badge bg-{{ care_plan.status|lower }}">{{ care_plan.get_status_display }}</span>
                            </div>
                            <div class="card-body">
                                <p class="card-text">{{ care_plan.description|truncatechars:100 }}</p>
                                <div class="progress mb-2" style="height: 10px;">
                                    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: {{ care_plan.completion_percentage }}%">{{ care_plan.completion_percentage }}%</div>
                                </div>
                                <div class="d-flex justify-content-between align-items-center">
                                    <small class="text-muted">{{ care_plan.get_plan_type_display }}</small>
                                    <small class="text-muted">{{ care_plan.start_date|date:"M d, Y" }}</small>
                                </div>
                            </div>
                            <div class="card-footer">
                                <a href="{% url 'emr:care_plan_detail' care_plan.id %}" class="btn btn-sm btn-primary">View Care Plan</a>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="alert alert-info">
                    <i class="fa fa-info-circle me-2"></i> No care plans are associated with this problem.
                </div>
                {% endif %}
            </div>
        </div>
        <!-- end related care plans panel -->
        
        <!-- begin clinical notes panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Related Clinical Notes</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">
                {% if problem.related_clinical_notes.all %}
                <div class="timeline">
                    {% for note in problem.related_clinical_notes.all %}
                    <div class="timeline-item">
                        <div class="timeline-time">
                            {{ note.note_datetime|date:"M d, Y" }} <small>{{ note.note_datetime|time:"h:i A" }}</small>
                        </div>
                        <div class="timeline-icon">
                            <a href="javascript:;">&nbsp;</a>
                        </div>
                        <div class="timeline-content">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5>{{ note.title }}</h5>
                                <span class="badge bg-{{ note.status|lower }}">{{ note.get_status_display }}</span>
                            </div>
                            <p class="mb-2">{{ note.content|truncatechars:200 }}</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="text-muted">{{ note.get_note_type_display }} by {{ note.author.get_full_name }}</small>
                                <a href="{% url 'emr:clinical_note_detail' note.id %}" class="btn btn-sm btn-primary">View Note</a>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="alert alert-info">
                    <i class="fa fa-info-circle me-2"></i> No clinical notes are associated with this problem.
                </div>
                {% endif %}
            </div>
        </div>
        <!-- end clinical notes panel -->
        
        <!-- begin action buttons -->
        <div class="d-flex justify-content-between mt-3">
            <div>
                <a href="{% url 'emr:problem_list' %}" class="btn btn-secondary me-2">
                    <i class="fa fa-arrow-left me-1"></i> Back to Problem List
                </a>
                <a href="{% url 'emr:patient_detail' problem.patient.id %}" class="btn btn-info">
                    <i class="fa fa-user me-1"></i> Patient Profile
                </a>
            </div>
            <div>
                {% if problem.status != 'RESOLVED' and problem.status != 'REMISSION' %}
                <a href="#" class="btn btn-success me-2" data-bs-toggle="modal" data-bs-target="#resolveModal">
                    <i class="fa fa-check-circle me-1"></i> Mark as Resolved
                </a>
                {% endif %}
                <a href="{% url 'emr:problem_update' problem.id %}" class="btn btn-primary me-2">
                    <i class="fa fa-edit me-1"></i> Edit Problem
                </a>
                <a href="{% url 'emr:problem_delete' problem.id %}" class="btn btn-danger">
                    <i class="fa fa-trash me-1"></i> Delete
                </a>
            </div>
        </div>
        <!-- end action buttons -->
    </div>
    <!-- end col-12 -->
</div>
<!-- end row -->

<!-- begin resolve modal -->
<div class="modal fade" id="resolveModal" tabindex="-1" aria-labelledby="resolveModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="resolveModalLabel">Resolve Problem</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{% url 'emr:problem_resolve' problem.id %}" method="post">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="resolution_date" class="form-label">Resolution Date</label>
                        <input type="date" class="form-control" id="resolution_date" name="resolution_date" value="{{ today|date:'Y-m-d' }}" required>
                    </div>
                    <div class="mb-3">
                        <label for="resolution_status" class="form-label">Resolution Status</label>
                        <select class="form-select" id="resolution_status" name="status" required>
                            <option value="RESOLVED">Resolved</option>
                            <option value="REMISSION">Remission</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="resolution_notes" class="form-label">Resolution Notes</label>
                        <textarea class="form-control" id="resolution_notes" name="resolution_notes" rows="3" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Resolve Problem</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- end resolve modal -->
{% endblock %}

{% block js %}
<script src="{% static 'plugins/moment/min/moment.min.js' %}"></script>
<script>
$(document).ready(function() {
    // Initialize tooltips
    $('[data-bs-toggle="tooltip"]').tooltip();
    
    // Handle HTMX events
    document.body.addEventListener('htmx:afterSwap', function(evt) {
        if (evt.detail.target.id === 'care-plans-container') {
            // Reinitialize any components in the care plans container
        }
    });
});
</script>
{% endblock %}