{{ 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 }}

<!-- 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>


<h1>Game Screen</h1>
    In this example of the primary game screen, certain titles are underlined with blue text. Click the titles in blue to learn what each component is.<br><br>
    <i>Once you have understood all components, practice using the screen by <b>adding {{ C.QUANTITY }} units</b> of Food to My Cart and click Finalize Purchase to proceed.</i><br><br>


<h2><a href="#_" onclick="return confirm('Here you see how many months remain in the Savings Game. It last 120 Months in total.')">Month 1 of 120</a></h2>  

<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><a href="#_" onclick="return confirm('This shows how much interest you earned on your Savings Account in the previous month.')">Interest Earned Last Month</a></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><a href="#_" onclick="return confirm('Total Cash is how much money you have to spend each month on Food.')">Total Cash</a></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><a href="#_" onclick="return confirm('This shows you how much money you will keep for the next month after clicking Finalize Purchase at the bottom. It is also how much you will earn interest on.')">Savings Account</a></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><a href="#_" onclick="return confirm('Here, you see how much Food you will have this month.')">Stock</a></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><a href="#_" onclick="return confirm('Catalog displays the current price of Food. To add units of Food to My Cart, click the grey +1 button as many times as needed.')">Catalog</a></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><a href="#_" onclick="return confirm('My Cart shows you the Quantity of Food you have selected and the Total Price you will pay.')">My Cart</a></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="q8" id="q8">
              <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_q8 = data.finalStock
                  document.getElementById("q8").value = response_q8
                  console.log('q8',cu(response_q8))

          }
          
          </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 interest = document.getElementById("interest-title");
    function getData(ele){
        console.log('clicked interest', ele.value);
        // if (ele.value === "-1") {
        //         btn.type = "button";
        //         var r = confirm("Warning! Your Final Stock Balance is currently less than 0. If this is a mistake, please click 'Cancel' and update your Cart. If you do not have enough Cash, please click OK to end the 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");
        //         // confirm(stock);
        //     }
    };

</script>

{{ formfield_errors 'q8' }}

{{ endblock }}