{% extends "global/Page.html" %}
{% load otree static %}


{% block content %}

{% include "global/mpl_text.html" %}

<form onsubmit="return false;"> <!-- Prevent form submission -->
<table>
    <tr>
        <th></th>
        <th><h4>Cost of not getting <br> a recommendation</h4></th>
        <th></th>
        <th><h4>Cost of getting <br> a recommendation</h4></th>
    </tr>
</table>
</form>

<br>
<button class="otree-btn-next btn btn-primary">Next</button>

 {% include "global/fclose.html" %}

<input type="hidden" name='last_False_high' id='last_False_high'>
<input type="hidden" name='first_True_high' id='first_True_high'>
<input type="hidden" name='last_False_val_high' id='last_False_val_high'>
<input type="hidden" name='first_True_val_high' id='first_True_val_high'>

<input type="hidden" name='MPL_high_warnings' value="0" id='MPL_high_warnings'>
<input type="hidden" name='MPL_high_time_spent' value="0" id='MPL_high_time_spent'>

<input type="hidden" name='reminder_list_high' id='reminder_list_high'>
<input type="hidden" name='no_reminder_list_high' id='no_reminder_list_high'>
<input type="hidden" name='decision_list_high' id='decision_list_high'>


{% endblock %}


{% block scripts %}

<script>
    const table = document.querySelector("table");
    const increments = js_vars.increments; // Predefined increment
    const maxAmount = js_vars.max_amount; // Maximum amount on the left side
    let decisionNumber = 1; // Initialize decision number
    const no_decisions = js_vars.no_decisions;
    const no_reminder_array = [];
    const reminder_array = [];
    const decision_list = []
    const reminder_list = document.getElementById('reminder_list_high');
    const no_reminder_list = document.getElementById('no_reminder_list_high');
    const dec_list = document.getElementById('decision_list_high');



    while (decisionNumber <= no_decisions) {
        const row = table.insertRow(-1);
        const cell1 = row.insertCell(0);
        const cell2 = row.insertCell(1);
        const cell3 = row.insertCell(2);
        const cell4 = row.insertCell(3);

        cell1.textContent = "Scenario " + decisionNumber + ":";

        // Create Bootstrap-styled buttons for the left and right options
        const option1Button = document.createElement("button");
        if ((decisionNumber-1)*increments<maxAmount){
          option1Button.textContent = 0 + " Points";
          no_reminder_array.push(0);
        } else {
          option1Button.textContent = (decisionNumber-1)*increments - maxAmount +  " Points";
          no_reminder_array.push((decisionNumber-1)*increments - maxAmount);
        }
        option1Button.classList.add("btn", "btn-primary", "btn-option");
        option1Button.type = "button"; // Prevent form submission
        option1Button.setAttribute("data-row", decisionNumber); // Add a data attribute to identify the row
        option1Button.setAttribute("data-col", 1); // Add a data attribute to identify the row
        option1Button.addEventListener("click", (e) => handleOptionClick(e, option1Button));
        cell2.appendChild(option1Button);

        cell3.textContent = "OR";

        const option2Button = document.createElement("button");
        if ((decisionNumber-1)*increments<maxAmount){
          option2Button.textContent = maxAmount - ((decisionNumber - 1)*increments) + " Points";
          reminder_array.push(maxAmount - ((decisionNumber - 1)*increments));
        } else {
          option2Button.textContent = 0 + " Points";
          reminder_array.push(0);
        }
        option2Button.classList.add("btn", "btn-primary", "btn-option");
        option2Button.type = "button"; // Prevent form submission
        option2Button.setAttribute("data-row", decisionNumber); // Add a data attribute to identify the row
        option2Button.setAttribute("data-col", 2); // Add a data attribute to identify the row
        option2Button.addEventListener("click", (e) => handleOptionClick(e, option2Button));
        cell4.appendChild(option2Button);

        // Create hidden input fields for each decision
        const decisionInput = document.createElement("input");
        decisionInput.type = "hidden";
        decisionInput.name = "decision_" + decisionNumber;
        decisionInput.id = "decision_" + decisionNumber;
        cell4.appendChild(decisionInput);

        decisionNumber++; // Increment the decision number
    }

    const reminder_json_array = JSON.stringify(reminder_array);
    const no_reminder_json_array = JSON.stringify(no_reminder_array);
    reminder_list.value = reminder_json_array;
    no_reminder_list.value = no_reminder_json_array;

    function handleOptionClick(event, button) {

        const row = button.getAttribute("data-row");
        const col = button.getAttribute("data-col");

        if (col==1){
          document.getElementById('last_False_high').value=Number(row);
          document.getElementById('first_True_high').value=Number(row)+1;
          document.getElementById('last_False_val_high').value= maxAmount - ((Number(row) - 1)*increments);
          document.getElementById('first_True_val_high').value= maxAmount - ((Number(row) + 1) - 1)*increments;
        for (let left_row = row; left_row > 0; left_row--) {
          const select_Btns1 = document.querySelectorAll(".btn-option[data-row='" + left_row + "']");
          select_Btns1[0].style.backgroundColor = "#007bff"; // Set to blue
          select_Btns1[1].style.backgroundColor = "#6c757d"; // Set to gray
          document.getElementById('decision_'+left_row).value=0;
          decision_list[left_row-1] = 0;

        }
        for (let row2 = Number(row)+1; row2 <= no_decisions; row2++){
          const select_Btns2 = document.querySelectorAll(".btn-option[data-row='" + row2 + "']");
          select_Btns2[1].style.backgroundColor = "#007bff"; // Set to blue
          select_Btns2[0].style.backgroundColor = "#6c757d"; // Set to gray
          document.getElementById('decision_'+row2).value=1;
          decision_list[row2-1] = 1;
        }
      } else {
          document.getElementById('last_False_high').value=Number(row)-1;
          document.getElementById('first_True_high').value=Number(row);
          document.getElementById('last_False_val_high').value = maxAmount - ((Number(row) - 1 - 1)*increments);
          document.getElementById('first_True_val_high').value= maxAmount - ((Number(row) - 1)*increments);
        for (let left_row = Number(row)-1; left_row > 0; left_row--) {
          const select_Btns3 = document.querySelectorAll(".btn-option[data-row='" + left_row + "']");
          select_Btns3[0].style.backgroundColor = "#007bff"; // Set to blue
          select_Btns3[1].style.backgroundColor = "#6c757d"; // Set to gray
          document.getElementById('decision_'+left_row).value=0;
          decision_list[left_row-1] = 0;
        }
        for (let right_row = row; right_row <= no_decisions; right_row++){
          const select_Btns4 = document.querySelectorAll(".btn-option[data-row='" + right_row + "']");
          select_Btns4[1].style.backgroundColor = "#007bff"; // Set to blue
          select_Btns4[0].style.backgroundColor = "#6c757d"; // Set to gray
          document.getElementById('decision_'+right_row).value=1;
          decision_list[right_row-1] = 1;
        }
      }
        // Prevent form submission
        event.preventDefault();
        const dec_array = JSON.stringify(decision_list);
        dec_list.value = dec_array;
    }
</script>

{% endblock %}

{% block styles %}
<style>
.otree-btn-next {
  float: right;
}
.otree-form-errors {
  visibility: hidden;
  display: none;
}
.alert-danger {
  position: relative;
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-radius: .25rem;
}
</style>
<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }

    /*table, th, td {
        border: 1px solid black;
    }*/

    th, td {
        padding: 5px;
        text-align: center;
    }

    .btn-option {
        width: 100%;
        height: 100%;
        cursor: pointer;
        border: 0; /* Remove border */
        background-color: #6c757d; /* Neutral grey background */
        color: white;
    }
</style>

{% endblock %}