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

{% block title %}
You give us instructions about which option you want
{% endblock %}

{% block content %}


<div class="row"></div>
<div class="my-3 bg-light px-3 py-3 rounded border">
    <div class="row">
        <div class="container">
            <p>
                Here is an example of how a decision in the experiment looks like:
            </p>
        </div>
    </div>
    <hr />
    <div class="row">
        <div class="container">
            <h4><strong>Example decision</strong></h4>
            <p>
                Suppose the endowment and Option 1 in your bonus file are as follows:
            </p>

            <p class="text-center">
                Your endowment is £{{base_endowment_init}}.
            </p>

            <table class="table table-bordered border-dark" style="background-color: white;">
                <tbody>
                    <tr>
                        <td style="width: 50%" class="text-center">
                            <strong>Option 1: Take the risk</strong> <br>
                            (i.e., adjust my endowment by the outcome of):
                        </td>
                        <td style="width: 50%" class="text-center">
                            <strong>Option 2: Take amount</strong> <br>
                            (i.e., adjust my endowment by):
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <img class="img-fluid mx-auto d-block" src="{% static image_path %}" width="90%" />
                        </td>
                        <td class="align-middle text-center">
                            <span style="font-size: 500%; font-weight: 100;">
                                £x
                            </span>
                        </td>
                    </tr>
                </tbody>
            </table>
            <p>
                <strong>
                    Your decision:
                </strong>
                “Please give me Option 2 (the amount) if it is £
                <input type="number" max=99 min=-99 step="0.01" id="example_question" name="example_question"
                    oninput="trunc_to_two(this.value)" onkeyup="update_text_input()" style="width: 3em"></input>
                or more and Option 1 (the risk) otherwise.”
            </p>
            <script>
                function trunc_to_two(value) {
                    let with2Decimals = value.toString().match(/^-?\d+(?:\.\d{0,2})?/)[0]
                    // rounded.value = with2Decimals
                    document.getElementById("example_question").value = with2Decimals

                }
            </script>
            <div id="on_page_feedback" class="d-none">
                <p>
                    <strong>As you wish:</strong>
                    If {{user_chosen_decision}}.pdf shows Option 1 as above, then:
                <ul>
                    <li>
                        We give you <span id="highlight_span"> Option 1 if the amount is less than
                            £<span id="in_text_display"></span></span>.
                    </li>
                    <li>
                        Otherwise, we give you Option 2.
                    </li>
                </ul>
                </p>
            </div>
        </div>
    </div>
    <hr />
    <div class="row">
        <div class="container">
            <p>
                <strong>Note:</strong>
            </p>
            <ol>
                <li>
                    <strong>
                        Effectively, you instruct us about the smallest amount that you want more
                        than Option 1 </strong> &mdash; your threshold value.
                    Because Option 1 would never give you less than £-1.50 and never more than £6.00, you may wish to
                    select a threshold value within this range.
                </li>
                <li>
                    <strong>
                        There are no wrong or right answers.
                    </strong>
                    Please give us instructions according to what you want (Option 1 or Option 2, depending on £x). If
                    you tell us what you want, we will give you what you want! That (what you want) is also what we are
                    interested in and want to investigate in this study.
                </li>
            </ol>
            {{ formfield_errors "example_question_check" }}
            <input type="hidden" id="example_question_check" name="example_question_check" value="False"></input>
            <p>
                To ease your understanding, please enter the following threshold values and see how the text summarizing
                your
                decision changes: -0.52, 0.13, 18.00, -4.70.
            </p>
            <button type="button" class="btn btn-primary mt-2" onclick="modal_min_time()" id="next_page_btn"
                disabled>Got it. I am ready to answer some comprehension
                questions.</button>
        </div>
    </div>
</div>

<script>

    let min_time_on_page = js_vars.min_time_on_page
    // Enables the next button after set time
    setTimeout(
        function () {
            document.getElementById("next_page_btn").removeAttribute("disabled")
            // document.getElementById("next_btn_info").style.display = "none"
        },
        min_time_on_page * 1000
    );

    let min_time_in_modal = js_vars.min_time_in_modal
    function modal_min_time() {
        example_value_check = document.getElementById("example_question_check").value
        let mod_body_text = ""
        let mod_title_text = ""
        if (example_value_check == "True") {
            // document.getElementById("next_page_modal_btn").click()
            document.getElementById("form").submit()
        } else {
            $("#submitPopUp").modal("toggle")
            mod_body_text = `
            <p>
                Before continuing, please practice by entering the threshold values -0.52, 0.13, 18.00, -4.70 in the sentence following 'Your decision:'
                </p>
            `
            mod_title_text = "Please go back and practice by entering the threshold values."


            document.getElementById("cond_modal_buttons_true").classList.add('d-none')
            document.getElementById("cond_modal_buttons_false").classList.remove("d-none")
        }
        document.getElementById("add_text_blog").innerHTML = mod_body_text
        document.getElementById("submitPopUpLabel").innerHTML = mod_title_text

        document.getElementById("next_page_modal_btn").disabled = true
        setTimeout(
            function () {
                document.getElementById("next_page_modal_btn").removeAttribute("disabled")
            },
            min_time_in_modal * 1000
        )
    }

    let past_inputs = []
    function update_text_input() {
        cur_val = document.getElementById("example_question").value
        past_inputs.push(parseFloat(cur_val))

        document.getElementById("example_question").classList.add("blink-bg")
        setTimeout(function () { document.getElementById("example_question").classList.remove("blink-bg") }, 7 * 1000)
        document.getElementById("highlight_span").classList.add("blink-bg")
        setTimeout(function () { document.getElementById("highlight_span").classList.remove("blink-bg") }, 7 * 1000)

        // console.log(past_inputs)
        if (cur_val.length == 0) {
            document.getElementById("in_text_display").innerHTML = '[Please enter your threshold value.]'
        } else {
            document.getElementById("in_text_display").innerHTML = cur_val
        }
        document.getElementById("on_page_feedback").classList.remove("d-none")
        // Must be manually updated if the testvalues in the text change
        if (past_inputs.includes(-0.52) && past_inputs.includes(0.13) && past_inputs.includes(18.0) && past_inputs.includes(-4.7)) {
            document.getElementById("example_question_check").value = "True"
            console.log("check--True")
        } else { console.log("check--False") }
    }
</script>

<script>
    function t_modal() {
        $("#submitPopUp").modal("toggle")
    }
</script>

<!-- Modal -->
<div class="modal fade" id="submitPopUp" tabindex="-1" role="dialog" aria-labelledby="submitPopUpLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="submitPopUpLabel"></h5>
                <button type="button" class="close" onclick="t_modal()" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="p-2 m-2" id="add_text_blog">
                </div>
            </div>
            <div class="modal-footer">
                <div id="cond_modal_buttons_true" class="d-none">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Go back</button>
                    <!-- MARK is no longer the default next_page_btn like on the other pages, because we want a staggered min_time on the mainpage and the pop-up. The Button triggering this modal has the id next_page_btn now. -->
                    <button class="btn btn-primary" id="next_page_modal_btn">
                        Continue
                    </button>
                </div>
                <div id="cond_modal_buttons_false">
                    <button type="button" class="btn btn-secondary" onclick="t_modal()" data-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}