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

{% block styles %}
<STYLE TYPE="text/css">
    .indented { padding-left: 50pt; padding-right: 50pt; } -->
    .timer {
        color: #1B232F; !important;
        font-family: Verdana, Arial, sans-serif;
        font-size: 30px;
        font-weight: bold;
        text-decoration: none;
    }
    .stringresult {
        font-family: Calibri, Arial sans-serif;
        font-size: 20px;
        font-weight: bold;
        text-decoration: none;
        letter-spacing: 1px;
        padding-left:5px;
        padding-right:5px;
        padding-bottom:-30px;
        vertical-align: middle;
        line-height:30px;

    }
    td {
        vertical-align: top; !important;
        line-height:30px; !important;
        padding-left:5px;
        padding-right:5px;
        padding-bottom:-30px;
    }

#scwork
    {
        width:50%;
        position:relative;
        overflow:auto;

    }

#timework
    {
        position:fixed;
        margin-left:425px;

        display:block;
    }

</STYLE>

    <STYLE TYPE="text/css">
        .indented { padding-left: 50pt; padding-right: 50pt; font-weight: normal !important;}
        .tabmarg {margin-left: 80px}
        .res{
            font-size: large;}
        .resultlabel{
            color: #1B232F;
            font-size: large;
            font-weight: bold;
            background-color: #FFDDD8;
        }
        .resultlabelsm{
            color: #1B232F;
            font-weight: bold;
            background-color: #FFDDD8;
        }
        .norm{
            font-size: medium;
        }
        .ui-dialog-titlebar-close {display: none;}
        .ui-dialog-content {
            background-color: #f6f6f6;
            padding: 15px;
            border: #ebebeb;
            border-style: groove;
            border-width: 2px;
            line-height: normal;
        }
        .ui-dialog-buttonpane {
            text-align: right;
        }
        #dialog-exp {
            display: none
        }
        #dialog-message {
            display: none
        }

    </STYLE>
    {% endblock %}

{% block scripts %}

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 <script>

function countdown( elementName, minutes, seconds )
{
    var element, endTime, hours, mins, msLeft, time;

    function twoDigits( n )
    {
        return (n <= 9 ? "0" + n : n);
    }

    function updateTimer()
    {
        msLeft = endTime - (+new Date);
        if ( msLeft < 1000 ) {
            //alert("The time in the period has expired and your work will automatically be submitted.");
            //checkwork(1);
            timeExp();
        } else {
            time = new Date( msLeft );
            hours = time.getUTCHours();
            mins = time.getUTCMinutes();
            element.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) + ':' + twoDigits( time.getUTCSeconds() );
            setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
        }
    }

    element = document.getElementById( elementName );
    endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
    updateTimer();
}

 function checkwork(autosubmit){

            window.onbeforeunload = null;
            var num_correct = 0;
            var num_attempted = 0;

            for (var i = 1; i < 76; i++) {
                var solution = document.getElementById("form").elements["sol" + i].value;
                if (document.getElementById("form").elements["ent" + i].value != "") {
                    if (document.getElementById("form").elements["ent" + i].value == solution) {
                        num_correct++;
                        num_attempted++;
                    } else {
                        num_attempted++;
                    }
                }
            }

            document.getElementById("form").elements["num_attempted_2"].value = num_attempted;
            document.getElementById("form").elements["num_decoded_2"].value = num_correct;

            document.getElementById("form").submit();

 }


 window.onbeforeunload = function() {
    return 'Please do not use your browser -back- or -refresh- functions. You may lose your work!';
}


$(document).ready(function() {
    {% if condition == 3 or condition == 4 %}

            $( "#dialog-message" ).dialog({
                  modal: true,
                  position: { my: "center", at: "top", of: window },
                  height: 300,
                  width: 750,
                  autoOpen: true,
                  open: function(event, ui){
                       setTimeout("myClose()",15000);
                  }
                });

    {% else %}
        myPrep();
    {% endif %}
});


function myClose() {
    $("#dialog-message").dialog('destroy');
    document.getElementById("form").elements["ent1"].focus();
    countdown("countdown2", 4, 0);
}

function myPrep() {
    document.getElementById("form").elements["ent1"].focus();
    countdown("countdown2", 4, 0);
}

function timeExp() {
    $( "#dialog-exp" ).dialog({
        modal: true,
        position: { my: "center", at: "top", of: window },
        height: 200,
        width: 660,
        autoOpen: true,
        open: function(event, ui){
            setTimeout("myCloseExp()",10000);
        }
    });
}

function myCloseExp() {
    $("#dialog-exp").dialog('destroy');
    checkwork(1);
}

 </script>

{% endblock %}

{% block title %}
    Work Period: #2 of 4
{% endblock %}

{% block content %}


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

    </STYLE>
    {% if condition == 3 or condition == 4 %}
        <hr>
        <p>
            {% if player.event_2 == 0 %}
                <span class="resultlabelsm">No event occurred that will cause production difficulty in your division this period.</span> As explained earlier, your
                decoding work this period will therefore generate net income of:
                60 + 9 × the number of strings you correctly decode.
            {% else %}
                <span class="resultlabelsm">An event occurred that will cause production difficulty in your division this period.</span> As explained earlier, your
                decoding work this period will therefore generate net income of:
                60 + 4 × the number of strings you correctly decode.
            {% endif %}
        </p>
    {% endif %}

    <hr>
    <p>
        Below you will find letter strings, which can be decoded to numbers using the key provided. Enter the number string into the box next to
        each letter string. Do NOT enter spaces between digits. For example, the string “ABCDE” should be decoded into 7351118. *Note: When typing, you may use your “Tab” key
        to advance to the next box. When the time in the period expires, your work will automatically be submitted.
    </p>

    <hr>

    <div id="scwork">
    <div id="timework">
    <table width="5%" border="1" cellspacing="2" cellpadding="2" bgcolor="FFDDD8">
    <tbody>
        <tr bgcolor="FFDDD8">
            <td align="center"><div class = "timer" id="countdown2"></div></td>
        </tr>
    </tbody>
    </table>
    <img src="{% static "bsw3_task/key.jpg" %}"/><br><br>

    </div>
    <table class="stringresult" width="50%" border="1">
    {% for DecodeStrings in decode_strings %}
         <tr>
             <td>{{ DecodeStrings.letters }}</td>
             <td><input type="text" id="ent{{ forloop.counter }}" name="ent{{ forloop.counter }}" value=""></td>
         </tr>
    {% endfor %}
    </table>
    </div>




    <input type="hidden" id="num_attempted_2" name="num_attempted_2" value="">
    <input type="hidden" id="num_decoded_2" name="num_decoded_2" value="">

    <br><br>

    <!-- <button type="button" class="btn btn-primary" onclick="checkwork(0)">Submit</button>  -->

    {% for DecodeStrings in decode_strings %}
         <input type="hidden" id="soltext{{ forloop.counter }}" name="sol{{ forloop.counter }}" value="{{ DecodeStrings.numbers }}">
    {% endfor %}



    <br>


  <div id="dialog-message">
  <br>
      <table border="0" width="725">
          <tr>
              <td>
                  {% if player.event_2 == 1 %}
                      <b>An event occurred that will cause production difficulty in your division this period.</b><br>
                     Therefore, your decoding work this period will generate net income of:<br>
                      60 + 4 × the number of strings you correctly decode.<br><br>
                     Click OK to begin the work period.
                  {% else %}
                      <b>No event occurred that will cause production difficulty in your division this period.</b><br>
                     Therefore, your decoding work this period will generate net income of:<br>
                      60 + 9 × the number of strings you correctly decode.<br><br>
                     Click OK to begin the work period.
                  {% endif %}
              </td>
          </tr>
          <tr>
              <td align="center">
                  <button type="button" class="btn btn-primary" onclick="myClose()">Ok</button>
              </td>
          </tr>
      </table>
  </div>

  <div id="dialog-exp">
  <br>
      <table border="0" width="650">
          <tr>
              <td>
                  The time in the period has expired and your work will automatically be submitted.<br>
              </td>
          </tr>
          <tr><td>&nbsp;</td></tr>
          <tr>
              <td align="center">
                  <button type="button" class="btn btn-primary" onclick="myCloseExp()">Ok</button>
              </td>
          </tr>
          <tr><td>&nbsp;</td></tr>
      </table>
  </div>
{% endblock %}