{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Barcode Training Mode{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/barcode/barcode.css">
<link rel="stylesheet" href="/static/hil-pages/barcode/training.css">
{% endblock %}
{% block content %}
<header>
    <h1>Barcode Training Mode</h1>
    <nav><a href="/barcode/intelligence">Intelligence</a> <a href="/sales">POS</a></nav>
</header>
<main>
    <section class="panel">
        <h2>Safe Simulated Scanner</h2>
        <p>This mode does not add items to the production cart.</p>
        <div class="barcode-console">
            <div class="barcode-console-row">
                <input id="training-input" placeholder="Try MILK001, BREAD001, duplicate scans, or a bad code">
                <button id="simulate-scan" type="button">Simulate Scan</button>
                <button id="clear-training" type="button">Clear</button>
            </div>
            <div id="training-status" class="barcode-status">Training ready.</div>
        </div>
    </section>
    <section class="panel">
        <h2>Training Cart</h2>
        <div id="training-cart" class="training-cart"></div>
    </section>
</main>
<script>
const trainingProducts = {
    "MILK001": {name:"Milk", price:50, stock:20},
    "BREAD001": {name:"Bread", price:30, stock:15},
    "SUGAR001": {name:"Sugar", price:120, stock:10}
};
const cart = {};
let lastCode = "";
let lastAt = 0;
function render(){
    const box = document.getElementById("training-cart");
    box.innerHTML = "";
    Object.keys(cart).forEach(code => {
        const item = cart[code];
        const row = document.createElement("div");
        row.className = "training-row";
        row.innerHTML = `<strong>${item.name}</strong><span>Qty ${item.qty}</span><span>${item.price}</span>`;
        box.appendChild(row);
    });
}
function scan(){
    const input = document.getElementById("training-input");
    const status = document.getElementById("training-status");
    const code = input.value.trim().toUpperCase();
    const now = Date.now();
    if (code === lastCode && now - lastAt < 900) {
        status.textContent = "Coaching: possible duplicate scan. Confirm quantity.";
        status.className = "barcode-status warn";
        return;
    }
    lastCode = code;
    lastAt = now;
    const product = trainingProducts[code];
    if (!product) {
        status.textContent = "Coaching: product not found. Use fallback search or check the label.";
        status.className = "barcode-status error";
        return;
    }
    cart[code] = cart[code] || {...product, qty:0};
    cart[code].qty += 1;
    status.textContent = "Good scan: " + product.name + " added safely.";
    status.className = "barcode-status ok";
    input.value = "";
    render();
}
document.getElementById("simulate-scan").addEventListener("click", scan);
document.getElementById("training-input").addEventListener("keydown", event => { if(event.key === "Enter") scan(); });
document.getElementById("clear-training").addEventListener("click", () => { Object.keys(cart).forEach(key => delete cart[key]); render(); });
</script>
{% endblock %}