{{ block title }}The Knapsack Problem{{ endblock }}

{{ block content }}
<p>{{roundMessage}}</p>
<p>Instructions</p>
<ul>
    <li>To add an item to your backpack, click on the item and it will appear in the backpack. </li>
    <li>To remove an item from your backpack, click on the item in your backpack and it will go back to the box.</li>
    <li>You cannot exceed the backpack’s weight limit</li>
    <li>The aim is to have the highest cumulative survival score for your selection </li>
</ul>
<p><b>Sack's max weight: </b> {{maxWeight}}</p>
<p><b>Current sack weight:</b> <span id="sackWeightCounter">0</span></p>
<p>Current survival points: <span id="sackValueCounter">0</span></p>
<center><div id="timeTaken"></div>

<div id="knapsackResults"></div>
<!--    <div id="stopWatch"> time left: 120 seconds</div>   -->
    {{ next_button }}
<div class="btn" style="display:inline-block;color:#444;border:1px solid #CCC;background:#DDD;box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);cursor:pointer;vertical-align:middle;max-width: 100px;padding: 5px;text-align: center;"  id="submitSack" onclick="submitSack()">Submit Sack</div>
<!--<div style="display:inline-block;color:#444;border:1px solid #CCC;background:#DDD;box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);cursor:pointer;vertical-align:middle;max-width: 100px;padding: 5px;text-align: center;"  id="retry" onclick="reset()">retry</div>-->

<!--<table style "width:100%;">-->
<!--    <tr>-->
<!--        <td>     -->
<!--                   Sack size: {{maxWeight}}-->
<!--        </td>-->
<!--        <td>-->
<!--            Current sack weight: <div id="sackWeightCounter">0</div>-->
<!--        </td>-->
<!--    </tr>-->
<!--        <tr>-->
<!--            <td >             max survival points: {{maxValue}}   -->
<!--                </td>-->
<!--             -->
<!--                <td>-->
<!--                    current survival points: <div id="sackValueCounter">0</div>-->
<!--                </td>-->
<!--            </tr>-->
<!--</table>-->


<table class="myTable" border="1" cellpadding="1" cellspacing="1" style = "width:100%;height:800px;">
<tr>
    <td style="width:50%;">
        <center>
            <h2>Sack</h2>
        </center>
        <div id ="sack">
        </div>

    </td>
    <td style="width:50%;">
        <center>
            <h2>Items</h2>
        </center>
        <div id ="notSack">
        </div>

    </td>
</tr>
</table>
<div id="movesMade"></div>
<div id="results"></div></center>
{{ formfield 'timeTaken' }}
{{ formfield 'survivalPoints' }}
{{ formfield 'weight' }}
{{ formfield 'submissions' }}
{{ formfield 'maxValue' }}
{{ formfield 'maxWeight' }}
  {% block scripts %}
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.1/min/jcanvas.min.js"></script>
<script>
var maxValue = {{maxValue}};
var maxWeight = {{maxWeight}};
var currentWeight=0;
var currentValue=0;
var submissions = 0;
var completed = false;
var result = {{items}};
var items = {{items}};
var movesLeft = 0;
var moves = {{items}};
var selectedNumber = 0;
var timerInSeconds =0;
window.onload=function() {
    $(".debug-info").hide();
    $("#id_timeTaken").hide();
    $("#id_survivalPoints").hide();
    $("#id_weight").hide();
    $("#id_submissions").hide();
    $("#id_maxValue").hide();
    $("#id_maxWeight").hide();
    timer(true);
    $(".otree-btn-next").hide();
    reset();
}
function drawItem(){
    $.each(items, function(index, value) {
        document.getElementById("notSack").innerHTML += 
              "<div class='styling' id = "+ value[0] +" onclick = 'addToSack("+value[0]+","+value[1]+","+value[2]+","+index+")'><table style='border: none;'><tr><td style='border: none;'><h5>"+value[3]+"</h5> <b>Weight:  "+value[1]+" </b> <br>  Survival Point: "+value[2]+ "</td><td style='border: none;'><img src='/static/knapsack/"+value[0]+".png'/></td></tr></table></div";
    });
}


function  addToSack(naming,weight,value,index){
    $("#submitSack").show();
    var name = items[index][3];
    if(currentWeight != maxWeight && completed == false){
        if(currentWeight+weight <= maxWeight){
            currentWeight = currentWeight + weight; 
            currentValue = currentValue + value;
            document.getElementById("sackWeightCounter").innerHTML =currentWeight;
            document.getElementById("sackValueCounter").innerHTML =currentValue; 
            document.getElementById(naming.id).remove();
            document.getElementById("sack").innerHTML += "<div class='styling'  onclick = 'removeFromSack("+naming.id+","+weight+","+value+","+index+")'  id ='"+naming.id +"'><table style='border: none;'><tr><td style='border: none;'><h5>"+name+"</h5> <b>Weight: "+weight+" </b> <br> Survival Points: "+value+"</td><td style='border: none;'><img src='/static/knapsack/"+naming.id+".png'/></td></tr></table></div";
        }else{                    
            alert('You are exceeding the backpack weight limit');
        }
    }
<!--    if(currentValue==maxValue){-->
<!--        submitSack();-->
<!--    }-->
}

function  removeFromSack(naming,weight,value,index){
    if(currentWeight != maxWeight && completed == false){
        var name = items[index][3];
        currentWeight = currentWeight - weight; 
        currentValue = currentValue - value;
        document.getElementById("sackWeightCounter").innerHTML =currentWeight;
        document.getElementById("sackValueCounter").innerHTML =currentValue; 
        document.getElementById(naming.id).remove();
        document.getElementById("notSack").innerHTML += "<div class='styling'  onclick = 'addToSack("+naming.id+","+weight+","+value+","+index+")' id = "+naming.id +"><table style='border: none;'><tr><td style='border: none;'><h5>"+name+"</h5> <b>weight:"+weight+" </b> value:"+value+"</td><td style='border: none;'><img src='/static/knapsack/"+naming.id+".png'/></td></tr></table></div";
    }
}

function submitSack(){
    completed = true;
<!--    $("#stopWatch").hide();     -->
    $(".otree-btn-next").show();
    $("#submitSack").hide();
    $("#id_timeTaken").val(timerInSeconds);
    $("#id_survivalPoints").val(currentValue);
    $("#id_weight").val(currentWeight);
    $("#id_submissions").val(submissions);
    $("#id_maxValue").val(maxValue);
    $("#id_maxWeight").val(maxWeight);
    document.getElementById('knapsackResults').innerHTML = "The optimal amount of survival points was " + maxValue + "<br> You completed this challenge in "+timerInSeconds+" seconds";
<!--    if (currentValue >= maxValue){-->
<!--        document.getElementById('knapsackResults').innerHTML = "The optimal amount of survival points was " + maxValue + "<br> You completed this challenge in "+timerInSeconds+" seconds";-->
<!--    }else{-->
<!--        document.getElementById('knapsackResults').innerHTML = "You were not able to complete this challenge, time taken: "+timerInSeconds+" seconds";-->
<!--        $("#retry").show();-->
<!--    }-->
}

function reset(){
    document.getElementById("notSack").innerHTML = "";
    document.getElementById("sack").innerHTML = "";
    drawItem();
<!--    $("#stopWatch").show();     -->
    $(".otree-btn-next").hide();
    document.getElementById('knapsackResults').innerHTML = "";
    submissions = submissions+1;
    $("#retry").hide();
    $("#submitSack").hide();
    completed =false;
    currentWeight=0;
    currentValue=0;
    document.getElementById("sackWeightCounter").innerHTML =currentWeight ;
    document.getElementById("sackValueCounter").innerHTML =currentValue;    
}

function timer(run){
    if(run){
        setInterval(function () {
            timerInSeconds++;
<!--            if(timerInSeconds == 120){-->
<!--                submitSack();-->
<!--            } -->
<!--            $("#stopWatch").html('time left: '+ (120-timerInSeconds) +" seconds");-->
            $("#stopWatch").html('time left: '+ (timerInSeconds) +" seconds");
        }, 1000);
    }

}

function bootstrapTabControl(){
  var i, items = $('.nav-link'), pane = $('.tab-pane');

  $('.nexttab').on('click', function(){
      for(i = 0; i < items.length; i++){
          if($(items[i]).hasClass('active') == true){
              break;
          }
      }
      if(i < items.length - 1){

          $(items[i]).removeClass('active');
          $(items[i+1]).addClass('active');

          $(pane[i]).removeClass('show active');
          $(pane[i+1]).addClass('show active');
      }

  });

  $('.prevtab').on('click', function(){
      for(i = 0; i < items.length; i++){
          if($(items[i]).hasClass('active') == true){
              break;
          }
      }
      if(i != 0){

          $(items[i]).removeClass('active');
          $(items[i-1]).addClass('active');

          $(pane[i]).removeClass('show active');
          $(pane[i-1]).addClass('show active');
      }
  });
}
bootstrapTabControl();
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>   
<style>
    table {
      border-collapse: collapse;
    }
    table,
    th,
    td {
      border: 1px solid #cccccc;
    }
    thead {
      background-color: #1c87c9;
      color: #ffffff;
    }
    th {
      height: 50px;
      text-align: center;
    }
    td {
      padding: 3px 10px;
    }
    .styling{
        width: 220px;
    padding: 10px;
    border: 5px solid gray;
    background-color: #ccccff;
    margin: 10px;
      }

      .invis{
display:none;
      }
      .myTable { background-color:#e6ffff;border-collapse:collapse; }
        .myTable th { background-color:#000;color:white;width:50%; }
        .myTable td, .myTable th { padding:5px;border:1px solid #000; }
    img{
        width: 40px;
        height:40px;
    }
  </style>
{% endblock %}

{{ endblock }}