{% block title %}
    Please review your responses for the two cases
{% endblock %}

{% block content %}

{{ if participant.switch_order }}

<div class="card">
    <div class="card-body">
        <h5 class="card-title">Case 1: we WILL tell Alex whether the books he got are the ones with the original or fake
        notes
        </h5>
        <div class="card-text">
            <ol id="modalList"  class="mb-0">
            <!-- <li>...the ones with the original <span class='bold'>and $1</span> or fake notes?</li>
            <li>...the ones with the original or fake notes?</li> -->
            </ol>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <h5 class="card-title">Case 2: we WILL NOT tell Alex whether the books he got are the ones with
            the original or fake notes</h5>
        <div class="card-text">
            <ol id="modalList2" class="mb-0">
            <!-- <li>...the ones with the original <span class='bold'>and $1</span> or fake notes?</li>
            <li>...the ones with the original or fake notes?</li> -->
            </ol>
        </div>
    </div>
</div>

{{ else }}


<div class="card">
    <div class="card-body">
        <h5 class="card-title">Case 1: we WILL NOT tell Alex whether the books he got are the ones with
            the original or fake notes</h5>
        
        <div class="card-text">
            <ol id="modalList2" class="mb-0">
            <!-- <li>...the ones with the original <span class='bold'>and $1</span> or fake notes?</li>
            <li>...the ones with the original or fake notes?</li> -->
            </ol>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <h5 class="card-title">Case 2: we WILL tell Alex whether the books he got are the ones with the original or fake
            notes
            </h5>
        <div class="card-text">
            <ol id="modalList" class="mb-0">
            <!-- <li>...the ones with the original <span class='bold'>and $1</span> or fake notes?</li>
            <li>...the ones with the original or fake notes?</li> -->
            </ol>
        </div>
    </div>
</div>



{{ endif}}

{{ formfield 'confirm' }}

<p>
    Please click "Next" to proceed to the next page.
</p>

<button style="float: right" class="btn btn-primary btn-large">Next</button>

<input type="hidden" name="timeSpentReview" id="timeSpentReview" />


{% endblock %}

{% block styles %}

<style>
    .bold {
        font-weight: bold;
      }
</style>


{% endblock %}

{% block scripts %}
<script>
  let pageTimeElapsed = 0;
  let pageTimerID = -1;
  function pageTick() {
    pageTimeElapsed++
    document.getElementById("timeSpentReview").value = pageTimeElapsed;
  }
  window.onload = function() {
    if(pageTimerID === -1){
      pageTimerID = setInterval(pageTick, 100);  //calls pageTick every 100 milliseconds (decimals of a second)
    }
  };
</script>

<script>
    function setValue(value) {
        document.getElementById('inputField').value = value;
    }
</script>


<script>
    // Function to generate rows in the modal based on an input list of dollar values
    

    function generateModalRows(myId,dollarValues,row,indifference) {
        var modalList = document.getElementById(myId);
    
        var originalBonuses = [' and $1','']
        var fakeBonuses = ['','']
        for (var i = 0; i < dollarValues.length; i++) {
            originalBonuses.push('')
            fakeBonuses.push(' and $'+dollarValues[i].toString())
        };
        var leftList = []
        var rightList = []

        if ("{{original_first|safe}}" == "True"){

            for (var i = 0; i< fakeBonuses.length; i++){
                leftList.push('I prefer Alex to receive the ones with the <span style="color: blue">original notes</span>'
                    +originalBonuses[i]+' over the ones with the <span style="color: chocolate">fake notes</span>'+fakeBonuses[i])
                rightList.push('I prefer Alex to receive the ones with the <span style="color: chocolate">fake notes</span>'
                    +fakeBonuses[i]+' over the ones with the <span style="color: blue">original notes</span>'+originalBonuses[i])
            }
            var indifferent='I am indifferent between Alex receiving the ones with the ' +
                '<span style="color: blue">original notes</span> or the ones with the <span style="color: chocolate">fake notes</span>'
        } else if ("{{original_first|safe}}" == "False"){
            for (var i = 0; i< fakeBonuses.length; i++){
                leftList.push('I prefer Alex to receive the ones with the <span style="color: chocolate">original notes</span>'
                    +originalBonuses[i]+' over the ones with the <span style="color: blue">fake notes</span>'+fakeBonuses[i])
                rightList.push('I prefer Alex to receive the ones with the <span style="color: blue">fake notes</span>'
                    +fakeBonuses[i]+' over the ones with the <span style="color: chocolate">original notes</span>'+originalBonuses[i])
            }
            var indifferent='I am indifferent between Alex receiving the ones with the ' +
                '<span style="color: chocolate">original notes</span> or the ones with the <span style="color: blue">fake notes</span>'
        }

         // the participant's preferences are coded in x

        // Loop through the dollar values and create list items for each value
        var myAnswer = 'left'
        for (var i = 0; i < originalBonuses.length; i++) {

            if (row<=i) {
              myAnswer ='right'
                
            } 
            
            var listItem = document.createElement("li");

            if (i==1 && indifference)  {
                myAnswer = 'indifference'
            }
            
            if (myAnswer == 'right') {
                listItem.innerHTML = rightList[i]
            } else if (myAnswer == 'indifference') {
                listItem.innerHTML = indifferent
                myAnswer = 'right';
            } else {
                listItem.innerHTML = leftList[i];
            };
 
            modalList.appendChild(listItem);
            }
        }
        // var boldPlus = document.createElement("span");
        // boldPlus.className = "bold";
        // boldPlus.textContent = "and $";
        // boldPlus.textContent += dollarValues[i];

//     console.log('test2')
//     console.log('print now')
//     function generateModalRows(myId,dollarValues,row,indifference) {
//         var modalList = document.getElementById(myId);
    
//         var originalBonuses = [' and $1','']
//         var fakeBonuses = ['','']
//         for (var i = 0; i < dollarValues.length; i++) {
//             originalBonuses.push('')
//             fakeBonuses.push(' and $'+dollarValues[i].toString())
//         };
//         var leftList = []
//         var rightList = []
//         for (var i = 0; i< fakeBonuses.length; i++){
//             leftList.push('I prefer Alex to receive the ones with the <span style="color: blue">fake notes</span>'
//                 +fakeBonuses[i]+' over the ones with the <span style="color: chocolate">original notes</span>'+originalBonuses[i])
//             rightList.push('I prefer Alex to receive the ones with the <span style="color: chocolate">original notes</span>'
//                 +originalBonuses[i]+' over the ones with the <span style="color: blue">fake notes</span>'+fakeBonuses[i])
//         }
//         var indifferent='I am indifferent between Alex receiving the ones with the ' +
//             '<span style="color: blue">fake notes</span> or the ones with the <span style="color: chocolate">original notes</span>'

//          // the participant's preferences are coded in x

//         // Loop through the dollar values and create list items for each value
//         var myAnswer = 'left'
//         for (var i = 0; i < originalBonuses.length; i++) {

//             if (row<=i) {
//               myAnswer ='right'
                
//             } 
            
//             var listItem = document.createElement("li");

//             if (i==1 && indifference)  {
//                 myAnswer = 'indifference'
//             }
            
//             if (myAnswer == 'right') {
//                 listItem.innerHTML = rightList[i]
//             } else if (myAnswer == 'indifference') {
//                 listItem.innerHTML = indifferent
//                 myAnswer = 'right';
//             } else {
//                 listItem.innerHTML = leftList[i];
//             };
 
//             modalList.appendChild(listItem);
//             }

//         // var boldPlus = document.createElement("span");
//         // boldPlus.className = "bold";
//         // boldPlus.textContent = "and $";
//         // boldPlus.textContent += dollarValues[i];
//     }
// }
// // Call the generateModalRows function with the input list
var dollarValues = {{ dollarValues|safe }}
generateModalRows('modalList',dollarValues,{{ row|safe }},{{ indifference|safe }});

generateModalRows('modalList2',dollarValues,{{ row2|safe }},{{ indifference2|safe }});


</script>

{% endblock %}