{{ extends "global/Page.html" }}
{{ block title }}Post-Task Survey - Weights{{ endblock }}

{{ block content }}

<link rel="stylesheet" href="{{ static 'hiring-funnel.css' }}">

<p>In making your <strong>final hiring decisions</strong> (Gate 3 decisions), how much weight did you give to each score? Please allocate 100 points total.</p>

<div style="margin-top: 30px;">
    <!-- Resume Score Weight -->
    <div style="margin-bottom: 25px;">
        <label for="resume_weight" style="display: block; margin-bottom: 8px; font-weight: 600;">Stage 1: Resume Weight</label>
        <div style="display: flex; align-items: center; gap: 15px;">
            <input type="range" id="resume_weight" name="resume_weight" min="0" max="100" value="0" style="flex: 1; min-width: 200px; height: 6px;">
            <span id="resume_value" style="min-width: 50px; text-align: center; font-weight: 600; font-size: 16px;">0</span>
        </div>
    </div>

    <!-- Zoom Interview Score Weight -->
    <div style="margin-bottom: 25px;">
        <label for="zoom_weight" style="display: block; margin-bottom: 8px; font-weight: 600;">Stage 2: Zoom Weight</label>
        <div style="display: flex; align-items: center; gap: 15px;">
            <input type="range" id="zoom_weight" name="zoom_weight" min="0" max="100" value="0" style="flex: 1; min-width: 200px; height: 6px;">
            <span id="zoom_value" style="min-width: 50px; text-align: center; font-weight: 600; font-size: 16px;">0</span>
        </div>
    </div>

    <!-- In-person Interview Score Weight -->
    <div style="margin-bottom: 25px;">
        <label for="inperson_weight" style="display: block; margin-bottom: 8px; font-weight: 600;">Stage 3: In-Person Weight</label>
        <div style="display: flex; align-items: center; gap: 15px;">
            <input type="range" id="inperson_weight" name="inperson_weight" min="0" max="100" value="0" style="flex: 1; min-width: 200px; height: 6px;">
            <span id="inperson_value" style="min-width: 50px; text-align: center; font-weight: 600; font-size: 16px;">0</span>
        </div>
    </div>
</div>

<div id="total-display" style="font-weight: 600; margin-top: 25px; padding: 12px; background-color: #f0f0f0; border-radius: 4px; text-align: center; font-size: 18px;">
    Total: 0 / 100
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const resumeInput = document.getElementById('resume_weight');
    const zoomInput = document.getElementById('zoom_weight');
    const inpersonInput = document.getElementById('inperson_weight');
    const totalDisplay = document.getElementById('total-display');
    const nextButton = document.querySelector('button[type="submit"]') || document.querySelector('input[type="submit"]');
    
    // Disable next button on load
    if (nextButton) {
        nextButton.disabled = true;
    }
    
    function updateDisplay() {
        const resume = parseInt(resumeInput.value) || 0;
        const zoom = parseInt(zoomInput.value) || 0;
        const inperson = parseInt(inpersonInput.value) || 0;
        const total = resume + zoom + inperson;
        
        // Update value displays
        document.getElementById('resume_value').textContent = resume;
        document.getElementById('zoom_value').textContent = zoom;
        document.getElementById('inperson_value').textContent = inperson;
        
        // Update total display
        totalDisplay.textContent = `Total: ${total} / 100`;
        
        // Enable/disable next button
        if (total === 100) {
            totalDisplay.style.backgroundColor = '#e8f5e9';
            totalDisplay.style.color = '#2e7d32';
            totalDisplay.textContent = `Total: ${total} / 100 ✅`;
            if (nextButton) {
                nextButton.disabled = false;
            }
        } else {
            totalDisplay.style.backgroundColor = '#fff3e0';
            totalDisplay.style.color = '#e65100';
            totalDisplay.textContent = `Total: ${total} / 100`;
            if (nextButton) {
                nextButton.disabled = true;
            }
        }
    }
    
    // Add event listeners to all range inputs
    [resumeInput, zoomInput, inpersonInput].forEach(input => {
        input.addEventListener('input', updateDisplay);
        input.addEventListener('change', updateDisplay);
    });
    
    // Initial update
    updateDisplay();
});
</script>

{{ next_button }}

{{ endblock }}