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

{% block title %}Census Report - {{ block.super }}{% endblock %}

{% block css %}
<style>
.census-summary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 30px;
}
.census-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin: 10px 0;
    border-left: 4px solid #007bff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.occupancy-chart {
    height: 300px;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}
.ward-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}
.stat-item {
    text-align: center;
    padding: 15px;
}
.stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: #007bff;
}
.stat-label {
    font-size: 0.9rem;
    color: #6c757d;
    margin-top: 5px;
}
.trend-indicator {
    font-size: 0.8rem;
    margin-top: 5px;
}
.trend-up { color: #28a745; }
.trend-down { color: #dc3545; }
.trend-stable { color: #6c757d; }
.census-table {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.table th {
    background: #f8f9fa;
    border-top: none;
    font-weight: 600;
}
.occupancy-bar {
    height: 20px;
    background: #e9ecef;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
.occupancy-fill {
    height: 100%;
    background: linear-gradient(90deg, #28a745, #ffc107, #dc3545);
    transition: width 0.3s ease;
}
.occupancy-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    font-weight: bold;
    color: #333;
}
</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-chart-bar"></i> Census Report</h4>
                        <h6>Hospital occupancy and patient census data</h6>
                    </div>
                    <div class="page-btn">
                        <button class="btn btn-primary me-2">
                            <i class="fas fa-download"></i> Export Report
                        </button>
                        <button class="btn btn-info">
                            <i class="fas fa-sync"></i> Refresh
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Census Summary -->
        <div class="row">
            <div class="col-12">
                <div class="census-summary">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="stat-item">
                                <div class="stat-number">156</div>
                                <div class="stat-label">Total Patients</div>
                                <div class="trend-indicator trend-up">
                                    <i class="fas fa-arrow-up"></i> +5 from yesterday
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stat-item">
                                <div class="stat-number">82%</div>
                                <div class="stat-label">Occupancy Rate</div>
                                <div class="trend-indicator trend-up">
                                    <i class="fas fa-arrow-up"></i> +3% from last week
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stat-item">
                                <div class="stat-number">12</div>
                                <div class="stat-label">Admissions Today</div>
                                <div class="trend-indicator trend-stable">
                                    <i class="fas fa-minus"></i> Same as yesterday
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stat-item">
                                <div class="stat-number">8</div>
                                <div class="stat-label">Discharges Today</div>
                                <div class="trend-indicator trend-down">
                                    <i class="fas fa-arrow-down"></i> -2 from yesterday
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Date Range Filter -->
        <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>Report Date:</label>
                                <input type="date" class="form-control" value="2024-01-20">
                            </div>
                            <div class="col-md-4">
                                <label>Compare With:</label>
                                <select class="form-control">
                                    <option>Previous Day</option>
                                    <option>Previous Week</option>
                                    <option>Previous Month</option>
                                    <option>Same Day Last Year</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label>Report Type:</label>
                                <select class="form-control">
                                    <option>Daily Census</option>
                                    <option>Weekly Summary</option>
                                    <option>Monthly Report</option>
                                    <option>Quarterly Analysis</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Ward-wise Census -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-hospital"></i> Ward-wise Census</h5>
                    </div>
                    <div class="card-body">
                        <div class="census-table">
                            <table class="table table-hover mb-0">
                                <thead>
                                    <tr>
                                        <th>Ward</th>
                                        <th>Total Beds</th>
                                        <th>Occupied</th>
                                        <th>Available</th>
                                        <th>Occupancy Rate</th>
                                        <th>Avg Length of Stay</th>
                                        <th>Admissions Today</th>
                                        <th>Discharges Today</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><strong>Intensive Care Unit</strong></td>
                                        <td>20</td>
                                        <td>18</td>
                                        <td>2</td>
                                        <td>
                                            <div class="occupancy-bar">
                                                <div class="occupancy-fill" style="width: 90%"></div>
                                                <div class="occupancy-text">90%</div>
                                            </div>
                                        </td>
                                        <td>4.2 days</td>
                                        <td>3</td>
                                        <td>1</td>
                                    </tr>
                                    <tr>
                                        <td><strong>Cardiology</strong></td>
                                        <td>30</td>
                                        <td>24</td>
                                        <td>6</td>
                                        <td>
                                            <div class="occupancy-bar">
                                                <div class="occupancy-fill" style="width: 80%"></div>
                                                <div class="occupancy-text">80%</div>
                                            </div>
                                        </td>
                                        <td>3.8 days</td>
                                        <td>2</td>
                                        <td>3</td>
                                    </tr>
                                    <tr>
                                        <td><strong>Surgery</strong></td>
                                        <td>25</td>
                                        <td>20</td>
                                        <td>5</td>
                                        <td>
                                            <div class="occupancy-bar">
                                                <div class="occupancy-fill" style="width: 80%"></div>
                                                <div class="occupancy-text">80%</div>
                                            </div>
                                        </td>
                                        <td>2.5 days</td>
                                        <td>4</td>
                                        <td>2</td>
                                    </tr>
                                    <tr>
                                        <td><strong>Pediatrics</strong></td>
                                        <td>20</td>
                                        <td>15</td>
                                        <td>5</td>
                                        <td>
                                            <div class="occupancy-bar">
                                                <div class="occupancy-fill" style="width: 75%"></div>
                                                <div class="occupancy-text">75%</div>
                                            </div>
                                        </td>
                                        <td>2.1 days</td>
                                        <td>2</td>
                                        <td>1</td>
                                    </tr>
                                    <tr>
                                        <td><strong>Maternity</strong></td>
                                        <td>15</td>
                                        <td>12</td>
                                        <td>3</td>
                                        <td>
                                            <div class="occupancy-bar">
                                                <div class="occupancy-fill" style="width: 80%"></div>
                                                <div class="occupancy-text">80%</div>
                                            </div>
                                        </td>
                                        <td>1.8 days</td>
                                        <td>1</td>
                                        <td>1</td>
                                    </tr>
                                    <tr>
                                        <td><strong>Emergency</strong></td>
                                        <td>10</td>
                                        <td>8</td>
                                        <td>2</td>
                                        <td>
                                            <div class="occupancy-bar">
                                                <div class="occupancy-fill" style="width: 80%"></div>
                                                <div class="occupancy-text">80%</div>
                                            </div>
                                        </td>
                                        <td>0.5 days</td>
                                        <td>15</td>
                                        <td>12</td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr class="table-info">
                                        <th><strong>Total Hospital</strong></th>
                                        <th><strong>120</strong></th>
                                        <th><strong>97</strong></th>
                                        <th><strong>23</strong></th>
                                        <th>
                                            <div class="occupancy-bar">
                                                <div class="occupancy-fill" style="width: 81%"></div>
                                                <div class="occupancy-text">81%</div>
                                            </div>
                                        </th>
                                        <th><strong>2.8 days</strong></th>
                                        <th><strong>27</strong></th>
                                        <th><strong>20</strong></th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Charts and Analytics -->
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-chart-line"></i> Occupancy Trend (Last 7 Days)</h5>
                    </div>
                    <div class="card-body">
                        <div class="occupancy-chart">
                            <canvas id="occupancyChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-chart-pie"></i> Patient Distribution by Ward</h5>
                    </div>
                    <div class="card-body">
                        <div class="occupancy-chart">
                            <canvas id="distributionChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Additional Metrics -->
        <div class="row">
            <div class="col-md-4">
                <div class="census-card">
                    <h6><i class="fas fa-clock"></i> Average Length of Stay</h6>
                    <div class="stat-number">2.8</div>
                    <div class="stat-label">days</div>
                    <div class="trend-indicator trend-down">
                        <i class="fas fa-arrow-down"></i> -0.2 days from last month
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="census-card">
                    <h6><i class="fas fa-bed"></i> Bed Turnover Rate</h6>
                    <div class="stat-number">1.4</div>
                    <div class="stat-label">patients per bed per day</div>
                    <div class="trend-indicator trend-up">
                        <i class="fas fa-arrow-up"></i> +0.1 from last week
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="census-card">
                    <h6><i class="fas fa-percentage"></i> Readmission Rate</h6>
                    <div class="stat-number">8.2%</div>
                    <div class="stat-label">within 30 days</div>
                    <div class="trend-indicator trend-down">
                        <i class="fas fa-arrow-down"></i> -1.1% from last quarter
                    </div>
                </div>
            </div>
        </div>

        <!-- Export Options -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="fas fa-download"></i> Export Options</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6>Report Formats:</h6>
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-outline-primary">
                                        <i class="fas fa-file-pdf"></i> PDF
                                    </button>
                                    <button type="button" class="btn btn-outline-success">
                                        <i class="fas fa-file-excel"></i> Excel
                                    </button>
                                    <button type="button" class="btn btn-outline-info">
                                        <i class="fas fa-file-csv"></i> CSV
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary">
                                        <i class="fas fa-print"></i> Print
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h6>Schedule Reports:</h6>
                                <div class="form-group">
                                    <select class="form-control">
                                        <option>One-time Export</option>
                                        <option>Daily Email Report</option>
                                        <option>Weekly Summary</option>
                                        <option>Monthly Report</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
$(document).ready(function() {
    // Occupancy Trend Chart
    const occupancyCtx = document.getElementById('occupancyChart').getContext('2d');
    new Chart(occupancyCtx, {
        type: 'line',
        data: {
            labels: ['Jan 14', 'Jan 15', 'Jan 16', 'Jan 17', 'Jan 18', 'Jan 19', 'Jan 20'],
            datasets: [{
                label: 'Occupancy Rate (%)',
                data: [78, 82, 79, 85, 83, 81, 82],
                borderColor: '#007bff',
                backgroundColor: 'rgba(0, 123, 255, 0.1)',
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100
                }
            }
        }
    });
    
    // Distribution Chart
    const distributionCtx = document.getElementById('distributionChart').getContext('2d');
    new Chart(distributionCtx, {
        type: 'doughnut',
        data: {
            labels: ['ICU', 'Cardiology', 'Surgery', 'Pediatrics', 'Maternity', 'Emergency'],
            datasets: [{
                data: [18, 24, 20, 15, 12, 8],
                backgroundColor: [
                    '#dc3545',
                    '#007bff',
                    '#28a745',
                    '#ffc107',
                    '#17a2b8',
                    '#6f42c1'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false
        }
    });
    
    // Export functionality
    $('.btn-outline-primary').click(function() {
        alert('Exporting census report as PDF...');
    });
    
    $('.btn-outline-success').click(function() {
        alert('Exporting census report as Excel...');
    });
    
    $('.btn-outline-info').click(function() {
        alert('Exporting census report as CSV...');
    });
    
    $('.btn-outline-secondary').click(function() {
        window.print();
    });
});
</script>
{% endblock %}