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

{% block title %}Delete Problem: {{ problem.problem_name }}{% endblock %}

{% block css %}
<style>
    .delete-warning {
        background-color: rgba(var(--bs-danger-rgb), 0.1);
        border-left: 4px solid var(--bs-danger);
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        border-radius: 0.5rem;
    }
    .impact-assessment {
        background-color: rgba(var(--bs-warning-rgb), 0.1);
        border-left: 4px solid var(--bs-warning);
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        border-radius: 0.5rem;
    }
    .alternative-actions {
        background-color: rgba(var(--bs-info-rgb), 0.1);
        border-left: 4px solid var(--bs-info);
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        border-radius: 0.5rem;
    }
    .problem-badge {
        font-size: 0.85rem;
        padding: 0.35em 0.65em;
    }
    .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;
    }
</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"><a href="{% url 'emr:problem_detail' problem.id %}">{{ problem.problem_name }}</a></li>
    <li class="breadcrumb-item active">Delete</li>
</ol>
<!-- end breadcrumb -->

<!-- begin page-header -->
<h1 class="page-header">Delete Problem <small>Confirm problem deletion</small></h1>
<!-- end page-header -->

<!-- begin row -->
<div class="row">
    <!-- begin col-12 -->
    <div class="col-xl-12">
        <!-- begin panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Confirm Deletion</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">
                <!-- begin delete warning -->
                <div class="delete-warning">
                    <h4 class="text-danger">
                        <i class="fa fa-exclamation-triangle me-2"></i> Warning: You are about to delete a problem
                    </h4>
                    <p>
                        You are about to permanently delete the problem <strong>"{{ problem.problem_name }}"</strong> 
                        for patient <strong>{{ problem.patient.get_full_name }}</strong>. This action cannot be undone.
                    </p>
                    <p>
                        Deleting this problem will remove it from the patient's medical record and may affect 
                        care plans, clinical notes, and other related records.
                    </p>
                </div>
                <!-- end delete warning -->
                
                <!-- begin problem summary -->
                <h5 class="mb-3">Problem Summary</h5>
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <tbody>
                            <tr>
                                <th width="25%">Problem ID</th>
                                <td>{{ problem.problem_id }}</td>
                            </tr>
                            <tr>
                                <th>Problem Name</th>
                                <td>{{ problem.problem_name }}</td>
                            </tr>
                            <tr>
                                <th>Patient</th>
                                <td>{{ problem.patient.get_full_name }}</td>
                            </tr>
                            <tr>
                                <th>Problem Type</th>
                                <td>{{ problem.get_problem_type_display }}</td>
                            </tr>
                            <tr>
                                <th>Status</th>
                                <td>
                                    <span class="badge problem-status-{{ problem.status|lower }}">
                                        {{ problem.get_status_display }}
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <th>Priority</th>
                                <td>
                                    <span class="badge problem-priority-{{ problem.priority|lower }}">
                                        {{ problem.get_priority_display }}
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <th>Severity</th>
                                <td>
                                    <span class="badge problem-severity-{{ problem.severity|lower }}">
                                        {{ problem.get_severity_display }}
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <th>Onset Date</th>
                                <td>{{ problem.onset_date|default:"Not specified" }}</td>
                            </tr>
                            <tr>
                                <th>Diagnosing Provider</th>
                                <td>{{ problem.diagnosing_provider.get_full_name }}</td>
                            </tr>
                            <tr>
                                <th>Created</th>
                                <td>{{ problem.created_at }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- end problem summary -->
                
                <!-- begin impact assessment -->
                <div class="impact-assessment mt-4">
                    <h5>
                        <i class="fa fa-exclamation-circle me-2"></i> Impact Assessment
                    </h5>
                    <p>Deleting this problem will affect the following:</p>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card mb-3">
                                <div class="card-header bg-light">
                                    <h6 class="card-title mb-0">Care Plans</h6>
                                </div>
                                <div class="card-body">
                                    {% if problem.care_plans.all %}
                                    <ul class="mb-0">
                                        {% for care_plan in problem.care_plans.all %}
                                        <li>{{ care_plan.title }} ({{ care_plan.get_status_display }})</li>
                                        {% endfor %}
                                    </ul>
                                    {% else %}
                                    <p class="mb-0">No care plans associated with this problem.</p>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="card mb-3">
                                <div class="card-header bg-light">
                                    <h6 class="card-title mb-0">Clinical Notes</h6>
                                </div>
                                <div class="card-body">
                                    {% if problem.related_clinical_notes.all %}
                                    <ul class="mb-0">
                                        {% for note in problem.related_clinical_notes.all %}
                                        <li>{{ note.title }} ({{ note.note_datetime|date:"M d, Y" }})</li>
                                        {% endfor %}
                                    </ul>
                                    {% else %}
                                    <p class="mb-0">No clinical notes associated with this problem.</p>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end impact assessment -->
                
                <!-- begin alternative actions -->
                <div class="alternative-actions">
                    <h5>
                        <i class="fa fa-lightbulb me-2"></i> Alternative Actions
                    </h5>
                    <p>Instead of deleting this problem, consider these alternatives:</p>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card mb-3">
                                <div class="card-body">
                                    <h6 class="card-title">Mark as Resolved</h6>
                                    <p class="card-text">If the problem is no longer active, mark it as resolved instead of deleting it.</p>
                                    <a href="{% url 'emr:problem_detail' problem.id %}" class="btn btn-sm btn-success">
                                        <i class="fa fa-check me-1"></i> Mark as Resolved
                                    </a>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="card mb-3">
                                <div class="card-body">
                                    <h6 class="card-title">Mark as Inactive</h6>
                                    <p class="card-text">If the problem is temporarily not relevant, mark it as inactive.</p>
                                    <a href="{% url 'emr:problem_detail' problem.id %}" class="btn btn-sm btn-warning">
                                        <i class="fa fa-pause me-1"></i> Mark as Inactive
                                    </a>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="card mb-3">
                                <div class="card-body">
                                    <h6 class="card-title">Edit Problem</h6>
                                    <p class="card-text">Update the problem information if it's incorrect or needs changes.</p>
                                    <a href="{% url 'emr:problem_update' problem.id %}" class="btn btn-sm btn-primary">
                                        <i class="fa fa-edit me-1"></i> Edit Problem
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end alternative actions -->
                
                <!-- begin delete confirmation -->
                <form method="post" class="mt-4">
                    {% csrf_token %}
                    
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="confirmDelete" required>
                        <label class="form-check-label" for="confirmDelete">
                            I understand that this action cannot be undone and confirm that I want to permanently delete this problem.
                        </label>
                    </div>
                    
                    <div class="d-flex justify-content-between">
                        <a href="{% url 'emr:problem_detail' problem.id %}" class="btn btn-secondary">
                            <i class="fa fa-arrow-left me-1"></i> Cancel
                        </a>
                        <button type="submit" class="btn btn-danger" id="deleteButton" disabled>
                            <i class="fa fa-trash me-1"></i> Delete Problem
                        </button>
                    </div>
                </form>
                <!-- end delete confirmation -->
            </div>
        </div>
        <!-- end panel -->
    </div>
    <!-- end col-12 -->
</div>
<!-- end row -->
{% endblock %}

{% block js %}
<script>
$(document).ready(function() {
    // Enable delete button only when confirmation checkbox is checked
    $('#confirmDelete').change(function() {
        if ($(this).is(':checked')) {
            $('#deleteButton').prop('disabled', false);
        } else {
            $('#deleteButton').prop('disabled', true);
        }
    });
});
</script>
{% endblock %}