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

{% block title %}Radiology Dashboard{% endblock %}

{% block breadcrumb %}
<ol class="breadcrumb float-sm-right">
    <li class="breadcrumb-item active">Radiology Dashboard</li>
</ol>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Dashboard Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h1 class="h3 mb-0">
                    <i class="fas fa-x-ray me-2"></i>Radiology Dashboard
                </h1>
                <div class="btn-group" role="group">
                    <a href="{% url 'radiology:imaging_order_create' %}" class="btn btn-primary">
                        <i class="fas fa-plus"></i> New Order
                    </a>
                    <a href="{% url 'radiology:radiology_report_create' %}" class="btn btn-success">
                        <i class="fas fa-file-medical"></i> New Report
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4" hx-get="{% url 'radiology:radiology_stats' %}" hx-trigger="load, every 30s">
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card bg-gradient-warning text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h2 class="mb-0">{{ pending_orders|default:0 }}</h2>
                            <p class="mb-0">Pending Orders</p>
                        </div>
                        <div class="text-white-50">
                            <i class="fas fa-clock fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card bg-gradient-info text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h2 class="mb-0">{{ scheduled_studies|default:0 }}</h2>
                            <p class="mb-0">Scheduled Studies</p>
                        </div>
                        <div class="text-white-50">
                            <i class="fas fa-calendar-alt fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card bg-gradient-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h2 class="mb-0">{{ in_progress_studies|default:0 }}</h2>
                            <p class="mb-0">In Progress</p>
                        </div>
                        <div class="text-white-50">
                            <i class="fas fa-play-circle fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card bg-gradient-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h2 class="mb-0">{{ studies_completed_today|default:0 }}</h2>
                            <p class="mb-0">Studies Today</p>
                        </div>
                        <div class="text-white-50">
                            <i class="fas fa-check-circle fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Report Statistics -->
    <div class="row mb-4">
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card bg-gradient-warning text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h2 class="mb-0">{{ reports_pending|default:0 }}</h2>
                            <p class="mb-0">Reports Pending</p>
                        </div>
                        <div class="text-white-50">
                            <i class="fas fa-file-medical fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card bg-gradient-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h2 class="mb-0">{{ reports_signed_today|default:0 }}</h2>
                            <p class="mb-0">Reports Signed Today</p>
                        </div>
                        <div class="text-white-50">
                            <i class="fas fa-signature fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card bg-gradient-danger text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h2 class="mb-0">{{ critical_findings|default:0 }}</h2>
                            <p class="mb-0">Critical Findings</p>
                        </div>
                        <div class="text-white-50">
                            <i class="fas fa-exclamation-triangle fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card bg-gradient-info text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h2 class="mb-0">{{ total_images_today|default:0 }}</h2>
                            <p class="mb-0">Images Today</p>
                        </div>
                        <div class="text-white-50">
                            <i class="fas fa-images fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Activity -->
    <div class="row mb-4">
        <div class="col-lg-4 mb-4">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="fas fa-list-alt me-2"></i>Recent Orders
                    </h5>
                    <a href="{% url 'radiology:imaging_order_list' %}" class="btn btn-sm btn-outline-primary">View All</a>
                </div>
                <div class="card-body p-0">
                    {% if recent_orders %}
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Patient</th>
                                    <th>Study</th>
                                    <th>Status</th>
                                    <th>Ordered</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for order in recent_orders %}
                                <tr>
                                    <td>
                                        <a href="{% url 'radiology:imaging_order_detail' order.pk %}" class="text-decoration-none">
                                            <strong>{{ order.patient.first_name }} {{ order.patient.last_name }}</strong>
                                        </a>
                                        <br><small class="text-muted">{{ order.patient.mrn }}</small>
                                    </td>
                                    <td>
                                        <small class="text-muted">{{ order.modality }}</small><br>
                                        {{ order.study_description|truncatechars:20 }}
                                    </td>
                                    <td>
                                        <span class="badge {% if order.status == 'PENDING' %}bg-warning{% elif order.status == 'SCHEDULED' %}bg-info{% elif order.status == 'IN_PROGRESS' %}bg-primary{% elif order.status == 'COMPLETED' %}bg-success{% else %}bg-secondary{% endif %}">
                                            {{ order.get_status_display }}
                                        </span>
                                        {% if order.priority == 'URGENT' %}
                                            <br><span class="badge bg-danger">Urgent</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ order.order_datetime|date:"M d, H:i" }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="p-3 text-center text-muted">
                        <i class="fas fa-inbox fa-2x mb-2"></i>
                        <p class="mb-0">No recent orders.</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-lg-4 mb-4">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="fas fa-x-ray me-2"></i>Recent Studies
                    </h5>
                    <a href="{% url 'radiology:imaging_study_list' %}" class="btn btn-sm btn-outline-primary">View All</a>
                </div>
                <div class="card-body p-0">
                    {% if recent_studies %}
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Patient</th>
                                    <th>Modality</th>
                                    <th>Status</th>
                                    <th>Study Time</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for study in recent_studies %}
                                <tr>
                                    <td>
                                        <a href="{% url 'radiology:imaging_study_detail' study.pk %}" class="text-decoration-none">
                                            <strong>{{ study.order.patient.first_name }} {{ study.order.patient.last_name }}</strong>
                                        </a>
                                        <br><small class="text-muted">{{ study.order.patient.mrn }}</small>
                                    </td>
                                    <td>{{ study.order.modality }}</td>
                                    <td>
                                        <span class="badge {% if study.status == 'SCHEDULED' %}bg-info{% elif study.status == 'IN_PROGRESS' %}bg-primary{% elif study.status == 'COMPLETED' %}bg-success{% else %}bg-secondary{% endif %}">
                                            {{ study.get_status_display }}
                                        </span>
                                    </td>
                                    <td>{{ study.study_datetime|date:"M d, H:i" }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="p-3 text-center text-muted">
                        <i class="fas fa-x-ray fa-2x mb-2"></i>
                        <p class="mb-0">No recent studies.</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-lg-4 mb-4">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="fas fa-file-medical me-2"></i>Recent Reports
                    </h5>
                    <a href="{% url 'radiology:radiology_report_list' %}" class="btn btn-sm btn-outline-primary">View All</a>
                </div>
                <div class="card-body p-0">
                    {% if recent_reports %}
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Patient</th>
                                    <th>Study</th>
                                    <th>Status</th>
                                    <th>Signed</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for report in recent_reports %}
                                <tr>
                                    <td>
                                        <a href="{% url 'radiology:radiology_report_detail' report.pk %}" class="text-decoration-none">
                                            <strong>{{ report.study.order.patient.first_name }} {{ report.study.order.patient.last_name }}</strong>
                                        </a>
                                        <br><small class="text-muted">{{ report.study.order.patient.mrn }}</small>
                                    </td>
                                    <td>
                                        {{ report.study.order.modality }}<br>
                                        <small class="text-muted">{{ report.study.order.study_description|truncatechars:20 }}</small>
                                    </td>
                                    <td>
                                        <span class="badge {% if report.status == 'DRAFT' %}bg-warning{% elif report.status == 'SIGNED' %}bg-success{% else %}bg-secondary{% endif %}">
                                            {{ report.get_status_display }}
                                        </span>
                                        {% if report.has_critical_findings %}
                                            <br><span class="badge bg-danger">Critical</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if report.signed_datetime %}
                                            {{ report.signed_datetime|date:"M d, H:i" }}
                                        {% else %}
                                            <span class="text-muted">Not signed</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="p-3 text-center text-muted">
                        <i class="fas fa-file-medical fa-2x mb-2"></i>
                        <p class="mb-0">No recent reports.</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-bolt me-2"></i>Quick Actions
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-lg-2 col-md-4 col-sm-6">
                            <a href="{% url 'radiology:imaging_order_list' %}" class="btn btn-outline-primary w-100 h-100 d-flex flex-column align-items-center justify-content-center py-3">
                                <i class="fas fa-list-alt fa-2x mb-2"></i>
                                <span>View Orders</span>
                            </a>
                        </div>
                        <div class="col-lg-2 col-md-4 col-sm-6">
                            <a href="{% url 'radiology:imaging_study_list' %}" class="btn btn-outline-info w-100 h-100 d-flex flex-column align-items-center justify-content-center py-3">
                                <i class="fas fa-x-ray fa-2x mb-2"></i>
                                <span>View Studies</span>
                            </a>
                        </div>
                        <div class="col-lg-2 col-md-4 col-sm-6">
                            <a href="{% url 'radiology:radiology_report_list' %}" class="btn btn-outline-success w-100 h-100 d-flex flex-column align-items-center justify-content-center py-3">
                                <i class="fas fa-file-medical fa-2x mb-2"></i>
                                <span>View Reports</span>
                            </a>
                        </div>
                        <div class="col-lg-2 col-md-4 col-sm-6">
                            <a href="{% url 'radiology:report_template_list' %}" class="btn btn-outline-warning w-100 h-100 d-flex flex-column align-items-center justify-content-center py-3">
                                <i class="fas fa-file-alt fa-2x mb-2"></i>
                                <span>Templates</span>
                            </a>
                        </div>
                        <div class="col-lg-2 col-md-4 col-sm-6">
                            <a href="{% url 'radiology:imaging_series_list' %}" class="btn btn-outline-secondary w-100 h-100 d-flex flex-column align-items-center justify-content-center py-3">
                                <i class="fas fa-layer-group fa-2x mb-2"></i>
                                <span>View Series</span>
                            </a>
                        </div>
                        <div class="col-lg-2 col-md-4 col-sm-6">
                            <a href="{% url 'radiology:dicom_image_list' %}" class="btn btn-outline-dark w-100 h-100 d-flex flex-column align-items-center justify-content-center py-3">
                                <i class="fas fa-images fa-2x mb-2"></i>
                                <span>DICOM Images</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}