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

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

{% block css %}
<style>
.planning-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 30px;
}
.planning-section {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin: 15px 0;
    border-left: 4px solid #007bff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.timeline {
    position: relative;
    padding-left: 30px;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #dee2e6;
}
.timeline-item {
    position: relative;
    margin-bottom: 30px;
}
.timeline-marker {
    position: absolute;
    left: -37px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #dee2e6;
    border: 3px solid white;
    box-shadow: 0 0 0 2px #dee2e6;
}
.timeline-item.completed .timeline-marker {
    background: #28a745;
    box-shadow: 0 0 0 2px #28a745;
}
.timeline-item.active .timeline-marker {
    background: #007bff;
    box-shadow: 0 0 0 2px #007bff;
}
.timeline-item.pending .timeline-marker {
    background: #ffc107;
    box-shadow: 0 0 0 2px #ffc107;
}
.checklist-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}
.checklist-item:last-child {
    border-bottom: none;
}
.checklist-item input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2);
}
.discharge-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
    border-left: 4px solid #28a745;
}
.risk-assessment {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 6px;
    padding: 15px;
    margin: 15px 0;
}
.care-team {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 15px 0;
}
.team-member {
    background: white;
    border-radius: 6px;
    padding: 15px;
    text-align: center;
    border: 1px solid #dee2e6;
}
.progress-bar-custom {
    height: 25px;
    background: #e9ecef;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #28a745, #20c997);
    transition: width 0.3s ease;
}
.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    color: #333;
    font-size: 0.9rem;
}
.medication-item {
    background: #e8f5e8;
    border-radius: 6px;
    padding: 12px;
    margin: 8px 0;
    border-left: 3px solid #28a745;
}
.appointment-item {
    background: #e3f2fd;
    border-radius: 6px;
    padding: 12px;
    margin: 8px 0;
    border-left: 3px solid #2196f3;
}
.alert-item {
    padding: 10px;
    margin: 5px 0;
    border-radius: 4px;
    font-size: 0.9rem;
}
.alert-high { background: #f8d7da; color: #721c24; border-left: 4px solid #dc3545; }
.alert-medium { background: #fff3cd; color: #856404; border-left: 4px solid #ffc107; }
.alert-low { background: #d4edda; color: #155724; border-left: 4px solid #28a745; }
</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-clipboard-list"></i> Discharge Planning</h4>
                        <h6>Comprehensive discharge planning and coordination</h6>
                    </div>
                    <div class="page-btn">
                        <button class="btn btn-primary me-2">
                            <i class="fas fa-save"></i> Save Plan
                        </button>
                        <button class="btn btn-info">
                            <i class="fas fa-print"></i> Print Plan
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Planning Header -->
        <div class="row">
            <div class="col-12">
                <div class="planning-header">
                    <div class="row">
                        <div class="col-md-8">
                            <h5><i class="fas fa-user"></i> Patient: Robert Davis</h5>
                            <p><strong>MRN:</strong> MRN456789 | <strong>Age:</strong> 68 years | <strong>Gender:</strong> Male</p>
                            <p><strong>Admission Date:</strong> January 15, 2024 | <strong>Length of Stay:</strong> 5 days</p>
                            <p><strong>Primary Diagnosis:</strong> Acute Myocardial Infarction | <strong>Attending:</strong> Dr. Johnson</p>
                        </div>
                        <div class="col-md-4 text-end">
                            <div class="progress-bar-custom">
                                <div class="progress-fill" style="width: 75%"></div>
                                <div class="progress-text">75% Complete</div>
                            </div>
                            <p class="mt-2 mb-0">Expected Discharge: January 22, 2024</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Planning Content -->
        <div class="row">
            <div class="col-md-8">
                <!-- Discharge Timeline -->
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-timeline"></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>Medical Stabilization</h6>
                                    <p>Patient medically stable for discharge</p>
                                    <small class="text-muted">Completed: January 18, 2024</small>
                                </div>
                            </div>
                            <div class="timeline-item completed">
                                <div class="timeline-marker"></div>
                                <div class="timeline-content">
                                    <h6>Medication Reconciliation</h6>
                                    <p>Discharge medications reviewed and reconciled</p>
                                    <small class="text-muted">Completed: January 19, 2024</small>
                                </div>
                            </div>
                            <div class="timeline-item active">
                                <div class="timeline-marker"></div>
                                <div class="timeline-content">
                                    <h6>Patient Education</h6>
                                    <p>Discharge instructions and education in progress</p>
                                    <small class="text-muted">In Progress</small>
                                </div>
                            </div>
                            <div class="timeline-item pending">
                                <div class="timeline-marker"></div>
                                <div class="timeline-content">
                                    <h6>Follow-up Appointments</h6>
                                    <p>Schedule required follow-up appointments</p>
                                    <small class="text-muted">Pending</small>
                                </div>
                            </div>
                            <div class="timeline-item pending">
                                <div class="timeline-marker"></div>
                                <div class="timeline-content">
                                    <h6>Discharge Summary</h6>
                                    <p>Complete and finalize discharge summary</p>
                                    <small class="text-muted">Pending</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Discharge Checklist -->
                <div class="card mt-3">
                    <div class="card-header">
                        <h5><i class="fas fa-tasks"></i> Discharge Checklist</h5>
                    </div>
                    <div class="card-body">
                        <div class="planning-section">
                            <h6>Medical Clearance</h6>
                            <div class="checklist-item">
                                <input type="checkbox" checked disabled>
                                <label>Physician discharge order obtained</label>
                            </div>
                            <div class="checklist-item">
                                <input type="checkbox" checked disabled>
                                <label>Final vital signs documented</label>
                            </div>
                            <div class="checklist-item">
                                <input type="checkbox" checked disabled>
                                <label>Lab results reviewed and documented</label>
                            </div>
                            <div class="checklist-item">
                                <input type="checkbox">
                                <label>Discharge summary completed</label>
                            </div>
                        </div>

                        <div class="planning-section">
                            <h6>Medications & Prescriptions</h6>
                            <div class="checklist-item">
                                <input type="checkbox" checked disabled>
                                <label>Medication reconciliation completed</label>
                            </div>
                            <div class="checklist-item">
                                <input type="checkbox" checked disabled>
                                <label>Discharge prescriptions written</label>
                            </div>
                            <div class="checklist-item">
                                <input type="checkbox">
                                <label>Patient education on medications provided</label>
                            </div>
                            <div class="checklist-item">
                                <input type="checkbox">
                                <label>Pharmacy consultation completed</label>
                            </div>
                        </div>

                        <div class="planning-section">
                            <h6>Patient Education & Instructions</h6>
                            <div class="checklist-item">
                                <input type="checkbox">
                                <label>Discharge instructions provided and reviewed</label>
                            </div>
                            <div class="checklist-item">
                                <input type="checkbox">
                                <label>Activity restrictions explained</label>
                            </div>
                            <div class="checklist-item">
                                <input type="checkbox">
                                <label>Diet instructions provided</label>
                            </div>
                            <div class="checklist-item">
                                <input type="checkbox">
                                <label>Warning signs and when to seek care explained</label>
                            </div>
                        </div>

                        <div class="planning-section">
                            <h6>Follow-up Care</h6>
                            <div class="checklist-item">
                                <input type="checkbox">
                                <label>Follow-up appointments scheduled</label>
                            </div>
                            <div class="checklist-item">
                                <input type="checkbox">
                                <label>Home health services arranged (if needed)</label>
                            </div>
                            <div class="checklist-item">
                                <input type="checkbox">
                                <label>Equipment/supplies ordered (if needed)</label>
                            </div>
                            <div class="checklist-item">
                                <input type="checkbox">
                                <label>Transportation arranged</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <!-- Risk Assessment -->
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-exclamation-triangle"></i> Risk Assessment</h5>
                    </div>
                    <div class="card-body">
                        <div class="alert-item alert-medium">
                            <strong>Readmission Risk:</strong> Moderate
                            <br><small>Age >65, cardiac condition, multiple medications</small>
                        </div>
                        <div class="alert-item alert-low">
                            <strong>Fall Risk:</strong> Low
                            <br><small>Stable gait, no cognitive impairment</small>
                        </div>
                        <div class="alert-item alert-high">
                            <strong>Medication Compliance:</strong> High Risk
                            <br><small>Complex regimen, multiple medications</small>
                        </div>
                        <div class="alert-item alert-medium">
                            <strong>Social Support:</strong> Adequate
                            <br><small>Spouse available, family support</small>
                        </div>
                    </div>
                </div>

                <!-- Care Team -->
                <div class="card mt-3">
                    <div class="card-header">
                        <h5><i class="fas fa-users"></i> Discharge Care Team</h5>
                    </div>
                    <div class="card-body">
                        <div class="care-team">
                            <div class="team-member">
                                <i class="fas fa-user-md fa-2x text-primary mb-2"></i>
                                <h6>Dr. Johnson</h6>
                                <small>Attending Physician</small>
                            </div>
                            <div class="team-member">
                                <i class="fas fa-user-nurse fa-2x text-success mb-2"></i>
                                <h6>Nurse Smith</h6>
                                <small>Discharge Coordinator</small>
                            </div>
                            <div class="team-member">
                                <i class="fas fa-pills fa-2x text-warning mb-2"></i>
                                <h6>Pharmacist Lee</h6>
                                <small>Medication Review</small>
                            </div>
                            <div class="team-member">
                                <i class="fas fa-heart fa-2x text-danger mb-2"></i>
                                <h6>Social Worker</h6>
                                <small>Discharge Planning</small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Quick Actions -->
                <div class="card mt-3">
                    <div class="card-header">
                        <h5><i class="fas fa-bolt"></i> Quick Actions</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <button class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-calendar"></i> Schedule Follow-up
                            </button>
                            <button class="btn btn-outline-success btn-sm">
                                <i class="fas fa-home"></i> Arrange Home Health
                            </button>
                            <button class="btn btn-outline-info btn-sm">
                                <i class="fas fa-car"></i> Arrange Transportation
                            </button>
                            <button class="btn btn-outline-warning btn-sm">
                                <i class="fas fa-phone"></i> Contact Family
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Discharge Medications -->
        <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-item">
                            <h6>Aspirin 81mg</h6>
                            <p>Take 1 tablet daily by mouth</p>
                            <small class="text-muted">30-day supply | Refills: 5</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 | Refills: 5</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 | Refills: 5</small>
                        </div>
                        <div class="medication-item">
                            <h6>Lisinopril 10mg</h6>
                            <p>Take 1 tablet daily by mouth</p>
                            <small class="text-muted">30-day supply | Refills: 5</small>
                        </div>
                    </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="appointment-item">
                            <h6>Cardiology Follow-up</h6>
                            <p><strong>Date:</strong> January 30, 2024 at 2:00 PM</p>
                            <p><strong>Provider:</strong> Dr. Wilson</p>
                            <p><strong>Location:</strong> Cardiology Clinic</p>
                            <small class="text-muted">Appointment confirmed</small>
                        </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. Brown</p>
                            <p><strong>Location:</strong> Family Medicine</p>
                            <small class="text-muted">Appointment pending</small>
                        </div>
                        <div class="appointment-item">
                            <h6>Lab Work</h6>
                            <p><strong>Date:</strong> February 1, 2024 at 8:00 AM</p>
                            <p><strong>Tests:</strong> Lipid Panel, CBC</p>
                            <p><strong>Location:</strong> Lab Services</p>
                            <small class="text-muted">Fasting required</small>
                        </div>
                    </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> Approve Discharge Plan
                        </button>
                        <button type="button" class="btn btn-warning btn-lg me-3">
                            <i class="fas fa-edit"></i> Modify Plan
                        </button>
                        <button type="button" class="btn btn-info btn-lg me-3">
                            <i class="fas fa-share"></i> Share with Team
                        </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 progress based on checklist completion
    function updateProgress() {
        var totalItems = $('input[type="checkbox"]').length;
        var completedItems = $('input[type="checkbox"]:checked').length;
        var percentage = Math.round((completedItems / totalItems) * 100);
        
        $('.progress-fill').css('width', percentage + '%');
        $('.progress-text').text(percentage + '% Complete');
        
        // Update timeline based on progress
        if (percentage >= 80) {
            $('.timeline-item.pending').first().removeClass('pending').addClass('active');
        }
    }
    
    // Handle checklist changes
    $('input[type="checkbox"]').change(function() {
        updateProgress();
    });
    
    // Quick action buttons
    $('.btn-outline-primary').click(function() {
        alert('Opening appointment scheduling...');
    });
    
    $('.btn-outline-success').click(function() {
        alert('Arranging home health services...');
    });
    
    $('.btn-outline-info').click(function() {
        alert('Arranging transportation...');
    });
    
    $('.btn-outline-warning').click(function() {
        alert('Contacting family members...');
    });
    
    // Main action buttons
    $('.btn-success').click(function() {
        if (confirm('Are you sure you want to approve this discharge plan?')) {
            alert('Discharge plan approved successfully!');
        }
    });
    
    $('.btn-info').click(function() {
        alert('Sharing discharge plan with care team...');
    });
    
    // Initialize progress
    updateProgress();
});
</script>
{% endblock %}