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

{% block title %}Imaging Study Detail - {{ study.accession_number }}{% endblock %}

{% block breadcrumb %}
<ol class="breadcrumb float-sm-right">
    <li class="breadcrumb-item"><a href="{% url 'radiology:dashboard' %}">Radiology</a></li>
    <li class="breadcrumb-item"><a href="{% url 'radiology:imaging_study_list' %}">Studies</a></li>
    <li class="breadcrumb-item active">{{ study.accession_number }}</li>
</ol>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Study Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title mb-0">
                        <i class="fas fa-x-ray me-2"></i>
                        Imaging Study: {{ study.accession_number }}
                    </h3>
                    <div class="btn-group">
                        <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown">
                            <i class="fas fa-cog"></i> Actions
                        </button>
                        <ul class="dropdown-menu">
                            {% if perms.radiology.change_imagingstudy %}
                            <li><a class="dropdown-item" href="{% url 'radiology:imaging_study_update' study.pk %}">
                                <i class="fas fa-edit"></i> Edit Study
                            </a></li>
                            {% endif %}
                            {% if study.status == 'SCHEDULED' %}
                            <li><a class="dropdown-item" href="{% url 'radiology:start_study' study.pk %}">
                                <i class="fas fa-play"></i> Start Study
                            </a></li>
                            {% endif %}
                            {% if study.status == 'IN_PROGRESS' %}
                            <li><a class="dropdown-item" href="{% url 'radiology:complete_study' study.pk %}">
                                <i class="fas fa-check"></i> Complete Study
                            </a></li>
                            {% endif %}
                            {% if study.status == 'COMPLETED' and not study.report %}
                            <li><a class="dropdown-item" href="{% url 'radiology:dictate_report' study.pk %}">
                                <i class="fas fa-microphone"></i> Dictate Report
                            </a></li>
                            {% endif %}
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#" onclick="window.print()">
                                <i class="fas fa-print"></i> Print Study Info
                            </a></li>
                            <li><a class="dropdown-item" href="#" onclick="exportStudy()">
                                <i class="fas fa-download"></i> Export DICOM
                            </a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            <h4>{{ study.study_description }}</h4>
                            <p class="text-muted mb-2">
                                <strong>Modality:</strong> {{ study.get_modality_display }} | 
                                <strong>Body Part:</strong> {{ study.get_body_part_display }} |
                                <strong>Priority:</strong> 
                                <span class="badge {% if study.is_stat %}bg-danger{% else %}bg-primary{% endif %}">
                                    {{ study.get_priority_display }}
                                </span>
                            </p>
                            <p class="text-muted">
                                <strong>Study Date:</strong> {{ study.study_datetime|date:"M d, Y g:i A" }}
                            </p>
                        </div>
                        <div class="col-md-4 text-end">
                            <span class="badge fs-6 {% if study.status == 'COMPLETED' %}bg-success{% elif study.status == 'IN_PROGRESS' %}bg-warning{% elif study.status == 'SCHEDULED' %}bg-info{% else %}bg-secondary{% endif %}">
                                {{ study.get_status_display }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Patient Information -->
        <div class="col-lg-4 mb-4">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-user me-2"></i>Patient Information
                    </h5>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <div class="avatar-circle bg-primary text-white me-3">
                            {{ study.patient.first_name.0 }}{{ study.patient.last_name.0 }}
                        </div>
                        <div>
                            <h6 class="mb-0">{{ study.patient.get_full_name }}</h6>
                            <small class="text-muted">{{ study.patient.patient_id }}</small>
                        </div>
                    </div>
                    <div class="row g-2">
                        <div class="col-6">
                            <small class="text-muted d-block">Date of Birth</small>
                            <span>{{ study.patient.date_of_birth|date:"M d, Y" }}</span>
                        </div>
                        <div class="col-6">
                            <small class="text-muted d-block">Age</small>
                            <span>{{ study.patient.age }} years</span>
                        </div>
                        <div class="col-6">
                            <small class="text-muted d-block">Gender</small>
                            <span>{{ study.patient.get_gender_display }}</span>
                        </div>
                        <div class="col-6">
                            <small class="text-muted d-block">MRN</small>
                            <span>{{ study.patient.medical_record_number }}</span>
                        </div>
                    </div>
                    {% if study.clinical_indication %}
                    <div class="mt-3">
                        <small class="text-muted d-block">Clinical Indication</small>
                        <p class="mb-0">{{ study.clinical_indication }}</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Study Details -->
        <div class="col-lg-4 mb-4">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-info-circle me-2"></i>Study Details
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row g-2">
                        <div class="col-12">
                            <small class="text-muted d-block">Study Instance UID</small>
                            <code class="small">{{ study.study_instance_uid }}</code>
                        </div>
                        <div class="col-6">
                            <small class="text-muted d-block">Series Count</small>
                            <span>{{ study.number_of_series }}</span>
                        </div>
                        <div class="col-6">
                            <small class="text-muted d-block">Images Count</small>
                            <span>{{ study.number_of_instances }}</span>
                        </div>
                        <div class="col-6">
                            <small class="text-muted d-block">Study Size</small>
                            <span>{{ study.study_size|filesizeformat }}</span>
                        </div>
                        <div class="col-6">
                            <small class="text-muted d-block">Image Quality</small>
                            <span class="badge {% if study.image_quality == 'EXCELLENT' %}bg-success{% elif study.image_quality == 'GOOD' %}bg-info{% elif study.image_quality == 'ADEQUATE' %}bg-warning{% else %}bg-danger{% endif %}">
                                {{ study.get_image_quality_display|default:"Not Assessed" }}
                            </span>
                        </div>
                    </div>
                    {% if study.equipment_info %}
                    <div class="mt-3">
                        <small class="text-muted d-block">Equipment</small>
                        <p class="mb-0">{{ study.manufacturer }} {{ study.model_name }}</p>
                        <small class="text-muted">Station: {{ study.station_name }}</small>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Providers -->
        <div class="col-lg-4 mb-4">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-user-md me-2"></i>Providers
                    </h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <small class="text-muted d-block">Referring Physician</small>
                        <div class="d-flex align-items-center">
                            <div class="avatar-circle bg-secondary text-white me-2" style="width: 32px; height: 32px; font-size: 12px;">
                                {{ study.referring_physician.first_name.0 }}{{ study.referring_physician.last_name.0 }}
                            </div>
                            <span>{{ study.referring_physician.get_full_name }}</span>
                        </div>
                    </div>
                    {% if study.radiologist %}
                    <div class="mb-3">
                        <small class="text-muted d-block">Radiologist</small>
                        <div class="d-flex align-items-center">
                            <div class="avatar-circle bg-primary text-white me-2" style="width: 32px; height: 32px; font-size: 12px;">
                                {{ study.radiologist.first_name.0 }}{{ study.radiologist.last_name.0 }}
                            </div>
                            <span>{{ study.radiologist.get_full_name }}</span>
                        </div>
                    </div>
                    {% endif %}
                    {% if study.encounter %}
                    <div>
                        <small class="text-muted d-block">Related Encounter</small>
                        <a href="{% url 'emr:encounter_detail' study.encounter.pk %}" class="text-decoration-none">
                            {{ study.encounter.encounter_type }} - {{ study.encounter.encounter_datetime|date:"M d, Y" }}
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Series and Images -->
    <div class="row">
        <div class="col-12 mb-4">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-images me-2"></i>Series and Images
                    </h5>
                    <button class="btn btn-outline-primary btn-sm" onclick="refreshSeries()">
                        <i class="fas fa-sync-alt"></i> Refresh
                    </button>
                </div>
                <div class="card-body">
                    {% if study.series.exists %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Series #</th>
                                    <th>Description</th>
                                    <th>Modality</th>
                                    <th>Images</th>
                                    <th>Size</th>
                                    <th>Quality</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for series in study.series.all %}
                                <tr>
                                    <td>{{ series.series_number }}</td>
                                    <td>{{ series.series_description|default:"No description" }}</td>
                                    <td>{{ series.get_modality_display }}</td>
                                    <td>{{ series.number_of_instances }}</td>
                                    <td>{{ series.series_size|filesizeformat }}</td>
                                    <td>
                                        <span class="badge {% if series.image_quality == 'EXCELLENT' %}bg-success{% elif series.image_quality == 'GOOD' %}bg-info{% else %}bg-warning{% endif %}">
                                            {{ series.get_image_quality_display|default:"Not Assessed" }}
                                        </span>
                                    </td>
                                    <td>
                                        <a href="{% url 'radiology:imaging_series_detail' series.pk %}" class="btn btn-sm btn-outline-primary">
                                            <i class="fas fa-eye"></i> View
                                        </a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="text-center py-4">
                        <i class="fas fa-images fa-3x text-muted mb-3"></i>
                        <p class="text-muted">No series available for this study.</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Report Section -->
    {% if study.report %}
    <div class="row">
        <div class="col-12 mb-4">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-file-medical me-2"></i>Radiology Report
                    </h5>
                    <div>
                        <span class="badge {% if study.report.status == 'SIGNED' %}bg-success{% elif study.report.status == 'DRAFT' %}bg-warning{% else %}bg-secondary{% endif %}">
                            {{ study.report.get_status_display }}
                        </span>
                        <a href="{% url 'radiology:radiology_report_detail' study.report.pk %}" class="btn btn-outline-primary btn-sm ms-2">
                            <i class="fas fa-external-link-alt"></i> View Full Report
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            {% if study.report.findings %}
                            <h6>Findings:</h6>
                            <p>{{ study.report.findings|truncatewords:50 }}</p>
                            {% endif %}
                            {% if study.report.impression %}
                            <h6>Impression:</h6>
                            <p>{{ study.report.impression|truncatewords:30 }}</p>
                            {% endif %}
                        </div>
                        <div class="col-md-4">
                            <small class="text-muted d-block">Radiologist</small>
                            <p>{{ study.report.radiologist.get_full_name }}</p>
                            {% if study.report.signed_datetime %}
                            <small class="text-muted d-block">Signed</small>
                            <p>{{ study.report.signed_datetime|date:"M d, Y g:i A" }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<script>
function refreshSeries() {
    location.reload();
}

function exportStudy() {
    // Implement DICOM export functionality
    alert('DICOM export functionality would be implemented here');
}
</script>
{% endblock %}