{{ block title }}
    Practice
{{ endblock }}

{{ block content }}

<style>
    .form-control-errors {
    font-size: 24px !important;
    font-weight: 700;
    color: #c62828 !important;
    margin-top: 12px;
    }
    .qty-btn{
        border:1px solid #ddd;background:#fff;border-radius:10px;width:34px;height:34px;
        font-size:18px;line-height:32px;text-align:center;cursor:pointer;user-select:none;
    }
    .qty-display{min-width:28px;text-align:center;font-weight:700;font-size:16px;}
    .ot-hidden-input{position:absolute;left:-10000px;opacity:0;height:0;overflow:hidden;}

    .deal-row{display:grid;grid-template-columns:1fr 90px 120px;align-items:center;gap:12px;}
    .deal-price{text-align:right;font-weight:600;opacity:.8;white-space:nowrap;}
    .qty-controls{display:flex;align-items:center;gap:8px;justify-content:flex-end;}

    /* unified deal box (ALL SOLID) */
    .deal-card{
        border:1px solid #eee;
        border-radius:12px;
        padding:10px;
        margin-bottom:8px;
    }

    /* ===== Calculator ===== */
    .calc-wrap{
        width:100%;
        max-width:420px;
        margin-top:14px;
        border-radius:5px;
        overflow:hidden;
        background:#555;
        border:1px solid #222;
    }
    .calc-display{
        background:#D6EAF8;
        padding:10px 12px;
        text-align:right;
        border-bottom:1px solid #222;
    }
    .calc-text{
        font-size:22px;
        font-weight:800;
        color:#555;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .calc-grid{ display:grid; grid-template-columns:repeat(4, 1fr); }
    .calc-btn{
        border:none; outline:none; cursor:pointer;
        padding:12px 6px; font-size:15px; font-weight:700;
        color:#555; background:#eee;
        border-right:1px solid #222; border-bottom:1px solid #222;
    }
    .calc-btn:active{ filter:brightness(.9); }
    .calc-btn.num{ background:#eee; }
    .calc-btn.top{ background:#D4F1F9; }
    .calc-btn.op{ background:#E0FFFF; color:#111; }
    .calc-btn.eq{ background:#89CFF0; color:#111; }
    .calc-grid .calc-btn:nth-child(4n){ border-right:none; }
    .zero3{ grid-column: span 3; }
</style>

<p>
    You are given <b>${{ market0.endowment }}</b> to fulfill the given shopping list.<br>
    Please choose what to purchase from the Online Market.<br><br>
    When you are satisfied with your choices, click “Next” to continue.<br><br>
</p>

{{ formfield_errors 'endowment_left' }}
{{ if player.endowment_left >= 0 }}
    {{ formfield_errors 'total_cost0' }}
{{ endif }}

<div style="display:flex; gap:24px; align-items:stretch;">

    <!-- LEFT -->
    <div style="flex:1.2; min-width:400px; display:flex;">
        <div style="
            border:2px solid #eee;
            border-radius:14px;
            padding:18px;
            width:100%;
            display:flex;
            flex-direction:column;
            height:100%;
        ">
            <h3 style="margin:0 0 12px 0;">Shopping list</h3>

            <table class="table table-sm table-bordered mb-0" style="width:100%; table-layout:fixed;">
                <colgroup>
                    <col style="width:35%;">
                    <col style="width:32%;">
                    <col style="width:33%;">
                </colgroup>
                <thead class="table-light">
                    <tr>
                        <th>Item</th>
                        <th style="text-align:center;">Required</th>
                        <th style="text-align:center;">Purchased</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>A</td><td style="text-align:center;">{{ target.A }}</td><td style="text-align:center;"><span id="purchased_A">0</span></td></tr>
                    <tr><td>B</td><td style="text-align:center;">{{ target.B }}</td><td style="text-align:center;"><span id="purchased_B">0</span></td></tr>
                    <tr><td>C</td><td style="text-align:center;">{{ target.C }}</td><td style="text-align:center;"><span id="purchased_C">0</span></td></tr>
                    <tr><td>D</td><td style="text-align:center;">{{ target.D }}</td><td style="text-align:center;"><span id="purchased_D">0</span></td></tr>
                    <tr><td>E</td><td style="text-align:center;">{{ target.E }}</td><td style="text-align:center;"><span id="purchased_E">0</span></td></tr>
                </tbody>
            </table>

            <div style="margin-top:18px; border-top:1px solid #eee; padding-top:14px;">
                <div style="display:flex; justify-content:space-between;">
                    <div style="font-size:12px; opacity:.75;">Endowment</div>
                    <div style="font-weight:800;">${{ market0.endowment }}</div>
                </div>

                <div style="display:flex; justify-content:space-between; margin-top:6px;">
                    <div style="font-size:12px; opacity:.75;">Total cost</div>
                    <div style="font-weight:800;">$<span id="total_cost">0</span></div>
                </div>

                <div style="display:flex; justify-content:space-between; margin-top:6px;">
                    <div style="font-size:12px; opacity:.75;">Dollars left</div>
                    <div style="font-weight:800;">$<span id="endowment_left_display">{{ market0.endowment }}</span></div>
                </div>

                <div style="display:flex; justify-content:space-between; margin-top:6px;">
                    <div style="font-size:12px; opacity:.75;">Met required quantities?</div>
                    <div style="font-weight:800;"><span id="requirements_status" style="color:#d32f2f;">No</span></div>
                </div>

                <div style="display:flex; justify-content:space-between; margin-top:6px;">
                    <div style="font-size:12px; opacity:.75;">Share of payment you will receive for this list</div>
                    <div style="font-weight:800;">{{ market0.percent }}%</div>
                </div>

                <div style="display:flex; justify-content:space-between; margin-top:6px;">
                    <div style="font-size:12px; opacity:.75;">Your earnings if this list is selected</div>
                    <div style="font-weight:800;">$<span id="earnings_if_selected">0</span></div>
                </div>
            </div>

            <!-- ===== Calculator ===== -->
            <div class="calc-wrap" id="math_calc_left">
                <div class="calc-display">
                    <div class="calc-text" id="calc_display_left">0</div>
                </div>

                <div class="calc-grid op-right">
                    <button type="button" class="calc-btn top" data-k="AC">AC</button>
                    <button type="button" class="calc-btn top" data-k="CE">CE</button>
                    <button type="button" class="calc-btn num" data-k=".">.</button>
                    <button type="button" class="calc-btn op"  data-k="÷">÷</button>

                    <button type="button" class="calc-btn num" data-k="7">7</button>
                    <button type="button" class="calc-btn num" data-k="8">8</button>
                    <button type="button" class="calc-btn num" data-k="9">9</button>
                    <button type="button" class="calc-btn op"  data-k="×">×</button>

                    <button type="button" class="calc-btn num" data-k="4">4</button>
                    <button type="button" class="calc-btn num" data-k="5">5</button>
                    <button type="button" class="calc-btn num" data-k="6">6</button>
                    <button type="button" class="calc-btn op"  data-k="-">−</button>

                    <button type="button" class="calc-btn num" data-k="1">1</button>
                    <button type="button" class="calc-btn num" data-k="2">2</button>
                    <button type="button" class="calc-btn num" data-k="3">3</button>
                    <button type="button" class="calc-btn op"  data-k="+">+</button>

                    <button type="button" class="calc-btn num zero3" data-k="0">0</button>
                    <button type="button" class="calc-btn eq" data-k="=">=</button>
                </div>
            </div>
            <!-- ===== /Calculator ===== -->

        </div>
    </div>

    <!-- RIGHT -->
    <div style="flex:1.2; min-width:500px; display:flex;">
        <div style="
            border:2px solid #eee;
            border-radius:14px;
            padding:18px;
            width:100%;
            display:flex;
            flex-direction:column;
        ">
            <h3 style="margin:0 0 12px 0;">Online Market</h3>

            <div style="font-size:13px; opacity:.8; margin-bottom:12px;">
                Use the + / − buttons to choose quantities.
            </div>

            <div style="display:flex; justify-content:flex-end; gap:10px; margin-bottom:12px;">

            <button type="button"
            disabled
            style="padding:6px 12px; border-radius:8px; border:1px solid #ccc;
                   background:#eee; color:#999; cursor:not-allowed;">
            Reset to previous basket
            </button>

            <button type="button" class="btn btn-primary" onclick="resetToZero()">
            Reset to Zero
            </button>

            </div>

            <div style="max-height:680px; overflow-y:auto; padding-right:6px;">

                <!-- Item A -->
                <div style="margin-bottom:14px;">
                    <div style="font-weight:800; margin-bottom:6px;">Item A</div>

                    <div class="deal-card">
                        <div class="deal-row">
                            <div><span id="label_qA_single"></span></div>
                            <div class="deal-price"><span id="price_qA_single"></span></div>
                            <div class="qty-controls">
                                <button class="qty-btn" type="button" onclick="dec('qA_single')">−</button>
                                <span class="qty-display" id="show_qA_single">0</span>
                                <button class="qty-btn" type="button" onclick="inc('qA_single')">+</button>
                            </div>
                            <div class="ot-hidden-input">{{ form.qA_single }}</div>
                        </div>
                    </div>

                    <div class="deal-card">
                        <div class="deal-row">
                            <div><span id="label_qA_P3"></span></div>
                            <div class="deal-price"><span id="price_qA_P3"></span></div>
                            <div class="qty-controls">
                                <button class="qty-btn" type="button" onclick="dec('qA_P3')">−</button>
                                <span class="qty-display" id="show_qA_P3">0</span>
                                <button class="qty-btn" type="button" onclick="inc('qA_P3')">+</button>
                            </div>
                            <div class="ot-hidden-input">{{ form.qA_P3 }}</div>
                        </div>
                    </div>
                </div>

                <!-- Item B & C -->
                <div style="margin-bottom:14px;">
                    <div style="font-weight:800; margin-bottom:6px;">Item B &amp; C</div>

                    <div class="deal-card">
                        <div class="deal-row">
                            <div><span id="label_qB_single"></span></div>
                            <div class="deal-price"><span id="price_qB_single"></span></div>
                            <div class="qty-controls">
                                <button class="qty-btn" type="button" onclick="dec('qB_single')">−</button>
                                <span class="qty-display" id="show_qB_single">0</span>
                                <button class="qty-btn" type="button" onclick="inc('qB_single')">+</button>
                            </div>
                            <div class="ot-hidden-input">{{ form.qB_single }}</div>
                        </div>
                    </div>

                    <div class="deal-card">
                        <div class="deal-row">
                            <div><span id="label_qC_single"></span></div>
                            <div class="deal-price"><span id="price_qC_single"></span></div>
                            <div class="qty-controls">
                                <button class="qty-btn" type="button" onclick="dec('qC_single')">−</button>
                                <span class="qty-display" id="show_qC_single">0</span>
                                <button class="qty-btn" type="button" onclick="inc('qC_single')">+</button>
                            </div>
                            <div class="ot-hidden-input">{{ form.qC_single }}</div>
                        </div>
                    </div>

                    <div class="deal-card">
                        <div class="deal-row">
                            <div><span id="label_qB_BETA"></span></div>
                            <div class="deal-price"><span id="price_qB_BETA"></span></div>
                            <div class="qty-controls">
                                <button class="qty-btn" type="button" onclick="dec('qB_BETA')">−</button>
                                <span class="qty-display" id="show_qB_BETA">0</span>
                                <button class="qty-btn" type="button" onclick="inc('qB_BETA')">+</button>
                            </div>
                            <div class="ot-hidden-input">{{ form.qB_BETA }}</div>
                        </div>
                    </div>
                </div>

                <!-- Item D & E -->
                <div style="margin-bottom:14px;">
                    <div style="font-weight:800; margin-bottom:6px;">Item D &amp; E</div>

                    <div class="deal-card">
                        <div class="deal-row">
                            <div><span id="label_qD_single"></span></div>
                            <div class="deal-price"><span id="price_qD_single"></span></div>
                            <div class="qty-controls">
                                <button class="qty-btn" type="button" onclick="dec('qD_single')">−</button>
                                <span class="qty-display" id="show_qD_single">0</span>
                                <button class="qty-btn" type="button" onclick="inc('qD_single')">+</button>
                            </div>
                            <div class="ot-hidden-input">{{ form.qD_single }}</div>
                        </div>
                    </div>

                    <div class="deal-card">
                        <div class="deal-row">
                            <div><span id="label_qE_single"></span></div>
                            <div class="deal-price"><span id="price_qE_single"></span></div>
                            <div class="qty-controls">
                                <button class="qty-btn" type="button" onclick="dec('qE_single')">−</button>
                                <span class="qty-display" id="show_qE_single">0</span>
                                <button class="qty-btn" type="button" onclick="inc('qE_single')">+</button>
                            </div>
                            <div class="ot-hidden-input">{{ form.qE_single }}</div>
                        </div>
                    </div>

                    <div class="deal-card">
                        <div class="deal-row">
                            <div><span id="label_qE_P4"></span></div>
                            <div class="deal-price"><span id="price_qE_P4"></span></div>
                            <div class="qty-controls">
                                <button class="qty-btn" type="button" onclick="dec('qE_P4')">−</button>
                                <span class="qty-display" id="show_qE_P4">0</span>
                                <button class="qty-btn" type="button" onclick="inc('qE_P4')">+</button>
                            </div>
                            <div class="ot-hidden-input">{{ form.qE_P4 }}</div>
                        </div>
                    </div>

                    <div class="deal-card">
                        <div class="deal-row">
                            <div><span id="label_qD_DELTA"></span></div>
                            <div class="deal-price"><span id="price_qD_DELTA"></span></div>
                            <div class="qty-controls">
                                <button class="qty-btn" type="button" onclick="dec('qD_DELTA')">−</button>
                                <span class="qty-display" id="show_qD_DELTA">0</span>
                                <button class="qty-btn" type="button" onclick="inc('qD_DELTA')">+</button>
                            </div>
                            <div class="ot-hidden-input">{{ form.qD_DELTA }}</div>
                        </div>
                    </div>


                </div>

            </div>
        </div>
    </div>

</div>

<div style="margin-top:12px;">
    {{ next_button }}
</div>

<!-- Hidden fields that must be SUBMITTED -->
<div class="ot-hidden-input">{{ form.total_cost0 }}</div>
<div class="ot-hidden-input">{{ form.endowment_left }}</div>

<script>
const ENDOWMENT = {{ market0.endowment }};
const PRICES = {{ PRICES_JSON|safe }};   // IMPORTANT: |safe
const GIVES  = {{ GIVES_JSON|safe }};    // IMPORTANT: |safe

const LABELS = {
    qA_single: "Single A",
    qA_P3: "Pack of 3 A",

    qB_single: "Single B",
    qB_BETA:  "Combo Beta (1B + 1C)",

    qC_single: "Single C",

    qD_single: "Single D",
    qD_DELTA:  "Combo Delta (1D + 1E)",

    qE_single: "Single E",
    qE_P4:     "Pack of 4 E",
};

const FIELD_NAMES = Object.keys(PRICES);

function safeInt(x){ const n=parseInt(x,10); return Number.isFinite(n)?n:0; }
function getField(name){ return document.getElementById('id_' + name); }

function updateLeftPurchased(totals){
    document.getElementById('purchased_A').textContent = totals.A;
    document.getElementById('purchased_B').textContent = totals.B;
    document.getElementById('purchased_C').textContent = totals.C;
    document.getElementById('purchased_D').textContent = totals.D;
    document.getElementById('purchased_E').textContent = totals.E;
}

/* ========= shared state (for logging) ========= */
let CURRENT_TOTAL_COST = 0;

function resetToZero() {
    FIELD_NAMES.forEach(name => {
        const f = getField(name);
        if (!f) return;

        f.value = 0;

        const show = document.getElementById('show_' + name);
        if (show) show.textContent = 0;
    });

    recomputeAll();

    liveSendSafe({
        event: "reset_zero",
        page_name: "ComprehensionCheck",
        total_cost: CURRENT_TOTAL_COST,
        clicked_at: new Date().toISOString()
    });
}

function recomputeAll(){
    let totalCost = 0;
    const totals = {A:0,B:0,C:0,D:0,E:0};

    for(const name of FIELD_NAMES){
        const f = getField(name);
        const q = safeInt(f && f.value);

        totalCost += q * PRICES[name];

        const gives = GIVES[name] || {};
        for(const k in gives){ totals[k] += q * gives[k]; }
    }

    CURRENT_TOTAL_COST = totalCost;

    updateLeftPurchased(totals);

    const meetsRequirements =
        totals.A >= {{ target.A }} &&
        totals.B >= {{ target.B }} &&
        totals.C >= {{ target.C }} &&
        totals.D >= {{ target.D }} &&
        totals.E >= {{ target.E }};

    const left = ENDOWMENT - totalCost;
    const PERCENT = {{ market0.percent }} / 100;
    const earningsIfSelected = meetsRequirements ? Math.round(left * PERCENT) : 0;

    const statusEl = document.getElementById('requirements_status');
    if(statusEl){
        if(meetsRequirements){
            statusEl.textContent = 'Yes';
            statusEl.style.color = '#2e7d32';
        }else{
            statusEl.textContent = 'No';
            statusEl.style.color = '#d32f2f';
        }
    }

    document.getElementById('total_cost').textContent = totalCost;
    document.getElementById('endowment_left_display').textContent = left;

    const earnEl = document.getElementById('earnings_if_selected');
    if(earnEl) earnEl.textContent = earningsIfSelected;

    const fCost0 = getField('total_cost0');
    if(fCost0){
        fCost0.value = String(totalCost);
        fCost0.required = false;
        if(fCost0.setCustomValidity) fCost0.setCustomValidity('');
    }

    const fLeft = getField('endowment_left');
    if(fLeft){
        fLeft.value = String(left);
        fLeft.required = false;
        if(fLeft.setCustomValidity) fLeft.setCustomValidity('');
    }

    return { totalCost, left, meetsRequirements };
}

function liveSendSafe(payload){
    try{
        if(typeof liveSend !== 'function') return;
        liveSend(payload);
    }catch(e){}
}

/* ===== click logging (NO old_value) ===== */
function logQtyClick(fieldName, action, newValue){
    liveSendSafe({
        event: "qty_click",
        page_name: "ComprehensionCheck",
        field_name: fieldName,
        action: action,
        new_value: newValue,
        total_cost: CURRENT_TOTAL_COST,
        clicked_at: new Date().toISOString()
    });
}

function inc(name){
    const f = getField(name);
    if (!f) return;

    const newV = safeInt(f.value) + 1;
    f.value = newV;

    const show = document.getElementById('show_' + name);
    if (show) show.textContent = newV;

    recomputeAll();
    logQtyClick(name, "inc", newV);
}

function dec(name){
    const f = getField(name);
    if (!f) return;

    const newV = Math.max(0, safeInt(f.value) - 1);
    f.value = newV;

    const show = document.getElementById('show_' + name);
    if (show) show.textContent = newV;

    recomputeAll();
    logQtyClick(name, "dec", newV);
}

document.addEventListener('DOMContentLoaded', function(){
    const frm = document.querySelector('form');
    if(frm){
        frm.noValidate = true;
        frm.setAttribute('novalidate','novalidate');

        liveSendSafe({
        event: "page_enter",
        page_name: "ComprehensionCheck",   // or PageAprime
        clicked_at: new Date().toISOString()
    });
    }

    FIELD_NAMES.forEach(name=>{
        const f = getField(name);
        if(!f) return;

        if(f.value==='' || f.value===null) f.value='0';
        f.required=false;
        if(f.setCustomValidity) f.setCustomValidity('');

        const show=document.getElementById('show_'+name);
        if(show) show.textContent = safeInt(f.value);

        const labelEl=document.getElementById('label_'+name);
        if(labelEl) labelEl.textContent = LABELS[name] || name;

        const priceEl=document.getElementById('price_'+name);
        if(priceEl) priceEl.textContent = '$' + String(PRICES[name]);
    });

    const fCost0 = getField('total_cost0');
    if(fCost0){
        if(fCost0.value==='' || fCost0.value===null) fCost0.value='0';
        fCost0.required=false;
        if(fCost0.setCustomValidity) fCost0.setCustomValidity('');
    }

    const fLeft = getField('endowment_left');
    if(fLeft){
        if(fLeft.value==='' || fLeft.value===null) fLeft.value=String(ENDOWMENT);
        fLeft.required=false;
        if(fLeft.setCustomValidity) fLeft.setCustomValidity('');
    }

    recomputeAll();

    /* ===== ping: confirm live_method works ===== */
    liveSendSafe({
        event: "page_ping",
        page_name: "ComprehensionCheck",
        total_cost: CURRENT_TOTAL_COST,
        clicked_at: new Date().toISOString()
    });
});
</script>

<script>
/* ===== Calculator logic + '=' logging ===== */
(function(){
    const display = document.getElementById('calc_display_left');
    const root = document.getElementById('math_calc_left');

    let expr = "";
    let justEvaluated = false;

    function setDisplayText(t){ display.textContent = t; }
    function pretty(e){ return (e || "0").replace(/\*/g,"×").replace(/\//g,"÷"); }
    function sanitize(e){ return (e || "").replace(/×/g,"*").replace(/÷/g,"/"); }
    function isOp(k){ return k==="+"||k==="-"||k==="×"||k==="÷"; }

    function canAppendDot(){
        const chunk = expr.split(/[\+\-×÷]/).pop() || "";
        return chunk.indexOf('.') === -1;
    }

    function logCalcEq(equationPretty, resultDisplay){
        try{
            if(typeof liveSend !== 'function') return;
            liveSend({
                event: "calc_eq",
                page_name: "ComprehensionCheck",
                equation: equationPretty,
                result_display: resultDisplay,
                total_cost: (typeof CURRENT_TOTAL_COST === 'number' ? CURRENT_TOTAL_COST : 0),
                clicked_at: new Date().toISOString()
            });
        }catch(e){}
    }

    function press(k){
        if(k==="AC"){
            expr=""; justEvaluated=false; setDisplayText("0"); return;
        }
        if(k==="CE"){
            if(expr.length>0){
                expr=expr.slice(0,-1);
                setDisplayText(pretty(expr));
                if(expr==="") setDisplayText("0");
            }
            justEvaluated=false; return;
        }
        if(k==="="){
            if(expr.trim()==="") return;
            if(/[\+\-×÷]$/.test(expr)) return;

            const equationPretty = pretty(expr);
            const evalStr = sanitize(expr);

            if(!/^[0-9+\-*/().\s]+$/.test(evalStr)){
                setDisplayText("Error"); expr=""; justEvaluated=true;
                logCalcEq(equationPretty, "Error");
                return;
            }
            try{
                const val = Function('"use strict"; return (' + evalStr + ')')();
                if(!Number.isFinite(val)){
                    setDisplayText("Error"); expr="";
                    logCalcEq(equationPretty, "Error");
                }else{
                    const out = (Math.abs(val - Math.round(val)) < 1e-12)
                        ? String(Math.round(val))
                        : String(Math.round(val * 100000000) / 100000000);
                    setDisplayText(out);
                    expr = out;
                    logCalcEq(equationPretty, out);
                }
            }catch(e){
                setDisplayText("Error"); expr="";
                logCalcEq(equationPretty, "Error");
            }
            justEvaluated=true; return;
        }

        if(isOp(k)){
            if(expr==="" && k!=="-") return;
            if(expr==="" && k==="-"){
                expr="-"; setDisplayText(pretty(expr)); justEvaluated=false; return;
            }
            if(/[\+\-×÷]$/.test(expr)) expr = expr.slice(0,-1) + k;
            else expr += k;

            setDisplayText(pretty(expr));
            justEvaluated=false; return;
        }

        if(justEvaluated){
            if((k>="0" && k<="9") || k===".") expr="";
            justEvaluated=false;
        }

        if(k==="."){
            if(expr==="" || /[\+\-×÷]$/.test(expr)){
                expr+="0."; setDisplayText(pretty(expr)); return;
            }
            if(!canAppendDot()) return;
            expr+="."; setDisplayText(pretty(expr)); return;
        }

        if(expr==="0") expr=k;
        else expr+=k;

        setDisplayText(pretty(expr));
    }

    root.addEventListener('click', function(e){
        const btn = e.target.closest('button[data-k]');
        if(!btn) return;
        press(btn.getAttribute('data-k'));
    });
})();
</script>

{{ endblock }}