{{ extends "global/Page.html" }}
{{ block title }} {{ endblock }}

{{ block content }}


<style>
#corner-display {
            position: fixed;
            top: 10px;
            right: 20px;
            background-color: #f0f0f0;
            padding: 8px 12px;
            border-radius: 8px;
            box-shadow: 0 0 5px rgba(0,0,0,0.1);
            font-weight: bold;
            z-index: 1000;
        }

   </style>




    <div id="corner-display">
        {{ Subject_Number }}
    </div>


{% if Role_Subject_or_Experimenter != 'Experimenter' and Bet_Blue == 'Risky' and Risky_Bag == 'Red' %}


<p style = "text-align: center; margin-bottom: 20px; font-size: 2em;">
    The <span style = "color: blue;">Blue</span> Choice Task was selected for payment.
</p>
<p style = "text-align: center; margin-bottom: 20px; font-size: 1.3em;">
    In the Blue Choice Task, you chose for the draw from <strong>Bag A</strong> to count for your payment.
</p>
<p style = "text-align: center; margin-bottom: 50px; font-size: 1.3em;">
    The draw from Bag A was Red.
</p>

    <div style="text-align: center; margin-bottom: 60px;">
        <img src="https://i.imgur.com/ffmOqcH.png" alt="Red Token" style="max-width: 30%; height: auto;">
    </div>

<p style = "text-align: center; margin-bottom: 20px; font-size: 2em;">
    <strong>You win $0.</strong>
</p>

<p style = "text-align: center; margin-top: 70px; font-size: 1.5em;">
            Final Payment: $5
        </p>



{% elif Role_Subject_or_Experimenter != 'Experimenter' and Bet_Blue == 'Risky' and Risky_Bag == 'Blue' %}


<p style = "text-align: center; margin-bottom: 20px; font-size: 2em;">
    The <span style = "color: blue;">Blue</span> Choice Task was selected for payment.
</p>
<p style = "text-align: center; margin-bottom: 20px; font-size: 1.3em;">
    In the Blue Choice Task, you chose for the draw from <strong>Bag A</strong> to count for your payment.
</p>
<p style = "text-align: center; margin-bottom: 50px; font-size: 1.3em;">
    The draw from Bag A was Blue.
</p>

    <div style="text-align: center; margin-bottom: 60px;">
        <img src="https://i.imgur.com/eaVt125.png" alt="Blue Token" style="max-width: 30%; height: auto;">
    </div>

<p style = "text-align: center; margin-bottom: 20px; font-size: 2em;">
    <strong>You win $10.</strong>
</p>

<p style = "text-align: center; margin-top: 70px; font-size: 1.5em;">
            Final Payment: $15
        </p>


{% elif Role_Subject_or_Experimenter != 'Experimenter' and Bet_Blue == 'Ambiguous' and Ambiguous_Bag == 'Red' %}


<p style = "text-align: center; margin-bottom: 20px; font-size: 2em;">
    The <span style = "color: blue;">Blue</span> Choice Task was selected for payment.
</p>
<p style = "text-align: center; margin-bottom: 20px; font-size: 1.3em;">
    In the Blue Choice Task, you chose for the draw from <strong>Bag B</strong> to count for your payment.
</p>
<p style = "text-align: center; margin-bottom: 50px; font-size: 1.3em;">
    The draw from Bag B was Red.
</p>

    <div style="text-align: center; margin-bottom: 60px;">
        <img src="https://i.imgur.com/ffmOqcH.png" alt="Red Token" style="max-width: 30%; height: auto;">
    </div>

<p style = "text-align: center; margin-bottom: 20px; font-size: 2em;">
    <strong>You win $0.</strong>
</p>

<p style = "text-align: center; margin-top: 70px; font-size: 1.5em;">
            Final Payment: $5
        </p>



{% elif Role_Subject_or_Experimenter != 'Experimenter' and Bet_Blue == 'Ambiguous' and Ambiguous_Bag == 'Blue' %}


<p style = "text-align: center; margin-bottom: 20px; font-size: 2em;">
    The <span style = "color: blue;">Blue</span> Choice Task was selected for payment.
</p>
<p style = "text-align: center; margin-bottom: 20px; font-size: 1.3em;">
    In the Blue Choice Task, you chose for the draw from <strong>Bag B</strong> to count for your payment.
</p>
<p style = "text-align: center; margin-bottom: 50px; font-size: 1.3em;">
    The draw from Bag B was Blue.
</p>

    <div style="text-align: center; margin-bottom: 60px;">
        <img src="https://i.imgur.com/eaVt125.png" alt="Blue Token" style="max-width: 30%; height: auto;">
    </div>

<p style = "text-align: center; margin-bottom: 20px; font-size: 2em;">
    <strong>You win $10.20.</strong>
</p>

<p style = "text-align: center; margin-top: 70px; font-size: 1.5em;">
            Final Payment: $15.20
        </p>




{% else %}



    <button id="proceed-button" type="submit" onclick="sendProceedSignal()" disabled>Proceed</button>








{% endif %}





{{ endblock }}

{{ block scripts }}
<script>
if (js_vars.Role_Subject_or_Experimenter == "Experimenter") {
  setTimeout(function() {
        document.getElementById('proceed-button').disabled = false;
    }, 20000);
}

function liveRecv(data) {
    console.log("Received:", data); // Debug
    if (data === "advance") {
    	setTimeout(function() {
        	document.forms[0].submit();
    	}, 1000); // 1000 milliseconds = 1 second
	}
}

function sendProceedSignal() {
        liveSend("Proceed");
    }
</script>
{{ endblock }}