{% extends "global/Page.html" %}
{% load otree static %}
{% load i18n %}

{% block title %}
    {% trans "Part 2 - Questionnaire 3" %}
{% endblock %}

{% block content %}
<h5 class="mb-3">{% trans "Relationship with the other members of your group" %}</h5>
<div class="card bg-light mb-3">
    <div class="card-body">
        <p>
            {% formfield "game_part_of_group_scale" %}
        </p>
    </div>
</div>

<div class="card bg-light mb-3">
    <div class="card-body">
        <p>
            {% blocktrans trimmed %}
            Select the pair of circles that best describes your relationship with X, where X represents the
            <em>other members of your group</em>
            {% endblocktrans %}
        </p>
    </div>
</div>

    <div class="row mb-3">
        <div class="col-4 with_img text-center" id="rel_1">
            <img class="img-fluid mt-2 mb-1" id="rel_1_img" src="{% static 'relations_cpr_game/un.png' %}" alt="Relation 1" onclick="set_selected('rel_1')">
        </div>
        <div class="col-4 with_img text-center" id="rel_2">
            <img class="img-fluid mt-2 mb-1" id="rel_2_img" src="{% static 'relations_cpr_game/deux.png' %}" alt="Relation 2" onclick="set_selected('rel_2')">
        </div>
        <div class="col-4 with_img text-center" id="rel_3">
            <img class="img-fluid mt-2 mb-1" id="rel_3_img" src="{% static 'relations_cpr_game/trois.png' %}" alt="Relation 3" onclick="set_selected('rel_3')">
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-3 with_img text-center" id="rel_4">
            <img class="img-fluid mt-2 mb-1" id="rel_4_img" src="{% static 'relations_cpr_game/quatre.png' %}" alt="Relation 4" onclick="set_selected('rel_4')">
        </div>
        <div class="col-3 with_img text-center" id="rel_5">
            <img class="img-fluid mt-2 mb-1" id="rel_5_img" src="{% static 'relations_cpr_game/cinq.png' %}" alt="Relation 5" onclick="set_selected('rel_5')">
        </div>
        <div class="col-3 with_img text-center" id="rel_6">
            <img class="img-fluid mt-2 mb-1" id="rel_6_img" src="{% static 'relations_cpr_game/six.png' %}" alt="Relation 6" onclick="set_selected('rel_6')">
        </div>
        <div class="col-3 with_img text-center" id="rel_7">
            <img class="img-fluid mt-2 mb-1" id="rel_7_img" src="{% static 'relations_cpr_game/sept.png' %}" alt="Relation 7" onclick="set_selected('rel_7')">
        </div>
    </div>


    {% next_button %}

    <input type="hidden" name="game_part_of_group_img" id="id_game_part_of_group_img" value="">

{% endblock %}

{% block scripts %}
<script>
    let btn_next = document.querySelector(".otree-btn-next");
    btn_next.disabled = true;

    function set_selected(the_div) {
        let all_div_with_img = document.querySelectorAll("div.with_img");
        let selected_div = document.querySelector(`#${the_div}`);
        for (let d of all_div_with_img) {
            d.classList.remove("bg-info");
            if (d === selected_div) {
                d.classList.add("bg-info");
                document.querySelector("input[name=game_part_of_group_img]").value = the_div.split("_")[1];
            }
        }
        if (btn_next.disabled)
            btn_next.disabled = false;
    }

    function fill_auto () {
        // Radio buttons
        let myradios = document.querySelectorAll("input[type=radio]");
        let radio_names = [];
        for (let r of myradios) {
            if (!radio_names.includes(r.name))
                radio_names.push(r.name)
        }
        for (let r of radio_names) {
            let radios = document.querySelectorAll(`input[name=${r}]`);
            let selected = Math.floor(Math.random() * radios.length);
            radios[selected].click();
        }
        let selected_img = Math.floor(Math.random() * 6) + 1;
        document.querySelector(`#rel_${selected_img}_img`).click();

        setTimeout(() => {btn_next.click();}, 2000);
    }

    window.onload = function() {
        if (js_vars.fill_auto)
            fill_auto();
    }
</script>
{% endblock %}