{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}Final Bonus Draw{% endblock %}

{% block content %}

<div class="card border-info mb-4">
    <div class="card-header bg-info text-white">Part II Bonus</div>
    <div class="card-body text-center">
        {% if player.hl_is_selected %}
            <p>The question randomly selected for you is <strong>Question {{ player.hl_chosen_row }}</strong>.</p>
            <p class="text-success">★ Congratulations! You won an extra bonus of <strong>${{ player.hl_won_prize }}</strong>.</p>
        {% else %}
            <p class="text-muted">Sorry, you didn't win the bonus in this part.</p>
        {% endif %}
    </div>
</div>

<hr>

<div class="card mb-4">
    <div class="card-header bg-primary text-white">Part III: Lottery Selection</div>
    <div class="card-body">
        <p>We have randomly selected one lottery from the 9 choices you completed in Part III, with each choice having an equal probability of being chosen.</p>
        
        <p><strong>Selected: Choice {{ drawn_round }}</strong></p>
        <p><strong>Gameplay for this round:</strong> 
            {% if play_type == "轉盤" %}Spinner{% elif play_type == "拉霸" %}Slot Machine{% else %}Drawing a Number{% endif %}
        </p>

        <p><strong>Please click the button once to draw the prize.</strong></p>
        
        <div id="payoff-draw-root" style="min-height: 350px;"></div>
    </div>
</div>

<div style="display: none;">{{ form.payoff_clicked }}</div>

<div id="next-wrap" style="display:none; margin-top: 18px;" class="text-center">
    <p class="mb-3">Please click "Next" to view your final total compensation.</p>
    <button class="otree-btn-next btn btn-primary px-5">Next</button>
</div>

<script>
    window.PAYOFF_DRAW_CONFIG = {{ payoff_draw_config_json|safe }};
    
    // ★ More robust: check for result text OR that the draw button became disabled (animation done)
    const observer = new MutationObserver((mutations) => {
        const root = document.getElementById('payoff-draw-root');
        const content = root ? root.innerText : '';
        const btnDone = root ? root.querySelector('.lottery-practice-btn[disabled]') : null;
        if (content.match(/The prize is/) || content.match(/Your Number/) || btnDone) {
            document.getElementById('next-wrap').style.display = 'block';
            observer.disconnect(); 
        }
    });

    observer.observe(document.getElementById('payoff-draw-root'), { childList: true, subtree: true, attributes: true });
</script>

<script src="{% static 'lottery_app/game_vis.js' %}?v=20260319_v3"></script>

{% endblock %}