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

{% block title %}Ward Management - {{ block.super }}{% endblock %}

{% block css %}
<style>
.ward-overview {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}
.bed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
}
.bed-card {
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s ease;
}
.bed-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.bed-occupied { border-color: #dc3545; background: #f8d7da; }
.bed-available { border-color: #28a745; background: #d4edda; }
.bed-maintenance { border-color: #ffc107; background: #fff3cd; }
.bed-reserved { border-color: #17a2b8; background: #d1ecf1; }
.ward-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
}
.stat-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    border-left: 4px solid #007bff;
}
.stat-number {
    font-size: 2rem;
    font-weight: bold;
    color: #007bff;
}
.patient-list {
    max-height: 400px;
    overflow-y: auto;
}
.patient-item {
    padding: 10px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.patient-item:last-child {
    border-bottom: none;
}
.priority-high { border-left: 4px solid #dc3545; }
.priority-medium { border-left: 4px solid #ffc107; }
.priority-low { 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-hospital"></i> Ward Management</h4>
                        <h6>Monitor and manage ward operations</h6>
                    </div>
                    <div class="page-btn">
                        <button class="btn btn-primary me-2">
                            <i class="fas fa-plus"></i> New Admission
                        </button>
                        <button class="btn btn-info">
                            <i class="fas fa-sync"></i> Refresh
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Ward Selection -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-md-4">
                                <label>Select Ward:</label>
                                <select class="form-control" id="wardSelect">
                                    <option value="icu">Intensive Care Unit</option>
                                    <option value="cardiology" selected>Cardiology Ward</option>
                                    <option value="surgery">Surgery Ward</option>
                                    <option value="pediatrics">Pediatrics Ward</option>
                                    <option value="maternity">Maternity Ward</option>
                                </select>
                            </div>
                            <div class="col-md-8">
                                <div class="ward-stats">
                                    <div class="stat-card">
                                        <div class="stat-number">24</div>
                                        <div>Total Beds</div>
                                    </div>
                                    <div class="stat-card">
                                        <div class="stat-number">18</div>
                                        <div>Occupied</div>
                                    </div>
                                    <div class="stat-card">
                                        <div class="stat-number">4</div>
                                        <div>Available</div>
                                    </div>
                                    <div class="stat-card">
                                        <div class="stat-number">2</div>
                                        <div>Maintenance</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bed Layout -->
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-bed"></i> Bed Layout - Cardiology Ward</h5>
                        <div class="card-tools">
                            <div class="legend">
                                <span class="badge bg-danger me-2">Occupied</span>
                                <span class="badge bg-success me-2">Available</span>
                                <span class="badge bg-warning me-2">Maintenance</span>
                                <span class="badge bg-info">Reserved</span>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="bed-grid">
                            <div class="bed-card bed-occupied" data-bed="C101">
                                <h6>Room C101</h6>
                                <p><strong>John Smith</strong></p>
                                <small>Admitted: 2024-01-15</small>
                                <div class="mt-2">
                                    <span class="badge bg-danger">High Priority</span>
                                </div>
                            </div>
                            <div class="bed-card bed-occupied" data-bed="C102">
                                <h6>Room C102</h6>
                                <p><strong>Mary Johnson</strong></p>
                                <small>Admitted: 2024-01-16</small>
                                <div class="mt-2">
                                    <span class="badge bg-warning">Medium Priority</span>
                                </div>
                            </div>
                            <div class="bed-card bed-available" data-bed="C103">
                                <h6>Room C103</h6>
                                <p><strong>Available</strong></p>
                                <small>Last cleaned: 10:30 AM</small>
                                <div class="mt-2">
                                    <button class="btn btn-sm btn-primary">Assign</button>
                                </div>
                            </div>
                            <div class="bed-card bed-occupied" data-bed="C104">
                                <h6>Room C104</h6>
                                <p><strong>Robert Davis</strong></p>
                                <small>Admitted: 2024-01-14</small>
                                <div class="mt-2">
                                    <span class="badge bg-success">Stable</span>
                                </div>
                            </div>
                            <div class="bed-card bed-maintenance" data-bed="C105">
                                <h6>Room C105</h6>
                                <p><strong>Maintenance</strong></p>
                                <small>Equipment repair</small>
                                <div class="mt-2">
                                    <span class="badge bg-warning">Out of Service</span>
                                </div>
                            </div>
                            <div class="bed-card bed-reserved" data-bed="C106">
                                <h6>Room C106</h6>
                                <p><strong>Reserved</strong></p>
                                <small>Expected: 2:00 PM</small>
                                <div class="mt-2">
                                    <span class="badge bg-info">Incoming</span>
                                </div>
                            </div>
                            <div class="bed-card bed-available" data-bed="C107">
                                <h6>Room C107</h6>
                                <p><strong>Available</strong></p>
                                <small>Ready for admission</small>
                                <div class="mt-2">
                                    <button class="btn btn-sm btn-primary">Assign</button>
                                </div>
                            </div>
                            <div class="bed-card bed-occupied" data-bed="C108">
                                <h6>Room C108</h6>
                                <p><strong>Lisa Wilson</strong></p>
                                <small>Admitted: 2024-01-17</small>
                                <div class="mt-2">
                                    <span class="badge bg-warning">Discharge Planning</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-users"></i> Current Patients</h5>
                    </div>
                    <div class="card-body">
                        <div class="patient-list">
                            <div class="patient-item priority-high">
                                <div>
                                    <strong>John Smith</strong><br>
                                    <small>C101 - Acute MI</small>
                                </div>
                                <div>
                                    <button class="btn btn-sm btn-outline-primary">View</button>
                                </div>
                            </div>
                            <div class="patient-item priority-medium">
                                <div>
                                    <strong>Mary Johnson</strong><br>
                                    <small>C102 - Chest Pain</small>
                                </div>
                                <div>
                                    <button class="btn btn-sm btn-outline-primary">View</button>
                                </div>
                            </div>
                            <div class="patient-item priority-low">
                                <div>
                                    <strong>Robert Davis</strong><br>
                                    <small>C104 - Stable Angina</small>
                                </div>
                                <div>
                                    <button class="btn btn-sm btn-outline-primary">View</button>
                                </div>
                            </div>
                            <div class="patient-item priority-medium">
                                <div>
                                    <strong>Lisa Wilson</strong><br>
                                    <small>C108 - Post-op Recovery</small>
                                </div>
                                <div>
                                    <button class="btn btn-sm btn-outline-primary">View</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card mt-3">
                    <div class="card-header">
                        <h5><i class="fas fa-exclamation-triangle"></i> Alerts & Notifications</h5>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-danger alert-sm">
                            <strong>Critical:</strong> Patient in C101 requires immediate attention
                        </div>
                        <div class="alert alert-warning alert-sm">
                            <strong>Maintenance:</strong> Room C105 equipment repair scheduled
                        </div>
                        <div class="alert alert-info alert-sm">
                            <strong>Admission:</strong> New patient expected in C106 at 2:00 PM
                        </div>
                        <div class="alert alert-success alert-sm">
                            <strong>Discharge:</strong> Patient in C108 ready for discharge
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Ward Activities -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-activity"></i> Recent Ward Activities</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Time</th>
                                        <th>Activity</th>
                                        <th>Patient</th>
                                        <th>Room</th>
                                        <th>Staff</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>11:30 AM</td>
                                        <td>Patient Admission</td>
                                        <td>Lisa Wilson</td>
                                        <td>C108</td>
                                        <td>Dr. Smith</td>
                                        <td><span class="badge bg-success">Completed</span></td>
                                    </tr>
                                    <tr>
                                        <td>10:45 AM</td>
                                        <td>Room Cleaning</td>
                                        <td>-</td>
                                        <td>C103</td>
                                        <td>Housekeeping</td>
                                        <td><span class="badge bg-success">Completed</span></td>
                                    </tr>
                                    <tr>
                                        <td>09:15 AM</td>
                                        <td>Patient Transfer</td>
                                        <td>Michael Brown</td>
                                        <td>C102 → ICU</td>
                                        <td>Nurse Johnson</td>
                                        <td><span class="badge bg-success">Completed</span></td>
                                    </tr>
                                    <tr>
                                        <td>08:30 AM</td>
                                        <td>Equipment Maintenance</td>
                                        <td>-</td>
                                        <td>C105</td>
                                        <td>Maintenance Team</td>
                                        <td><span class="badge bg-warning">In Progress</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
$(document).ready(function() {
    // Ward selection change
    $('#wardSelect').change(function() {
        var selectedWard = $(this).val();
        // Reload ward data based on selection
        loadWardData(selectedWard);
    });
    
    // Bed card click handler
    $('.bed-card').click(function() {
        var bedId = $(this).data('bed');
        var isOccupied = $(this).hasClass('bed-occupied');
        
        if (isOccupied) {
            // Show patient details modal
            showPatientDetails(bedId);
        } else if ($(this).hasClass('bed-available')) {
            // Show bed assignment options
            showBedAssignment(bedId);
        }
    });
    
    // Assign bed button
    $('.bed-card .btn-primary').click(function(e) {
        e.stopPropagation();
        var bedId = $(this).closest('.bed-card').data('bed');
        showBedAssignment(bedId);
    });
    
    // Auto-refresh every 5 minutes
    setInterval(function() {
        location.reload();
    }, 300000);
    
    function loadWardData(wardId) {
        // AJAX call to load ward-specific data
        console.log('Loading data for ward:', wardId);
    }
    
    function showPatientDetails(bedId) {
        // Show patient details modal
        alert('Show patient details for bed: ' + bedId);
    }
    
    function showBedAssignment(bedId) {
        // Show bed assignment modal
        alert('Assign patient to bed: ' + bedId);
    }
});
</script>
{% endblock %}