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

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

{% block styles %}

    <style>

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

    </style>
{% endblock %}

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

   </style>

    <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; ">You total cash payment is </span> the earnings from the randomly chosen round ({{ money|to0 }} 원) <br>
    PLUS show-up fee ({{ session.participation_fee|to0 }} 원), which is (rounded to) <span style="font-size:30px; font-weight: bold;"> {{ total_payment|to0 }} 원</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 <span style="font-weight: bold;"> take a picture of this page </span> for your own record and keep it for at least 3 weeks.
SNU 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>Your Earning</td>
    </tr>
    </table>
<br>

{% endblock %}

{% block scripts %}


<script>
    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>" + Earnings[i] + "</td>");
        if (i=={{ chosen_round }}){
            tr.css("background-color", "gold");
        }
        $("#History").append(tr);
    }
</script>
{% endblock %}