{{ extends 'global/Page.html' }}
{{ block title }}Round {{player.round_number}}{{ endblock }}

{{ block content }}

<!-- CDN link for font awesome icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<div id="round-notice" hidden></div>

<div id="gameplay-rules">
    <div>
        <strong>Gameplay Rules</strong>
        <a class="btn" id="rules-icon-btn" href="https://apps.cte.smu.edu.sg/intltrade-instructions/" target="_blank"><i class="fas fa-info-circle fa-lg " style="color:midnightblue"></i></a>
        <span id="rules-tooltip">View gameplay instructions (opens in new tab)</span>
    </div>
    <ol>
    <li>In each round, try to obtain enough of each of the 4 resources (energy, consumer products, medical supplies, food) to meet your country's needs.</li>
    <li>If resource needs are not met, the following penalties apply:
        <ul>
            <li><strong>Production costs are increased</strong>. You’ll encounter the biggest rise in production costs if you are unable to meet medical needs, followed by food and energy needs, and finally consumer good needs</li>
            <li><strong>Production output is reduced</strong>. For every unit of consumer goods not met, it reduces output of all goods by 0.5. For every unit of energy not met, it reduces output of all goods by 0.75. For every unit of food not met, it reduces output of all goods by 0.75. For every unit of medical supplies not met, it reduces output of all goods by 1.</li>
        </ul>
    </li>
    <li>You may choose to produce resources at a cost, trade with other players, and borrow and lend.</li>
    <li>You may also choose to gift resources and donate funds to other countries. </li>
</ol>
</div>

<div id="country-flag"></div>
<div id="instructions">
    <h6> You are playing as {{player.role}}.</h6>
    <ul>
        <li>You may edit values in the fields highlighted in yellow.</li>
        <li>Fields in blue are highlighted as key indicators of your country's performance.</li>
        <li>Values on your page will change accordingly with trading and lending decisions made by other countries.</li>
    </ul>
</div>
<div>
<strong>Other Information</strong>
<ol>
    <li>Each country has a relative advantage in producing a resource, as follows:
        <ul>
            <li> <strong>Sadi Arabica</strong> - <i>Energy</i></li>
            <li> <strong>Chinland</strong> - <i>Consumer products</i></li>
            <li> <strong>Amerikas</strong> - <i>Medical supplies</i></li>
            <li> <strong>Brazilia</strong> - <i>Food</i></li>
        </ul>
    </li>
    <li>Amerikas is the richest country, and Brazil is the poorest.</li>
    <li>The world price for all products is currently at <strong>2</strong> per unit.</li>
</ol>
</div>
    
<div id="shock-events-notice">
    <h6>International Events:</h6>
    <div id="event-msg"></div>
</div>

<hr>
<h4>Starting Stockpile and Savings</h4><br>
<table id="initial-table">
    <tr>
        <th class="initial-th">Energy</th>
        <th class="initial-th">Consumer Products</th>
        <th class="initial-th">Medical Supplies</th>
        <th class="initial-th">Food</th>
        <th class="initial-th">Savings</th>
    </tr>
    <tr>
        <th class="initial-icon"><i class="fas fa-plug fa-lg icon-res"></i></th>
        <th class="initial-icon"><i class="fas fa-shopping-cart fa-lg icon-res"></i></th>
        <th class="initial-icon"><i class="fas fa-pump-medical fa-lg icon-res"></i></th>
        <th class="initial-icon"><i class="fas fa-utensils fa-lg icon-res"></i></th>
        <th class="initial-icon"><i class="fas fa-money-bill fa-lg icon-res"></i></th>
    </tr>
    <tr>
        <td class="initial-td">{{player.stockpile_energy}}</td>
        <td class="initial-td">{{player.stockpile_products}}</td>
        <td class="initial-td">{{player.stockpile_medical}}</td>
        <td class="initial-td">{{player.stockpile_food}}</td>
        <td class="initial-td">${{player.savings}}</td>
    </tr>
</table>
<hr>

<h4>Summary</h4>
<div id="penalty-notice" hidden></div>
<h5><i>Resources</i></h5>
<table id="resource-summary-table" style="width:80%; text-align:center; border:1px solid lightgray;">
    <tr>
        <th style="width:20%">Resource</th>
        <th style="width:15%; padding:10px"><i class="fas fa-plug fa-lg"></i></th>
        <th style="width:15%; padding:10px"><i class="fas fa-shopping-cart fa-lg"></i></th>
        <th style="width:15%; padding:10px"><i class="fas fa-pump-medical fa-lg"></i></th>
        <th style="width:15%; padding:10px"><i class="fas fa-utensils fa-lg"></i></th>
    </tr>
    <tr>
        <td class="row-header">Needed</td>
        <td>{{player.needs_energy}}</td>
        <td>{{player.needs_products}}</td>
        <td>{{player.needs_medical}}</td>
        <td>{{player.needs_food}}</td>
    </tr>
    <tr>
        <td class="row-header">Produced</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td class="row-header">Traded</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td class="row-header">Stockpile Change</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td class="row-header">Net</td>
        <td class="perf-indicator"></td>
        <td class="perf-indicator"></td>
        <td class="perf-indicator"></td>
        <td class="perf-indicator"></td>
    </tr>
    <tr>
        <td class="table-endheader" id="stockpile-final-header">Updated Stockpile</td>
        <td class="table-endrow"><input type="number" name="stockpile_energy" id="stockpile_energy" class="stockpile-final" style="border:0px" value=0 readonly /></td>
        <td class="table-endrow"><input type="number" name="stockpile_products" id="stockpile_products" class="stockpile-final" style="border:0px" value=0 readonly /></td>
        <td class="table-endrow"><input type="number" name="stockpile_medical" id="stockpile_medical" class="stockpile-final" style="border:0px" value=0 readonly /></td>
        <td class="table-endrow"><input type="number" name="stockpile_food" id="stockpile_food" class="stockpile-final" style="border:0px" value=0 readonly /></td>
     </tr>
</table><br>

{{ formfield_errors 'stockpile_energy' }}
{{ formfield_errors 'stockpile_products' }}
{{ formfield_errors 'stockpile_medical' }}
{{ formfield_errors 'stockpile_food' }}

<h5><i>Income & Expenditure</i></h5>
<div>
    <table id="income-summary" style="width:50%; text-align:center; border:1px solid lightgray;">
        <tr>
            <th>Item</th>
            <th>Net Income</th>
        </tr>
        <tr>
            <td class="row-header">Production</td>
            <td>0</td>
        </tr>
        <tr>
            <td class="row-header">Trade</td>
            <td>0</td>
        </tr>
        <tr>
            <td class="row-header">Borrowing & Lending</td>
            <td>0</td>
        </tr>
        <tr>
            <td class="table-endheader">Net Total</td>
            <td class="result-cell table-endrow">0</td>
        </tr>
    </table><br>
    
    <table id="savings-table" style="width: 50%; text-align:center">
        <tr>
            <th>Savings at end of round:</th>
            <td><input type="number" name="savings" id="final-savings-td" class="perf-indicator-input" value=0 readonly /></td>
        </tr>
    </table>
    <br>
</div>

{{ formfield_errors 'savings' }}

<h4>Production</h4>
<p><i>Use savings to increase production for each resource:</i></p>
<table id="prod-table">
    <tr>
        <th class="prod-th">Resource</th>
        <th class="prod-th"><i class="fas fa-plug fa-lg"></i></th>
        <th class="prod-th"><i class="fas fa-shopping-cart fa-lg"></i></th>
        <th class="prod-th"><i class="fas fa-pump-medical fa-lg"></i></th>
        <th class="prod-th"><i class="fas fa-utensils fa-lg"></i></th>
    </tr>
    <tr>
        <td class="row-header">Cost per unit</td>
        <td>${{player.costs_energy}}</td>
        <td>${{player.costs_products}}</td>
        <td>${{player.costs_medical}}</td>
        <td>${{player.costs_food}}</td>
    </tr>
    <tr>
        <td class="row-header">Quantity</td>
        <td><input type="number" class="input-std" id="prod-energy" onchange="prodInputUpdate('prod-energy')" value=0></td>
        <td><input type="number" class="input-std" id="prod-products" onchange="prodInputUpdate('prod-products')" value=0></td>
        <td><input type="number" class="input-std" id="prod-medical" onchange="prodInputUpdate('prod-medical')" value=0></td>
        <td><input type="number" class="input-std" id="prod-food" onchange="prodInputUpdate('prod-food')" value=0></td>
    </tr>
    <tr>
        <td class="row-header">Spending</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
    <tr>
        <td class="table-endheader">Total Expense</td>
        <td colspan="4" id="prod-expense" class="table-endrow">0</td>
    </tr>
</table>
<hr>

<h4>Trade</h4>
<table id="trade-header-table" style="width:80%">
    <tr>
        <th class="trade-header-th" style="width:20%"></th>
        <th class="trade-header-th" style="width:15%">Sending</th>
        <th class="trade-header-th" style="width:15%">Price</th>
        <th class="trade-header-th" style="width:15%">Receiving</th>
        <th class="trade-header-th" style="width:15%">Price</th>
    </tr>
</table>

<div id="country1_trade"></div><br>
<div id="country2_trade"></div><br>
<div id="country3_trade"></div><br>
<hr>

<h4>Loans</h4>
<p><i>For donations, leave "rounds" and "interest rate" as 0.</i>
</p>
<div id="loan-table"></div><br>
<p id="loan-summary-label">Net income from borrowing/lending:</p>
<p id="borrowing-lending-income">0</p><br>

<h5>Debt and Repayment Record</h5>
<div id="loan-record-table">No loans in record to display.</div>
<!-- input that updates player's loan record when submitted -->
<input type="text" name="loan_record" id="loan_record" value="" hidden />
<br>
<!--<div id="repayments"></div><br> 
<div id="receiving"></div><br>-->
<p id="repayments-summary-label">Net income from repayments this round:</p>
<p id="net-repayments-income">0</p><br>
<hr>

{{ formfield_errors 'loan_record' }}
{{ formfield_errors 'shortfall_energy' }}
{{ formfield_errors 'shortfall_products' }}
{{ formfield_errors 'shortfall_medical' }}
{{ formfield_errors 'shortfall_food' }}

<p id="error_msg_player" class="error-msg" hidden></p>
<p id="error_msg_all" class="error-msg" hidden>One or more players have invalid inputs.</p>
<!--<button class="otree-btn-next btn btn-primary" id="submit-form-btn" onclick="submitForm()">End Turn</button>-->
<button class="btn btn-primary" type="button" id="submit-form-btn" onclick="submitForm()">End Turn</button>

<!--{{ next_button }}-->

<!-- Resource needs shortfalls -->
<input type="number" name="shortfall_energy" id="shortfall_energy" value=0 hidden />
<input type="number" name="shortfall_products" id="shortfall_products" value=0 hidden />
<input type="number" name="shortfall_medical" id="shortfall_medical" value=0 hidden />
<input type="number" name="shortfall_food" id="shortfall_food" value=0 hidden />

<script>
// Reference array of country names    
let player_country_name =  js_vars.your_country;
let player_loan_record = js_vars.loan_record;
let all_countries = ["amerikas", "brazilia", "chinland", "sadiarabica"];
let country_names = ["Amerikas", "Brazilia", "Chinland", "Sadi Arabica"];

// Remove player's country from arrays to leave only other countries
let removal_element = country_names.indexOf(player_country_name);
let player_country = all_countries[removal_element];
let other_countries = all_countries.slice();
let other_country_names = country_names.slice();
other_countries.splice(removal_element, 1);
other_country_names.splice(removal_element, 1);

// Set flag image URLs as constants
let amerikas_flag_url = "https://cte.smu.edu.sg/sites/cte.smu.edu.sg/files/image_hosting/intl-trade-amerikasflag.png";
let brazilia_flag_url = "https://cte.smu.edu.sg/sites/cte.smu.edu.sg/files/image_hosting/intl-trade-braziliaflag.png";
let chinland_flag_url = "https://cte.smu.edu.sg/sites/cte.smu.edu.sg/files/image_hosting/intl-trade-chinlandflag.png";
let sadiarabica_flag_url = "https://cte.smu.edu.sg/sites/cte.smu.edu.sg/files/image_hosting/intl-trade-sadiarabicaflag.png";
    
// Create trade tables for other countries
for (let i=0; i < other_countries.length; i++) {
    let country = other_countries[i];
    let country_name = other_country_names[i];
    let image_url = '';
    let image_alt = '';
    // Set flag image
    switch (country_name) {
        case "Amerikas":
            image_url = amerikas_flag_url;
            image_alt = "Amerikas' country flag";
            break;
        case "Brazilia":
            image_url = brazilia_flag_url;
            image_alt = "Brazilia's country flag";
            break;
        case "Chinland":
            image_url = chinland_flag_url;
            image_alt = "Chinland's country flag";
            break;
        case "Sadi Arabica":
            image_url = sadiarabica_flag_url;
            image_alt = "Sadi Arabica's country flag";
    }
    let element = document.getElementById("country" + (i + 1) + "_trade");
    element.innerHTML = `
        <table id="table_trade_` + country + `" style="width:80%">
            <tr>
                <th style="width:20%"><p class="trade-country-name"><b>` + country_name + `</b></p><img src="` + image_url +`" alt="` + image_alt + `" class="trade-flag"></div></th>
                <th style="width:15%; text-align:center; padding:10px"><i class="fas fa-plane-departure fa-lg icon-trade"></i></th>
                <th style="width:15%; text-align:center; padding:10px"><i class="fas fa-dollar-sign fa-lg icon-trade"></i></th>
                <th style="width:15%; text-align:center; padding:10px"><i class="fas fa-plane-arrival fa-lg icon-trade"></i></th>
                <th style="width:15%; text-align:center; padding:10px"><i class="fas fa-dollar-sign fa-lg icon-trade"></i></th>
            </tr>
            <tr>
                <td class="row-header">Energy</td>
                <td><input type="number" id="trade_` + country + `_energy" class="input-std" onchange="tradeInputUpdate('` + country + `','energy','trade_` + country + `_energy')" value=0></td>
                <td><input type="number" step="0.01" id="trade_` + country + `_energy_price" class="input-std" onchange="tradeInputUpdate('` + country + `','energy','trade_` + country + `_energy_price')" value=0></td>
                <td id="recv_` + country + `_energy" style="text-align:center">0</td>
                <td id="recv_` + country + `_energy_price" style="text-align:center">0</td>
            </tr>
            <tr>
                <td class="row-header">Consumer Products</td>
                <td><input type="number" id="trade_` + country + `_products" class="input-std" onchange="tradeInputUpdate('` + country + `','products','trade_` + country + `_products')" value=0></td>
                <td><input type="number" step="0.01" id="trade_` + country + `_products_price" class="input-std" onchange="tradeInputUpdate('` + country + `','products','trade_` + country + `_products_price')" value=0></td>
                <td id="recv_` + country + `_products" style="text-align:center">0</td>
                <td id="recv_` + country + `_products_price" style="text-align:center">0</td>
            </tr>
            <tr>
                <td class="row-header">Medical Supplies</td>
                <td><input type="number" id="trade_` + country + `_medical" class="input-std" onchange="tradeInputUpdate('` + country + `','medical','trade_` + country + `_medical')" value=0></td>
                <td><input type="number" step="0.01" id="trade_` + country + `_medical_price" class="input-std" onchange="tradeInputUpdate('` + country + `','medical','trade_` + country + `_medical_price')" value=0></td>
                <td id="recv_` + country + `_medical" style="text-align:center">0</td>
                <td id="recv_` + country + `_medical_price" style="text-align:center">0</td>
            </tr>
            <tr>
                <td class="row-header">Food</td>
                <td><input type="number" id="trade_` + country + `_food" class="input-std" onchange="tradeInputUpdate('` + country + `','food','trade_` + country + `_food')" value=0></td>
                <td><input type="number" step="0.01" id="trade_` + country + `_food_price" class="input-std" onchange="tradeInputUpdate('` + country + `','food','trade_` + country + `_food_price')" value=0></td>
                <td id="recv_` + country + `_food" style="text-align:center">0</td>
                <td id="recv_` + country + `_food_price" style="text-align:center">0</td>
            </tr>
            <tr>
                <td class="table-endheader">Income</td>
                <td colspan="4" id="trade_income_` + country + `" class="table-endrow">0</td>
            </tr>
        </table>`;
};

// Create loan table
let loan_table_content = `
    <table id="loan-table">
        <tr>
            <th style="width:12%">Country</th>
            <th style="width:11%">Lend</th>
            <th style="width:11%">Rounds</th>
            <th style="width:11%">Interest Rate(%)</th>
            <th style="width:11%">Repayment (per rnd)</th>
            <th style="width:11%">Borrowed</th>
            <th style="width:11%">Rounds</th>
            <th style="width:11%">Rate(%)</th>
            <th style="width:11%">Payment (per rnd)</th>
        </tr>
`;
    
for (let j=0; j < other_countries.length; j++) {
    let country = other_countries[j];
    let country_name = other_country_names[j];
    loan_table_content += `    
        <tr>
            <td class="row-header">` + country_name + `</td>
            <td><input type="number" step="0.01" id="loan_` + country + `_amount" class="input-std" onchange="loanInputUpdate('` + country + `','loan_` + country + `_amount')" value=0></td>
            <td><input type="number" id="loan_` + country + `_rounds" class="input-std" onchange="loanInputUpdate('` + country + `','loan_` + country + `_rounds')" value=0></td>
            <td><input type="number" step="0.01" id="loan_` + country + `_interest" class="input-std" onchange="loanInputUpdate('` + country + `','loan_` + country + `_interest')" value=0></td>
            <td id="repayment_from_` + country + `" class="result-cell">0</td>
            <td id="loan_from_` + country + `_amount">0</td>
            <td id="loan_from_` + country + `_rounds">0</td>
            <td id="loan_from_` + country + `_interest">0</td>
            <td id="repayment_to_` + country + `" class="result-cell">0</td>
        </tr>
    `;
}
loan_table_content += `</table>`;
document.getElementById("loan-table").innerHTML = loan_table_content;
    
// Page must be loaded before liveSend method can be used
window.addEventListener('DOMContentLoaded', (event) => {
    // Display shock event message
    displayEventMsg();    
    // Update table with production figures
    updateTables();
    // Display player's country flag
    displayFlag();
    // Display penalty if any
    displayPenalty();
    // Set initial penalty value
    checkPenalty();
    // Give players notice that round 1 is a trial round
    // displayTrialRound();
    // Set loan record string to be submitted
    updateLoanRecord();
});

// Functions to trigger on player input
function prodInputUpdate(id) {
	checkInputs(id);
    updateProdTable();
    updateSummaryResources();
    updateIncomeTable();
    checkValid();
    checkPenalty();
}

function tradeInputUpdate(receiving, resource, id) {
	checkInputs(id);
    liveUpdateTrade(receiving, resource); 
    updateSummaryResources();
    updateIncomeTable();
    checkValid();
    checkPenalty();
}
    
function loanInputUpdate(receiving, id) {
	checkInputs(id);
    liveUpdateLoan(receiving);
    updateIncomeTable();
    updateLoanRecord();
    checkValid();
    checkPenalty();
}
    
function paymentInputUpdate(sending, receiving, principal, interest, rounds, entry) {
	checkInputRepayment();
    liveUpdateRepayments(sending, receiving, principal, interest, rounds, entry);
    updateIncomeTable();
    updateLoanRecord();
    checkValid();
    checkPenalty();
}

// Calculates nominal payment per round 
function calculateLoanPayment(principal, interest, rounds) {
    let payment = 0;
    // when principal is 0 or is donated
    if (principal === 0 || rounds === 0) {
    	payment = 0;
    }
    // interest free loan
    else if (interest === 0) {
        payment = Math.round((principal / rounds) * 100) / 100;
    }
    // calculate per round payment for self-amortizing loans
    else {
        let intr_rate = interest / 100;
        payment = principal * ((Math.pow(1 + intr_rate, rounds) * intr_rate) / (Math.pow(1 + intr_rate, rounds) - 1));
        payment = Math.round(payment * 100) / 100;
    }
    return payment;
}

// Prevent negative inputs
function checkInputs(element_id) {
	let ele = document.getElementById(element_id);
	let val = ele.value;
    // minimum value allowed is zero
    if (val< 0) {
        ele.value = 0;
    }
    else if (val == "") {
    	ele.value = 0;
    }
    // check for input validity (e.g. integer, float)
    if (!ele.checkValidity()) {
    	alert("Check that the quantity you have entered is valid. All inputs apart from monetary amounts are to be integers.");
    }
}

// Prevent negative repayment input
function checkInputRepayment() {
	let eles = document.getElementsByClassName("input-repay");
	// Parse through all repayment fields and set negative inputs to 0
	for (let i=0; i < eles.length; i++) {
		if (eles[i].value < 0) {
			eles[i].value = 0;
		}
	}
}

// Checks if needs are met and calculate resource deficits
function checkPenalty() {
    let resource_summary = document.getElementById("resource-summary-table");
    // Deficits for each resource are a ratio of net shortfall to needs
    let net_energy = resource_summary.rows[5].cells[1].innerHTML;
    let net_products = resource_summary.rows[5].cells[2].innerHTML;
    let net_medical = resource_summary.rows[5].cells[3].innerHTML;
    let net_food = resource_summary.rows[5].cells[4].innerHTML;
    
    let energy_deficit = (net_energy < 0 ? (0 - net_energy) : 0);
    let products_deficit = (net_products < 0 ? (0 - net_products) : 0);
    let medical_deficit = (net_medical < 0 ? (0 - net_medical) : 0);
    let food_deficit = (net_food < 0 ? (0 - net_food) : 0);
    
    // Submit shortfalls to apply penalties next round
    document.getElementById("shortfall_energy").value = energy_deficit;
    document.getElementById("shortfall_products").value = products_deficit;
    document.getElementById("shortfall_medical").value = medical_deficit;
    document.getElementById("shortfall_food").value = food_deficit;
}

// Checks that stockpile and savings are more than 0
function checkValid() {
    let savings = parseFloat(document.getElementById("final-savings-td").value);
    let initial = document.getElementById("initial-table");
    let resource_summary = document.getElementById("resource-summary-table");

    let stockpile_energy = parseInt(document.getElementById("stockpile_energy").value);
    let stockpile_products = parseInt(document.getElementById("stockpile_products").value);
    let stockpile_medical = parseInt(document.getElementById("stockpile_medical").value);
    let stockpile_food = parseInt(document.getElementById("stockpile_food").value);

    let stockorig_energy = parseInt(initial.rows[2].cells[0].innerHTML);
    let stockorig_products = parseInt(initial.rows[2].cells[1].innerHTML);
    let stockorig_medical = parseInt(initial.rows[2].cells[2].innerHTML);
    let stockorig_food = parseInt(initial.rows[2].cells[3].innerHTML);

    let produced_energy = parseInt(resource_summary.rows[2].cells[1].innerHTML);
    let produced_products = parseInt(resource_summary.rows[2].cells[2].innerHTML);
    let produced_medical = parseInt(resource_summary.rows[2].cells[3].innerHTML);
    let produced_food = parseInt(resource_summary.rows[2].cells[4].innerHTML);

    let traded_energy = parseInt(resource_summary.rows[3].cells[1].innerHTML);
    let traded_products = parseInt(resource_summary.rows[3].cells[2].innerHTML);
    let traded_medical = parseInt(resource_summary.rows[3].cells[3].innerHTML);
    let traded_food = parseInt(resource_summary.rows[3].cells[4].innerHTML);

    // Resources in stockpile cannot be negative
    let stockpile_check = (stockpile_energy >= 0 && stockpile_products >= 0 && stockpile_medical >= 0 && stockpile_food >= 0);
    // Not allowed to trade more than produced and stockpiled resources 
    let trade_check = (traded_energy + stockorig_energy + produced_energy >= 0) && (traded_products + stockorig_products + produced_products >= 0) && (traded_medical + stockorig_medical + produced_medical >= 0) && (traded_food + stockorig_food + produced_food >= 0);

    // Disable next button and show warning if conditions not met 
    let next_btn = document.getElementById("submit-form-btn");
    //let next_btn_arr = document.getElementsByClassName("otree-btn-next btn");
    let warning_msg = document.getElementById("error_msg_player");
    if (!stockpile_check || !trade_check || savings < 0) {
        // Assume that there's only one button with classes "otree-btn-next" and "btn"
        next_btn.setAttribute("disabled","disabled");
        if (savings < 0) {
            warning_msg.innerHTML = "Check that your savings are not less than 0 after all actions are taken.";
        }
        else if (!trade_check) {
            warning_msg.innerHTML = "Ensure that you are not trading away more resources than are available from production and the stockpile.";
        }
        else if (!stockpile_check) {
            warning_msg.innerHTML = "Check that stocks of each resource are not less than 0 after all actions are taken.";
        }
        warning_msg.removeAttribute("hidden");
        playerCheck(false);
    }
    else {
        next_btn.removeAttribute("disabled");
        warning_msg.setAttribute("hidden","hidden");
        playerCheck(true);
    }
}    

// Reformats country name
function convertCountryName(name) {
    let converted = "";
    switch (name) {
        case "amerikas":
            converted = "Amerikas";
            break;
        case "brazilia":
            converted = "Brazilia";
            break;
        case "chinland":
            converted = "Chinland";
            break;
        case "sadiarabica":
            converted = "Sadi Arabica";
    }
    return converted;
}
    
// Displays text for shock events
function displayEventMsg() {
    let country = js_vars.your_country;
    let round = js_vars.round;
    let msgDisplay = document.getElementById("event-msg");
    let generalText = '';
    let countryText = '';
    // Get order of events
    let events_arr = js_vars.events_arr; 
    
    switch (round) {
        case 1:
            generalText = "No events this round. All is well in the world, for once.";
            //generalText = "An oil tanker has run aground in Maldivia and a massive volume of unrefined crude oil is spilling into an important commercial fishing area. Since Maldivia is an internationally vital exporter of fish products, the cost of food production worldwide is increased by $1 for this round.";
            msgDisplay.innerHTML = generalText;
            break;
        case (events_arr.indexOf("Brazilia oil find") + 2):
            generalText = "[World Headline] Brazilia has discovered a new oil field. This increases her production of energy and reduces her cost of energy.";
            countryText = "[World Headline] Brazilia has discovered a new oil field. This increases her production of energy and reduces the cost of energy.[Confidential Info] You now produce 20 units of energy each round, and energy production cost is permanently lowered by 3.";
            country == "Brazilia" ? msgDisplay.innerHTML = countryText : msgDisplay.innerHTML = generalText;
            break;
        case (events_arr.indexOf("Chinland earthquake") + 2):
            generalText = "[World Headline] Chinland has been struck by an earthquake! There is serious damage to factories and infrastructure. Many lives have been lost and thousands are in need of serious medical care.";
            countryText = "[World Headline] Chinland has been struck by an earthquake! There is serious damage to factories and infrastructure. Many lives have been lost and thousands are in need of serious medical care. [Confidential Info] Damage to factories and infrastructure has caused your consumer product output to temporarily fall by 10 units. Medical supplies needed have also temporarily increased by 10 units.";
            country == "Chinland" ? msgDisplay.innerHTML = countryText : msgDisplay.innerHTML = generalText;
            break;w
        case (events_arr.indexOf("Brazilia drought") + 2):
            generalText = "[World Headline] Due to climate change, farmers in various regions of Brazilia are facing crop failure due to drought, reducing food production."
            countryText = "[World Headline] Due to climate change, farmers in various regions of Brazilia are facing crop failure due to drought, reducing food production. [Confidential Info] Your food production has temporarily decreased by 40 units.";
            country == "Brazilia" ? msgDisplay.innerHTML = countryText: msgDisplay.innerHTML = generalText;
            break;
        case (events_arr.indexOf("Global pandemic") + 2):
            generalText = "An unprecedented pandemic has spread around the globe and demand for medical supplies have increased worldwide. For one round, all countries need 20 more units of medical supplies than usual.";
            msgDisplay.innerHTML = generalText;
    }
}

// Show country flag according to player's country
function displayFlag() {    
    let image_element = document.getElementById("country-flag");
    let country = js_vars.your_country;
    let image_url = '';
    let image_alt = '';
    switch (country) {
        case "Amerikas":
            image_url = amerikas_flag_url;
            image_alt = "Amerikas' country flag";
            break;
        case "Brazilia":
            image_url = brazilia_flag_url;
            image_alt = "Brazilia's country flag";
            break;
        case "Chinland":
            image_url = chinland_flag_url;
            image_alt = "Chinland's country flag";
            break;
        case "Sadi Arabica":
            image_url = sadiarabica_flag_url;
            image_alt = "Sadi Arabica's country flag";
    }
    image_element.innerHTML = `
        <img src="` + image_url + `" alt="` + image_alt + `" width="108" height="72">
    `;
}
    
// Generates and displays borrowing and owed record for player
function displayLoanRecords() {
    let records = player_loan_record;
    if (records) {
        let records_arr = records.split(";")
        let records_table = `
            <table id="records-table">
                <tr>
                    <th style="width:12%">Type</th>
                    <th style="width:12%">Country</th>
                    <th style="width:12%">Principal</th>
                    <th style="width:12%">Interest(%)</th>
                    <th style="width:12%">Rounds left</th>    
                    <th style="width:12%">Payment/Rnd</th>
                    <th style="width:14%">Outstanding</th>
                    <th style="width:14%">Repayment</th>
                </tr>
        `;
        // Create one entry per existing loan
        let rec_length = records_arr.length;
        for (let i=0; i<rec_length; i++) {
            let rec_arr = records_arr[i].split(",");
            let type = rec_arr[0].slice(0,1).toUpperCase() + rec_arr[0].slice(1);
            let country = convertCountryName(rec_arr[1]);
            let orig_amt = parseFloat(rec_arr[2]);
            let rounds = parseInt(rec_arr[3]) - 1;
            let interest = parseFloat(rec_arr[4]);
            let payment = parseFloat(rec_arr[5]);
            // Apply interest rate to outstanding loan amount
            let remaining_amt = (parseFloat(rec_arr[6]) * ((100 + interest)/100)).toFixed(2);
            // Entry no. is the row number of the record in the table
            let entry_no = i + 1;
            let sending = "";
            switch (player_country_name) {
                case "Amerikas":
                    sending = "amerikas";
                    break;
                case "Brazilia":
                    sending = "brazilia";
                    break;
                case "Chinland":
                    sending = "chinland";
                    break;
                case "Sadi Arabica":
                    sending = "sadiarabica";
            }
            // Do not display paid off loans
            if (remaining_amt > 0 && !(type === "donated to" || type === "donated from")) {
                records_table += `
                    <tr>
                        <td class="row-header">` + type + `</td>
                        <td class="row-header">` + country + `</td>
                        <td>` + orig_amt + `</td>
                        <td>` + interest + `</td>
                        <td>` + rounds + `</td>
                        <td>` + payment + `</td>
                        <td>` + remaining_amt + `</td>
                `;
                // Input field for amount to repay
                if (type == "Borrowing") {
                    records_table += `
                        <td><input type="number" step="0.01" class="input-std input-repay" onchange="paymentInputUpdate('` + sending + `','` + rec_arr[1] + `',` + orig_amt + `,` + interest + `,` + rounds + `,` + entry_no + `)" value=0 /></td>
</tr>
                    `;
                }
                else if (type == "Lending") {
                    records_table += `
                        <td>0</td>
                    </tr>
                    `;
                }
                else {
                    records_table += `<td></td></tr>`;
                }
            }
        }; 
        records_table += `
                <!--<tr>
                    <td class="table-endheader">Net Income</td>
                    <td colspan="7" class="table-endrow" id="loans-net-income">0</td>
                </tr>-->
            </table>
        `;
        document.getElementById("loan-record-table").innerHTML = records_table;
    }
}

// Displays a warning message if a penalty is currently applied
function displayPenalty() {
    let notice = document.getElementById("penalty-notice");
    if (js_vars.penalty_mode) {
        notice.innerHTML = "You failed to meet your <i>{{player.penalty_intel}}</i> needs, so morale among your citizens is low. You need to pay them more to incentivize them to work. Default production has decreased, and production costs for all goods have increased.";
        notice.removeAttribute("hidden");
    }
}

// Notify players that round 1 is a trial round
function displayTrialRound() {
    let trial_msg = document.getElementById("round-notice");
    if (js_vars.round === 1) {
        
        trial_msg.innerHTML = `
            <p style="color:red; font-weight:bold">Round 1 is a <u>trial round</u> and no inputs or values will be brought over to the next round.</p>
        `;
        trial_msg.removeAttribute("hidden");
    }
}
    
// Finds net income from loans agreed and repayments given and received
function getLoanIncome() {
    let loan_income = 0;
    // Add net income from borrowing and lending agreed this round
    loan_income += parseFloat(document.getElementById("borrowing-lending-income").innerHTML);
    // Find and add net income from repayments made and received this round
    loan_income += parseFloat(document.getElementById("net-repayments-income").innerHTML);
    return loan_income;
}

// Handles live updates across players
function liveRecv(data) {
    // Check for valid inputs and whether round can continue
    if (data.type === "players_check") {
        let next_btn = document.getElementById("submit-form-btn");
        //let next_btn_arr = document.getElementsByClassName("otree-btn-next");
        let warning_msg = document.getElementById("error_msg_all");
        // check is "true", all players have valid inputs
        if (data.check) {
            // Assume only one button with class "otree-btn-next"
            next_btn.removeAttribute("disabled");
            warning_msg.setAttribute("hidden","hidden");
        }
        // check is "false" and player(s) has invalid inputs
        else if (!data.check) {
            next_btn.setAttribute("disabled","disabled");
            warning_msg.removeAttribute("hidden");
        }
    }
    else if (data.type === "trade") {
        let sending = data.sending;
        let resource = data.resource;
        let element_qty = document.getElementById("recv_" + sending + "_" + resource);
        let element_price = document.getElementById("recv_" + sending + "_" + resource + "_price");
        element_qty.innerHTML = data.quantity;
        element_price.innerHTML = data.price;
        // Update values and check validity
        updateTradeIncome(sending);
        updateSummaryResources();
        updateIncomeTable();
        checkValid();
        checkPenalty();
        
        // Highlight fields to indicate change
        element_qty.classList.add("highlighted");
        element_price.classList.add("highlighted");
        // Remove classes to reset highlight
        setTimeout(function() {
            element_qty.classList.remove("highlighted");
            element_price.classList.remove("highlighted");
        }, 5000);
    }
    else if (data.type === "loan") {
        let sending = data.sending;
        let element_amt = document.getElementById("loan_from_" + sending + "_amount");
        let element_rnds = document.getElementById("loan_from_" + sending + "_rounds");
        let element_int =  document.getElementById("loan_from_" + sending + "_interest");
        let element_repay = document.getElementById("repayment_to_" + sending);
        // Calculate repayment, check if amount is donated 
        element_amt.innerHTML = data.amount;
        element_rnds.innerHTML = data.rounds;
        element_int.innerHTML = data.interest;
        element_repay.innerHTML = calculateLoanPayment(data.amount, data.interest, data.rounds);
        
        // Update values and check validity
        updateBorrowingLendingIncome();
        updateSummaryResources();
        updateIncomeTable();
        updateLoanRecord();
        checkValid();
        checkPenalty();
        
        // Highlight fields to indicate change
        element_amt.classList.add("highlighted");
        element_rnds.classList.add("highlighted");
        element_int.classList.add("highlighted");
        
        // Remove classes to reset highlight
        setTimeout(function() {
            element_amt.classList.remove("highlighted");
            element_rnds.classList.remove("highlighted");
            element_int.classList.remove("highlighted");
        }, 5000);
    }
    else if (data.type === "repayment") {
        let sending = convertCountryName(data.sending);
        let amount = data.amount;
        let interest = data.interest;
        let rounds = data.rounds;
        let repayment = data.repayment;
        let round_payment = data.round_payment;

        let loan_table = document.getElementById('loan-record-table').children[0];
        let table_rows = loan_table.rows.length;
        for (let i=1; i<table_rows; i++) {
            let country = loan_table.rows[i].cells[1].innerHTML;
            let orig_amt = parseFloat(loan_table.rows[i].cells[2].innerHTML);
            let intr = parseFloat(loan_table.rows[i].cells[3].innerHTML);
            let rnds = parseInt(loan_table.rows[i].cells[4].innerHTML);
            let orig_rnd_payment = parseFloat(loan_table.rows[i].cells[5].innerHTML);
            // check if loan details match info
            if (country == sending && orig_amt == amount && intr == interest && rnds == rounds && Math.abs(round_payment - orig_rnd_payment) < 0.01) {
                // Retrieve outstanding loan amount from the corresponding record string since both have the same order
                let record_arr = player_loan_record.split(";");
                let single_rec_arr = record_arr[i-1].split(",");
                let outstanding = single_rec_arr[6] * ((100 + intr) / 100);
                // Update repayment amount
                loan_table.rows[i].cells[7].innerHTML = repayment;
                // Update outstanding amaount
                loan_table.rows[i].cells[6].innerHTML = Math.round((outstanding - repayment) * 100) / 100;
                // Highlight changed fields
                loan_table.rows[i].cells[7].classList.add("highlighted");
                loan_table.rows[i].cells[6].classList.add("highlighted");
                // Remove classes to reset highlight
                setTimeout(function() {
                    loan_table.rows[i].cells[7].classList.remove("highlighted");
                    loan_table.rows[i].cells[6].classList.remove("highlighted");
                }, 5000);
            }
        }
        // Update net income from payments sent and received
        updatePaymentsTotal();
        // Update loan record
        updateLoanRecord();
        updateIncomeTable();
    }
    else if (data.type === "submit") {
    	let country = data.submitted; 
    	console.log(country + " has finished their turn!");
    	remove_country_inputs(country);
    }
}

// Updates other players that actions are complete and turn has ended, disable their interactions with player
function liveUpdateForm() {
	liveSend({
		'type': 'submit',
		'country': player_country
	});
}

// Updates loan values for lending and borrowing countries
function liveUpdateLoan(receiving) {
    let sending = player_country;
    let amount = parseFloat(document.getElementById("loan_" + receiving + "_amount").value);
    let rounds = parseInt(document.getElementById("loan_" + receiving + "_rounds").value);
    let interest = parseFloat(document.getElementById("loan_" + receiving + "_interest").value);
    // Find and display annual repayment amount
    let repayment = 0;
    if (rounds === 0) {
        // Amount is donated
        repayment = 0;
    }
    else {
        repayment = calculateLoanPayment(amount, interest, rounds);
    }
    document.getElementById("repayment_from_" + receiving).innerHTML = repayment;
    updateBorrowingLendingIncome();
    liveSend({
        'type': 'loan',
        'sending': sending,
        'receiving': receiving,
        'amount': amount,
        'rounds': rounds,
        'interest': interest
    });
}    

// Updates repayments for receiving countries
function liveUpdateRepayments(sending, receiving, amount, interest, rounds, entry) {
    let repayment = document.getElementById("loan-record-table").children[0].rows[entry].cells[7].children[0].value;
    // Update outstanding amount in loan record
    let records = player_loan_record;
    let records_arr = records.split(";");
    let record_string = records_arr[entry - 1].split(",");
    let remaining = parseFloat(record_string[6]);
    let rnd_payment = parseFloat(record_string[5]);
    // Update outstanding loan amount
    document.getElementById("loan-record-table").children[0].rows[entry].cells[6].innerHTML = ((remaining * ((100 + interest)/100)) - repayment).toFixed(2);
    updatePaymentsTotal();
    updateIncomeTable();
    liveSend({
        'type': "repayment",
        'sending': sending,
        'receiving': receiving,
        'amount': amount,
        'interest': interest,
        'rounds': rounds,
        'round_payment': rnd_payment,
        'repayment': repayment
    });
}
    
// Updates trade values for sending and receiving countries
function liveUpdateTrade(receiving, resource) {
    let sending = player_country;
    let trade_qty = parseInt(document.getElementById("trade_" + receiving + "_" + resource).value);
    let trade_price = parseFloat(document.getElementById("trade_" + receiving + "_" + resource + "_price").value);
    // Update trade income for country
    updateTradeIncome(receiving);
    
    liveSend({
        'type': 'trade',
        'sending': sending,
        'receiving': receiving,
        'resource': resource,
        'quantity': trade_qty,
        'price': trade_price
    });
}

// Update font colour of key player performance indicators according to value
function performanceIndicate() {
    let indicators = document.getElementsByClassName("perf-indicator");  
    Object.keys(indicators).forEach(function(index) {
        let value = parseFloat(indicators[index].innerHTML);
        if (value >= 0) {
            indicators[index].classList.remove("performance-poor");
            indicators[index].classList.add("performance-good");
        }
        else {
            indicators[index].classList.remove("performance-good");
            indicators[index].classList.add("performance-poor");
        }
    })
    
    let inputIndicators = document.getElementsByClassName("perf-indicator-input");
    Object.keys(inputIndicators).forEach(function(index) {
        let inputVal = parseFloat(inputIndicators[index].value);
        if (inputVal >= 0) {
            inputIndicators[index].classList.remove("performance-poor");
            inputIndicators[index].classList.add("performance-good");
        }
        else {
            inputIndicators[index].classList.remove("performance-good");
            inputIndicators[index].classList.add("performance-poor");
        }
    })
}    
    
// Updates group on whether player has valid inputs
function playerCheck(status) {
    // Updates group that player has no erroneous inputs
    if (status) {
        liveSend({
            'type': 'check',
            'country': player_country,
            'check': true
        });
    }
    // Updates group of player's erroneous inputs, prevent round from ending
    else if (!status) {
        liveSend({
            'type': 'check',
            'country': player_country,
            'check': false
        });
    }
}

function remove_country_inputs(country) {
	// Change inputs related to country to readonly, grey out fields 
	let resource_words = ['_energy','_energy_price','_products','_products_price','_medical','_medical_price','_food','_food_price'];
	let loan_words = ['_amount','_rounds','_interest'];

	// For trade table
	resource_words.forEach(word => {
		let id_name = "trade_" + country + word; 
		let ele = document.getElementById(id_name);
		ele.readOnly = true;
		ele.style.background = "lightgrey";
	});

	// For loan table
	loan_words.forEach(word => {
		let id_name = "loan_" + country + word;
		let ele = document.getElementById(id_name);
		ele.readOnly = true;
		ele.style.background = "lightgrey";
	})

	// For loan record
	let ele_record = document.getElementById("loan-record-table");
	if (ele_record.children.length > 0 && ele_record.children[0].nodeName == "TABLE") {
		let rec_table = ele_record.children[0]; 
		for (let i=1; i<rec_table.rows.length - 1; i++) {
			let row = rec_table.rows[i];
			// For borrowing record with repayments to country
			if (row.cells[0].innerHTML == "Borrowing" && row.cells[1].innerHTML == convertCountryName(country)) {
				// Prevent changes to repayment input
				let ele_input = row.cells[7].children[0];
				ele_input.readOnly = true;
				ele_input.style.background = "lightgrey";
			}
		}
	}
}

// Updates stock for production actions
function stockUpdateProd(netProd, stock) {
    let stock_change = 0;
    
    // Draw from stock to meet need
    if (netProd < 0) {
        if ((stock + netProd) < 0) {
            stock_change -= stock; 
        } else {
            stock_change += netProd;
        }
    }
    else if (netProd > 0) {
        stock_change += netProd;
    }
    return stock_change;
}

// Updates other players of end of turn, submit form
function submitForm() {
    if (confirm("Do you want to end your turn?") == true) {
        liveUpdateForm();
        document.getElementById('form').submit();
    }
    else {
        return false;
    }
}

// Calculates amount traded for each resource type
function tradeTotals() {
    let resource_arr = ["energy","products","medical","food"];
    let totals_arr = [0, 0, 0, 0];
    
    other_countries.forEach(function(country) {
        let sendPhrase = "trade_" + country + "_";
        let recPhrase = "recv_" + country + "_";
        
        for (let i=0; i<resource_arr.length; i++) {
            totals_arr[i] -= parseInt(document.getElementById(sendPhrase + resource_arr[i]).value);
            totals_arr[i] += parseInt(document.getElementById(recPhrase + resource_arr[i]).innerHTML);
        }
    })
    // Return total for each resource
    let resource_totals = {
        energy: totals_arr[0],
        products: totals_arr[1],
        medical: totals_arr[2],
        food: totals_arr[3]
    };
    return resource_totals;
}

// Summarises income from borrowing and lending agreed this round
function updateBorrowingLendingIncome() {
    let loans_income = 0;
    other_countries.forEach(function(country) {
        loans_income -= parseFloat(document.getElementById("loan_" + country + "_amount").value);
        loans_income += parseFloat(document.getElementById("loan_from_" + country + "_amount").innerHTML);
    })
    /*
    <td id="loan_from_` + country + `_amount">0</td>
            <td id="loan_from_` + country + `_rounds">0</td>
            <td id="loan_from_` + country + `_interest">0</td>
    */
    // Assign value to display in element
    document.getElementById("borrowing-lending-income").innerHTML = loans_income; 
}       
    
function updateIncomeTable() {
    let incomeTable = document.getElementById("income-summary");
    let prod_income = 0 - parseFloat(document.getElementById("prod-expense").innerHTML);
    let trade_income = 0;
    // Add trade income for each country
    other_countries.forEach(function(country) {
        trade_income += parseFloat(document.getElementById("trade_income_" + country).innerHTML);
    })
    // Add loan income for each country
    let loan_income = getLoanIncome();
    let total_income = Math.round((prod_income + trade_income + loan_income) * 100) / 100;

    // Assign values to HTML elements
    incomeTable.rows[1].cells[1].innerHTML = prod_income;
    incomeTable.rows[2].cells[1].innerHTML = trade_income;
    incomeTable.rows[3].cells[1].innerHTML = loan_income;
    incomeTable.rows[4].cells[1].innerHTML = total_income;
    
    // Find and assign new savings value
    let savings = parseFloat({{ player.savings }});
    savings += total_income;
    document.getElementById("final-savings-td").value = Math.round(savings * 100) / 100;
    performanceIndicate();
} 

// Set value to be submitted as player.loan_record    
function updateLoanRecord() {
    let rec_string = '';
    // Update existing loans, if any
    if (document.getElementById("loan-record-table").childNodes.length > 1) {
        let loan_record = document.getElementById("loan-record-table").children[0];
        // Record length minus one as last table row is the net income summary
        let rec_length = loan_record.rows.length - 1;
        if (rec_length > 0) {
            for (let k=1; k <= rec_length; k++) {
                let type = "";
                loan_record.rows[k].cells[0].innerHTML == "Borrowing" ? type = "borrowing" : type = "lending";
                let country = "";
                switch (loan_record.rows[k].cells[1].innerHTML) {
                    case "Amerikas":
                        country = "amerikas";
                        break;
                    case "Brazilia":
	                    country = "brazilia";
	                    break;
                    case "Chinland":
                        country = "chinland";
                        break;
                    case "Sadi Arabica":
                        country = "sadiarabica";
                }
                loan_record.rows[k].cells[1].innerHTML;
                let amount = loan_record.rows[k].cells[2].innerHTML;
                let interest = loan_record.rows[k].cells[3].innerHTML;
                let rounds_left = loan_record.rows[k].cells[4].innerHTML;
                let payment = loan_record.rows[k].cells[5].innerHTML;
                let remaining = loan_record.rows[k].cells[6].innerHTML;
                // Only save loans where the remaining amount is still significant
                if (remaining > 0) {
                    rec_string += type + "," + country + "," + amount.toString() + "," + rounds_left.toString() + "," + interest.toString() + "," + payment.toString() + "," + remaining.toString() + ";";
                }
            }
        }   
    }
    // Update from lending
    for (let i=0; i < other_countries.length; i++) {
        let country = other_countries[i];
        let amount = document.getElementById("loan_" + country + "_amount").value;
        let rounds = document.getElementById("loan_" + country + "_rounds").value;
        let interest = document.getElementById("loan_" + country + "_interest").value;
        let payment = document.getElementById("repayment_from_" + country).innerHTML;
        let remaining = amount;
        let type = "lending";
        // recording of donations disabled, or type would be "donated to"
        if (amount > 0 && rounds > 0) {
            rec_string += type + "," + country + "," + amount.toString() + "," + rounds.toString() + "," + interest.toString() + "," + payment.toString() + "," + remaining.toString() + ";";
        }
    }
    // Update from borrowing
    for (let j=0; j < other_countries.length; j++) {
        let country = other_countries[j];
        let amount = parseFloat(document.getElementById("loan_from_" + country + "_amount").innerHTML);
        let rounds = parseInt(document.getElementById("loan_from_" + country + "_rounds").innerHTML);
        let interest = parseFloat(document.getElementById("loan_from_" + country + "_interest").innerHTML);
        let payment = parseFloat(document.getElementById("repayment_to_" + country).innerHTML);
        let remaining = amount;
        let type = "borrowing";
        // recording of donations disabled, or type would be "donated from"
        if (amount > 0 && rounds > 0) {
            rec_string += type + "," + country + "," + amount.toString() + "," + rounds.toString() + "," + interest.toString() + "," + payment.toString() + "," + remaining.toString() + ";";
        }
    }
    // Assign value to input field to update player.loan_record
    // console.log("Loan record string: " + rec_string);
    document.getElementById("loan_record").value = rec_string;
}

// Find total payment amounts made to and received from other countries
function updatePaymentsTotal() {
    let loan_table = document.getElementById("loan-record-table").children[0];
    let table_length = loan_table.rows.length;
    let net = 0;

    for (let i=1; i<table_length; i++) {
        let type = loan_table.rows[i].cells[0].innerHTML;
        if (type === "Borrowing") {
            let payment = parseFloat(loan_table.rows[i].cells[7].children[0].value);
            net -= payment;
        }
        else if (type === "Lending") {
            let repayment = parseFloat(loan_table.rows[i].cells[7].innerHTML);
            net += repayment;
        }
        else {
            console.log("Error: Loan record type is not borrowing or lending.");
        }
    }
    document.getElementById("net-repayments-income").innerHTML = net.toFixed(2);
}   
    
// Update production table when quantities changed
function updateProdTable() {
    let energy_spend = parseInt(document.getElementById("prod-energy").value) * {{player.costs_energy}};
    let products_spend = parseInt(document.getElementById("prod-products").value) * {{player.costs_products}};
    let medical_spend = parseInt(document.getElementById("prod-medical").value) * {{player.costs_medical}};
    let food_spend = parseInt(document.getElementById("prod-food").value) * {{player.costs_food}};
    let total_spend = energy_spend + products_spend + medical_spend + food_spend;
   
    // Assign values to elements
    let prodTable = document.getElementById("prod-table");
    prodTable.rows[3].cells[1].innerHTML = energy_spend;
    prodTable.rows[3].cells[2].innerHTML = products_spend;
    prodTable.rows[3].cells[3].innerHTML = medical_spend;
    prodTable.rows[3].cells[4].innerHTML = food_spend;
    prodTable.rows[4].cells[1].innerHTML = total_spend;
}

// Updates resource table in summary section
function updateSummaryResources() {
    let resource_summary = document.getElementById("resource-summary-table");
    let produced = {
        energy: {{player.outputs_energy}} + parseInt(document.getElementById("prod-energy").value), 
        products: {{player.outputs_products}} + parseInt(document.getElementById("prod-products").value), 
        medical: {{player.outputs_medical}} + parseInt(document.getElementById("prod-medical").value), 
        food: {{player.outputs_food}} + parseInt(document.getElementById("prod-food").value)
    };
    
    // Trades for each resource
    let traded = tradeTotals();
    
    // Net resources after production, trade, needs
    let net = {
        energy: traded.energy + produced.energy - {{player.needs_energy}} ,
        products: traded.products + produced.products - {{player.needs_products}},
        medical: traded.medical + produced.medical - {{player.needs_medical}},
        food: traded.food + produced.food - {{player.needs_food}}
    };
    
    // Amount drawn or added to stockpile (Assume resources drawn from stockpile if needs not met) 
    let stockChange = {
        energy: stockUpdateProd(net.energy, {{player.stockpile_energy}}),
        products: stockUpdateProd(net.products, {{player.stockpile_products}}),
        medical: stockUpdateProd(net.medical, {{player.stockpile_medical}}),
        food: stockUpdateProd(net.food, {{player.stockpile_food}}),
    };
      
    // Needs unmet or excess after meeting needs
    let net_final = {
        energy: (net.energy >= 0 ? net.energy : net.energy - stockChange.energy),
        products: (net.products >= 0 ? net.products : net.products - stockChange.products),
        medical: (net.medical >= 0 ? net.medical : net.medical - stockChange.medical),
        food: (net.food >= 0 ? net.food : net.food - stockChange.food)
    }
    
    let stockpile = {
        energy: {{player.stockpile_energy}} + stockChange.energy,
        products: {{player.stockpile_products}} + stockChange.products,
        medical: {{player.stockpile_medical}} + stockChange.medical,
        food: {{player.stockpile_food}} + stockChange.food
    };
    
    // Update produced resources
    resource_summary.rows[2].cells[1].innerHTML = produced.energy; 
    resource_summary.rows[2].cells[2].innerHTML = produced.products;
    resource_summary.rows[2].cells[3].innerHTML = produced.medical;
    resource_summary.rows[2].cells[4].innerHTML = produced.food;
    
    // Update trade
    resource_summary.rows[3].cells[1].innerHTML = traded.energy;
    resource_summary.rows[3].cells[2].innerHTML = traded.products;
    resource_summary.rows[3].cells[3].innerHTML = traded.medical;
    resource_summary.rows[3].cells[4].innerHTML = traded.food;
    
    // Update change in stock
    resource_summary.rows[4].cells[1].innerHTML = stockChange.energy;
    resource_summary.rows[4].cells[2].innerHTML = stockChange.products;
    resource_summary.rows[4].cells[3].innerHTML = stockChange.medical;
    resource_summary.rows[4].cells[4].innerHTML = stockChange.food;
    
    // Update net resources
    resource_summary.rows[5].cells[1].innerHTML = net_final.energy;
    resource_summary.rows[5].cells[2].innerHTML = net_final.products;
    resource_summary.rows[5].cells[3].innerHTML = net_final.medical;
    resource_summary.rows[5].cells[4].innerHTML = net_final.food;
    
    // Update stockpile
    document.getElementById("stockpile_energy").value = stockpile.energy;
    document.getElementById("stockpile_products").value = stockpile.products;
    document.getElementById("stockpile_medical").value = stockpile.medical;
    document.getElementById("stockpile_food").value = stockpile.food;
    
    // Indicate final player resource performance with font color
    performanceIndicate();
}    

// Updates all tables after input
function updateTables() {
    displayLoanRecords();
    updateSummaryResources();
    updateIncomeTable();
} 
    
// Summarises income from trade
function updateTradeIncome(country) {
   let resource_arr = ['energy','products','medical','food'];
   let income = 0;
   resource_arr.forEach(function(resource) {
       let stockphrase1 = "trade_" + country + "_" + resource; 
       let stockphrase2 = "recv_" + country + "_" + resource;
       income += parseInt(document.getElementById(stockphrase1).value) * document.getElementById(stockphrase1 + "_price").value;
       income -= parseInt(document.getElementById(stockphrase2).innerHTML) * parseFloat(document.getElementById(stockphrase2 + "_price").innerHTML);
   })
   document.getElementById("trade_income_" + country).innerHTML = Math.round(income * 100) / 100;
}    

</script>

<style>
    @keyframes highlight {
        0% {
            background:lightcoral;
        }
        100% {
            background: none;
        }
    }
    
    hr {
        display: block;
        border: 2px solid #005c99;
        margin-left: auto;
        margin-right: auto;
        margin-top: 25px;
        margin-bottom: 25px;
    }
    
    table {
        table-layout: fixed;
        border-collapse: collapse;
    }
    
    td {
        border-bottom: 1px solid lightgray;
    }
    
    th {
        font-weight: 700; 
        border-bottom: 2px solid gray;
    }
    
    .error-msg {
        font-weight: bold;
        color: firebrick;
    }
    
    .highlighted {
        animation: highlight 8s;
    }
    
    .icon-res {
        color: royalblue;
        font-size: 24px;
    }
    
    .icon-trade {
        color: steelblue;
    }
    
    .initial-icon {
        border-bottom: 2px solid gray;
        border-left: 1px solid lightgray;
        border-right: 1px solid lightgray;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    .initial-td {
        border-left: 1px solid lightgray;
        border-right: 1px solid lightgray;
        font-weight: bold;
        color: #404040;
    }
    
    .initial-th {
        width: 18%;
        border-left: 1px solid lightgray;
        border-right: 1px solid lightgray;
        border-bottom: 0px solid lightgray;
        padding-top: 10px;
    }
    
    .input-readonly {
        border: 0px;
        text-align: center;
        font-weight: 500;
        color: midnightblue;
    }
    
    .input-std {
        background: #ffcc00;
        width: 95%;
        border: 0px;
        text-align: center;
        font-weight: 500;
        color: midnightblue;
    }
    
    .otree-title, #country-flag {
        display: inline-block;
    }
    
    .performance-good {
        color: green;
    }
    
    .performance-poor {
        color: red;
    }
    
    .prod-th {
        width: 16%;
        text-align: center;
        padding: 10px;
    }
    
    .result-cell {
        background: paleturquoise;
        font-weight: 700;
        text-align: center;
    }
    
    .row-header {
        font-weight: 600;
    }
    
    .stockpile-final {
        background: paleturquoise;
        font-weight: 700;
        text-align: center;
        width: 100%;
    }
    
    .trade-country-name,.trade-flag {
        display: inline-block;
    }
    
    .trade-flag {
        margin-left: 10px;
        width: 30px;
        height: 20px;
    }
    
    .table-endheader {
        border-top: 2px solid lightgray;
        border-bottom: 2px solid gray;
        font-weight: 600;
    }
    
    .table-endrow {
        background: paleturquoise;
        text-align: center;
        border-top: 2px solid lightgray;
        border-bottom: 2px solid gray;
    }
    
    .trade-header-th {
        text-align: center;
        border-bottom: 0px solid gray;
        font-weight: 600;
    }
    
    #borrowing-lending-income {
        display: inline-block;
        font-weight: bold;
        width: 20%;
    }
    
    #country-flag {
        display: inline-block;
        margin-left: 10px;
        margin-top: 10px;
        vertical-align: top;
    }
    
    #event-msg {
        font-weight: 600;
        color: tomato;
    }
    
    #final-savings-td {
        font-weight: bold;
        border: 0px solid lightgray;
    }
    
    #initial-table {
        text-align: center;
        width: 90%;
        border: 1px solid lightgray;
    }
    
    #instructions {
        display: inline-block;
        margin-left: 20px;
        vertical-align: top;
    }
    
    #loan-record-note {
        font-size: 12px;
    }
    
    #loan-summary-label {
        display: inline-block;
        font-weight: 600;
        width: 30%;
    }
    
    #loan-table {
        text-align: center;
        width: 100%;
    }
    
    #net-repayments-income {
        display: inline-block;
        font-weight: bold;
        width: 20%;
    }
    
    #prod-table {
        text-align: center;
        width: 80%;
    }
    
    #records-table {
        text-align: center;
        width: 100%;
    }
    
    #payments-from-table {
        text-align: center;
        width: 70%;
    }
    
    #penalty-notice {
        font-weight: 600;
        color: red;
    }
    
    #repayments-summary-label {
        display: inline-block;
        font-weight: 600;
        width: 35%;
    }
    
    #repayments-to-table {
        text-align: center;
        width: 70%;
    }
    
    #rules-icon-btn {
        padding: 0px;
    }
    
    #rules-icon-btn:hover {
        background-color: white;
        opacity: 0.9;
    }
    
    #rules-icon-btn:hover + #rules-tooltip {
    	visibility: visible;
    }

    #rules-tooltip {
    	visibility: hidden;
    	font-size: 13px;
    	font-weight: 500;
    	padding: 5px 10px;
    	border-radius: 5px;
    	color: white;
    	background-color: slategray;
    }
    
    #shock-events-notice {
        border: 3px solid lightgray;
        width: 90%;
        height: auto;
        padding: 10px 20px;
    }
    
</style>

{{ endblock }}