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

{% block title %}
{% if form.instance.pk %}Edit Imaging Order{% else %}New Imaging Order{% endif %}
{% endblock %}

{% block content %}
<!-- BEGIN breadcrumb -->
<ol class="breadcrumb float-xl-end">
    <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
    <li class="breadcrumb-item"><a href="{% url 'radiology:dashboard' %}">Radiology</a></li>
    <li class="breadcrumb-item"><a href="{% url 'radiology:imaging_order_list' %}">Imaging Orders</a></li>
    <li class="breadcrumb-item active">
        {% if form.instance.pk %}Edit Order{% else %}New Order{% endif %}
    </li>
</ol>
<!-- END breadcrumb -->

<!-- BEGIN page-header -->
<h1 class="page-header">
    {% if form.instance.pk %}Edit Imaging Order{% else %}Create New Imaging Order{% endif %}
    <small>{% if form.instance.pk %}{{ form.instance.order_number }}{% else %}Complete the form below{% endif %}</small>
</h1>
<!-- END page-header -->

<!-- BEGIN row -->
<div class="row">
    <div class="col-xl-8">
        <form method="post" id="orderForm" class="needs-validation" novalidate>
            {% csrf_token %}
            
            <!-- Order Information -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Order Information</h4>
                    <div class="panel-heading-btn">
                        <button type="button" class="btn btn-secondary btn-sm" onclick="saveDraft()">
                            <i class="fa fa-save me-1"></i>Save Draft
                        </button>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="{{ form.patient.id_for_label }}" class="form-label required">Patient</label>
                                <div class="input-group">
                                    {{ form.patient }}
                                    <button type="button" class="btn btn-outline-secondary" onclick="searchPatient()">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </div>
                                {% if form.patient.errors %}
                                <div class="invalid-feedback d-block">{{ form.patient.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="{{ form.ordering_provider.id_for_label }}" class="form-label required">Ordering Provider</label>
                                {{ form.ordering_provider }}
                                {% if form.ordering_provider.errors %}
                                <div class="invalid-feedback d-block">{{ form.ordering_provider.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="{{ form.study_type.id_for_label }}" class="form-label required">Study Type</label>
                                {{ form.study_type }}
                                {% if form.study_type.errors %}
                                <div class="invalid-feedback d-block">{{ form.study_type.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="{{ form.modality.id_for_label }}" class="form-label required">Modality</label>
                                {{ form.modality }}
                                {% if form.modality.errors %}
                                <div class="invalid-feedback d-block">{{ form.modality.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="{{ form.body_part.id_for_label }}" class="form-label required">Body Part</label>
                                {{ form.body_part }}
                                {% if form.body_part.errors %}
                                <div class="invalid-feedback d-block">{{ form.body_part.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="{{ form.priority.id_for_label }}" class="form-label required">Priority</label>
                                {{ form.priority }}
                                {% if form.priority.errors %}
                                <div class="invalid-feedback d-block">{{ form.priority.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="{{ form.order_date.id_for_label }}" class="form-label required">Order Date</label>
                                {{ form.order_date }}
                                {% if form.order_date.errors %}
                                <div class="invalid-feedback d-block">{{ form.order_date.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="{{ form.scheduled_date.id_for_label }}" class="form-label">Scheduled Date</label>
                                {{ form.scheduled_date }}
                                {% if form.scheduled_date.errors %}
                                <div class="invalid-feedback d-block">{{ form.scheduled_date.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="{{ form.clinical_indication.id_for_label }}" class="form-label required">Clinical Indication</label>
                        {{ form.clinical_indication }}
                        <div class="form-text">Provide detailed clinical reason for the imaging study</div>
                        {% if form.clinical_indication.errors %}
                        <div class="invalid-feedback d-block">{{ form.clinical_indication.errors.0 }}</div>
                        {% endif %}
                    </div>

                    <div class="mb-3">
                        <label for="{{ form.special_instructions.id_for_label }}" class="form-label">Special Instructions</label>
                        {{ form.special_instructions }}
                        <div class="form-text">Any special preparation or instructions for the study</div>
                        {% if form.special_instructions.errors %}
                        <div class="invalid-feedback d-block">{{ form.special_instructions.errors.0 }}</div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Contrast Information -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Contrast Information</h4>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="mb-3">
                                <div class="form-check">
                                    {{ form.contrast_required }}
                                    <label class="form-check-label" for="{{ form.contrast_required.id_for_label }}">
                                        Contrast Required
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3" id="contrastTypeDiv" style="display: none;">
                            <div class="mb-3">
                                <label for="{{ form.contrast_type.id_for_label }}" class="form-label">Contrast Type</label>
                                {{ form.contrast_type }}
                                {% if form.contrast_type.errors %}
                                <div class="invalid-feedback d-block">{{ form.contrast_type.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-3" id="contrastAmountDiv" style="display: none;">
                            <div class="mb-3">
                                <label for="{{ form.contrast_amount.id_for_label }}" class="form-label">Amount (ml)</label>
                                {{ form.contrast_amount }}
                                {% if form.contrast_amount.errors %}
                                <div class="invalid-feedback d-block">{{ form.contrast_amount.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-3" id="contrastRouteDiv" style="display: none;">
                            <div class="mb-3">
                                <label for="{{ form.contrast_route.id_for_label }}" class="form-label">Route</label>
                                {{ form.contrast_route }}
                                {% if form.contrast_route.errors %}
                                <div class="invalid-feedback d-block">{{ form.contrast_route.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <div id="contrastWarnings" style="display: none;">
                        <div class="alert alert-warning">
                            <h6 class="alert-heading">
                                <i class="fa fa-exclamation-triangle me-2"></i>Contrast Safety Checklist
                            </h6>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="kidneyFunction">
                                <label class="form-check-label" for="kidneyFunction">
                                    Kidney function assessed (eGFR > 30)
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="allergies">
                                <label class="form-check-label" for="allergies">
                                    Contrast allergies reviewed
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="medications">
                                <label class="form-check-label" for="medications">
                                    Medications reviewed (Metformin, etc.)
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Resource Assignment -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Resource Assignment</h4>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="{{ form.equipment.id_for_label }}" class="form-label">Equipment</label>
                                {{ form.equipment }}
                                <div class="form-text">Select specific equipment if required</div>
                                {% if form.equipment.errors %}
                                <div class="invalid-feedback d-block">{{ form.equipment.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="{{ form.technologist.id_for_label }}" class="form-label">Technologist</label>
                                {{ form.technologist }}
                                <div class="form-text">Assign specific technologist if needed</div>
                                {% if form.technologist.errors %}
                                <div class="invalid-feedback d-block">{{ form.technologist.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="{{ form.room.id_for_label }}" class="form-label">Room</label>
                                {{ form.room }}
                                <div class="form-text">Specify room if required</div>
                                {% if form.room.errors %}
                                <div class="invalid-feedback d-block">{{ form.room.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Patient Safety -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Patient Safety Information</h4>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="{{ form.pregnancy_status.id_for_label }}" class="form-label">Pregnancy Status</label>
                                {{ form.pregnancy_status }}
                                {% if form.pregnancy_status.errors %}
                                <div class="invalid-feedback d-block">{{ form.pregnancy_status.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="{{ form.weight.id_for_label }}" class="form-label">Patient Weight (kg)</label>
                                {{ form.weight }}
                                <div class="form-text">Required for contrast dosing calculations</div>
                                {% if form.weight.errors %}
                                <div class="invalid-feedback d-block">{{ form.weight.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Safety Checklist</label>
                        <div class="border rounded p-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="metalScreening" required>
                                <label class="form-check-label" for="metalScreening">
                                    Metal screening completed (for MRI)
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="allergiesReviewed" required>
                                <label class="form-check-label" for="allergiesReviewed">
                                    Patient allergies reviewed
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="consentObtained" required>
                                <label class="form-check-label" for="consentObtained">
                                    Informed consent obtained
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="panel panel-inverse">
                <div class="panel-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <a href="{% url 'radiology:imaging_order_list' %}" class="btn btn-secondary">
                                <i class="fa fa-arrow-left me-1"></i>Cancel
                            </a>
                        </div>
                        <div>
                            <button type="button" class="btn btn-outline-primary me-2" onclick="saveDraft()">
                                <i class="fa fa-save me-1"></i>Save Draft
                            </button>
                            <button type="submit" class="btn btn-primary">
                                <i class="fa fa-check me-1"></i>
                                {% if form.instance.pk %}Update Order{% else %}Create Order{% endif %}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="col-xl-4">
        <!-- Patient Information -->
        <div class="panel panel-inverse" id="patientInfo" style="display: none;">
            <div class="panel-heading">
                <h4 class="panel-title">Patient Information</h4>
            </div>
            <div class="panel-body" id="patientInfoContent">
                <!-- Patient details will be loaded here -->
            </div>
        </div>

        <!-- Order Guidelines -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Ordering Guidelines</h4>
            </div>
            <div class="panel-body">
                <div class="accordion" id="guidelinesAccordion">
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#contrastGuidelines">
                                Contrast Guidelines
                            </button>
                        </h2>
                        <div id="contrastGuidelines" class="accordion-collapse collapse" data-bs-parent="#guidelinesAccordion">
                            <div class="accordion-body">
                                <ul class="list-unstyled">
                                    <li><i class="fa fa-check text-success me-2"></i>Check kidney function (eGFR)</li>
                                    <li><i class="fa fa-check text-success me-2"></i>Review contrast allergies</li>
                                    <li><i class="fa fa-check text-success me-2"></i>Hold Metformin if needed</li>
                                    <li><i class="fa fa-check text-success me-2"></i>Ensure adequate hydration</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#preparationGuidelines">
                                Patient Preparation
                            </button>
                        </h2>
                        <div id="preparationGuidelines" class="accordion-collapse collapse" data-bs-parent="#guidelinesAccordion">
                            <div class="accordion-body">
                                <ul class="list-unstyled">
                                    <li><i class="fa fa-info text-info me-2"></i>CT Abdomen: NPO 4 hours</li>
                                    <li><i class="fa fa-info text-info me-2"></i>MRI: Remove all metal objects</li>
                                    <li><i class="fa fa-info text-info me-2"></i>Ultrasound: Specific prep varies</li>
                                    <li><i class="fa fa-info text-info me-2"></i>Nuclear Medicine: Special instructions</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#urgencyGuidelines">
                                Urgency Levels
                            </button>
                        </h2>
                        <div id="urgencyGuidelines" class="accordion-collapse collapse" data-bs-parent="#guidelinesAccordion">
                            <div class="accordion-body">
                                <ul class="list-unstyled">
                                    <li><span class="badge bg-danger me-2">STAT</span>Immediate (< 1 hour)</li>
                                    <li><span class="badge bg-warning text-dark me-2">Urgent</span>Same day (< 8 hours)</li>
                                    <li><span class="badge bg-success me-2">Routine</span>Within 48 hours</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Templates -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Quick Templates</h4>
            </div>
            <div class="panel-body">
                <div class="d-grid gap-2">
                    <button type="button" class="btn btn-outline-primary btn-sm" onclick="loadTemplate('chest_xray')">
                        <i class="fa fa-lungs me-1"></i>Chest X-Ray
                    </button>
                    <button type="button" class="btn btn-outline-primary btn-sm" onclick="loadTemplate('ct_head')">
                        <i class="fa fa-brain me-1"></i>CT Head
                    </button>
                    <button type="button" class="btn btn-outline-primary btn-sm" onclick="loadTemplate('mri_knee')">
                        <i class="fa fa-walking me-1"></i>MRI Knee
                    </button>
                    <button type="button" class="btn btn-outline-primary btn-sm" onclick="loadTemplate('ultrasound_abdomen')">
                        <i class="fa fa-heartbeat me-1"></i>US Abdomen
                    </button>
                </div>
            </div>
        </div>

        <!-- Contact Information -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title">Contact Information</h4>
            </div>
            <div class="panel-body">
                <div class="text-center">
                    <div class="mb-2">
                        <i class="fa fa-phone me-2"></i>
                        <strong>(555) 123-4567</strong>
                    </div>
                    <div class="mb-2">
                        <i class="fa fa-envelope me-2"></i>
                        <strong>radiology@hospital.com</strong>
                    </div>
                    <div class="mb-3">
                        <i class="fa fa-clock me-2"></i>
                        <small class="text-muted">24/7 Emergency Services</small>
                    </div>
                    <div class="d-grid">
                        <a href="tel:+15551234567" class="btn btn-outline-primary btn-sm">
                            <i class="fa fa-phone me-1"></i>Call Department
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END row -->

<!-- Patient Search Modal -->
<div class="modal fade" id="patientSearchModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Search Patient</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- Patient search content -->
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
$(document).ready(function() {
    // Initialize form validation
    initializeFormValidation();
    
    // Handle contrast required checkbox
    $('#{{ form.contrast_required.id_for_label }}').change(function() {
        toggleContrastFields();
    });
    
    // Handle patient selection
    $('#{{ form.patient.id_for_label }}').change(function() {
        loadPatientInfo();
    });
    
    // Handle modality change
    $('#{{ form.modality.id_for_label }}').change(function() {
        updateEquipmentOptions();
    });
    
    // Auto-save every 2 minutes
    setInterval(function() {
        autoSave();
    }, 120000);
    
    // Initialize on page load
    toggleContrastFields();
    if ($('#{{ form.patient.id_for_label }}').val()) {
        loadPatientInfo();
    }
});

function initializeFormValidation() {
    // Bootstrap validation
    (function() {
        'use strict';
        window.addEventListener('load', function() {
            var forms = document.getElementsByClassName('needs-validation');
            var validation = Array.prototype.filter.call(forms, function(form) {
                form.addEventListener('submit', function(event) {
                    if (form.checkValidity() === false) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated');
                }, false);
            });
        }, false);
    })();
}

function toggleContrastFields() {
    var contrastRequired = $('#{{ form.contrast_required.id_for_label }}').is(':checked');
    
    if (contrastRequired) {
        $('#contrastTypeDiv, #contrastAmountDiv, #contrastRouteDiv, #contrastWarnings').show();
        $('#{{ form.contrast_type.id_for_label }}, #{{ form.contrast_amount.id_for_label }}').prop('required', true);
    } else {
        $('#contrastTypeDiv, #contrastAmountDiv, #contrastRouteDiv, #contrastWarnings').hide();
        $('#{{ form.contrast_type.id_for_label }}, #{{ form.contrast_amount.id_for_label }}').prop('required', false);
    }
}

function loadPatientInfo() {
    var patientId = $('#{{ form.patient.id_for_label }}').val();
    
    if (patientId) {
        $.ajax({
            url: '{% url "patients:patient_info_ajax" %}',
            data: {'patient_id': patientId},
            success: function(response) {
                $('#patientInfoContent').html(response.html);
                $('#patientInfo').show();
                
                // Auto-fill weight if available
                if (response.weight) {
                    $('#{{ form.weight.id_for_label }}').val(response.weight);
                }
                
                // Show pregnancy warning if applicable
                if (response.is_female && response.age >= 12 && response.age <= 55) {
                    showPregnancyWarning();
                }
            },
            error: function() {
                toastr.error('Failed to load patient information');
            }
        });
    } else {
        $('#patientInfo').hide();
    }
}

function updateEquipmentOptions() {
    var modality = $('#{{ form.modality.id_for_label }}').val();
    
    if (modality) {
        $.ajax({
            url: '{% url "radiology:equipment_by_modality" %}',
            data: {'modality': modality},
            success: function(response) {
                var equipmentSelect = $('#{{ form.equipment.id_for_label }}');
                equipmentSelect.empty();
                equipmentSelect.append('<option value="">---------</option>');
                
                $.each(response.equipment, function(index, item) {
                    var status = item.status === 'available' ? '' : ' (Unavailable)';
                    equipmentSelect.append('<option value="' + item.id + '">' + item.name + status + '</option>');
                });
            },
            error: function() {
                toastr.error('Failed to load equipment options');
            }
        });
    }
}

function searchPatient() {
    $('#patientSearchModal').modal('show');
    // Load patient search form via AJAX
}

function loadTemplate(templateType) {
    $.ajax({
        url: '{% url "radiology:order_template" %}',
        data: {'template': templateType},
        success: function(response) {
            // Fill form fields with template data
            if (response.study_type) $('#{{ form.study_type.id_for_label }}').val(response.study_type);
            if (response.modality) $('#{{ form.modality.id_for_label }}').val(response.modality);
            if (response.body_part) $('#{{ form.body_part.id_for_label }}').val(response.body_part);
            if (response.clinical_indication) $('#{{ form.clinical_indication.id_for_label }}').val(response.clinical_indication);
            if (response.special_instructions) $('#{{ form.special_instructions.id_for_label }}').val(response.special_instructions);
            
            // Update equipment options based on modality
            updateEquipmentOptions();
            
            toastr.success('Template loaded successfully');
        },
        error: function() {
            toastr.error('Failed to load template');
        }
    });
}

function saveDraft() {
    var formData = $('#orderForm').serialize();
    formData += '&is_draft=true';
    
    $.ajax({
        url: $('#orderForm').attr('action') || '{% url "radiology:imaging_order_create" %}',
        method: 'POST',
        data: formData,
        success: function(response) {
            if (response.success) {
                toastr.success('Draft saved successfully');
                if (response.order_id && !$('#orderForm').data('order-id')) {
                    $('#orderForm').data('order-id', response.order_id);
                    // Update form action for future saves
                    $('#orderForm').attr('action', '{% url "radiology:imaging_order_edit" 0 %}'.replace('0', response.order_id));
                }
            } else {
                toastr.error('Failed to save draft');
            }
        },
        error: function() {
            toastr.error('Failed to save draft');
        }
    });
}

function autoSave() {
    // Only auto-save if form has been modified
    if ($('#orderForm').data('modified')) {
        saveDraft();
        $('#orderForm').data('modified', false);
    }
}

function showPregnancyWarning() {
    if (!$('#pregnancyWarning').length) {
        var warning = '<div id="pregnancyWarning" class="alert alert-warning mt-3">' +
                     '<h6 class="alert-heading"><i class="fa fa-exclamation-triangle me-2"></i>Pregnancy Screening Required</h6>' +
                     '<p class="mb-0">Patient is female of childbearing age. Please verify pregnancy status before proceeding with imaging.</p>' +
                     '</div>';
        $('#patientInfoContent').append(warning);
    }
}

// Track form modifications
$('#orderForm input, #orderForm select, #orderForm textarea').on('change input', function() {
    $('#orderForm').data('modified', true);
});

// Form submission
$('#orderForm').on('submit', function(e) {
    e.preventDefault();
    
    // Validate safety checklist
    var safetyChecks = ['#metalScreening', '#allergiesReviewed', '#consentObtained'];
    var allChecked = true;
    
    safetyChecks.forEach(function(check) {
        if (!$(check).is(':checked')) {
            allChecked = false;
        }
    });
    
    if (!allChecked) {
        toastr.error('Please complete all safety checklist items');
        return;
    }
    
    // Submit form
    this.submit();
});
</script>
{% endblock %}