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

{% block title %}
Your bonus payment
{% endblock %}

{% block content %}
<script>
    window.onload = function () {
        if (js_vars.user_chosen_decision != "None") {
            deactivate_btns(js_vars.user_chosen_decision)
        }
    }

    function deactivate_btns(cur_id) {
        for (let i = 1; i <= 150; i++) {
            if (cur_id !== "BonusFile" + i)
                document.getElementById("BonusFile" + i).classList.add("disabled")
        }
        document.getElementById("download_bool").value = "True"
        liveSend(cur_id)
    }


    function liveRecv(data) {
        document.getElementById("disappear_text").className = ("d-none")
        document.getElementById("disappear_text_2").className = ("d-none")
        document.getElementById("appear_text").className = "d-block"
        document.getElementById("rcv_data").innerHTML = data
        document.getElementById("rcv_data_2").innerHTML = data
        console.log("succesfully uploaded " + data)
    }
</script>

<div class="row"></div>
<div class="row my-3 bg-light px-3 py-3 rounded border">
    <div class="col">
        <div>
            {{ formfield_errors "download_bool" }}
            <input type="hidden" id="download_bool" name="download_bool" value="False"></input>

            <div>
                <p>
                    <strong>
                        Your bonus payment comes from a password-protected pdf-file – your “bonus file.”
                    </strong>
                    You will receive the password at the end of the experiment.

                </p>
                <p>
                    Each bonus file
                    contains two options (amounts of money that may depend on chance) and an endowment (e.g., £5).
                    You will get <strong> one of the two options,</strong>
                    plus the endowment, as your bonus. The endowment ensures that your bonus is always positive (even
                    though the options may yield negative amounts of money).
                </p>
                <p>
                    During the experiment, for several possible contents of your bonus file, you will give us
                    instructions about which option you want. We will give you that option at the end of the experiment.
                </p>
                <p id="disappear_text">
                    <strong>
                        Please download your bonus file by clicking one of the buttons below.
                    </strong>
                    Please save the file at a convenient location.
                </p>
                <p>
                <div class="text-center">
                    {% for dwn_id, dwn_link in download_links %}
                    <a href="{{ static dwn_link }}" id="{{ dwn_id }}" name="download_btn" class="btn btn-primary mb-1 mr-1 px-1"
                        onclick="deactivate_btns(this.id);" download style="width: 130px;" target="_blank">
                        <span>
                            Download
                            <br>
                            <i>
                                {{dwn_id}}.pdf
                            </i>
                        </span>
                    </a>
                    {% endfor %}
                </div>
                </p>
                <p id="disappear_text_2">
                    <strong>
                        Please download your bonus file by clicking a button.
                    </strong>
                    Please save the file at a convenient location.
                </p>
                <div id="appear_text" class="d-none">
                    <p class="alert alert-success">
                        <strong>
                            Your bonus file is <span id="rcv_data"></span>.pdf.
                        </strong>
                        Your bonus payment is determined by one of the two options in
                        <span id="rcv_data_2"></span>.pdf.

                    </p>
                    <button id="next_page_btn" class="btn btn-primary">OK. Can you tell me more about the two
                        options?
                </div>
            </div>
        </div>
        <button id="hidden_submit" style="visibility: hidden;"></button>
    </div>

    <script>
        let min_time_on_page = js_vars.min_time_on_page
        let min_time_before_dwnld = js_vars.min_time_before_dwnld

        // Disable Download Buttons
        $( document ).ready(function() {
        // Disable Download Buttons in Page is Ready
            var all = document.getElementsByName("download_btn");
            for (var i = 0; i < all.length; i++) {
                all[i].classList.add("disabled")   
            }
        });

        // 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
        );

        // Enable Download Buttons
        setTimeout(
            function () {
                var all = document.getElementsByName("download_btn");
                for (var i = 0; i < all.length; i++) {
                    all[i].classList.remove("disabled")   
                }
            },
            min_time_before_dwnld * 1000
        );
    </script>
    {% endblock %}