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

{% block title %}
{% if last_round_flag == False %}
Your bonus
{% else %}
Your bonus is £{{final_payoff}}
{% endif %}

{% 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">
            <div id="show_past_data">

                {% if round_number == 1 or last_round_flag == True %}

                <p>
                    The content of {{user_chosen_decision}}.pdf, which determines your bonus, is as follows:
                </p>
                <div class='{{embed_classname}}'>
                    <embed src="{{static pdf_path }}" type="application/pdf">
                </div>
                <br>

                <p>
                    In Decision {{chosen_round}}, you gave the following instruction to us:
                </p>
                <p>
                    “Please give me Option 2 (the amount) if it is £{{player_choice}} or more and Option 1 (the risk)
                    otherwise.”
                </p>
                {% endif %}
                {% if computer_choice > player_choice %}
                <p>
                    Because the amount in Option 2 is £{{computer_choice}} (i.e., larger than £{{player_choice}}), we
                    give you Option 2.
                </p>
                <p>
                    <strong>
                        Your bonus is the endowment plus the amount in Option 2:
                    </strong>
                </p>
                <p class="text-center">
                    <strong>£{{ base_endowment }} + £{{ endow_payoff }} = £{{final_payoff}}</strong>.
                </p>
                {% elif win_tracker == -999 %}
                <p>
                    Because the amount in Option 2 is £{{computer_choice}} (i.e., smaller than your threshold value of
                    £{{player_choice}}), we
                    give
                    you
                    Option 1.
                </p>
                <p>
                    The following shows the outcome of the risk in Option 1: £{{risky_payoff}}. </p>
                <p>
                    <strong>
                        Your bonus is the endowment plus the outcome of Option 1:
                    </strong>
                </p>
                <p class="text-center">
                    <strong>£{{ base_endowment }} + £{{ risky_payoff}} = £{{final_payoff}}</strong>.
                </p>
                {% else %}
                {% if round_number == 1 or last_round_flag == True %}
                <p>
                    Because the amount in Option 2 is £{{computer_choice}} (i.e., smaller than your threshold value of
                    £{{player_choice}}), we
                    give
                    you
                    Option 1.
                </p>
                {% endif %}
                {% if round_number > 1 %}
                <p>
                    The following shows the outcome of the risk in Option 1: </p>
                {% endif %}
                <p class="text-center">
                <ol>

                    {% for win, last in win_tracker %}
                    {% if win != 0 and last == False %}
                    <li>
                        You <strong>won</strong> this round. (&rarr; bonus + {{pay_up}})
                    </li>
                    {% elif win != 0 %}
                    <li class="bg-final">
                        You <strong>won</strong> this round. (&rarr; bonus + {{pay_up}})
                    </li>
                    {% else %}
                    <li class="bg-final">
                        You <strong>lost</strong> and thus no further risk is taken. (&rarr; bonus
                        {{pay_down}})
                    </li>
                    {% endif %}
                    <!-- (The xth digits of your random input were transformed: {{win}}.) <br> -->
                    {% endfor %}
                </ol>
                </p>
                {% if last_round_flag == True %}
                <p>
                    <strong>
                        Your bonus is the endowment plus the outcome of Option 1:
                    </strong>
                </p>
                <p class="text-center">
                    <strong>£{{ base_endowment }} + £{{ risky_payoff}} = £{{final_payoff}}</strong>.
                </p>
                {% endif %}
                {% endif %}

            </div>
            <!-- Accept random numbers here -->
            {% if option_1_flag == True and last_round_flag == False%}
            {% if repetitions == 1 %}
            <p>
                To determine the outcome of Option 1, please make a virtual draw from the above urn.
            </p>
            <p>
                To do so, please enter a number between 1 and 100. (By clicking the "Generate Random" button, you can
                also have the computer generate a number for you.) </p>

            {% elif repetitions > 1 and round_number == 1%}
            <p>
                To determine the outcome of Option 1, one or more virtual urn draws are necessary.
            </p>
            <p>
                To make the first draw, please enter a number between 1 and 100. (By clicking the "Generate Random"
                button, you can also have the computer generate a number for you.)
            </p>
            {% elif repetitions > 1 and round_number > 1 %}
            <p>
                Please make another virtual draw by entering a number between 1 and 100.
            </p>
            {% endif %}


            {{ formfield_errors "risk_input" }}
            <input type="text" id="risk_input" size="3" name="risk_input" onkeypress="return onlyNumberKey(event)"
                oninput="check_input_length(this.value)"></input>
            {{ formfield_errors "risk_input_helper" }}
            <input type="hidden" id="risk_input_helper" name="risk_input_helper" value="False"></input>
            <button class="btn btn-primary mx-1" id="rnd_btn" onclick="gen_random()" type="button">Generate
                Random</button>
            <p>
            <div id="pos_feedback" class="d-none">
                The number you entered is valid.
            </div>
            <div id="neg_feedback" class="d-none">
                The number you entered is not in line with our rules. Please enter a number between 1 and
                100 (including 1 and 100).
            </div>
            </p>
            {% else%}
            {{ formfield_errors "risk_input" }}
            <input type="hidden" id="risk_input" name="risk_input" value="999"></input>
            {{ formfield_errors "risk_input_helper" }}
            <input type="hidden" id="risk_input_helper" name="risk_input_helper" value="True"></input>


            {% endif %}
            <!-- post_choice_stuff -->
            {% if last_round_flag == True %}

        </div>
    </div>
    <div class="row">
        <div class="container alert alert-info">
            <p>
                <strong>
                    Remarks on verification
                </strong>
            </p>
            <p>
                As mentioned, if you downloaded and saved Verification.pdf earlier, you can personally verify that your bonus
                above was determined fairly, exactly as described during the experiment: </p>
            <ol>
                <li>
                    The content of your bonus file was not manipulated. </li>
                <li>
                    If your bonus was determined by the outcome(s) of one or several risks, then each outcome was
                    determined fairly, exactly as described during the experiment. </li>
            </ol>
            <p>
                <strong>
                    How verification works exactly is explained in Verification.pdf </strong>
            </p>

            <p>
                Because the information in the file would allow future participants to manipulate 1 and 2 above
                themselves, we release the password only after the experiment is completed (i.e., after all
                participants
                have made their decisions). We will send it to you via Prolific. The password also applies to your
                bonus
                file. To verify 2 above, you must also save the number(s) that you entered for the virtual draws:
            </p>

            {% if risk_input != 999 %}
            <p class="text-center">
                <strong>
                    {{risk_input}}
                </strong>
            </p>
            {% endif %}
            <p>
                <strong>
                    Verification is most convenient if you print this webpage (pressing ctrl+p works with most
                    browsers)
                    and hold it back-to-back to the verification file and your bonus file.
                </strong>
            </p>
        </div>
    </div>
    <div class="row">
        <div class="container">

            <p>
                Thank you for participating in this experiment!
            </p>
            <a class="btn btn-primary" href="https://app.prolific.co/submissions/complete?cc=3969BDCD"
                class="d-inline">Click
                here to return to Prolific's completion URL</a>
        </div>
    </div>

    {% endif %}
    {% if last_round_flag != True %}
    <div class="row">
        <div class="container">

            <button id="next_page_btn" class="btn btn-primary" disabled>Next</button>
        </div>
    </div>

    {% endif %}

</div>

<script>
    condition = js_vars.condition
    // function isNumeric(value) {
    //     // source https://stackoverflow.com/questions/175739/built-in-way-in-javascript-to-check-if-a-string-is-a-valid-number
    //     return /^\d+$/.test(value);
    // }

    // function genRnd() {
    //     let rnd_number = Math.floor(Math.random() * 10 ** condition)
    //     document.getElementById("risk_input").value = rnd_number
    //     check_input_length(rnd_number.toString())
    // }


    function onlyNumberKey(evt) {
        // Only ASCII charactar in that range allowed 
        var ASCIICode = (evt.which) ? evt.which : evt.keyCode
        if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57))
            return false;
        return true;
    }

    // const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;

    function gen_random() {
        // let digs = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
        // let rnd_list = []
        // for (i = 0; i < condition; i++) {
        //     randomElement = digs[Math.floor(Math.random() * digs.length)]
        //     rnd_list.push(randomElement)
        // }
        let max = 101
        let min = 1
        let rnd_number = Math.floor(Math.random() * (max - min)) + min
        document.getElementById("risk_input").value = rnd_number.toString()
        check_input_length(rnd_number.toString())
    }

    function check_input_length(user_value) {
        console.log(parseInt(user_value))
        if ((user_value.length > condition)) {
            document.getElementById("risk_input").value = user_value.slice(0, condition)
        } else if (user_value.length == condition) {
            if ((parseInt(user_value) <= 100)) {
                document.getElementById("pos_feedback").className = "alert alert-success"
                document.getElementById("neg_feedback").className = "d-none"
                document.getElementById("risk_input_helper").value = "True"
            } else {
                document.getElementById("risk_input").value = user_value.slice(0, condition - 1)
                document.getElementById("pos_feedback").className = "d-none"
                document.getElementById("neg_feedback").className = "alert alert-danger"
                document.getElementById("risk_input_helper").value = "False"

            }
        }
        else if ((user_value.length < condition) && (parseInt(user_value) <= 100)) {
            document.getElementById("pos_feedback").className = "alert alert-success"
            document.getElementById("neg_feedback").className = "d-none"
            document.getElementById("risk_input_helper").value = "True"
        } else {
            document.getElementById("pos_feedback").className = "d-none"
            document.getElementById("neg_feedback").className = "alert alert-danger"
            document.getElementById("risk_input_helper").value = "False"
        }
    }
</script>

<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
    );
</script>
{% endblock %}