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

{% block title %}Equipment Check - Operating Theatre{% 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>Operating Room Equipment Check</h4>
                        <h6>Perform pre-operative equipment safety and functionality checks</h6>
                    </div>
                    <div class="page-btn">
                        <a href="{% url 'operating_theatre:operating_room_list' %}" class="btn btn-secondary">
                            <i class="fa fa-arrow-left"></i> Back to OR List
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Equipment Check Form -->
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Equipment Safety Checklist - {{ operating_room.room_number }}</h5>
                        <div class="card-tools">
                            <span class="badge bg-info">{{ check_date|date:"M d, Y" }}</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <form method="post" id="equipmentCheckForm">
                            {% csrf_token %}
                            <input type="hidden" name="operating_room_id" value="{{ operating_room.id }}">
                            <input type="hidden" name="check_date" value="{{ check_date|date:'Y-m-d' }}">

                            <!-- Basic Information -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-primary">Check Information</h6>
                                    <hr>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Operating Room</label>
                                        <input type="text" class="form-control" value="{{ operating_room.room_number }}" readonly>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Check Date/Time *</label>
                                        <input type="datetime-local" name="check_datetime" class="form-control" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Checked By *</label>
                                        <input type="text" class="form-control" value="{{ request.user.get_full_name }}" readonly>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Check Type *</label>
                                        <select name="check_type" class="form-select" required>
                                            <option value="">Select Check Type</option>
                                            <option value="daily">Daily Check</option>
                                            <option value="pre_case">Pre-Case Check</option>
                                            <option value="post_case">Post-Case Check</option>
                                            <option value="maintenance">Maintenance Check</option>
                                            <option value="emergency">Emergency Check</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- Anesthesia Equipment -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-primary">Anesthesia Equipment</h6>
                                    <hr>
                                </div>
                                <div class="col-md-6">
                                    <div class="equipment-check-item mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="anesthesia_machine" id="anesthesiaMachine">
                                            <label class="form-check-label" for="anesthesiaMachine">
                                                <strong>Anesthesia Machine</strong>
                                            </label>
                                        </div>
                                        <div class="check-details ms-4">
                                            <small class="text-muted">Power on, gas supplies connected, alarms functional</small>
                                            <div class="mt-1">
                                                <select name="anesthesia_machine_status" class="form-select form-select-sm">
                                                    <option value="pass">Pass</option>
                                                    <option value="fail">Fail</option>
                                                    <option value="na">N/A</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="equipment-check-item mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="ventilator" id="ventilator">
                                            <label class="form-check-label" for="ventilator">
                                                <strong>Ventilator</strong>
                                            </label>
                                        </div>
                                        <div class="check-details ms-4">
                                            <small class="text-muted">Breathing circuits, pressure checks, leak test</small>
                                            <div class="mt-1">
                                                <select name="ventilator_status" class="form-select form-select-sm">
                                                    <option value="pass">Pass</option>
                                                    <option value="fail">Fail</option>
                                                    <option value="na">N/A</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="equipment-check-item mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="monitors" id="monitors">
                                            <label class="form-check-label" for="monitors">
                                                <strong>Patient Monitors</strong>
                                            </label>
                                        </div>
                                        <div class="check-details ms-4">
                                            <small class="text-muted">ECG, SpO2, NIBP, temperature, capnography</small>
                                            <div class="mt-1">
                                                <select name="monitors_status" class="form-select form-select-sm">
                                                    <option value="pass">Pass</option>
                                                    <option value="fail">Fail</option>
                                                    <option value="na">N/A</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="equipment-check-item mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="suction" id="suction">
                                            <label class="form-check-label" for="suction">
                                                <strong>Suction System</strong>
                                            </label>
                                        </div>
                                        <div class="check-details ms-4">
                                            <small class="text-muted">Vacuum pressure, canisters, tubing</small>
                                            <div class="mt-1">
                                                <select name="suction_status" class="form-select form-select-sm">
                                                    <option value="pass">Pass</option>
                                                    <option value="fail">Fail</option>
                                                    <option value="na">N/A</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="equipment-check-item mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="defibrillator" id="defibrillator">
                                            <label class="form-check-label" for="defibrillator">
                                                <strong>Defibrillator</strong>
                                            </label>
                                        </div>
                                        <div class="check-details ms-4">
                                            <small class="text-muted">Battery charge, pads, self-test passed</small>
                                            <div class="mt-1">
                                                <select name="defibrillator_status" class="form-select form-select-sm">
                                                    <option value="pass">Pass</option>
                                                    <option value="fail">Fail</option>
                                                    <option value="na">N/A</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="equipment-check-item mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="emergency_cart" id="emergencyCart">
                                            <label class="form-check-label" for="emergencyCart">
                                                <strong>Emergency Cart</strong>
                                            </label>
                                        </div>
                                        <div class="check-details ms-4">
                                            <small class="text-muted">Medications, supplies, expiration dates</small>
                                            <div class="mt-1">
                                                <select name="emergency_cart_status" class="form-select form-select-sm">
                                                    <option value="pass">Pass</option>
                                                    <option value="fail">Fail</option>
                                                    <option value="na">N/A</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Surgical Equipment -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-primary">Surgical Equipment</h6>
                                    <hr>
                                </div>
                                <div class="col-md-6">
                                    <div class="equipment-check-item mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="operating_table" id="operatingTable">
                                            <label class="form-check-label" for="operatingTable">
                                                <strong>Operating Table</strong>
                                            </label>
                                        </div>
                                        <div class="check-details ms-4">
                                            <small class="text-muted">Movement controls, positioning, safety locks</small>
                                            <div class="mt-1">
                                                <select name="operating_table_status" class="form-select form-select-sm">
                                                    <option value="pass">Pass</option>
                                                    <option value="fail">Fail</option>
                                                    <option value="na">N/A</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="equipment-check-item mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="surgical_lights" id="surgicalLights">
                                            <label class="form-check-label" for="surgicalLights">
                                                <strong>Surgical Lights</strong>
                                            </label>
                                        </div>
                                        <div class="check-details ms-4">
                                            <small class="text-muted">Brightness, focus, positioning, backup lights</small>
                                            <div class="mt-1">
                                                <select name="surgical_lights_status" class="form-select form-select-sm">
                                                    <option value="pass">Pass</option>
                                                    <option value="fail">Fail</option>
                                                    <option value="na">N/A</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="equipment-check-item mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="electrosurgery" id="electrosurgery">
                                            <label class="form-check-label" for="electrosurgery">
                                                <strong>Electrosurgical Unit</strong>
                                            </label>
                                        </div>
                                        <div class="check-details ms-4">
                                            <small class="text-muted">Power settings, grounding pad, alarms</small>
                                            <div class="mt-1">
                                                <select name="electrosurgery_status" class="form-select form-select-sm">
                                                    <option value="pass">Pass</option>
                                                    <option value="fail">Fail</option>
                                                    <option value="na">N/A</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="equipment-check-item mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="imaging_equipment" id="imagingEquipment">
                                            <label class="form-check-label" for="imagingEquipment">
                                                <strong>Imaging Equipment</strong>
                                            </label>
                                        </div>
                                        <div class="check-details ms-4">
                                            <small class="text-muted">C-arm, ultrasound, image quality</small>
                                            <div class="mt-1">
                                                <select name="imaging_equipment_status" class="form-select form-select-sm">
                                                    <option value="pass">Pass</option>
                                                    <option value="fail">Fail</option>
                                                    <option value="na">N/A</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="equipment-check-item mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="pneumatic_devices" id="pneumaticDevices">
                                            <label class="form-check-label" for="pneumaticDevices">
                                                <strong>Pneumatic Devices</strong>
                                            </label>
                                        </div>
                                        <div class="check-details ms-4">
                                            <small class="text-muted">Tourniquets, compression devices, air pressure</small>
                                            <div class="mt-1">
                                                <select name="pneumatic_devices_status" class="form-select form-select-sm">
                                                    <option value="pass">Pass</option>
                                                    <option value="fail">Fail</option>
                                                    <option value="na">N/A</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="equipment-check-item mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="warming_devices" id="warmingDevices">
                                            <label class="form-check-label" for="warmingDevices">
                                                <strong>Patient Warming</strong>
                                            </label>
                                        </div>
                                        <div class="check-details ms-4">
                                            <small class="text-muted">Warming blankets, fluid warmers, temperature control</small>
                                            <div class="mt-1">
                                                <select name="warming_devices_status" class="form-select form-select-sm">
                                                    <option value="pass">Pass</option>
                                                    <option value="fail">Fail</option>
                                                    <option value="na">N/A</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Environmental Systems -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-primary">Environmental Systems</h6>
                                    <hr>
                                </div>
                                <div class="col-md-6">
                                    <div class="equipment-check-item mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="hvac_system" id="hvacSystem">
                                            <label class="form-check-label" for="hvacSystem">
                                                <strong>HVAC System</strong>
                                            </label>
                                        </div>
                                        <div class="check-details ms-4">
                                            <small class="text-muted">Air pressure, temperature, humidity</small>
                                            <div class="mt-1">
                                                <select name="hvac_system_status" class="form-select form-select-sm">
                                                    <option value="pass">Pass</option>
                                                    <option value="fail">Fail</option>
                                                    <option value="na">N/A</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="equipment-check-item mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="gas_outlets" id="gasOutlets">
                                            <label class="form-check-label" for="gasOutlets">
                                                <strong>Medical Gas Outlets</strong>
                                            </label>
                                        </div>
                                        <div class="check-details ms-4">
                                            <small class="text-muted">O2, N2O, air, vacuum connections</small>
                                            <div class="mt-1">
                                                <select name="gas_outlets_status" class="form-select form-select-sm">
                                                    <option value="pass">Pass</option>
                                                    <option value="fail">Fail</option>
                                                    <option value="na">N/A</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="equipment-check-item mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="electrical_systems" id="electricalSystems">
                                            <label class="form-check-label" for="electricalSystems">
                                                <strong>Electrical Systems</strong>
                                            </label>
                                        </div>
                                        <div class="check-details ms-4">
                                            <small class="text-muted">Power outlets, isolation, emergency power</small>
                                            <div class="mt-1">
                                                <select name="electrical_systems_status" class="form-select form-select-sm">
                                                    <option value="pass">Pass</option>
                                                    <option value="fail">Fail</option>
                                                    <option value="na">N/A</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="equipment-check-item mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="communication" id="communication">
                                            <label class="form-check-label" for="communication">
                                                <strong>Communication Systems</strong>
                                            </label>
                                        </div>
                                        <div class="check-details ms-4">
                                            <small class="text-muted">Intercom, phones, emergency alarms</small>
                                            <div class="mt-1">
                                                <select name="communication_status" class="form-select form-select-sm">
                                                    <option value="pass">Pass</option>
                                                    <option value="fail">Fail</option>
                                                    <option value="na">N/A</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Issues and Comments -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-primary">Issues and Comments</h6>
                                    <hr>
                                </div>
                                <div class="col-12">
                                    <div class="mb-3">
                                        <label class="form-label">Equipment Issues Found</label>
                                        <textarea name="issues_found" class="form-control" rows="3" 
                                                  placeholder="Describe any equipment issues, malfunctions, or concerns..."></textarea>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="mb-3">
                                        <label class="form-label">Corrective Actions Taken</label>
                                        <textarea name="corrective_actions" class="form-control" rows="3" 
                                                  placeholder="Describe any repairs, adjustments, or corrective actions performed..."></textarea>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="mb-3">
                                        <label class="form-label">Additional Comments</label>
                                        <textarea name="additional_comments" class="form-control" rows="2" 
                                                  placeholder="Any additional observations or recommendations..."></textarea>
                                    </div>
                                </div>
                            </div>

                            <!-- Final Certification -->
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-primary">Certification</h6>
                                    <hr>
                                </div>
                                <div class="col-12">
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" name="certification" id="certification" required>
                                        <label class="form-check-label" for="certification">
                                            I certify that I have performed the equipment checks listed above and that all 
                                            equipment is functioning properly and safe for patient use, or that any issues 
                                            have been documented and appropriate actions taken.
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Overall Status *</label>
                                        <select name="overall_status" class="form-select" required>
                                            <option value="">Select Status</option>
                                            <option value="pass">All Equipment Operational</option>
                                            <option value="pass_with_issues">Operational with Minor Issues</option>
                                            <option value="fail">Equipment Failure - Room Not Ready</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Next Check Due</label>
                                        <input type="date" name="next_check_due" class="form-control">
                                    </div>
                                </div>
                            </div>

                            <!-- Action Buttons -->
                            <div class="row">
                                <div class="col-12">
                                    <div class="d-flex justify-content-between">
                                        <button type="button" class="btn btn-secondary" onclick="history.back()">
                                            <i class="fa fa-times"></i> Cancel
                                        </button>
                                        <div>
                                            <button type="button" class="btn btn-warning me-2" id="saveDraftBtn">
                                                <i class="fa fa-save"></i> Save Draft
                                            </button>
                                            <button type="submit" class="btn btn-success btn-lg">
                                                <i class="fa fa-check"></i> Complete Equipment Check
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Room Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <strong>Operating Room:</strong><br>
                            {{ operating_room.room_number }}
                        </div>
                        <div class="mb-3">
                            <strong>Room Type:</strong><br>
                            {{ operating_room.room_type|title }}
                        </div>
                        <div class="mb-3">
                            <strong>Current Status:</strong><br>
                            <span class="badge bg-{{ operating_room.status_color }}">{{ operating_room.status|title }}</span>
                        </div>
                        <div class="mb-3">
                            <strong>Last Equipment Check:</strong><br>
                            {{ last_check.check_datetime|date:"M d, Y H:i"|default:"Never" }}
                        </div>
                        {% if last_check %}
                        <div class="mb-3">
                            <strong>Last Check Status:</strong><br>
                            <span class="badge bg-{{ last_check.status_color }}">{{ last_check.overall_status|title }}</span>
                        </div>
                        {% endif %}
                    </div>
                </div>

                <!-- Equipment Summary -->
                <div class="card mt-3">
                    <div class="card-header">
                        <h5 class="card-title">Equipment Summary</h5>
                    </div>
                    <div class="card-body">
                        <div class="equipment-summary">
                            <div class="d-flex justify-content-between mb-2">
                                <span>Total Items:</span>
                                <span class="badge bg-primary">{{ total_equipment_items|default:16 }}</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span>Checked:</span>
                                <span class="badge bg-success" id="checkedCount">0</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span>Remaining:</span>
                                <span class="badge bg-warning" id="remainingCount">{{ total_equipment_items|default:16 }}</span>
                            </div>
                            <div class="progress mt-3">
                                <div class="progress-bar" role="progressbar" style="width: 0%" id="progressBar"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Recent Checks -->
                <div class="card mt-3">
                    <div class="card-header">
                        <h5 class="card-title">Recent Checks</h5>
                    </div>
                    <div class="card-body">
                        {% for check in recent_checks %}
                        <div class="check-history-item mb-2">
                            <div class="d-flex justify-content-between">
                                <span>{{ check.check_datetime|date:"M d, H:i" }}</span>
                                <span class="badge bg-{{ check.status_color }}">{{ check.overall_status|title }}</span>
                            </div>
                            <small class="text-muted">{{ check.checked_by.get_full_name }}</small>
                        </div>
                        {% empty %}
                        <p class="text-muted">No recent checks</p>
                        {% endfor %}
                    </div>
                </div>

                <!-- Quick Actions -->
                <div class="card mt-3">
                    <div class="card-header">
                        <h5 class="card-title">Quick Actions</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <a href="#" class="btn btn-outline-primary btn-sm">
                                <i class="fa fa-history"></i> View Check History
                            </a>
                            <a href="#" class="btn btn-outline-info btn-sm">
                                <i class="fa fa-print"></i> Print Checklist
                            </a>
                            <a href="#" class="btn btn-outline-warning btn-sm">
                                <i class="fa fa-wrench"></i> Request Maintenance
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Set current time as default check time
    const now = new Date();
    const localDateTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000).toISOString().slice(0, 16);
    document.querySelector('input[name="check_datetime"]').value = localDateTime;

    // Progress tracking
    const checkboxes = document.querySelectorAll('.equipment-check-item input[type="checkbox"]');
    const totalItems = checkboxes.length;
    const checkedCountElement = document.getElementById('checkedCount');
    const remainingCountElement = document.getElementById('remainingCount');
    const progressBar = document.getElementById('progressBar');

    function updateProgress() {
        const checkedCount = document.querySelectorAll('.equipment-check-item input[type="checkbox"]:checked').length;
        const remainingCount = totalItems - checkedCount;
        const progressPercent = (checkedCount / totalItems) * 100;

        checkedCountElement.textContent = checkedCount;
        remainingCountElement.textContent = remainingCount;
        progressBar.style.width = progressPercent + '%';
        progressBar.textContent = Math.round(progressPercent) + '%';
    }

    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', updateProgress);
    });

    // Form validation
    const form = document.getElementById('equipmentCheckForm');
    form.addEventListener('submit', function(e) {
        const certification = document.getElementById('certification');
        
        if (!certification.checked) {
            e.preventDefault();
            alert('Please certify that you have completed the equipment check.');
            certification.focus();
            return false;
        }

        // Check if any equipment failed
        const failedEquipment = document.querySelectorAll('select[name$="_status"] option[value="fail"]:checked');
        if (failedEquipment.length > 0) {
            const issuesFound = document.querySelector('textarea[name="issues_found"]').value.trim();
            if (!issuesFound) {
                e.preventDefault();
                alert('Please document the equipment issues found in the Issues section.');
                document.querySelector('textarea[name="issues_found"]').focus();
                return false;
            }
        }

        // Confirm submission
        if (!confirm('Are you sure you want to submit this equipment check? This action cannot be undone.')) {
            e.preventDefault();
            return false;
        }
    });

    // Save draft functionality
    document.getElementById('saveDraftBtn').addEventListener('click', function() {
        const formData = new FormData(form);
        formData.append('save_draft', 'true');
        
        fetch(form.action, {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Draft saved successfully!');
            } else {
                alert('Error saving draft: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error saving draft');
        });
    });

    // Auto-highlight failed equipment
    const statusSelects = document.querySelectorAll('select[name$="_status"]');
    statusSelects.forEach(select => {
        select.addEventListener('change', function() {
            const checkItem = this.closest('.equipment-check-item');
            if (this.value === 'fail') {
                checkItem.classList.add('border', 'border-danger', 'bg-light');
            } else {
                checkItem.classList.remove('border', 'border-danger', 'bg-light');
            }
        });
    });

    // Initialize progress
    updateProgress();
});
</script>
{% endblock %}