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

{% block title %}Transfusion Management{% 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" />
<style>
.transfusion-active {
    background-color: #e8f5e8;
    border-left: 4px solid #28a745;
}

.transfusion-completed {
    background-color: #f8f9fa;
}

.transfusion-adverse {
    background-color: #fff5f5;
    border-left: 4px solid #dc3545;
}

.vital-signs {
    font-size: 0.9em;
}

.vital-normal {
    color: #28a745;
}

.vital-abnormal {
    color: #dc3545;
    font-weight: bold;
}

.reaction-indicator {
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}
</style>
{% 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"><a href="{% url 'blood_bank:dashboard' %}">Blood Bank</a></li>
    <li class="breadcrumb-item active">Transfusions</li>
</ol>
<!-- END breadcrumb -->

<!-- BEGIN page-header -->
<h1 class="page-header">Transfusion Management <small>monitor blood transfusions</small></h1>
<!-- END page-header -->

<!-- BEGIN panel -->
<div class="panel panel-inverse">
    <div class="panel-heading">
        <h4 class="panel-title">Blood Transfusions</h4>
        <div class="panel-heading-btn">
            <a href="{% url 'blood_bank:transfusion_create' %}" class="btn btn-primary btn-sm">
                <i class="fa fa-plus"></i> Start Transfusion
            </a>
        </div>
    </div>
    <div class="panel-body">
        <!-- BEGIN filter form -->
        <form method="get" class="mb-4">
            <div class="row">
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="status">Status</label>
                        <select class="form-select" name="status">
                            <option value="">All Statuses</option>
                            {% for value, label in status_choices %}
                            <option value="{{ value }}" {% if status_filter == value %}selected{% endif %}>
                                {{ label }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="date_range">Date Range</label>
                        <select class="form-select" name="date_range">
                            <option value="">All Dates</option>
                            <option value="today" {% if date_filter == 'today' %}selected{% endif %}>Today</option>
                            <option value="week" {% if date_filter == 'week' %}selected{% endif %}>This Week</option>
                            <option value="month" {% if date_filter == 'month' %}selected{% endif %}>This Month</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="search">Search</label>
                        <input type="text" class="form-control" name="search" 
                               placeholder="Patient name, unit number" value="{{ request.GET.search }}">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>&nbsp;</label>
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary">
                                <i class="fa fa-search"></i> Filter
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <!-- END filter form -->

        <!-- BEGIN summary cards -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card bg-primary text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6 class="card-title">Total Transfusions</h6>
                                <h3 class="mb-0">{{ page_obj.paginator.count }}</h3>
                            </div>
                            <div class="align-self-center">
                                <i class="fa fa-heartbeat fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-success text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6 class="card-title">Active</h6>
                                <h3 class="mb-0" id="activeCount">0</h3>
                            </div>
                            <div class="align-self-center">
                                <i class="fa fa-play fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-info text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6 class="card-title">Completed</h6>
                                <h3 class="mb-0" id="completedCount">0</h3>
                            </div>
                            <div class="align-self-center">
                                <i class="fa fa-check fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-danger text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6 class="card-title">With Reactions</h6>
                                <h3 class="mb-0" id="reactionCount">0</h3>
                            </div>
                            <div class="align-self-center">
                                <i class="fa fa-exclamation-triangle fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END summary cards -->

        <!-- BEGIN table -->
        <div class="table-responsive">
            <table class="table table-striped table-bordered align-middle">
                <thead>
                    <tr>
                        <th>Patient</th>
                        <th>Blood Unit</th>
                        <th>Component</th>
                        <th>Start Time</th>
                        <th>Duration</th>
                        <th>Volume</th>
                        <th>Status</th>
                        <th>Vital Signs</th>
                        <th>Reactions</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for transfusion in page_obj %}
                    <tr class="{% if transfusion.status == 'in_progress' %}transfusion-active{% elif transfusion.status == 'completed' %}transfusion-completed{% elif transfusion.has_adverse_reactions %}transfusion-adverse{% endif %}"
                        data-status="{{ transfusion.status }}" data-has-reactions="{{ transfusion.has_adverse_reactions|yesno:'true,false' }}">
                        <td>
                            <a href="{% url 'patients:patient_detail' transfusion.patient.id %}" class="text-decoration-none">
                                {{ transfusion.patient.full_name }}
                            </a>
                            <br><small class="text-muted">{{ transfusion.patient.patient_id }}</small>
                        </td>
                        <td>
                            <a href="{% url 'blood_bank:blood_unit_detail' transfusion.blood_unit.id %}" class="text-decoration-none">
                                {{ transfusion.blood_unit.unit_number }}
                            </a>
                            <br><span class="badge bg-primary">{{ transfusion.blood_unit.blood_group.display_name }}</span>
                        </td>
                        <td>{{ transfusion.blood_unit.component.get_name_display }}</td>
                        <td>{{ transfusion.start_time|date:"M d, Y H:i" }}</td>
                        <td>
                            {% if transfusion.end_time %}
                                {{ transfusion.duration_minutes }} min
                            {% elif transfusion.status == 'in_progress' %}
                                <span class="text-success">{{ transfusion.elapsed_minutes }} min</span>
                            {% else %}
                                -
                            {% endif %}
                        </td>
                        <td>
                            {{ transfusion.volume_transfused|default:"-" }} / {{ transfusion.blood_unit.volume_ml }} ml
                            {% if transfusion.status == 'in_progress' %}
                                <br><div class="progress" style="height: 5px;">
                                    <div class="progress-bar" style="width: {{ transfusion.progress_percentage }}%"></div>
                                </div>
                            {% endif %}
                        </td>
                        <td>
                            {% if transfusion.status == 'in_progress' %}
                                <span class="badge bg-success">{{ transfusion.get_status_display }}</span>
                            {% elif transfusion.status == 'completed' %}
                                <span class="badge bg-primary">{{ transfusion.get_status_display }}</span>
                            {% elif transfusion.status == 'stopped' %}
                                <span class="badge bg-warning">{{ transfusion.get_status_display }}</span>
                            {% elif transfusion.status == 'cancelled' %}
                                <span class="badge bg-danger">{{ transfusion.get_status_display }}</span>
                            {% endif %}
                        </td>
                        <td class="vital-signs">
                            {% if transfusion.latest_vitals %}
                                <div class="{% if transfusion.latest_vitals.is_normal %}vital-normal{% else %}vital-abnormal{% endif %}">
                                    BP: {{ transfusion.latest_vitals.blood_pressure }}<br>
                                    HR: {{ transfusion.latest_vitals.heart_rate }}<br>
                                    Temp: {{ transfusion.latest_vitals.temperature }}°C
                                </div>
                            {% else %}
                                <span class="text-muted">No vitals</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if transfusion.has_adverse_reactions %}
                                <span class="badge bg-danger reaction-indicator">
                                    <i class="fa fa-exclamation-triangle"></i> {{ transfusion.adverse_reaction_count }}
                                </span>
                            {% else %}
                                <span class="badge bg-success">None</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="btn-group" role="group">
                                <a href="{% url 'blood_bank:transfusion_detail' transfusion.id %}" 
                                   class="btn btn-outline-primary btn-sm" title="View Details">
                                    <i class="fa fa-eye"></i>
                                </a>
                                {% if transfusion.status == 'in_progress' %}
                                <button type="button" class="btn btn-outline-info btn-sm" 
                                        onclick="recordVitals({{ transfusion.id }})" title="Record Vitals">
                                    <i class="fa fa-heartbeat"></i>
                                </button>
                                <button type="button" class="btn btn-outline-warning btn-sm" 
                                        onclick="stopTransfusion({{ transfusion.id }})" title="Stop Transfusion">
                                    <i class="fa fa-stop"></i>
                                </button>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="10" class="text-center">
                            <div class="py-4">
                                <i class="fa fa-heartbeat fa-3x text-muted mb-3"></i>
                                <h5 class="text-muted">No transfusions found</h5>
                                <p class="text-muted">Try adjusting your search criteria or start a new transfusion.</p>
                                <a href="{% url 'blood_bank:transfusion_create' %}" class="btn btn-primary">
                                    <i class="fa fa-plus"></i> Start Transfusion
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <!-- END table -->

        <!-- BEGIN pagination -->
        {% if is_paginated %}
            {% include 'partial/pagination.html' %}
    {% endif %}
        <!-- END pagination -->

        <!-- BEGIN summary -->
{#        <div class="row mt-3">#}
{#            <div class="col-md-6">#}
{##}
{#            </div>#}
{#            <div class="col-md-6 text-end">#}
{#                <div class="btn-group" role="group">#}
{#                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="window.print()">#}
{#                        <i class="fa fa-print"></i> Print#}
{#                    </button>#}
{#                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="exportToCSV()">#}
{#                        <i class="fa fa-download"></i> Export#}
{#                    </button>#}
{#                    <button type="button" class="btn btn-outline-info btn-sm" onclick="showTransfusionReport()">#}
{#                        <i class="fa fa-chart-bar"></i> Report#}
{#                    </button>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
        <!-- END summary -->
    </div>
</div>
<!-- END panel -->

<!-- BEGIN vital signs modal -->
<div class="modal fade" id="vitalsModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Record Vital Signs</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="vitalsForm">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="bloodPressure" class="form-label">Blood Pressure</label>
                                <input type="text" class="form-control" id="bloodPressure" placeholder="120/80">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="heartRate" class="form-label">Heart Rate (bpm)</label>
                                <input type="number" class="form-control" id="heartRate" placeholder="72">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="temperature" class="form-label">Temperature (°C)</label>
                                <input type="number" step="0.1" class="form-control" id="temperature" placeholder="36.5">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="respiratoryRate" class="form-label">Respiratory Rate</label>
                                <input type="number" class="form-control" id="respiratoryRate" placeholder="16">
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="oxygenSaturation" class="form-label">Oxygen Saturation (%)</label>
                        <input type="number" class="form-control" id="oxygenSaturation" placeholder="98">
                    </div>
                    <div class="mb-3">
                        <label for="vitalsNotes" class="form-label">Notes</label>
                        <textarea class="form-control" id="vitalsNotes" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="saveVitals()">Save Vitals</button>
            </div>
        </div>
    </div>
</div>
<!-- END vital signs modal -->
<!-- Stop Transfusion Modal -->
<div class="modal fade" id="stopTransfusionModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-warning-subtle">
        <h5 class="modal-title">Stop Transfusion?</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <div class="modal-body">
        <div id="stopTransfusionAlert" class="alert d-none" role="alert"></div>
        <p>Are you sure you want to stop this transfusion?</p>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Continue Transfusion
        </button>
        <button type="button" class="btn btn-danger" id="confirmStopTransfusionBtn">
          <span class="spinner-border spinner-border-sm me-2 d-none" id="stopSpinner" role="status" aria-hidden="true"></span>
          Yes, Stop Transfusion
        </button>
      </div>
    </div>
  </div>
</div>
{% 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 src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
$(document).ready(function() {
    // Initialize DataTable


    // Calculate summary statistics
    calculateSummaryStats();

    // Auto-refresh for active transfusions
    setInterval(function() {
        if ($('.transfusion-active').length > 0) {
            location.reload();
        }
    }, 30000); // Refresh every 30 seconds if active transfusions exist
});

function calculateSummaryStats() {
    var active = 0;
    var completed = 0;
    var withReactions = 0;
    
    $('tr[data-status]').each(function() {
        var status = $(this).data('status');
        var hasReactions = $(this).data('has-reactions') === 'true';
        
        if (status === 'in_progress') {
            active++;
        }
        if (status === 'completed') {
            completed++;
        }
        if (hasReactions) {
            withReactions++;
        }
    });
    
    $('#activeCount').text(active);
    $('#completedCount').text(completed);
    $('#reactionCount').text(withReactions);
}

var currentTransfusionId = null;

function recordVitals(transfusionId) {
    currentTransfusionId = transfusionId;
    $('#vitalsModal').modal('show');
}

function saveVitals() {
    var vitalsData = {
        blood_pressure: $('#bloodPressure').val(),
        heart_rate: $('#heartRate').val(),
        temperature: $('#temperature').val(),
        respiratory_rate: $('#respiratoryRate').val(),
        oxygen_saturation: $('#oxygenSaturation').val(),
        notes: $('#vitalsNotes').val()
    };
    
    // Validate required fields
    if (!vitalsData.blood_pressure || !vitalsData.heart_rate || !vitalsData.temperature) {
        Swal.fire({
            icon: 'error',
            title: 'Missing Information',
            text: 'Please fill in blood pressure, heart rate, and temperature.',
            confirmButtonText: 'OK'
        });
        return;
    }
    
    // Here you would make an AJAX call to save the vitals
    Swal.fire({
        icon: 'success',
        title: 'Vitals Recorded',
        text: 'Vital signs have been recorded successfully.',
        confirmButtonText: 'OK'
    }).then(() => {
        $('#vitalsModal').modal('hide');
        location.reload();
    });
}

function stopTransfusion(transfusionId) {
    Swal.fire({
        title: 'Stop Transfusion?',
        text: 'Are you sure you want to stop this transfusion?',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Yes, Stop Transfusion',
        cancelButtonText: 'Continue Transfusion'
    }).then((result) => {
        if (result.isConfirmed) {
            // Here you would make an AJAX call to stop the transfusion
            Swal.fire({
                icon: 'success',
                title: 'Transfusion Stopped',
                text: 'The transfusion has been stopped.',
                confirmButtonText: 'OK'
            }).then(() => {
                location.reload();
            });
        }
    });
}

function exportToCSV() {
    var csv = [];
    var rows = document.querySelectorAll("#transfusionTable tr");
    
    for (var i = 0; i < rows.length; i++) {
        var row = [], cols = rows[i].querySelectorAll("td, th");
        
        for (var j = 0; j < cols.length - 1; j++) { // Exclude actions column
            row.push(cols[j].innerText.replace(/,/g, ';'));
        }
        
        csv.push(row.join(","));
    }
    
    var csvFile = new Blob([csv.join("\n")], {type: "text/csv"});
    var downloadLink = document.createElement("a");
    downloadLink.download = "transfusions.csv";
    downloadLink.href = window.URL.createObjectURL(csvFile);
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);
    downloadLink.click();
}

function showTransfusionReport() {
    var statusData = {};
    
    $('tr[data-status]').each(function() {
        var status = $(this).data('status');
        statusData[status] = (statusData[status] || 0) + 1;
    });
    
    var reportHtml = '<table class="table table-sm"><thead><tr><th>Status</th><th>Count</th><th>Percentage</th></tr></thead><tbody>';
    var total = Object.values(statusData).reduce((a, b) => a + b, 0);
    
    Object.keys(statusData).forEach(function(status) {
        var count = statusData[status];
        var percentage = ((count / total) * 100).toFixed(1);
        var statusLabel = status.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
        
        reportHtml += `<tr><td>${statusLabel}</td><td>${count}</td><td>${percentage}%</td></tr>`;
    });
    
    reportHtml += '</tbody></table>';
    
    Swal.fire({
        title: 'Transfusion Status Report',
        html: reportHtml,
        width: '500px',
        confirmButtonText: 'Close'
    });
}
</script>
{% endblock %}