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

{% block title %}Patient Discharge - {{ block.super }}{% endblock %}

{% block css %}
<style>
.discharge-section {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    border-left: 4px solid #007bff;
}
.discharge-checklist {
    background: white;
    border-radius: 6px;
    padding: 15px;
    margin: 10px 0;
}
.checklist-item {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}
.checklist-item:last-child {
    border-bottom: none;
}
.discharge-summary {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 6px;
    padding: 15px;
    margin: 15px 0;
}
.medication-list {
    background: #e8f5e8;
    border-radius: 6px;
    padding: 15px;
    margin: 10px 0;
}
.follow-up-section {
    background: #e3f2fd;
    border-radius: 6px;
    padding: 15px;
    margin: 10px 0;
}
.discharge-status {
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}
.status-pending { background: #fff3cd; color: #856404; }
.status-ready { background: #d4edda; color: #155724; }
.status-completed { background: #cce5ff; color: #004085; }
</style>
{% endblock %}

{% block content %}
<div class="content">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="row">
            <div class="col-12">
                <div class="page-header">
                    <div class="page-title">
                        <h4><i class="fas fa-sign-out-alt"></i> Patient Discharge</h4>
                        <h6>Complete discharge process and documentation</h6>
                    </div>
                    <div class="page-btn">
                        <a href="{% url 'inpatients:admission_list' %}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back to Admissions
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Patient Information Card -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-user"></i> Patient Information</h5>
                        <span class="discharge-status status-pending">Discharge in Progress</span>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>Patient:</strong> {{ patient.full_name|default:"John Doe" }}</p>
                                <p><strong>MRN:</strong> {{ patient.medical_record_number|default:"MRN123456" }}</p>
                                <p><strong>DOB:</strong> {{ patient.date_of_birth|default:"1980-01-01" }}</p>
                                <p><strong>Gender:</strong> {{ patient.gender|default:"Male" }}</p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>Admission Date:</strong> {{ admission.admission_date|default:"2024-01-15" }}</p>
                                <p><strong>Length of Stay:</strong> {{ admission.length_of_stay|default:"5 days" }}</p>
                                <p><strong>Attending Physician:</strong> {{ admission.attending_physician|default:"Dr. Smith" }}</p>
                                <p><strong>Ward/Room:</strong> {{ admission.bed.ward.name|default:"Ward A" }} - {{ admission.bed.room_number|default:"101" }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Discharge Checklist -->
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-tasks"></i> Discharge Checklist</h5>
                    </div>
                    <div class="card-body">
                        <div class="discharge-checklist">
                            <h6>Medical Clearance</h6>
                            <div class="checklist-item">
                                <label class="form-check-label">
                                    <input type="checkbox" class="form-check-input" checked>
                                    Final physician examination completed
                                </label>
                            </div>
                            <div class="checklist-item">
                                <label class="form-check-label">
                                    <input type="checkbox" class="form-check-input" checked>
                                    Discharge orders written
                                </label>
                            </div>
                            <div class="checklist-item">
                                <label class="form-check-label">
                                    <input type="checkbox" class="form-check-input">
                                    Lab results reviewed
                                </label>
                            </div>
                        </div>

                        <div class="discharge-checklist">
                            <h6>Medications & Prescriptions</h6>
                            <div class="checklist-item">
                                <label class="form-check-label">
                                    <input type="checkbox" class="form-check-input" checked>
                                    Medication reconciliation completed
                                </label>
                            </div>
                            <div class="checklist-item">
                                <label class="form-check-label">
                                    <input type="checkbox" class="form-check-input">
                                    Discharge prescriptions written
                                </label>
                            </div>
                            <div class="checklist-item">
                                <label class="form-check-label">
                                    <input type="checkbox" class="form-check-input">
                                    Patient education on medications provided
                                </label>
                            </div>
                        </div>

                        <div class="discharge-checklist">
                            <h6>Documentation & Follow-up</h6>
                            <div class="checklist-item">
                                <label class="form-check-label">
                                    <input type="checkbox" class="form-check-input">
                                    Discharge summary completed
                                </label>
                            </div>
                            <div class="checklist-item">
                                <label class="form-check-label">
                                    <input type="checkbox" class="form-check-input">
                                    Follow-up appointments scheduled
                                </label>
                            </div>
                            <div class="checklist-item">
                                <label class="form-check-label">
                                    <input type="checkbox" class="form-check-input">
                                    Patient instructions provided
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-clock"></i> Discharge Timeline</h5>
                    </div>
                    <div class="card-body">
                        <div class="timeline">
                            <div class="timeline-item completed">
                                <div class="timeline-marker"></div>
                                <div class="timeline-content">
                                    <h6>Discharge Order</h6>
                                    <p>09:00 AM - Dr. Smith</p>
                                </div>
                            </div>
                            <div class="timeline-item completed">
                                <div class="timeline-marker"></div>
                                <div class="timeline-content">
                                    <h6>Medication Review</h6>
                                    <p>10:30 AM - Pharmacist</p>
                                </div>
                            </div>
                            <div class="timeline-item active">
                                <div class="timeline-marker"></div>
                                <div class="timeline-content">
                                    <h6>Final Documentation</h6>
                                    <p>In Progress</p>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-marker"></div>
                                <div class="timeline-content">
                                    <h6>Patient Departure</h6>
                                    <p>Pending</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Discharge Summary -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-file-medical"></i> Discharge Summary</h5>
                    </div>
                    <div class="card-body">
                        <form method="post">
                            {% csrf_token %}
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Primary Diagnosis</label>
                                        <input type="text" class="form-control" value="Acute Myocardial Infarction" readonly>
                                    </div>
                                    <div class="form-group">
                                        <label>Secondary Diagnoses</label>
                                        <textarea class="form-control" rows="3" readonly>Hypertension, Type 2 Diabetes Mellitus</textarea>
                                    </div>
                                    <div class="form-group">
                                        <label>Procedures Performed</label>
                                        <textarea class="form-control" rows="3" readonly>Cardiac Catheterization, Percutaneous Coronary Intervention</textarea>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Discharge Condition</label>
                                        <select class="form-control">
                                            <option>Stable</option>
                                            <option>Improved</option>
                                            <option>Unchanged</option>
                                            <option>Guarded</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label>Discharge Disposition</label>
                                        <select class="form-control">
                                            <option>Home</option>
                                            <option>Home with Home Health</option>
                                            <option>Skilled Nursing Facility</option>
                                            <option>Rehabilitation Facility</option>
                                            <option>Another Hospital</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label>Discharge Instructions</label>
                                        <textarea class="form-control" rows="4" placeholder="Enter discharge instructions..."></textarea>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Medications and Follow-up -->
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-pills"></i> Discharge Medications</h5>
                    </div>
                    <div class="card-body">
                        <div class="medication-list">
                            <div class="medication-item">
                                <h6>Aspirin 81mg</h6>
                                <p>Take 1 tablet daily by mouth</p>
                                <small class="text-muted">30-day supply prescribed</small>
                            </div>
                            <div class="medication-item">
                                <h6>Metoprolol 50mg</h6>
                                <p>Take 1 tablet twice daily by mouth</p>
                                <small class="text-muted">30-day supply prescribed</small>
                            </div>
                            <div class="medication-item">
                                <h6>Atorvastatin 40mg</h6>
                                <p>Take 1 tablet daily at bedtime</p>
                                <small class="text-muted">30-day supply prescribed</small>
                            </div>
                        </div>
                        <button type="button" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-plus"></i> Add Medication
                        </button>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-calendar-check"></i> Follow-up Appointments</h5>
                    </div>
                    <div class="card-body">
                        <div class="follow-up-section">
                            <div class="appointment-item">
                                <h6>Cardiology Follow-up</h6>
                                <p><strong>Date:</strong> January 30, 2024 at 2:00 PM</p>
                                <p><strong>Provider:</strong> Dr. Johnson</p>
                                <p><strong>Location:</strong> Cardiology Clinic</p>
                            </div>
                            <div class="appointment-item">
                                <h6>Primary Care Follow-up</h6>
                                <p><strong>Date:</strong> February 5, 2024 at 10:00 AM</p>
                                <p><strong>Provider:</strong> Dr. Williams</p>
                                <p><strong>Location:</strong> Family Medicine</p>
                            </div>
                        </div>
                        <button type="button" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-plus"></i> Schedule Appointment
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body text-center">
                        <button type="button" class="btn btn-success btn-lg me-3">
                            <i class="fas fa-check"></i> Complete Discharge
                        </button>
                        <button type="button" class="btn btn-warning btn-lg me-3">
                            <i class="fas fa-pause"></i> Hold Discharge
                        </button>
                        <button type="button" class="btn btn-info btn-lg me-3">
                            <i class="fas fa-print"></i> Print Summary
                        </button>
                        <button type="button" class="btn btn-secondary btn-lg">
                            <i class="fas fa-save"></i> Save Draft
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
$(document).ready(function() {
    // Update discharge status based on checklist completion
    function updateDischargeStatus() {
        var totalItems = $('.form-check-input').length;
        var completedItems = $('.form-check-input:checked').length;
        var percentage = Math.round((completedItems / totalItems) * 100);
        
        if (percentage === 100) {
            $('.discharge-status').removeClass('status-pending').addClass('status-ready').text('Ready for Discharge');
        } else if (percentage > 50) {
            $('.discharge-status').removeClass('status-pending status-ready').addClass('status-pending').text('Discharge in Progress (' + percentage + '%)');
        }
    }
    
    // Handle checklist item changes
    $('.form-check-input').change(function() {
        updateDischargeStatus();
    });
    
    // Complete discharge button
    $('.btn-success').click(function() {
        if (confirm('Are you sure you want to complete the discharge? This action cannot be undone.')) {
            // Submit discharge completion
            alert('Discharge completed successfully!');
        }
    });
    
    // Print summary button
    $('.btn-info').click(function() {
        window.print();
    });
    
    // Initialize status
    updateDischargeStatus();
});
</script>
{% endblock %}