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

{% block title %}

<div style="text-align: center;">
Endowment Assignment (History)
</div>
<div id="page-root"
     data-RankingType="{{ Ana_RankingType }}">
</div>
{% endblock %}

{% block content %}
<style>
        .otree-timer {
        display: none;
    }

            .space {
        color: white;
        font-weight: bold;
    }
           .endowment-high {
        color: #28a745;
            margin-top: 10px;
    text-align: center;
    width: 100%;
    min-height: 40px;
    font-size: 14px;
    font-weight: bold;
    }

    .endowment-low {
        color: #dc3545;
            margin-top: 10px;
    text-align: center;
    width: 100%;
    min-height: 40px;
    font-size: 14px;
    font-weight: bold;
    }
  .members {
    display: grid;
    grid-template-columns: repeat(3, 180px); /* same width columns */
    gap: 24px;
    justify-content: center;                 /* center whole block */
    margin-top: 16px;
  }
  .member {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .image-box {
    position: relative;
    width: 150px;
    height: 150px;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 4px rgba(0,0,0,.1);
    overflow: hidden;
    border-radius: 6px;
  }
  .image-box img { width: 150px; height: 150px; display:block; }
  .image-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 5px 0;
    font-size: 14px;
    text-align: center;

  }
  .highlight-you { border: 8px solid grey; background:#fff; }
    .highlight-highedw { border: 8px solid red; background:#fff; }
  .you-label { color:#000; font-weight:700; }
  .text-box {
    margin-top: 10px;
    text-align: center;
    width: 100%;
    min-height: 40px;
    font-size: 14px;
    font-weight: bold;
  }

</style>


<div style="display: flex; flex-direction: column; align-items: center; text-align: center;">
<Br>
<br>
Below is a description of the history of assignment of endowments in your group. <Br>

<br>

</div>

<div class="members">
  <!-- Member 1 -->
  <div class="member">
    <div class="image-box {% if MyOrder == 1 %}highlight-you{% endif %}">
      <img src="/static/f{{ player.participant.Ana_Mmb1_id }}.png">
      <div class="image-caption">
        <strong>{{ player.participant.Ana_fname_Mmb1 }}-I</strong>
        {% if MyOrder == 1 %}<span class="you-label"><br>(Your Family)</span>
                {% else %}                <span class="space"><br>(Not You)</span>
                {% endif %}
      </div>
    </div>
    <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>

  <!-- Member 2 -->
  <div class="member">
    <div class="image-box {% if MyOrder == 2 %}highlight-you{% endif %}">
      <img src="/static/f{{ player.participant.Ana_Mmb2_id }}.png">
      <div class="image-caption">
        <strong>{{ player.participant.Ana_fname_Mmb2 }}-I</strong>
        {% if MyOrder == 2 %}<span class="you-label"><br>(Your Family)</span>
                {% else %}                <span class="space"><br>(Not You)</span>
                {% endif %}
      </div>
    </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>

  <!-- Member 3 -->
  <div class="member">
    <div class="image-box {% if MyOrder == 3 %}highlight-you{% endif %}">
      <img src="/static/f{{ player.participant.Ana_Mmb3_id }}.png">
      <div class="image-caption">
        <strong>{{ player.participant.Ana_fname_Mmb3 }}-I</strong>
        {% if MyOrder == 3 %}<span class="you-label"><br>(Your Family)</span>
                {% else %}                <span class="space"><br>(Not You)</span>
                {% endif %}
      </div>
    </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>


<div style="margin-left: 11%; margin-right: 11%;">
    {% if MyOrder == 1 %}{{ player.participant.Ana_fname_Mmb1 }}-I
    {% elif MyOrder == 2 %} {{ player.participant.Ana_fname_Mmb2 }}-I
    {% elif MyOrder == 3 %} {{ player.participant.Ana_fname_Mmb3 }}-I
    {% endif %} received the <b>{% if player.participant.Ana_Endowment == 30 %}high{% else %}low{% endif %}</b> endowment. <br><br>

</div>


<div style="margin-left: 11%; margin-right: 11%; background-color: #f2f2f2; padding: 8px; border-radius: 6px;">
    In the first generation, 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 the three group members.
    {% elif Ana_RankingType == 2 %}
       grabbed the <u>most</u> number of tokens in the Token Grabbing Task among the three group members.
    {% elif Ana_RankingType == 3 %}
       had the <u>most</u> heads flipped in the Coin Flipping Task among the three group members.
    {% elif Ana_RankingType == 4 %}
       had the <u>least</u> heads flipped in the Coin Flipping Task among the three group members.
    {% endif %}
    </div>

<br>

<div style="margin-left: 11%; margin-right: 11%; padding: 8px; border: 2px solid #ccc; border-radius: 6px;">

    <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 received the high endowment, because he/she
        {% 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 the 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-danger btn-lg">Submit</button>
  <!-- Actual submit, hidden until correct -->
  <button id="next-btn" type="submit" class="btn btn-success 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');

  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;

    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 %}