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

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

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

   </style>

    <p>
    The computer has randomly chosen one match for your payment: <span style="font-size:25px">Match {{chosen_match}}.</span><br>
     <span style="font-weight: bold; color: red;">You total cash payment is </span> the earnings from the randomly chosen match ({{final_payment}}) <br>
    PLUS HK$40 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>Match #</td>
        <td>Buyer’s Value</td>
        <td>Accepted Offer</td>
        <td>Match Outcome</td>
        <td>Your Earning</td>
    </tr>
    </table>

{% endblock %}

{% block scripts %}
    <script>
    var Bvalues = {{ Bvalue_dict|safe }};
    var AcOffers = {{ AcOffer_dict|safe }};
    var Outcomes = {{ Outcome_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>" + Bvalues[i] + "</td>");
        tr.append("<td>" + AcOffers[i] + "</td>");
        tr.append("<td>" + Outcomes[i] + "</td>");
        tr.append("<td>" + Earnings[i] + "</td>");
        if (i=={{ chosen_match }}){
            tr.css("background-color", "gold");
        }
        $("#History").append(tr);
    }
    </script>
{% endblock %}