{{ block title }}
    <h6>Completed so far:</h6>
    
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-label="Progress" style="width: {{ percentage }}%" aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100">{{ percentage }}%</div>
    </div> <br><br>
    
{{ endblock }}

{{ block content }}

<h1>Game Screen</h1>
<h3>Ending Balance</h3>
  As you adjust the Quantity of Food in My Cart, the values in Savings Account and Stock change. 
  This helps you plan for the future.<br><br>

  <i>Now, adjust the Quantity in My Cart so that the value in Savings Account is </i><b>{{ C.NEW_CASH }}</b><i> and click Finalize Purchase to proceed.</i><br><br>
  Note: To <b>reduce the Quantity</b> in My Cart, click the grey button labelled "-1".



<!-- 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 Period</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">
              Finalize Purchase (Total : <b><span id="cart-total"></span></b>)
              <input type="hidden" name="q9" id="q9">
              <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');;

              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;
                  cardNewPrice.innerText = cu(data.newPrice.toFixed(2));
                  console.log('3');

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

                  var response_q9 = data.finalSavings
                  console.log('data.finalSavings',data.finalSavings)
                  console.log('var',response_q9)
                  console.log('cash',data.cardCashOnHand)
                  document.getElementById("q9").value = response_q9
                  console.log('q9',cu(response_q9))

          }
          
          </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({});
  })

</script>

{{ formfield_errors 'q9' }}

{{ endblock }}