{{ extends "global/Page.html" }}

{{ block title }}
Partie {{ current_part }} - Période {{ current_round_number }} sur {{ current_num_rounds }} - Décision
{{ endblock }}

{{ block content }}

<p class="text-info">
    Temps écoulé : <span id="decision_time"></span><br>
    <span id="decision_time_end" class="text-danger" style="visibility: hidden">Merci de prendre votre décision</span>
</p>

<div class="text-end mb-3">
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#modal_content">
        Instructions
    </button>
    {{ if current_part == 2 and subsession.treatment != C.BASELINE and current_round_number > 1 }}
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#modal_content_simul">
        Simulations Période précédente
    </button>
    {{ endif }}
</div>

<div class="card bg-light mb-3">
    <div class="card-body">
        <p>
            {{ if player.groupe_type == C.GROUPE_A }}
            Vous êtes membre du groupe A.
            {{ else }}
            Vous êtes membre du groupe B, et de type {{ player.player_type }}.
            {{ endif }}
       </p>
        <p>
            {{ if player.groupe_type == C.GROUPE_A }}
            Vous pouvez extraire entre 0 et {{C.EXTRACTION_MAX_A}} jetons.
            {{ else }}
                {{ if player.player_type == C.TYPE_B_1 }}
                Vous avez une extraction automatique de {{ C.EXTRACTION_FIXE_B_1 }} jeton{{ if C.EXTRACTION_FIXE_B_1 > 1 }}s{{ endif }},
                et vous êtes libre d'extraire entre
                0 et {{ C.EXTRACTION_MAX_B_1 }} jetons. Le calcul du bénéfice et de votre gain dans le tableau
                Historique/Simulateur intègre votre extraction automatique.
                {{ else }}
                Vous avez une extraction automatique de {{ C.EXTRACTION_FIXE_B_2 }} jeton{{ if C.EXTRACTION_FIXE_B_2 > 1 }}s{{ endif }},
                et vous ne pouvez pas faire d'autre extraction.
                {{ endif }}
            {{ endif }}
        </p>
        <p>
            Le coût du 1<sup>er</sup> jeton pour cette période est de {{ group.cout_first_jeton }}
            ECU{{ if group.cout_first_jeton > 1 }}s{{endif}}.
        </p>

        {{ if current_part == 2 and subsession.treatment == C.EXPERT }}
        <p class="fst-italic fw-bold">
            L'extraction totale des {{ C.PLAYERS_PER_GROUP }} joueurs permettant de maximiser le gain
            collectif pour le reste du jeu est
            de {{ group_expert_extraction|to0 }} jeton{{ if group_expert_extraction > 1 }}s{{ endif }}.
        </p>
        {{ endif }}

        <p>
            <u>Prédiction de l'extraction totale des autres joueurs :</u><br>
            La valeur que vous saisirez dans la cellule "Extraction totale des autres" est considérée comme une
            prédiction. Cette prédiction peut vous rapporter un gain supplémentaire, qui s'ajoutera à votre gain
            issu de votre extraction, selon la formule suivante : <br>
            {{ if player.field_maybe_none('player_type') == TYPE_B_2 }}
            Gain prédiction = {{ PREDICTION_CONST_B_2|cu }} - {{ PREDICTION_TAUX }} € \(\times\) | prédiction - réalisation |
            {{ else }}
            Gain prédiction = {{ PREDICTION_CONST|cu }} - {{ PREDICTION_TAUX }} € \(\times\) | prédiction - réalisation |
            {{ endif }}
            <br>
            où réalisation est le nombre de jetons total effectivement extrait par les autres joueurs et |.| désigne
            la valeur absolue.
        </p>
        {{ if subsession.simulateur }}
        <p>
            <u>Simulateur :</u><br>
            Vous disposez ci-dessous d'un simulateur afin de vous assister dans votre choix d'extraction.
            L'utilisation du simulateur est simple. Il vous suffit de saisir le niveau d'extraction que vous
            prévoyez pour vous-même et le niveau d'extraction que vous prévoyez pour les
            {{C.OTHER_PLAYERS}} autres joueurs. Vous pouvez effectuer autant de simulations que vous le
            souhaitez. Vous avez l'obligation de saisir des valeurs pour la période en cours, car elles constituent
            votre décision d'extraction et votre prédiction pour l'extraction des {{C.OTHER_PLAYERS}} autres
            joueurs. Vous n'avez pas l'obligation de saisir des valeurs pour les périodes futures. Cependant,
            le fait de remplir  les périodes futures peut vous aider à prendre de meilleures décisions d'extraction.<br>
            <em>Vous pouvez remplir autant de périodes que vous le souhaitez, mais en respectant la règle suivante :
            si vous voulez faire une simulation pour la période \(t\), vous devrez aussi faire des simulations pour les
            périodes qui précèdent la période \(t\). Si vous ne le faites pas, le programme informatique ne pourra pas
            effectuer les calculs correspondants.</em>
        </p>
        {{ endif }}
    </div>
</div>

<div class="mb-3">
    <label for="id_extraction" class="form-label">
        Votre extraction pour la période courante {{ if player.field_maybe_none('player_type') == C.TYPE_B_1 }}(y compris l'extraction automatique){{endif}} :
    </label>
    <input type="number" class="form-control mb-3" name="extraction" id="id_extraction" readonly />
</div>

{{ next_button }}

<div class="mt-4 mb-3">
    <div class="card">
        <div class="card-header">
            <h5 class="card-title">Historique / Simulateur</h5>
        </div>
        <div class="card-body">
            <table class="table">
        <thead>
        <tr>
            <th>Période</th>
            <th>Coût 1er jeton</th>
            <th>Votre extraction</th>
            <th>Votre bénéfice</th>
            <th>Extraction totale des autres</th>
            <th>Coût du dernier jeton</th>
            <th>Coût total des jetons</th>
            <th>Coût moyen des jetons</th>
            <th>Gain période</th>
        </tr>
        </thead>
        <tbody>
        {{ for p in histo_previous }}
        <tr>
            <td>{{ p.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_f|to2 }}</td>
        </tr>
        {{ endfor }}
        {{ for i in rounds_simulateur }}
        <tr>
            <td>{{ i }}</td>
            <td id="id_cout_first_jeton_{{i}}">{{ if i == current_round_number }}{{ player.group.cout_first_jeton }}{{ endif }}</td>
            <td><input type="number" min="0" value="" name="simul_{{i}}_indiv" id="id_simul_{{i}}_indiv"
                       oninput="set_computations(this);" {{ if i == current_round_number }}required{{ endif }}></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);" {{ if i == current_round_number }}required{{ endif }}></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>

{{ if subsession.treatment == COMMUNICATION and current_part == 2 and current_round_number in COMMUNICATION_ROUNDS }}
<div class="card bg-light mb-3">
    <div class="card-header">
        <h5>Discussion avec les autres joueurs</h5>
    </div>
    <div class="card-body">
        <p>
            <u>Rappel :</u> <br>
            La discussion est
            libre, mais il est interdit de communiquer des informations permettant de vous identifier ou de vous
            repérer dans la salle, et bien évidemment de proférer des insultes ou des propos malveillants.
        </p>
        {{ chat }}
    </div>
</div>

{{ endif }}

{{ include "jemna/InstructionsModal.html" }}

{{ if current_part == 2 and subsession.treatment != C.BASELINE and current_round_number > 1 }}
{{ include "jemna/HistoSimulModal.html" }}
{{ endif }}

{{ endblock }}

{{ block scripts }}
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="{{ static 'fill_auto.js' }}"></script>
<script src="{{static 'chrono_warning.js' }}"></script>
<script>
    function set_max_input() {
        let input_extraction = forminputs.extraction;
        if (js_vars.groupe_type === js_vars.GROUPE_A)
            input_extraction.max = js_vars.EXTRACTION_MAX_A;
        else {
            if (js_vars.player_type === js_vars.TYPE_B_1)
                input_extraction.max = js_vars.EXTRACTION_MAX_B_1;
            else {
                input_extraction.max = 0;
                input_extraction.value = 0;
            }
        }
        for (let i of js_vars.rounds_simulateur) {
            let simul_indiv = document.querySelector(`input[name=simul_${i}_indiv]`);
            let simul_autres = document.querySelector(`input[name=simul_${i}_autres]`);

            if (js_vars.groupe_type === js_vars.GROUPE_A) {
                simul_indiv.max = js_vars.EXTRACTION_MAX_A;
                simul_autres.max = (js_vars.PLAYERS_PER_GROUP_A - 1 + js_vars.PLAYERS_PER_GROUP_B_1) *
                    js_vars.EXTRACTION_MAX_A + js_vars.PLAYERS_PER_GROUP_B_2 * js_vars.EXTRACTION_FIXE_B_2

            } else {
                if (js_vars.player_type === js_vars.TYPE_B_1) {
                    simul_indiv.max = js_vars.EXTRACTION_MAX_B_1;
                    simul_autres.max = (js_vars.PLAYERS_PER_GROUP_A + js_vars.PLAYERS_PER_GROUP_B_1 - 1) *
                    js_vars.EXTRACTION_MAX_A + js_vars.PLAYERS_PER_GROUP_B_2 * js_vars.EXTRACTION_FIXE_B_2
                } else {
                    simul_indiv.max = js_vars.EXTRACTION_FIXE_B_2;
                    simul_indiv.value = js_vars.EXTRACTION_FIXE_B_2;
                    simul_indiv.setAttribute("readonly", "true");
                    simul_indiv.dispatchEvent(new Event("input"));
                    simul_autres.max = (js_vars.PLAYERS_PER_GROUP_A + js_vars.PLAYERS_PER_GROUP_B_1) *
                    js_vars.EXTRACTION_MAX_A
                }
            }
        }
    }

    function set_computations(the_input) {
        let round_number = parseInt(the_input.name.split("_")[1]);
        let input_indiv = document.querySelector(`input[name=simul_${round_number}_indiv]`);
        let input_autres = document.querySelector(`input[name=simul_${round_number}_autres]`);
        let benefice = document.querySelector(`#id_benefice_${round_number}`);
        let extraction_indiv;

        if (the_input === input_indiv) {
            extraction_indiv = parseInt(the_input.value);
            // si B1 on ajoute l'extraction automatique.
            if (js_vars.player_type === js_vars.TYPE_B_1)
                extraction_indiv += parseInt(js_vars.EXTRACTION_FIXE_B_1);
            if (round_number === js_vars.current_round_number)
                document.querySelector("input[name=extraction]").value = extraction_indiv;
            // calcul bénéfice individuel
            let benef = js_vars.PARAM_A * extraction_indiv - js_vars.PARAM_B * Math.pow(extraction_indiv, 2);
            benefice.innerHTML = String(benef);
            if (input_autres.value !== "")
                set_computations(input_autres);

        } else if (the_input === input_autres) {
            // les cellules
            let cout_last = document.querySelector(`#id_cout_last_jeton_${round_number}`);
            let cout_total = document.querySelector(`#id_cout_total_jeton_${round_number}`);
            let cout_moyen_jeton = document.querySelector(`#id_cout_moyen_jeton_${round_number}`);
            let gain_periode = document.querySelector(`#id_payoff_${round_number}`);
            let round_number_next = parseInt(round_number) + 1;

            // calculs
            let cout_first = parseInt(document.querySelector(`#id_cout_first_jeton_${round_number}`).innerHTML);
            if (input_indiv.value === null)
                return;
            extraction_indiv = parseInt(input_indiv.value);
            // si B1 on ajoute l'extraction automatique.
            if (js_vars.player_type === js_vars.TYPE_B_1)
                extraction_indiv += parseInt(js_vars.EXTRACTION_FIXE_B_1);
            let extraction_totale = parseInt(input_autres.value) + extraction_indiv;
            if (extraction_totale === 0 || extraction_indiv > extraction_totale)
                return
            // let extraction_proportion_cal = extraction_indiv / extraction_totale * 100;
            // extraction_proportion.innerHTML = extraction_proportion_cal.toFixed(2);
            let cout_last_cal = cout_first + extraction_totale - 1;
            cout_last.innerHTML = String(cout_last_cal);
            let cout_total_cal = cout_last_cal * (cout_last_cal + 1) / 2 - (cout_first - 1) * cout_first / 2;
            cout_total.innerHTML = String(cout_total_cal);
            let cout_moyen_cal = cout_total_cal / extraction_totale
            cout_moyen_jeton.innerHTML = cout_moyen_cal.toFixed(2);
            let cout_indiv = extraction_indiv * cout_moyen_cal;
            let gain_periode_cal =  Number(benefice.innerHTML) - cout_indiv;
            gain_periode.innerHTML = gain_periode_cal.toFixed(2);

            // coût 1er jeton round suivant si tableau avec lignes futures
            if (js_vars.simulateur && round_number < js_vars.current_num_rounds) {
                let cout_first_next = document.querySelector(`#id_cout_first_jeton_${round_number_next}`);
                cout_first_next.innerHTML = String(cout_last_cal + 1);
                document.querySelector(`input[name=simul_${round_number_next}_autres]`).dispatchEvent(new Event("input"));
            }
        }
    }
</script>
<script>
    window.onload = function (){
        set_max_input();
        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 }}