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

{% block title %}
Decision {{ choice_type }}
{% 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>
                Suppose the endowment and Option 1 in your bonus file are as follows:
            </p>
            <p class="text-center">
                Your endowment is £{{base_endowment}}.
            </p>


            <table class="table table-bordered border-dark" style="background-color: white;">
                <tbody>
                    <tr>
                        <td style="width: 50%" class="text-center">
                            {% if repetitions == 1 %}
                            <strong>Option 1: Take the risk</strong> <br>
                            (i.e., adjust my endowment by the outcome of):
                            {% else %}
                            <strong>Option 1: Take the single the risk <span id="highlight_span_title"
                                    class="blinkfade-bg">{{repetitions}} {{repetitions_word}} times or until losing the
                                    first time, </span>
                                whichever
                                happens first</strong> <br>
                            (and add the outcome to my endowment):
                            {% endif %}
                        </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>
                {% if repetitions == 1 %}
                <strong>
                    Your decision:
                </strong>
                “Please give me Option 2 (the amount) if it is £
                <input type="number" id="player_choice_input" name="player_choice" step="0.01"
                    onchange="set_modal_text()" oninput="trunc_to_two(this.value)" onkeyup="update_text_input()"
                    style="width: 3em" />
                or more and Option 1 (the risk) otherwise.”
                {% else %}
                <strong>
                    Your decision:
                </strong>
                “Please give me Option 2 (the amount) if it is £
                <input type="number" id="player_choice_input" name="player_choice" step="0.01"
                    onchange="set_modal_text()" oninput="trunc_to_two(this.value)" onkeyup="update_text_input()"
                    style="width: 3em" />
                more and Option 1 (the risk up to {{repetitions}} times) otherwise.”
                {% endif %}
                {{ formfield_errors "player_choice_past" }}
                <input type="hidden" id="player_choice_past" name="player_choice_past" value="[9999]"></input>

            </p>
            <script>
                function trunc_to_two(value) {
                    let with2Decimals = value.toString().match(/^-?\d+(?:\.\d{0,2})?/)[0]
                    document.getElementById("player_choice_input").value = with2Decimals
                    // rounded.value = with2Decimals
                    // let past_vals = document.getElementById("player_choice_past")
                    // past_vals = toString(past_vals)
                    // if (past_vals == "") {
                    //     past_vals = []
                    // } else {
                    // past_vals = past_vals.replaceAll("[", "").replaceAll("]", "").replaceAll(" ", "").split(",")
                    // past_vals = past_vals.map(Number)
                    // past_vals.push(with2Decimals)
                    // DANGER führt beim EmptyString zu einer Liste [0] -> Bei Auswertung beachten
                    // }
                    // document.getElementById("player_choice_past").value = past_vals

                }
            </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>
    <button type="button" class="btn btn-primary mt-2" onclick="t_modal();modal_min_time();" onclick="modal_min_time()"
        data-bs-toggle="modal" data-bs-target="#submitPopUp" id="next_page_btn" disabled>
        Confirm Decision {{ choice_type }}
    </button>


</div>

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


<!-- <div class="row">
    <div class="col">
        <div class="container">
            <div class="form-group border border-dark p-3">
                <label for="player_choice_input">I prefer the following amount over taking the risk displayed on
                    the right.</label>
                <input type="number" id="player_choice_input" name="player_choice" class="form-control" step="0.01"
                    onchange="set_modal_text()" />
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="container">
            <img class="img-fluid mx-auto d-block" src="{% static image_path %}"
                class="rounded border border-white mx-auto d-block" />
        </div>
    </div>
</div>
</div>
</div> -->


<script>
    let choice_type = js_vars.choice_type
    let user_chosen_decision = js_vars.user_chosen_decision

    function set_modal_text() {
        document.getElementById("cond_modal_buttons_true").classList.remove('d-none')
        document.getElementById("cond_modal_buttons_false").classList.add("d-none")
        let input_value = document.getElementById("player_choice_input").value
        document.getElementById("add_text_blog").innerHTML = `
                <div>
                    <p>
                    If ${user_chosen_decision}.pdf shows Option 1 as above, then:
                    <ul>
                        <li>
                            We give you Option 1 if the amount is less than
                                £${input_value}.
                        </li>
                        <li>
                            Otherwise, we give you Option 2.
                        </li>
                    </ul>
                    </p>

                    </div>    `
    }
    // <p>
    // If your ${user_chosen_decision}.pdf shows the Option 1 you just saw, we give you Option 1 if the amount in Option 2 is less than £${input_value}.
    // </p>
    // <ul>
    //     <li>
    //         We give you Option 1 if the amount is less than £${input_value}.
    //     </li>
    //     <li>
    //         Otherwise, we give you Option 2.
    //     </li>
    // </ul>

    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 past_inputs = []
    function update_text_input() {
        cur_val = document.getElementById("player_choice_input").value
        past_inputs.push(parseFloat(cur_val))

        document.getElementById("player_choice_input").classList.add("blink-bg")
        setTimeout(function () { document.getElementById("player_choice_input").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") }
    }

    let min_time_in_modal = js_vars.min_time_in_modal
    function modal_min_time() {

        // 
        let cur_val = document.getElementById("player_choice_input").value

        // let with2Decimals = cur_val.toString().match(/^-?\d+(?:\.\d{0,2})?/)[0]
        // rounded.value = with2Decimals
        let past_vals = document.getElementById("player_choice_past").value
        // past_vals = toString(past_vals)


        // if (past_vals == "") {
        //     past_vals = []
        // } else {
        past_vals = past_vals.replaceAll("[", "").replaceAll("]", "").replaceAll(" ", "").split(",")

        past_vals = past_vals.map(Number)
        past_vals.push(cur_val)
        // DANGER führt beim EmptyString zu einer Liste [0] -> Bei Auswertung beachten
        // }
        // document.getElementById("player_choice_input").value = with2Decimals
        document.getElementById("player_choice_past").value = past_vals

        // 

        // TODO Syntax differs from the other times I enable buttons, because I didn't know better. change all other times for more readable syntax.
        document.getElementById("next_page_modal_btn").disabled = true
        setTimeout(
            function () {
                document.getElementById("next_page_modal_btn").removeAttribute("disabled")
            },
            min_time_in_modal * 1000
        )
    }

</script>

<!-- Button trigger modal -->
<!-- This is now the next_page_btn which deviates from other pages' set-up because it only triggers the modal... -->

<!-- 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">Are you sure? </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">Please choose an amount.</div>
            </div>
            <div class="modal-footer">
                <div id="cond_modal_buttons_true" class="d-none">
                    <button type="button" class="btn btn-secondary" onclick="t_modal()" data-dismiss="modal">Let me
                        think again.</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">
                        Yes, this is what I
                        want.
                    </button>
                </div>
                <div id="cond_modal_buttons_false">
                    <button type="button" class="btn btn-secondary" onclick="t_modal()" data-dismiss="modal">Go
                        Back.</button>
                </div>
            </div>
        </div>
    </div>
</div>


{% endblock %}