{% block title %}
    Which books and bonus should Alex get?
{% endblock %}

{% block content %}


<div class="col-md-12 text-center">
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#exampleModal">
     Review Instructions
    </button>
</div>

<br>
{{ if participant.switch_order }}

    <div class="card" id="Trad_id">
      <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>

          {{ formfield_errors 'Trad_learn3' }}

          {{ form.Trad_learn3.label }}
                <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_learn3" id="Trad1" value="1"
                   onclick="enable('after_answeringTrad', 'id_Trad_wtp3',wtp_2)">
            <label class="form-check-label" for="Trad1">Yes, he will learn</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_learn3" id="Trad2" value="2"
                   onclick="disable('after_answeringTrad', 'id_Trad_wtp3', 'Trad_learn3_mistakes')">
            <label class="form-check-label" for="Trad2">No, he will not learn</label>
          </div>


          <p id="after_answeringTrad">
              After correctly answering the question above, please tell us which option you prefer by clicking the
              table below.
          </p>

          <div id="wtp_elicitation_2"></div>
          <div id="hidden_fields_wtp_elicitation_2"></div>
          {{ formfield_errors 'Trad_wtp3' }}
      </div>
    </div>


      {{ if participant.Trad_strict == 'false' }}
        <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>
            For case 1 we already know how to answer the 15 questions for you. 
        You don't need to do anything else for this case. 
        You will get a chance to review your responses to the questions in case 1 later in the study.
          </div>
        </div>
      {{endif}}


    <br>

    <div class="card" id="ES_id">
      <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>
      {{ if participant.treatment != 'middle'}}
          <h6 class="card-subtitle mb-2 text-muted">He knows that with {{ C.MS }}% chance, he will get the books with
            {{ if participant.treatment == 'high' }}original notes{{ else }}fake notes{{ endif }}; you now
            determine which books he gets otherwise.</h6>
      {{ endif }}

      {{ formfield_errors 'ES_learn3' }}

          {{ form.ES_learn3.label }}
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_learn3" id="ES1" value="1"
                   onclick="disable('after_answeringES', 'id_ES_wtp3', 'ES_learn3_mistakes')">
            <label class="form-check-label" for="ES1">Yes, he will learn</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_learn3" id="ES2" value="2"
            onclick="enable('after_answeringES', 'id_ES_wtp3',wtp_1)">
            <label class="form-check-label" for="ES2">No, he will not learn</label>
          </div>

          <p id="after_answeringES">
              After correctly answering the question above, please tell us which option you prefer by clicking the
              table below.
          </p>

          <div id="wtp_elicitation_1"></div>
          <div id="hidden_fields_wtp_elicitation_1"></div>
          {{ formfield_errors 'ES_wtp3' }}

      </div>
    </div>

    {{if participant.ES_strict == 'false' }}
    <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>
      {{ if participant.treatment != 'middle'}}
          <h6 class="card-subtitle mb-2 text-muted">He knows that with {{ C.MS }}% chance, he will get the books with
            {{ if participant.treatment == 'high' }}original notes{{ else }}fake notes{{ endif }}; you now
            determine which books he gets otherwise.</h6>
      {{ endif }}
        For case 2 we already know how to answer the 15 questions for you. 
    You don't need to do anything else for this case. 
    You will get a chance to review your responses to the questions in case 2 later in the study.
      </div>
    </div>
    {{endif}}




{{ else }}


    {{if participant.ES_strict == 'false' }}
    <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>
      {{ if participant.treatment != 'middle'}}
          <h6 class="card-subtitle mb-2 text-muted">He knows that with {{ C.MS }}% chance, he will get the books with
            {{ if participant.treatment == 'high' }}original notes{{ else }}fake notes{{ endif }}; you now
            determine which books he gets otherwise.</h6>
      {{ endif }}
        For case 1 we already know how to answer the 15 questions for you. 
    You don't need to do anything else for this case. 
    You will get a chance to review your responses to the questions in case 1 later in the study.
      </div>
    </div>
    {{endif}}


    <div class="card" id="ES_id">
      <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>
      {{ if participant.treatment != 'middle'}}
          <h6 class="card-subtitle mb-2 text-muted">He knows that with {{ C.MS }}% chance, he will get the books with
            {{ if participant.treatment == 'high' }}original notes{{ else }}fake notes{{ endif }}; you now
            determine which books he gets otherwise.</h6>
      {{ endif }}
      
      {{ formfield_errors 'ES_learn3' }}

      {{ form.ES_learn3.label }}
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="ES_learn3" id="ES1" value="1"
               onclick="disable('after_answeringES', 'id_ES_wtp3', 'ES_learn3_mistakes')">
        <label class="form-check-label" for="ES1">Yes, he will learn</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="ES_learn3" id="ES2" value="2"
        onclick="enable('after_answeringES', 'id_ES_wtp3',wtp_1)">
        <label class="form-check-label" for="ES2">No, he will not learn</label>
      </div>

      <p id="after_answeringES">
          After correctly answering the question above, please tell us which option you prefer by clicking the
          table below.
      </p>

          <div id="wtp_elicitation_1"></div>
          <div id="hidden_fields_wtp_elicitation_1"></div>
          {{ formfield_errors 'ES_wtp3' }}

      </div>
    </div>

    <br>


    {{ if participant.Trad_strict == 'false' }}
    <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>
        For case 2 we already know how to answer the 15 questions for you. 
    You don't need to do anything else for this case. 
    You will get a chance to review your responses to the questions in case 2 later in the study.
      </div>
    </div>
  {{endif}}


    <div class="card" id="Trad_id">
      <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>
    {{ formfield_errors 'Trad_learn3' }}

          {{ form.Trad_learn3.label }}
                <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_learn3" id="Trad1" value="1"
                   onclick="enable('after_answeringTrad', 'id_Trad_wtp3',wtp_2)">
            <label class="form-check-label" for="Trad1">Yes, he will learn</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_learn3" id="Trad2" value="2"
                   onclick="disable('after_answeringTrad', 'id_Trad_wtp3', 'Trad_learn3_mistakes')">
            <label class="form-check-label" for="Trad2">No, he will not learn</label>
          </div>


          <p id="after_answeringTrad">
              After correctly answering the question above, please tell us which option you prefer by clicking the
              table below.
          </p>

          <div id="wtp_elicitation_2"></div>
          <div id="hidden_fields_wtp_elicitation_2"></div>
          {{ formfield_errors 'Trad_wtp3' }}
      </div>
    </div>

{{ endif}}



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

   <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Review Instructions</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
          {{ include C.PRE_VIDEO }}
          {{ include C.POST_VIDEO }}
          {{ include C.BONUS }}
          <br>
          {{ include C.DETAIL }}
          <br>
          {{ include C.MPL }}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<button class="otree-btn-next btn btn-primary" id="true_next_button" style="display:none" >Next</button>

{{ formfield_errors 'Trad_learn3' }}

{{ formfield_errors 'ES_learn3' }}

<input type="hidden" name="Trad_learn3_mistakes" id="Trad_learn3_mistakes" />
<input type="hidden" name="ES_learn3_mistakes" id="ES_learn3_mistakes" />
{{ formfield_errors 'Trad_learn3_mistakes' }}
{{ formfield_errors 'ES_learn3_mistakes' }}

{% endblock %}

{% block styles %}



<style>
  .orange{
    background-color: #fa8e00 !important;
    }
  .darkorange{
    background-color: #fa8e00 !important;
    }
</style>

{% endblock %}

{% block scripts %}

<script src="{% static 'wtp.js' %}"></script>


  <script>
    document.getElementById('Trad1').value = 1;
    document.getElementById('Trad2').value = 2;

    document.getElementById('ES1').value = 1;
    document.getElementById('ES2').value = 2;
  </script>

<script>
  function enable(text, table,wtp) {
    document.getElementById(text).textContent = 'Now, please tell us which option you prefer by clicking the table ' +
        'below:';
    document.getElementById(table).classList.remove('text-muted')
    document.getElementById(table).classList.remove('table-secondary')
    document.getElementById(table).style.backgroundColor = 'navajowhite';
    document.getElementById(table).style.pointerEvents = '';
    wtp.load();
    console.log(wtp)
  }

  document.getElementById('ES_learn3_mistakes').value = 0;
  document.getElementById('Trad_learn3_mistakes').value = 0;
  
  function disable(text, table, mistake) {
    document.getElementById(text).textContent = 'After correctly answering the question above, ' +
        'please tell us which option you prefer by clicking the table below.';
    document.getElementById(table).classList.add('text-muted')
    document.getElementById(table).classList.add('table-secondary')
    document.getElementById(table).style.pointerEvents = 'none';
    document.getElementById(table).style.backgroundColor = null;


    function removeClassFromElementAndDescendants(element, className) {
      element.classList.remove(className);
      const children = element.children;
      for (const child of children) {
        removeClassFromElementAndDescendants(child, className);
      }
    }

    function removeAllClassFromTable(table, className) {
      if (!table) {
        console.error(`Table not found.`);
        return;
      }

      const allChildren = table.querySelectorAll('*');
      allChildren.forEach((element) => {
        removeClassFromElementAndDescendants(element, className);
      });
    }

    // Usage:
    const tableId = 'myTable';
    const classNameToRemove = 'remove-me';

    removeAllClassFromTable(document.getElementById(table), 'orange');
    removeAllClassFromTable(document.getElementById(table), 'darkorange');


    document.getElementById(mistake).value = parseInt(document.getElementById(mistake).value) +1;
  }







	parameters={
    playerID : "{{participant.code}}" + "{{ player.round_number }}",
		leftHeader:"{{leftHeader}}", 
		rightHeader:"{{rightHeader}}", 
		leftBonus: {{ WTP_VALUES_ZEROES|safe }},
		rightBonus: {{ WTP_VALUES|safe }},
		varname:"ES_wtp3", //variable name on oTree  ES_wtp3', '',
		root:"wtp_elicitation_1",
		hidden_fields_name:"hidden_fields_wtp_elicitation_1",
    color_switched: {{ color_switched|safe }}
	}

  
  

	wtp_1 =new drawWTP(parameters);
	parameters={
    playerID : "{{participant.code}}" + "{{ player.round_number }}",
		leftHeader:"{{leftHeader}}", 
		rightHeader:"{{rightHeader}}", 
		leftBonus: {{ WTP_VALUES_ZEROES|safe }},
		rightBonus: {{ WTP_VALUES|safe }},
		varname:"Trad_wtp3", //variable name on oTree 
		root:"wtp_elicitation_2",
		hidden_fields_name:"hidden_fields_wtp_elicitation_2",
    color_switched: {{ color_switched|safe }}
	}
 
	wtp_2 =new drawWTP(parameters);

  ES_strict = JSON.parse("{{participant.ES_strict}}")
  Trad_strict = JSON.parse("{{participant.Trad_strict}}")

  if (ES_strict==false) {
    document.getElementById("ES_id").style.display = "none"
    document.getElementById("ES_wtp3").value="NA"


    // ['ES_wtp3', 'Trad_wtp3', 'ES_learn3', 'Trad_learn3', 'ES_learn3_mistakes', 'Trad_learn3_mistakes']



  }
	
  if (Trad_strict==false) {
    document.getElementById("Trad_id").style.display = "none"
    document.getElementById("Trad_wtp3").value="NA"
  }
</script>
{% endblock %}