{{ block styles }}
<style>
    input[type=number] {
        width: 80px;
    }
</style>
{{ endblock }}

{{ block title }}
{{ Lexicon.part }} {{ if subsession.current_part == 0 }} {{ Lexicon.test }} {{ else }} {{ subsession.current_part }} {{ endif }}
- {{ Lexicon.periode }} {{ subsession.current_round }} - {{ Lexicon.decision }}
{{ endblock }}

{{ block content }}

{# -- CHRONO ET BOUTONS INSTRUCTIONS -------------------------------------------------------------------------------- #}
<div class="row mb-3">
    <div class="col-6">
        <p class="text-info">
            {{ Lexicon.temps_ecoule }} : <span id="decision_time"></span><br>
            <span id="decision_time_end" class="text-danger"
                  style="visibility: hidden">{{ Lexicon.prise_decision }}</span>
        </p>
    </div>
    <div class="col-6 text-end">
        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#modal_content">
            {{ Lexicon.instructions }}
        </button>
    </div>
</div>

{# -- EXPLICATIONS-INFORMATIONS ------------------------------------------------------------------------------------- #}
<div class="card bg-light mb-3">
    <div class="card-body">
        {{ if language == "tn" }}
        {{ include_sibling "" }}
        {{ else }}
        {{ include_sibling "DecisionExplicationFR.html" }}
        {{ endif }}
    </div>
</div>

{# -- TABLEAU HISTORIQUE / DECISION / SIMULATION -------------------------------------------------------------------- #}
<div class="mt-4 mb-3">
    <div class="card">
        <div class="card-body">
            <table class="table">
                <thead>
                <tr>
                    <th>Period</th>
                    <th>Cost 1st token</th>
                    <th>Your extraction</th>
                    <th>Your benefit</th>
                    <th>Total extraction of the others</th>
                    <th>Cost of the last token</th>
                    <th>Total cost of tokens</th>
                    <th>Average cost of tokens</th>
                    <th>Period gain</th>
                </tr>
                </thead>
                <tbody>
                {# -- les periodes précédentes -- #}
                {{ for p in histo_previous }}
                <tr>
                    <td>{{ p.subsession.current_round }}</td>
                    <td>{{ p.group.cout_first_jeton }}</td>
                    <td>{{ p.extraction }}</td>
                    <td>{{ p.benefice|to0 }}</td>
                    <td>{{ p.extraction_autres }}</td>
                    <td>{{ p.group.cout_last_jeton }}</td>
                    <td>{{ p.group.cout_total_jeton }}</td>
                    <td>{{ p.group.cout_moyen_jeton|to2 }}</td>
                    <td>{{ p.payoff_ecu|to2 }}</td>
                </tr>
                {{ endfor }}

                {# -- la période courante (decision) ---------------------------------------------------------------- #}
                <tr {{ if subsession.simulateur }}class="bg-light"{{ endif }}>
                    <td>{{ subsession.current_round }}</td>
                    <td id="id_cout_first_jeton">{{ player.group.cout_first_jeton }}</td>
                    <td>
                        <input type="number" min="0" value="" name="extraction" id="id_extraction"
                               oninput="set_computations(this)" required>
                        {{ formfield_errors "extraction" }}
                    </td>
                    <td id="id_benefice"></td>
                    <td>
                        <input type="number" min="0" value="" name="extraction_autres_estimation"
                               id="id_extraction_autres_estimation"
                               oninput="set_computations(this)" required>
                        {{ formfield_errors "extraction_autres_estimation" }}
                    </td>
                    <td id="id_cout_last_jeton"></td>
                    <td id="id_cout_total_jeton"></td>
                    <td id="id_cout_moyen_jeton"></td>
                    <td id="id_payoff"></td>
                </tr>
                {# -- les simulation si simulateur ------------------------------------------------------------------ #}
                {{ for i in rounds_simulateur }}
                <tr>
                    <td>{{ i }}</td>
                    <td id="id_cout_first_jeton_{{i}}"></td>
                    <td>
                        <input type="number" min="0" value="" name="simul_{{i}}_indiv" id="id_simul_{{i}}_indiv"
                               oninput="set_computations(this);">
                    </td>
                    <td id="id_benefice_{{i}}"></td>
                    <td>
                        <input type="number" min="0" value="" name="simul_{{i}}_autres" id="id_simul_{{i}}_autres"
                               oninput="set_computations(this);">
                    </td>
                    <td id="id_cout_last_jeton_{{i}}"></td>
                    <td id="id_cout_total_jeton_{{i}}"></td>
                    <td id="id_cout_moyen_jeton_{{i}}"></td>
                    <td id="id_payoff_{{i}}"></td>
                </tr>
                {{ endfor }}
                </tbody>
            </table>
        </div>
    </div>
</div>


{# -- COMMUNICATION ------------------------------------------------------------------------------------------------- #}
{{ if subsession.treatment == C.COMMUNICATION and subsession.current_part == 2 and subsession.current_round in C.COMMUNICATION_ROUNDS }}
<div class="card mb-3">
    <div class="card-header">
        <h5>{{ Lexicon.chat_title }}</h5>
    </div>
    <div class="card-body">
        <p>
            {{ Lexicon.chat_explication }}
        </p>
        {{ chat }}
    </div>
</div>
{{ endif }}

<button class="btn btn-primary otree-btn-next">{{ Lexicon.next_button }}</button>

{{ include_sibling "InstructionsModal.html" }}

{{ endblock }}

{{ block scripts }}
<script src="{{ static 'chrono_warning.js' }}"></script>
<script src="{{static 'fill_auto.js' }}"></script>
<script>
    function get_benefice(extraction) {
        return js_vars.PARAM_A * extraction - js_vars.PARAM_B * Math.pow(extraction, 2);
    }

    function get_couts(extraction_totale, cout_first) {
        let cout_last = cout_first + extraction_totale - 1;
        let cout_total = cout_last * (cout_last + 1) / 2 - (cout_first - 1) * cout_first / 2;
        let cout_moyen = cout_total / extraction_totale;
        return [cout_last, cout_total, cout_moyen]
    }

    function set_computations(the_input) {
        // variables
        let round_number;
        let extraction, extraction_autres, extraction_totale;
        let cout_first;

        // la période en cours (décisions) -----------------------------------------------------------------------------
        if (the_input.name === "extraction" || the_input.name === "extraction_autres_estimation") {
            round_number = js_vars.current_round;
            extraction = parseInt(document.querySelector("#id_extraction").value);
            extraction_autres = parseInt(document.querySelector("#id_extraction_autres_estimation").value);
            if (!isNaN(extraction)) {
                document.querySelector("#id_benefice").innerHTML = get_benefice(extraction).toFixed(0);
                if (!isNaN(extraction_autres)) {
                    extraction_totale = extraction + extraction_autres;
                    cout_first = parseInt(document.querySelector("#id_cout_first_jeton").innerHTML);
                    let [cout_last, cout_total, cout_moyen] = get_couts(extraction_totale, cout_first);
                    document.querySelector("#id_cout_last_jeton").innerHTML = cout_last.toFixed(0);
                    document.querySelector("#id_cout_total_jeton").innerHTML = cout_total.toFixed(0);
                    document.querySelector("#id_cout_moyen_jeton").innerHTML = cout_moyen.toFixed(2);
                    document.querySelector("#id_payoff").innerHTML = (get_benefice(extraction) - extraction * cout_moyen).toFixed(2);
                    if (js_vars.simulateur && round_number < js_vars.NUM_ROUNDS_PHASE_2)
                        document.querySelector(`#id_cout_first_jeton_${round_number + 1}`).innerHTML = (cout_last + 1).toFixed(0);
                }
            }
        } else {  // les simulations -------------------------------------------------------------------------------------
            round_number = parseInt(the_input.name.split("_")[1]);
            extraction = parseInt(document.querySelector(`input[name=simul_${round_number}_indiv]`).value);
            extraction_autres = parseInt(document.querySelector(`input[name=simul_${round_number}_autres]`).value);
            if (!isNaN(extraction)) {
                document.querySelector(`#id_benefice_${round_number}`).innerHTML = get_benefice(extraction).toFixed(0);
                cout_first = parseInt(document.querySelector(`#id_cout_first_jeton_${round_number}`).innerHTML);
                if (!isNaN(cout_first) && !isNaN(extraction_autres)) {
                    extraction_totale = extraction + extraction_autres;
                    let [cout_last, cout_total, cout_moyen] = get_couts(extraction_totale, cout_first);
                    document.querySelector(`#id_cout_last_jeton_${round_number}`).innerHTML = cout_last.toFixed(0);
                    document.querySelector(`#id_cout_total_jeton_${round_number}`).innerHTML = cout_total.toFixed(0);
                    document.querySelector(`#id_cout_moyen_jeton_${round_number}`).innerHTML = cout_moyen.toFixed(2);
                    document.querySelector(`#id_payoff_${round_number}`).innerHTML = (get_benefice(extraction) - extraction * cout_moyen).toFixed(2);
                    if (round_number < js_vars.NUM_ROUNDS_PHASE_2)
                        document.querySelector(`#id_cout_first_jeton_${round_number + 1}`).innerHTML = (cout_last + 1).toFixed(0);
                }
            }
        }
    }

    window.onload = function () {
        start_chrono(
            document.querySelector("#decision_time"), document.querySelector("#decision_time_end"),
            js_vars.DECISION_TIME
        )

        // désactive le chat
        if (document.querySelector(".otree-chat__input") !== null) {
            setTimeout(() => {
                document.querySelector(".otree-chat__input").disabled = true;
                document.querySelector(".otree-chat__btn-send").disabled = true;
            }, js_vars.COMMUNICATION_TIME * 1000);
        }

        if (js_vars.fill_auto)
            fill_auto();
    }
</script>
{{ endblock }}