{{ extends 'global/Page.html' }}
{{ block title }}Conclusion{{ 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">

<p id="country-name">Thanks for playing, <strong>{{player.role}}.</strong> We've come to the end of the game. Here's a summary of how all the groups performed.</p>

<table id="country-stats">
    <tr>
        <th rowspan ="2" style="width:40%; border-bottom:1px solid lightgray;"><div id="country-flag"></div></th>
        <th style="width:15%" class="header-name">Energy</th>
        <th style="width:15%" class="header-name">Consumer Products</th>
        <th style="width:15%" class="header-name">Medical Supplies</th>
        <th style="width:15%" class="header-name">Food</th>
    </tr>
    <tr>
        <!--<th style="border: none" class="initial-icon"></th>-->
        <th class="player-icon"><i class="fas fa-plug fa-lg"></i></th>
        <th class="player-icon"><i class="fas fa-shopping-cart fa-lg"></i></th>
        <th class="player-icon"><i class="fas fa-pump-medical fa-lg"></i></th>
        <th class="player-icon"><i class="fas fa-utensils fa-lg"></i></th>
    </tr>
    <tr>
        <td class="row-header">Stockpile</td>
        <td class="player-cell" id="player_energy">{{player.stockpile_energy}}</td>
        <td class="player-cell" id="player_products">{{player.stockpile_products}}</td>
        <td class="player-cell" id="player_medical">{{player.stockpile_medical}}</td>
        <td class="player-cell" id="player_food">{{player.stockpile_food}}</td>
    </tr>
    <tr>
        <td class="row-header">Production Cost (per unit)</td>
        <td class="player-cell">{{player.costs_energy}}</td>
        <td class="player-cell">{{player.costs_products}}</td>
        <td class="player-cell">{{player.costs_medical}}</td>
        <td class="player-cell">{{player.costs_food}}</td>
    </tr>
    <tr>
         <th style="width:40%; border-bottom: none" class="header-name">Savings</th>
         <td rowspan = "2", colspan = "4" class="player-cell"> ${{player.savings}} </td>
    </tr>
    <tr>
        <th style="color:royalblue; border-bottom:1px solid lightgray;" ><i class="fas fa-money-bill fa-lg"></i></th>
    </tr>
         
</table><br>

<h4 style="margin-bottom: 30px;">Other Players</h4>

<div id="country1_trade" style="margin-top: 15px;"></div><br>
<div id="country2_trade" style="margin-top: 15px;"></div><br>
<div id="country3_trade" style="margin-top: 15px;"></div><br>

<p id="ending-msg"><i>We hope you enjoyed playing and had a fruitful learning experience!</i></p>

{{ next_button }}

<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"];

// Fetch other players' data
let other_players_data = js_vars.other_players;

// 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
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";

// On document load
window.addEventListener('DOMContentLoaded', (event) => {
    displayFlag();
    displayPlayerStocks();
    displayTables();
    // Change "next" button wording
    document.getElementsByClassName("otree-btn-next")[0].innerHTML ="Exit";
})

// Show country flag according to player's country
function displayFlag() {    
    let image_element = document.getElementById("country-flag");
    let country = js_vars.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="90" height="60">
    `;
}

// Fill player stockpile integer values
function displayPlayerStocks() {
    document.getElementById("player_energy").innerHTML = parseInt(js_vars.player_energy)
    document.getElementById("player_products").innerHTML = parseInt(js_vars.player_products);
    document.getElementById("player_medical").innerHTML = parseInt(js_vars.player_medical);
    document.getElementById("player_food").innerHTML = parseInt(js_vars.player_food);
}
    
// Create trade tables for other countries
function displayTables() {
    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 = '';
        let savings = 0;
        let stock_energy = 0, stock_products = 0, stock_medical = 0, stock_food = 0;
        let cost_energy = 0, cost_products = 0, cost_medical = 0, cost_food = 0;
        // 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";
        }
        // Set country data values
        for (let j=0; j < other_players_data.length; j++) {
            if (other_players_data[j].country == country_name) {
                let data = other_players_data[j];
                savings = parseFloat(data.savings);
                stock_energy = parseInt(data.stockpile_energy);
                stock_products = parseInt(data.stockpile_products);
                stock_medical = parseInt(data.stockpile_medical);
                stock_food = parseInt(data.stockpile_food);
                cost_energy = parseFloat(data.costs_energy);
                cost_products = parseFloat(data.costs_products);
                cost_medical = parseFloat(data.costs_medical);
                cost_food = parseFloat(data.costs_food); 
            }
        }

        let element = document.getElementById("country" + (i + 1) + "_trade");
        element.innerHTML = `
            <table id="table_trade_` + country + `">
                <tr>
                    <th style="width:30%; class="other-stats-country"><p class="trade-country-name">` + country_name + `<span><img src="` + image_url +`" alt="` + image_alt + `" class="trade-flag"></span></p></th>
                    <th style="width:14%" class="initial-icon"><i class="fas fa-plug fa-lg"></i></th>
                    <th style="width:14%" class="initial-icon"><i class="fas fa-shopping-cart fa-lg"></i></th>
                    <th style="width:14%" class="initial-icon"><i class="fas fa-pump-medical fa-lg"></i></th>
                    <th style="width:14%" class="initial-icon"><i class="fas fa-utensils fa-lg"></i></th>
                    <th style="width:14%" class="initial-icon"><i class="fas fa-money-bill fa-lg"></i></th>
                </tr>
                <tr>
                    <td class="other-row-header">Stockpile</td>
                    <td class="other-stats-cell">` + stock_energy + `</td>
                    <td class="other-stats-cell">` + stock_products + `</td>
                    <td class="other-stats-cell">` + stock_medical + `</td>
                    <td class="other-stats-cell">` + stock_food + `</td>
                    <td rowspan = "2" colspan = "1" class="other-stats-cell">$` + savings + `</td>
                </tr>
                <tr>
                    <td class="other-row-header">Production Cost (per unit)</td>
                    <td class="other-stats-cell">` + cost_energy + `</td>
                    <td class="other-stats-cell">` + cost_products + `</td>
                    <td class="other-stats-cell">` + cost_medical + `</td>
                    <td class="other-stats-cell">` + cost_food + `</td>
                </tr>
            </table>`
    }
}

</script>

<style>
    hr {
        display: block;
        border: 2px solid #005c99;
        margin-left: auto;
        margin-right: auto;
        margin-top: 25px;
        margin-bottom: 25px;
    }
    
    table {
        border-collapse: collapse;
        table-layout: fixed;
        width: 90%;
    }
    
    td {
        text-align: center;
        border:1px solid lightgray;
    }
    
    th {
        font-weight: 700; 
        text-align: center;
    }
    
    .header-name {
        border: 0px;
    }

    .initial-icon {
        border-bottom: 2px solid gray;
        border-left: 0px solid; 
        border-right: 0px solid; 
        border-top: 0px solid; 
        padding-top: 10px;
        padding-bottom: 10px;
        color: steelblue;
    }

    .other-row-header {
        font-weight: 600;
        border-left: 0px;
        border-right: 0px;
    }

    .other-stats-cell {
        border-left: 0px;
        border-right: 0px;
    }

    .other-stats-country {
        border-bottom: 2px solid gray;
        border-left: 0px solid; 
        border-right: 0px solid; 
        border-top: 0px solid; 
    }

    .player-cell {
        border-left: 0px;
        border-right: 0px;
    }

    .player-icon {
        padding-top: 10px;
        padding-bottom: 10px;
        color: royalblue;
        border-top: 0px;
        border-left: 0px;
        border-right: 0px;
        border-bottom: 2px solid gray;
    }

    .row-header {
        font-weight:600;
        border-bottom: 1px solid lightgray;
        border-left: 0px;
        border-right: 0px;
    }

    .trade-country-name {
        font-weight: 700;
    }

    .trade-country-name,.trade-flag {
        display: inline-block;
    }
    
    .trade-flag {
        margin-left: 10px;
        width: 45px;
        height: 30px;
    }
    
</style>


{{ endblock }}