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

{% block title %}Risk Preferences{% endblock %}

{% block content %}
<style>
    .container { margin: 0 auto; padding: 2rem; text-align: center; }
    .icon { font-size: 100px; line-height: 1; margin: 0.5rem 0; }
    .question { font-size: 14pt; margin-top: 1.5rem; }
    .mpldiv {
        height: 210px; width: 540px; border: 2px solid grey;
        border-radius: 5px; margin: 0.5rem auto 0; text-align: center;
    }
    table.mpl { border-collapse: collapse; width: 100%; table-layout: fixed; }
    thead.mpl { display: block; width: 100%; padding-right: 15px; box-sizing: border-box; }
    tbody.mpl { display: block; width: 100%; height: 185px; overflow-y: scroll; }
    thead.mpl tr, tbody.mpl tr { display: table; width: 100%; table-layout: fixed; }
    th.mpl:nth-child(1), td.mplleft { width: 11%; }
    th.mpl:nth-child(2), td.mpl:nth-child(2) { width: 28%; }
    th.mplor, td.mplor { width: 6%; }
    th.mpl:nth-child(4), td.mpl:nth-child(4) { width: 55%; }
    th.mpl { padding: 2px; font-size: 10pt; font-weight: bold; color: purple; border-bottom: 2px solid black; }
    th.mplor { padding: 2px; font-size: 8pt; font-weight: bold; text-align: center; border-bottom: 2px solid black; }
    td.mplleft { padding: 2px; font-size: 10pt; font-weight: bold; color: purple; border-bottom: 1px solid black; }
    td.mpl { padding: 2px; font-size: 9pt; border-bottom: 1px solid black; }
    td.mplor { padding: 2px; font-size: 6pt; font-weight: bold; text-align: center; vertical-align: bottom; border-bottom: 1px solid black; }
    tr.mpl:nth-child(even) { background-color: #f2f2f2; }
    .mplprob { font-size: 10pt; font-weight: bold; }
    .mplradio { background-color: #ffffff; }
    dialog {
        border: none; border-radius: 8px; padding: 2em;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3); max-width: 560px; width: 90%;
    }
    dialog::backdrop { background: rgba(0,0,0,0.5); }
</style>

<div class="container">

    <div class="icon">&#x1F3B2;</div>

    <div class="question">
        <div>
            Below is a list of choices between getting <span class="sureAmtDisplay"></span>
            for sure (<b>Option A</b>) and getting <span class="highAmtDisplay"></span>
            with some probability (<b>Option B</b>).
        </div>
        <div style="margin-top: 0.5rem;">
            Your job is to make a choice on every row. Notice that Option B becomes more and
            more attractive as the probability increases.
        </div>
        <div style="margin-top: 0.5rem;">
            At what probability would you switch from picking Option A to Option B?
        </div>
        <div style="margin-top: 0.5rem;">
            I would switch at
            <input type="text" id="q0_main" name="switch_prob" size="3" value=""
                   onchange="updatempl('main');" tabindex="1" style="font-size: 16px;">%<br>
            <span style="font-size: 10pt;">(Please enter a number between
                <span id="minProbDisplay"></span> and <span id="maxProbDisplay"></span>.)</span>
        </div>
        <div style="margin-top: 0.5rem; font-size: 11pt;">
            (<b>Important</b>: it's in your best interest to report truthfully. If you want an explanation,
            <a href="#" onclick="document.getElementById('mplDialog').showModal(); return false;">click here</a>)
        </div>
    </div>
    {% formfield_errors 'switch_prob' %}

    <!-- Main MPL (shown directly on page) -->
    <div class="mpldiv" id="main_mpldiv">
        <table class="mpl">
            <thead class="mpl">
                <tr class="mpl">
                    <th class="mpl">Pick:</th>
                    <th class="mpl">Option A</th>
                    <th class="mplor">&nbsp;&nbsp;OR</th>
                    <th class="mpl">Option B</th>
                </tr>
            </thead>
            <tbody class="mpl" id="main_mpltbody"></tbody>
        </table>
    </div>

    <div style="margin-top: 1.5rem;">{% next_button %}</div>

</div>


<dialog id="mplDialog">
    <h2>How You Would Be Paid</h2>
    <p>
        If this question were chosen for payment, here's how you would be paid.
    </p>
    <p>
        The list on the page gives you a choice between <span class="sureAmtDisplay"></span>
        for sure (Option A) and a risky lottery (Option B) in every row. The probability you
        type in tells us where you "switch" from choosing Option A to choosing Option B.
        Then one row will be chosen at random and you will be paid according to your choice
        in that row.
    </p>
    <p>
        Notice that the way to get what you truly prefer on every row is to type in the
        probability that really would make you indifferent between the two options. If you lie
        about it, that will change your choices on some rows to be something you like less.
    </p>
    <p>
        Try it out below to see how it works. Type in a probability and watch the list update.
        (This is just an example; it won't affect your actual decision.)
    </p>

    <div class="question">
        At what probability would you switch from Option A to Option B?
        I would switch at
        <input type="text" id="q0_ex" name="q0_ex" size="3" value=""
               onchange="updatempl('ex');" style="font-size: 16px;">%
    </div>

    <!-- Demo MPL inside dialog -->
    <div class="mpldiv" id="ex_mpldiv">
        <table class="mpl">
            <thead class="mpl">
                <tr class="mpl">
                    <th class="mpl">Pick:</th>
                    <th class="mpl">Option A</th>
                    <th class="mplor">&nbsp;&nbsp;OR</th>
                    <th class="mpl">Option B</th>
                </tr>
            </thead>
            <tbody class="mpl" id="ex_mpltbody"></tbody>
        </table>
    </div>

    <p style="margin-top: 1.5rem;">
        When you're ready, close this pop-up to go back and make your actual decision.
    </p>
    <div style="text-align: right;">
        <button type="button" onclick="document.getElementById('mplDialog').close()">Close this Pop-Up</button>
    </div>
</dialog>


<script>
    var SURE_AMOUNT  = js_vars.SURE_AMOUNT;
    var LOTTERY_HIGH = js_vars.LOTTERY_HIGH;
    var LOTTERY_LOW  = js_vars.LOTTERY_LOW;
    var MIN_PROB     = js_vars.MIN_PROB;
    var MAX_PROB     = js_vars.MAX_PROB;
    var PROB_STEP    = js_vars.PROB_STEP;
    var NUM_ROWS     = Math.round((MAX_PROB - MIN_PROB) / PROB_STEP) + 1;

    function fmtDollars(x) {
        return (x === Math.floor(x)) ? '$' + x : '$' + x.toFixed(2);
    }

    function buildMPL(prefix) {
        var tbody = document.getElementById(prefix + '_mpltbody');
        var sure  = fmtDollars(SURE_AMOUNT);
        var high  = fmtDollars(LOTTERY_HIGH);
        var low   = fmtDollars(LOTTERY_LOW);
        var rows  = [];
        for (var i = 0; i < NUM_ROWS; i++) {
            var prob     = MIN_PROB + i * PROB_STEP;
            var aValue   = prob;
            var bValue   = prob - PROB_STEP;
            var rowId    = prefix + '_row_' + i;
            var aInputId = prefix + '_a_' + i;
            var bInputId = prefix + '_b_' + i;
            var tdAId    = prefix + '_td_a_' + i;
            var tdBId    = prefix + '_td_b_' + i;
            rows.push(
                '<tr class="mpl" id="' + rowId + '">' +
                    '<td class="mplleft">' + prob + '%:</td>' +
                    '<td class="mpl" id="' + tdAId + '">' +
                        '<input type="radio" class="mplradio" id="' + aInputId + '" name="' + rowId + '" value="a" ' +
                            'onclick="updateq0(\'' + prefix + '\', ' + aValue + ');updatempl(\'' + prefix + '\', 1);">' +
                        '<label for="' + aInputId + '">' + sure + ' for sure</label>' +
                    '</td>' +
                    '<td class="mplor">&nbsp;&nbsp;OR</td>' +
                    '<td class="mpl" id="' + tdBId + '">' +
                        '<input type="radio" class="mplradio" id="' + bInputId + '" name="' + rowId + '" value="b" ' +
                            'onclick="updateq0(\'' + prefix + '\', ' + bValue + ');updatempl(\'' + prefix + '\', 1);">' +
                        '<label for="' + bInputId + '"><span class="mplprob">' + prob + '%</span> chance of ' +
                            high + ' (' + low + ' otherwise)</label>' +
                    '</td>' +
                '</tr>'
            );
        }
        tbody.innerHTML = rows.join('');
    }

    function updatempl(prefix, dontscroll) {
        var inputEl = document.getElementById('q0_' + prefix);
        var raw     = inputEl.value;
        var myprob  = Number(raw);
        if (raw.trim() === '') return;
        if (isNaN(myprob)) {
            inputEl.value = '';
            alert('Please enter a probability between ' + MIN_PROB + ' and ' + MAX_PROB + '.');
            return;
        }
        if (myprob < MIN_PROB) { myprob = MIN_PROB; inputEl.value = myprob; }
        if (myprob > MAX_PROB) { myprob = MAX_PROB; inputEl.value = myprob; }

        var eps = PROB_STEP / 1000;
        for (var i = 0; i < NUM_ROWS; i++) {
            var rowProb = MIN_PROB + i * PROB_STEP;
            document.getElementById(prefix + '_a_' + i).checked = (rowProb <= myprob + eps);
            document.getElementById(prefix + '_b_' + i).checked = (rowProb >  myprob + eps);
            var bg = (i % 2 === 0) ? 'rgb(255,255,255)' : 'rgb(242,242,242)';
            document.getElementById(prefix + '_td_a_' + i).style.backgroundColor = bg;
            document.getElementById(prefix + '_td_b_' + i).style.backgroundColor = bg;
        }
        var myrow     = Math.floor((myprob - MIN_PROB) / PROB_STEP + 1e-9);
        var mynextrow = Math.min(myrow + 1, NUM_ROWS - 1);
        document.getElementById(prefix + '_td_a_' + myrow).style.backgroundColor     = 'rgb(200,255,200)';
        document.getElementById(prefix + '_td_b_' + mynextrow).style.backgroundColor = 'rgb(200,255,200)';

        if (!dontscroll) {
            document.getElementById(prefix + '_a_0').focus({ preventScroll: true });
            var switchtd = document.getElementById(prefix + '_a_' + myrow);
            var mydiv    = document.getElementById(prefix + '_mpltbody');
            switchtd.scrollIntoView(true);
            var y1 = mydiv.scrollTop;
            switchtd.scrollIntoView(false);
            var y2 = mydiv.scrollTop;
            if (y1 > mydiv.clientHeight / 2) mydiv.scrollTop = y2 + mydiv.clientHeight / 2;
        }
    }

    function updateq0(prefix, myq0) {
        if (myq0 < MIN_PROB) myq0 = MIN_PROB;
        document.getElementById('q0_' + prefix).value = myq0;
    }

    window.addEventListener('DOMContentLoaded', function () {
        var sure = fmtDollars(SURE_AMOUNT);
        var high = fmtDollars(LOTTERY_HIGH);
        document.querySelectorAll('.sureAmtDisplay').forEach(function (el) { el.textContent = sure; });
        document.querySelectorAll('.highAmtDisplay').forEach(function (el) { el.textContent = high; });
        document.getElementById('minProbDisplay').textContent = MIN_PROB;
        document.getElementById('maxProbDisplay').textContent = MAX_PROB;
        buildMPL('main');
        buildMPL('ex');
    });
</script>
{% endblock %}