{{ extends 'global/Page.html' }}
{{ block title }}Your payment{{ endblock }}

{{ block styles }}
<style>
        .otree-btn-next {
            display: none;
        }

        #task-selected-container {
            display: none;
        }

        #pay_option_b_container {
            display: none;
        }

        .die {
            width: 80px;
            background-color: #dcdcdc;
            border-radius: 5px;
            padding: 1rem;
            cursor: pointer;
        }



</style>
{{ endblock }}

{{ block scripts }}
<script>
        window.onload = () => {
            const taskSelectBtn = document.getElementById('task-select-btn'),
                taskSelectedContainer = document.getElementById('task-selected-container'),
                nextBtn = document.querySelector('.otree-btn-next'),
                diceDrawResultArea = document.getElementById('dice-draw-result-text');

            function displayTaskSelected(task_selected) {
                taskSelectedContainer.style.display = 'block';
                taskSelectBtn.disabled = true;
                if (
                    js_vars.task_to_pay === 'ambiguity' &&
                    !js_vars.pay_option_b ||
                    js_vars.task_to_pay === 'choice'
                    ) {
                    nextBtn.style.display = 'block';
                } else {
                    document.getElementById('pay_option_b_container').style.display = 'block';
                }
            }

            if (js_vars.task_selected) {
                displayTaskSelected(js_vars.task_selected);
            }

            taskSelectBtn.addEventListener('click', function () {
                liveSend('task_selection');
            })

            window.liveRecv = (data) => {
                displayTaskSelected(data);
            }

            if (js_vars.task_to_pay === 'ambiguity') {
                let radioAmbiguity = $('input[type=radio]');

                radioAmbiguity.on('change', function () {
                    let clickedRadio = this,
                        afterClickedRadio = false;

                    let radios = document.querySelectorAll('input[type=radio]');
                    for (let i = 0; i < radios.length; ++i) {
                        let radio = radios[i];

                        if (radio === clickedRadio) {
                            afterClickedRadio = true;
                            radio.checked = true;
                            continue;
                        }
                        if (!afterClickedRadio && radio.value === 'left') {
                            radio.checked = true;
                        }
                        if (afterClickedRadio && clickedRadio.value === 'right' && radio.value === 'right') {
                            radio.checked = true;
                        }
                    }
                });

                if (js_vars.switch > js_vars.num_choices) {
                    $('input[type=radio][name="choice_' + js_vars.num_choices + '"][value="left"]').click();
                } else {
                    $('input[type=radio][name="choice_' + js_vars.switch + '"][value="right"]').click();
                }

                radioAmbiguity.prop('disabled', true);

                if (js_vars.ambiguity_draw.length == 1) {
                    js_vars.ambiguity_draw = '0' + js_vars.ambiguity_draw
                }

                if (js_vars.pay_option_b) {
                    let dieClicked = 0;
                    $('#tens-die').on('click', function() {
                        $(this).html(js_vars.ambiguity_draw[0]).css({cursor: 'default', fontSize: '24px'});
                        ++dieClicked;
                        if (dieClicked === 2) {
                            nextBtn.style.display = 'block';
                            diceDrawResultArea.hidden = false;
                        }
                    })
                    $('#ones-die').on('click', function() {
                        $(this).html(js_vars.ambiguity_draw[1]).css({cursor: 'default', fontSize: '24px'});
                        ++dieClicked;
                        if (dieClicked === 2) {
                            nextBtn.style.display = 'block';
                            diceDrawResultArea.hidden = false;
                        }
                    })
                }

            } else {
                $(`input[type="radio"][name="choice"][value=${js_vars.choice}]`).prop('checked', true);
                $(`input[type="radio"][name="choice"][value!=${js_vars.choice}]`).prop('disabled', true);
            }
        }



</script>
{{ endblock }}

{{ block content }}
<p>
    First, you will randomly select between <b>Task 1</b> and <b>Task 2</b> to determine your final payment.
    The following button, "Selection of the Task" is designed for this purpose.
    By clicking the button, one of the Tasks is randomly selected.
</p>

<p class="text-center my-5">
    <button type="button" id="task-select-btn" class="btn btn-primary">Selection of the Task</button>
</p>

<div id="task-selected-container">
    {{ if participant.task_to_pay == 'ambiguity' }}
    <table class="mb-4" align="center" id="customers">

        <col width="400">
        <col width="20">
        <col width="20">
        <col width="300">

        <thead>
        <tr align="center">
            <th style="background-color: lightgrey; color: black; border: 1px solid lightgrey">
                Option A <br>
            </th>
            <th style="background-color: lightgrey; color: black; border: 1px solid lightgrey" colspan="2">
                <table align="center" width="100%">
                    <tr>
                        <td colspan="2" style="border: 1px solid lightgrey;">
                        </td>
                    </tr>
                    <tr>
                        <td style="background-color: lightgrey; border: 1px solid lightgrey;">

                        </td>
                        <td style="background-color: lightgrey; border: 1px solid lightgrey;">

                        </td>
                    </tr>
                </table>
            </th>
            <th style="background-color: lightgrey; color: black; border: 1px solid lightgrey">
                Option B<br>
            </th>
        </tr>
        </thead>
        <thead>
        <tr align="center">
            <th style="background-color: lightgrey; color: black; border: 1px solid lightgrey">
                You gain €10 if the <span style="color:Indigo"> {{ algorithm_statement }} analyst's</span> accuracy rate
                falls within the range of <span style="color:Green">{{ prob_range }}</span>; €0 otherwise
            </th>
            <th style="background-color: lightgrey; color: black; border: 1px solid lightgrey" colspan="2">
                <table align="center" width="100%">
                    <tr>
                        <td colspan="2" style="border: 1px solid lightgrey;">
                        </td>
                    </tr>
                    <tr>
                        <td style="background-color: lightgrey; border: 1px solid lightgrey;">
                            <br><br>A
                        </td>
                        <td style="background-color: lightgrey; border: 1px solid lightgrey;">
                            <br><br>B
                        </td>
                    </tr>
                </table>
            </th>
            <th style="background-color: lightgrey; color: black; border: 1px solid lightgrey">
                You gain €10 with the following probability; €0 otherwise
            </th>
        </tr>
        </thead>
        <tbody>
        {{ for p in ambiguity_percentages }}
        <tr>
            {{ if forloop.counter == 1 }}
            <!-- Option A -->
            <td align="center" rowspan="20">

                <img src="{% static event %}" width="400px"/>


            </td>

            {{ endif }}

            <!-- radio select form fields -->
            {{ if forloop.counter == participant.ambiguity_decision_to_pay }}
            <td align="center" style="background-color: #ff0000;">
                <input type="radio" name="choice_{{ forloop.counter }}" value="left" data-num="{{ forloop.counter }}">
            </td>
            <td align="center" style="background-color: #ff0000;">
                <input type="radio" name="choice_{{ forloop.counter }}" value="right" data-num="{{ forloop.counter }}">
            </td>
            <!-- Option B -->
            <td align="center" style="background-color: #ff0000;">
                <b>{{ p }}</b>
            </td>
            {{ else }}
            <td align="center">
                <input type="radio" name="choice_{{ forloop.counter }}" value="left" data-num="{{ forloop.counter }}">
            </td>
            <td align="center">
                <input type="radio" name="choice_{{ forloop.counter }}" value="right" data-num="{{ forloop.counter }}">
            </td>
            <!-- Option B -->
            <td align="center">
                <b>{{ p }}</b>
            </td>
            {{ endif }}
        </tr>
        {{ endfor }}
        </tbody>
    </table>
    <br>

    <p>
        {{ if participant.first_task == 'ambiguity' }}
        In this case, the question in <b>Task 1</b> is randomly selected. Your choices are presented in the figure above.
        The row highlighted with red is randomly chosen to determine your payment.<br>
        Because in the highlighted choice, you choose
        {{ if pay_option_b }}
        <b> Option B</b>, your payment is determined by the result of the two random draws below.<br>
        Please click the two draws separately to find out the result.

    <div id="pay_option_b_container" class="mt-4 d-flex justify-content-center">
        <div id="tens-die" class="mx-2 text-center die">
            Click Here:
            Tens<br>
            (0-9)<br>
        </div>
        <div id="ones-die" class="mx-2 text-center die">
            Click Here:
            Ones<br>
            (0-9)
        </div>
    </div>
    <br><br>
    <p id="dice-draw-result-text" hidden=>
        The number of the random draws is <b>{{ participant.ambiguity_draw }}</b>, therefore, your final payment is <b>
        {{ participant.payoff }}</b> (plus the guaranteed participation fee of €12).
    </p>
    {{ else }}
    <b> Option A</b>, your payment is determined by whether the <b>{{ algorithm_statement }} analyst’s </b> accuracy
    rate falls within the range of <b>{{ prob_range }}</b>.<br>
    According to the diagram below,
    <br>
    <table class="table table-striped text-center">
        <thead>
        <tr>
            {{ for colname in C.ACCURACY_TABLE_HEADER }}
            <th style="border-bottom: 1px solid #ff0000; font-weight: bold">{{ colname }}</th>
            {{ endfor }}
        </tr>
        </thead>
        <tbody>

        <tr style="border-bottom: 1px solid #ff0000; font-weight: bold">
            <td>
                Total accurate predictions
            </td>
            <td>{{ human_sum_accurate }}</td>
            <td>{{ ai_sum_accurate }}</td>
        </tr>

        <tr style="border-bottom: 1px solid #ff0000; font-weight: bold">
            <td>
                Accuracy rate
            </td>
            <td>{{ human_rate }}</td>
            <td>{{ ai_rate }}</td>
        </tr>
        </tbody>
    </table>
    <br>
    therefore, your final payment is <b>{{ participant.payoff }}</b> (plus the guaranteed participation fee of €12).
    </p>
    {{ endif }}
    {{ else }}
    In this case, the question in <b>Task 2</b> is randomly selected. Your choices are presented in the figure above.
    The row highlighted with red is randomly chosen to determine your payment.<br>
    Because in the highlighted row of choice, you choose
    {{ if pay_option_b }}
    <b> Option B</b>, your payment is determined by the result of the two random draws below.<br>
    Please click the two draws separately to find out the result.
    <div id="pay_option_b_container" class="mt-4 d-flex justify-content-center">
        <div id="tens-die" class="mx-2 text-center die">
            Click Here:
            Tens<br>
            (0-9)<br>
        </div>
        <div id="ones-die" class="mx-2 text-center die">
            Click Here:
            Ones<br>
            (0-9)
        </div>
    </div>
    <br><br>
    <p id="dice-draw-result-text" hidden=>
        The number of the random draws is <b> {{ participant.ambiguity_draw }} </b>,
        therefore, your final payment is <b> {{ participant.payoff }}</b> (plus the guaranteed participation fee of
        €12).
    </p>
    {{ else }}
    <b> Option A </b>, your payment is determined by whether the <b>{{ algorithm_statement }} analyst’s</b> accuracy
    rate falls within the range of <b>{{ prob_range }}</b>.<br>
    According to the diagram below,
    <br>
    <table class="table table-striped text-center">
        <thead>
        <tr>
            {{ for colname in C.ACCURACY_TABLE_HEADER }}
            <th style="border-bottom: 1px solid #ff0000; font-weight: bold">{{ colname }}</th>
            {{ endfor }}
        </tr>
        </thead>
        <tbody>

        <tr style="border-bottom: 1px solid #ff0000; font-weight: bold">
            <td>
                Total accurate predictions
            </td>
            <td>{{ human_sum_accurate }}</td>
            <td>{{ ai_sum_accurate }}</td>
        </tr>

        <tr style="border-bottom: 1px solid #ff0000; font-weight: bold">
            <td>
                Accuracy rate
            </td>
            <td>{{ human_rate }}</td>
            <td>{{ ai_rate }}</td>
        </tr>
        </tbody>
    </table>
    <br>
    therefore, your final payment is <b> {{ participant.payoff }} </b> (plus the guaranteed participation fee of €12).
    </p>
    {{ endif }}
    {{ endif }}

    {{ else }}
    {{ if participant.first_task == 'choice' }}
    In this case, <b>Task 1</b> is randomly selected for your payment. Your choice is presented in the figure below.

    </b>
    <div class="mb-3 _formfield">
        <label class="col-form-label" for="id_choice"></label>
        <div class="controls">
            <div id="id_choice" required="">
                <div class="form-check">
                    <input class="form-check-input" type="radio" id="id_choice-0" name="choice" required="" value="1">
                    <label for="id_choice-0">
                        Option A: Predictions made by the human analyst.
                        The human analyst is an equity analyst employed by a brokerage house
                        or investment bank.
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" id="id_choice-1" name="choice" required="" value="0">
                    <label for="id_choice-1">
                        Option B: Predictions made by the algorithmic analyst.
                        The algorithmic analyst is a machine learning algorithm that is trained
                        by historical data to predict the stock prices.
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" id="id_choice-2" name="choice" required="" value="2">
                    <label for="id_choice-2">
                        Option C: I am indifferent between the two types of analyst.
                    </label>
                </div>
            </div>
        </div>
    </div>
    {{ else }}
    In this case, <b>Task 2</b> is randomly selected for your payment. Your choice is presented in the figure below.
    </b>
    <div class="mb-3 _formfield">
        <label class="col-form-label" for="id_choice"></label>
        <div class="controls">
            <div id="id_choice" required="">
                <div class="form-check">
                    <input class="form-check-input" type="radio" id="id_choice-0" name="choice" required="" value="0">
                    <label for="id_choice-0">
                        Option A: Predictions made by the algorithmic analyst.
                        The algorithmic analyst is a machine learning algorithm that is trained
                        by historical data to predict the stock prices.
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" id="id_choice-1" name="choice" required="" value="1">
                    <label for="id_choice-1">
                        Option B: Predictions made by the human analyst.
                        The human analyst is an equity analyst employed by a brokerage house
                        or investment bank.
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" id="id_choice-2" name="choice" required="" value="2">
                    <label for="id_choice-2">
                        Option C: I am indifferent between the two types of analyst.
                    </label>
                </div>
            </div>
        </div>
    </div>
    {{ endif }}
    <br>
According to the diagram below,<br><br>

        <table class="table table-striped text-center">
        <thead>
        <tr>
            {{ for colname in C.ACCURACY_TABLE_HEADER }}
            <th style="border-bottom: 1px solid #ff0000; font-weight: bold">{{ colname }}</th>
            {{ endfor }}
        </tr>
        </thead>
        <tbody>

        <tr style="border-bottom: 1px solid #ff0000; font-weight: bold">
            <td>
                Total accurate predictions
            </td>
            <td>{{ human_sum_accurate }}</td>
            <td>{{ ai_sum_accurate }}</td>
        </tr>

        <tr style="border-bottom: 1px solid #ff0000; font-weight: bold">
            <td>
                Accuracy rate
            </td>
            <td>{{ human_rate }}</td>
            <td>{{ ai_rate }}</td>
        </tr>
        </tbody>
    </table>
    <br>
    therefore, your final payment is <b>{{ participant.payoff }}</b> (plus the guaranteed participation fee of €12), since you choose to rely your payment on the number
    of accurate predictions by the type of analyst.
    {{ endif }}
</div>
<br>
<br>
<br>
<p class="text-center">
    <button class="otree-btn-next btn btn-secondary">
        Click to proceed
    </button>
</p>

{{ endblock }}