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

{% block title %}
       Now you are ready to fill in your receipt.
{% endblock %}

{% block styles %}
    <link href="/static/antidote/collapse_box.css" rel="stylesheet">
    <style>
        #ptable table, th, td {
      border: 2px solid black;
      padding: 0;
        table-layout:fixed;
    }
    #ptable table{
         height: 100%;
    }

    #ptable thead tr th:first-child,
    #ptable tbody tr td:first-child {
      width: 8em;
      min-width: 8em;
      max-width: 8em;
    }

        button{
        margin:15px;
        padding: 4px 8px;
        font-size: 30px;
    }

    </style>
{% endblock %}
{% block content %}
    <style>
   body {
    font: normal 20px Verdana, Arial, sans-serif;
}

   </style>


    <p style="font-size: 1.2em">
        {% if num_FR > 0%}
            Your Role in the experiment was {% if player.roles == 'S' %}<span style ="font-size:1.2em; font-weight: bold; color: red">S</span>.
            {% elif player.roles == 'TR' %} <span style ="font-size:1.2em; font-weight: bold; color: dodgerblue">True R</span>.
            {% else %} <span style ="font-size:1.2em; font-weight: bold; color: darkgrey">False R</span>.
            {% endif %}
        {% else %}
            Your Role in the experiment was {% if player.roles == 'S' %}<span style ="font-size:1.2em; font-weight: bold; color: red">S</span>.
            {% else %} <span style ="font-size:1.2em; font-weight: bold; color: dodgerblue">R</span>.
            {% endif %}
        {% endif %}
    </p>

    <p>
    The computer has randomly chosen one round for your payment: <span style="font-size:25px">Round {{chosen_round}}.</span><br>
     <span style="font-weight: bold; color: red;">You total cash payment is </span> the earnings from the randomly chosen round ({{money}}) <br>
    PLUS {{ session.participation_fee}} show-up fee, which is (rounded to) <span style="font-size:30px; font-weight: bold; color: red;"> {{total_payment}} </span></p>
<br>
<span style="font-size:25px"><center> Please fill in the following Google form to receive your payment:
<a href="https://docs.google.com/forms/d/e/1FAIpQLSdC6L--hXimxllRXF_T9_QSzw7NqkF3V-bzXtOu1hLK25OZ2g/viewform?usp=sf_link">The Form </a> </center> </span>
<br>
    <span style="font-size:20px; font-weight: bold"><center> (Please <font color="red"> take a picture of this page </font> for your own record and keep it for at least 3 weeks.
HKUST Finance Office may contact and ask you to submit the screen picture before they deposit the amount to your bank account.)</center> </span>
<br>
    <table id="History" border="2" style=" rules:none; font-size:22px; text-align:center;width: 100%;">
    <tr>
        <td>Round #</td>
        <td>Poison Type</td>
        <td>Herbal Extract Taken <br> (grams)</td>
        <td>Your Earning <br> (points)</td>
    </tr>
    </table>
<br>
                <button type="button" class="collapsible">Show Payoff Table</button>
            <div class="content">
                <div style="font-weight: bold; text-align: center;">
                    Earning (Points) = 300 – [The exact amount needed – The actual amount taken]&sup2; for <span class="roleS">S</span>
                </div>
                <div style="font-size: 1.2em; text-align: center;">
                    and
                </div>
                <div style="font-weight: bold; text-align: center;">
                    Earning (Points) = 300 – 3 &times; [The exact amount needed – The actual amount taken]&sup2; for <span class="roleR">R</span>
                </div>
                <br>
                <table id="ptable" width="100%" height ="100%" style="text-align: center;">
                      <tr style="height: 5%;">
                          <th rowspan="2" colspan="2">If the poison is</th>
                          <th colspan="3">Points for <span style ="font-size:1.2em; font-weight: bold; color: dodgerblue">R (YOU)</span></th>
                          <th colspan="3">Points for <span style ="font-size:1.2em; font-weight: bold; color: red">S </span></th>
                      </tr>
                      <tr style="height: 5%;">
                          <th>TYPE 0 <br> ({{ typeO_prob }}%)</th>
                          <th>&nbsp</th>
                          <th>TYPE 1 <br> ({{ typeI_prob }}%)</th>
                          <th>TYPE 0 <br> ({{ typeO_prob }}%)</th>
                          <th>&nbsp</th>
                          <th>TYPE 1 <br> ({{ typeI_prob }}%)</th>
                      </tr>
                  </table>
                <br>
            </div>

{% endblock %}

{% block scripts %}

    <script src="/static/antidote/collapse_box.js"></script>

    <script>
    var Types= {{ Type_dict|safe }};
    var Actions = {{ Action_dict|safe }};
    var Earnings = {{ Earning_dict|safe }};
    var i;
    var tr;
    for (i = 1; i <= {{tot_match_num}}; i++){
        tr = $('<tr/>');
        tr.append("<td>" + i + "</td>");
        tr.append("<td>" + Types[i] + "</td>");
        tr.append("<td>" + Actions[i] + "</td>");
        tr.append("<td>" + Earnings[i] + "</td>");
        if (i=={{ chosen_round }}){
            tr.css("background-color", "gold");
        }
        $("#History").append(tr);
    }


        var Payoffs = {{ payoffs|safe }};
    {#console.log(Object.keys(Payoffs).length );#}
    for (var i = 0; i < Object.keys(Payoffs).length ; i++){
        var tr = $('<tr/>');
        if (i == 0){
            tr.append("<td rowspan='"+Object.keys(Payoffs).length+"'>The Actual Amount (grams) of Herbal Extract Taken </td>");
            tr.append("<td>" + i + "</td>");
            tr.append("<td>" + Payoffs[i]['R0'] + "</td>");
            tr.append("<td>&nbsp; </td>");
            tr.append("<td>" + Payoffs[i]['R1'] + "</td>");
            tr.append("<td>" + Payoffs[i]['S0'] + "</td>");
            tr.append("<td>&nbsp; </td>");
            tr.append("<td>" + Payoffs[i]['S1'] + "</td>");
        }
        else{
            tr.append("<td style='display:none;'></td>");
            tr.append("<td>" + i + "</td>");
            tr.append("<td>" + Payoffs[i]['R0'] + "</td>");
            tr.append("<td>&nbsp; </td>");
            tr.append("<td>" + Payoffs[i]['R1'] + "</td>");
            tr.append("<td>" + Payoffs[i]['S0'] + "</td>");
            tr.append("<td>&nbsp; </td>");
            tr.append("<td>" + Payoffs[i]['S1'] + "</td>");
        }
        $("#ptable").append(tr);

    }


var conflict = parseInt({{ conflict }});
$('#ptable tr').eq(2).find('td').eq(2).css({"color": 'dodgerblue', 'font-weight': 'bold'});
$('#ptable tr').eq(12).find('td').eq(4).css({"color": 'dodgerblue', 'font-weight': 'bold'});
$('#ptable tr').eq(conflict+2).find('td').eq(5).css({"color": 'red', 'font-weight': 'bold'});
$('#ptable tr').eq(12).find('td').eq(7).css({"color": 'red', 'font-weight': 'bold'});

    </script>
{% endblock %}