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

{{ block title }}
  Do you prefer the open {{ C.NUM_FORCED_OPEN }} boxes or receive a sure {{ participant.valence }}?
{% endblock %}

{% block content %}

{{ if session.config.dev_mode }}
<button class="btn btn-danger otree-btn-next" style="float: right;">Skip</button>
{{ endif }}

<!-- <p>
  Please choose the rows in which you would rather complete the Collaborative Job and the rows in which you would rather get/pay the money. You can review the instructions by clicking the button below.
</p> -->

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

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <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.SIMILAR_TO_PART1 }}

        <hr>
      
        {{ include C.PART2_INSTRUCTIONS }}

        <hr>
      
        {{ include C.PART2_CHOOSING }}

        <hr>

        {{ include C.DEMAND_ELICIATION_INSTRUCTIONS }}

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

{{ formfield_errors 'wtp' }}

<p>
  Please answer the questions below. You can change your answers by clicking on the buttons. Once you answer all questions, the "Next" button will appear.
</p>

<div id="root"></div>
<div id="hidden_fields_wtp"></div>

<button type="button" id='next_button_id_de' class="btn btn-primary otree-btn-next" data-bs-toggle="modal" data-bs-target="#confirmModal" style="display:none; float: right;">Next</button>


{% endblock %}

{% block styles %}

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

<style>
   .arrow-container {
     position: relative;
     display: flex;
     align-items: center;
     margin-left: -40px; /* Adjust this value to align the arrows properly */
   }

   .arrow {
     position: absolute;
     width: 0;
     height: 0;
     border-left: 20px solid transparent; /* Adjust the size of the arrow */
     border-right: 20px solid transparent;
   }

   .arrow-up {
     border-bottom: 20px solid #007bff; /* Arrow color */
     top: 0;
   }

   .arrow-down {
     border-top: 20px solid #dc3545; /* Arrow color */
     bottom: 0;
   }

   .arrow-text {
     margin: 0 10px;
     font-size: 14px;
     font-weight: bold;
   }
</style>
 
{% endblock %}

{% block scripts %}


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

<script>
parameters={
    playerID : "{{participant.code}}" + "{{ player.round_number }}",
    leftHeader:"Left Option", 
    rightHeader:"Right Option", 
    numeric_WTP: {{ numeric_WTP|safe }},
    leftBonus: {{ leftText|safe }},
    rightBonus: {{ rightText|safe }},
    varname:"wtp", //variable name on oTree  ES_wtp3', '',
    root:"root",
    hidden_fields_name:"hidden_fields_wtp",
    bonusAmounts: {{ participant.bonusAmounts }},
    minBonus: {{ C.START_VALUE }},
    maxBonus: {{ C.END_VALUE }},
    numForcedBoxed: {{ C.NUM_FORCED_OPEN }},
    treatment: "{{ participant.valence }}"
  }
  wtp_1 =new drawWTP(parameters);
</script>

{% endblock %}