MANUSUWONGMUNEE SEEUTA - HTML Template<\/title>\n <style>\n :root {\n --bg: #ffffff;\n \/* white background primary theme *\/\n --text: #0b3f3a;\n \/* slate-900 *\/\n --muted: #2f6f68;\n \/* slate-600 *\/\n --muted2: #3f857d;\n \/* slate-500 *\/\n --line: #e2e8f0;\n \/* slate-200 *\/\n --soft: #f8fafc;\n \/* slate-50 *\/\n --chip: #f1f5f9;\n \/* slate-100 *\/\n --accent: #0a84ff;\n \/* Apple blue *\/\n --danger: #dc2626;\n \/* red *\/\n --ok: #16a34a;\n \/* green *\/\n --shadow: 0 10px 30px rgba(2, 6, 23, .08);\n --radius: 18px;\n --radius2: 14px;\n --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --sans: \"Sukhumvit Set\", \"Sukhumvit\", \"Thonburi\", \"Tahoma\", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"SF Pro Display\", \"Segoe UI\", Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\";\n }\n\n * {\n box-sizing: border-box\n }\n\n html,\n body {\n height: 100%\n }\n\n body {\n margin: 0;\n font-family: var(--sans);\n color: var(--text);\n background: var(--bg);\n }\n\n .wrap {\n max-width: 1040px;\n margin: 28px auto 80px;\n padding: 0 18px;\n }\n\n \/* Top bar *\/\n .topbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin-bottom: 16px;\n }\n\n .brand {\n display: flex;\n align-items: center;\n gap: 12px;\n min-width: 240px;\n }\n\n .logo {\n width: 44px;\n height: 44px;\n border-radius: 14px;\n background: linear-gradient(180deg, #111827, #0b1220);\n display: grid;\n place-items: center;\n color: #fff;\n font-weight: 800;\n box-shadow: 0 12px 24px rgba(2, 6, 23, .18);\n user-select: none;\n }\n\n .brand h1 {\n margin: 0;\n font-size: 16px;\n letter-spacing: .3px;\n }\n\n .brand .sub {\n font-size: 12px;\n color: var(--muted2);\n margin-top: 2px;\n }\n\n .actions {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n justify-content: flex-end;\n }\n\n .btn {\n border: 1px solid var(--line);\n background: #fff;\n color: var(--text);\n border-radius: 999px;\n padding: 10px 14px;\n font-size: 13px;\n line-height: 1;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n transition: transform .08s ease, box-shadow .18s ease, background .2s ease;\n user-select: none;\n }\n\n .btn:hover {\n box-shadow: 0 10px 22px rgba(2, 6, 23, .10);\n transform: translateY(-1px);\n }\n\n .btn:active {\n transform: translateY(0px);\n box-shadow: none;\n }\n\n .btn.primary {\n background: var(--accent);\n border-color: rgba(10, 132, 255, .35);\n color: #fff;\n }\n\n .btn.danger {\n background: #fff;\n border-color: rgba(220, 38, 38, .35);\n color: var(--danger);\n }\n\n \/* Card *\/\n .card {\n background: #fff;\n border: 1px solid var(--line);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n overflow: hidden;\n }\n\n .card-head {\n padding: 20px 22px 14px;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 14px;\n border-bottom: 1px solid var(--line);\n background: linear-gradient(180deg, #ffffff, #fbfdff);\n }\n\n .titleblock {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .doc-title {\n font-size: 18px;\n font-weight: 800;\n letter-spacing: .2px;\n margin: 0;\n }\n\n .doc-sub {\n margin: 0;\n color: var(--muted);\n font-size: 13px;\n }\n\n .meta {\n display: grid;\n grid-template-columns: 1fr;\n gap: 8px;\n min-width: 320px;\n width: 380px;\n }\n\n .field {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 10px;\n padding: 10px 12px;\n border: 1px solid var(--line);\n border-radius: 14px;\n background: #fff;\n }\n\n .k {\n font-size: 12px;\n color: var(--muted2);\n display: flex;\n flex-direction: column;\n gap: 2px;\n line-height: 1.15;\n }\n\n .k b {\n color: var(--text);\n font-weight: 700;\n font-size: 12px\n }\n\n .v {\n font-size: 12.5px;\n color: var(--text);\n min-width: 160px;\n text-align: right;\n }\n\n .editable {\n outline: none;\n min-height: 1em;\n }\n\n .editable:focus {\n border-radius: 10px;\n box-shadow: 0 0 0 4px rgba(10, 132, 255, .16);\n background: rgba(10, 132, 255, .06);\n padding: 2px 6px;\n margin-right: -6px;\n }\n\n .card-body {\n padding: 18px 22px 22px;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 14px;\n }\n\n .panel {\n border: 1px solid var(--line);\n border-radius: var(--radius2);\n padding: 14px 14px 12px;\n background: var(--soft);\n }\n\n .panel h3 {\n margin: 0 0 10px 0;\n font-size: 12px;\n letter-spacing: .25px;\n color: var(--muted2);\n text-transform: uppercase;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 10px;\n }\n\n .badge {\n font-size: 11px;\n padding: 4px 8px;\n border-radius: 999px;\n background: var(--chip);\n color: var(--muted);\n border: 1px solid var(--line);\n font-family: var(--mono);\n }\n\n .grid2 {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n }\n\n .mini {\n padding: 10px 12px;\n border: 1px solid var(--line);\n border-radius: 14px;\n background: #fff;\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .mini .label {\n font-size: 12px;\n color: var(--muted2);\n line-height: 1.1;\n }\n\n .mini .value {\n font-size: 13px;\n color: var(--text);\n min-height: 18px;\n }\n\n \/* Items table *\/\n .items {\n grid-column: 1 \/ -1;\n border: 1px solid var(--line);\n border-radius: var(--radius2);\n overflow: hidden;\n background: #fff;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n }\n\n thead th {\n background: var(--soft);\n color: var(--muted2);\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: .2px;\n padding: 12px 10px;\n border-bottom: 1px solid var(--line);\n text-align: left;\n }\n\n tbody td {\n padding: 10px 10px;\n border-bottom: 1px solid var(--line);\n vertical-align: top;\n font-size: 13px;\n }\n\n tbody tr:last-child td {\n border-bottom: none;\n }\n\n .right {\n text-align: right;\n }\n\n .center {\n text-align: center;\n }\n\n .mono {\n font-family: var(--mono);\n }\n\n .cell-edit {\n outline: none;\n border-radius: 10px;\n padding: 2px 6px;\n min-height: 18px;\n }\n\n .cell-edit:focus {\n box-shadow: 0 0 0 4px rgba(10, 132, 255, .16);\n background: rgba(10, 132, 255, .06);\n }\n\n .num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n }\n\n .hint {\n color: var(--muted2);\n font-size: 12px;\n margin-top: 8px;\n display: flex;\n justify-content: space-between;\n gap: 12px;\n flex-wrap: wrap;\n }\n\n .hint .pill {\n border: 1px dashed var(--line);\n background: var(--soft);\n padding: 6px 10px;\n border-radius: 999px;\n font-family: var(--mono);\n font-size: 11px;\n color: var(--muted);\n }\n\n \/* Summary *\/\n .footer-grid {\n display: grid;\n grid-template-columns: 1.15fr .85fr;\n gap: 14px;\n margin-top: 14px;\n }\n\n .notes {\n border: 1px solid var(--line);\n border-radius: var(--radius2);\n background: #fff;\n padding: 14px;\n min-height: 160px;\n }\n\n .notes h4 {\n margin: 0 0 10px 0;\n font-size: 12px;\n color: var(--muted2);\n text-transform: uppercase;\n letter-spacing: .2px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 8px;\n }\n\n .notes .content {\n color: var(--text);\n font-size: 13px;\n min-height: 110px;\n outline: none;\n border-radius: 12px;\n padding: 8px 10px;\n background: var(--soft);\n border: 1px solid var(--line);\n }\n\n .notes .content:focus {\n box-shadow: 0 0 0 4px rgba(10, 132, 255, .16);\n background: rgba(10, 132, 255, .06);\n }\n\n .notes-wide {\n grid-column: 1 \/ -1;\n }\n\n .important {\n border: 1px solid var(--line);\n border-radius: var(--radius2);\n background: #fff;\n padding: 14px;\n min-height: 160px;\n }\n\n .important h4 {\n margin: 0 0 10px 0;\n font-size: 12px;\n color: var(--muted2);\n text-transform: uppercase;\n letter-spacing: .2px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 8px;\n }\n\n .important-body {\n color: var(--text);\n font-size: 13px;\n min-height: 110px;\n outline: none;\n border-radius: 12px;\n padding: 10px 12px;\n background: var(--soft);\n border: 1px solid var(--line);\n line-height: 1.55;\n }\n\n .important-body:focus {\n box-shadow: 0 0 0 4px rgba(10, 132, 255, .16);\n background: rgba(10, 132, 255, .06);\n }\n\n .summary {\n border: 1px solid var(--line);\n border-radius: var(--radius2);\n background: #fff;\n padding: 14px;\n }\n\n .summary h4 {\n margin: 0 0 10px 0;\n font-size: 12px;\n color: var(--muted2);\n text-transform: uppercase;\n letter-spacing: .2px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .sumrow {\n display: flex;\n justify-content: space-between;\n gap: 10px;\n padding: 8px 0;\n border-bottom: 1px dashed var(--line);\n font-size: 13px;\n }\n\n .sumrow:last-child {\n border-bottom: none;\n }\n\n .sumrow strong {\n font-weight: 800;\n }\n\n .sumrow .label {\n color: var(--muted);\n line-height: 1.15;\n }\n\n .sumrow .value {\n font-variant-numeric: tabular-nums;\n }\n\n .total {\n margin-top: 8px;\n padding-top: 10px;\n border-top: 1px solid var(--line);\n }\n\n .grand {\n font-size: 15px;\n font-weight: 900;\n }\n\n \/* Footer legal *\/\n .legal {\n margin-top: 14px;\n border: 1px solid var(--line);\n border-radius: var(--radius2);\n background: var(--soft);\n padding: 12px 14px;\n color: var(--muted);\n font-size: 12px;\n line-height: 1.5;\n }\n\n \/* Print *\/\n @media print {\n .topbar {\n display: none !important;\n }\n\n body {\n background: #fff;\n }\n\n .wrap {\n margin: 0;\n padding: 0;\n }\n\n .card {\n box-shadow: none;\n border: none;\n border-radius: 0;\n }\n\n .card-head {\n border-bottom: 1px solid #ddd;\n }\n\n .panel {\n background: #fff;\n }\n\n .notes .content {\n background: #fff;\n }\n\n .hint {\n display: none;\n }\n\n .btn {\n display: none;\n }\n }\n\n \/* Responsive *\/\n @media (max-width: 920px) {\n .card-body {\n grid-template-columns: 1fr;\n }\n\n .meta {\n min-width: auto;\n width: 100%;\n }\n\n .footer-grid {\n grid-template-columns: 1fr;\n }\n }\n\n \/* Product picker *\/\n .rowpick {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .product-select {\n width: 100%;\n padding: 8px 10px;\n border: 1px solid var(--line);\n border-radius: 12px;\n background: #fff;\n color: var(--text);\n font-size: 12.5px;\n outline: none;\n }\n\n .product-select:focus {\n box-shadow: 0 0 0 4px rgba(10, 132, 255, .16);\n border-color: rgba(10, 132, 255, .35);\n }\n <\/style>\n<\/head>\n\n<body>\n <div class=\"wrap\">\n <div id=\"capture-area\" style=\"background:#fff; padding:10px; border-radius:18px;\">\n <div class=\"topbar\">\n <div class=\"brand\">\n <div class=\"logo\" aria-hidden=\"true\">\u0e21.\u0e2a<\/div>\n <div>\n <h1>MANUSUWONGMUNEE SEEUTA<\/h1>\n <div class=\"sub\">THAI AMULET SHOP \u2022 252 \u0e21.1 \u0e15.\u0e14\u0e2d\u0e19\u0e22\u0e32\u0e07 \u0e08.\u0e02\u0e2d\u0e19\u0e41\u0e01\u0e48\u0e19 \u0e2d.\u0e40\u0e21\u0e37\u0e2d\u0e07 40000 \u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28\u0e44\u0e17\u0e22 \u2022<\/div>\n <\/div>\n <\/div>\n <div class=\"actions\" data-html2canvas-ignore>\n <button class=\"btn\" id=\"btnAdd\">\u2795 \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e41\u0e16\u0e27<\/button>\n <button class=\"btn danger\" id=\"btnClear\">\u0e25\u0e49\u0e32\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \ud83d\uddd1\ufe0f<\/button>\n <button class=\"btn primary\" id=\"btnSubmit\">\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \ud83d\udcbe<\/button>\n <button class=\"btn\" id=\"btnHistory\">\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34 \ud83d\udd52<\/button>\n <button class=\"btn primary\" id=\"btnPrintPDF\">PDF \ud83d\udcc4<\/button>\n <button class=\"btn primary\" id=\"btnPrintJPG\">JPG \ud83c\udfde\ufe0f<\/button>\n <\/div>\n <\/div>\n\n <div class=\"card\" id=\"invoice\">\n <div class=\"card-head\">\n <div class=\"titleblock\">\n <p class=\"doc-title\">\u0e43\u0e1a\u0e01\u0e33\u0e01\u0e31\u0e1a\u0e20\u0e32\u0e29\u0e35 \u0e43\u0e1a\u0e41\u0e08\u0e49\u0e07\u0e2b\u0e19\u0e35\u0e49 \u0e43\u0e1a\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e23\u0e31\u0e1a\u0e40\u0e07\u0e34\u0e19 <span class=\"mono\"\n style=\"font-size:12px;color:var(--muted2);font-weight:700;\">Tax AND Sales Invoice<\/span><\/p>\n <p class=\"doc-sub\">\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e09\u0e1a\u0e31\u0e1a\u0e19\u0e35\u0e49\u0e08\u0e31\u0e14\u0e17\u0e33\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e2d\u0e07\u0e20\u0e32\u0e29\u0e32 \u2022 \u0e44\u0e17\u0e22\/\u0e2d\u0e31\u0e07\u0e01\u0e24\u0e29<\/p>\n <\/div>\n\n <div class=\"meta\">\n <div class=\"field\">\n <div class=\"k\">\n <b>\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23<\/b>\n <span>INV<\/span>\n <\/div>\n <div class=\"v editable mono\" contenteditable=\"true\" data-key=\"docNo\">\u0e52\u0e56-\u0e50\u0e50\u0e51<\/div>\n <\/div>\n\n <div class=\"field\">\n <div class=\"k\">\n <b>\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e2d\u0e2d\u0e01\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23<\/b>\n <span>\u0e1e.\u0e28<\/span>\n <\/div>\n <div class=\"v editable mono\" contenteditable=\"true\" data-key=\"issueDate\">\u0e1e.\u0e28 \u0e52\u0e55\u0e56\u0e59 \u0e40\u0e14\u0e37\u0e2d\u0e19 \u0e51 \u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 \u0e53<\/div>\n <\/div>\n\n <div class=\"field\">\n <div class=\"k\">\n <b>\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e0a\u0e33\u0e23\u0e30<\/b>\n <span>\u0e1e.\u0e28<\/span>\n <\/div>\n <div class=\"v editable mono\" contenteditable=\"true\" data-key=\"dueDate\">\u0e27\u0e48\u0e32\u0e07<\/div>\n <\/div>\n\n <div class=\"field\">\n <div class=\"k\">\n <b>\u0e2a\u0e01\u0e38\u0e25\u0e40\u0e07\u0e34\u0e19<\/b>\n <span>\ud83c\uddf2\ud83c\uddfe<\/span>\n <\/div>\n <div class=\"v editable mono\" contenteditable=\"true\" data-key=\"currency\">MYR<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card-body\">\n <div class=\"panel\">\n <h3>\u0e1c\u0e39\u0e49\u0e02\u0e32\u0e22 Seller <span class=\"badge\">\ud83d\udc66\ud83c\udffb<\/span><\/h3>\n <div class=\"grid2\">\n <div class=\"mini\">\n <div class=\"label\">\u0e0a\u0e37\u0e48\u0e2d\u0e1a\u0e23\u0e34\u0e29\u0e31\u0e17<\/div>\n <div class=\"value editable\" contenteditable=\"true\" data-key=\"sellerName\">Manusuwongmunee Seeuta (Thai\n Amulet Shop)<\/div>\n <\/div>\n <div class=\"mini\">\n <div class=\"label\">\u0e40\u0e25\u0e02\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e15\u0e31\u0e27\u0e1c\u0e39\u0e49\u0e40\u0e2a\u0e35\u0e22\u0e20\u0e32\u0e29\u0e35<\/div>\n <div class=\"value editable mono\" contenteditable=\"true\" data-key=\"sellerTaxId\">-<\/div>\n <\/div>\n <div class=\"mini\">\n <div class=\"label\">\u0e17\u0e35\u0e48\u0e2d\u0e22\u0e39\u0e48<\/div>\n <div class=\"value editable\" contenteditable=\"true\" data-key=\"sellerAddr\">252 \u0e21.1 \u0e15.\u0e14\u0e2d\u0e19\u0e22\u0e32\u0e07, \u0e08.\u0e02\u0e2d\u0e19\u0e41\u0e01\u0e48\u0e19,\n \u0e2d.\u0e40\u0e21\u0e37\u0e2d\u0e07, 40000 \u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28\u0e44\u0e17\u0e22<\/div>\n <\/div>\n <div class=\"mini\">\n <div class=\"label\">\u0e2d\u0e35\u0e40\u0e21\u0e25 \/ \u0e42\u0e17\u0e23<\/div>\n <div class=\"value editable\" contenteditable=\"true\" data-key=\"sellerContact\">+66<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"panel\">\n <h3>\u0e1c\u0e39\u0e49\u0e0b\u0e37\u0e49\u0e2d<span class=\"badge\">\ud83d\udc66\ud83c\udffb<\/span><\/h3>\n <div class=\"grid2\">\n <div class=\"mini\">\n <div class=\"label\">\u0e0a\u0e37\u0e48\u0e2d\u0e25\u0e39\u0e01\u0e04\u0e49\u0e32<\/div>\n <div class=\"value editable\" contenteditable=\"true\" data-key=\"buyerName\">LOUIS THAI International Group\n Sdn. Bhd.<\/div>\n <\/div>\n <div class=\"mini\">\n <div class=\"label\">\u0e40\u0e25\u0e02\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e15\u0e31\u0e27\u0e1c\u0e39\u0e49\u0e40\u0e2a\u0e35\u0e22\u0e20\u0e32\u0e29\u0e35<\/div>\n <div class=\"value editable mono\" contenteditable=\"true\" data-key=\"buyerTaxId\">C26839821060<\/div>\n <\/div>\n <div class=\"mini\">\n <div class=\"label\">\u0e17\u0e35\u0e48\u0e2d\u0e22\u0e39\u0e48<\/div>\n <div class=\"value editable\" contenteditable=\"true\" data-key=\"buyerAddr\">C-25 The Cube, Jalan Bandar\n Puteri\n 7\/15, Bandar Puteri, Puchong 47100 Selangor D.E., Malaysia.<\/div>\n <\/div>\n <div class=\"mini\">\n <div class=\"label\">\u0e2d\u0e35\u0e40\u0e21\u0e25 \/ \u0e42\u0e17\u0e23<\/div>\n <div class=\"value editable\" contenteditable=\"true\" data-key=\"buyerContact\">louis@louisthai.com \u2022 +60 111\n 622 3916<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"items\">\n <table aria-label=\"Invoice items\">\n <thead>\n <tr>\n <th style=\"width:52px\" class=\"center\">#<\/th>\n <th>\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14<\/th>\n <th style=\"width:120px\" class=\"center\">\u0e08\u0e33\u0e19\u0e27\u0e19 Qty<\/th>\n <th style=\"width:150px\" class=\"right\">\u0e23\u0e32\u0e04\u0e32\u0e15\u0e48\u0e2d\u0e2b\u0e19\u0e48\u0e27\u0e22 MYR<\/th>\n <th style=\"width:160px\" class=\"right\">\u0e08\u0e33\u0e19\u0e27\u0e19\u0e40\u0e07\u0e34\u0e19 MYR<\/th>\n <th style=\"width:64px\" class=\"center\">\ud83d\uddd1<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"rows\">\n <tr>\n <td class=\"center mono idx\">1<\/td>\n <td>\n <div class=\"rowpick\">\n <select class=\"product-select\" data-col=\"product\"><\/select>\n <div class=\"cell-edit\" contenteditable=\"true\" data-col=\"desc\">\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32<\/div>\n <\/div>\n <\/td>\n <td class=\"center\">\n <div class=\"cell-edit num mono\" contenteditable=\"true\" data-col=\"qty\">1<\/div>\n <\/td>\n <td class=\"right\">\n <div class=\"cell-edit num mono\" contenteditable=\"true\" data-col=\"price\">0.00<\/div>\n <\/td>\n <td class=\"right mono amount\">0.00<\/td>\n <td class=\"center\"><button class=\"btn danger\" style=\"padding:7px 10px\"\n data-action=\"remove\">\u0e25\u0e1a<\/button>\n <\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <div class=\"hint\">\n <div class=\"pill\">\u0e41\u0e01\u0e49\u0e44\u0e02\u0e44\u0e14\u0e49\u0e17\u0e31\u0e19\u0e17\u0e35<\/div>\n <div class=\"pill\">\u0e40\u0e25\u0e02\u0e17\u0e28\u0e19\u0e34\u0e22\u0e21<\/div>\n <div class=\"pill\">\u0e20\u0e32\u0e29\u0e35\u0e21\u0e39\u0e25\u0e04\u0e48\u0e32\u0e40\u0e1e\u0e34\u0e48\u0e21 <button class=\"btn\" id=\"btnAddInline\" style=\"padding:7px 10px;\">\u2795\n \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e41\u0e16\u0e27<\/button>\n <\/div>\n <\/div>\n\n <div class=\"notes notes-wide\">\n <h4>\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e2b\u0e15\u0e38<span class=\"badge\">\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e41\u0e01\u0e49\u0e44\u0e02\u0e44\u0e14\u0e49<\/span><\/h4>\n <div class=\"content\" contenteditable=\"true\" data-key=\"notes\">\u2022 \u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02\u0e01\u0e32\u0e23\u0e0a\u0e33\u0e23\u0e30\u0e40\u0e07\u0e34\u0e19: \u0e0a\u0e33\u0e23\u0e30\u0e20\u0e32\u0e22\u0e43\u0e19\u0e01\u0e33\u0e2b\u0e19\u0e14 \u2022\n \u0e42\u0e2d\u0e19\u0e40\u0e07\u0e34\u0e19: \u0e18\u0e19\u0e32\u0e04\u0e32\u0e23\u0e01\u0e23\u0e38\u0e07\u0e40\u0e17\u0e1e 370 439 7003 \u2022 \u0e02\u0e2d\u0e1a\u0e04\u0e38\u0e13\u0e17\u0e35\u0e48\u0e2d\u0e38\u0e14\u0e2b\u0e19\u0e38\u0e19<\/div>\n <\/div>\n\n\n\n <div class=\"footer-grid\">\n <div class=\"important\">\n <h4>\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e2b\u0e15\u0e38\u0e2a\u0e33\u0e04\u0e31\u0e0d<span class=\"badge\">\u2139\ufe0f<\/span><\/h4>\n <div class=\"important-body\" contenteditable=\"true\" data-key=\"important\"><b>\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e2b\u0e15\u0e38\u0e2a\u0e33\u0e04\u0e31\u0e0d:<\/b>\n \u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e19\u0e35\u0e49\u0e40\u0e1b\u0e47\u0e19\u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b\n \u0e01\u0e23\u0e38\u0e13\u0e32\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e43\u0e2b\u0e49\u0e2a\u0e2d\u0e14\u0e04\u0e25\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e1a\u0e02\u0e49\u0e2d\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e20\u0e32\u0e29\u0e35\u0e02\u0e2d\u0e07\u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28\u0e44\u0e17\u0e22\u0e41\u0e25\u0e30\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e02\u0e2d\u0e07\u0e1a\u0e23\u0e34\u0e29\u0e31\u0e17\u0e04\u0e38\u0e13 \u2022 <\/div>\n <\/div>\n\n <div class=\"summary\">\n <h4>\u0e2a\u0e23\u0e38\u0e1b\u0e22\u0e2d\u0e14<span class=\"badge\">\u0e19\u0e33\u0e44\u0e1b\u0e43\u0e0a\u0e49<\/span><\/h4>\n\n <div class=\"sumrow\">\n <div class=\"label\">\u0e22\u0e2d\u0e14\u0e23\u0e27\u0e21<\/div>\n <div class=\"value mono\" id=\"subtotal\">0.00<\/div>\n <\/div>\n\n <div class=\"sumrow\">\n <div class=\"label\">\n \u0e2a\u0e48\u0e27\u0e19\u0e25\u0e14\n <div style=\"font-size:11px;color:var(--muted2)\">MYR<\/div>\n <\/div>\n <div class=\"value mono\">\n <span contenteditable=\"true\" class=\"cell-edit num mono\" id=\"discount\"\n style=\"display:inline-block; min-width:88px; text-align:right;\">0<\/span>\n <\/div>\n <\/div>\n\n <div class=\"sumrow\">\n <div class=\"label\">\n VAT 7% (\u0e20\u0e32\u0e29\u0e35\u0e21\u0e39\u0e25\u0e04\u0e48\u0e32\u0e40\u0e1e\u0e34\u0e48\u0e21)\n <div style=\"font-size:11px;color:var(--muted2)\">\ud83d\udd18<\/div>\n <\/div>\n <div class=\"value mono\" style=\"display:flex; align-items:center; gap:10px; justify-content:flex-end;\">\n <label style=\"display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;\">\n <input type=\"checkbox\" id=\"vatOn\" checked \/>\n \u0e19\u0e33\u0e44\u0e1b\u0e43\u0e0a\u0e49\n <\/label>\n <span id=\"vat\" class=\"mono\">0.00<\/span>\n <\/div>\n <\/div>\n\n <div class=\"sumrow total\">\n <div class=\"label grand\">\u0e22\u0e2d\u0e14\u0e2a\u0e38\u0e17\u0e18\u0e34<\/div>\n <div class=\"value mono grand\" id=\"grand\">0.00<\/div>\n <\/div>\n\n <div class=\"sumrow\" style=\"border-bottom:none; padding-bottom:0;\">\n <div class=\"label\">\u0e08\u0e33\u0e19\u0e27\u0e19\u0e40\u0e07\u0e34\u0e19\u0e40\u0e1b\u0e47\u0e19\u0e15\u0e31\u0e27\u0e2d\u0e31\u0e01\u0e29\u0e23<\/div>\n <div class=\"value\" style=\"max-width: 260px; text-align:right;\">\n <span id=\"wordsTH\" style=\"display:block; font-size:12px; color:var(--muted);\">\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e1a\u0e32\u0e17\u0e16\u0e49\u0e27\u0e19<\/span>\n <span id=\"wordsEN\"\n style=\"display:block; font-size:12px; color:var(--muted);\"><strong>\u0e23\u0e34\u0e07\u0e01\u0e34\u0e15\u0e21\u0e32\u0e40\u0e25\u0e40\u0e0b\u0e35\u0e22\u0e40\u0e17\u0e48\u0e32\u0e19\u0e31\u0e49\u0e19<\/strong><\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div id=\"historyModal\"\n style=\"display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1000; overflow-y:auto; padding:20px;\">\n <div\n style=\"background:#fff; max-width:800px; margin:20px auto; border-radius:18px; padding:24px; box-shadow:0 20px 50px rgba(0,0,0,0.2); position:relative;\">\n <div style=\"display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;\">\n <h2 style=\"margin:0; font-size:20px;\">\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01 (History)<\/h2>\n <button class=\"btn\" onclick=\"document.getElementById('historyModal').style.display='none'\">\u0e1b\u0e34\u0e14 (Close)\n X<\/button>\n <\/div>\n <div id=\"historyList\" style=\"display:grid; gap:12px;\">\n \n <p>Loading...<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/html2canvas.hertzen.com\/dist\/html2canvas.min.js\"><\/script>\n <script>\n\n const fmt2 = (n) => (isFinite(n) ? n.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : \"0.00\");\n const parseNum = (txt) => {\n if (!txt) return 0;\n const t = String(txt).replace(\/,\/g, '').trim();\n const n = Number(t);\n return isFinite(n) ? n : 0;\n };\n\n\n \/\/ ---------- product catalog (from your CSV) ----------\n const PRODUCTS = [{ \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e2a\u0e33\u0e14\u0e27\u0e07\u0e43\u0e2b\u0e0d\u0e48 \u0e40\u0e2a\u0e23\u0e34\u0e21\u0e14\u0e27\u0e07\u0e2a\u0e39\u0e15\u0e23 Super X\", \"en\": \"Witthi Serm Dung Yai Super X Witthi Wai Kroo\", \"cn\": \"\u8d85\u7ea7X\u7248\u5347\u8fd0\", \"price\": 800.0 }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e14\u0e27\u0e07\u0e42\u0e1a\u0e23\u0e32\u0e13 9 \u0e0a\u0e31\u0e49\u0e19 (\u0e40\u0e09\u0e1e\u0e32\u0e30)\", \"en\": \"Witthi 9 Chan (W9C)\", \"cn\": \"\u72ec\u5bb6\u53e4\u8001\u6539\u8fd0\u5347\u8fd0\u5927\u6cd5\u4e5d\u5c42\u5854\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e23\u0e32\u0e2b\u0e39 (\u0e40\u0e09\u0e1e\u0e32\u0e30)\", \"en\": \"Witthi Song Rahu\", \"cn\": \"\u72ec\u5bb6 \u62c9\u80e1\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e40\u0e23\u0e35\u0e22\u0e01\u0e17\u0e23\u0e31\u0e1e\u0e22\u0e4c 3 in 1\", \"en\": \"Witthi Jud Tien 3 in 1\", \"cn\": \"3\u54081 \u62db\u8d22\u8721\u70db\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e15\u0e31\u0e27\u0e41\u0e17\u0e19\u0e40\u0e23\u0e35\u0e22\u0e01\u0e17\u0e23\u0e31\u0e1e\u0e22\u0e4c\u0e42\u0e1a\u0e23\u0e32\u0e13\", \"en\": \"Witthi Liap Sap\", \"cn\": \"\u6cf0\u56fd\u53e4\u6cd5\u66ff\u8eab\u62db\u8d22\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e2a\u0e32\u0e21\u0e40\u0e2b\u0e25\u0e35\u0e48\u0e22\u0e21\", \"en\": \"Witthi 3 Liam\", \"cn\": \"\u4e00\u5c42\u5854\", \"price\": null }, { \"th\": \"\u0e04\u0e32\u0e16\u0e32\u0e17\u0e30\u0e25\u0e38\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e40\u0e23\u0e35\u0e22\u0e01\u0e17\u0e23\u0e31\u0e1e\u0e22\u0e4c\", \"en\": \"Sak Yant Liap Sap (Transparent)\", \"cn\": \"\u523a\u900f\u660e\u62db\u8d22\u5492\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e41\u0e1c\u0e48\u0e19\u0e17\u0e2d\u0e07 108\", \"en\": \"Witthi Penthong 108\", \"cn\": \"\u67ec\u57d4\u5be8 \u62db\u8d22 \u4eba\u7f18\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e16\u0e35\u0e2a\u0e32\u0e23\u0e34\u0e01\u0e32 (\u0e40\u0e2a\u0e19\u0e48\u0e2b\u0e4c\u0e27\u0e32\u0e08\u0e32)\", \"en\": \"Witthi Sarika\", \"cn\": \"\u5229\u820c\u964d\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e44\u0e02\u0e48\u0e17\u0e2d\u0e14\", \"en\": \"Witthi Tod-Kai\", \"cn\": \"\u9e21\u86cb\u6539\u8fd0\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e42\u0e1e\u0e25\u0e32\u0e1c\u0e25\u0e44\u0e21\u0e49 9 \u0e22\u0e31\u0e07\", \"en\": \"Witthi Polamai 9 Yang\", \"cn\": \"9\u6837\u6c34\u679c\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35 \u0e08\u0e38\u0e14\u0e40\u0e17\u0e35\u0e22\u0e19 \u0e40\u0e2a\u0e23\u0e34\u0e21\u0e14\u0e27\u0e07 (\u0e40\u0e17\u0e35\u0e22\u0e19\u0e40\u0e1b\u0e34\u0e14\u0e14\u0e27\u0e07 \u0e1b\u0e32\u0e0b\u0e32\u0e40\u0e0b\u0e35\u0e22\u0e19)\", \"en\": \"Witthi Pasa Sean Jud Tiean\", \"cn\": \"\u72ec\u5bb6 Pasa Sean \u8d77\u8fd0\u8721\u70db\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e2a\u0e48\u0e07\u0e2d\u0e32\u0e40\u0e25\u0e47\u0e14 \u0e41\u0e01\u0e49\u0e04\u0e19\u0e01\u0e31\u0e19\u0e14\u0e27\u0e07\", \"en\": \"Witthi Lai Arit\", \"cn\": \"\u6539\u8fd0\u5c0f\u4eba\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e40\u0e04\u0e25\u0e37\u0e2d\u0e1a\u0e2a\u0e35 (\u0e1e\u0e34\u0e18\u0e35\u0e04\u0e23\u0e2d\u0e1a\u0e04\u0e23\u0e39\u0e1e\u0e23\u0e30\u0e1e\u0e34\u0e23\u0e32\u0e1e)\", \"en\": \"Witthi Krob Sin\", \"cn\": \"Phra Pirap \u704c\u9876\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e2a\u0e21\u0e1a\u0e39\u0e23\u0e13\u0e4c\u0e1b\u0e32\u0e23\u0e21\u0e35 \/\u0e27\u0e34\u0e18\u0e35 \u0e2a\u0e27\u0e34\u0e0d\u0e0d\u0e32\u0e13 (\u0e2d\u0e38\u0e17\u0e34\u0e28\u0e1a\u0e38\u0e0d\u0e43\u0e2b\u0e49\u0e1c\u0e39\u0e49\u0e25\u0e48\u0e27\u0e07\u0e25\u0e31\u0e1a)\", \"en\": \"Witthi Serm Bun Parami (Witthi Song Win Yant)\", \"cn\": \"\u4ea1\u4eba\u529f\u5fb7\u7948\u798f\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e21\u0e32\u0e01\u0e34\u0e19\u0e1b\u0e31\u0e0d\u0e0d\u0e32\", \"en\": \"Witthi Ma Kin Panya \/ Witthi MA Kin Kwam Kit\", \"cn\": \"\u72ec\u5bb6 MA KIN PANYA \u72d7\u5403\u8111\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e04\u0e39\u0e48\u0e41\u0e21\u0e48\u0e19\u0e49\u0e33 \/ \u0e40\u0e2a\u0e19\u0e48\u0e2b\u0e4c\u0e41\u0e21\u0e48\u0e19\u0e49\u0e33 (\u0e41\u0e2b\u0e48\u0e07\u0e41\u0e23\u0e01\u0e43\u0e19\u0e21\u0e32\u0e40\u0e25\u0e40\u0e0b\u0e35\u0e22)\", \"en\": \"Witthi Ku Mea Nam\", \"cn\": \"\u5168\u5927\u9a6c\u7b2c\u4e00\u5bb6\u62e5\u6709\u6cb3\u4e0a\u60c5\u964d\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e27\u0e07\u0e48\u0e49\u0e07\u0e40\u0e25\u0e47\u0e1a\u0e0b\u0e31\u0e1a\", \"en\": \"Witthi Ngan Liap Sap\", \"cn\": \"\u62cd\u5a74\u62db\u8d22\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e1c\u0e35\u0e40\u0e21\u0e23\u0e38(\u0e27\u0e34\u0e18\u0e35 \u0e14\u0e27\u0e07 \u0e15\u0e1a)\", \"en\": \"Witthi Dueng Dop\", \"cn\": \"\u731b\u9b3c\u706b\u5316\u5e7f\u964d\u8fd0\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e40\u0e01\u0e23\u0e32\u0e30\u0e04\u0e38\u0e49\u0e21\u0e04\u0e23\u0e2d\u0e07\", \"en\": \"Protective Spiritual Shield\", \"cn\": \"\u62a4\u8eab\u7f69\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e40\u0e25\u0e35\u0e22\u0e1a\u0e17\u0e23\u0e31\u0e1e\u0e22\u0e4c\u0e2a\u0e35\u0e1f\u0e49\u0e32\u0e2b\u0e21\u0e39 (\u0e1c\u0e35\u0e2a\u0e32\u0e22\u0e02\u0e32\u0e27\u0e40\u0e23\u0e35\u0e22\u0e01\u0e42\u0e0a\u0e04\u0e25\u0e32\u0e20\u0e43\u0e2b\u0e0d\u0e48)\", \"en\": \"Witthi Liap Sap 4 Hua Mu\", \"cn\": \"\u9633\u9b3c\u62db\u504f\u8d22\u5927\u578b\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e40\u0e25\u0e35\u0e22\u0e1a\u0e17\u0e23\u0e31\u0e1e\u0e22\u0e4c \u0e2a\u0e2d\u0e07 \u0e1f\u0e49\u0e32\u0e2b\u0e21\u0e39 (\u0e1c\u0e35\u0e2a\u0e32\u0e22\u0e02\u0e32\u0e27\u0e40\u0e23\u0e35\u0e22\u0e01\u0e42\u0e0a\u0e04\u0e25\u0e32\u0e20\u0e43\u0e2b\u0e0d\u0e48)\", \"en\": \"Witthi Liap Sap 2 Hua Mu\", \"cn\": \"Ritual\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e1b\u0e34\u0e14\u0e17\u0e2d\u0e07 108 \u0e41\u0e1c\u0e48\u0e19\", \"en\": \"Witthi Penthong 108\", \"cn\": \"108\u7247\u91d1\u7b94\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e15\u0e31\u0e01\u0e17\u0e23\u0e31\u0e1e\u0e22\u0e4c (\u0e40\u0e09\u0e1e\u0e32\u0e30)\", \"en\": \"Witthi Tak Sung\", \"cn\": \"\u72ec\u5bb6 TAK SUNG\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35 9 \u0e2b\u0e49\u0e2d\u0e07\/\u0e0a\u0e48\u0e2d\u0e07\", \"en\": \"Witthi 9 Hong\/Chong\", \"cn\": \"\u4e5d\u5bab\u683c\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e2a\u0e33\u0e23\u0e27\u0e21\u0e14\u0e27\u0e07\u0e04\u0e39\u0e48\", \"en\": \"Witthi Serm Dung Ku\", \"cn\": \"SERM DUNG KU \u53cc\u65b9\u7231\u60c5\u5347\u8fd0\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e2a\u0e33\u0e23\u0e27\u0e21 \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e14\u0e27\u0e07\u0e2b\u0e31\u0e27\u0e2b\u0e21\u0e39 2 \u0e2b\u0e31\u0e27\", \"en\": \"Witthi Serm Dung 4 Hua Mu\", \"cn\": \"2\u732a\u5934\u589e\u8fd0\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e2a\u0e33\u0e23\u0e27\u0e21\u0e14\u0e27\u0e07 \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e14\u0e27\u0e07\u0e2b\u0e31\u0e27\u0e2b\u0e21\u0e39 4 \u0e2b\u0e31\u0e27\", \"en\": \"Witthi Serm Dung 4 Hua Mu\", \"cn\": \"4\u732a\u5934\u589e\u8fd0\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e04\u0e23\u0e39\u0e0a\u0e48\u0e27\u0e22\", \"en\": \"Witthi Kroo Chui\", \"cn\": \"KROO CHUI\u7956\u5e08\u7948\u798f\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e41\u0e21\u0e48\u0e04\u0e23\u0e39\u0e14\u0e2d\u0e01\u0e44\u0e21\u0e49\u0e41\u0e14\u0e07\", \"en\": \"Witthi Mae Kroo Dok Mai Deng\", \"cn\": \"Mea Kroo \u5973\u795e\", \"price\": null }];\n\n function productLabel(p) {\n const th = (p.th || \"\").trim();\n const en = (p.en || \"\").trim();\n if (th && en) return `${th} \/ ${en}`;\n return th || en || \"Unnamed product\";\n }\n\n function populateSelect(sel) {\n if (!sel || sel.dataset.filled === \"1\") return;\n sel.innerHTML = \"\";\n const ph = document.createElement(\"option\");\n ph.value = \"\";\n ph.textContent = \"Select product\u2026 \/ \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u2026\";\n sel.appendChild(ph);\n\n PRODUCTS.forEach((p, i) => {\n const opt = document.createElement(\"option\");\n opt.value = String(i);\n opt.textContent = productLabel(p);\n sel.appendChild(opt);\n });\n sel.dataset.filled = \"1\";\n }\n function renumber() {\n document.querySelectorAll(\"#rows .idx\").forEach((el, i) => el.textContent = String(i + 1));\n }\n\n function calcRow(tr) {\n const qty = parseNum(tr.querySelector('[data-col=\"qty\"]')?.textContent);\n const price = parseNum(tr.querySelector('[data-col=\"price\"]')?.textContent);\n const amount = qty * price;\n tr.querySelector(\".amount\").textContent = fmt2(amount);\n return amount;\n }\n\n function calcAll() {\n let sub = 0;\n document.querySelectorAll(\"#rows tr\").forEach(tr => sub += calcRow(tr));\n document.getElementById(\"subtotal\").textContent = fmt2(sub);\n\n const discRaw = parseNum(document.getElementById(\"discount\").textContent);\n \/\/ Discount rule: if <=100 treat as %, if >100 treat as fixed THB\n const discountValue = (discRaw <= 100) ? (sub * (discRaw \/ 100)) : discRaw;\n const afterDisc = Math.max(sub - discountValue, 0);\n\n const vatEnabled = document.getElementById(\"vatOn\").checked;\n const vat = vatEnabled ? afterDisc * 0.07 : 0;\n\n const grand = afterDisc + vat;\n\n document.getElementById(\"vat\").textContent = fmt2(vat);\n document.getElementById(\"grand\").textContent = fmt2(grand);\n\n document.getElementById(\"wordsTH\").textContent = thaiBahtText(grand);\n document.getElementById(\"wordsEN\").textContent = englishBahtText(grand);\n }\n\n function bindRow(tr) {\n tr.querySelectorAll('[contenteditable=\"true\"]').forEach(el => {\n el.addEventListener(\"input\", calcAll);\n el.addEventListener(\"blur\", () => {\n const col = el.getAttribute(\"data-col\");\n if (col === \"qty\" || col === \"price\") {\n const n = parseNum(el.textContent);\n el.textContent = (col === \"qty\") ? String(n) : fmt2(n);\n }\n calcAll();\n });\n });\n\n const rm = tr.querySelector('[data-action=\"remove\"]');\n if (rm) {\n rm.addEventListener(\"click\", () => {\n const rows = document.querySelectorAll(\"#rows tr\");\n if (rows.length === 1) {\n tr.querySelector('[data-col=\"desc\"]').textContent = \"\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\/\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32 (TH) \u2014 Service\/Product (EN)\";\n tr.querySelector('[data-col=\"qty\"]').textContent = \"1\";\n tr.querySelector('[data-col=\"price\"]').textContent = \"0.00\";\n } else {\n tr.remove();\n }\n renumber();\n calcAll();\n });\n }\n }\n\n document.getElementById(\"btnAdd\").addEventListener(\"click\", () => {\n const tbody = document.getElementById(\"rows\");\n const tr = document.createElement(\"tr\");\n tr.innerHTML = `\n <td class=\"center mono idx\">0<\/td>\n <td><div class=\"rowpick\"><select class=\"product-select\" data-col=\"product\"><\/select><div class=\"cell-edit\" contenteditable=\"true\" data-col=\"desc\">\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e43\u0e2b\u0e21\u0e48 (TH) \u2014 New item (EN)<\/div><\/div><\/td>\n <td class=\"center\"><div class=\"cell-edit num mono\" contenteditable=\"true\" data-col=\"qty\">1<\/div><\/td>\n <td class=\"right\"><div class=\"cell-edit num mono\" contenteditable=\"true\" data-col=\"price\">0.00<\/div><\/td>\n <td class=\"right mono amount\">0.00<\/td>\n <td class=\"center\"><button class=\"btn danger\" style=\"padding:7px 10px\" data-action=\"remove\">Delete<\/button><\/td>\n `;\n tbody.appendChild(tr);\n bindRow(tr);\n renumber();\n calcAll();\n });\n\n \/\/ Inline add button inside the table area\n const btnAddInline = document.getElementById('btnAddInline');\n if (btnAddInline) { btnAddInline.addEventListener('click', () => document.getElementById('btnAdd').click()); }\n\n\n document.getElementById(\"btnClear\").addEventListener(\"click\", () => {\n document.querySelectorAll('[data-key]').forEach(el => {\n if (el.getAttribute('data-key') === 'currency') return;\n if (el.getAttribute('data-key') === 'issueDate' || el.getAttribute('data-key') === 'dueDate') return;\n el.textContent = '';\n });\n const tbody = document.getElementById(\"rows\");\n tbody.innerHTML = '';\n const tr = document.createElement(\"tr\");\n tr.innerHTML = `\n <td class=\"center mono idx\">1<\/td>\n <td><div class=\"rowpick\"><select class=\"product-select\" data-col=\"product\"><\/select><div class=\"cell-edit\" contenteditable=\"true\" data-col=\"desc\">\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\/\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32 (TH) \u2014 Service\/Product (EN)<\/div><\/div><\/td>\n <td class=\"center\"><div class=\"cell-edit num mono\" contenteditable=\"true\" data-col=\"qty\">1<\/div><\/td>\n <td class=\"right\"><div class=\"cell-edit num mono\" contenteditable=\"true\" data-col=\"price\">0.00<\/div><\/td>\n <td class=\"right mono amount\">0.00<\/td>\n <td class=\"center\"><button class=\"btn danger\" style=\"padding:7px 10px\" data-action=\"remove\">Delete<\/button><\/td>\n `;\n tbody.appendChild(tr);\n bindRow(tr);\n document.getElementById(\"discount\").textContent = \"0\";\n document.getElementById(\"vatOn\").checked = true;\n renumber();\n calcAll();\n });\n\n \/\/ document.getElementById(\"btnPrint\").addEventListener(\"click\", () => window.print());\n\n document.getElementById(\"discount\").addEventListener(\"input\", calcAll);\n document.getElementById(\"discount\").addEventListener(\"blur\", () => {\n const n = parseNum(document.getElementById(\"discount\").textContent);\n document.getElementById(\"discount\").textContent = String(n);\n calcAll();\n });\n document.getElementById(\"vatOn\").addEventListener(\"change\", calcAll);\n\n bindRow(document.querySelector(\"#rows tr\"));\n calcAll();\n\n function englishBahtText(amount) {\n const a = Math.round(amount * 100) \/ 100;\n const baht = Math.floor(a);\n const satang = Math.round((a - baht) * 100);\n\n const b = (baht === 0) ? \"Zero\" : toWordsEN(baht);\n if (satang === 0) return `${b} Baht Only`;\n const s = toWordsEN(satang);\n return `${b} Baht and ${s} Satang`;\n }\n\n function thaiBahtText(amount) {\n const a = Math.round(amount * 100) \/ 100;\n const baht = Math.floor(a);\n const satang = Math.round((a - baht) * 100);\n\n const b = (baht === 0) ? \"\u0e28\u0e39\u0e19\u0e22\u0e4c\" : toWordsTH(baht);\n if (satang === 0) return `${b}\u0e1a\u0e32\u0e17\u0e16\u0e49\u0e27\u0e19`;\n const s = toWordsTH(satang);\n return `${b}\u0e1a\u0e32\u0e17${s}\u0e2a\u0e15\u0e32\u0e07\u0e04\u0e4c`;\n }\n\n function toWordsEN(num) {\n const ones = [\"\", \"One\", \"Two\", \"Three\", \"Four\", \"Five\", \"Six\", \"Seven\", \"Eight\", \"Nine\"];\n const teens = [\"Ten\", \"Eleven\", \"Twelve\", \"Thirteen\", \"Fourteen\", \"Fifteen\", \"Sixteen\", \"Seventeen\", \"Eighteen\", \"Nineteen\"];\n const tens = [\"\", \"\", \"Twenty\", \"Thirty\", \"Forty\", \"Fifty\", \"Sixty\", \"Seventy\", \"Eighty\", \"Ninety\"];\n\n function chunk(n) {\n let out = [];\n const h = Math.floor(n \/ 100);\n const r = n % 100;\n if (h) out.push(ones[h] + \" Hundred\");\n if (r) {\n if (r < 10) out.push(ones[r]);\n else if (r < 20) out.push(teens[r - 10]);\n else {\n const t = Math.floor(r \/ 10);\n const o = r % 10;\n out.push(tens[t] + (o ? (\" \" + ones[o]) : \"\"));\n }\n }\n return out.join(\" \");\n }\n\n if (num === 0) return \"Zero\";\n const scales = [\n { v: 1e9, n: \"Billion\" },\n { v: 1e6, n: \"Million\" },\n { v: 1e3, n: \"Thousand\" },\n { v: 1, n: \"\" }\n ];\n let n = num;\n let parts = [];\n for (const s of scales) {\n if (n >= s.v) {\n const c = Math.floor(n \/ s.v);\n n = n % s.v;\n const p = chunk(c);\n if (p) parts.push(p + (s.n ? (\" \" + s.n) : \"\"));\n }\n }\n return parts.join(\" \").replace(\/\\s+\/g, \" \").trim();\n }\n\n function toWordsTH(num) {\n const digit = [\"\u0e28\u0e39\u0e19\u0e22\u0e4c\", \"\u0e2b\u0e19\u0e36\u0e48\u0e07\", \"\u0e2a\u0e2d\u0e07\", \"\u0e2a\u0e32\u0e21\", \"\u0e2a\u0e35\u0e48\", \"\u0e2b\u0e49\u0e32\", \"\u0e2b\u0e01\", \"\u0e40\u0e08\u0e47\u0e14\", \"\u0e41\u0e1b\u0e14\", \"\u0e40\u0e01\u0e49\u0e32\"];\n function readUnderMillion(n) {\n let out = \"\";\n const s = String(n).padStart(6, '0');\n const d = s.split(\"\").map(x => Number(x));\n const u = [\"\u0e41\u0e2a\u0e19\", \"\u0e2b\u0e21\u0e37\u0e48\u0e19\", \"\u0e1e\u0e31\u0e19\", \"\u0e23\u0e49\u0e2d\u0e22\", \"\u0e2a\u0e34\u0e1a\", \"\"];\n for (let i = 0; i < 6; i++) {\n const val = d[i];\n const pos = u[i];\n if (val === 0) continue;\n if (pos === \"\u0e2a\u0e34\u0e1a\") {\n if (val === 1) out += \"\u0e2a\u0e34\u0e1a\";\n else if (val === 2) out += \"\u0e22\u0e35\u0e48\u0e2a\u0e34\u0e1a\";\n else out += digit[val] + \"\u0e2a\u0e34\u0e1a\";\n } else if (pos === \"\") {\n if (val === 1 && out !== \"\") out += \"\u0e40\u0e2d\u0e47\u0e14\";\n else out += digit[val];\n } else {\n out += digit[val] + pos;\n }\n }\n return out || \"\u0e28\u0e39\u0e19\u0e22\u0e4c\";\n }\n\n if (num === 0) return \"\u0e28\u0e39\u0e19\u0e22\u0e4c\";\n let n = num;\n let parts = [];\n let millionIndex = 0;\n while (n > 0) {\n const chunk = n % 1000000;\n if (chunk !== 0) {\n let text = readUnderMillion(chunk);\n if (millionIndex > 0) text += \"\u0e25\u0e49\u0e32\u0e19\".repeat(millionIndex);\n parts.unshift(text);\n }\n n = Math.floor(n \/ 1000000);\n millionIndex++;\n }\n return parts.join(\"\");\n }\n\n \/\/ --- NEW INTEGRATION LOGIC ---\n const WEB_APP_URL = \"https:\/\/script.google.com\/macros\/s\/AKfycbwrO3CHXlzYsK1GU70BTRLaG4Xvp_jfkQ9STNFXgliAg6R637A879AU4uie6CG2_SWRCA\/exec\";\n const TARGET_SHEET = \"MANUSUWONGMUNEE_SEEUTA\";\n\n function getFormData() {\n const data = {};\n document.querySelectorAll('[data-key]').forEach(el => {\n data[el.getAttribute('data-key')] = el.textContent.trim();\n });\n\n data.subtotal = parseNum(document.getElementById('subtotal').textContent);\n data.discount = parseNum(document.getElementById('discount').textContent);\n data.vat = parseNum(document.getElementById('vat').textContent);\n data.grand = parseNum(document.getElementById('grand').textContent);\n data.vatEnabled = document.getElementById('vatOn').checked;\n\n data.items = [];\n document.querySelectorAll('#rows tr').forEach(tr => {\n data.items.push({\n desc: tr.querySelector('[data-col=\"desc\"]').textContent.trim(),\n qty: parseNum(tr.querySelector('[data-col=\"qty\"]').textContent),\n price: parseNum(tr.querySelector('[data-col=\"price\"]').textContent),\n amount: parseNum(tr.querySelector('.amount').textContent)\n });\n });\n data.target_sheet = TARGET_SHEET;\n return data;\n }\n\n document.getElementById('btnSubmit').addEventListener('click', async function () {\n const btn = this;\n const originalText = btn.innerHTML;\n btn.disabled = true;\n btn.innerHTML = \"\u0e01\u0e33\u0e25\u0e31\u0e07\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01... \u23f3\";\n\n const data = getFormData();\n console.log(\"Submitting:\", data);\n\n try {\n \/\/ Standard POST to Apps Script\n await fetch(WEB_APP_URL, {\n method: 'POST',\n mode: 'no-cors',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify(data)\n });\n alert(\"\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22\u0e41\u0e25\u0e49\u0e27 (Submitted to Sheet!)\");\n } catch (err) {\n console.error(err);\n alert(\"\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01: \" + err.message);\n } finally {\n btn.disabled = false;\n btn.innerHTML = originalText;\n }\n });\n\n document.getElementById('btnHistory').addEventListener('click', async function () {\n const modal = document.getElementById('historyModal');\n const list = document.getElementById('historyList');\n modal.style.display = 'block';\n list.innerHTML = '<p>\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34... (Loading history...)<\/p>';\n\n try {\n const resp = await fetch(`${WEB_APP_URL}?target_sheet=${TARGET_SHEET}&action=read`);\n const rows = await resp.json();\n\n if (!rows || rows.length === 0) {\n list.innerHTML = '<p>\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34 (No history found)<\/p>';\n return;\n }\n\n window._historyData = rows; \/\/ Store globally for access\n list.innerHTML = '';\n rows.forEach((row, idx) => {\n const item = document.createElement('div');\n item.style = \"border:1px solid var(--line); padding:14px; border-radius:12px; background:var(--soft); display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;\";\n\n \/\/ Handle Timestamp formatting\n let dateStr = row[\"Timestamp\"];\n try { if (dateStr) dateStr = new Date(dateStr).toLocaleString(); } catch (e) { }\n\n item.innerHTML = `\n <div style=\"flex:1; padding-right:12px;\">\n <div style=\"font-weight:700; font-size:14px; color:var(--text);\">${row[\"Invoice No\"] || 'No No.'} - ${row[\"Buyer Name\"] || 'Unknown Buyer'}<\/div>\n <div style=\"font-size:12px; color:var(--muted); margin-top:4px;\">\n ${dateStr} | <b>${fmt2(row[\"Grand Total\"])} ${row[\"Currency\"] || 'MYR'}<\/b>\n <\/div>\n <\/div>\n <button class=\"btn primary\" style=\"padding:8px 16px; font-size:12px;\" onclick=\"restoreByIndex(${idx})\">Restore \ud83d\udd04<\/button>\n `;\n list.appendChild(item);\n });\n } catch (err) {\n console.error(err);\n list.innerHTML = `<p style=\"color:var(--danger);\">Error loading history: ${err.message}<\/p>`;\n }\n });\n\n window.restoreByIndex = function (idx) {\n if (!window._historyData || !window._historyData[idx]) return;\n const row = window._historyData[idx];\n restoreData(row[\"Full Data JSON\"]);\n };\n\n window.restoreData = function (jsonStr) {\n if (!jsonStr) return;\n try {\n const data = typeof jsonStr === 'string' ? JSON.parse(jsonStr) : jsonStr;\n\n \/\/ Restore meta fields\n document.querySelectorAll('[data-key]').forEach(el => {\n const key = el.getAttribute('data-key');\n if (data[key] !== undefined) el.textContent = data[key];\n });\n\n \/\/ Restore Summary fields\n document.getElementById('vatOn').checked = !!data.vatEnabled;\n document.getElementById('discount').textContent = data.discount || 0;\n\n \/\/ Restore Items\n const tbody = document.getElementById('rows');\n tbody.innerHTML = '';\n (data.items || []).forEach(item => {\n const tr = document.createElement('tr');\n tr.innerHTML = `\n <td class=\"center mono idx\">0<\/td>\n <td><div class=\"rowpick\"><select class=\"product-select\" data-col=\"product\"><\/select><div class=\"cell-edit\" contenteditable=\"true\" data-col=\"desc\">${item.desc}<\/div><\/div><\/td>\n <td class=\"center\"><div class=\"cell-edit num mono\" contenteditable=\"true\" data-col=\"qty\">${item.qty}<\/div><\/td>\n <td class=\"right\"><div class=\"cell-edit num mono\" contenteditable=\"true\" data-col=\"price\">${fmt2(item.price)}<\/div><\/td>\n <td class=\"right mono amount\">${fmt2(item.amount)}<\/td>\n <td class=\"center\"><button class=\"btn danger\" style=\"padding:7px 10px\" data-action=\"remove\">Delete<\/button><\/td>\n `;\n tbody.appendChild(tr);\n bindRow(tr);\n });\n\n renumber();\n calcAll();\n document.getElementById('historyModal').style.display = 'none';\n alert(\"\u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08! (Restore Success)\");\n } catch (err) {\n console.error(err);\n alert(\"Error restoring data: \" + err.message);\n }\n };\n\n \/\/ Export functions\n document.getElementById('btnPrintPDF').onclick = function () {\n const btn = this;\n const originalText = btn.innerHTML;\n btn.disabled = true;\n btn.innerHTML = \"Processing PDF... \u23f3\";\n\n const invoiceEl = document.getElementById('capture-area');\n const docNo = document.querySelector('[data-key=\"docNo\"]').textContent.trim() || \"Draft\";\n\n html2canvas(invoiceEl, {\n scale: 3, \/\/ High quality\n useCORS: true,\n logging: false,\n backgroundColor: '#ffffff'\n }).then(canvas => {\n const imgData = canvas.toDataURL('image\/jpeg', 1.0);\n\n \/\/ Create a hidden print window\n const printWin = window.open('', '_blank');\n printWin.document.write(`\n <html>\n <head>\n <title>Invoice_${docNo}<\/title>\n <style>\n body { margin: 0; padding: 0; }\n img { width: 100%; height: auto; display: block; }\n @page { margin: 0; size: auto; }\n <\/style>\n <\/head>\n <body>\n <img decoding=\"async\" src=\"${imgData}\" \/>\n <script>\n window.onload = function() {\n window.print();\n setTimeout(() => { window.close(); }, 500);\n };\n <\\\/script>\n <\/body>\n <\/html>\n `);\n printWin.document.close();\n\n btn.disabled = false;\n btn.innerHTML = originalText;\n }).catch(err => {\n console.error(err);\n alert(\"Error generating PDF: \" + err.message);\n btn.disabled = false;\n btn.innerHTML = originalText;\n });\n };\n\n document.getElementById('btnPrintJPG').onclick = function () {\n const btn = this;\n const originalText = btn.innerHTML;\n btn.disabled = true;\n btn.innerHTML = \"Processing JPG... \u23f3\";\n html2canvas(document.getElementById('capture-area'), {\n scale: 3,\n useCORS: true\n }).then(canvas => {\n const link = document.createElement('a');\n link.download = `Invoice_${document.querySelector('[data-key=\"docNo\"]').textContent.trim()}.jpg`;\n link.href = canvas.toDataURL('image\/jpeg', 0.95);\n link.click();\n btn.disabled = false;\n btn.innerHTML = originalText;\n });\n };\n\n <\/script>\n<\/body>\n\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>MANUSUWONGMUNEE SEEUTA – HTML Template \u0e21.\u0e2a MANUSUWONGMUNEE SEEUTA THAI AMULET SHOP \u2022 252 \u0e21.1 \u0e15.\u0e14\u0e2d\u0e19\u0e22\u0e32\u0e07 \u0e08.\u0e02\u0e2d\u0e19\u0e41\u0e01\u0e48\u0e19 \u0e2d.\u0e40\u0e21\u0e37\u0e2d\u0e07 40000 \u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28\u0e44\u0e17\u0e22 \u2022 \u2795 \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e41\u0e16\u0e27 \u0e25\u0e49\u0e32\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \ud83d\uddd1\ufe0f \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \ud83d\udcbe \u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34 \ud83d\udd52 PDF \ud83d\udcc4 JPG \ud83c\udfde\ufe0f \u0e43\u0e1a\u0e01\u0e33\u0e01\u0e31\u0e1a\u0e20\u0e32\u0e29\u0e35 \u0e43\u0e1a\u0e41\u0e08\u0e49\u0e07\u0e2b\u0e19\u0e35\u0e49 \u0e43\u0e1a\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e23\u0e31\u0e1a\u0e40\u0e07\u0e34\u0e19 Tax AND Sales Invoice \u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e09\u0e1a\u0e31\u0e1a\u0e19\u0e35\u0e49\u0e08\u0e31\u0e14\u0e17\u0e33\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e2d\u0e07\u0e20\u0e32\u0e29\u0e32 \u2022 \u0e44\u0e17\u0e22\/\u0e2d\u0e31\u0e07\u0e01\u0e24\u0e29 \u0e40\u0e25\u0e02\u0e17\u0e35\u0e48\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 INV \u0e52\u0e56-\u0e50\u0e50\u0e51 \u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e2d\u0e2d\u0e01\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 \u0e1e.\u0e28 \u0e1e.\u0e28 \u0e52\u0e55\u0e56\u0e59 \u0e40\u0e14\u0e37\u0e2d\u0e19 \u0e51 \u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 \u0e53 \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e0a\u0e33\u0e23\u0e30 \u0e1e.\u0e28 […]<\/p>","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","_joinchat":[],"footnotes":""},"class_list":["post-7960","page","type-page","status-publish","hentry","entry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/louisthai.com\/hk\/wp-json\/wp\/v2\/pages\/7960","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/louisthai.com\/hk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/louisthai.com\/hk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/louisthai.com\/hk\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/louisthai.com\/hk\/wp-json\/wp\/v2\/comments?post=7960"}],"version-history":[{"count":9,"href":"https:\/\/louisthai.com\/hk\/wp-json\/wp\/v2\/pages\/7960\/revisions"}],"predecessor-version":[{"id":7969,"href":"https:\/\/louisthai.com\/hk\/wp-json\/wp\/v2\/pages\/7960\/revisions\/7969"}],"wp:attachment":[{"href":"https:\/\/louisthai.com\/hk\/wp-json\/wp\/v2\/media?parent=7960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n \n \n MANUSUWONGMUNEE SEEUTA - HTML Template<\/title>\n <style>\n :root {\n --bg: #ffffff;\n \/* white background primary theme *\/\n --text: #0b3f3a;\n \/* slate-900 *\/\n --muted: #2f6f68;\n \/* slate-600 *\/\n --muted2: #3f857d;\n \/* slate-500 *\/\n --line: #e2e8f0;\n \/* slate-200 *\/\n --soft: #f8fafc;\n \/* slate-50 *\/\n --chip: #f1f5f9;\n \/* slate-100 *\/\n --accent: #0a84ff;\n \/* Apple blue *\/\n --danger: #dc2626;\n \/* red *\/\n --ok: #16a34a;\n \/* green *\/\n --shadow: 0 10px 30px rgba(2, 6, 23, .08);\n --radius: 18px;\n --radius2: 14px;\n --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --sans: \"Sukhumvit Set\", \"Sukhumvit\", \"Thonburi\", \"Tahoma\", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"SF Pro Display\", \"Segoe UI\", Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\";\n }\n\n * {\n box-sizing: border-box\n }\n\n html,\n body {\n height: 100%\n }\n\n body {\n margin: 0;\n font-family: var(--sans);\n color: var(--text);\n background: var(--bg);\n }\n\n .wrap {\n max-width: 1040px;\n margin: 28px auto 80px;\n padding: 0 18px;\n }\n\n \/* Top bar *\/\n .topbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin-bottom: 16px;\n }\n\n .brand {\n display: flex;\n align-items: center;\n gap: 12px;\n min-width: 240px;\n }\n\n .logo {\n width: 44px;\n height: 44px;\n border-radius: 14px;\n background: linear-gradient(180deg, #111827, #0b1220);\n display: grid;\n place-items: center;\n color: #fff;\n font-weight: 800;\n box-shadow: 0 12px 24px rgba(2, 6, 23, .18);\n user-select: none;\n }\n\n .brand h1 {\n margin: 0;\n font-size: 16px;\n letter-spacing: .3px;\n }\n\n .brand .sub {\n font-size: 12px;\n color: var(--muted2);\n margin-top: 2px;\n }\n\n .actions {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n justify-content: flex-end;\n }\n\n .btn {\n border: 1px solid var(--line);\n background: #fff;\n color: var(--text);\n border-radius: 999px;\n padding: 10px 14px;\n font-size: 13px;\n line-height: 1;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n transition: transform .08s ease, box-shadow .18s ease, background .2s ease;\n user-select: none;\n }\n\n .btn:hover {\n box-shadow: 0 10px 22px rgba(2, 6, 23, .10);\n transform: translateY(-1px);\n }\n\n .btn:active {\n transform: translateY(0px);\n box-shadow: none;\n }\n\n .btn.primary {\n background: var(--accent);\n border-color: rgba(10, 132, 255, .35);\n color: #fff;\n }\n\n .btn.danger {\n background: #fff;\n border-color: rgba(220, 38, 38, .35);\n color: var(--danger);\n }\n\n \/* Card *\/\n .card {\n background: #fff;\n border: 1px solid var(--line);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n overflow: hidden;\n }\n\n .card-head {\n padding: 20px 22px 14px;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 14px;\n border-bottom: 1px solid var(--line);\n background: linear-gradient(180deg, #ffffff, #fbfdff);\n }\n\n .titleblock {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .doc-title {\n font-size: 18px;\n font-weight: 800;\n letter-spacing: .2px;\n margin: 0;\n }\n\n .doc-sub {\n margin: 0;\n color: var(--muted);\n font-size: 13px;\n }\n\n .meta {\n display: grid;\n grid-template-columns: 1fr;\n gap: 8px;\n min-width: 320px;\n width: 380px;\n }\n\n .field {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 10px;\n padding: 10px 12px;\n border: 1px solid var(--line);\n border-radius: 14px;\n background: #fff;\n }\n\n .k {\n font-size: 12px;\n color: var(--muted2);\n display: flex;\n flex-direction: column;\n gap: 2px;\n line-height: 1.15;\n }\n\n .k b {\n color: var(--text);\n font-weight: 700;\n font-size: 12px\n }\n\n .v {\n font-size: 12.5px;\n color: var(--text);\n min-width: 160px;\n text-align: right;\n }\n\n .editable {\n outline: none;\n min-height: 1em;\n }\n\n .editable:focus {\n border-radius: 10px;\n box-shadow: 0 0 0 4px rgba(10, 132, 255, .16);\n background: rgba(10, 132, 255, .06);\n padding: 2px 6px;\n margin-right: -6px;\n }\n\n .card-body {\n padding: 18px 22px 22px;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 14px;\n }\n\n .panel {\n border: 1px solid var(--line);\n border-radius: var(--radius2);\n padding: 14px 14px 12px;\n background: var(--soft);\n }\n\n .panel h3 {\n margin: 0 0 10px 0;\n font-size: 12px;\n letter-spacing: .25px;\n color: var(--muted2);\n text-transform: uppercase;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 10px;\n }\n\n .badge {\n font-size: 11px;\n padding: 4px 8px;\n border-radius: 999px;\n background: var(--chip);\n color: var(--muted);\n border: 1px solid var(--line);\n font-family: var(--mono);\n }\n\n .grid2 {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n }\n\n .mini {\n padding: 10px 12px;\n border: 1px solid var(--line);\n border-radius: 14px;\n background: #fff;\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .mini .label {\n font-size: 12px;\n color: var(--muted2);\n line-height: 1.1;\n }\n\n .mini .value {\n font-size: 13px;\n color: var(--text);\n min-height: 18px;\n }\n\n \/* Items table *\/\n .items {\n grid-column: 1 \/ -1;\n border: 1px solid var(--line);\n border-radius: var(--radius2);\n overflow: hidden;\n background: #fff;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n }\n\n thead th {\n background: var(--soft);\n color: var(--muted2);\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: .2px;\n padding: 12px 10px;\n border-bottom: 1px solid var(--line);\n text-align: left;\n }\n\n tbody td {\n padding: 10px 10px;\n border-bottom: 1px solid var(--line);\n vertical-align: top;\n font-size: 13px;\n }\n\n tbody tr:last-child td {\n border-bottom: none;\n }\n\n .right {\n text-align: right;\n }\n\n .center {\n text-align: center;\n }\n\n .mono {\n font-family: var(--mono);\n }\n\n .cell-edit {\n outline: none;\n border-radius: 10px;\n padding: 2px 6px;\n min-height: 18px;\n }\n\n .cell-edit:focus {\n box-shadow: 0 0 0 4px rgba(10, 132, 255, .16);\n background: rgba(10, 132, 255, .06);\n }\n\n .num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n }\n\n .hint {\n color: var(--muted2);\n font-size: 12px;\n margin-top: 8px;\n display: flex;\n justify-content: space-between;\n gap: 12px;\n flex-wrap: wrap;\n }\n\n .hint .pill {\n border: 1px dashed var(--line);\n background: var(--soft);\n padding: 6px 10px;\n border-radius: 999px;\n font-family: var(--mono);\n font-size: 11px;\n color: var(--muted);\n }\n\n \/* Summary *\/\n .footer-grid {\n display: grid;\n grid-template-columns: 1.15fr .85fr;\n gap: 14px;\n margin-top: 14px;\n }\n\n .notes {\n border: 1px solid var(--line);\n border-radius: var(--radius2);\n background: #fff;\n padding: 14px;\n min-height: 160px;\n }\n\n .notes h4 {\n margin: 0 0 10px 0;\n font-size: 12px;\n color: var(--muted2);\n text-transform: uppercase;\n letter-spacing: .2px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 8px;\n }\n\n .notes .content {\n color: var(--text);\n font-size: 13px;\n min-height: 110px;\n outline: none;\n border-radius: 12px;\n padding: 8px 10px;\n background: var(--soft);\n border: 1px solid var(--line);\n }\n\n .notes .content:focus {\n box-shadow: 0 0 0 4px rgba(10, 132, 255, .16);\n background: rgba(10, 132, 255, .06);\n }\n\n .notes-wide {\n grid-column: 1 \/ -1;\n }\n\n .important {\n border: 1px solid var(--line);\n border-radius: var(--radius2);\n background: #fff;\n padding: 14px;\n min-height: 160px;\n }\n\n .important h4 {\n margin: 0 0 10px 0;\n font-size: 12px;\n color: var(--muted2);\n text-transform: uppercase;\n letter-spacing: .2px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 8px;\n }\n\n .important-body {\n color: var(--text);\n font-size: 13px;\n min-height: 110px;\n outline: none;\n border-radius: 12px;\n padding: 10px 12px;\n background: var(--soft);\n border: 1px solid var(--line);\n line-height: 1.55;\n }\n\n .important-body:focus {\n box-shadow: 0 0 0 4px rgba(10, 132, 255, .16);\n background: rgba(10, 132, 255, .06);\n }\n\n .summary {\n border: 1px solid var(--line);\n border-radius: var(--radius2);\n background: #fff;\n padding: 14px;\n }\n\n .summary h4 {\n margin: 0 0 10px 0;\n font-size: 12px;\n color: var(--muted2);\n text-transform: uppercase;\n letter-spacing: .2px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .sumrow {\n display: flex;\n justify-content: space-between;\n gap: 10px;\n padding: 8px 0;\n border-bottom: 1px dashed var(--line);\n font-size: 13px;\n }\n\n .sumrow:last-child {\n border-bottom: none;\n }\n\n .sumrow strong {\n font-weight: 800;\n }\n\n .sumrow .label {\n color: var(--muted);\n line-height: 1.15;\n }\n\n .sumrow .value {\n font-variant-numeric: tabular-nums;\n }\n\n .total {\n margin-top: 8px;\n padding-top: 10px;\n border-top: 1px solid var(--line);\n }\n\n .grand {\n font-size: 15px;\n font-weight: 900;\n }\n\n \/* Footer legal *\/\n .legal {\n margin-top: 14px;\n border: 1px solid var(--line);\n border-radius: var(--radius2);\n background: var(--soft);\n padding: 12px 14px;\n color: var(--muted);\n font-size: 12px;\n line-height: 1.5;\n }\n\n \/* Print *\/\n @media print {\n .topbar {\n display: none !important;\n }\n\n body {\n background: #fff;\n }\n\n .wrap {\n margin: 0;\n padding: 0;\n }\n\n .card {\n box-shadow: none;\n border: none;\n border-radius: 0;\n }\n\n .card-head {\n border-bottom: 1px solid #ddd;\n }\n\n .panel {\n background: #fff;\n }\n\n .notes .content {\n background: #fff;\n }\n\n .hint {\n display: none;\n }\n\n .btn {\n display: none;\n }\n }\n\n \/* Responsive *\/\n @media (max-width: 920px) {\n .card-body {\n grid-template-columns: 1fr;\n }\n\n .meta {\n min-width: auto;\n width: 100%;\n }\n\n .footer-grid {\n grid-template-columns: 1fr;\n }\n }\n\n \/* Product picker *\/\n .rowpick {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .product-select {\n width: 100%;\n padding: 8px 10px;\n border: 1px solid var(--line);\n border-radius: 12px;\n background: #fff;\n color: var(--text);\n font-size: 12.5px;\n outline: none;\n }\n\n .product-select:focus {\n box-shadow: 0 0 0 4px rgba(10, 132, 255, .16);\n border-color: rgba(10, 132, 255, .35);\n }\n <\/style>\n<\/head>\n\n<body>\n <div class=\"wrap\">\n <div id=\"capture-area\" style=\"background:#fff; padding:10px; border-radius:18px;\">\n <div class=\"topbar\">\n <div class=\"brand\">\n <div class=\"logo\" aria-hidden=\"true\">\u0e21.\u0e2a<\/div>\n <div>\n <h1>MANUSUWONGMUNEE SEEUTA<\/h1>\n <div class=\"sub\">THAI AMULET SHOP \u2022 252 \u0e21.1 \u0e15.\u0e14\u0e2d\u0e19\u0e22\u0e32\u0e07 \u0e08.\u0e02\u0e2d\u0e19\u0e41\u0e01\u0e48\u0e19 \u0e2d.\u0e40\u0e21\u0e37\u0e2d\u0e07 40000 \u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28\u0e44\u0e17\u0e22 \u2022<\/div>\n <\/div>\n <\/div>\n <div class=\"actions\" data-html2canvas-ignore>\n <button class=\"btn\" id=\"btnAdd\">\u2795 \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e41\u0e16\u0e27<\/button>\n <button class=\"btn danger\" id=\"btnClear\">\u0e25\u0e49\u0e32\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \ud83d\uddd1\ufe0f<\/button>\n <button class=\"btn primary\" id=\"btnSubmit\">\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \ud83d\udcbe<\/button>\n <button class=\"btn\" id=\"btnHistory\">\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34 \ud83d\udd52<\/button>\n <button class=\"btn primary\" id=\"btnPrintPDF\">PDF \ud83d\udcc4<\/button>\n <button class=\"btn primary\" id=\"btnPrintJPG\">JPG \ud83c\udfde\ufe0f<\/button>\n <\/div>\n <\/div>\n\n <div class=\"card\" id=\"invoice\">\n <div class=\"card-head\">\n <div class=\"titleblock\">\n <p class=\"doc-title\">\u0e43\u0e1a\u0e01\u0e33\u0e01\u0e31\u0e1a\u0e20\u0e32\u0e29\u0e35 \u0e43\u0e1a\u0e41\u0e08\u0e49\u0e07\u0e2b\u0e19\u0e35\u0e49 \u0e43\u0e1a\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e23\u0e31\u0e1a\u0e40\u0e07\u0e34\u0e19 <span class=\"mono\"\n style=\"font-size:12px;color:var(--muted2);font-weight:700;\">Tax AND Sales Invoice<\/span><\/p>\n <p class=\"doc-sub\">\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e09\u0e1a\u0e31\u0e1a\u0e19\u0e35\u0e49\u0e08\u0e31\u0e14\u0e17\u0e33\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e2d\u0e07\u0e20\u0e32\u0e29\u0e32 \u2022 \u0e44\u0e17\u0e22\/\u0e2d\u0e31\u0e07\u0e01\u0e24\u0e29<\/p>\n <\/div>\n\n <div class=\"meta\">\n <div class=\"field\">\n <div class=\"k\">\n <b>\u0e40\u0e25\u0e02\u0e17\u0e35\u0e48\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23<\/b>\n <span>INV<\/span>\n <\/div>\n <div class=\"v editable mono\" contenteditable=\"true\" data-key=\"docNo\">\u0e52\u0e56-\u0e50\u0e50\u0e51<\/div>\n <\/div>\n\n <div class=\"field\">\n <div class=\"k\">\n <b>\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e2d\u0e2d\u0e01\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23<\/b>\n <span>\u0e1e.\u0e28<\/span>\n <\/div>\n <div class=\"v editable mono\" contenteditable=\"true\" data-key=\"issueDate\">\u0e1e.\u0e28 \u0e52\u0e55\u0e56\u0e59 \u0e40\u0e14\u0e37\u0e2d\u0e19 \u0e51 \u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 \u0e53<\/div>\n <\/div>\n\n <div class=\"field\">\n <div class=\"k\">\n <b>\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e0a\u0e33\u0e23\u0e30<\/b>\n <span>\u0e1e.\u0e28<\/span>\n <\/div>\n <div class=\"v editable mono\" contenteditable=\"true\" data-key=\"dueDate\">\u0e27\u0e48\u0e32\u0e07<\/div>\n <\/div>\n\n <div class=\"field\">\n <div class=\"k\">\n <b>\u0e2a\u0e01\u0e38\u0e25\u0e40\u0e07\u0e34\u0e19<\/b>\n <span>\ud83c\uddf2\ud83c\uddfe<\/span>\n <\/div>\n <div class=\"v editable mono\" contenteditable=\"true\" data-key=\"currency\">MYR<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card-body\">\n <div class=\"panel\">\n <h3>\u0e1c\u0e39\u0e49\u0e02\u0e32\u0e22 Seller <span class=\"badge\">\ud83d\udc66\ud83c\udffb<\/span><\/h3>\n <div class=\"grid2\">\n <div class=\"mini\">\n <div class=\"label\">\u0e0a\u0e37\u0e48\u0e2d\u0e1a\u0e23\u0e34\u0e29\u0e31\u0e17<\/div>\n <div class=\"value editable\" contenteditable=\"true\" data-key=\"sellerName\">Manusuwongmunee Seeuta (Thai\n Amulet Shop)<\/div>\n <\/div>\n <div class=\"mini\">\n <div class=\"label\">\u0e40\u0e25\u0e02\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e15\u0e31\u0e27\u0e1c\u0e39\u0e49\u0e40\u0e2a\u0e35\u0e22\u0e20\u0e32\u0e29\u0e35<\/div>\n <div class=\"value editable mono\" contenteditable=\"true\" data-key=\"sellerTaxId\">-<\/div>\n <\/div>\n <div class=\"mini\">\n <div class=\"label\">\u0e17\u0e35\u0e48\u0e2d\u0e22\u0e39\u0e48<\/div>\n <div class=\"value editable\" contenteditable=\"true\" data-key=\"sellerAddr\">252 \u0e21.1 \u0e15.\u0e14\u0e2d\u0e19\u0e22\u0e32\u0e07, \u0e08.\u0e02\u0e2d\u0e19\u0e41\u0e01\u0e48\u0e19,\n \u0e2d.\u0e40\u0e21\u0e37\u0e2d\u0e07, 40000 \u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28\u0e44\u0e17\u0e22<\/div>\n <\/div>\n <div class=\"mini\">\n <div class=\"label\">\u0e2d\u0e35\u0e40\u0e21\u0e25 \/ \u0e42\u0e17\u0e23<\/div>\n <div class=\"value editable\" contenteditable=\"true\" data-key=\"sellerContact\">+66<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"panel\">\n <h3>\u0e1c\u0e39\u0e49\u0e0b\u0e37\u0e49\u0e2d<span class=\"badge\">\ud83d\udc66\ud83c\udffb<\/span><\/h3>\n <div class=\"grid2\">\n <div class=\"mini\">\n <div class=\"label\">\u0e0a\u0e37\u0e48\u0e2d\u0e25\u0e39\u0e01\u0e04\u0e49\u0e32<\/div>\n <div class=\"value editable\" contenteditable=\"true\" data-key=\"buyerName\">LOUIS THAI International Group\n Sdn. Bhd.<\/div>\n <\/div>\n <div class=\"mini\">\n <div class=\"label\">\u0e40\u0e25\u0e02\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e15\u0e31\u0e27\u0e1c\u0e39\u0e49\u0e40\u0e2a\u0e35\u0e22\u0e20\u0e32\u0e29\u0e35<\/div>\n <div class=\"value editable mono\" contenteditable=\"true\" data-key=\"buyerTaxId\">C26839821060<\/div>\n <\/div>\n <div class=\"mini\">\n <div class=\"label\">\u0e17\u0e35\u0e48\u0e2d\u0e22\u0e39\u0e48<\/div>\n <div class=\"value editable\" contenteditable=\"true\" data-key=\"buyerAddr\">C-25 The Cube, Jalan Bandar\n Puteri\n 7\/15, Bandar Puteri, Puchong 47100 Selangor D.E., Malaysia.<\/div>\n <\/div>\n <div class=\"mini\">\n <div class=\"label\">\u0e2d\u0e35\u0e40\u0e21\u0e25 \/ \u0e42\u0e17\u0e23<\/div>\n <div class=\"value editable\" contenteditable=\"true\" data-key=\"buyerContact\">louis@louisthai.com \u2022 +60 111\n 622 3916<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"items\">\n <table aria-label=\"Invoice items\">\n <thead>\n <tr>\n <th style=\"width:52px\" class=\"center\">#<\/th>\n <th>\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14<\/th>\n <th style=\"width:120px\" class=\"center\">\u0e08\u0e33\u0e19\u0e27\u0e19 Qty<\/th>\n <th style=\"width:150px\" class=\"right\">\u0e23\u0e32\u0e04\u0e32\u0e15\u0e48\u0e2d\u0e2b\u0e19\u0e48\u0e27\u0e22 MYR<\/th>\n <th style=\"width:160px\" class=\"right\">\u0e08\u0e33\u0e19\u0e27\u0e19\u0e40\u0e07\u0e34\u0e19 MYR<\/th>\n <th style=\"width:64px\" class=\"center\">\ud83d\uddd1<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"rows\">\n <tr>\n <td class=\"center mono idx\">1<\/td>\n <td>\n <div class=\"rowpick\">\n <select class=\"product-select\" data-col=\"product\"><\/select>\n <div class=\"cell-edit\" contenteditable=\"true\" data-col=\"desc\">\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32<\/div>\n <\/div>\n <\/td>\n <td class=\"center\">\n <div class=\"cell-edit num mono\" contenteditable=\"true\" data-col=\"qty\">1<\/div>\n <\/td>\n <td class=\"right\">\n <div class=\"cell-edit num mono\" contenteditable=\"true\" data-col=\"price\">0.00<\/div>\n <\/td>\n <td class=\"right mono amount\">0.00<\/td>\n <td class=\"center\"><button class=\"btn danger\" style=\"padding:7px 10px\"\n data-action=\"remove\">\u0e25\u0e1a<\/button>\n <\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <div class=\"hint\">\n <div class=\"pill\">\u0e41\u0e01\u0e49\u0e44\u0e02\u0e44\u0e14\u0e49\u0e17\u0e31\u0e19\u0e17\u0e35<\/div>\n <div class=\"pill\">\u0e40\u0e25\u0e02\u0e17\u0e28\u0e19\u0e34\u0e22\u0e21<\/div>\n <div class=\"pill\">\u0e20\u0e32\u0e29\u0e35\u0e21\u0e39\u0e25\u0e04\u0e48\u0e32\u0e40\u0e1e\u0e34\u0e48\u0e21 <button class=\"btn\" id=\"btnAddInline\" style=\"padding:7px 10px;\">\u2795\n \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e41\u0e16\u0e27<\/button>\n <\/div>\n <\/div>\n\n <div class=\"notes notes-wide\">\n <h4>\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e2b\u0e15\u0e38<span class=\"badge\">\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e41\u0e01\u0e49\u0e44\u0e02\u0e44\u0e14\u0e49<\/span><\/h4>\n <div class=\"content\" contenteditable=\"true\" data-key=\"notes\">\u2022 \u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02\u0e01\u0e32\u0e23\u0e0a\u0e33\u0e23\u0e30\u0e40\u0e07\u0e34\u0e19: \u0e0a\u0e33\u0e23\u0e30\u0e20\u0e32\u0e22\u0e43\u0e19\u0e01\u0e33\u0e2b\u0e19\u0e14 \u2022\n \u0e42\u0e2d\u0e19\u0e40\u0e07\u0e34\u0e19: \u0e18\u0e19\u0e32\u0e04\u0e32\u0e23\u0e01\u0e23\u0e38\u0e07\u0e40\u0e17\u0e1e 370 439 7003 \u2022 \u0e02\u0e2d\u0e1a\u0e04\u0e38\u0e13\u0e17\u0e35\u0e48\u0e2d\u0e38\u0e14\u0e2b\u0e19\u0e38\u0e19<\/div>\n <\/div>\n\n\n\n <div class=\"footer-grid\">\n <div class=\"important\">\n <h4>\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e2b\u0e15\u0e38\u0e2a\u0e33\u0e04\u0e31\u0e0d<span class=\"badge\">\u2139\ufe0f<\/span><\/h4>\n <div class=\"important-body\" contenteditable=\"true\" data-key=\"important\"><b>\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e2b\u0e15\u0e38\u0e2a\u0e33\u0e04\u0e31\u0e0d:<\/b>\n \u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e19\u0e35\u0e49\u0e40\u0e1b\u0e47\u0e19\u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b\n \u0e01\u0e23\u0e38\u0e13\u0e32\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e43\u0e2b\u0e49\u0e2a\u0e2d\u0e14\u0e04\u0e25\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e1a\u0e02\u0e49\u0e2d\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e20\u0e32\u0e29\u0e35\u0e02\u0e2d\u0e07\u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28\u0e44\u0e17\u0e22\u0e41\u0e25\u0e30\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e02\u0e2d\u0e07\u0e1a\u0e23\u0e34\u0e29\u0e31\u0e17\u0e04\u0e38\u0e13 \u2022 <\/div>\n <\/div>\n\n <div class=\"summary\">\n <h4>\u0e2a\u0e23\u0e38\u0e1b\u0e22\u0e2d\u0e14<span class=\"badge\">\u0e19\u0e33\u0e44\u0e1b\u0e43\u0e0a\u0e49<\/span><\/h4>\n\n <div class=\"sumrow\">\n <div class=\"label\">\u0e22\u0e2d\u0e14\u0e23\u0e27\u0e21<\/div>\n <div class=\"value mono\" id=\"subtotal\">0.00<\/div>\n <\/div>\n\n <div class=\"sumrow\">\n <div class=\"label\">\n \u0e2a\u0e48\u0e27\u0e19\u0e25\u0e14\n <div style=\"font-size:11px;color:var(--muted2)\">MYR<\/div>\n <\/div>\n <div class=\"value mono\">\n <span contenteditable=\"true\" class=\"cell-edit num mono\" id=\"discount\"\n style=\"display:inline-block; min-width:88px; text-align:right;\">0<\/span>\n <\/div>\n <\/div>\n\n <div class=\"sumrow\">\n <div class=\"label\">\n VAT 7% (\u0e20\u0e32\u0e29\u0e35\u0e21\u0e39\u0e25\u0e04\u0e48\u0e32\u0e40\u0e1e\u0e34\u0e48\u0e21)\n <div style=\"font-size:11px;color:var(--muted2)\">\ud83d\udd18<\/div>\n <\/div>\n <div class=\"value mono\" style=\"display:flex; align-items:center; gap:10px; justify-content:flex-end;\">\n <label style=\"display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;\">\n <input type=\"checkbox\" id=\"vatOn\" checked \/>\n \u0e19\u0e33\u0e44\u0e1b\u0e43\u0e0a\u0e49\n <\/label>\n <span id=\"vat\" class=\"mono\">0.00<\/span>\n <\/div>\n <\/div>\n\n <div class=\"sumrow total\">\n <div class=\"label grand\">\u0e22\u0e2d\u0e14\u0e2a\u0e38\u0e17\u0e18\u0e34<\/div>\n <div class=\"value mono grand\" id=\"grand\">0.00<\/div>\n <\/div>\n\n <div class=\"sumrow\" style=\"border-bottom:none; padding-bottom:0;\">\n <div class=\"label\">\u0e08\u0e33\u0e19\u0e27\u0e19\u0e40\u0e07\u0e34\u0e19\u0e40\u0e1b\u0e47\u0e19\u0e15\u0e31\u0e27\u0e2d\u0e31\u0e01\u0e29\u0e23<\/div>\n <div class=\"value\" style=\"max-width: 260px; text-align:right;\">\n <span id=\"wordsTH\" style=\"display:block; font-size:12px; color:var(--muted);\">\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e1a\u0e32\u0e17\u0e16\u0e49\u0e27\u0e19<\/span>\n <span id=\"wordsEN\"\n style=\"display:block; font-size:12px; color:var(--muted);\"><strong>\u0e23\u0e34\u0e07\u0e01\u0e34\u0e15\u0e21\u0e32\u0e40\u0e25\u0e40\u0e0b\u0e35\u0e22\u0e40\u0e17\u0e48\u0e32\u0e19\u0e31\u0e49\u0e19<\/strong><\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div id=\"historyModal\"\n style=\"display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1000; overflow-y:auto; padding:20px;\">\n <div\n style=\"background:#fff; max-width:800px; margin:20px auto; border-radius:18px; padding:24px; box-shadow:0 20px 50px rgba(0,0,0,0.2); position:relative;\">\n <div style=\"display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;\">\n <h2 style=\"margin:0; font-size:20px;\">\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01 (History)<\/h2>\n <button class=\"btn\" onclick=\"document.getElementById('historyModal').style.display='none'\">\u0e1b\u0e34\u0e14 (Close)\n X<\/button>\n <\/div>\n <div id=\"historyList\" style=\"display:grid; gap:12px;\">\n \n <p>Loading...<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/html2canvas.hertzen.com\/dist\/html2canvas.min.js\"><\/script>\n <script>\n\n const fmt2 = (n) => (isFinite(n) ? n.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : \"0.00\");\n const parseNum = (txt) => {\n if (!txt) return 0;\n const t = String(txt).replace(\/,\/g, '').trim();\n const n = Number(t);\n return isFinite(n) ? n : 0;\n };\n\n\n \/\/ ---------- product catalog (from your CSV) ----------\n const PRODUCTS = [{ \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e2a\u0e33\u0e14\u0e27\u0e07\u0e43\u0e2b\u0e0d\u0e48 \u0e40\u0e2a\u0e23\u0e34\u0e21\u0e14\u0e27\u0e07\u0e2a\u0e39\u0e15\u0e23 Super X\", \"en\": \"Witthi Serm Dung Yai Super X Witthi Wai Kroo\", \"cn\": \"\u8d85\u7ea7X\u7248\u5347\u8fd0\", \"price\": 800.0 }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e14\u0e27\u0e07\u0e42\u0e1a\u0e23\u0e32\u0e13 9 \u0e0a\u0e31\u0e49\u0e19 (\u0e40\u0e09\u0e1e\u0e32\u0e30)\", \"en\": \"Witthi 9 Chan (W9C)\", \"cn\": \"\u72ec\u5bb6\u53e4\u8001\u6539\u8fd0\u5347\u8fd0\u5927\u6cd5\u4e5d\u5c42\u5854\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e23\u0e32\u0e2b\u0e39 (\u0e40\u0e09\u0e1e\u0e32\u0e30)\", \"en\": \"Witthi Song Rahu\", \"cn\": \"\u72ec\u5bb6 \u62c9\u80e1\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e40\u0e23\u0e35\u0e22\u0e01\u0e17\u0e23\u0e31\u0e1e\u0e22\u0e4c 3 in 1\", \"en\": \"Witthi Jud Tien 3 in 1\", \"cn\": \"3\u54081 \u62db\u8d22\u8721\u70db\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e15\u0e31\u0e27\u0e41\u0e17\u0e19\u0e40\u0e23\u0e35\u0e22\u0e01\u0e17\u0e23\u0e31\u0e1e\u0e22\u0e4c\u0e42\u0e1a\u0e23\u0e32\u0e13\", \"en\": \"Witthi Liap Sap\", \"cn\": \"\u6cf0\u56fd\u53e4\u6cd5\u66ff\u8eab\u62db\u8d22\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e2a\u0e32\u0e21\u0e40\u0e2b\u0e25\u0e35\u0e48\u0e22\u0e21\", \"en\": \"Witthi 3 Liam\", \"cn\": \"\u4e00\u5c42\u5854\", \"price\": null }, { \"th\": \"\u0e04\u0e32\u0e16\u0e32\u0e17\u0e30\u0e25\u0e38\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e40\u0e23\u0e35\u0e22\u0e01\u0e17\u0e23\u0e31\u0e1e\u0e22\u0e4c\", \"en\": \"Sak Yant Liap Sap (Transparent)\", \"cn\": \"\u523a\u900f\u660e\u62db\u8d22\u5492\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e41\u0e1c\u0e48\u0e19\u0e17\u0e2d\u0e07 108\", \"en\": \"Witthi Penthong 108\", \"cn\": \"\u67ec\u57d4\u5be8 \u62db\u8d22 \u4eba\u7f18\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e16\u0e35\u0e2a\u0e32\u0e23\u0e34\u0e01\u0e32 (\u0e40\u0e2a\u0e19\u0e48\u0e2b\u0e4c\u0e27\u0e32\u0e08\u0e32)\", \"en\": \"Witthi Sarika\", \"cn\": \"\u5229\u820c\u964d\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e44\u0e02\u0e48\u0e17\u0e2d\u0e14\", \"en\": \"Witthi Tod-Kai\", \"cn\": \"\u9e21\u86cb\u6539\u8fd0\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e42\u0e1e\u0e25\u0e32\u0e1c\u0e25\u0e44\u0e21\u0e49 9 \u0e22\u0e31\u0e07\", \"en\": \"Witthi Polamai 9 Yang\", \"cn\": \"9\u6837\u6c34\u679c\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35 \u0e08\u0e38\u0e14\u0e40\u0e17\u0e35\u0e22\u0e19 \u0e40\u0e2a\u0e23\u0e34\u0e21\u0e14\u0e27\u0e07 (\u0e40\u0e17\u0e35\u0e22\u0e19\u0e40\u0e1b\u0e34\u0e14\u0e14\u0e27\u0e07 \u0e1b\u0e32\u0e0b\u0e32\u0e40\u0e0b\u0e35\u0e22\u0e19)\", \"en\": \"Witthi Pasa Sean Jud Tiean\", \"cn\": \"\u72ec\u5bb6 Pasa Sean \u8d77\u8fd0\u8721\u70db\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e2a\u0e48\u0e07\u0e2d\u0e32\u0e40\u0e25\u0e47\u0e14 \u0e41\u0e01\u0e49\u0e04\u0e19\u0e01\u0e31\u0e19\u0e14\u0e27\u0e07\", \"en\": \"Witthi Lai Arit\", \"cn\": \"\u6539\u8fd0\u5c0f\u4eba\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e40\u0e04\u0e25\u0e37\u0e2d\u0e1a\u0e2a\u0e35 (\u0e1e\u0e34\u0e18\u0e35\u0e04\u0e23\u0e2d\u0e1a\u0e04\u0e23\u0e39\u0e1e\u0e23\u0e30\u0e1e\u0e34\u0e23\u0e32\u0e1e)\", \"en\": \"Witthi Krob Sin\", \"cn\": \"Phra Pirap \u704c\u9876\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e2a\u0e21\u0e1a\u0e39\u0e23\u0e13\u0e4c\u0e1b\u0e32\u0e23\u0e21\u0e35 \/\u0e27\u0e34\u0e18\u0e35 \u0e2a\u0e27\u0e34\u0e0d\u0e0d\u0e32\u0e13 (\u0e2d\u0e38\u0e17\u0e34\u0e28\u0e1a\u0e38\u0e0d\u0e43\u0e2b\u0e49\u0e1c\u0e39\u0e49\u0e25\u0e48\u0e27\u0e07\u0e25\u0e31\u0e1a)\", \"en\": \"Witthi Serm Bun Parami (Witthi Song Win Yant)\", \"cn\": \"\u4ea1\u4eba\u529f\u5fb7\u7948\u798f\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e21\u0e32\u0e01\u0e34\u0e19\u0e1b\u0e31\u0e0d\u0e0d\u0e32\", \"en\": \"Witthi Ma Kin Panya \/ Witthi MA Kin Kwam Kit\", \"cn\": \"\u72ec\u5bb6 MA KIN PANYA \u72d7\u5403\u8111\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e04\u0e39\u0e48\u0e41\u0e21\u0e48\u0e19\u0e49\u0e33 \/ \u0e40\u0e2a\u0e19\u0e48\u0e2b\u0e4c\u0e41\u0e21\u0e48\u0e19\u0e49\u0e33 (\u0e41\u0e2b\u0e48\u0e07\u0e41\u0e23\u0e01\u0e43\u0e19\u0e21\u0e32\u0e40\u0e25\u0e40\u0e0b\u0e35\u0e22)\", \"en\": \"Witthi Ku Mea Nam\", \"cn\": \"\u5168\u5927\u9a6c\u7b2c\u4e00\u5bb6\u62e5\u6709\u6cb3\u4e0a\u60c5\u964d\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e27\u0e07\u0e48\u0e49\u0e07\u0e40\u0e25\u0e47\u0e1a\u0e0b\u0e31\u0e1a\", \"en\": \"Witthi Ngan Liap Sap\", \"cn\": \"\u62cd\u5a74\u62db\u8d22\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e1c\u0e35\u0e40\u0e21\u0e23\u0e38(\u0e27\u0e34\u0e18\u0e35 \u0e14\u0e27\u0e07 \u0e15\u0e1a)\", \"en\": \"Witthi Dueng Dop\", \"cn\": \"\u731b\u9b3c\u706b\u5316\u5e7f\u964d\u8fd0\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e40\u0e01\u0e23\u0e32\u0e30\u0e04\u0e38\u0e49\u0e21\u0e04\u0e23\u0e2d\u0e07\", \"en\": \"Protective Spiritual Shield\", \"cn\": \"\u62a4\u8eab\u7f69\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e40\u0e25\u0e35\u0e22\u0e1a\u0e17\u0e23\u0e31\u0e1e\u0e22\u0e4c\u0e2a\u0e35\u0e1f\u0e49\u0e32\u0e2b\u0e21\u0e39 (\u0e1c\u0e35\u0e2a\u0e32\u0e22\u0e02\u0e32\u0e27\u0e40\u0e23\u0e35\u0e22\u0e01\u0e42\u0e0a\u0e04\u0e25\u0e32\u0e20\u0e43\u0e2b\u0e0d\u0e48)\", \"en\": \"Witthi Liap Sap 4 Hua Mu\", \"cn\": \"\u9633\u9b3c\u62db\u504f\u8d22\u5927\u578b\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e40\u0e25\u0e35\u0e22\u0e1a\u0e17\u0e23\u0e31\u0e1e\u0e22\u0e4c \u0e2a\u0e2d\u0e07 \u0e1f\u0e49\u0e32\u0e2b\u0e21\u0e39 (\u0e1c\u0e35\u0e2a\u0e32\u0e22\u0e02\u0e32\u0e27\u0e40\u0e23\u0e35\u0e22\u0e01\u0e42\u0e0a\u0e04\u0e25\u0e32\u0e20\u0e43\u0e2b\u0e0d\u0e48)\", \"en\": \"Witthi Liap Sap 2 Hua Mu\", \"cn\": \"Ritual\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e1b\u0e34\u0e14\u0e17\u0e2d\u0e07 108 \u0e41\u0e1c\u0e48\u0e19\", \"en\": \"Witthi Penthong 108\", \"cn\": \"108\u7247\u91d1\u7b94\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e15\u0e31\u0e01\u0e17\u0e23\u0e31\u0e1e\u0e22\u0e4c (\u0e40\u0e09\u0e1e\u0e32\u0e30)\", \"en\": \"Witthi Tak Sung\", \"cn\": \"\u72ec\u5bb6 TAK SUNG\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35 9 \u0e2b\u0e49\u0e2d\u0e07\/\u0e0a\u0e48\u0e2d\u0e07\", \"en\": \"Witthi 9 Hong\/Chong\", \"cn\": \"\u4e5d\u5bab\u683c\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e2a\u0e33\u0e23\u0e27\u0e21\u0e14\u0e27\u0e07\u0e04\u0e39\u0e48\", \"en\": \"Witthi Serm Dung Ku\", \"cn\": \"SERM DUNG KU \u53cc\u65b9\u7231\u60c5\u5347\u8fd0\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e2a\u0e33\u0e23\u0e27\u0e21 \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e14\u0e27\u0e07\u0e2b\u0e31\u0e27\u0e2b\u0e21\u0e39 2 \u0e2b\u0e31\u0e27\", \"en\": \"Witthi Serm Dung 4 Hua Mu\", \"cn\": \"2\u732a\u5934\u589e\u8fd0\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e2a\u0e33\u0e23\u0e27\u0e21\u0e14\u0e27\u0e07 \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e14\u0e27\u0e07\u0e2b\u0e31\u0e27\u0e2b\u0e21\u0e39 4 \u0e2b\u0e31\u0e27\", \"en\": \"Witthi Serm Dung 4 Hua Mu\", \"cn\": \"4\u732a\u5934\u589e\u8fd0\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e04\u0e23\u0e39\u0e0a\u0e48\u0e27\u0e22\", \"en\": \"Witthi Kroo Chui\", \"cn\": \"KROO CHUI\u7956\u5e08\u7948\u798f\", \"price\": null }, { \"th\": \"\u0e27\u0e34\u0e18\u0e35\u0e41\u0e21\u0e48\u0e04\u0e23\u0e39\u0e14\u0e2d\u0e01\u0e44\u0e21\u0e49\u0e41\u0e14\u0e07\", \"en\": \"Witthi Mae Kroo Dok Mai Deng\", \"cn\": \"Mea Kroo \u5973\u795e\", \"price\": null }];\n\n function productLabel(p) {\n const th = (p.th || \"\").trim();\n const en = (p.en || \"\").trim();\n if (th && en) return `${th} \/ ${en}`;\n return th || en || \"Unnamed product\";\n }\n\n function populateSelect(sel) {\n if (!sel || sel.dataset.filled === \"1\") return;\n sel.innerHTML = \"\";\n const ph = document.createElement(\"option\");\n ph.value = \"\";\n ph.textContent = \"Select product\u2026 \/ \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u2026\";\n sel.appendChild(ph);\n\n PRODUCTS.forEach((p, i) => {\n const opt = document.createElement(\"option\");\n opt.value = String(i);\n opt.textContent = productLabel(p);\n sel.appendChild(opt);\n });\n sel.dataset.filled = \"1\";\n }\n function renumber() {\n document.querySelectorAll(\"#rows .idx\").forEach((el, i) => el.textContent = String(i + 1));\n }\n\n function calcRow(tr) {\n const qty = parseNum(tr.querySelector('[data-col=\"qty\"]')?.textContent);\n const price = parseNum(tr.querySelector('[data-col=\"price\"]')?.textContent);\n const amount = qty * price;\n tr.querySelector(\".amount\").textContent = fmt2(amount);\n return amount;\n }\n\n function calcAll() {\n let sub = 0;\n document.querySelectorAll(\"#rows tr\").forEach(tr => sub += calcRow(tr));\n document.getElementById(\"subtotal\").textContent = fmt2(sub);\n\n const discRaw = parseNum(document.getElementById(\"discount\").textContent);\n \/\/ Discount rule: if <=100 treat as %, if >100 treat as fixed THB\n const discountValue = (discRaw <= 100) ? (sub * (discRaw \/ 100)) : discRaw;\n const afterDisc = Math.max(sub - discountValue, 0);\n\n const vatEnabled = document.getElementById(\"vatOn\").checked;\n const vat = vatEnabled ? afterDisc * 0.07 : 0;\n\n const grand = afterDisc + vat;\n\n document.getElementById(\"vat\").textContent = fmt2(vat);\n document.getElementById(\"grand\").textContent = fmt2(grand);\n\n document.getElementById(\"wordsTH\").textContent = thaiBahtText(grand);\n document.getElementById(\"wordsEN\").textContent = englishBahtText(grand);\n }\n\n function bindRow(tr) {\n tr.querySelectorAll('[contenteditable=\"true\"]').forEach(el => {\n el.addEventListener(\"input\", calcAll);\n el.addEventListener(\"blur\", () => {\n const col = el.getAttribute(\"data-col\");\n if (col === \"qty\" || col === \"price\") {\n const n = parseNum(el.textContent);\n el.textContent = (col === \"qty\") ? String(n) : fmt2(n);\n }\n calcAll();\n });\n });\n\n const rm = tr.querySelector('[data-action=\"remove\"]');\n if (rm) {\n rm.addEventListener(\"click\", () => {\n const rows = document.querySelectorAll(\"#rows tr\");\n if (rows.length === 1) {\n tr.querySelector('[data-col=\"desc\"]').textContent = \"\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\/\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32 (TH) \u2014 Service\/Product (EN)\";\n tr.querySelector('[data-col=\"qty\"]').textContent = \"1\";\n tr.querySelector('[data-col=\"price\"]').textContent = \"0.00\";\n } else {\n tr.remove();\n }\n renumber();\n calcAll();\n });\n }\n }\n\n document.getElementById(\"btnAdd\").addEventListener(\"click\", () => {\n const tbody = document.getElementById(\"rows\");\n const tr = document.createElement(\"tr\");\n tr.innerHTML = `\n <td class=\"center mono idx\">0<\/td>\n <td><div class=\"rowpick\"><select class=\"product-select\" data-col=\"product\"><\/select><div class=\"cell-edit\" contenteditable=\"true\" data-col=\"desc\">\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e43\u0e2b\u0e21\u0e48 (TH) \u2014 New item (EN)<\/div><\/div><\/td>\n <td class=\"center\"><div class=\"cell-edit num mono\" contenteditable=\"true\" data-col=\"qty\">1<\/div><\/td>\n <td class=\"right\"><div class=\"cell-edit num mono\" contenteditable=\"true\" data-col=\"price\">0.00<\/div><\/td>\n <td class=\"right mono amount\">0.00<\/td>\n <td class=\"center\"><button class=\"btn danger\" style=\"padding:7px 10px\" data-action=\"remove\">Delete<\/button><\/td>\n `;\n tbody.appendChild(tr);\n bindRow(tr);\n renumber();\n calcAll();\n });\n\n \/\/ Inline add button inside the table area\n const btnAddInline = document.getElementById('btnAddInline');\n if (btnAddInline) { btnAddInline.addEventListener('click', () => document.getElementById('btnAdd').click()); }\n\n\n document.getElementById(\"btnClear\").addEventListener(\"click\", () => {\n document.querySelectorAll('[data-key]').forEach(el => {\n if (el.getAttribute('data-key') === 'currency') return;\n if (el.getAttribute('data-key') === 'issueDate' || el.getAttribute('data-key') === 'dueDate') return;\n el.textContent = '';\n });\n const tbody = document.getElementById(\"rows\");\n tbody.innerHTML = '';\n const tr = document.createElement(\"tr\");\n tr.innerHTML = `\n <td class=\"center mono idx\">1<\/td>\n <td><div class=\"rowpick\"><select class=\"product-select\" data-col=\"product\"><\/select><div class=\"cell-edit\" contenteditable=\"true\" data-col=\"desc\">\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\/\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32 (TH) \u2014 Service\/Product (EN)<\/div><\/div><\/td>\n <td class=\"center\"><div class=\"cell-edit num mono\" contenteditable=\"true\" data-col=\"qty\">1<\/div><\/td>\n <td class=\"right\"><div class=\"cell-edit num mono\" contenteditable=\"true\" data-col=\"price\">0.00<\/div><\/td>\n <td class=\"right mono amount\">0.00<\/td>\n <td class=\"center\"><button class=\"btn danger\" style=\"padding:7px 10px\" data-action=\"remove\">Delete<\/button><\/td>\n `;\n tbody.appendChild(tr);\n bindRow(tr);\n document.getElementById(\"discount\").textContent = \"0\";\n document.getElementById(\"vatOn\").checked = true;\n renumber();\n calcAll();\n });\n\n \/\/ document.getElementById(\"btnPrint\").addEventListener(\"click\", () => window.print());\n\n document.getElementById(\"discount\").addEventListener(\"input\", calcAll);\n document.getElementById(\"discount\").addEventListener(\"blur\", () => {\n const n = parseNum(document.getElementById(\"discount\").textContent);\n document.getElementById(\"discount\").textContent = String(n);\n calcAll();\n });\n document.getElementById(\"vatOn\").addEventListener(\"change\", calcAll);\n\n bindRow(document.querySelector(\"#rows tr\"));\n calcAll();\n\n function englishBahtText(amount) {\n const a = Math.round(amount * 100) \/ 100;\n const baht = Math.floor(a);\n const satang = Math.round((a - baht) * 100);\n\n const b = (baht === 0) ? \"Zero\" : toWordsEN(baht);\n if (satang === 0) return `${b} Baht Only`;\n const s = toWordsEN(satang);\n return `${b} Baht and ${s} Satang`;\n }\n\n function thaiBahtText(amount) {\n const a = Math.round(amount * 100) \/ 100;\n const baht = Math.floor(a);\n const satang = Math.round((a - baht) * 100);\n\n const b = (baht === 0) ? \"\u0e28\u0e39\u0e19\u0e22\u0e4c\" : toWordsTH(baht);\n if (satang === 0) return `${b}\u0e1a\u0e32\u0e17\u0e16\u0e49\u0e27\u0e19`;\n const s = toWordsTH(satang);\n return `${b}\u0e1a\u0e32\u0e17${s}\u0e2a\u0e15\u0e32\u0e07\u0e04\u0e4c`;\n }\n\n function toWordsEN(num) {\n const ones = [\"\", \"One\", \"Two\", \"Three\", \"Four\", \"Five\", \"Six\", \"Seven\", \"Eight\", \"Nine\"];\n const teens = [\"Ten\", \"Eleven\", \"Twelve\", \"Thirteen\", \"Fourteen\", \"Fifteen\", \"Sixteen\", \"Seventeen\", \"Eighteen\", \"Nineteen\"];\n const tens = [\"\", \"\", \"Twenty\", \"Thirty\", \"Forty\", \"Fifty\", \"Sixty\", \"Seventy\", \"Eighty\", \"Ninety\"];\n\n function chunk(n) {\n let out = [];\n const h = Math.floor(n \/ 100);\n const r = n % 100;\n if (h) out.push(ones[h] + \" Hundred\");\n if (r) {\n if (r < 10) out.push(ones[r]);\n else if (r < 20) out.push(teens[r - 10]);\n else {\n const t = Math.floor(r \/ 10);\n const o = r % 10;\n out.push(tens[t] + (o ? (\" \" + ones[o]) : \"\"));\n }\n }\n return out.join(\" \");\n }\n\n if (num === 0) return \"Zero\";\n const scales = [\n { v: 1e9, n: \"Billion\" },\n { v: 1e6, n: \"Million\" },\n { v: 1e3, n: \"Thousand\" },\n { v: 1, n: \"\" }\n ];\n let n = num;\n let parts = [];\n for (const s of scales) {\n if (n >= s.v) {\n const c = Math.floor(n \/ s.v);\n n = n % s.v;\n const p = chunk(c);\n if (p) parts.push(p + (s.n ? (\" \" + s.n) : \"\"));\n }\n }\n return parts.join(\" \").replace(\/\\s+\/g, \" \").trim();\n }\n\n function toWordsTH(num) {\n const digit = [\"\u0e28\u0e39\u0e19\u0e22\u0e4c\", \"\u0e2b\u0e19\u0e36\u0e48\u0e07\", \"\u0e2a\u0e2d\u0e07\", \"\u0e2a\u0e32\u0e21\", \"\u0e2a\u0e35\u0e48\", \"\u0e2b\u0e49\u0e32\", \"\u0e2b\u0e01\", \"\u0e40\u0e08\u0e47\u0e14\", \"\u0e41\u0e1b\u0e14\", \"\u0e40\u0e01\u0e49\u0e32\"];\n function readUnderMillion(n) {\n let out = \"\";\n const s = String(n).padStart(6, '0');\n const d = s.split(\"\").map(x => Number(x));\n const u = [\"\u0e41\u0e2a\u0e19\", \"\u0e2b\u0e21\u0e37\u0e48\u0e19\", \"\u0e1e\u0e31\u0e19\", \"\u0e23\u0e49\u0e2d\u0e22\", \"\u0e2a\u0e34\u0e1a\", \"\"];\n for (let i = 0; i < 6; i++) {\n const val = d[i];\n const pos = u[i];\n if (val === 0) continue;\n if (pos === \"\u0e2a\u0e34\u0e1a\") {\n if (val === 1) out += \"\u0e2a\u0e34\u0e1a\";\n else if (val === 2) out += \"\u0e22\u0e35\u0e48\u0e2a\u0e34\u0e1a\";\n else out += digit[val] + \"\u0e2a\u0e34\u0e1a\";\n } else if (pos === \"\") {\n if (val === 1 && out !== \"\") out += \"\u0e40\u0e2d\u0e47\u0e14\";\n else out += digit[val];\n } else {\n out += digit[val] + pos;\n }\n }\n return out || \"\u0e28\u0e39\u0e19\u0e22\u0e4c\";\n }\n\n if (num === 0) return \"\u0e28\u0e39\u0e19\u0e22\u0e4c\";\n let n = num;\n let parts = [];\n let millionIndex = 0;\n while (n > 0) {\n const chunk = n % 1000000;\n if (chunk !== 0) {\n let text = readUnderMillion(chunk);\n if (millionIndex > 0) text += \"\u0e25\u0e49\u0e32\u0e19\".repeat(millionIndex);\n parts.unshift(text);\n }\n n = Math.floor(n \/ 1000000);\n millionIndex++;\n }\n return parts.join(\"\");\n }\n\n \/\/ --- NEW INTEGRATION LOGIC ---\n const WEB_APP_URL = \"https:\/\/script.google.com\/macros\/s\/AKfycbwrO3CHXlzYsK1GU70BTRLaG4Xvp_jfkQ9STNFXgliAg6R637A879AU4uie6CG2_SWRCA\/exec\";\n const TARGET_SHEET = \"MANUSUWONGMUNEE_SEEUTA\";\n\n function getFormData() {\n const data = {};\n document.querySelectorAll('[data-key]').forEach(el => {\n data[el.getAttribute('data-key')] = el.textContent.trim();\n });\n\n data.subtotal = parseNum(document.getElementById('subtotal').textContent);\n data.discount = parseNum(document.getElementById('discount').textContent);\n data.vat = parseNum(document.getElementById('vat').textContent);\n data.grand = parseNum(document.getElementById('grand').textContent);\n data.vatEnabled = document.getElementById('vatOn').checked;\n\n data.items = [];\n document.querySelectorAll('#rows tr').forEach(tr => {\n data.items.push({\n desc: tr.querySelector('[data-col=\"desc\"]').textContent.trim(),\n qty: parseNum(tr.querySelector('[data-col=\"qty\"]').textContent),\n price: parseNum(tr.querySelector('[data-col=\"price\"]').textContent),\n amount: parseNum(tr.querySelector('.amount').textContent)\n });\n });\n data.target_sheet = TARGET_SHEET;\n return data;\n }\n\n document.getElementById('btnSubmit').addEventListener('click', async function () {\n const btn = this;\n const originalText = btn.innerHTML;\n btn.disabled = true;\n btn.innerHTML = \"\u0e01\u0e33\u0e25\u0e31\u0e07\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01... \u23f3\";\n\n const data = getFormData();\n console.log(\"Submitting:\", data);\n\n try {\n \/\/ Standard POST to Apps Script\n await fetch(WEB_APP_URL, {\n method: 'POST',\n mode: 'no-cors',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify(data)\n });\n alert(\"\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22\u0e41\u0e25\u0e49\u0e27 (Submitted to Sheet!)\");\n } catch (err) {\n console.error(err);\n alert(\"\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01: \" + err.message);\n } finally {\n btn.disabled = false;\n btn.innerHTML = originalText;\n }\n });\n\n document.getElementById('btnHistory').addEventListener('click', async function () {\n const modal = document.getElementById('historyModal');\n const list = document.getElementById('historyList');\n modal.style.display = 'block';\n list.innerHTML = '<p>\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34... (Loading history...)<\/p>';\n\n try {\n const resp = await fetch(`${WEB_APP_URL}?target_sheet=${TARGET_SHEET}&action=read`);\n const rows = await resp.json();\n\n if (!rows || rows.length === 0) {\n list.innerHTML = '<p>\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34 (No history found)<\/p>';\n return;\n }\n\n window._historyData = rows; \/\/ Store globally for access\n list.innerHTML = '';\n rows.forEach((row, idx) => {\n const item = document.createElement('div');\n item.style = \"border:1px solid var(--line); padding:14px; border-radius:12px; background:var(--soft); display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;\";\n\n \/\/ Handle Timestamp formatting\n let dateStr = row[\"Timestamp\"];\n try { if (dateStr) dateStr = new Date(dateStr).toLocaleString(); } catch (e) { }\n\n item.innerHTML = `\n <div style=\"flex:1; padding-right:12px;\">\n <div style=\"font-weight:700; font-size:14px; color:var(--text);\">${row[\"Invoice No\"] || 'No No.'} - ${row[\"Buyer Name\"] || 'Unknown Buyer'}<\/div>\n <div style=\"font-size:12px; color:var(--muted); margin-top:4px;\">\n ${dateStr} | <b>${fmt2(row[\"Grand Total\"])} ${row[\"Currency\"] || 'MYR'}<\/b>\n <\/div>\n <\/div>\n <button class=\"btn primary\" style=\"padding:8px 16px; font-size:12px;\" onclick=\"restoreByIndex(${idx})\">Restore \ud83d\udd04<\/button>\n `;\n list.appendChild(item);\n });\n } catch (err) {\n console.error(err);\n list.innerHTML = `<p style=\"color:var(--danger);\">Error loading history: ${err.message}<\/p>`;\n }\n });\n\n window.restoreByIndex = function (idx) {\n if (!window._historyData || !window._historyData[idx]) return;\n const row = window._historyData[idx];\n restoreData(row[\"Full Data JSON\"]);\n };\n\n window.restoreData = function (jsonStr) {\n if (!jsonStr) return;\n try {\n const data = typeof jsonStr === 'string' ? JSON.parse(jsonStr) : jsonStr;\n\n \/\/ Restore meta fields\n document.querySelectorAll('[data-key]').forEach(el => {\n const key = el.getAttribute('data-key');\n if (data[key] !== undefined) el.textContent = data[key];\n });\n\n \/\/ Restore Summary fields\n document.getElementById('vatOn').checked = !!data.vatEnabled;\n document.getElementById('discount').textContent = data.discount || 0;\n\n \/\/ Restore Items\n const tbody = document.getElementById('rows');\n tbody.innerHTML = '';\n (data.items || []).forEach(item => {\n const tr = document.createElement('tr');\n tr.innerHTML = `\n <td class=\"center mono idx\">0<\/td>\n <td><div class=\"rowpick\"><select class=\"product-select\" data-col=\"product\"><\/select><div class=\"cell-edit\" contenteditable=\"true\" data-col=\"desc\">${item.desc}<\/div><\/div><\/td>\n <td class=\"center\"><div class=\"cell-edit num mono\" contenteditable=\"true\" data-col=\"qty\">${item.qty}<\/div><\/td>\n <td class=\"right\"><div class=\"cell-edit num mono\" contenteditable=\"true\" data-col=\"price\">${fmt2(item.price)}<\/div><\/td>\n <td class=\"right mono amount\">${fmt2(item.amount)}<\/td>\n <td class=\"center\"><button class=\"btn danger\" style=\"padding:7px 10px\" data-action=\"remove\">Delete<\/button><\/td>\n `;\n tbody.appendChild(tr);\n bindRow(tr);\n });\n\n renumber();\n calcAll();\n document.getElementById('historyModal').style.display = 'none';\n alert(\"\u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08! (Restore Success)\");\n } catch (err) {\n console.error(err);\n alert(\"Error restoring data: \" + err.message);\n }\n };\n\n \/\/ Export functions\n document.getElementById('btnPrintPDF').onclick = function () {\n const btn = this;\n const originalText = btn.innerHTML;\n btn.disabled = true;\n btn.innerHTML = \"Processing PDF... \u23f3\";\n\n const invoiceEl = document.getElementById('capture-area');\n const docNo = document.querySelector('[data-key=\"docNo\"]').textContent.trim() || \"Draft\";\n\n html2canvas(invoiceEl, {\n scale: 3, \/\/ High quality\n useCORS: true,\n logging: false,\n backgroundColor: '#ffffff'\n }).then(canvas => {\n const imgData = canvas.toDataURL('image\/jpeg', 1.0);\n\n \/\/ Create a hidden print window\n const printWin = window.open('', '_blank');\n printWin.document.write(`\n <html>\n <head>\n <title>Invoice_${docNo}<\/title>\n <style>\n body { margin: 0; padding: 0; }\n img { width: 100%; height: auto; display: block; }\n @page { margin: 0; size: auto; }\n <\/style>\n <\/head>\n <body>\n <img decoding=\"async\" src=\"${imgData}\" \/>\n <script>\n window.onload = function() {\n window.print();\n setTimeout(() => { window.close(); }, 500);\n };\n <\\\/script>\n <\/body>\n <\/html>\n `);\n printWin.document.close();\n\n btn.disabled = false;\n btn.innerHTML = originalText;\n }).catch(err => {\n console.error(err);\n alert(\"Error generating PDF: \" + err.message);\n btn.disabled = false;\n btn.innerHTML = originalText;\n });\n };\n\n document.getElementById('btnPrintJPG').onclick = function () {\n const btn = this;\n const originalText = btn.innerHTML;\n btn.disabled = true;\n btn.innerHTML = \"Processing JPG... \u23f3\";\n html2canvas(document.getElementById('capture-area'), {\n scale: 3,\n useCORS: true\n }).then(canvas => {\n const link = document.createElement('a');\n link.download = `Invoice_${document.querySelector('[data-key=\"docNo\"]').textContent.trim()}.jpg`;\n link.href = canvas.toDataURL('image\/jpeg', 0.95);\n link.click();\n btn.disabled = false;\n btn.innerHTML = originalText;\n });\n };\n\n <\/script>\n<\/body>\n\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>MANUSUWONGMUNEE SEEUTA – HTML Template \u0e21.\u0e2a MANUSUWONGMUNEE SEEUTA THAI AMULET SHOP \u2022 252 \u0e21.1 \u0e15.\u0e14\u0e2d\u0e19\u0e22\u0e32\u0e07 \u0e08.\u0e02\u0e2d\u0e19\u0e41\u0e01\u0e48\u0e19 \u0e2d.\u0e40\u0e21\u0e37\u0e2d\u0e07 40000 \u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28\u0e44\u0e17\u0e22 \u2022 \u2795 \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e41\u0e16\u0e27 \u0e25\u0e49\u0e32\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \ud83d\uddd1\ufe0f \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \ud83d\udcbe \u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34 \ud83d\udd52 PDF \ud83d\udcc4 JPG \ud83c\udfde\ufe0f \u0e43\u0e1a\u0e01\u0e33\u0e01\u0e31\u0e1a\u0e20\u0e32\u0e29\u0e35 \u0e43\u0e1a\u0e41\u0e08\u0e49\u0e07\u0e2b\u0e19\u0e35\u0e49 \u0e43\u0e1a\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e23\u0e31\u0e1a\u0e40\u0e07\u0e34\u0e19 Tax AND Sales Invoice \u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e09\u0e1a\u0e31\u0e1a\u0e19\u0e35\u0e49\u0e08\u0e31\u0e14\u0e17\u0e33\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e2d\u0e07\u0e20\u0e32\u0e29\u0e32 \u2022 \u0e44\u0e17\u0e22\/\u0e2d\u0e31\u0e07\u0e01\u0e24\u0e29 \u0e40\u0e25\u0e02\u0e17\u0e35\u0e48\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 INV \u0e52\u0e56-\u0e50\u0e50\u0e51 \u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e2d\u0e2d\u0e01\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 \u0e1e.\u0e28 \u0e1e.\u0e28 \u0e52\u0e55\u0e56\u0e59 \u0e40\u0e14\u0e37\u0e2d\u0e19 \u0e51 \u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 \u0e53 \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e0a\u0e33\u0e23\u0e30 \u0e1e.\u0e28 […]<\/p>","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","_joinchat":[],"footnotes":""},"class_list":["post-7960","page","type-page","status-publish","hentry","entry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/louisthai.com\/hk\/wp-json\/wp\/v2\/pages\/7960","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/louisthai.com\/hk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/louisthai.com\/hk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/louisthai.com\/hk\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/louisthai.com\/hk\/wp-json\/wp\/v2\/comments?post=7960"}],"version-history":[{"count":9,"href":"https:\/\/louisthai.com\/hk\/wp-json\/wp\/v2\/pages\/7960\/revisions"}],"predecessor-version":[{"id":7969,"href":"https:\/\/louisthai.com\/hk\/wp-json\/wp\/v2\/pages\/7960\/revisions\/7969"}],"wp:attachment":[{"href":"https:\/\/louisthai.com\/hk\/wp-json\/wp\/v2\/media?parent=7960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}