{% extends "global/Page.html" %}

{% block title %}
<div style="text-align: center;">
Endowment  Assignment
</div>

<div id="page-root"
     data-RankingType="{{ Ana_RankingType }}">
</div>

{% endblock %}

{% block content %}
<style>

    .space {
        color: white;
        font-weight: bold;
    }

    .otree-timer {
        display: none;
    }

    .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        justify-items: center;
        margin: 20px;
    }

    .image-box {
        position: relative;
        border: 1px solid #ccc;
        padding: 0;
        text-align: center;
        width: 150px;
        height: 150px;
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    .image-box img {
        width: 150px;
        height: 150px;
    }

    .highlight-you {
        border: 8px solid grey;
        background-color: #ffffff;
    }

    .image-caption {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 5px 0;
        font-size: 14px;
    }

    .you-label {
        color: black;
        font-weight: bold;
    }

    .endowment-status {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        justify-items: center;
        margin: 20px;
        font-weight: bold;
    }

    .endowment-high {
        color: #28a745;
    }

    .endowment-low {
        color: #dc3545;
    }
</style>
<Br>
<br>
<div style="text-align: center; ">
    In your group of three members, the endowments for the 16 rounds are shown below:
</div>

<div class="grid-container">

    <div class="image-box {% if player.participant.my_order == 1 %}highlight-you{% endif %}">
        <img src="/static/f{{ player.participant.Ana_Mmb1_id }}.png">
        <div class="image-caption">
            <strong>{{ player.participant.Ana_fname_Mmb1 }}-{% if Ana_generation == 1 %}I{% elif Ana_generation == 2 %}II{% else %}III{% endif %}</strong>
            {% if player.participant.my_order == 1 %}
                   <span class="you-label"><br>(You)</span>
                {% else %}                <span class="space"><br>(Not You)</span>
                {% endif %}
        </div>
    </div>

    <div class="image-box {% if player.participant.my_order == 2 %}highlight-you{% endif %}">
        <img src="/static/f{{ player.participant.Ana_Mmb2_id }}.png">
        <div class="image-caption">
            <strong>{{ player.participant.Ana_fname_Mmb2 }}-{% if Ana_generation == 1 %}I{% elif Ana_generation == 2 %}II{% else %}III{% endif %}</strong>
            {% if player.participant.my_order == 2 %}
                   <span class="you-label"><br>(You)</span>
                {% else %}                <span class="space"><br>(Not You)</span>
                {% endif %}
        </div>
    </div>

    <div class="image-box {% if player.participant.my_order == 3 %}highlight-you{% endif %}">
        <img src="/static/f{{ player.participant.Ana_Mmb3_id }}.png">
        <div class="image-caption">
            <strong>{{ player.participant.Ana_fname_Mmb3 }}-{% if Ana_generation == 1 %}I{% elif Ana_generation == 2 %}II{% else %}III{% endif %}</strong>
            {% if player.participant.my_order == 3 %}
                   <span class="you-label"><br>(You)</span>
                {% else %}                <span class="space"><br>(Not You)</span>
                {% endif %}
        </div>
    </div>

</div>

<div class="endowment-status">
    <div class="{% if player.participant.Ana_Edmt_Mmb1 == 30 %}endowment-high{% else %}endowment-low{% endif %}">
        {{ player.participant.Ana_Edmt_Mmb1 }} ECUs ({% if player.participant.Ana_Edmt_Mmb1 == 30 %}High{% else %}Low{% endif %})
    </div>
    <div class="{% if player.participant.Ana_Edmt_Mmb2 == 30 %}endowment-high{% else %}endowment-low{% endif %}">
        {{ player.participant.Ana_Edmt_Mmb2 }} ECUs ({% if player.participant.Ana_Edmt_Mmb2 == 30 %}High{% else %}Low{% endif %})
    </div>
    <div class="{% if player.participant.Ana_Edmt_Mmb3 == 30 %}endowment-high{% else %}endowment-low{% endif %}">
        {{ player.participant.Ana_Edmt_Mmb3 }} ECUs ({% if player.participant.Ana_Edmt_Mmb3 == 30 %}High{% else %}Low{% endif %})
    </div>
</div>

<div style="margin: 30px auto; max-width: 700px; text-align: left;">
    <div style=" padding: 8px; border-radius: 6px;">
    You have received the <b>{% if player.participant.Ana_Endowment == 30 %}high{% else %}low{% endif %}</b> endowment. <br><br>
            </div>

<div style="background-color: #f2f2f2; padding: 8px; border-radius: 6px;">
    The high endowment above was assigned to who
    {% if Ana_RankingType == 1 %}
       grabbed the <u>least</u> number of tokens in the Token Grabbing Task among your three group members.
    {% elif Ana_RankingType == 2 %}
       grabbed the <u>most</u> number of tokens in the Token Grabbing Task among your three group members.
    {% elif Ana_RankingType == 3 %}
       had the <u>most</u> heads flipped in the Coin Flipping Task among your three group members.
    {% elif Ana_RankingType == 4 %}
       had the <u>least</u> heads flipped in the Coin Flipping Task among your three group members.
    {% endif %}
    </div>
    <br>

<div style="padding: 8px; border: 2px solid #ccc; border-radius: 6px; width: 100%;">

    <div style="text-align: center;"><u>This is to check your attention</u>.</div>

    <div style="display: flex;  flex-direction:column;  gap: 5px; text-align: left;">

            <div style="display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px;">
            {% if player.participant.Ana_Edmt_Mmb1 == 30 %}
                {{ player.participant.Ana_fname_Mmb1 }}{% elif player.participant.Ana_Edmt_Mmb2 == 30 %}
                {{ player.participant.Ana_fname_Mmb2 }}{% elif player.participant.Ana_Edmt_Mmb3 == 30 %}{{ player.participant.Ana_fname_Mmb3 }}{% endif %}-I {% if player.participant.Ana_Endowment == 30 %}(you){% endif %} received the high endowment, because {% if player.participant.Ana_Endowment == 30 %}you{% else %}he/she{% endif %}
        {% if Ana_RankingType == 3 or Ana_RankingType == 4 %}
             had the
            <span style="display: inline-flex; align-items: center;">
     {{ form.Ana_Att1 }}
</span>
            heads
        {% else %}
             grabbed the
            <span style="display: inline-flex; align-items: center;">
     {{ form.Ana_Att1 }}
</span>
            number
        {% endif %}
            </div>

        <div style="margin-top: 0;">
                    {% if Ana_RankingType == 3 or Ana_RankingType == 4  %}
            flipped in the Coin Flipping Task
        {% else %}
            of tokens in the Token Grabbing Task
        {% endif %}
            among your three group members.</div>
    </div>
</div>

<Br>
<br>
<div id="feedback-message" style="margin-top:12px;"></div>

<div style="display:flex; justify-content:flex-end; gap:12px; margin-top:16px;">
  <!-- Click to validate -->
  <button id="check-btn" type="button" class="btn btn-primary btn-lg">Submit</button>
  <!-- Actual submit, hidden until correct -->
  <button id="next-btn" type="submit" class="btn btn-primary btn-lg" style="display:none;">Next</button>
</div>

<input type="hidden" name="Ana_Att1_attempts" id="attempt-counter" value="0" style="display:none;">

<script>
document.addEventListener('DOMContentLoaded', function () {
  const form         = document.querySelector('form');
  const feedbackDiv  = document.getElementById('feedback-message');
  const checkBtn     = document.getElementById('check-btn');
  const nextBtn      = document.getElementById('next-btn');
  const root         = document.getElementById('page-root');
  const attemptField = document.getElementById('attempt-counter');

  // Read RankingType from the data attribute injected by vars_for_template
  const RankingType = parseInt(root?.dataset?.rankingtype || '0', 10);

  checkBtn.addEventListener('click', function () {
    // Increment attempt counter
    attemptField.value = parseInt(attemptField.value) + 1;

    const attnValue = document.querySelector('input[name="Ana_Att1"]:checked, select[name="Ana_Att1"]')?.value;

    // Use the JS constant RankingType (NOT the undefined Ana_RankingType)
    const isCorrect =
      (attnValue === '2' && (RankingType === 1 || RankingType === 4)) ||
      (attnValue === '1' && (RankingType === 2 || RankingType === 3));

    if (isCorrect) {
      feedbackDiv.innerHTML =
        '<p style="color:green; font-weight:bold; text-align:center;">' +
        'Your answer is correct.<br>' +
        'Please click NEXT to proceed.</p>';

      checkBtn.style.display = 'none';
      nextBtn.style.display   = 'inline-block';
    } else {
      feedbackDiv.innerHTML =
        '<p style="color:red; font-weight:bold; text-align:center;">' +
        'Your answer is incorrect.<br>' +
        'Please revise and submit again.</p>';
    }
  });

  form.addEventListener('submit', function (e) {
    if (nextBtn.style.display === 'none') {
      e.preventDefault();
      feedbackDiv.innerHTML =
        '<p style="color:red; font-weight:bold; text-align:center;">' +
        'Please answer the attention check question correctly first.</p>';
    }
  });
});
</script>
{% endblock %}