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

{% block title %}
Part 3
{% endblock %}

{% block content %}

<style>
    p{
        font-size: 22px;
    }
    .otree-form-errors {
        visibility: hidden;
        display: none;
    }
    .otree-body {
        max-width:1100px
    }
    .table {
      width: 100%;
    }
    .center {
      margin: 0px 40% 0px 40%;
    }
</style>
<p>
    Just to remind you, you have 200 ECU and <b>one</b> of the previous 5 questions will be picked
    to determine the information you receive and the how much you pay for it.
</p>
<p>
    The table below summarizes your decisions from the previous screens. <b>Please review your decisions carefully and confirm them.</b>
</p>

<p>
    If you would like to make a change, click the "Change Decision" button and enter your
    desired value between 0 and 200.
</p>

<p>
    When you are done, click the "Confirm choices" button to submit your final decisions. Then, click the "Next" button to proceed.
</p>
<script>
    let pref1 = js_vars.PPref1;
    let pref2 = js_vars.PPref2;
    let pref3 = js_vars.PPref3;
    let pref4 = js_vars.PPref4;
    let pref5 = js_vars.PPref5;
    window.onload = function() {
        if (pref1 == 0) {
        document.getElementById("Confirm1").disabled = true;
        };
        if (pref2 == 0) {
            document.getElementById("Confirm2").disabled = true;
        };
        if (pref3 == 0) {
            document.getElementById("Confirm3").disabled = true;
        };
        if (pref4 == 0) {
        document.getElementById("Confirm4").disabled = true;
        };
        if (pref5 == 0) {
            document.getElementById("Confirm5").disabled = true;
        };
    }
</script>
    <table class="table">
        <tr>
            <th scope="col">Source of information</th>
            <th scope="col">Maximum price that you are willing to pay</th>
            <th scope="col">Updated maximum price that you are willing to pay</th>
        </tr>
        <tr>
            <td>{{player.get_field_display('Pref1')}}</td>
            <td>{{player.WTP1}} ECU <button id="Confirm1" type="button" style="float: right" class="btn btn-outline-secondary"  onclick="document.getElementById('WTP1_new').style.display = 'block'">Change Decision</button></td>
            <td><input type="number" id="WTP1_new" name="WTP1_new" style="display:none; margin: 0px 40% 0px 40%;" min="0" max="200"></td>
        </tr>
        <tr>
            <td>{{player.get_field_display('Pref2')}}</td>
            <td>{{player.WTP2}} ECU <button id="Confirm2" type="button" style="float: right" class="btn btn-outline-secondary"  onclick="document.getElementById('WTP2_new').style.display = 'block'">Change Decision</button></td>
            <td><input type="number" id="WTP2_new" name="WTP2_new" style="display:none; margin: 0px 40% 0px 40%;" min="0" max="200"></td>
        </tr>
        <tr>
            <td>{{player.get_field_display('Pref3')}}</td>
            <td>{{player.WTP3}} ECU <button id="Confirm3" type="button" style="float: right" class="btn btn-outline-secondary"  onclick="document.getElementById('WTP3_new').style.display = 'block'">Change Decision</button></td>
            <td><input type="number" id="WTP3_new" name="WTP3_new" style="display:none; margin: 0px 40% 0px 40%;" min="0" max="200"></td>
        </tr>
        <tr>
            <td>{{player.get_field_display('Pref4')}}</td>
            <td>{{player.WTP4}} ECU <button id="Confirm4" type="button" style="float: right" class="btn btn-outline-secondary"  onclick="document.getElementById('WTP4_new').style.display = 'block'">Change Decision</button></td>
            <td><input type="number" id="WTP4_new" name="WTP4_new" style="display:none; margin: 0px 40% 0px 40%;" min="0" max="200"></td>
        </tr>
        <tr>
            <td>{{player.get_field_display('Pref5')}}</td>
            <td>{{player.WTP5}} ECU <button id="Confirm5" type="button" style="float: right" class="btn btn-outline-secondary"  onclick="document.getElementById('WTP5_new').style.display = 'block'">Change Decision</button></td>
            <td><input type="number" id="WTP5_new" name="WTP5_new" style="display:none; margin: 0px 40% 0px 40%;" min="0" max="200"></td>
        </tr>
    </table>

<br>

<div class="center">
    <button id="Confirm" type="button" class="btn btn-success" style="display:block;" onclick="document.getElementById('Next').style.display = 'block'">Confirm choices</button>
</div>

<script>
    let wtp1 = js_vars.WTP1;
    let wtp2 = js_vars.WTP2;
    let wtp3 = js_vars.WTP3;
    let wtp4 = js_vars.WTP4;
    let wtp5 = js_vars.WTP5;
    function myfunction()
      {
     if (document.getElementById('WTP1_new').value.length == 0)
          {
     document.getElementById('WTP1_new').value = wtp1;
          }
     if (document.getElementById('WTP2_new').value.length == 0)
          {
     document.getElementById('WTP2_new').value = wtp2;
          }
     if (document.getElementById('WTP3_new').value.length == 0)
          {
     document.getElementById('WTP3_new').value = wtp3;
          }
     if (document.getElementById('WTP4_new').value.length == 0)
          {
     document.getElementById('WTP4_new').value = wtp4;
          }
     if (document.getElementById('WTP5_new').value.length == 0)
          {
     document.getElementById('WTP5_new').value = wtp5;
          }
    }
</script>
<br>
<br>
<button id="Next" style="display:none;" class="btn btn-primary" onclick="myfunction();">Next</button>

{{ endblock }}