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

{% 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;
    }
    .timec {
        width:5%;
        margin-left:auto;
        margin-right:auto;
    }
        .resultlabelsm{
            color: #1B232F;
            font-weight: bold;
            background-color: #FFDDD8;
        }
#scwork
    {
        width:50%;
        position:relative;
        overflow:auto;

    }

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

        display:block;
    }


</STYLE>
{% endblock %}

{% block scripts %}
<script language="JavaScript">
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("Your time has expired and you will proceed to make your cost reports.");
            checkwork(1);

        } 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();
}

var sec = 0;

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


 function checkwork(autosubmit){
    if (autosubmit == 0) {
        if (confirm("Are you sure you wish to end communication early?") == true) {
            window.onbeforeunload = null;
            document.getElementById("form").submit();

        } else {

        }
    } else {
            window.onbeforeunload = null;
            document.getElementById("chat_time_5").value = "120";
            document.getElementById("form").submit();

    }
 }


 window.onload = function(){
    countdown("countdown2", 2, 0);
     //document.getElementById("form").elements["ent1"].focus();
}
 window.onbeforeunload = function() {
    return 'Please do not use your browser -back- or -refresh- functions. You may lose anything you type!';
}
 </script>
{% endblock %}

{% block title %}
    Project Cost Information
{% endblock %}

{% block content %}


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

    </STYLE>
    <hr>
    <p>
    The following actual project costs have been incurred this period:<br>
        <table width="100%" border="0">
        <tbody>
            <tr>
                <td width="20%">Your Project - {% if type == 1 %}Project A{% else %}Project B{% endif %}:</td>
                <td align="left">{% if type == 1 %}{{ player.actual_5A|intcomma }}{% else %}{{ player.actual_5B|intcomma }}{% endif %}</td>
            </tr>

            <tr>
                <td width="20%">{% if type == 1 %}Project B{% else %}Project A{% endif %}:</td>
                <td align="left">{% if type == 1 %}{{ player.actual_5B|intcomma }}{% else %}{{ player.actual_5A|intcomma }}{% endif %}</td>
            </tr>
        </tbody>
        </table>
    </p>
        <br>
    Your cost reports for each project must be between 20,000 and 100,000.
    <hr>

    <p>
        <div class="resultlabelsm">Recall that you are matched with the same Manager {% if type == 1 %}B{% else %}A{% endif %} and same Company Owner in all periods.</div> You have up to two minutes to communicate with Manager {% if type == 1 %}B{% else %}A{% endif %}. Please do not share any personal information during this chat. If you would like to end the communication period before time expires,
        click "End Chat" to proceed to make your cost reports to the company owner. <b>Note that there are no automatic notifications if an individual leaves the chat, so you may wish to let the other manager know if you are leaving early.</b>
    </p>


    <table class="timec" 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>

    {% chat nickname=player.role channel=player.chat_channel_5 %}

    <br>
    <br>
    <button type="button" class="btn btn-primary" onclick="checkwork(0)">End Chat</button>
    <input type="hidden" id="chat_time_5" name="chat_time_5">


{% endblock %}