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

{% block title %}
    Production Decision for Market B
{% endblock %}

{% block styles %}
    {% include C.table_style_template %}
    {% include C.common_style_template %}
{% endblock styles %}

{% block content %}

    {{ include C.fixTop_template }}
    {{ include "experiment_baseline/background_info.html" }}

    <div class="text_border">
        <h5> &nbsp&nbsp Tradeoff you face:</h5>
        <ul>
            <li><b>Production cost in market B.</b> Producing \(x_{Br}+x_{Bg}\) units of Good B incurs a cost of
                \(x_{Br}+x_{Bg}\) points.
            </li>
            <li><b>Consumption benefit in next market A if the sequence continues. </b>You can use your sale revenue on
                market B, \(P_{Br}x_{Br}\)
                red tokens and \(P_{Bg}x_{Bg}\) green tokens, to buy up to
                \(\frac{P_{Br}x_{Br}}{P_{Ar}}+\frac{P_{Bg}x_{Bg}}{P_{Ag}}\) additional units of good A in next market A.
                You earn points
                from consuming good A as shown in Table A in the last column.
            </li>
        </ul>

        <h5> &nbsp&nbsp Decision:</h5>
        <ul>
            <li>{{ formfield 'Produce2Red' }}</li>
            <li>{{ formfield 'Produce2Green'}}</li>
        </ul>
        <p>&nbsp&nbsp (enter 0 or a positive number in the two boxes; <span id="produce_error">sum of the two amounts should be less than 20</span>)
        </p>
        <p>&nbsp&nbsp (up to 2 decimal points are allowed)</p>
        <div class="btn-container">
            <button class="otree-btn-next btn btn-primary" style="width: 80px;" onclick="return producercalc()">OK
            </button>
        </div>
    </div>

    {#<h2>Instructions</h2>#}
    {#{% include Constants.instructions_constant_template %}#}
{% endblock %}


{% block app_scripts %}
    <script>
        setTimeout(
            function () {
                var r = confirm("Time has run out. Please make your decision.");
                if (r == true) {
                } else {
                }
            },
            js_vars.timeout
        );

    </script>

    <script type="text/javascript" id="MathJax-script" async
            src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
    </script>
    <script>
        let producerredInput = document.getElementById("id_Produce2Red");
        let producergreenInput = document.getElementById("id_Produce2Green");
        let message = document.getElementById("produce_error")

        producerredInput.oninput = function () {
            producercalc()
        };
        producergreenInput.oninput = function () {
            producercalc()
        };

        function producercalc() {
            let redproduce = parseFloat(producerredInput.value);
            let greenproduce = parseFloat(producergreenInput.value);
            let producemax = parseFloat(producerredInput.max);

            if (redproduce + greenproduce > producemax  || redproduce > producemax || greenproduce > producemax) {
                message.style.background = "hsla(0,100%,50%,0.3)";
                return false;
            } else {
                message.style.background = "hsla(0,100%,50%,0)";
                return true;
            }
        }

        document.getElementById("stage1").style.opacity = "0.3";
        document.getElementById("chart1").style.opacity = "0.5"
    </script>
{% endblock %}