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

{% block title %}Blood Request 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>
.urgency-emergency {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

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

.request-urgent {
    background-color: #fff8e1;
    border-left: 4px solid #ff9800;
}

.request-emergency {
    background-color: #ffebee;
    border-left: 4px solid #f44336;
}
</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">Blood Requests</li>
</ol>
<!-- END breadcrumb -->

<!-- BEGIN page-header -->
<h1 class="page-header">Blood Request Management <small>manage transfusion requests</small></h1>
<!-- END page-header -->

<!-- BEGIN panel -->
<div class="panel panel-inverse">
    <div class="panel-heading">
        <h4 class="panel-title">Blood Transfusion Requests</h4>
        <div class="panel-heading-btn">
            <a href="{% url 'blood_bank:blood_request_create' %}" class="btn btn-primary btn-sm">
                <i class="fa fa-plus"></i> Create Request
            </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="urgency">Urgency</label>
                        <select class="form-select" name="urgency">
                            <option value="">All Urgencies</option>
                            {% for value, label in urgency_choices %}
                            <option value="{{ value }}" {% if urgency_filter == value %}selected{% endif %}>
                                {{ label }}
                            </option>
                            {% endfor %}
                        </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="Request #, Patient name" 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 Requests</h6>
                                <h3 class="mb-0">{{ page_obj.count }}</h3>
                            </div>
                            <div class="align-self-center">
                                <i class="fa fa-clipboard-list fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-warning text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6 class="card-title">Pending</h6>
                                <h3 class="mb-0" id="pendingCount">0</h3>
                            </div>
                            <div class="align-self-center">
                                <i class="fa fa-clock fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-danger text-white urgency-emergency">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6 class="card-title">Emergency</h6>
                                <h3 class="mb-0" id="emergencyCount">0</h3>
                            </div>
                            <div class="align-self-center">
                                <i class="fa fa-exclamation-triangle 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">Ready</h6>
                                <h3 class="mb-0" id="completedCount">0</h3>
                            </div>
                            <div class="align-self-center">
                                <i class="fa fa-check-circle fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END summary cards -->

        <!-- BEGIN table -->
        <div class="table-responsive">
            <table id="requestTable" class="table table-striped table-bordered align-middle">
                <thead>
                    <tr>
                        <th>Request #</th>
                        <th>Patient</th>
                        <th>Department</th>
                        <th>Component</th>
                        <th>Units</th>
                        <th>Blood Group</th>
                        <th>Urgency</th>
                        <th>Status</th>
                        <th>Request Date</th>
                        <th>Required By</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for blood_request in page_obj %}
                    <tr class="{% if blood_request.urgency == 'emergency' %}request-emergency{% elif blood_request.urgency == 'urgent' %}request-urgent{% elif blood_request.is_overdue %}request-overdue{% endif %}"
                        data-status="{{ blood_request.status }}" data-urgency="{{ blood_request.urgency }}">
                        <td>
                            <a href="{% url 'blood_bank:blood_request_detail' blood_request.id %}" class="text-decoration-none">
                                <strong>{{ blood_request.request_number }}</strong>
                            </a>
                        </td>
                        <td>
                            {{ blood_request.patient.full_name }}
                            <br><small class="text-muted">{{ blood_request.patient.patient_id }}</small>
                        </td>
                        <td>{{ blood_request.requesting_department.name }}</td>
                        <td>{{ blood_request.component_requested.get_name_display }}</td>
                        <td>
                            <span class="badge bg-info fs-6">{{ blood_request.units_requested }}</span>
                        </td>
                        <td>
                            <span class="badge bg-primary">{{ blood_request.patient_blood_group.display_name }}</span>
                        </td>
                        <td>
                            {% if blood_request.urgency == 'emergency' %}
                                <span class="badge bg-danger urgency-emergency">
                                    <i class="fa fa-exclamation-triangle"></i> {{ blood_request.get_urgency_display }}
                                </span>
                            {% elif blood_request.urgency == 'urgent' %}
                                <span class="badge bg-warning">
                                    <i class="fa fa-clock"></i> {{ blood_request.get_urgency_display }}
                                </span>
                            {% else %}
                                <span class="badge bg-secondary">{{ blood_request.get_urgency_display }}</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if blood_request.status == 'pending' %}
                                <span class="badge bg-warning">{{ blood_request.get_status_display }}</span>
                            {% elif blood_request.status == 'processing' %}
                                <span class="badge bg-info">{{ blood_request.get_status_display }}</span>
                            {% elif blood_request.status == 'ready' %}
                                <span class="badge bg-primary">{{ blood_request.get_status_display }}</span>
                            {% elif blood_request.status == 'issued' %}
                                <span class="badge bg-success">{{ blood_request.get_status_display }}</span>
                            {% elif blood_request.status == 'completed' %}
                                <span class="badge bg-success">{{ blood_request.get_status_display }}</span>
                            {% elif blood_request.status == 'cancelled' %}
                                <span class="badge bg-danger">{{ blood_request.get_status_display }}</span>
                            {% endif %}
                        </td>
                        <td>{{ blood_request.request_date|date:"M d, Y H:i" }}</td>
                        <td>
                            {{ blood_request.required_by|date:"M d, Y H:i" }}
                            {% if blood_request.is_overdue %}
                                <br><span class="badge bg-danger">Overdue</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="btn-group" role="group">
                                <a href="{% url 'blood_bank:blood_request_detail' blood_request.id %}" 
                                   class="btn btn-outline-primary btn-sm" title="View Details">
                                    <i class="fa fa-eye"></i>
                                </a>
                                {% if blood_request.status == 'pending' or blood_request.status == 'processing' %}
                                <a href="{% url 'blood_bank:blood_issue_create' blood_request.id %}" 
                                   class="btn btn-outline-success btn-sm" title="Issue Blood">
                                    <i class="fa fa-share"></i>
                                </a>
                                {% endif %}
                                {% if blood_request.status == 'pending' %}
                                <button type="button" class="btn btn-outline-danger btn-sm" 
                                        onclick="cancelRequest({{ blood_request.id }})" title="Cancel Request">
                                    <i class="fa fa-times"></i>
                                </button>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="11" class="text-center">
                            <div class="py-4">
                                <i class="fa fa-clipboard-list fa-3x text-muted mb-3"></i>
                                <h5 class="text-muted">No blood requests found</h5>
                                <p class="text-muted">Try adjusting your search criteria or create a new request.</p>
                                <a href="{% url 'blood_bank:blood_request_create' %}" class="btn btn-primary">
                                    <i class="fa fa-plus"></i> Create Request
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <!-- END table -->

        <!-- BEGIN pagination -->
        {% if page_obj.has_other_pages %}
        <nav aria-label="Request pagination">
            <ul class="pagination justify-content-center">
                {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1{% if status_filter %}&status={{ status_filter }}{% endif %}{% if urgency_filter %}&urgency={{ urgency_filter }}{% endif %}">
                            <i class="fa fa-angle-double-left"></i>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if urgency_filter %}&urgency={{ urgency_filter }}{% endif %}">
                            <i class="fa fa-angle-left"></i>
                        </a>
                    </li>
                {% endif %}

                {% for num in page_obj.paginator.page_range %}
                    {% if page_obj.number == num %}
                        <li class="page-item active">
                            <span class="page-link">{{ num }}</span>
                        </li>
                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ num }}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if urgency_filter %}&urgency={{ urgency_filter }}{% endif %}">{{ num }}</a>
                        </li>
                    {% endif %}
                {% endfor %}

                {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if urgency_filter %}&urgency={{ urgency_filter }}{% endif %}">
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if urgency_filter %}&urgency={{ urgency_filter }}{% endif %}">
                            <i class="fa fa-angle-double-right"></i>
                        </a>
                    </li>
                {% endif %}
            </ul>
        </nav>
        {% endif %}
        <!-- END pagination -->

        <!-- BEGIN summary -->
        <div class="row mt-3">
            <div class="col-md-6">
                <p class="text-muted">
                    Showing {{ page_obj.start_index }} to {{ page_obj.end_index }} of {{ page_obj.paginator.count }} requests
                </p>
            </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="showUrgencyReport()">
                        <i class="fa fa-chart-bar"></i> Urgency Report
                    </button>
                </div>
            </div>
        </div>
        <!-- END summary -->
    </div>
</div>
<!-- END panel -->
{% 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() {
    // Initialize DataTable
    $('#requestTable').DataTable({
        responsive: true,
        pageLength: 25,
        order: [[8, 'desc']], // Sort by request date
        columnDefs: [
            { orderable: false, targets: [10] } // Actions column
        ]
    });

    // Calculate summary statistics
    calculateSummaryStats();

    // Auto-refresh for emergency requests
    setInterval(function() {
        if ($('.urgency-emergency').length > 0) {
            location.reload();
        }
    }, 60000); // Refresh every minute if emergency requests exist
});

function calculateSummaryStats() {
    var pending = 0;
    var emergency = 0;
    var completed = 0;
    
    $('tr[data-status]').each(function() {
        var status = $(this).data('status');
        var urgency = $(this).data('urgency');
        
        if (status === 'pending') {
            pending++;
        }
        if (urgency === 'emergency') {
            emergency++;
        }
        if (status === 'ready') {
            completed++;
        }
    });
    
    $('#pendingCount').text(pending);
    $('#emergencyCount').text(emergency);
    $('#completedCount').text(completed);
}

function cancelRequest(requestId) {
    Swal.fire({
        title: 'Cancel Blood Request?',
        text: 'This action cannot be undone. The request will be marked as cancelled.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Yes, Cancel Request',
        cancelButtonText: 'Keep Request'
    }).then((result) => {
        if (result.isConfirmed) {
            // Here you would make an AJAX call to cancel the request
            Swal.fire({
                icon: 'success',
                title: 'Request Cancelled',
                text: 'The blood request has been cancelled.',
                confirmButtonText: 'OK'
            }).then(() => {
                location.reload();
            });
        }
    });
}

function exportToCSV() {
    var csv = [];
    var rows = document.querySelectorAll("#requestTable 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 = "blood_requests.csv";
    downloadLink.href = window.URL.createObjectURL(csvFile);
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);
    downloadLink.click();
}

function showUrgencyReport() {
    var urgencyData = {};
    
    $('tr[data-urgency]').each(function() {
        var urgency = $(this).data('urgency');
        urgencyData[urgency] = (urgencyData[urgency] || 0) + 1;
    });
    
    var reportHtml = '<table class="table table-sm"><thead><tr><th>Urgency Level</th><th>Count</th><th>Percentage</th></tr></thead><tbody>';
    var total = Object.values(urgencyData).reduce((a, b) => a + b, 0);
    
    Object.keys(urgencyData).forEach(function(urgency) {
        var count = urgencyData[urgency];
        var percentage = ((count / total) * 100).toFixed(1);
        var urgencyLabel = urgency.charAt(0).toUpperCase() + urgency.slice(1);
        
        reportHtml += `<tr><td>${urgencyLabel}</td><td>${count}</td><td>${percentage}%</td></tr>`;
    });
    
    reportHtml += '</tbody></table>';
    
    Swal.fire({
        title: 'Blood Request Urgency Report',
        html: reportHtml,
        width: '500px',
        confirmButtonText: 'Close'
    });
}
</script>
{% endblock %}