{{ block title }}
    Bonus Payment
{{ endblock }}

{{ block content }}
<div class="card m-3 border-primary">
    <div class="card-body text-center">
        <p class="text-start">We use the millisecond of your computer's inner clock to determine your bonus payment. If the <strong>last two digits</strong> of the stopped clock is strictly less than the probability that you get the bonus payment (<strong class="text-success">{{ win_chance_pct }}%</strong>), you will get $2.50 bonus, and if they are more, then you get nothing.</p>
        
        <p class="text-start text-danger mt-3">Now it is the time to decide your bonus payment. Remember: You can only click the button once.</p>

        <div class="my-5">
            <h1 class="display-1 fw-bold text-monospace" id="timer-display">00</h1>
        </div>

        <button type="button" class="btn btn-danger btn-lg px-5 py-3 fs-4 mb-4" id="stop-btn">
            Click to stop the timer
        </button>

        <div id="result-message" class="alert mt-4 text-start" style="display: none;">
            <h4 class="alert-heading">Bonus payment</h4>
            <p>The last two digits were <strong id="drawn-number-text"></strong> for the timer, and the probability that you get the $2.50 bonus payment is <strong>{{ win_chance_pct }}</strong>.</p>
            <p id="final-verdict-text" class="fw-bold"></p>
        </div>

        <input type="hidden" name="timer_draw" id="timer_draw_input">
        
        <div class="mt-4" id="next-btn-container" style="display: none;">
            <p>Please click next to finish the experiment.</p>
            <button class="btn btn-primary btn-lg">Next</button>
        </div>
    </div>
</div>

<script>
    let timerInterval;
    let currentNumber = 0;
    const display = document.getElementById('timer-display');
    const stopBtn = document.getElementById('stop-btn');
    const nextBtnContainer = document.getElementById('next-btn-container');
    const resultMessage = document.getElementById('result-message');
    const drawnNumberText = document.getElementById('drawn-number-text');
    const finalVerdictText = document.getElementById('final-verdict-text');
    const hiddenInput = document.getElementById('timer_draw_input');
    
    // 获取后端传来的中奖概率
    const winChance = parseFloat("{{ win_chance_pct }}");

    // 页面加载即启动毫秒滚动动画 (每 30 毫秒刷新一次)
    window.onload = function() {
        timerInterval = setInterval(() => {
            currentNumber = Math.floor(Math.random() * 100);
            display.innerText = currentNumber.toString().padStart(2, '0');
        }, 30);
    };

    stopBtn.onclick = function() {
        // 1. 停止动画
        clearInterval(timerInterval);
        
        // 2. 隐藏按钮，防止二次点击
        stopBtn.style.display = 'none';
        
        // 3. 将结果填入隐藏表单
        hiddenInput.value = currentNumber;
        drawnNumberText.innerText = currentNumber.toString().padStart(2, '0');

        // 4. 判断是否中奖
        if (currentNumber < winChance) {
            resultMessage.classList.add("alert-success");
            finalVerdictText.innerText = `Since ${currentNumber} is less than ${winChance}, you WILL get the $2.50 bonus payment!`;
        } else {
            resultMessage.classList.add("alert-secondary");
            finalVerdictText.innerText = `Since ${currentNumber} is greater than or equal to ${winChance}, you will not get the bonus payment.`;
        }

        // 5. 显示结果和 Next 按钮
        resultMessage.style.display = 'block';
        nextBtnContainer.style.display = 'block';
    };
</script>
{{ endblock }}