{{ block title }}
Month {{ player.round_number }} of {{ C.NUM_ROUNDS }}
{{ endblock }}
{{ block content }}

<!-- CSS styles -->
<style>
    .flex-container {
        float: center;
        padding: 20px;
    }

    .flex-child {
        width: 33%;
        float: left;
        padding: 20px;
    }

    .flex-child-2 {
        width: 33%;
        min-height: 247.98px;
        float: left;
        padding: 20px;
    }

    .flex-child-3 {
        width: 33%;
        float: left;
        padding: 20px;
    }
    
    .flex-child-4 {
        width: 67%;
        float: right;
        padding: 20px;
    }

    /* Inserting this collapsed row between two flex items will make 
    * the flex item that comes after it break to a new row */
    .break {
        width: 100%;
        float: center;
        height: 40px;
    }

</style>

<div class="flex-container">
    <div class="flex-child">
        <h3>Starting Balances</h3>
        <div class="card border-0">
            <div class="card-body">
                <h6 class="card-title"><b>Interest Earned Last Month</b></h6>
                <p class="card-text">
                    <span id="interest-earned"></span>
                </p>
            </div>
        </div>

        <div class="card border-0">
            <div class="card-body">
                <h6 class="card-title"><b>Total Cash</b></h6>
                <p class="card-text">
                    <span id="total-cash"></span>
                </p>
            </div>
        </div>
    </div>
    
    <div class="flex-child">
        <h3>Ending Balances</h3>
        <div class="card border-0">
            <div class="card-body">
                <h6 class="card-title"><b>Savings Account</b></h6>
                <p class="card-text">
                    <span id="final-savings"></span>
                </p>
            </div>
        </div>
    
        <div class="card border-0">
            <div class="card-body">
                <h6 class="card-title"><b>Stock</b></h6>
                <p class="card-text">
                    <span id="final-stock"></span> units
                </p>
            </div>
        </div>
    </div>
    
</div>

<br>
<div class="break"></div>
<div class="break"></div>
<div class="break"></div>
<div class="break"></div>
<br>

<div class="flex-container">
    <div class="flex-child-3">
        <h3>Catalog</h3>
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Food</h5>
                <p>   
                    Price: <span id="new-price"></span>
                </p>           
                <button type="button" value="1" onclick="addToCart(this)" class="btn btn-secondary">+1</button>
            </div>
        </div>
    </div>
    <div class="flex-child-4">
        <h3>My Cart</h3>
        <table class="table table-striped">
            <thead>
            <tr>
                <th>Name</th>
                <th>Quantity</th>
                <th>Total price</th>
                <th></th>
            </tr>
            </thead>
            <tbody id="cart-body">

            </tbody>
        </table>


        <p>
            <button class="btn btn-primary" type="button" onclick="getData(this)" id="final-purch">
                Finalize Purchase (Total : <b><span id="cart-total"></span></b>)
                <input type="hidden" name="responseTime" id="responseTime"/> 
            </button>

            <script>

                let myCart = document.getElementById('cart-body');
                let myBalance = document.getElementById('cart-body2');
                let cartTotal = document.getElementById('cart-total');
                let cardInterestEarned = document.getElementById('interest-earned');
                let cardCashOnHand = document.getElementById('total-cash');
                let cardFinalSavings = document.getElementById('final-savings');
                let cardFinalStock = document.getElementById('final-stock');
                let cardNewPrice = document.getElementById('new-price');
                let cardRealInterest = document.getElementById('real-interest');
                let buttonFinalPurch =  document.getElementById('final-purch')

                function cu(amount) {
                    return `${amount} ₮`;
                }

                function liveRecv(data) {
                    let html = '';
                    console.log(data)
                    for (let item of data.items) {
                        html += `
        <tr>
            <td>${item.name}</td>
            <td>${item.quantity}</td>
            <td>${cu(item.total_price.toFixed(2))}</td>
            <td><button type="button" value="${item.sku}" onclick="removeFromCart(this)" class="btn btn-secondary">-1</button></td>
        </tr>`;
                    }
                    console.log('1');
                    myCart.innerHTML = html;
                    cartTotal.innerText = cu(data.total_price.toFixed(2));
                    cardInterestEarned.innerText = cu(data.interestEarned.toFixed(2));
                    cardCashOnHand.innerText = cu(data.cashOnHand.toFixed(2));
                    cardFinalSavings.innerText = cu(data.finalSavings.toFixed(2));
                    cardFinalStock.innerText = data.finalStock;
                    buttonFinalPurch.value = data.finalStock;
                    cardNewPrice.innerText = cu(data.newPrice.toFixed(2));
                    cardRealInterest.innerText = data.realInterest;
                    console.log('3');

                    var stockLaura = data.finalStock;
                    console.log('stockLaura',stockLaura);

            }
            
                // Timer functionality
                //This bit creates 2 variables, one will function as a timer, the other will hold the timer output. They are set to 0 and -1 here to initialise them, these will not be the final outputs.
                var pageTimeElapsed = 0;
                var pageTimerID = -1;

                //This function captures the timer output. When the timer starts it will increase 'pageTimeElapsed' every second and send this value to the 'timeSpent' variable that will be saved
                //When a person moves to the next page, or the page times out, the final value that the timer was on will be saved. The value resets each round/page.
                function pageTick() {
                pageTimeElapsed++
                document.getElementById("responseTime").value = pageTimeElapsed;
                }

                //This function automatically starts the timer when the page loads. In this case I want seconds so the interval is set to 1000, but I believe if you set it to 1 then it will count milliseconds - you will need to test this
                window.onload = function() { 
                if(pageTimerID == -1){
                    pageTimerID = setInterval(pageTick, 1);
                    } 
                }
            </script>
    </div>
</div>

<br><br>

<script>

    function addToCart(ele) {
        modifyCart(ele.value, 1);
    }

    function removeFromCart(ele) {
        modifyCart(ele.value, -1);
    }

    function modifyCart(sku, delta) {
        liveSend({'sku': sku, 'delta': delta});
    }

    document.addEventListener("DOMContentLoaded", function (event) {
        liveSend({});
    });

    const btn = document.getElementById("final-purch");
    function getData(ele){
        console.log('clicked btn', ele.value);
        if (ele.value === "0") {
                btn.type = "button";
                var r = confirm("Warning! Your Stock balance is currently 0. If this is a mistake, please click Cancel and update your Cart. If you do not have enough money, please click OK to end the game and proceed to the additional task. (Note: You may need to click OK twice)");
                if (r == true) {
                    btn.type = "";
                    stock = 0;
                    console.log("r=true");
                    document.getElementById("final-purch").click();
                    console.log("autoclick");
                }
                else {}
            } else {
                btn.type = "";
                console.log("4");
            }
    };

</script>

<br><br><br><br>

{{ endblock }}