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


{# ****************************************************************************************************************** #}
{# *** STYLES *** #}
{# ****************************************************************************************************************** #}
{% block styles %}
<link href="{% static 'Time_Adaptive_Lot_1/css/custom.css' %}" rel="stylesheet">
<style>
    .customers {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 14px;
      border-collapse: collapse;
      width: 100%;
    }

    .customers td {
      border: 1px solid lightgrey;
      padding: 8px;
      font-size: 16px;
    }

    .customers tr:nth-child(even){background-color: #f2f2f2;}

    .customers tr{
    line-height: 18px;
    }

    .customers th {
      padding-top: 12px;
      padding-bottom: 12px;
      text-align: center;
      background-color: #F0F0F0;
      color: black;
      border: 1px solid #F0F0F0;
      border-bottom-color: lightgrey;
    }
    #next {
        display: none;
    }
</style>
<style>
    #modal {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      width: 78%;
    }

    #modal td, #modal th {
      border: 1px solid grey;
      padding: 8px;
    }

    #modal tr:nth-child(even){background-color: #f2f2f2;}

    #modal th {
      padding-top: 12px;
      padding-bottom: 12px;
      text-align: center;
      background-color: #808080;
      color: white;
                    }
 </style>
{% endblock %}

{# ****************************************************************************************************************** #}
{# *** TITLE *** #}
{# ****************************************************************************************************************** #}
{% block title %}

{% endblock %}


{# ****************************************************************************************************************** #}
{# *** CONTENT *** #}
{# ****************************************************************************************************************** #}
{% block content %}
<!-- additional script -->
<script>
    d = new Date();
    d_56 = new Date(d.setDate(d.getDate() + 56));

    var weekday = new Array(7);
    weekday[0] = "dimanche";
    weekday[1] = "lundi";
    weekday[2] = "mardi";
    weekday[3] = "mercredi";
    weekday[4] = "jeudi";
    weekday[5] = "vendredi";
    weekday[6] = "samedi";

    var month = new Array();
    month[0] = "janvier";
    month[1] = "février";
    month[2] = "mars";
    month[3] = "avril";
    month[4] = "mai";
    month[5] = "juin";
    month[6] = "juillet";
    month[7] = "août";
    month[8] = "septembre";
    month[9] = "octobre";
    month[10] = "novembre";
    month[11] = "décembre";

    var weekday_56 = weekday[d_56.getDay()];
    var month_56 = month[d_56.getMonth()];

    var date_56 = weekday_56 + ", "  + d_56.getDate() + ". " + month_56 + " " + d_56.getFullYear();
</script>

<div style="font-size:56px" align="center">
    <b>Your Choice</b>
</div>

<p>
    <div align="center" style="font-size: 18px">
        <b>Which lottery do you prefer?</b>
    </div>
</p>

<table align="center" class="customers">
    <colgroup>
        <col style="width: 300px" >
        <col style="width: 75px" >
        <col style="width: 300px" >
    </colgroup>
    <thead>
        <tr>
            <th align="center" style="font-size: 18px" height="50px">
                The Lottery - <span style="color: #F39F18"><b>Tomorrow</b></span>
            </th>
            <th align="center" style="font-size: 18px" height="50px">
                or
            </th>
            <th align="center" style="font-size: 18px">
                The Lottery - <span style="color: #2E8B57"><b>8 weeks</b></span>
            </th>
        </tr>
    </thead>
    <tr>
        <td align="center">
            which pays
            <br> <br>
            {{lot_high_early}} <b><span style="color: #F39F18">tomorrow</span></b> if the coin shows head
            <br>
            or
            <br>
            {{lot_low_early}} <b><span style="color: #F39F18">tomorrow</span></b> if the coin shows tail.
            <br> <br>
        </td>
        <td align="center">
            <input type="radio" name="choice" value="early" required>
            <input type="radio" name="choice" value="late" required>
        </td>
        <td align="center" >
            which pays
             <br><br>
            {{lot_high_late}} in <b><span style="color: #2E8B57"><b>8 weeks</b></span></b> if the coin shows head
            <br>
            or
            <br>
            {{lot_low_late}} in <b><span style="color: #2E8B57"><b>8 weeks</b></span></b> if the coin shows tail.
            <br> <br>
        </td>
    </tr>
</table>


<br> <br>

{# Buttons #}
    <div align="center">
        <!-- Instructions Button -->
        <button name="Next" value="True" class="btn btn-primary btn-large">Next</button>
        <button type="button" align="center" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#InstructionsModal" style="background-color:grey; border-color:grey">Instructions </button>
    </div>

        <!-- Instructions Modal -->
        <div class="modal fade" id="InstructionsModal" tabindex="-1" role="dialog" aria-labelledby="InstructionsModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" style="max-width: 80%; font-size: 14px" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="InstructionsModalLabel"> Part 2 Task 2 - Instructions </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                  <style>
                        #modal {
                          font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
                          border-collapse: collapse;
                          width: 78%;
                        }

                        #modal td, #modal th {
                          border: 1px solid grey;
                          padding: 8px;
                        }

                        #modal tr:nth-child(even){background-color: #f2f2f2;}

                        #modal th {
                          padding-top: 12px;
                          padding-bottom: 12px;
                          text-align: center;
                          background-color: #808080;
                          color: white;
                        }
                     </style>

                <p>
                <p>
             <p>
        <p>
                <p>
                Task 2 of this part is almost identical to Task 1. The only difference is that the second alternative will
                be paid out in <b>8 weeks</b>, instead of 4 weeks. Apart from the payment date, the instructions are identical to those from Task 1.
                We include them here in case you would like to review them.
                Once you have completed Task 2, we will explain the next task.
            </p>
            <p>
                <b>Part 2 - Task 2</b> <br>
                In the second task you will have to choose between different lottery alternatives, which will be paid out at two different points in time.
                The first alternative, which we refer to as the Lottery - <span style="color: #F39F18"><b>Tomorrow</b></span> will be paid out tomorrow.
                Since this alternative will be paid out "sooner", the two potential amounts you can earn in that lottery are usually low.
                The second alternative, which we refer to as the Lottery - <span style="color: #2E8B57"><b>8 weeks</b></span> will be paid out in 8 weeks (i.e., <span id="date_56"></span>).
                Since this alternative will be paid out "later", the two potential amounts you can earn in that lottery are usually higher.
                The example below illustrates this. By comparing the outcomes of the two lotteries, you can see how both the outcome
                in the best case scenario and the outcome in the worst case scenario are higher in the Lottery - <span style="color: #2E8B57"><b>8 weeks</b></span>.<br>
                Your task is to choose between the Lottery - <span style="color: #F39F18"><b>Tomorrow</b></span> and the Lottery - <span style="color: #2E8B57"><b>8 weeks</b></span>.
                Each lottery will pay you either the high or the low amount depending on the outcome of a coin toss.
                So for each amount, there exists a <b>50-50 chance that it will materialize</b>.
            </p>
             <div align="center" style="font-size: 16px">
                    <b>Which is your preferred alternative</b>
                </div>

            <table align="center" class="customers" style="width: 80%">
                <colgroup>
                    <col style="width: 300px" >
                    <col style="width: 75px" >
                    <col style="width: 300px" >
                </colgroup>
                <thead>
                    <tr>
                        <th align="center" style="font-size: 16px" height="50px">
                            The Lottery - <span style="color: #F39F18"><b>Tomorrow</b></span>
                        </th>
                        <th align="center" style="font-size: 16px" height="50px">
                            or
                        </th>
                        <th align="center" style="font-size: 16px">
                            The Lottery  - <span style="color: #2E8B57"><b>8 weeks</b></span>
                        </th>
                    </tr>
                </thead>
                <tr>
                    <td align="center">
                        which pays
                        <br> <br>
                        $9.00 <b><span style="color: #F39F18">tomorrow</span></b> if the coin shows head <br>
                        or <br>
                        $4.00 <b><span style="color: #F39F18">tomorrow</span></b> if the coin shows tail.
                        <br> <br>
                    </td>
                    <td align="center">
                        <input type="radio" name="choice" value="A" disabled>
                        <input type="radio" name="choice" value="B" disabled>
                    </td>
                    <td align="center">
                        which pays
                        <br> <br>
                        $12.00 in <b><span style="color: #2E8B57"><b>8 weeks</b></span></b> if the coin shows head <br>
                        or <br>
                        $6.50 in <b><span style="color: #2E8B57"><b>8 weeks</b></span></b> if the coin shows tail.
                        <br> <br>
                    </td>
                </tr>
            </table>
            <br>
            <p>
                This task will consist of 3 rounds each containing 6 choices.
                That means that you will make a total of 18 choices similar to the example above.
                For all 18 choices the payment dates remain the same. However, the monetary amounts of the lotteries differ.
                Within one round, the amounts of the Lottery - <span style="color: #F39F18"><b>Tomorrow</b></span> remain constant.
                They only change once you start a new round.
                and pay them out at the respective date of payment.
                This means your choices in this first task have the same probability of being selected as your choices in task 2.
                If the computer selects one of the choices from this task, it will solve the lottery by simulating a coin toss.
                According to the outcome of the coin toss you will then either receive the higher amount if the coin shows heads or the lower amount if the coin shows tails.
                Since all of your choices in this part have the same probability to be chosen for payment, it is always in your best interest to choose the option you prefer the most.
            </p>
                The amounts of the Lottery - <span style="color: #2E8B57"><b>8 weeks</b></span>, on the other hand,
                differ from choice to choice. It is very important that you pay attention to those changes when you make your decision.
            </p>

            <p>
                At the end of this study, we will randomly select one of your choices in this part of the study (from one of the four tasks in Part 2).

            <p>
                Please note again that the questions are not designed to test you.
                There are no right or wrong answers. Simply choose the payment option that you prefer the most.
            </p>

            <p>
                Please think carefully about your decision before you leave a page.
                Once you click the NEXT button on the bottom of a decision page, your choices will be recorded and you will not be able to revise them.
                You will not have the opportunity to navigate back during this task.
            </p>
                  <p>
            Please click the Return button if you understood the instructions and you feel ready to continue.
        </p>

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-primary btn-large" style="background-color:grey; border-color:grey" data-bs-dismiss="modal">Return</button>
              </div>
            </div>
          </div>
        </div>
    </div>

{% endblock %}

{# ****************************************************************************************************************** #}
{# *** SCRIPTS *** #}
{# ****************************************************************************************************************** #}
{% block scripts %}
<script type="text/javascript">
    // Pressing enter does not submit the form.
    $(document).ready(function() {
        $(window).keydown(function(event){
            if ((event.keyCode == 13) || (event.keyCode == 32)){
            event.preventDefault();
            return false;
           }
        });
    });

    // Disable right click
    $(document).ready(function(){
        document.oncontextmenu = function() {return false;};
        $(document).mousedown(function(e){
            if( e.button == 2 ) {
                //window.location.reload();
                return false;
            }
            return true;
        });
    });

// Code to show Button after 12 seconds
    var i = 1;
    var time = $("#time")
    var timer = setInterval(function() {
    time.html(i);
    if (i == 0) {
    $("#next").show();
    clearInterval(timer);
  }
  i--;
}, 1000)

</script>

{# Add this script to ensure dates works under the instructions button #}
<script>
(function () {
  function computeDate256() {
    const d = new Date();
    // 更稳的 +56 天：避免 DST/跨月边界的坑
    const d56 = new Date(d.getFullYear(), d.getMonth(), d.getDate() + 56);

    const weekday = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
    const month = ["January","February","March","April","May","June","July","August","September","October","November","December"];

    return `${weekday[d56.getDay()]}, ${d56.getDate()}. ${month[d56.getMonth()]} ${d56.getFullYear()}`;
  }

  function fillDate56() {
    const text = computeDate56();
    // 同时兼容 class 和 id 的写法
    document.querySelectorAll('.date_56, #date_56').forEach(el => {
      el.textContent = text;
    });
  }

  // A. 页面解析完成先填一次（modal 的 DOM 已在页面里）
  document.addEventListener('DOMContentLoaded', fillDate56);

  // B. modal 将要显示时再填一次（确保懒加载/重新渲染也能填到）
  const modal = document.getElementById('InstructionsModal');
  if (modal) {
    modal.addEventListener('show.bs.modal', fillDate56); // Bootstrap 5 事件名
  }
})();
</script>



{% endblock %}