{% extends "global/Base.html" %}
{% load staticfiles otree_tags %}

{% block scripts %}

<script language="JavaScript">
    var sec = 0;

    var timer = setInterval(function () {
    document.getElementById("{{comparison}}_time").value = ((sec+=100)/1000);}, 100);
    //document.getElementById("{{comparison}}_time").value = ++sec;}, 1000);

    function captureProject() {

        //var valtest = document.getElementById("form").elements["{{comparison}}"].value;
        //alert(valtest);
        document.getElementById("form").elements["implemented_project_3"].value = $("input:radio[name={{ comparison }}]:checked").val();
    }

    function checkwork(autosubmit){

     if ($('input[type=radio]:checked').length > 0) {
         document.getElementById("form").submit();
     } else {
         alert("Please choose either Project A or Project B to implement in your division.");
     }


    }
</script>

{% endblock %}

{% block title %}
    Project Selection
{% endblock %}

{% block content %}


    <STYLE TYPE="text/css">
        .indented { padding-left: 50pt; padding-right: 50pt; }
        .tabmarg {margin-left: 80px}

    </STYLE>

    <p style="font-size: large">
        You are about to make <b>selection #3</b> of 5 project selections.
    </p>
    <br>
    <p>
        Please consider the following projects. Indicate which project you want to implement by clicking the button below the project you prefer, and then clicking "Next."
    </p>

    <p>
        {% if condition == 1 or condition == 2 %}
        <table width="100%" border="0">
        {% elif condition == 3 %}
        <table width="85%" border="0">
        {% endif %}
        <tbody>
            <tr>
                <td align="center">Project A</td>
                <td align="center">Project B</td>
            </tr>
            <tr align="center">
                {% if condition == 1 %}
                    {% if first == 1 %}
                        <td><img src="{% static "project_selection/RI_1.jpg" %}"/></td>
                    {% elif first == 2 %}
                        <td><img src="{% static "project_selection/RI_2.jpg" %}"/></td>
                    {% elif first == 3 %}
                        <td><img src="{% static "project_selection/RI_3.jpg" %}"/></td>
                    {% elif first == 4 %}
                        <td><img src="{% static "project_selection/RI_4.jpg" %}"/></td>
                    {% elif first == 5 %}
                        <td><img src="{% static "project_selection/RI_5.jpg" %}"/></td>
                    {% endif %}
                {% elif condition == 2 %}
                    {% if first == 1 %}
                        <td><img src="{% static "project_selection/ROI_1.jpg" %}"/></td>
                    {% elif first == 2 %}
                        <td><img src="{% static "project_selection/ROI_2.jpg" %}"/></td>
                    {% elif first == 3 %}
                        <td><img src="{% static "project_selection/ROI_3.jpg" %}"/></td>
                    {% elif first == 4 %}
                        <td><img src="{% static "project_selection/ROI_4.jpg" %}"/></td>
                    {% elif first == 5 %}
                        <td><img src="{% static "project_selection/ROI_5.jpg" %}"/></td>
                    {% endif %}
                {% elif condition == 3 %}
                    {% if first == 1 %}
                        <td align="center"><img src="{% static "project_selection/NI_1.jpg" %}"/></td>
                    {% elif first == 2 %}
                        <td align="center"><img src="{% static "project_selection/NI_2.jpg" %}"/></td>
                    {% elif first == 3 %}
                        <td align="center"><img src="{% static "project_selection/NI_3.jpg" %}"/></td>
                    {% elif first == 4 %}
                        <td align="center"><img src="{% static "project_selection/NI_4.jpg" %}"/></td>
                    {% elif first == 5 %}
                        <td align="center"><img src="{% static "project_selection/NI_5.jpg" %}"/></td>
                    {% endif %}
                {% endif %}

                {% if condition == 1 %}
                    {% if second == 1 %}
                        <td><img src="{% static "project_selection/RI_1.jpg" %}"/></td>
                    {% elif second == 2 %}
                        <td><img src="{% static "project_selection/RI_2.jpg" %}"/></td>
                    {% elif second == 3 %}
                        <td><img src="{% static "project_selection/RI_3.jpg" %}"/></td>
                    {% elif second == 4 %}
                        <td><img src="{% static "project_selection/RI_4.jpg" %}"/></td>
                    {% elif second == 5 %}
                        <td><img src="{% static "project_selection/RI_5.jpg" %}"/></td>
                    {% endif %}
                {% elif condition == 2 %}
                    {% if second == 1 %}
                        <td><img src="{% static "project_selection/ROI_1.jpg" %}"/></td>
                    {% elif second == 2 %}
                        <td><img src="{% static "project_selection/ROI_2.jpg" %}"/></td>
                    {% elif second == 3 %}
                        <td><img src="{% static "project_selection/ROI_3.jpg" %}"/></td>
                    {% elif second == 4 %}
                        <td><img src="{% static "project_selection/ROI_4.jpg" %}"/></td>
                    {% elif second == 5 %}
                        <td><img src="{% static "project_selection/ROI_5.jpg" %}"/></td>
                    {% endif %}
                {% elif condition == 3 %}
                    {% if second == 1 %}
                        <td align="center"><img src="{% static "project_selection/NI_1.jpg" %}"/></td>
                    {% elif second == 2 %}
                        <td align="center"><img src="{% static "project_selection/NI_2.jpg" %}"/></td>
                    {% elif second == 3 %}
                        <td align="center"><img src="{% static "project_selection/NI_3.jpg" %}"/></td>
                    {% elif second == 4 %}
                        <td align="center"><img src="{% static "project_selection/NI_4.jpg" %}"/></td>
                    {% elif second == 5 %}
                        <td align="center"><img src="{% static "project_selection/NI_5.jpg" %}"/></td>
                    {% endif %}
                {% endif %}

            </tr>

            <tr>
                {% if condition == 1 or condition == 2 or condition == 3 %}
                    <td align="center"><input type="radio" name="{{ comparison }}" value="{{ first }}" required onclick="captureProject()"> </td>
                    <td align="center"><input type="radio" name="{{ comparison }}" value="{{ second }}" required onclick="captureProject()"> </td>
                {% endif %}
            </tr>

        </tbody>
        </table>
    </p>

    <br>
    <p>
        <button type="button" class="btn btn-primary" onclick="checkwork(0)">Next</button>
    </p>

    <p>
        <table width="100%" border="0">
        <tbody>
            <tr>
                <td align="center">For reference, your bonus compensation will be determined in the following manner:</td>

            </tr>
            <tr>
                <td align="center">
                 {% if condition == 1 %}
                    <img src="{% static "project_selection/Bonus_RI.jpg" %}"/>
                 {% elif condition == 2 %}
                    <img src="{% static "project_selection/Bonus_ROI.jpg" %}"/>
                 {% else %}
                    <img src="{% static "project_selection/Bonus_NI.jpg" %}"/>
                 {% endif %}
                </td>

            </tr>
        </tbody>
        </table>
    </p>
    {% if condition == 1 or condition == 2 or condition == 3 %}
        <input type="hidden" id="{{ comparison_a }}" name="{{ comparison_a }}" value="{{first}}">
    {% endif %}

    <input type="hidden" id="{{comparison}}_time" name="{{comparison}}_time">
    <input type="hidden" id="implemented_project_3" name="implemented_project_3">



{% endblock %}