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

{% block title %}Crossmatch Test - {{ blood_unit.unit_number }} & {{ patient.full_name }}{% endblock %}

{% block css %}
<link href="{% static 'plugins/select2/dist/css/select2.min.css' %}" rel="stylesheet" />
<style>
.form-section {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    border-left: 4px solid #007bff;
}

.form-section h5 {
    color: #007bff;
    margin-bottom: 15px;
}

.required-field {
    color: #dc3545;
}

.patient-info {
    background: #d4edda;
    border-left: 4px solid #28a745;
}

.unit-info {
    background: #d1ecf1;
    border-left: 4px solid #17a2b8;
}

.compatibility-info {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
}

.crossmatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 15px;
}

.test-panel {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
}

.test-panel h6 {
    color: #495057;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.test-result {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.result-indicator {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
}

.compatible { background-color: #28a745; }
.incompatible { background-color: #dc3545; }
.pending { background-color: #6c757d; }
.weak { background-color: #ffc107; }

.temperature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.temperature-test {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
}

.compatibility-summary {
    background: #e2e3e5;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
}

.safety-warning {
    background: #f8d7da;
    border: 2px solid #dc3545;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.8; }
    100% { opacity: 1; }
}
</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"><a href="{% url 'blood_bank:blood_unit_list' %}">Blood Units</a></li>
    <li class="breadcrumb-item"><a href="{% url 'blood_bank:blood_unit_detail' blood_unit.id %}">{{ blood_unit.unit_number }}</a></li>
    <li class="breadcrumb-item active">Crossmatch</li>
</ol>
<!-- END breadcrumb -->

<!-- BEGIN page-header -->
<h1 class="page-header">Crossmatch Test <small>compatibility verification</small></h1>
<!-- END page-header -->

<!-- BEGIN panel -->
<div class="panel panel-inverse">
    <div class="panel-heading">
        <h4 class="panel-title">
            <i class="fa fa-exchange-alt"></i> Crossmatch Compatibility Test
        </h4>
        <div class="panel-heading-btn">
            <span class="badge bg-info">Unit: {{ blood_unit.unit_number }}</span>
            <span class="badge bg-success">Patient: {{ patient.patient_id }}</span>
        </div>
    </div>
    <div class="panel-body">
        <form method="post" id="crossmatchForm">
            {% csrf_token %}
            
            <!-- BEGIN patient information -->
            <div class="form-section patient-info">
                <h5><i class="fa fa-user-injured"></i> Patient Information</h5>
                <div class="row">
                    <div class="col-md-6">
                        <table class="table table-borderless mb-0">
                            <tr>
                                <td class="fw-bold">Name:</td>
                                <td>{{ patient.full_name }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Patient ID:</td>
                                <td>{{ patient.patient_id }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Blood Group:</td>
                                <td>
                                    <span class="badge bg-primary">{{ patient.blood_group.display_name|default:"Unknown" }}</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Age:</td>
                                <td>{{ patient.age }} years</td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <table class="table table-borderless mb-0">
                            <tr>
                                <td class="fw-bold">Previous Transfusions:</td>
                                <td>{{ patient.transfusion_history.count }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Pregnancies:</td>
                                <td>{{ patient.pregnancy_history|default:"N/A" }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Known Antibodies:</td>
                                <td>{{ patient.known_antibodies|default:"None" }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Last Crossmatch:</td>
                                <td>{{ patient.last_crossmatch_date|date:"M d, Y"|default:"Never" }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <!-- END patient information -->

            <!-- BEGIN blood unit information -->
            <div class="form-section unit-info">
                <h5><i class="fa fa-tint"></i> Blood Unit Information</h5>
                <div class="row">
                    <div class="col-md-6">
                        <table class="table table-borderless mb-0">
                            <tr>
                                <td class="fw-bold">Unit Number:</td>
                                <td>{{ blood_unit.unit_number }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Blood Group:</td>
                                <td><span class="badge bg-primary">{{ blood_unit.blood_group.display_name }}</span></td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Component:</td>
                                <td>{{ blood_unit.component.get_name_display }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Volume:</td>
                                <td>{{ blood_unit.volume_ml }} ml</td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <table class="table table-borderless mb-0">
                            <tr>
                                <td class="fw-bold">Donor:</td>
                                <td>{{ blood_unit.donor.full_name }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Collection Date:</td>
                                <td>{{ blood_unit.collection_date|date:"M d, Y" }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Expiry Date:</td>
                                <td>{{ blood_unit.expiry_date|date:"M d, Y" }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Test Status:</td>
                                <td>
                                    {% if blood_unit.all_tests_passed %}
                                        <span class="badge bg-success">All Tests Passed</span>
                                    {% else %}
                                        <span class="badge bg-warning">Tests Pending</span>
                                    {% endif %}
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <!-- END blood unit information -->

            <!-- BEGIN test information -->
            <div class="form-section">
                <h5><i class="fa fa-flask"></i> Test Information</h5>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="testDate" class="form-label">
                                Test Date <span class="required-field">*</span>
                            </label>
                            <input type="datetime-local" class="form-control" id="testDate" name="test_date" required>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="testedBy" class="form-label">
                                Tested By <span class="required-field">*</span>
                            </label>
                            <select class="form-select" id="testedBy" name="tested_by" required>
                                <option value="">Select technician...</option>
                                {% for staff in lab_staff %}
                                <option value="{{ staff.id }}">{{ staff.get_full_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="testMethod" class="form-label">
                                Test Method <span class="required-field">*</span>
                            </label>
                            <select class="form-select" id="testMethod" name="test_method" required>
                                <option value="">Select method...</option>
                                <option value="tube">Tube Method</option>
                                <option value="gel">Gel Card</option>
                                <option value="solid_phase">Solid Phase</option>
                                <option value="automated">Automated System</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END test information -->

            <!-- BEGIN ABO/Rh compatibility check -->
            <div class="form-section compatibility-info">
                <h5><i class="fa fa-shield-alt"></i> ABO/Rh Compatibility Check</h5>
                <div class="compatibility-summary">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Patient Blood Group</h6>
                            <div class="d-flex align-items-center gap-3">
                                <span class="badge bg-primary fs-5">{{ patient.blood_group.display_name|default:"Unknown" }}</span>
                                {% if patient.blood_group.display_name == "Unknown" %}
                                <span class="text-danger">⚠️ Patient blood group must be confirmed</span>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h6>Donor Blood Group</h6>
                            <div class="d-flex align-items-center gap-3">
                                <span class="badge bg-info fs-5">{{ blood_unit.blood_group.display_name }}</span>
                                <div id="aboCompatibility">
                                    <!-- Will be populated by JavaScript -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END ABO/Rh compatibility check -->

            <!-- BEGIN crossmatch testing -->
            <div class="form-section">
                <h5><i class="fa fa-microscope"></i> Crossmatch Testing</h5>
                <div class="crossmatch-grid">
                    <!-- Major Crossmatch -->
                    <div class="test-panel">
                        <h6><i class="fa fa-arrow-right"></i> Major Crossmatch</h6>
                        <p class="small text-muted">Patient serum + Donor red cells</p>
                        
                        <div class="temperature-grid">
                            <div class="temperature-test">
                                <label class="form-label">Room Temp</label>
                                <div class="test-result">
                                    <select class="form-select form-select-sm" name="major_room_temp" required>
                                        <option value="">Result</option>
                                        <option value="compatible">Compatible</option>
                                        <option value="incompatible">Incompatible</option>
                                        <option value="weak">Weak Reaction</option>
                                    </select>
                                    <span class="result-indicator pending" id="major_room_temp_indicator"></span>
                                </div>
                            </div>
                            
                            <div class="temperature-test">
                                <label class="form-label">37°C</label>
                                <div class="test-result">
                                    <select class="form-select form-select-sm" name="major_37c" required>
                                        <option value="">Result</option>
                                        <option value="compatible">Compatible</option>
                                        <option value="incompatible">Incompatible</option>
                                        <option value="weak">Weak Reaction</option>
                                    </select>
                                    <span class="result-indicator pending" id="major_37c_indicator"></span>
                                </div>
                            </div>
                            
                            <div class="temperature-test">
                                <label class="form-label">AHG Phase</label>
                                <div class="test-result">
                                    <select class="form-select form-select-sm" name="major_ahg" required>
                                        <option value="">Result</option>
                                        <option value="compatible">Compatible</option>
                                        <option value="incompatible">Incompatible</option>
                                        <option value="weak">Weak Reaction</option>
                                    </select>
                                    <span class="result-indicator pending" id="major_ahg_indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Minor Crossmatch -->
                    <div class="test-panel">
                        <h6><i class="fa fa-arrow-left"></i> Minor Crossmatch</h6>
                        <p class="small text-muted">Donor serum + Patient red cells</p>
                        
                        <div class="temperature-grid">
                            <div class="temperature-test">
                                <label class="form-label">Room Temp</label>
                                <div class="test-result">
                                    <select class="form-select form-select-sm" name="minor_room_temp">
                                        <option value="">Result</option>
                                        <option value="compatible">Compatible</option>
                                        <option value="incompatible">Incompatible</option>
                                        <option value="weak">Weak Reaction</option>
                                    </select>
                                    <span class="result-indicator pending" id="minor_room_temp_indicator"></span>
                                </div>
                            </div>
                            
                            <div class="temperature-test">
                                <label class="form-label">37°C</label>
                                <div class="test-result">
                                    <select class="form-select form-select-sm" name="minor_37c">
                                        <option value="">Result</option>
                                        <option value="compatible">Compatible</option>
                                        <option value="incompatible">Incompatible</option>
                                        <option value="weak">Weak Reaction</option>
                                    </select>
                                    <span class="result-indicator pending" id="minor_37c_indicator"></span>
                                </div>
                            </div>
                            
                            <div class="temperature-test">
                                <label class="form-label">AHG Phase</label>
                                <div class="test-result">
                                    <select class="form-select form-select-sm" name="minor_ahg">
                                        <option value="">Result</option>
                                        <option value="compatible">Compatible</option>
                                        <option value="incompatible">Incompatible</option>
                                        <option value="weak">Weak Reaction</option>
                                    </select>
                                    <span class="result-indicator pending" id="minor_ahg_indicator"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Control Tests -->
                    <div class="test-panel">
                        <h6><i class="fa fa-check-circle"></i> Control Tests</h6>
                        <p class="small text-muted">Quality control verification</p>
                        
                        <div class="test-result">
                            <label class="form-label">Positive Control</label>
                            <select class="form-select form-select-sm" name="positive_control" required>
                                <option value="">Result</option>
                                <option value="positive">Positive</option>
                                <option value="negative">Negative</option>
                                <option value="weak">Weak</option>
                            </select>
                            <span class="result-indicator pending" id="positive_control_indicator"></span>
                        </div>
                        
                        <div class="test-result">
                            <label class="form-label">Negative Control</label>
                            <select class="form-select form-select-sm" name="negative_control" required>
                                <option value="">Result</option>
                                <option value="positive">Positive</option>
                                <option value="negative">Negative</option>
                                <option value="weak">Weak</option>
                            </select>
                            <span class="result-indicator pending" id="negative_control_indicator"></span>
                        </div>
                        
                        <div class="test-result">
                            <label class="form-label">Auto Control</label>
                            <select class="form-select form-select-sm" name="auto_control" required>
                                <option value="">Result</option>
                                <option value="positive">Positive</option>
                                <option value="negative">Negative</option>
                                <option value="weak">Weak</option>
                            </select>
                            <span class="result-indicator pending" id="auto_control_indicator"></span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END crossmatch testing -->

            <!-- BEGIN antibody screening -->
            <div class="form-section">
                <h5><i class="fa fa-search"></i> Antibody Screening</h5>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="antibodyScreen" class="form-label">
                                Antibody Screen Result <span class="required-field">*</span>
                            </label>
                            <select class="form-select" id="antibodyScreen" name="antibody_screen" required>
                                <option value="">Select result...</option>
                                <option value="negative">Negative</option>
                                <option value="positive">Positive</option>
                                <option value="indeterminate">Indeterminate</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="antibodyIdentification" class="form-label">
                                Antibody Identification
                            </label>
                            <input type="text" class="form-control" id="antibodyIdentification" name="antibody_identification" 
                                   placeholder="If positive, specify antibodies identified">
                        </div>
                    </div>
                </div>
            </div>
            <!-- END antibody screening -->

            <!-- BEGIN test notes -->
            <div class="form-section">
                <h5><i class="fa fa-clipboard"></i> Test Notes & Observations</h5>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="testNotes" class="form-label">Test Notes</label>
                            <textarea class="form-control" id="testNotes" name="test_notes" rows="4" 
                                      placeholder="Record any observations, reaction strengths, or additional notes..."></textarea>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="reagentLots" class="form-label">Reagent Lot Numbers</label>
                            <input type="text" class="form-control" id="reagentLots" name="reagent_lots" 
                                   placeholder="AHG, enhancement media lot numbers">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="equipmentUsed" class="form-label">Equipment Used</label>
                            <input type="text" class="form-control" id="equipmentUsed" name="equipment_used" 
                                   placeholder="Centrifuge, incubator details">
                        </div>
                    </div>
                </div>
            </div>
            <!-- END test notes -->

            <!-- BEGIN final result -->
            <div class="form-section">
                <h5><i class="fa fa-clipboard-check"></i> Final Crossmatch Result</h5>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="finalResult" class="form-label">
                                Overall Compatibility <span class="required-field">*</span>
                            </label>
                            <select class="form-select" id="finalResult" name="final_result" required>
                                <option value="">Select final result...</option>
                                <option value="compatible">Compatible</option>
                                <option value="incompatible">Incompatible</option>
                                <option value="conditional">Conditional (with restrictions)</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="restrictions" class="form-label">Restrictions/Conditions</label>
                            <input type="text" class="form-control" id="restrictions" name="restrictions" 
                                   placeholder="Any special conditions or restrictions">
                        </div>
                    </div>
                </div>
                
                <!-- Result summary -->
                <div id="resultSummary" class="mt-3">
                    <!-- Will be populated by JavaScript -->
                </div>
            </div>
            <!-- END final result -->

            <!-- BEGIN form actions -->
            <div class="d-flex justify-content-between mt-4">
                <a href="{% url 'blood_bank:blood_unit_detail' blood_unit.id %}" class="btn btn-secondary">
                    <i class="fa fa-arrow-left"></i> Cancel
                </a>
                <div>
                    <button type="button" class="btn btn-info" onclick="validateCrossmatch()">
                        <i class="fa fa-check"></i> Validate Results
                    </button>
                    <button type="submit" class="btn btn-primary" id="submitBtn" disabled>
                        <i class="fa fa-save"></i> Save Crossmatch Results
                    </button>
                </div>
            </div>
            <!-- END form actions -->
        </form>
    </div>
</div>
<!-- END panel -->
{% endblock %}

{% block js %}
<script src="{% static 'plugins/select2/dist/js/select2.min.js' %}"></script>

<script>
$(document).ready(function() {
    // Initialize Select2
    $('#testedBy, #testMethod').select2({
        theme: 'bootstrap-5'
    });

    // Set default test date to now
    var now = new Date();
    $('#testDate').val(now.toISOString().slice(0, 16));

    // Check ABO compatibility on load
    checkABOCompatibility();

    // Update result indicators when test results change
    $('select[name$="_temp"], select[name$="_37c"], select[name$="_ahg"], select[name$="_control"]').on('change', function() {
        updateResultIndicator(this);
        updateResultSummary();
        validateCrossmatch();
    });

    $('#finalResult').on('change', function() {
        updateResultSummary();
        validateCrossmatch();
    });

    // Form validation
    $('#crossmatchForm').on('submit', function(e) {
        if (!validateCrossmatch()) {
            e.preventDefault();
        }
    });
});

function checkABOCompatibility() {
    var patientBloodGroup = "{{ patient.blood_group.display_name|default:'Unknown' }}";
    var donorBloodGroup = "{{ blood_unit.blood_group.display_name }}";
    
    if (patientBloodGroup === "Unknown") {
        $('#aboCompatibility').html('<span class="text-danger">⚠️ Patient blood group unknown</span>');
        return;
    }
    
    // Simple ABO compatibility check
    var compatible = false;
    var message = "";
    
    if (patientBloodGroup === donorBloodGroup) {
        compatible = true;
        message = "✅ Identical blood groups";
    } else if (donorBloodGroup === "O-") {
        compatible = true;
        message = "✅ Universal donor";
    } else if (patientBloodGroup === "AB+" && donorBloodGroup.includes("AB")) {
        compatible = true;
        message = "✅ Compatible";
    } else {
        compatible = false;
        message = "⚠️ Potential incompatibility";
    }
    
    var alertClass = compatible ? 'text-success' : 'text-warning';
    $('#aboCompatibility').html('<span class="' + alertClass + '">' + message + '</span>');
}

function updateResultIndicator(selectElement) {
    var result = $(selectElement).val();
    var indicatorId = $(selectElement).attr('name') + '_indicator';
    var indicator = $('#' + indicatorId);
    
    indicator.removeClass('compatible incompatible pending weak');
    
    switch(result) {
        case 'compatible':
        case 'negative':
            indicator.addClass('compatible');
            break;
        case 'incompatible':
        case 'positive':
            indicator.addClass('incompatible');
            break;
        case 'weak':
            indicator.addClass('weak');
            break;
        default:
            indicator.addClass('pending');
    }
}

function updateResultSummary() {
    var majorResults = ['major_room_temp', 'major_37c', 'major_ahg'];
    var minorResults = ['minor_room_temp', 'minor_37c', 'minor_ahg'];
    var controlResults = ['positive_control', 'negative_control', 'auto_control'];
    
    var majorCompatible = majorResults.every(function(name) {
        var value = $('select[name="' + name + '"]').val();
        return value === 'compatible';
    });
    
    var majorIncompatible = majorResults.some(function(name) {
        var value = $('select[name="' + name + '"]').val();
        return value === 'incompatible';
    });
    
    var controlsValid = 
        $('select[name="positive_control"]').val() === 'positive' &&
        $('select[name="negative_control"]').val() === 'negative' &&
        $('select[name="auto_control"]').val() === 'negative';
    
    var finalResult = $('#finalResult').val();
    
    var summaryHtml = '<div class="row">';
    
    // Major crossmatch summary
    if (majorCompatible) {
        summaryHtml += '<div class="col-md-4"><div class="alert alert-success"><strong>Major Crossmatch:</strong> Compatible</div></div>';
    } else if (majorIncompatible) {
        summaryHtml += '<div class="col-md-4"><div class="alert alert-danger"><strong>Major Crossmatch:</strong> Incompatible</div></div>';
    } else {
        summaryHtml += '<div class="col-md-4"><div class="alert alert-info"><strong>Major Crossmatch:</strong> Pending</div></div>';
    }
    
    // Controls summary
    if (controlsValid) {
        summaryHtml += '<div class="col-md-4"><div class="alert alert-success"><strong>Controls:</strong> Valid</div></div>';
    } else {
        summaryHtml += '<div class="col-md-4"><div class="alert alert-warning"><strong>Controls:</strong> Check Required</div></div>';
    }
    
    // Final result
    if (finalResult === 'compatible') {
        summaryHtml += '<div class="col-md-4"><div class="alert alert-success"><strong>Final Result:</strong> Compatible</div></div>';
    } else if (finalResult === 'incompatible') {
        summaryHtml += '<div class="col-md-4"><div class="alert alert-danger"><strong>Final Result:</strong> Incompatible</div></div>';
    } else if (finalResult === 'conditional') {
        summaryHtml += '<div class="col-md-4"><div class="alert alert-warning"><strong>Final Result:</strong> Conditional</div></div>';
    } else {
        summaryHtml += '<div class="col-md-4"><div class="alert alert-info"><strong>Final Result:</strong> Pending</div></div>';
    }
    
    summaryHtml += '</div>';
    
    // Add safety warnings
    if (majorIncompatible || finalResult === 'incompatible') {
        summaryHtml += '<div class="safety-warning">';
        summaryHtml += '<h6><i class="fa fa-exclamation-triangle"></i> INCOMPATIBLE CROSSMATCH DETECTED</h6>';
        summaryHtml += '<p><strong>This blood unit MUST NOT be transfused to this patient.</strong></p>';
        summaryHtml += '<p>Immediate investigation and alternative blood unit selection required.</p>';
        summaryHtml += '</div>';
    }
    
    $('#resultSummary').html(summaryHtml);
}

function validateCrossmatch() {
    var errors = [];
    
    // Check required fields
    if (!$('#testDate').val()) {
        errors.push('Please enter test date');
    }
    
    if (!$('#testedBy').val()) {
        errors.push('Please select who performed the test');
    }
    
    if (!$('#testMethod').val()) {
        errors.push('Please select test method');
    }
    
    // Check major crossmatch results
    var majorResults = ['major_room_temp', 'major_37c', 'major_ahg'];
    var missingMajor = majorResults.filter(function(name) {
        return !$('select[name="' + name + '"]').val();
    });
    
    if (missingMajor.length > 0) {
        errors.push('Please complete all major crossmatch results');
    }
    
    // Check control results
    var controlResults = ['positive_control', 'negative_control', 'auto_control'];
    var missingControls = controlResults.filter(function(name) {
        return !$('select[name="' + name + '"]').val();
    });
    
    if (missingControls.length > 0) {
        errors.push('Please complete all control test results');
    }
    
    // Check antibody screen
    if (!$('#antibodyScreen').val()) {
        errors.push('Please enter antibody screen result');
    }
    
    // Check final result
    if (!$('#finalResult').val()) {
        errors.push('Please select final compatibility result');
    }
    
    // Validate control results
    var positiveControl = $('select[name="positive_control"]').val();
    var negativeControl = $('select[name="negative_control"]').val();
    var autoControl = $('select[name="auto_control"]').val();
    
    if (positiveControl === 'negative') {
        errors.push('Positive control should be positive - check reagents');
    }
    
    if (negativeControl === 'positive') {
        errors.push('Negative control should be negative - check for contamination');
    }
    
    if (autoControl === 'positive') {
        errors.push('Auto control positive - patient may have autoantibodies');
    }

    // Enable/disable submit button
    $('#submitBtn').prop('disabled', errors.length > 0);

    if (errors.length > 0) {
        if (errors.length < 8) { // Only show errors if validation was explicitly requested
            Swal.fire({
                icon: 'error',
                title: 'Validation Errors',
                html: '<ul class="text-start"><li>' + errors.join('</li><li>') + '</li></ul>',
                confirmButtonText: 'OK'
            });
        }
        return false;
    }

    // Check for incompatibility
    var finalResult = $('#finalResult').val();
    if (finalResult === 'incompatible') {
        Swal.fire({
            icon: 'error',
            title: 'Incompatible Crossmatch',
            html: '<strong>This crossmatch shows incompatibility.</strong><br><br>This blood unit must not be used for this patient. Please select an alternative unit.',
            confirmButtonText: 'I Understand'
        });
    } else if (finalResult === 'compatible') {
        Swal.fire({
            icon: 'success',
            title: 'Compatible Crossmatch',
            text: 'Crossmatch is compatible. Blood unit cleared for transfusion.',
            timer: 1500,
            showConfirmButton: false
        });
    }
    
    return true;
}
</script>
{% endblock %}