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

{% block title %}Blood Bank Dashboard{% endblock %}

{% block css %}
<link href="{% static 'plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css' %}" rel="stylesheet" />
<link href="{% static 'plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css' %}" rel="stylesheet" />
{% endblock %}

{% block content %}
<!-- BEGIN breadcrumb -->
<ol class="breadcrumb float-xl-end">
    <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Home</a></li>
    <li class="breadcrumb-item active">Blood Bank Dashboard</li>
</ol>
<!-- END breadcrumb -->

<!-- BEGIN page-header -->
<h1 class="page-header">Blood Bank Dashboard <small>overview of blood bank operations</small></h1>
<!-- END page-header -->

<!-- BEGIN row -->
<div class="row">
    <!-- BEGIN col-3 -->
    <div class="col-xl-3 col-md-6">
        <div class="widget widget-stats bg-blue">
            <div class="stats-icon"><i class="fa fa-users"></i></div>
            <div class="stats-info">
                <h4>ACTIVE DONORS</h4>
                <p>{{ total_donors }}</p>
            </div>
            <div class="stats-link">
                <a href="{% url 'blood_bank:donor_list' %}">View Detail <i class="fa fa-arrow-alt-circle-right"></i></a>
            </div>
        </div>
    </div>
    <!-- END col-3 -->
    
    <!-- BEGIN col-3 -->
    <div class="col-xl-3 col-md-6">
        <div class="widget widget-stats bg-info">
            <div class="stats-icon"><i class="fa fa-tint"></i></div>
            <div class="stats-info">
                <h4>AVAILABLE UNITS</h4>
                <p>{{ total_units }}</p>
            </div>
            <div class="stats-link">
                <a href="{% url 'blood_bank:blood_unit_list' %}">View Detail <i class="fa fa-arrow-alt-circle-right"></i></a>
            </div>
        </div>
    </div>
    <!-- END col-3 -->
    
    <!-- BEGIN col-3 -->
    <div class="col-xl-3 col-md-6">
        <div class="widget widget-stats bg-orange">
            <div class="stats-icon"><i class="fa fa-clipboard-list"></i></div>
            <div class="stats-info">
                <h4>PENDING REQUESTS</h4>
                <p>{{ pending_requests }}</p>
            </div>
            <div class="stats-link">
                <a href="{% url 'blood_bank:blood_request_list' %}">View Detail <i class="fa fa-arrow-alt-circle-right"></i></a>
            </div>
        </div>
    </div>
    <!-- END col-3 -->
    
    <!-- BEGIN col-3 -->
    <div class="col-xl-3 col-md-6">
        <div class="widget widget-stats bg-red">
            <div class="stats-icon"><i class="fa fa-exclamation-triangle"></i></div>
            <div class="stats-info">
                <h4>EXPIRING SOON</h4>
                <p>{{ expiring_soon }}</p>
            </div>
            <div class="stats-link">
                <a href="{% url 'blood_bank:inventory_overview' %}">View Detail <i class="fa fa-arrow-alt-circle-right"></i></a>
            </div>
        </div>
    </div>
    <!-- END col-3 -->
</div>
<!-- END row -->

<!-- BEGIN row -->
<div class="row">
    <!-- BEGIN col-8 -->
    <div class="col-xl-8">
        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Blood Group Distribution</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">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>Blood Group</th>
                                <th>Available Units</th>
                                <th>Percentage</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for stat in blood_group_stats %}
                            <tr>
                                <td>
                                    <span class="badge bg-primary fs-6 fw-bold">
                                        {{ stat.blood_group__abo_type }}{% if stat.blood_group__rh_factor == 'POS' %}+{% else %}-{% endif %}
                                    </span>
                                </td>
                                <td>{{ stat.count }}</td>
                                <td>
                                    {% widthratio stat.count total_units 100 %}%
                                </td>
                                <td>
                                    {% if stat.count >= 10 %}
                                        <span class="badge bg-success">Adequate</span>
                                    {% elif stat.count >= 5 %}
                                        <span class="badge bg-warning">Low</span>
                                    {% else %}
                                        <span class="badge bg-danger">Critical</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="4" class="text-center">No blood units available</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- END panel -->
    </div>
    <!-- END col-8 -->
    
    <!-- BEGIN col-4 -->
    <div class="col-xl-4">
        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Quick Stats</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">
                <div class="list-group">
                    <div class="list-group-item d-flex justify-content-between align-items-center">
                        <div>
                            <i class="fa fa-tint text-info me-2"></i>
                            Recent Donations (7 days)
                        </div>
                        <span class="badge bg-info rounded-pill">{{ recent_donations }}</span>
                    </div>
                    <div class="list-group-item d-flex justify-content-between align-items-center">
                        <div>
                            <i class="fa fa-heartbeat text-success me-2"></i>
                            Active Transfusions
                        </div>
                        <span class="badge bg-success rounded-pill">{{ active_transfusions }}</span>
                    </div>
                    <div class="list-group-item d-flex justify-content-between align-items-center">
                        <div>
                            <i class="fa fa-clock text-warning me-2"></i>
                            Expiring This Week
                        </div>
                        <span class="badge bg-warning rounded-pill">{{ expiring_soon }}</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- END panel -->
    </div>
    <!-- END col-4 -->
</div>
<!-- END row -->

<!-- BEGIN row -->
<div class="row">
    <!-- BEGIN col-6 -->
    <div class="col-xl-6">
        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Recent Blood Units</h4>
                <div class="panel-heading-btn">
                    <a href="{% url 'blood_bank:blood_unit_list' %}" class="btn btn-xs btn-primary">View All</a>
                </div>
            </div>
            <div class="panel-body">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Unit Number</th>
                                <th>Donor</th>
                                <th>Component</th>
                                <th>Blood Group</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for unit in recent_units %}
                            <tr>
                                <td>
                                    <a href="{% url 'blood_bank:blood_unit_detail' unit.id %}">
                                        {{ unit.unit_number }}
                                    </a>
                                </td>
                                <td>{{ unit.donor.full_name }}</td>
                                <td>{{ unit.component.get_name_display }}</td>
                                <td>
                                    <span class="badge bg-primary">{{ unit.blood_group.display_name }}</span>
                                </td>
                                <td>
                                    {% if unit.status == 'available' %}
                                        <span class="badge bg-success">{{ unit.get_status_display }}</span>
                                    {% elif unit.status == 'expired' %}
                                        <span class="badge bg-danger">{{ unit.get_status_display }}</span>
                                    {% else %}
                                        <span class="badge bg-info">{{ unit.get_status_display }}</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="5" class="text-center">No recent blood units</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- END panel -->
    </div>
    <!-- END col-6 -->
    
    <!-- BEGIN col-6 -->
    <div class="col-xl-6">
        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Urgent Blood Requests</h4>
                <div class="panel-heading-btn">
                    <a href="{% url 'blood_bank:blood_request_list' %}" class="btn btn-xs btn-primary">View All</a>
                </div>
            </div>
            <div class="panel-body">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Request #</th>
                                <th>Patient</th>
                                <th>Component</th>
                                <th>Units</th>
                                <th>Urgency</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for request in urgent_requests %}
                            <tr>
                                <td>
                                    <a href="{% url 'blood_bank:blood_request_detail' request.id %}">
                                        {{ request.request_number }}
                                    </a>
                                </td>
                                <td>{{ request.patient.full_name }}</td>
                                <td>{{ request.component_requested.get_name_display }}</td>
                                <td>{{ request.units_requested }}</td>
                                <td>
                                    <span class="badge bg-danger">{{ request.get_urgency_display }}</span>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="5" class="text-center">No urgent requests</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- END panel -->
    </div>
    <!-- END col-6 -->
</div>
<!-- END row -->

<!-- BEGIN row -->
<div class="row">
    <div class="col-xl-12">
        <!-- BEGIN panel -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Quick Actions</h4>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <a href="{% url 'blood_bank:donor_create' %}" class="btn btn-primary btn-lg w-100">
                            <i class="fa fa-user-plus fa-2x d-block mb-2"></i>
                            Register Donor
                        </a>
                    </div>
                    <div class="col-md-3 mb-3">
                        <a href="{% url 'blood_bank:blood_unit_create' %}" class="btn btn-info btn-lg w-100">
                            <i class="fa fa-tint fa-2x d-block mb-2"></i>
                            Register Blood Unit
                        </a>
                    </div>
                    <div class="col-md-3 mb-3">
                        <a href="{% url 'blood_bank:blood_request_create' %}" class="btn btn-warning btn-lg w-100">
                            <i class="fa fa-clipboard-list fa-2x d-block mb-2"></i>
                            Create Request
                        </a>
                    </div>
                    <div class="col-md-3 mb-3">
                        <a href="{% url 'blood_bank:inventory_overview' %}" class="btn btn-success btn-lg w-100">
                            <i class="fa fa-boxes fa-2x d-block mb-2"></i>
                            View Inventory
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!-- END panel -->
    </div>
</div>
<!-- END row -->
{% endblock %}

{% block js %}
<script src="{% static 'plugins/datatables.net/js/dataTables.min.js' %}"></script>
<script src="{% static 'plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js' %}"></script>
<script src="{% static 'plugins/datatables.net-responsive/js/dataTables.responsive.min.js' %}"></script>
<script src="{% static 'plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js' %}"></script>

<script>
$(document).ready(function() {
    // Auto-refresh dashboard every 5 minutes
    setInterval(function() {
        location.reload();
    }, 300000);
});
</script>
{% endblock %}