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

{% block title %}Process Specimen - {{ block.super }}{% endblock %}

{% block css %}
<style>
.specimen-header {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 30px;
}
.process-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin: 15px 0;
    border: 1px solid #dee2e6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.specimen-info {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 15px;
    margin: 15px 0;
}
.process-step {
    display: flex;
    align-items: center;
    padding: 15px;
    margin: 10px 0;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}
.process-step.active {
    background: #e3f2fd;
    border-color: #2196f3;
}
.process-step.completed {
    background: #e8f5e8;
    border-color: #4caf50;
}
.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #6c757d;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 15px;
}
.step-number.active {
    background: #2196f3;
}
.step-number.completed {
    background: #4caf50;
}
.step-content {
    flex: 1;
}
.step-title {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}
.step-description {
    color: #6c757d;
    font-size: 0.9rem;
}
.step-actions {
    display: flex;
    gap: 10px;
}
.specimen-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
}
.detail-item {
    background: white;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #dee2e6;
}
.detail-label {
    font-weight: bold;
    color: #495057;
    font-size: 0.9rem;
    margin-bottom: 5px;
}
.detail-value {
    color: #333;
    font-size: 1rem;
}
.test-panel {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.test-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #dee2e6;
}
.test-item:last-child {
    border-bottom: none;
}
.test-name {
    font-weight: bold;
    color: #333;
}
.test-status {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
}
.status-pending {
    background: #fff3cd;
    color: #856404;
}
.status-processing {
    background: #cce5ff;
    color: #004085;
}
.status-completed {
    background: #d4edda;
    color: #155724;
}
.status-failed {
    background: #f8d7da;
    color: #721c24;
}
.processing-timeline {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.timeline-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    position: relative;
}
.timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 20px;
    top: 50px;
    width: 2px;
    height: 30px;
    background: #dee2e6;
}
.timeline-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    z-index: 1;
    position: relative;
    background: white;
}
.timeline-icon.completed {
    background: #28a745;
    border-color: #28a745;
    color: white;
}
.timeline-icon.active {
    background: #007bff;
    border-color: #007bff;
    color: white;
}
.timeline-content {
    flex: 1;
}
.timeline-title {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}
.timeline-time {
    color: #6c757d;
    font-size: 0.9rem;
}
.quality-checks {
    background: #fff8e1;
    border: 1px solid #ffcc02;
    border-radius: 6px;
    padding: 15px;
    margin: 15px 0;
}
.quality-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}
.quality-label {
    font-weight: bold;
    color: #333;
}
.quality-status {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
}
.quality-pass {
    background: #d4edda;
    color: #155724;
}
.quality-fail {
    background: #f8d7da;
    color: #721c24;
}
.quality-pending {
    background: #fff3cd;
    color: #856404;
}
.processing-notes {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.note-item {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 15px;
    margin: 10px 0;
    border-left: 4px solid #007bff;
}
.note-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.note-author {
    font-weight: bold;
    color: #333;
}
.note-time {
    color: #6c757d;
    font-size: 0.9rem;
}
.note-content {
    color: #495057;
    line-height: 1.5;
}
.action-buttons {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    text-align: center;
}
.btn-group-custom {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}
.progress-indicator {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.progress-bar-custom {
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin: 10px 0;
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #28a745, #20c997);
    transition: width 0.3s ease;
}
.progress-text {
    text-align: center;
    font-weight: bold;
    color: #333;
    margin-top: 10px;
}
</style>
{% 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><i class="fas fa-vial"></i> Process Specimen</h4>
                        <h6>Laboratory specimen processing workflow</h6>
                    </div>
                    <div class="page-btn">
                        <button class="btn btn-info me-2" id="printLabels">
                            <i class="fas fa-print"></i> Print Labels
                        </button>
                        <button class="btn btn-warning me-2" id="flagIssue">
                            <i class="fas fa-exclamation-triangle"></i> Flag Issue
                        </button>
                        <button class="btn btn-success" id="completeProcessing">
                            <i class="fas fa-check"></i> Complete Processing
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Specimen Header -->
        <div class="row">
            <div class="col-12">
                <div class="specimen-header">
                    <div class="row">
                        <div class="col-md-8">
                            <h5><i class="fas fa-flask"></i> Specimen ID: SP-2024-001234</h5>
                            <p>Patient: John Doe (DOB: 1985-03-15) | MRN: MR123456</p>
                            <p>Collection Date: {{ "now"|date:"M d, Y H:i" }} | Priority: Routine</p>
                        </div>
                        <div class="col-md-4">
                            <div class="text-end">
                                <h6>Status: <span class="badge bg-warning">Processing</span></h6>
                                <h6>Technician: Dr. Sarah Wilson</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- Main Processing Panel -->
            <div class="col-md-8">
                <!-- Progress Indicator -->
                <div class="progress-indicator">
                    <h6><i class="fas fa-tasks"></i> Processing Progress</h6>
                    <div class="progress-bar-custom">
                        <div class="progress-fill" style="width: 60%;"></div>
                    </div>
                    <div class="progress-text">Step 3 of 5 - Quality Control</div>
                </div>

                <!-- Processing Steps -->
                <div class="process-card">
                    <h6><i class="fas fa-list-ol"></i> Processing Workflow</h6>
                    
                    <div class="process-step completed">
                        <div class="step-number completed">
                            <i class="fas fa-check"></i>
                        </div>
                        <div class="step-content">
                            <div class="step-title">Specimen Receipt & Verification</div>
                            <div class="step-description">Verify specimen integrity, labeling, and collection requirements</div>
                        </div>
                        <div class="step-actions">
                            <span class="badge bg-success">Completed</span>
                        </div>
                    </div>

                    <div class="process-step completed">
                        <div class="step-number completed">
                            <i class="fas fa-check"></i>
                        </div>
                        <div class="step-content">
                            <div class="step-title">Sample Preparation</div>
                            <div class="step-description">Prepare specimen for testing according to protocol</div>
                        </div>
                        <div class="step-actions">
                            <span class="badge bg-success">Completed</span>
                        </div>
                    </div>

                    <div class="process-step active">
                        <div class="step-number active">3</div>
                        <div class="step-content">
                            <div class="step-title">Quality Control</div>
                            <div class="step-description">Run quality control checks and calibration verification</div>
                        </div>
                        <div class="step-actions">
                            <button class="btn btn-sm btn-primary">Start QC</button>
                            <button class="btn btn-sm btn-outline-secondary">Skip</button>
                        </div>
                    </div>

                    <div class="process-step">
                        <div class="step-number">4</div>
                        <div class="step-content">
                            <div class="step-title">Testing & Analysis</div>
                            <div class="step-description">Perform requested laboratory tests and analysis</div>
                        </div>
                        <div class="step-actions">
                            <span class="badge bg-secondary">Pending</span>
                        </div>
                    </div>

                    <div class="process-step">
                        <div class="step-number">5</div>
                        <div class="step-content">
                            <div class="step-title">Result Validation</div>
                            <div class="step-description">Review and validate test results before reporting</div>
                        </div>
                        <div class="step-actions">
                            <span class="badge bg-secondary">Pending</span>
                        </div>
                    </div>
                </div>

                <!-- Test Panel -->
                <div class="test-panel">
                    <h6><i class="fas fa-clipboard-list"></i> Requested Tests</h6>
                    
                    <div class="test-item">
                        <div>
                            <div class="test-name">Complete Blood Count (CBC)</div>
                            <small class="text-muted">Automated hematology analyzer</small>
                        </div>
                        <div>
                            <span class="test-status status-processing">Processing</span>
                        </div>
                    </div>

                    <div class="test-item">
                        <div>
                            <div class="test-name">Basic Metabolic Panel (BMP)</div>
                            <small class="text-muted">Chemistry analyzer</small>
                        </div>
                        <div>
                            <span class="test-status status-pending">Pending</span>
                        </div>
                    </div>

                    <div class="test-item">
                        <div>
                            <div class="test-name">Lipid Panel</div>
                            <small class="text-muted">Fasting required</small>
                        </div>
                        <div>
                            <span class="test-status status-pending">Pending</span>
                        </div>
                    </div>

                    <div class="test-item">
                        <div>
                            <div class="test-name">Thyroid Function Tests</div>
                            <small class="text-muted">TSH, T3, T4</small>
                        </div>
                        <div>
                            <span class="test-status status-pending">Pending</span>
                        </div>
                    </div>
                </div>

                <!-- Quality Control Checks -->
                <div class="quality-checks">
                    <h6><i class="fas fa-shield-alt"></i> Quality Control Status</h6>
                    
                    <div class="quality-item">
                        <div class="quality-label">Temperature Control</div>
                        <div class="quality-status quality-pass">PASS</div>
                    </div>

                    <div class="quality-item">
                        <div class="quality-label">Calibration Verification</div>
                        <div class="quality-status quality-pass">PASS</div>
                    </div>

                    <div class="quality-item">
                        <div class="quality-label">Control Sample Results</div>
                        <div class="quality-status quality-pending">PENDING</div>
                    </div>

                    <div class="quality-item">
                        <div class="quality-label">Equipment Status</div>
                        <div class="quality-status quality-pass">PASS</div>
                    </div>
                </div>

                <!-- Processing Notes -->
                <div class="processing-notes">
                    <h6><i class="fas fa-sticky-note"></i> Processing Notes</h6>
                    
                    <div class="note-item">
                        <div class="note-header">
                            <div class="note-author">Dr. Sarah Wilson</div>
                            <div class="note-time">{{ "now"|date:"M d, Y H:i" }}</div>
                        </div>
                        <div class="note-content">
                            Specimen received in good condition. No hemolysis observed. Proceeding with standard processing protocol.
                        </div>
                    </div>

                    <div class="note-item">
                        <div class="note-header">
                            <div class="note-author">Lab Tech Mike Johnson</div>
                            <div class="note-time">{{ "now"|date:"M d, Y H:i" }}</div>
                        </div>
                        <div class="note-content">
                            Sample preparation completed. Aliquots prepared for multiple test panels. QC checks initiated.
                        </div>
                    </div>

                    <div class="form-group mt-3">
                        <label>Add Processing Note</label>
                        <textarea class="form-control" rows="3" placeholder="Enter processing notes or observations..."></textarea>
                        <button class="btn btn-sm btn-primary mt-2">
                            <i class="fas fa-plus"></i> Add Note
                        </button>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="action-buttons">
                    <div class="btn-group-custom">
                        <button class="btn btn-success" id="proceedNext">
                            <i class="fas fa-arrow-right"></i> Proceed to Next Step
                        </button>
                        <button class="btn btn-warning" id="holdProcessing">
                            <i class="fas fa-pause"></i> Hold Processing
                        </button>
                        <button class="btn btn-danger" id="rejectSpecimen">
                            <i class="fas fa-times"></i> Reject Specimen
                        </button>
                        <button class="btn btn-info" id="requestConsult">
                            <i class="fas fa-user-md"></i> Request Consultation
                        </button>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-md-4">
                <!-- Specimen Details -->
                <div class="specimen-info">
                    <h6><i class="fas fa-info-circle"></i> Specimen Details</h6>
                    <div class="specimen-details">
                        <div class="detail-item">
                            <div class="detail-label">Specimen Type</div>
                            <div class="detail-value">Serum</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">Collection Method</div>
                            <div class="detail-value">Venipuncture</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">Volume</div>
                            <div class="detail-value">5.0 mL</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">Container</div>
                            <div class="detail-value">Red Top Tube</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">Fasting Status</div>
                            <div class="detail-value">12 hours</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">Priority</div>
                            <div class="detail-value">Routine</div>
                        </div>
                    </div>
                </div>

                <!-- Processing Timeline -->
                <div class="processing-timeline">
                    <h6><i class="fas fa-clock"></i> Processing Timeline</h6>
                    
                    <div class="timeline-item">
                        <div class="timeline-icon completed">
                            <i class="fas fa-check"></i>
                        </div>
                        <div class="timeline-content">
                            <div class="timeline-title">Specimen Received</div>
                            <div class="timeline-time">{{ "now"|date:"M d, Y H:i" }}</div>
                        </div>
                    </div>

                    <div class="timeline-item">
                        <div class="timeline-icon completed">
                            <i class="fas fa-check"></i>
                        </div>
                        <div class="timeline-content">
                            <div class="timeline-title">Verification Complete</div>
                            <div class="timeline-time">{{ "now"|date:"M d, Y H:i" }}</div>
                        </div>
                    </div>

                    <div class="timeline-item">
                        <div class="timeline-icon completed">
                            <i class="fas fa-check"></i>
                        </div>
                        <div class="timeline-content">
                            <div class="timeline-title">Sample Prepared</div>
                            <div class="timeline-time">{{ "now"|date:"M d, Y H:i" }}</div>
                        </div>
                    </div>

                    <div class="timeline-item">
                        <div class="timeline-icon active">
                            <i class="fas fa-cog fa-spin"></i>
                        </div>
                        <div class="timeline-content">
                            <div class="timeline-title">Quality Control</div>
                            <div class="timeline-time">In Progress</div>
                        </div>
                    </div>

                    <div class="timeline-item">
                        <div class="timeline-icon">
                            <i class="fas fa-flask"></i>
                        </div>
                        <div class="timeline-content">
                            <div class="timeline-title">Testing Phase</div>
                            <div class="timeline-time">Pending</div>
                        </div>
                    </div>

                    <div class="timeline-item">
                        <div class="timeline-icon">
                            <i class="fas fa-clipboard-check"></i>
                        </div>
                        <div class="timeline-content">
                            <div class="timeline-title">Result Validation</div>
                            <div class="timeline-time">Pending</div>
                        </div>
                    </div>
                </div>

                <!-- Quick Actions -->
                <div class="process-card">
                    <h6><i class="fas fa-bolt"></i> Quick Actions</h6>
                    <div class="d-grid gap-2">
                        <button class="btn btn-sm btn-outline-primary">
                            <i class="fas fa-barcode"></i> Print Barcode
                        </button>
                        <button class="btn btn-sm btn-outline-info">
                            <i class="fas fa-camera"></i> Capture Image
                        </button>
                        <button class="btn btn-sm btn-outline-warning">
                            <i class="fas fa-thermometer-half"></i> Log Temperature
                        </button>
                        <button class="btn btn-sm btn-outline-success">
                            <i class="fas fa-microscope"></i> View Under Microscope
                        </button>
                        <button class="btn btn-sm btn-outline-secondary">
                            <i class="fas fa-history"></i> View History
                        </button>
                    </div>
                </div>

                <!-- Equipment Status -->
                <div class="process-card">
                    <h6><i class="fas fa-cogs"></i> Equipment Status</h6>
                    <div class="equipment-item d-flex justify-content-between align-items-center mb-2">
                        <span>Hematology Analyzer</span>
                        <span class="badge bg-success">Online</span>
                    </div>
                    <div class="equipment-item d-flex justify-content-between align-items-center mb-2">
                        <span>Chemistry Analyzer</span>
                        <span class="badge bg-success">Online</span>
                    </div>
                    <div class="equipment-item d-flex justify-content-between align-items-center mb-2">
                        <span>Centrifuge</span>
                        <span class="badge bg-warning">Maintenance</span>
                    </div>
                    <div class="equipment-item d-flex justify-content-between align-items-center">
                        <span>Microscope Station</span>
                        <span class="badge bg-success">Available</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
$(document).ready(function() {
    // Process step actions
    $('.process-step .btn-primary').click(function() {
        var step = $(this).closest('.process-step');
        step.removeClass('active').addClass('completed');
        step.find('.step-number').removeClass('active').addClass('completed').html('<i class="fas fa-check"></i>');
        step.find('.step-actions').html('<span class="badge bg-success">Completed</span>');
        
        // Activate next step
        var nextStep = step.next('.process-step');
        if (nextStep.length) {
            nextStep.addClass('active');
            nextStep.find('.step-number').addClass('active');
        }
        
        // Update progress
        updateProgress();
    });
    
    // Skip step
    $('.process-step .btn-outline-secondary').click(function() {
        if (confirm('Are you sure you want to skip this step?')) {
            var step = $(this).closest('.process-step');
            step.removeClass('active');
            step.find('.step-actions').html('<span class="badge bg-warning">Skipped</span>');
            
            // Activate next step
            var nextStep = step.next('.process-step');
            if (nextStep.length) {
                nextStep.addClass('active');
                nextStep.find('.step-number').addClass('active');
            }
            
            updateProgress();
        }
    });
    
    // Update progress indicator
    function updateProgress() {
        var totalSteps = $('.process-step').length;
        var completedSteps = $('.process-step.completed').length;
        var progress = (completedSteps / totalSteps) * 100;
        
        $('.progress-fill').css('width', progress + '%');
        $('.progress-text').text('Step ' + (completedSteps + 1) + ' of ' + totalSteps + ' - ' + 
                                $('.process-step.active .step-title').text());
    }
    
    // Add processing note
    $('.processing-notes .btn-primary').click(function() {
        var noteText = $(this).siblings('textarea').val();
        if (noteText.trim()) {
            var noteHtml = `
                <div class="note-item">
                    <div class="note-header">
                        <div class="note-author">Current User</div>
                        <div class="note-time">${new Date().toLocaleString()}</div>
                    </div>
                    <div class="note-content">${noteText}</div>
                </div>
            `;
            $(this).closest('.form-group').before(noteHtml);
            $(this).siblings('textarea').val('');
        }
    });
    
    // Action buttons
    $('#proceedNext').click(function() {
        alert('Proceeding to next processing step...');
    });
    
    $('#holdProcessing').click(function() {
        if (confirm('Are you sure you want to hold processing for this specimen?')) {
            alert('Processing has been placed on hold.');
        }
    });
    
    $('#rejectSpecimen').click(function() {
        if (confirm('Are you sure you want to reject this specimen? This action cannot be undone.')) {
            alert('Specimen has been rejected.');
        }
    });
    
    $('#requestConsult').click(function() {
        alert('Consultation request has been sent to the pathologist.');
    });
    
    // Header buttons
    $('#printLabels').click(function() {
        alert('Printing specimen labels...');
    });
    
    $('#flagIssue').click(function() {
        var issue = prompt('Please describe the issue:');
        if (issue) {
            alert('Issue has been flagged: ' + issue);
        }
    });
    
    $('#completeProcessing').click(function() {
        if (confirm('Are you sure you want to complete processing for this specimen?')) {
            alert('Processing completed successfully!');
        }
    });
    
    // Quick actions
    $('.process-card .btn').click(function() {
        var action = $(this).text().trim();
        alert('Executing: ' + action);
    });
    
    // Test status updates (simulate real-time updates)
    setInterval(function() {
        $('.test-status.status-processing').each(function() {
            if (Math.random() > 0.7) {
                $(this).removeClass('status-processing').addClass('status-completed').text('Completed');
            }
        });
    }, 5000);
});
</script>
{% endblock %}