{% 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>

<p>
    On this page, the options involve Alex’s bonus.
</p>

{{ 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">
          {{ if Trad_wtp != 3 }}

        <div style="text-align: center;">
          <br>
          {{ formfield_errors 'Trad_learn2' }}

          {{ form.Trad_learn2.label }}
                <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_learn2" id="Trad1" value="1"
                   onclick="enable('after_answeringTrad', 'originalTrad', 'fakeTrad', 'indifferentTrad',
                   'Trad_footer')">
            <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_learn2" id="Trad2" value="2"
                   onclick="disable('after_answeringTrad', 'originalTrad', 'fakeTrad', 'indifferentTrad',
                   'Trad_footer', 'Trad_learn2_mistakes')">
            <label class="form-check-label" for="Trad2">No, he will not learn</label>
          </div>

        </div>


        <br>
        <div id="after_answeringTrad">
          After correctly answering the question above, you will be able to decide which books Alex receives below.
        </div>
                  <br>
                     <div class="card-footer text-muted" id="Trad_footer">
                      {{ formfield_errors 'Trad_wtp2' }}
                <div style="text-align: center;">

                     <p> <strong>{{ form.Trad_wtp2.label }}</strong></p>

             {{ if participant.choices_orders == 1 or participant.choices_orders == 3 or participant.choices_orders == 6 }}

              <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp2" id="originalTrad" value="1" disabled>
            <label class="form-check-label" for="originalTrad">
                Original notes {{ if Trad_wtp == 2 }}+ $1{{endif}}
            </label>
          </div>

          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp2" id="fakeTrad" value="2" disabled>
              <label class="form-check-label" for="fakeTrad">Fake notes {{ if Trad_wtp == 1 }}+ $1{{endif}}</label>
          </div>
               {{ else }}

          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp2" id="fakeTrad" value="2" disabled>
              <label class="form-check-label" for="fakeTrad">Fake notes {{ if Trad_wtp == 1 }}+ $1{{endif}}</label>
          </div>
              <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp2" id="originalTrad" value="1" disabled>
            <label class="form-check-label" for="originalTrad">
                Original notes {{ if Trad_wtp == 2 }}+ $1{{endif}}
            </label>
          </div>
                              {{ endif }}

          </div>
        </div>
          {{ else }}
          <p>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.</p>
          {{ endif }}
       </div>
      </div>
    </div>

    <br>

    <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 }}
                <div class="card-text">
          {{ if ES_wtp != 3 }}
       <div style="text-align: center;">
          <br>
          {{ formfield_errors 'ES_learn2' }}

          {{ form.ES_learn2.label }}
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_learn2" id="ES1" value="1"
                   onclick="disable('after_answeringES', 'originalES', 'fakeES', 'indifferentES',
                   'ES_footer', 'ES_learn2_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_learn2" id="ES2" value="2"
            onclick="enable('after_answeringES', 'originalES', 'fakeES', 'indifferentES',
                   'ES_footer')">
            <label class="form-check-label" for="ES2">No, he will not learn</label>
          </div>

        </div>
    <br>
        <div id="after_answeringES">
          After correctly answering the question above, you will be able to decide which books Alex receives below.
        </div>
        <br>
        <div class="card-footer text-muted" id="ES_footer">
          {{ formfield_errors 'ES_wtp2' }}
          <div style="text-align: center;">

              <p> <strong>{{ form.ES_wtp2.label }}</strong></p>

          {{ if participant.choices_orders == 1 or participant.choices_orders == 3 or participant.choices_orders == 6 }}

                                  <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="ES_wtp2" id="originalES" value="1" disabled>
      <label class="form-check-label" for="originalES">Original notes {{ if ES_wtp == 2 }}+ $1{{endif}}</label>
      </div>
      <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="ES_wtp2" id="fakeES" value="2" disabled>
      <label class="form-check-label" for="fakeES">Fake notes {{ if ES_wtp == 1 }}+ $1{{endif}}</label>
      </div>

              {{ else }}

               <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="ES_wtp2" id="fakeES" value="2" disabled>
      <label class="form-check-label" for="fakeES">Fake notes {{ if ES_wtp == 1 }}+ $1{{endif}}</label>
      </div>
                    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="ES_wtp2" id="originalES" value="1" disabled>
      <label class="form-check-label" for="originalES">Original notes {{ if ES_wtp == 2 }}+ $1{{endif}}</label>
      </div>

                {{ endif }}

          </div>
        </div>
         {{ else }}
    <p>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.</p>
          {{ endif }}
         </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>
         {{ 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 }}
                <div class="card-text">
          {{ if ES_wtp != 3 }}
       <div style="text-align: center;">
          <br>
          {{ formfield_errors 'ES_learn2' }}

          {{ form.ES_learn2.label }}
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="ES_learn2" id="ES1" value="1"
                   onclick="disable('after_answeringES', 'originalES', 'fakeES', 'indifferentES',
                   'ES_footer', 'ES_learn2_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_learn2" id="ES2" value="2"
            onclick="enable('after_answeringES', 'originalES', 'fakeES', 'indifferentES',
                   'ES_footer')">
            <label class="form-check-label" for="ES2">No, he will not learn</label>
          </div>

        </div>
        <br>
        <div id="after_answeringES">
          After correctly answering the question above, you will be able to decide which books Alex receives below.
        </div>
        <br>
        <div class="card-footer text-muted" id="ES_footer">
          {{ formfield_errors 'ES_wtp2' }}
    <div style="text-align: center;">

         <p> <strong>{{ form.ES_wtp2.label }}</strong></p>

          {{ if participant.choices_orders == 1 or participant.choices_orders == 3 or participant.choices_orders == 6 }}

                             <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="ES_wtp2" id="originalES" value="1" disabled>
          <label class="form-check-label" for="originalES">Original notes {{ if ES_wtp == 2 }}+ $1{{endif}}</label>
          </div>

          <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="ES_wtp2" id="fakeES" value="2" disabled>
          <label class="form-check-label" for="fakeES">Fake notes {{ if ES_wtp == 1 }}+ $1{{endif}}</label>
          </div>

                 {{ else }}
         <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="ES_wtp2" id="fakeES" value="2" disabled>
          <label class="form-check-label" for="fakeES">Fake notes {{ if ES_wtp == 1 }}+ $1{{endif}}</label>
          </div>

                       <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="ES_wtp2" id="originalES" value="1" disabled>
          <label class="form-check-label" for="originalES">Original notes {{ if ES_wtp == 2 }}+ $1{{endif}}</label>
          </div>

                    {{ endif }}

          </div>
        </div>
         {{ else }}
    <p>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.</p>
          {{ endif }}
         </div>
      </div>
    </div>

    
    <br>
    <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">
          {{ if Trad_wtp != 3 }}

            <div style="text-align: center;">
            <br>
            {{ formfield_errors 'Trad_learn2' }}

            {{ form.Trad_learn2.label }}
              <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="Trad_learn2" id="Trad1" value="1"
                    onclick="enable('after_answeringTrad', 'originalTrad', 'fakeTrad', 'indifferentTrad',
                    'Trad_footer')">
              <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_learn2" id="Trad2" value="2"
                      onclick="disable('after_answeringTrad', 'originalTrad', 'fakeTrad', 'indifferentTrad',
                      'Trad_footer', 'Trad_learn2_mistakes')">
                <label class="form-check-label" for="Trad2">No, he will not learn</label>
              </div>

            </div>


            <br>
            <div id="after_answeringTrad">
          After correctly answering the question above, you will be able to decide which books Alex receives below.
            </div>
            <br>
            <div class="card-footer text-muted" id="Trad_footer">
              {{ formfield_errors 'Trad_wtp2' }}
              <div style="text-align: center;">

                  <p> <strong>{{ form.Trad_wtp2.label }}</strong></p>

            {{ if participant.choices_orders == 1 or participant.choices_orders == 3 or participant.choices_orders == 6 }}

                  <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp2" id="originalTrad" value="1" disabled>
            <label class="form-check-label" for="originalTrad">
                Original notes {{ if Trad_wtp == 2 }}+ $1{{endif}}
            </label>
          </div>
                  <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp2" id="fakeTrad" value="2" disabled>
            <label class="form-check-label" for="fakeTrad">Fake notes {{ if Trad_wtp == 1 }}+ $1{{endif}}
                            </label>
          </div>

                  {{ else }}

             <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp2" id="fakeTrad" value="2" disabled>
            <label class="form-check-label" for="fakeTrad">Fake notes {{ if Trad_wtp == 1 }}+ $1{{endif}}
                            </label>
          </div>

            <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="Trad_wtp2" id="originalTrad" value="1" disabled>
            <label class="form-check-label" for="originalTrad">
                Original notes {{ if Trad_wtp == 2 }}+ $1{{endif}}
            </label>
          </div>

                {{ endif }}

              </div>
             </div>
             {{ else }}
              <p>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.</p>
              {{ endif }}
          </div>
      </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 }}

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>


<input type="hidden" name="Trad_learn2_mistakes" id="Trad_learn2_mistakes" />
<input type="hidden" name="ES_learn2_mistakes" id="ES_learn2_mistakes" />
{{ formfield_errors 'Trad_learn2_mistakes' }}
{{ formfield_errors 'ES_learn2_mistakes' }}

{% endblock %}

{% block styles %}

{% endblock %}

{% block scripts %}

<script>


function setValueById(id, value) {
  const element = document.getElementById(id);

  // Check if the element exists before setting its value
  if (element) {
    element.value = value;
  } else {
    console.log(`Element with ID "${id}" not found.`);
  }
}
setValueById('Trad1',1)
setValueById('Trad2',2)
setValueById('originalTrad',1)
setValueById('fakeTrad',2)

setValueById('ES1',1)
setValueById('ES2',2)
setValueById('originalES',1)
setValueById('fakeES',2)

</script>

<script>
  function enable(text, radio1, radio2, radio3, footer) {
    document.getElementById(text).textContent = 'Now, please decide which books Alex receives:';
    document.getElementById(radio1).disabled = false;
    document.getElementById(radio2).disabled = false;
    document.getElementById(footer).classList.remove('text-muted')
    document.getElementById(footer).style.backgroundColor = 'navajowhite';
  }

  document.getElementById('ES_learn2_mistakes').value = 0;
  document.getElementById('Trad_learn2_mistakes').value = 0;
  function disable(text, radio1, radio2, radio3, footer, mistake) {
    document.getElementById(text).textContent = 'After correctly answering the question above, you will be able to ' +
        'decide which books Alex receives below.';
    document.getElementById(radio1).disabled = true;
    document.getElementById(radio2).disabled = true;
    document.getElementById(footer).classList.add('text-muted')
    document.getElementById(footer).style.backgroundColor = null;
    document.getElementById(mistake).value = parseInt(document.getElementById(mistake).value) +1;
  }
</script>

{% endblock %}