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

{% block title %}Imaging Orders - Radiology{% endblock %}

{% block content %}
<div class="content">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="row">
            <div class="col-12">
                <div class="page-header">
                    <div class="page-title">
                        <h4>Imaging Orders Management</h4>
                        <h6>Manage and track radiology imaging orders and requests</h6>
                    </div>
                    <div class="page-btn">
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newOrderModal">
                                <i class="fa fa-plus"></i> New Order
                            </button>
                            <button type="button" class="btn btn-info" onclick="refreshOrders()">
                                <i class="fa fa-sync"></i> Refresh
                            </button>
                            <button type="button" class="btn btn-success" onclick="exportOrders()">
                                <i class="fa fa-download"></i> Export
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Order Statistics -->
        <div class="row">
            <div class="col-xl-3 col-sm-6 col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="dash-widget-header">
                            <span class="dash-widget-icon text-primary border-primary">
                                <i class="fa fa-file-medical"></i>
                            </span>
                            <div class="dash-count">
                                <h3>{{ order_stats.pending|default:24 }}</h3>
                            </div>
                        </div>
                        <div class="dash-widget-info">
                            <h6 class="text-muted">Pending Orders</h6>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-primary" style="width: 60%"></div>
                            </div>
                            <small class="text-primary">
                                <i class="fa fa-clock"></i> Avg wait: 45 min
                            </small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="dash-widget-header">
                            <span class="dash-widget-icon text-warning border-warning">
                                <i class="fa fa-hourglass-half"></i>
                            </span>
                            <div class="dash-count">
                                <h3>{{ order_stats.in_progress|default:8 }}</h3>
                            </div>
                        </div>
                        <div class="dash-widget-info">
                            <h6 class="text-muted">In Progress</h6>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-warning" style="width: 35%"></div>
                            </div>
                            <small class="text-warning">
                                <i class="fa fa-camera"></i> Currently imaging
                            </small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="dash-widget-header">
                            <span class="dash-widget-icon text-info border-info">
                                <i class="fa fa-search"></i>
                            </span>
                            <div class="dash-count">
                                <h3>{{ order_stats.reading|default:12 }}</h3>
                            </div>
                        </div>
                        <div class="dash-widget-info">
                            <h6 class="text-muted">Awaiting Reading</h6>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-info" style="width: 50%"></div>
                            </div>
                            <small class="text-info">
                                <i class="fa fa-user-md"></i> Radiologist review
                            </small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="dash-widget-header">
                            <span class="dash-widget-icon text-success border-success">
                                <i class="fa fa-check-circle"></i>
                            </span>
                            <div class="dash-count">
                                <h3>{{ order_stats.completed|default:156 }}</h3>
                            </div>
                        </div>
                        <div class="dash-widget-info">
                            <h6 class="text-muted">Completed Today</h6>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-success" style="width: 85%"></div>
                            </div>
                            <small class="text-success">
                                <i class="fa fa-arrow-up"></i> +12% from yesterday
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Order Filters -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Order Filters</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-2">
                                <label class="form-label">Status</label>
                                <select class="form-select" id="statusFilter">
                                    <option value="">All Statuses</option>
                                    <option value="pending">Pending</option>
                                    <option value="scheduled">Scheduled</option>
                                    <option value="in_progress">In Progress</option>
                                    <option value="completed">Completed</option>
                                    <option value="cancelled">Cancelled</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Priority</label>
                                <select class="form-select" id="priorityFilter">
                                    <option value="">All Priorities</option>
                                    <option value="stat">STAT</option>
                                    <option value="urgent">Urgent</option>
                                    <option value="routine">Routine</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Modality</label>
                                <select class="form-select" id="modalityFilter">
                                    <option value="">All Modalities</option>
                                    <option value="xray">X-Ray</option>
                                    <option value="ct">CT Scan</option>
                                    <option value="mri">MRI</option>
                                    <option value="ultrasound">Ultrasound</option>
                                    <option value="mammography">Mammography</option>
                                    <option value="nuclear">Nuclear Medicine</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Date Range</label>
                                <select class="form-select" id="dateFilter">
                                    <option value="today">Today</option>
                                    <option value="tomorrow">Tomorrow</option>
                                    <option value="week">This Week</option>
                                    <option value="month">This Month</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Search</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="searchInput" placeholder="Patient name, MRN, or order ID...">
                                    <button class="btn btn-outline-primary" type="button" onclick="searchOrders()">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">&nbsp;</label>
                                <button class="btn btn-outline-secondary d-block" onclick="clearFilters()">
                                    <i class="fa fa-times"></i> Clear
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Orders Table -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Imaging Orders</h5>
                        <div class="card-tools">
                            <div class="btn-group">
                                <button type="button" class="btn btn-sm btn-outline-primary active" data-view="all">All</button>
                                <button type="button" class="btn btn-sm btn-outline-primary" data-view="urgent">Urgent</button>
                                <button type="button" class="btn btn-sm btn-outline-primary" data-view="today">Today</button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped" id="ordersTable">
                                <thead>
                                    <tr>
                                        <th>Order ID</th>
                                        <th>Patient</th>
                                        <th>Study Type</th>
                                        <th>Body Part</th>
                                        <th>Priority</th>
                                        <th>Ordered By</th>
                                        <th>Order Date</th>
                                        <th>Scheduled</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><strong>RAD-2024-001</strong></td>
                                        <td>
                                            <div>
                                                <strong>John Smith</strong><br>
                                                <small class="text-muted">MRN: 123456</small>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge bg-primary">CT Scan</span><br>
                                            <small class="text-muted">With Contrast</small>
                                        </td>
                                        <td>Chest</td>
                                        <td><span class="badge bg-danger">STAT</span></td>
                                        <td>Dr. Johnson</td>
                                        <td>Jan 15, 2024<br><small class="text-muted">14:30</small></td>
                                        <td>Jan 15, 2024<br><small class="text-muted">15:00</small></td>
                                        <td><span class="badge bg-warning">In Progress</span></td>
                                        <td>
                                            <div class="btn-group">
                                                <button class="btn btn-sm btn-outline-primary" onclick="viewOrder('RAD-2024-001')">
                                                    <i class="fa fa-eye"></i>
                                                </button>
                                                <button class="btn btn-sm btn-outline-warning" onclick="editOrder('RAD-2024-001')">
                                                    <i class="fa fa-edit"></i>
                                                </button>
                                                <button class="btn btn-sm btn-outline-success" onclick="updateStatus('RAD-2024-001')">
                                                    <i class="fa fa-check"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><strong>RAD-2024-002</strong></td>
                                        <td>
                                            <div>
                                                <strong>Mary Wilson</strong><br>
                                                <small class="text-muted">MRN: 789012</small>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge bg-info">X-Ray</span><br>
                                            <small class="text-muted">2 Views</small>
                                        </td>
                                        <td>Left Knee</td>
                                        <td><span class="badge bg-warning">Urgent</span></td>
                                        <td>Dr. Chen</td>
                                        <td>Jan 15, 2024<br><small class="text-muted">13:45</small></td>
                                        <td>Jan 15, 2024<br><small class="text-muted">16:30</small></td>
                                        <td><span class="badge bg-primary">Scheduled</span></td>
                                        <td>
                                            <div class="btn-group">
                                                <button class="btn btn-sm btn-outline-primary" onclick="viewOrder('RAD-2024-002')">
                                                    <i class="fa fa-eye"></i>
                                                </button>
                                                <button class="btn btn-sm btn-outline-info" onclick="rescheduleOrder('RAD-2024-002')">
                                                    <i class="fa fa-calendar"></i>
                                                </button>
                                                <button class="btn btn-sm btn-outline-success" onclick="startImaging('RAD-2024-002')">
                                                    <i class="fa fa-play"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><strong>RAD-2024-003</strong></td>
                                        <td>
                                            <div>
                                                <strong>Robert Davis</strong><br>
                                                <small class="text-muted">MRN: 345678</small>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge bg-secondary">MRI</span><br>
                                            <small class="text-muted">Without Contrast</small>
                                        </td>
                                        <td>Brain</td>
                                        <td><span class="badge bg-success">Routine</span></td>
                                        <td>Dr. Martinez</td>
                                        <td>Jan 15, 2024<br><small class="text-muted">12:15</small></td>
                                        <td>Jan 16, 2024<br><small class="text-muted">09:00</small></td>
                                        <td><span class="badge bg-info">Awaiting Reading</span></td>
                                        <td>
                                            <div class="btn-group">
                                                <button class="btn btn-sm btn-outline-primary" onclick="viewOrder('RAD-2024-003')">
                                                    <i class="fa fa-eye"></i>
                                                </button>
                                                <button class="btn btn-sm btn-outline-info" onclick="viewImages('RAD-2024-003')">
                                                    <i class="fa fa-images"></i>
                                                </button>
                                                <button class="btn btn-sm btn-outline-success" onclick="assignRadiologist('RAD-2024-003')">
                                                    <i class="fa fa-user-md"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><strong>RAD-2024-004</strong></td>
                                        <td>
                                            <div>
                                                <strong>Lisa Anderson</strong><br>
                                                <small class="text-muted">MRN: 901234</small>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge bg-warning">Ultrasound</span><br>
                                            <small class="text-muted">Doppler</small>
                                        </td>
                                        <td>Abdomen</td>
                                        <td><span class="badge bg-success">Routine</span></td>
                                        <td>Dr. Thompson</td>
                                        <td>Jan 15, 2024<br><small class="text-muted">11:30</small></td>
                                        <td>Not Scheduled</td>
                                        <td><span class="badge bg-secondary">Pending</span></td>
                                        <td>
                                            <div class="btn-group">
                                                <button class="btn btn-sm btn-outline-primary" onclick="viewOrder('RAD-2024-004')">
                                                    <i class="fa fa-eye"></i>
                                                </button>
                                                <button class="btn btn-sm btn-outline-success" onclick="scheduleOrder('RAD-2024-004')">
                                                    <i class="fa fa-calendar-plus"></i>
                                                </button>
                                                <button class="btn btn-sm btn-outline-danger" onclick="cancelOrder('RAD-2024-004')">
                                                    <i class="fa fa-times"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- Pagination -->
                        <nav aria-label="Orders pagination">
                            <ul class="pagination justify-content-center">
                                <li class="page-item disabled">
                                    <a class="page-link" href="#" tabindex="-1">Previous</a>
                                </li>
                                <li class="page-item active">
                                    <a class="page-link" href="#">1</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="#">2</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="#">3</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="#">Next</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>

        <!-- Order Workflow -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Order Workflow Status</h5>
                    </div>
                    <div class="card-body">
                        <div class="workflow-steps">
                            <div class="row">
                                <div class="col-md-2">
                                    <div class="workflow-step">
                                        <div class="step-icon bg-primary text-white">
                                            <i class="fa fa-file-medical"></i>
                                        </div>
                                        <h6>Ordered</h6>
                                        <span class="badge bg-primary">{{ workflow.ordered|default:15 }}</span>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="workflow-step">
                                        <div class="step-icon bg-info text-white">
                                            <i class="fa fa-calendar-check"></i>
                                        </div>
                                        <h6>Scheduled</h6>
                                        <span class="badge bg-info">{{ workflow.scheduled|default:12 }}</span>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="workflow-step">
                                        <div class="step-icon bg-warning text-white">
                                            <i class="fa fa-camera"></i>
                                        </div>
                                        <h6>Imaging</h6>
                                        <span class="badge bg-warning">{{ workflow.imaging|default:8 }}</span>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="workflow-step">
                                        <div class="step-icon bg-secondary text-white">
                                            <i class="fa fa-search"></i>
                                        </div>
                                        <h6>Reading</h6>
                                        <span class="badge bg-secondary">{{ workflow.reading|default:6 }}</span>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="workflow-step">
                                        <div class="step-icon bg-dark text-white">
                                            <i class="fa fa-file-alt"></i>
                                        </div>
                                        <h6>Reporting</h6>
                                        <span class="badge bg-dark">{{ workflow.reporting|default:4 }}</span>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="workflow-step">
                                        <div class="step-icon bg-success text-white">
                                            <i class="fa fa-check-circle"></i>
                                        </div>
                                        <h6>Complete</h6>
                                        <span class="badge bg-success">{{ workflow.complete|default:156 }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- New Order Modal -->
<div class="modal fade" id="newOrderModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Create New Imaging Order</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="newOrderForm">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Patient *</label>
                                <div class="input-group">
                                    <input type="text" name="patient_search" class="form-control" 
                                           placeholder="Search by name or MRN..." required>
                                    <button type="button" class="btn btn-outline-primary" onclick="searchPatients()">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </div>
                                <input type="hidden" name="patient_id" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Ordering Physician *</label>
                                <select name="ordering_physician" class="form-select" required>
                                    <option value="">Select physician...</option>
                                    <option value="dr_johnson">Dr. Johnson - Emergency</option>
                                    <option value="dr_chen">Dr. Chen - Orthopedics</option>
                                    <option value="dr_martinez">Dr. Martinez - Neurology</option>
                                    <option value="dr_thompson">Dr. Thompson - Internal Medicine</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Study Type *</label>
                                <select name="study_type" class="form-select" required onchange="updateBodyParts()">
                                    <option value="">Select study type...</option>
                                    <option value="xray">X-Ray</option>
                                    <option value="ct">CT Scan</option>
                                    <option value="mri">MRI</option>
                                    <option value="ultrasound">Ultrasound</option>
                                    <option value="mammography">Mammography</option>
                                    <option value="nuclear">Nuclear Medicine</option>
                                    <option value="fluoroscopy">Fluoroscopy</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Body Part/Region *</label>
                                <select name="body_part" class="form-select" required>
                                    <option value="">Select body part...</option>
                                    <!-- Options will be populated based on study type -->
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Priority *</label>
                                <select name="priority" class="form-select" required>
                                    <option value="routine">Routine</option>
                                    <option value="urgent">Urgent</option>
                                    <option value="stat">STAT</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Contrast</label>
                                <select name="contrast" class="form-select">
                                    <option value="none">No Contrast</option>
                                    <option value="with_contrast">With Contrast</option>
                                    <option value="without_and_with">Without and With Contrast</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Clinical Indication *</label>
                        <textarea name="clinical_indication" class="form-control" rows="3" 
                                  placeholder="Describe the clinical reason for this imaging study..." required></textarea>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Special Instructions</label>
                        <textarea name="special_instructions" class="form-control" rows="2" 
                                  placeholder="Any special instructions for the technologist or radiologist..."></textarea>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Preferred Date</label>
                                <input type="date" name="preferred_date" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Preferred Time</label>
                                <select name="preferred_time" class="form-select">
                                    <option value="">No preference</option>
                                    <option value="morning">Morning (8:00 AM - 12:00 PM)</option>
                                    <option value="afternoon">Afternoon (12:00 PM - 5:00 PM)</option>
                                    <option value="evening">Evening (5:00 PM - 8:00 PM)</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="pregnancy_check" id="pregnancyCheck">
                                <label class="form-check-label" for="pregnancyCheck">
                                    Pregnancy status verified (for female patients)
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="allergy_check" id="allergyCheck">
                                <label class="form-check-label" for="allergyCheck">
                                    Contrast allergies checked
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Create Order</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Set minimum date for preferred date
    const today = new Date().toISOString().split('T')[0];
    document.querySelector('input[name="preferred_date"]').min = today;

    // Form submission handler
    document.getElementById('newOrderForm').addEventListener('submit', function(e) {
        e.preventDefault();
        handleNewOrder();
    });

    // Filter change handlers
    document.getElementById('statusFilter').addEventListener('change', applyFilters);
    document.getElementById('priorityFilter').addEventListener('change', applyFilters);
    document.getElementById('modalityFilter').addEventListener('change', applyFilters);
    document.getElementById('dateFilter').addEventListener('change', applyFilters);

    // View toggle handlers
    const viewButtons = document.querySelectorAll('[data-view]');
    viewButtons.forEach(button => {
        button.addEventListener('click', function() {
            const view = this.getAttribute('data-view');
            toggleView(view);
            
            // Update active button
            viewButtons.forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
        });
    });
});

function updateBodyParts() {
    const studyType = document.querySelector('select[name="study_type"]').value;
    const bodyPartSelect = document.querySelector('select[name="body_part"]');
    
    // Clear existing options
    bodyPartSelect.innerHTML = '<option value="">Select body part...</option>';
    
    const bodyParts = {
        'xray': ['Chest', 'Abdomen', 'Spine', 'Extremities', 'Pelvis', 'Skull'],
        'ct': ['Head', 'Chest', 'Abdomen', 'Pelvis', 'Spine', 'Extremities'],
        'mri': ['Brain', 'Spine', 'Joints', 'Abdomen', 'Pelvis', 'Cardiac'],
        'ultrasound': ['Abdomen', 'Pelvis', 'Cardiac', 'Vascular', 'Obstetric', 'Thyroid'],
        'mammography': ['Bilateral Breasts', 'Right Breast', 'Left Breast'],
        'nuclear': ['Bone Scan', 'Cardiac', 'Thyroid', 'Renal', 'Lung Perfusion'],
        'fluoroscopy': ['Upper GI', 'Barium Enema', 'VCUG', 'Arthrogram']
    };
    
    if (bodyParts[studyType]) {
        bodyParts[studyType].forEach(part => {
            const option = document.createElement('option');
            option.value = part.toLowerCase().replace(/\s+/g, '_');
            option.textContent = part;
            bodyPartSelect.appendChild(option);
        });
    }
}

function handleNewOrder() {
    const formData = new FormData(document.getElementById('newOrderForm'));
    
    console.log('Creating new imaging order:', Object.fromEntries(formData));
    
    // Close modal
    bootstrap.Modal.getInstance(document.getElementById('newOrderModal')).hide();
    
    // Reset form
    document.getElementById('newOrderForm').reset();
    
    // Show success message
    const orderId = 'RAD-2024-' + Math.floor(Math.random() * 1000).toString().padStart(3, '0');
    alert(`Imaging order created successfully! Order ID: ${orderId}`);
    
    // Refresh the orders table
    refreshOrders();
}

function searchPatients() {
    const searchTerm = document.querySelector('input[name="patient_search"]').value;
    console.log(`Searching for patients: ${searchTerm}`);
    
    // Simulate patient search results
    if (searchTerm.trim()) {
        alert(`Patient search results for "${searchTerm}" would be displayed here.`);
        // In real implementation, this would show a dropdown with matching patients
    }
}

function viewOrder(orderId) {
    console.log(`Viewing order: ${orderId}`);
    alert(`Detailed view for order ${orderId} would be displayed here.`);
}

function editOrder(orderId) {
    console.log(`Editing order: ${orderId}`);
    alert(`Edit form for order ${orderId} would be displayed here.`);
}

function updateStatus(orderId) {
    const newStatus = prompt('Update status:\n1. Scheduled\n2. In Progress\n3. Completed\n4. Cancelled\n\nEnter number:');
    
    if (newStatus && ['1', '2', '3', '4'].includes(newStatus)) {
        const statuses = {
            '1': 'Scheduled',
            '2': 'In Progress',
            '3': 'Completed',
            '4': 'Cancelled'
        };
        
        console.log(`Updating order ${orderId} status to: ${statuses[newStatus]}`);
        alert(`Order ${orderId} status updated to: ${statuses[newStatus]}`);
        refreshOrders();
    }
}

function rescheduleOrder(orderId) {
    const newDate = prompt('Enter new date and time (YYYY-MM-DD HH:MM):');
    
    if (newDate) {
        console.log(`Rescheduling order ${orderId} to: ${newDate}`);
        alert(`Order ${orderId} rescheduled to: ${newDate}`);
        refreshOrders();
    }
}

function startImaging(orderId) {
    if (confirm(`Start imaging for order ${orderId}?`)) {
        console.log(`Starting imaging for order: ${orderId}`);
        alert(`Imaging started for order ${orderId}`);
        refreshOrders();
    }
}

function scheduleOrder(orderId) {
    console.log(`Scheduling order: ${orderId}`);
    alert(`Scheduling interface for order ${orderId} would be displayed here.`);
}

function cancelOrder(orderId) {
    const reason = prompt('Enter cancellation reason:');
    
    if (reason !== null && reason.trim() !== '') {
        console.log(`Cancelling order ${orderId} with reason: ${reason}`);
        alert(`Order ${orderId} has been cancelled.`);
        refreshOrders();
    }
}

function viewImages(orderId) {
    console.log(`Viewing images for order: ${orderId}`);
    alert(`DICOM viewer for order ${orderId} would be opened here.`);
}

function assignRadiologist(orderId) {
    const radiologist = prompt('Assign to radiologist:\n1. Dr. Smith\n2. Dr. Brown\n3. Dr. Wilson\n4. Dr. Taylor\n\nEnter number:');
    
    if (radiologist && ['1', '2', '3', '4'].includes(radiologist)) {
        const radiologists = {
            '1': 'Dr. Smith',
            '2': 'Dr. Brown',
            '3': 'Dr. Wilson',
            '4': 'Dr. Taylor'
        };
        
        console.log(`Assigning order ${orderId} to: ${radiologists[radiologist]}`);
        alert(`Order ${orderId} assigned to: ${radiologists[radiologist]}`);
        refreshOrders();
    }
}

function searchOrders() {
    const searchTerm = document.getElementById('searchInput').value;
    console.log(`Searching orders for: ${searchTerm}`);
    applyFilters();
}

function applyFilters() {
    const status = document.getElementById('statusFilter').value;
    const priority = document.getElementById('priorityFilter').value;
    const modality = document.getElementById('modalityFilter').value;
    const dateRange = document.getElementById('dateFilter').value;
    const search = document.getElementById('searchInput').value;
    
    console.log('Applying filters:', { status, priority, modality, dateRange, search });
    
    // In real implementation, this would filter the table rows
    alert('Filters applied successfully!');
}

function clearFilters() {
    document.getElementById('statusFilter').value = '';
    document.getElementById('priorityFilter').value = '';
    document.getElementById('modalityFilter').value = '';
    document.getElementById('dateFilter').value = 'today';
    document.getElementById('searchInput').value = '';
    
    applyFilters();
}

function toggleView(view) {
    console.log(`Switching to view: ${view}`);
    
    // In real implementation, this would filter the table based on the view
    const viewMessages = {
        'all': 'Showing all orders',
        'urgent': 'Showing urgent orders only',
        'today': 'Showing today\'s orders only'
    };
    
    alert(viewMessages[view] || 'View changed');
}

function refreshOrders() {
    console.log('Refreshing orders table...');
    
    // Show loading state
    const refreshBtn = document.querySelector('button[onclick="refreshOrders()"]');
    const originalContent = refreshBtn.innerHTML;
    refreshBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Refreshing...';
    refreshBtn.disabled = true;
    
    // Simulate API call
    setTimeout(() => {
        refreshBtn.innerHTML = originalContent;
        refreshBtn.disabled = false;
        alert('Orders table refreshed!');
    }, 1500);
}

function exportOrders() {
    const format = prompt('Export format:\n1. PDF Report\n2. Excel Spreadsheet\n3. CSV Data\n\nEnter number:');
    
    if (format && ['1', '2', '3'].includes(format)) {
        const formats = {
            '1': 'PDF Report',
            '2': 'Excel Spreadsheet',
            '3': 'CSV Data'
        };
        
        console.log(`Exporting orders as: ${formats[format]}`);
        alert(`Orders export started as ${formats[format]}. You will receive an email when ready.`);
    }
}
</script>

<style>
.dash-widget-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.dash-widget-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-right: 1rem;
    border: 2px solid;
}

.dash-count h3 {
    margin: 0;
    font-size: 2rem;
    font-weight: bold;
}

.workflow-steps {
    padding: 1rem 0;
}

.workflow-step {
    text-align: center;
    margin-bottom: 1rem;
}

.step-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 0.5rem;
}

.card-tools {
    margin-left: auto;
}

.progress {
    height: 6px;
}

@media (max-width: 768px) {
    .dash-widget-header {
        flex-direction: column;
        text-align: center;
    }
    
    .dash-widget-icon {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
    
    .btn-group {
        flex-direction: column;
    }
    
    .btn-group .btn {
        margin-bottom: 0.25rem;
    }
    
    .workflow-step {
        margin-bottom: 2rem;
    }
}
</style>
{% endblock %}