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


{# ****************************************************************************************************************** #}
{# *** STYLES *** #}
{# ****************************************************************************************************************** #}
{% block styles %}
<link href="{% static 'Time_Adaptive_CE/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_28 = new Date(d.setDate(d.getDate() + 28));

    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_28 = weekday[d_28.getDay()];
    var month_28 = month[d_28.getMonth()];

    var date_28 = weekday_28 + ", "  + d_28.getDate() + ". " + month_28 + " " + d_28.getFullYear();
</script>


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

<p>
    <div align="center" style="font-size: 18px">
        <b>Which alternative 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 Alternative – <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 Alternative – <span style="color: #CB99D9"><b>4 weeks</b></span>
            </th>
        </tr>
    </thead>
    <tr>
        <td align="center">
            which pays
            <br> <br>
            {{ce_early}} <b><span style="color: #F39F18">tomorrow</span></b>
            <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>
            {{ce_late}} <b><span style="color: #CB99D9">in 4 weeks</span></b>
            <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 - 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>
                <div class="instructions" align="justify">
            {% if discount_seq == 2%}
            <p>
                The next part of this study will consist of two tasks.
                We will start by explaining the first task.
                Once you have completed the first task, we will explain task 2.
            </p>

            <p>
                <b>Part 2 - Task 1</b> <br>
                In the first task you will have to choose between different monetary alternatives, which will be paid out at two different points in time.
                The first alternative, which we refer to as the Alternative - <span style="color: #F39F18"><b>Tomorrow</b></span> will be paid out tomorrow.
                Since this alternative will be paid out "sooner", the monetary value is usually low.
                The second alternative, which we refer to as the Alternative - <span style="color: #CB99D9"><b>4 weeks</b></span> will be paid out in 4 weeks (i.e., <span id="date_28"></span>).
                Since this alternative will be paid out "later", the monetary value is usually higher.
                The example below illustrates this. <br>
                Your task is to choose between the Alternative - <span style="color: #F39F18"><b>Tomorrow</b></span>
                and the Alternative - <span style="color: #CB99D9"><b>4 weeks</b></span>.
            </p>
            {% endif %}

            {% if discount_seq == 1 %}
            <p>
                <b>Part 2 - Task 2</b> <br>
                In the second task you will have to choose between different monetary alternatives, which will be paid out at two different points in time.
                The first alternative, which we refer to as the Alternative - <span style="color: #F39F18"><b>Tomorrow</b></span> will be paid out tomorrow.
                Since this alternative will be paid out "sooner", the monetary value is usually low.
                The second alternative, which we refer to as the Alternative - <span style="color: #CB99D9"><b>4 weeks</b></span> will be paid out in 4 weeks (i.e., <span id="date_28"></span>).
                Since this alternative will be paid out "later", the monetary value is usually higher.
                The example below illustrates this. <br>
                Your task is to choose between the Alternative - <span style="color: #F39F18"><b>Tomorrow</b></span>
                and the Alternative - <span style="color: #CB99D9"><b>4 weeks</b></span>.
            </p>
            {% endif %}
            <div align="center" style="font-size: 16px">
                <b> Which alternative do you prefer?</b>
            </div>

            <table class="customers" align="center" style="width: 70%">
                <colgroup>
                    <col style="width: 150px" >
                    <col style="width: 50px" >
                    <col style="width: 150px" >
                </colgroup>
                <thead>
                    <tr>
                        <th align="center" style="font-size: 16px" height="50px">
                            The Alternative – <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 Alternative – <span style="color: #CB99D9"><b>4 weeks</b></span>
                        </th>
                    </tr>
                </thead>
                <tr>
                    <td align="center">
                        which pays
                        <br> <br>
                        €4.00 <b><span style="color: #F39F18">tomorrow</span></b>.
                        <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>
                        €10.00 <b><span style="color: #CB99D9">in 4 weeks</span></b>.
                        <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 you can earn differ.
                Within one round, the amounts of the Alternative - <span style="color: #F39F18"><b>Tomorrow</b></span> remain constant.
                They only change once you start a new round.
                The amounts of the Alternative - <span style="color: #CB99D9"><b>4 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 your of choices in this part of the study (either from task 1 or from task 2)
                and pay them out at the respective date of payment (via PayPal).
                This means your choices in this first task have the same probability of being selected as your choices
                {% if discount_seq == 2 %} in task 2. {% endif %}
                {% if discount_seq == 1 %} in task 1.{% endif %}
                It is always in your best interest to choose the option you prefer the most.
            </p>
            <p>
                Please note again that the questions are not designed to test you.
                There are no correct or incorrect answers. Simply choose the payment option that you prefer the most.

                <br>

                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.
        </div>

              </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 computeDate28() {
    const d = new Date();
    // 更稳的 +28 天：避免 DST/跨月边界的坑
    const d28 = new Date(d.getFullYear(), d.getMonth(), d.getDate() + 28);

    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[d28.getDay()]}, ${d28.getDate()}. ${month[d28.getMonth()]} ${d28.getFullYear()}`;
  }

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

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

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

{% endblock %}