{{ block title }}
    Certainty Equivalent
{{ endblock }}

{{ block content }}

<style>
    .mpl-table {
        border-collapse: collapse;
        width: 100%;
        max-width: 850px;
        margin: 20px 0;
        font-size: 18px;
    }

    .mpl-table th, .mpl-table td {
        border: 1px solid #ccc;
        padding: 12px 16px;
        text-align: center;
        vertical-align: middle;
    }

    .mpl-table th {
        background-color: #f8f8f8;
    }

    .choice-cell {
        cursor: pointer;
        user-select: none;
    }

    .choice-cell:hover {
        background-color: #f3f3f3;
    }

    .selected {
        background-color: #d9edf7;
        font-weight: bold;
    }

    .instruction-box {
        max-width: 850px;
        margin-bottom: 20px;
    }

    .error-text {
        color: red;
        margin-top: 10px;
        display: none;
    }

    .section-box {
        margin-top: 30px;
        margin-bottom: 10px;
    }

    .hidden {
        display: none;
    }

    .btn-row {
        margin-top: 15px;
        margin-bottom: 20px;
    }

    button[type="button"] {
        padding: 8px 14px;
        font-size: 16px;
        cursor: pointer;
        border: none;
        border-radius: 6px;
    }

    .validate-btn {
        background-color: #cccccc;
        color: #333;
    }

    .validate-btn.ready {
        background-color: #4CAF50;
        color: white;
    }

    .back-btn {
        background-color: #777;
        color: white;
    }

    .back-btn:hover {
        background-color: #666;
    }
</style>

<div class="instruction-box">
    <p>
        First, make your choice in the coarse list.
    </p>
    <p>
        After that, click <strong>Validate first choice</strong>. A finer list will then appear.
    </p>
</div>

<input type="hidden" name="ce_value" id="ce_value">

<div id="coarse_section">
    <div class="section-box">
        <h4>Step 1: Coarse choice</h4>
    </div>

    <table class="mpl-table" id="coarse_table">
        <thead>
            <tr>
                <th>Row</th>
                <th>Option A</th>
                <th>Sure amount</th>
            </tr>
        </thead>
        <tbody id="coarse_body"></tbody>
    </table>

    <div class="btn-row">
        <button type="button" id="validate_button" class="validate-btn" onclick="validateCoarseChoice()">
            Validate first choice
        </button>
    </div>

    <div id="coarse_error" class="error-text">
        Please complete the first list by choosing the sure amount in at least one row.
    </div>
</div>

<div id="fine_section" class="hidden">
    <div class="section-box">
        <h4>Step 2: Fine choice</h4>
        <p id="fine_range_text"></p>
    </div>

    <table class="mpl-table" id="fine_table">
        <thead>
            <tr>
                <th>Row</th>
                <th>Option A</th>
                <th>Sure amount</th>
            </tr>
        </thead>
        <tbody id="fine_body"></tbody>
    </table>

    <div id="fine_error" class="error-text">
        Please complete the fine list.
    </div>

    <div class="btn-row">
        <button type="button" class="back-btn" onclick="goBackToStage1()">
            Go back to stage 1
        </button>
    </div>
</div>

{{ next_button }}

<script>
    const coarse_lower_bound = js_vars.coarse_lower_bound;
    const coarse_upper_bound = js_vars.coarse_upper_bound;
    const coarse_step_size = js_vars.coarse_step_size;
    const fine_step_size = js_vars.fine_step_size;

    let coarseAmounts = [];
    let fineAmounts = [];

    for (let x = coarse_lower_bound; x <= coarse_upper_bound; x += coarse_step_size) {
        coarseAmounts.push(x);
    }

    function renderTable(tbodyId, amounts, prefix) {
        const tbody = document.getElementById(tbodyId);
        tbody.innerHTML = '';

        for (let r = 0; r < amounts.length; r++) {
            const tr = document.createElement('tr');
            tr.setAttribute('data-row', r);
            tr.setAttribute('data-amount', amounts[r]);
            tr.setAttribute('data-prefix', prefix);

            tr.innerHTML = `
                <td>${r + 1}</td>
                <td class="choice-cell option-a" onclick="selectOption('${prefix}', ${r}, 'A')">
                    Option A
                </td>
                <td class="choice-cell option-b" onclick="selectOption('${prefix}', ${r}, 'B')">
                    ${amounts[r]}
                </td>
            `;

            tbody.appendChild(tr);
        }
    }

    renderTable('coarse_body', coarseAmounts, 'coarse');

    function setRow(prefix, row, choice) {
        const tr = document.querySelector(`#${prefix}_body tr[data-row="${row}"]`);
        const cellA = tr.querySelector('.option-a');
        const cellB = tr.querySelector('.option-b');

        if (choice === 'A') {
            cellA.classList.add('selected');
            cellB.classList.remove('selected');
            tr.setAttribute('data-choice', 'A');
        } else if (choice === 'B') {
            cellA.classList.remove('selected');
            cellB.classList.add('selected');
            tr.setAttribute('data-choice', 'B');
        }
    }

    function selectOption(prefix, clickedRow, choice) {
        const amounts = prefix === 'coarse' ? coarseAmounts : fineAmounts;
        const nRows = amounts.length;

        if (choice === 'A') {
            for (let r = 0; r <= clickedRow; r++) {
                setRow(prefix, r, 'A');
            }
        }

        if (choice === 'B') {
            for (let r = clickedRow; r < nRows; r++) {
                setRow(prefix, r, 'B');
            }
        }

        if (prefix === 'coarse') {
            document.getElementById('coarse_error').style.display = 'none';
            updateValidateButton();
        } else {
            updateFineValue();
            document.getElementById('fine_error').style.display = 'none';
        }
    }

    function getFirstBRow(prefix) {
        const amounts = prefix === 'coarse' ? coarseAmounts : fineAmounts;

        for (let r = 0; r < amounts.length; r++) {
            const tr = document.querySelector(`#${prefix}_body tr[data-row="${r}"]`);
            const choice = tr.getAttribute('data-choice');
            if (choice === 'B') {
                return r;
            }
        }
        return null;
    }

    function updateValidateButton() {
        const validateButton = document.getElementById('validate_button');
        const firstBRow = getFirstBRow('coarse');

        if (firstBRow !== null) {
            validateButton.classList.add('ready');
        } else {
            validateButton.classList.remove('ready');
        }
    }

    function updateFineValue() {
        const firstBRow = getFirstBRow('fine');
        const ceValueInput = document.getElementById('ce_value');

        if (firstBRow === null) {
            ceValueInput.value = '';
            return;
        }

        let midpoint;

        if (firstBRow === 0) {
            midpoint = fineAmounts[0];
        } else {
            midpoint = (fineAmounts[firstBRow - 1] + fineAmounts[firstBRow]) / 2;
        }

        ceValueInput.value = midpoint;
    }

    function validateCoarseChoice() {
        const firstBRow = getFirstBRow('coarse');

        if (firstBRow === null) {
            document.getElementById('coarse_error').style.display = 'block';
            return;
        }

        let lowerFine;
        let upperFine;

        if (firstBRow === 0) {
            lowerFine = coarseAmounts[0];
            upperFine = coarseAmounts[0];
        } else {
            lowerFine = coarseAmounts[firstBRow - 1];
            upperFine = coarseAmounts[firstBRow];
        }

        fineAmounts = [];
        for (let x = lowerFine; x <= upperFine; x += fine_step_size) {
            fineAmounts.push(x);
        }

        renderTable('fine_body', fineAmounts, 'fine');

        document.getElementById('fine_range_text').innerText =
            `You switched between ${lowerFine} and ${upperFine}. Please refine your choice below.`;

        document.getElementById('ce_value').value = '';
        document.getElementById('fine_error').style.display = 'none';

        document.getElementById('coarse_section').classList.add('hidden');
        document.getElementById('fine_section').classList.remove('hidden');
    }

    function goBackToStage1() {
        document.getElementById('fine_section').classList.add('hidden');
        document.getElementById('coarse_section').classList.remove('hidden');
        document.getElementById('fine_error').style.display = 'none';
        document.getElementById('ce_value').value = '';
    }

    document.querySelector('form').addEventListener('submit', function(event) {
        const ceValue = document.getElementById('ce_value').value;
        const fineVisible = !document.getElementById('fine_section').classList.contains('hidden');

        if (!fineVisible) {
            event.preventDefault();
            document.getElementById('coarse_error').style.display = 'block';
            return;
        }

        if (ceValue === '') {
            event.preventDefault();
            document.getElementById('fine_error').style.display = 'block';
            return;
        }
    });
</script>

{{ endblock }}