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

{% block title %}

<div style="text-align: center;">Assignment of Points</div>
{% endblock %}

{% block content %}
<style>
.rating-system {
    max-width: 800px;
    margin: 0 auto;
}

.member-container {
    display: flex;
    margin-bottom: 30px;
    align-items: flex-start;
    gap: 20px;
}

.member-pic {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #ddd;
}

.member-details {
    flex: 1;
}

.scale-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.scale-row {
    display: flex;
    align-items: center;
}

.scale-labels, .scale-inputs {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.scale-label {
    width: 60px;
    text-align: center;
    font-weight: bold;
    display: flex;
    justify-content: center;  /* center horizontally */
    align-items: flex-start;  /* anchor to top */
    padding-top: 0;           /* remove old padding */
}

.scale-input {
    width: 60.1px;
    justify-content: center;
}

.scale-input input {
    width: 90%;
    text-align: center;
    padding: 8px;
    box-sizing: border-box;
}

.scale-labels-container {
    margin-right: 10px;
}

.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;
    flex-shrink: 0;
}

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

.image-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 5px 0;
    font-size: 14px;
}

.scale-labels-container {
    margin-right: 10px;
}
</style>

<div>
<br>
    <br>
    Here, you will have the opportunity to register your <b>approval or disapproval of each other group member</b> by assigning points.<br><br>
    Your choices here will apply to <b>Round {{RoundNumber1}}</b>.<br><br>

   For <b>each range of contributions below</b>, {% if RoundNumber1 == 1 %} please enter the number of points you wish to assign in the provided textboxes
    {% elif RoundNumber1 > 1 %} you can modify the number of points assigned in the previous round as shown in the textboxes{% endif %}
    (10 indicates the most disapproval, 0 indicates the least disapproval).<br>

    <em>If you do not wish to register disapproval of a decision, then you must enter 0. </em>
    <br> <br>
</div>

<div class="rating-system">
    <!-- Member 1 -->
<div class="member-container">
    <div class="image-box">
        <img src="/static/f{{Display1_ID}}.png">
        <div class="image-caption">
            <strong>
                {{Display1_nm}}-{% if Ana_generation == 1 %}I{% elif Ana_generation == 2 %}II{% elif Ana_generation == 3 %}III{% endif %}
            </strong><br>
            <strong style="color:white;">-</strong>
        </div>
    </div>

    {% if Display1_Endw == 30 %}
    <div class="member-details">
        <div class="scale-container">
            <div class="scale-labels">
                <div class="scale-label">0-3</div>
                <div class="scale-label">4-6</div>
                <div class="scale-label">7-9</div>
                <div class="scale-label">10-12</div>
                <div class="scale-label">13-15</div>
                <div class="scale-label">16-18</div>
                <div class="scale-label">19-21</div>
                <div class="scale-label">22-24</div>
                <div class="scale-label">25-27</div>
                <div class="scale-label">28-30</div>
            </div>

            <div class="scale-row" style="margin-top: -20px;">
                {% if player.participant.vars.Ana_Mmb1_id != player.participant.vars.parent_id %}
                <div class="scale-inputs">
                    <div class="scale-input">{% formfield player.Ana_mmb1_3 %}</div>
                    <div class="scale-input">{% formfield player.Ana_mmb1_6 %}</div>
                    <div class="scale-input">{% formfield player.Ana_mmb1_9 %}</div>
                    <div class="scale-input">{% formfield player.Ana_mmb1_12 %}</div>
                    <div class="scale-input">{% formfield player.Ana_mmb1_15 %}</div>
                    <div class="scale-input">{% formfield player.Ana_mmb1_18 %}</div>
                    <div class="scale-input">{% formfield player.Ana_mmb1_21 %}</div>
                    <div class="scale-input">{% formfield player.Ana_mmb1_24 %}</div>
                    <div class="scale-input">{% formfield player.Ana_mmb1_27 %}</div>
                    <div class="scale-input">{% formfield player.Ana_mmb1_30 %}</div>
                </div>
                {% elif player.participant.vars.Ana_Mmb1_id == player.participant.vars.parent_id %}
                <div class="scale-inputs">
                    <div class="scale-input">{% formfield player.Ana_mmb2_3 %}</div>
                    <div class="scale-input">{% formfield player.Ana_mmb2_6 %}</div>
                    <div class="scale-input">{% formfield player.Ana_mmb2_9 %}</div>
                    <div class="scale-input">{% formfield player.Ana_mmb2_12 %}</div>
                    <div class="scale-input">{% formfield player.Ana_mmb2_15 %}</div>
                    <div class="scale-input">{% formfield player.Ana_mmb2_18 %}</div>
                    <div class="scale-input">{% formfield player.Ana_mmb2_21 %}</div>
                    <div class="scale-input">{% formfield player.Ana_mmb2_24 %}</div>
                    <div class="scale-input">{% formfield player.Ana_mmb2_27 %}</div>
                    <div class="scale-input">{% formfield player.Ana_mmb2_30 %}</div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    {% elif Display1_Endw == 15 %}
    <div class="member-details">
        <div class="scale-container">
            <div class="scale-row">
                <div class="scale-labels">
                        <div class="scale-label">0-3</div>
                        <div class="scale-label">4-6</div>
                        <div class="scale-label">7-9</div>
                        <div class="scale-label">10-12</div>
                        <div class="scale-label">13-15</div>
                </div>
            </div>
            <div class="scale-row" style="margin-top: -20px;">
                {% if player.participant.vars.Ana_Mmb1_id != player.participant.vars.parent_id %}
                <div class="scale-inputs">
                    <div class="scale-input">{% formfield player.Ana_mmb1_3 %}</div>
                    <div class="scale-input">{% formfield player.Ana_mmb1_6 %}</div>
                    <div class="scale-input">{% formfield player.Ana_mmb1_9 %}</div>
                    <div class="scale-input">{% formfield player.Ana_mmb1_12 %}</div>
                    <div class="scale-input">{% formfield player.Ana_mmb1_15 %}</div>
                </div>
                {% elif player.participant.vars.Ana_Mmb1_id == player.participant.vars.parent_id %}
                <div class="scale-inputs">
                    <div class="scale-input">{% formfield player.Ana_mmb2_3 %}</div>
                    <div class="scale-input">{% formfield player.Ana_mmb2_6 %}</div>
                    <div class="scale-input">{% formfield player.Ana_mmb2_9 %}</div>
                    <div class="scale-input">{% formfield player.Ana_mmb2_12 %}</div>
                    <div class="scale-input">{% formfield player.Ana_mmb2_15 %}</div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    {% endif %}
</div>

    <!-- Member 2 -->
    <div class="member-container">
        <div class="image-box">
            <img src="/static/f{{Display2_ID}}.png">
            <div class="image-caption">
                <strong>
                    {{Display2_nm}}-{% if Ana_generation == 1 %}I{% elif Ana_generation == 2 %}II{% elif Ana_generation == 3 %}III{% endif %}
                </strong><br>
                <strong style="color:white;">-</strong>
            </div>
        </div>

        {% if Display2_Endw == 30 %}
<div class="member-details">
    <div class="scale-container">
        <div class="scale-row">
            <div class="scale-labels">
                <div class="scale-label">0-3</div>
                <div class="scale-label">4-6</div>
                <div class="scale-label">7-9</div>
                <div class="scale-label">10-12</div>
                <div class="scale-label">13-15</div>
                <div class="scale-label">16-18</div>
                <div class="scale-label">19-21</div>
                <div class="scale-label">22-24</div>
                <div class="scale-label">25-27</div>
                <div class="scale-label">28-30</div>
            </div>
        </div>
        <div class="scale-row" style="margin-top: -20px;">
            {% if player.participant.vars.Ana_Mmb3_id == player.participant.vars.parent_id %}
            <div class="scale-inputs">
                <div class="scale-input">{% formfield player.Ana_mmb2_3 %}</div>
                <div class="scale-input">{% formfield player.Ana_mmb2_6 %}</div>
                <div class="scale-input">{% formfield player.Ana_mmb2_9 %}</div>
                <div class="scale-input">{% formfield player.Ana_mmb2_12 %}</div>
                <div class="scale-input">{% formfield player.Ana_mmb2_15 %}</div>
                <div class="scale-input">{% formfield player.Ana_mmb2_18 %}</div>
                <div class="scale-input">{% formfield player.Ana_mmb2_21 %}</div>
                <div class="scale-input">{% formfield player.Ana_mmb2_24 %}</div>
                <div class="scale-input">{% formfield player.Ana_mmb2_27 %}</div>
                <div class="scale-input">{% formfield player.Ana_mmb2_30 %}</div>
            </div>
            {% elif player.participant.vars.Ana_Mmb3_id != player.participant.vars.parent_id %}
            <div class="scale-inputs">
                <div class="scale-input">{% formfield player.Ana_mmb3_3 %}</div>
                <div class="scale-input">{% formfield player.Ana_mmb3_6 %}</div>
                <div class="scale-input">{% formfield player.Ana_mmb3_9 %}</div>
                <div class="scale-input">{% formfield player.Ana_mmb3_12 %}</div>
                <div class="scale-input">{% formfield player.Ana_mmb3_15 %}</div>
                <div class="scale-input">{% formfield player.Ana_mmb3_18 %}</div>
                <div class="scale-input">{% formfield player.Ana_mmb3_21 %}</div>
                <div class="scale-input">{% formfield player.Ana_mmb3_24 %}</div>
                <div class="scale-input">{% formfield player.Ana_mmb3_27 %}</div>
                <div class="scale-input">{% formfield player.Ana_mmb3_30 %}</div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% elif Display2_Endw == 15 %}
<div class="member-details">
    <div class="scale-container">
        <div class="scale-row">
            <div class="scale-labels">
                        <div class="scale-label">0-3</div>
                        <div class="scale-label">4-6</div>
                        <div class="scale-label">7-9</div>
                        <div class="scale-label">10-12</div>
                        <div class="scale-label">13-15</div>
            </div>
        </div>
        <div class="scale-row" style="margin-top: -20px;">
            {% if player.participant.vars.Ana_Mmb3_id == player.participant.vars.parent_id %}
            <div class="scale-inputs">
                <div class="scale-input">{% formfield player.Ana_mmb2_3 %}</div>
                <div class="scale-input">{% formfield player.Ana_mmb2_6 %}</div>
                <div class="scale-input">{% formfield player.Ana_mmb2_9 %}</div>
                <div class="scale-input">{% formfield player.Ana_mmb2_12 %}</div>
                <div class="scale-input">{% formfield player.Ana_mmb2_15 %}</div>
            </div>
            {% elif player.participant.vars.Ana_Mmb3_id != player.participant.vars.parent_id %}
            <div class="scale-inputs">
                <div class="scale-input">{% formfield player.Ana_mmb3_3 %}</div>
                <div class="scale-input">{% formfield player.Ana_mmb3_6 %}</div>
                <div class="scale-input">{% formfield player.Ana_mmb3_9 %}</div>
                <div class="scale-input">{% formfield player.Ana_mmb3_12 %}</div>
                <div class="scale-input">{% formfield player.Ana_mmb3_15 %}</div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

{% endif %}

    </div>

</div>

<div style="display: flex; align-items: center; justify-content: right; margin-top: 20px;">
    <button id="submit-btn" class="btn btn-danger btn-lg">{% trans 'Submit' %}</button>
</div>

{% endblock %}

{% block scripts %}
<script>
    // Pre-fill form fields from round 1 values if they exist
    document.addEventListener('DOMContentLoaded', function() {
        var prefillValues = {{ prefill_values|json }};

        if (prefillValues && Object.keys(prefillValues).length > 0) {
            for (var fieldName in prefillValues) {
                var input = document.querySelector('input[name="' + fieldName + '"]');
                if (input && !input.value) {
                    input.value = prefillValues[fieldName];
                }
            }
        }
    });
</script>
{% endblock %}