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

{{ block content }}


<style>

/* ===============================
   GLOBAL
   =============================== */

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

/* ===============================
   PAGE LAYOUT
   =============================== */


/* TOP HALF: image + decisions */
.top-half {
    overflow-y: auto;
    padding: 20px 40px;
}



/* ===============================
   SUBJECT VIEW STYLING (UNCHANGED)
   =============================== */

#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;
}

.container {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.choice-block {
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    width: 370px;
    text-align: center;
    background-color: white;
}

.choice-block h2.red-title {
    color: red;
    margin-top: 0;
}

.choice-block h2.blue-title {
    color: blue;
    margin-top: 0;
}

.subheading {
    font-style: italic;
    margin-bottom: 10px;
}

.choices {
    text-align: left;
    margin: 0 auto;
    display: inline-block;
}

label {
    display: block;
    margin: 8px 0;
}

.submit-button {
    margin-top: 20px;
}

.disabled {
    pointer-events: none;
}

    #blue-choice-block {
        box-shadow: 0 0 10px 3px rgba(0, 128, 0, 0.4); /* green shadow */
        background-color: white;
    }

    #red-choice-block {
        box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.3); /* gray shadow */
        opacity: 0.5;
        background-color: #f0f0f0;
        position: relative;
        overflow: hidden;
    }

    #red-choice-block::before,
    #red-choice-block::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 250%;
        background-color: black;
        top: 0;
        z-index: 10;
        pointer-events: none;
    }

    #red-choice-block::before {
        left: calc(0% - 19px);
        transform-origin: top left;
        transform: rotate(-57deg);
    }

    #red-choice-block::after {
        left: calc(100%);
        transform-origin: top right;
        transform: rotate(57deg);
    }

@media (max-width: 900px) {
    .container {
        flex-direction: column;
        align-items: center;
    }
}

/* ===============================
   EXPERIMENTER VIEW (UNCHANGED)
   =============================== */

.exp-container {
    display: flex;
    justify-content: space-between;
    padding: 40px;
}

</style>


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

<div class="page-layout">

    <!-- TOP HALF -->
    <div class="top-half">

        <div id="corner-display">
            {{ Subject_Number }}
        </div>
        
        <p style = "text-align: center; margin-bottom: 30px; font-size: 2.2em;">
    The result of your coin flip was <strong>Heads</strong>.
</p>

        <!-- IMAGE (ABOVE DECISIONS) -->
        <div style="text-align: center; margin-bottom: 30px;">
            <img
                src="https://i.imgur.com/799jodZ.png"
                alt="Bag Image"
                style="max-width: 100%; height: auto;"
            >
        </div>

        <!-- DECISIONS -->
        <div class="container">

            <!-- RED -->
            <div style="display: flex; flex-direction: column; align-items: center;">
                <div style="width: 370px; text-align: left; margin-bottom: 10px; font-size: 1.3em;">
                    You will <strong> NOT </strong> be paid if red was drawn.
                </div>
                <div class="choice-block disabled" id="red-choice-block">
                    <h2 class="red-title">Red</h2>
                    <div class="subheading">(Please choose Bag A or Bag B)</div>
                    <div class="choices">
                        <label>
                            <input type="radio" name="red_choice" value="a" disabled>
                            Bag A - Receive $10 if red is drawn
                        </label>
                        <label>
                            <input type="radio" name="red_choice" value="b" disabled>
                            Bag B - Receive $10.20 if red is drawn
                        </label>
                    </div>
                    <div class="submit-button">
                        <button disabled>Submit Red Choice</button>
                    </div>
                </div>
            </div>

            <!-- BLUE -->
            <div style="display: flex; flex-direction: column; align-items: center;">
                <div style="width: 370px; text-align: left; margin-bottom: 10px; font-size: 1.3em;">
                    You <strong> WILL </strong> be paid if blue was drawn.
                </div>
                <div class="choice-block disabled" id="blue-choice-block">
                    <h2 class="blue-title">Blue</h2>
                    <div class="subheading">(Please choose Bag A or Bag B)</div>
                    <div class="choices">
                        <label>
                            <input type="radio" name="blue_choice" value="a" disabled>
                            Bag A - Receive $10 if blue is drawn
                        </label>
                        <label>
                            <input type="radio" name="blue_choice" value="b" disabled>
                            Bag B - Receive $10.20 if blue is drawn
                        </label>
                    </div>
                    <div class="submit-button">
                        <button disabled>Submit Blue Choice</button>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- BOTTOM HALF -->
    <div class="bottom-half">
            {% if Risky_Bag == 'Red' %}
            <p style = "text-align: center; margin-bottom: 20px; margin-top: 20px; font-size: 1.6em;">
    You are being paid for your decision in the <span style = "color: blue;">Blue</span> Choice Task.
</p>
<p style = "text-align: center; margin-bottom: 20px; font-size: 1em;">
    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: 45px; font-size: 1em;">
    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: 15%; height: auto;">
    </div>
    <p style = "text-align: center; margin-bottom: 20px; font-size: 1.6em;">
    <strong>You win $0.</strong>
</p>
    <p style = "text-align: center; margin-top: 70px; font-size: 1.5em;">
            Final Payment: $5
        </p>
        </div>
        {% elif Risky_Bag == 'Blue' %}
            <p style = "text-align: center; margin-bottom: 20px; margin-top: 20px; font-size: 1.6em;">
    You are being paid for your decision in the <span style = "color: blue;">Blue</span> Choice Task.
</p>
<p style = "text-align: center; margin-bottom: 20px; font-size: 1em;">
    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: 45px; font-size: 1em;">
    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: 15%; height: auto;">
    </div>
    <p style = "text-align: center; margin-bottom: 20px; font-size: 1.6em;">
    <strong>You win $10.</strong>
</p>
    <p style = "text-align: center; margin-top: 70px; font-size: 1.5em;">
            Final Payment: $15
        </p>

        {% endif %}

</div>





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


<div class="page-layout">

    <!-- TOP HALF -->
    <div class="top-half">

        <div id="corner-display">
            {{ Subject_Number }}
        </div>
        
        <p style = "text-align: center; margin-bottom: 30px; font-size: 2.2em;">
    The result of your coin flip was <strong>Heads</strong>.
</p>

        <!-- IMAGE (ABOVE DECISIONS) -->
        <div style="text-align: center; margin-bottom: 30px;">
            <img
                src="https://i.imgur.com/799jodZ.png"
                alt="Bag Image"
                style="max-width: 100%; height: auto;"
            >
        </div>

        <!-- DECISIONS -->
        <div class="container">

            <!-- RED -->
            <div style="display: flex; flex-direction: column; align-items: center;">
                <div style="width: 370px; text-align: left; margin-bottom: 10px; font-size: 1.3em;">
                    You will <strong> NOT </strong> be paid if red was drawn.
                </div>
                <div class="choice-block disabled" id="red-choice-block">
                    <h2 class="red-title">Red</h2>
                    <div class="subheading">(Please choose Bag A or Bag B)</div>
                    <div class="choices">
                        <label>
                            <input type="radio" name="red_choice" value="a" disabled>
                            Bag A - Receive $10 if red is drawn
                        </label>
                        <label>
                            <input type="radio" name="red_choice" value="b" disabled>
                            Bag B - Receive $10.20 if red is drawn
                        </label>
                    </div>
                    <div class="submit-button">
                        <button disabled>Submit Red Choice</button>
                    </div>
                </div>
            </div>

            <!-- BLUE -->
            <div style="display: flex; flex-direction: column; align-items: center;">
                <div style="width: 370px; text-align: left; margin-bottom: 10px; font-size: 1.3em;">
                    You <strong> WILL </strong> be paid if blue was drawn.
                </div>
                <div class="choice-block disabled" id="blue-choice-block">
                    <h2 class="blue-title">Blue</h2>
                    <div class="subheading">(Please choose Bag A or Bag B)</div>
                    <div class="choices">
                        <label>
                            <input type="radio" name="blue_choice" value="a" disabled>
                            Bag A - Receive $10 if blue is drawn
                        </label>
                        <label>
                            <input type="radio" name="blue_choice" value="b" disabled>
                            Bag B - Receive $10.20 if blue is drawn
                        </label>
                    </div>
                    <div class="submit-button">
                        <button disabled>Submit Blue Choice</button>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- BOTTOM HALF -->
    <div class="bottom-half">
        {% if Ambiguous_Bag == 'Red' %}
            <p style = "text-align: center; margin-bottom: 20px; margin-top: 20px; font-size: 1.6em;">
    You are being paid for your decision in the <span style = "color: blue;">Blue</span> Choice Task.
</p>
<p style = "text-align: center; margin-bottom: 20px; font-size: 1em;">
    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: 45px; font-size: 1em;">
    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: 15%; height: auto;">
    </div>
    <p style = "text-align: center; margin-bottom: 20px; font-size: 1.6em;">
    <strong>You win $0.</strong>
</p>
    <p style = "text-align: center; margin-top: 70px; font-size: 1.5em;">
            Final Payment: $5
        </p>
        </div>
        {% elif Ambiguous_Bag == 'Blue' %}
            <p style = "text-align: center; margin-bottom: 20px; margin-top: 20px; font-size: 1.6em;">
    You are being paid for your decision in the <span style = "color: blue;">Blue</span> Choice Task.
</p>
<p style = "text-align: center; margin-bottom: 20px; font-size: 1em;">
    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: 45px; font-size: 1em;">
    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: 15%; height: auto;">
    </div>
    <p style = "text-align: center; margin-bottom: 20px; font-size: 1.6em;">
    <strong>You win $10.20.</strong>
</p>

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

</div>




{% else %}

<p>
    Everyone should have already been paid. You can now click "Proceed".
</p>

<div style="text-align: center;">
    <button id="proceed-button" type="submit" onclick="sendProceedSignal()">Proceed</button>
</div>


{% endif %}


{{ endblock }}

{{ block scripts }}
<script>
let Subject_Number = js_vars.Subject_Number
let Bet_Blue = js_vars.Bet_Blue
let Bet_Red = js_vars.Bet_Red
let Role_Subject_or_Experimenter = js_vars.Role_Subject_or_Experimenter



let elem = null




if (elem) {
    elem.style.display = 'block';
  }

if (Bet_Red == "Risky") {
  document.querySelector('input[name="red_choice"][value="a"]').checked = true;
} else if (Bet_Red == "Ambiguous") {
  document.querySelector('input[name="red_choice"][value="b"]').checked = true;
}

if (Bet_Blue == "Risky") {
  document.querySelector('input[name="blue_choice"][value="a"]').checked = true;
} else if (Bet_Blue == "Ambiguous") {
  document.querySelector('input[name="blue_choice"][value="b"]').checked = true;
}


function sendProceedSignal() {
        liveSend("Proceed");
    }




function liveRecv(data) {
    console.log("liveRecv triggered with data:", data);  // DEBUG LOG
  	 if (data === "advance") {
        setTimeout(function() {
        	document.forms[0].submit();
    	}, 1000); 
    } 
}

</script>
{{ endblock }}