list.innerHTML = "";
categories.forEach(function (cat) {
var category = cat[0];
if (activeCategory !== "All" && activeCategory !== category) return;
var visible = [];
cat[1].forEach(function (pair) {
var item = state[key(category, pair[0])];
var hay = (item.english + " " + item.thai + " " + item.note).toLowerCase();
if (!search || hay.indexOf(search) !== -1) visible.push(item);
});
if (!visible.length) return;
var section = document.createElement("div");
section.className = "kpo-cat";
addText(section, "kpo-cat-title", category);
visible.forEach(function (item) { section.appendChild(createRow(item)); });
list.appendChild(section);
});
}
function createRow(item) {
var row = document.createElement("div");
row.className = "kpo-row" + (item.selected ? " kpo-selected" : "");
row.setAttribute("data-id", key(item.category, item.english));
var check = document.createElement("input");
check.type = "checkbox";
check.className = "kpo-check";
check.checked = item.selected;
row.appendChild(check);
var name = document.createElement("div");
name.className = "kpo-name";
addText(name, "kpo-en", item.english);
addText(name, "kpo-th", item.thai);
row.appendChild(name);
var qty = document.createElement("input");
qty.className = "kpo-qty";
qty.type = "text";
qty.inputMode = "decimal";
qty.placeholder = "Qty";
qty.value = item.qty;
row.appendChild(qty);
var unit = document.createElement("select");
unit.className = "kpo-unit";
units.forEach(function (u) {
var option = document.createElement("option");
option.value = u;
option.textContent = u || "Unit";
option.selected = u === item.unit;
unit.appendChild(option);
});
row.appendChild(unit);
var note = document.createElement("input");
note.className = "kpo-note";
note.type = "text";
note.placeholder = "Notes";
note.value = item.note;
row.appendChild(note);
return row;
}
function updateRow(target) {
var row = target.closest(".kpo-row");
if (!row) return;
var item = state[row.getAttribute("data-id")];
item.selected = row.querySelector(".kpo-check").checked;
item.qty = row.querySelector(".kpo-qty").value.trim();
item.unit = row.querySelector(".kpo-unit").value;
item.note = row.querySelector(".kpo-note").value.trim();
if ((target.className.indexOf("kpo-qty") !== -1 && item.qty) || (target.className.indexOf("kpo-note") !== -1 && item.note)) item.selected = true;
row.querySelector(".kpo-check").checked = item.selected;
row.className = "kpo-row" + (item.selected ? " kpo-selected" : "");
updateSummary();
}
function selectedItems() {
var result = [];
Object.keys(state).forEach(function (k) {
var item = state[k];
if (item.selected || item.qty || item.note) result.push(item);
});
return result;
}
function buildText() {
var lines = [];
var selected = selectedItems();
lines.push("PURCHASE LIST - " + formatDate(get("kpo-date").value));
if (get("kpo-filled").value.trim()) lines.push("Filled by: " + get("kpo-filled").value.trim());
if (get("kpo-event").value.trim()) lines.push("Event/client: " + get("kpo-event").value.trim());
lines.push("");
categories.forEach(function (cat) {
var group = selected.filter(function (item) { return item.category === cat[0]; });
if (!group.length) return;
lines.push(cat[0].toUpperCase());
group.forEach(function (item) {
var amount = "";
if (item.qty) amount += item.qty;
if (item.unit) amount += (amount ? " " : "") + item.unit;
var line = "- " + item.english;
if (amount) line += ": " + amount;
if (item.note) line += " (" + item.note + ")";
lines.push(line);
});
lines.push("");
});
if (!selected.length) lines.push("No items selected.");
return lines.join("\n").trim();
}
function updateSummary() {
var count = selectedItems().length;
get("kpo-output").value = buildText();
get("kpo-stats").textContent = count + " item" + (count === 1 ? "" : "s") + " selected";
get("kpo-mobile-stats").textContent = count + " item" + (count === 1 ? "" : "s") + " selected";
}
function toast(text) {
var t = get("kpo-toast");
t.textContent = text;
window.clearTimeout(toast.timer);
toast.timer = window.setTimeout(function () { t.textContent = ""; }, 1800);
}
function copyOutput() {
var text = get("kpo-output").value;
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(text).then(function () { toast("Copied"); }).catch(fallbackCopy);
} else {
fallbackCopy();
}
}
function fallbackCopy() {
var output = get("kpo-output");
output.focus();
output.select();
document.execCommand("copy");
toast("Copied");
}
function clearAll() {
if (!window.confirm("Clear all selected items?")) return;
Object.keys(state).forEach(function (k) {
state[k].selected = false;
state[k].qty = "";
state[k].unit = "";
state[k].note = "";
});
renderList();
updateSummary();
}
initState();
renderTabs();
renderList();
updateSummary();
get("kpo-app").addEventListener("input", function (event) {
if (event.target.className.indexOf("kpo-qty") !== -1 || event.target.className.indexOf("kpo-note") !== -1) updateRow(event.target);
if (event.target.id === "kpo-search") renderList();
if (event.target.id === "kpo-date" || event.target.id === "kpo-filled" || event.target.id === "kpo-event") updateSummary();
});
get("kpo-app").addEventListener("change", function (event) {
if (event.target.className.indexOf("kpo-check") !== -1 || event.target.className.indexOf("kpo-unit") !== -1) updateRow(event.target);
});
get("kpo-tabs").addEventListener("click", function (event) {
if (!event.target.getAttribute("data-category")) return;
activeCategory = event.target.getAttribute("data-category");
renderTabs();
renderList();
});
get("kpo-copy").addEventListener("click", copyOutput);
get("kpo-copy-mobile").addEventListener("click", copyOutput);
get("kpo-clear").addEventListener("click", clearAll);
})();
