{"id":7913,"date":"2026-01-04T19:13:26","date_gmt":"2026-01-04T11:13:26","guid":{"rendered":"https:\/\/louisthai.com\/?page_id=7913"},"modified":"2026-05-22T16:13:46","modified_gmt":"2026-05-22T08:13:46","slug":"receipt","status":"publish","type":"page","link":"https:\/\/louisthai.com\/hk\/receipt\/","title":{"rendered":"Receipt"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"7913\" class=\"elementor elementor-7913\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-13de637 elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"13de637\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-cab8221\" data-id=\"cab8221\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-efa0ae6 elementor-widget elementor-widget-html\" data-id=\"efa0ae6\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!doctype html>\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"utf-8\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/3.4.120\/pdf.min.js\"><\/script>\n\n    <title>LOUIS THAI | Receipt Voucher<\/title>\n    <style>\n        .no-print {\n            display: none !important;\n        }\n\n        :root {\n            --ink: #111827;\n            --muted: #6b7280;\n            --line: #e5e7eb;\n            --bg: #ffffff;\n            --panel: #fafafa;\n\n            --brand: #0b1220;\n            --brand-accent: #0ea5e9;\n            --brand-accent-2: #22c55e;\n\n            --radius: 16px;\n            --shadow: 0 18px 50px rgba(17, 24, 39, .10);\n            --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n            --sans: -apple-system, BlinkMacSystemFont, \"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            background: var(--bg);\n            margin: 0;\n            font-family: var(--sans);\n            color: var(--ink);\n        }\n\n        a {\n            color: inherit;\n            text-decoration: none;\n        }\n\n        .page {\n            max-width: 980px;\n            margin: 24px auto;\n            padding: 24px;\n        }\n\n        .paper {\n            background: #fff;\n            border: 1px solid var(--line);\n            border-radius: calc(var(--radius) + 6px);\n            box-shadow: var(--shadow);\n            overflow: hidden;\n        }\n\n        .topbar {\n            display: flex;\n            gap: 16px;\n            align-items: stretch;\n            border-bottom: 1px solid var(--line);\n        }\n\n        .brand-strip {\n            width: 14px;\n            background: linear-gradient(180deg, var(--brand-accent), #2563eb 55%, var(--brand));\n        }\n\n        .header {\n            flex: 1;\n            padding: 18px 20px;\n            display: flex;\n            align-items: flex-start;\n            justify-content: space-between;\n            gap: 16px;\n        }\n\n        .brand-block {\n            display: flex;\n            flex-direction: column;\n            gap: 4px;\n            min-width: 280px;\n        }\n\n        .brand-name {\n            font-weight: 800;\n            letter-spacing: .16em;\n            text-transform: uppercase;\n            font-size: 14px;\n            color: var(--brand);\n        }\n\n        .doc-title {\n            font-weight: 900;\n            letter-spacing: .18em;\n            text-transform: uppercase;\n            font-size: 18px;\n            margin-top: 2px;\n        }\n\n        .subline {\n            color: var(--muted);\n            font-size: 12px;\n            line-height: 1.35;\n        }\n\n        .meta {\n            display: grid;\n            grid-template-columns: 140px 1fr;\n            gap: 8px 12px;\n            padding: 10px 12px;\n            border: 1px solid var(--line);\n            border-radius: 14px;\n            background: linear-gradient(180deg, #ffffff, #f8fafc);\n            min-width: 320px;\n        }\n\n        .meta .k {\n            color: var(--muted);\n            font-size: 11px;\n            text-transform: uppercase;\n            letter-spacing: .14em;\n        }\n\n        .meta .v {\n            text-align: right;\n            font-weight: 700;\n            font-size: 12px;\n        }\n\n        .content {\n            padding: 20px;\n            display: grid;\n            grid-template-columns: 1.1fr .9fr;\n            gap: 16px;\n        }\n\n        .card {\n            border: 1px solid var(--line);\n            border-radius: var(--radius);\n            background: #fff;\n            overflow: hidden;\n        }\n\n        .card-h {\n            padding: 12px 14px;\n            border-bottom: 1px solid var(--line);\n            background: var(--panel);\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            gap: 12px;\n        }\n\n        .card-title {\n            font-weight: 800;\n            font-size: 12px;\n            letter-spacing: .14em;\n            text-transform: uppercase;\n            color: var(--brand);\n        }\n\n        .pill {\n            font-size: 11px;\n            font-weight: 800;\n            letter-spacing: .12em;\n            text-transform: uppercase;\n            padding: 6px 10px;\n            border-radius: 999px;\n            border: 1px solid rgba(14, 165, 233, .35);\n            background: rgba(14, 165, 233, .10);\n            color: #075985;\n            white-space: nowrap;\n        }\n\n        .card-b {\n            padding: 14px;\n        }\n\n        .kv {\n            display: grid;\n            grid-template-columns: 160px 1fr;\n            gap: 10px 12px;\n            align-items: start;\n        }\n\n        .kv .k {\n            color: var(--muted);\n            font-size: 11px;\n            text-transform: uppercase;\n            letter-spacing: .12em;\n            padding-top: 2px;\n        }\n\n        .kv .v {\n            font-weight: 700;\n            font-size: 13px;\n            min-height: 18px;\n            border-bottom: 1px dashed rgba(107, 114, 128, .35);\n            padding-bottom: 4px;\n        }\n\n        .kv .v.mono {\n            font-family: var(--mono);\n            font-weight: 700;\n        }\n\n        .amount-wrap {\n            display: grid;\n            gap: 12px;\n        }\n\n        .amount {\n            border: 1px solid rgba(37, 99, 235, .20);\n            background: linear-gradient(180deg, rgba(14, 165, 233, .10), rgba(37, 99, 235, .06));\n            border-radius: var(--radius);\n            padding: 14px;\n        }\n\n        .amount .row {\n            display: flex;\n            justify-content: space-between;\n            gap: 10px;\n            margin: 6px 0;\n            font-size: 13px;\n        }\n\n        .amount .row .l {\n            color: var(--muted);\n        }\n\n        .amount .row .r {\n            font-weight: 800;\n        }\n\n        .amount .total {\n            margin-top: 10px;\n            padding-top: 10px;\n            border-top: 1px solid rgba(37, 99, 235, .25);\n            display: flex;\n            align-items: baseline;\n            justify-content: space-between;\n            gap: 12px;\n        }\n\n        .amount .total .label {\n            text-transform: uppercase;\n            letter-spacing: .14em;\n            font-weight: 900;\n            font-size: 12px;\n            color: var(--brand);\n        }\n\n        .amount .total .value {\n            font-size: 22px;\n            font-weight: 900;\n            letter-spacing: .02em;\n        }\n\n        table {\n            width: 100%;\n            border-collapse: collapse;\n            overflow: hidden;\n            border-radius: 14px;\n            border: 1px solid var(--line);\n        }\n\n        thead th {\n            background: #f8fafc;\n            border-bottom: 1px solid var(--line);\n            color: var(--muted);\n            text-transform: uppercase;\n            letter-spacing: .14em;\n            font-size: 11px;\n            padding: 10px 10px;\n            text-align: left;\n        }\n\n        tbody td {\n            padding: 10px 10px;\n            border-bottom: 1px solid var(--line);\n            font-size: 13px;\n            vertical-align: top;\n        }\n\n        tbody tr:last-child td {\n            border-bottom: none;\n        }\n\n        td.num {\n            text-align: right;\n            font-family: var(--mono);\n        }\n\n        td.muted {\n            color: var(--muted);\n            font-size: 12px;\n        }\n\n        .footer {\n            padding: 16px 20px 18px;\n            border-top: 1px solid var(--line);\n            display: flex;\n            align-items: flex-end;\n            justify-content: space-between;\n            gap: 16px;\n            background: #fff;\n        }\n\n        .sign {\n            display: grid;\n            gap: 10px;\n            min-width: 360px;\n        }\n\n        .sig-row {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 12px;\n        }\n\n        .sig {\n            border: 1px solid var(--line);\n            border-radius: 14px;\n            padding: 10px 12px;\n            background: linear-gradient(180deg, #fff, #fbfbfb);\n        }\n\n        .sig .label {\n            color: var(--muted);\n            font-size: 11px;\n            text-transform: uppercase;\n            letter-spacing: .14em;\n            margin-bottom: 18px;\n        }\n\n        .sig .line {\n            border-bottom: 1px dashed rgba(107, 114, 128, .45);\n            height: 20px;\n        }\n\n        .note {\n            max-width: 420px;\n            color: var(--muted);\n            font-size: 11px;\n            line-height: 1.5;\n        }\n\n        @media print {\n            body {\n                background: #fff;\n            }\n\n            .page {\n                margin: 0;\n                padding: 0;\n            }\n\n            .paper {\n                box-shadow: none;\n                border: 0;\n                border-radius: 0;\n            }\n\n            .note a {\n                text-decoration: underline;\n            }\n        }\n\n        @media (max-width: 900px) {\n            .header {\n                flex-direction: column;\n            }\n\n            .meta {\n                width: 100%;\n            }\n\n            .content {\n                grid-template-columns: 1fr;\n            }\n\n            .sign {\n                min-width: 0;\n                width: 100%;\n            }\n        }\n\n        .items-actions {\n            display: flex;\n            justify-content: flex-end;\n            margin-top: 10px;\n        }\n\n        .btn {\n            appearance: none;\n            border: 1px solid #e5e7ef;\n            background: #fff;\n            border-radius: 999px;\n            padding: 8px 12px;\n            font-size: 12px;\n            letter-spacing: .08em;\n            text-transform: uppercase;\n            cursor: pointer;\n            box-shadow: 0 4px 10px rgba(0, 0, 0, .06);\n        }\n\n        .btn:hover {\n            transform: translateY(-1px);\n        }\n\n        .btn:active {\n            transform: translateY(0);\n        }\n\n        .btn-outline {\n            border-color: rgba(193, 25, 19, .25);\n            color: #c11913;\n        }\n\n        .btn-primary {\n            background: var(--brand);\n            color: #fff;\n            border: 1px solid var(--brand);\n        }\n\n        .btn-primary:hover {\n            background: #1f2937;\n        }\n\n        \/* Row actions *\/\n        .btn-remove {\n            background: none;\n            border: none;\n            color: #ef4444;\n            cursor: pointer;\n            font-size: 16px;\n            font-weight: bold;\n            padding: 0 8px;\n            visibility: hidden;\n            opacity: 0.6;\n            transition: all 0.2s;\n        }\n\n        tr:hover .btn-remove {\n            visibility: visible;\n            opacity: 1;\n        }\n\n        .btn-remove:hover {\n            color: #b91c1c;\n            transform: scale(1.2);\n        }\n\n\n        .date-input {\n            width: 100%;\n            border: 0;\n            border-bottom: 1px dashed #cfd6e4;\n            padding: 10px 0 6px;\n            font: inherit;\n            color: inherit;\n            background: transparent;\n            outline: none;\n        }\n\n\n        .sigpad {\n            border: 1px solid #e5e7ef;\n            border-radius: 14px;\n            padding: 10px;\n            background: #fff;\n            box-shadow: 0 10px 22px rgba(0, 0, 0, .05);\n        }\n\n        .sig-canvas {\n            width: 100%;\n            height: 120px;\n            display: block;\n            border-radius: 10px;\n            background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);\n        }\n\n        .sig-actions {\n            display: flex;\n            justify-content: flex-end;\n            margin-top: 8px;\n        }\n\n\n        .file-input {\n            width: 100%;\n            font: inherit;\n            font-size: 12px;\n            opacity: .9\n        }\n\n        .attach-preview {\n            margin-top: 10px;\n            border: 1px dashed #cfd6e4;\n            border-radius: 12px;\n            padding: 10px;\n            min-height: 72px;\n            background: #fafbff\n        }\n\n        .attach-preview img {\n            max-width: 100%;\n            border-radius: 10px;\n            display: block\n        }\n\n        .attach-preview canvas,\n        .attach-preview embed {\n            width: 100%;\n            height: auto;\n            max-height: 400px;\n            border: 0;\n            border-radius: 10px;\n            background: #fff;\n            display: block;\n        }\n    <\/style>\n<\/head>\n\n<body>\n    <div class=\"page\">\n        <div class=\"paper\">\n            <div class=\"topbar\">\n                <div class=\"brand-strip\"><\/div>\n                <div class=\"header\">\n                    <div class=\"brand-block\">\n                        <div class=\"brand-name\">LOUIS THAI<\/div>\n                        <div class=\"doc-title\">Receipt Voucher<\/div>\n                        <div class=\"subline\">\n                            LOUIS THAI International Group Sdn Bhd (1433631-V)<br \/>\n                            Website: https;\/\/louisthai.com\/ \u00b7 Contact: +60 111 622 3916 \u00b7 Email: louis@louisthai.com\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"meta\">\n                        <div class=\"k\">RECEIPT VOUCHER NO.<\/div>\n                        <div class=\"v\" id=\"field-receipt-no\" contenteditable=\"true\">R26\/0001<\/div>\n                        <div class=\"k\">RECEIPT VOUCHER NO. 2<\/div>\n                        <div class=\"v\" contenteditable=\"true\">-<\/div>\n                        <div class=\"k\">Issue Date<\/div>\n                        <div class=\"v\" contenteditable=\"true\">01 Jan 2026<\/div>\n                        <div class=\"k\">Currency<\/div>\n                        <div class=\"v\" contenteditable=\"true\">MYR<\/div>\n                        <div class=\"k\">Reference<\/div>\n                        <div class=\"v\" contenteditable=\"true\">INV0126\/0001<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"content\">\n                <div class=\"card\">\n                    <div class=\"card-h\">\n                        <div class=\"card-title\">Received From<\/div>\n                        <div class=\"pill\">Official Receipt<\/div>\n                    <\/div>\n                    <div class=\"card-b\">\n                        <div class=\"kv\">\n                            <div class=\"k\">Client \/ Company<\/div>\n                            <div class=\"v\" id=\"field-client-name\" contenteditable=\"true\">-<\/div>\n\n                            <div class=\"k\">Contact No.<\/div>\n                            <div class=\"v mono\" contenteditable=\"true\">+60 <\/div>\n\n                            <div class=\"k\">Email<\/div>\n                            <div class=\"v\" contenteditable=\"true\">-<\/div>\n\n                            <div class=\"k\">Address<\/div>\n                            <div class=\"v\" contenteditable=\"true\">-<\/div>\n\n                            <div class=\"k\">Payment Method<\/div>\n                            <div class=\"v\" contenteditable=\"true\">Online Banking Transfer \/ Cash \/ Stripe Bank<\/div>\n\n                            <div class=\"k\">Transaction ID<\/div>\n                            <div class=\"v mono\" contenteditable=\"true\">-<\/div>\n\n                            <div class=\"k\">Purpose \/ Description<\/div>\n                            <div class=\"v\" contenteditable=\"true\">Payment received for goods\/services as per reference\n                                invoice.<\/div>\n                        <\/div>\n\n                        <div style=\"height:14px\"><\/div>\n\n                        <table class=\"items\">\n                            <thead>\n                                <tr>\n                                    <th style=\"width:56px\">#<\/th>\n                                    <th>Description<\/th>\n                                    <th style=\"width:110px\">Qty<\/th>\n                                    <th style=\"width:140px\">Unit (MYR)<\/th>\n                                    <th style=\"width:140px\">Amount (MYR)<\/th>\n                                    <th style=\"width:40px\"><\/th>\n                                <\/tr>\n                            <\/thead>\n                            <tbody>\n                                <tr>\n                                    <td class=\"muted\">1<\/td>\n                                    <td contenteditable=\"true\">i-Premium 1Y<\/td>\n                                    <td class=\"num\" contenteditable=\"true\">1<\/td>\n                                    <td class=\"num\" contenteditable=\"true\">0.00<\/td>\n                                    <td class=\"num\" contenteditable=\"true\">0.00<\/td>\n                                    <td style=\"text-align:center\"><button class=\"btn-remove\"\n                                            title=\"Remove row\">\u00d7<\/button><\/td>\n                                <\/tr>\n                                <tr>\n                                    <td class=\"muted\">2<\/td>\n                                    <td contenteditable=\"true\">Professional Charges<\/td>\n                                    <td class=\"num\" contenteditable=\"true\">1<\/td>\n                                    <td class=\"num\" contenteditable=\"true\">5.00<\/td>\n                                    <td class=\"num\" contenteditable=\"true\">5.00<\/td>\n                                    <td style=\"text-align:center\"><button class=\"btn-remove\"\n                                            title=\"Remove row\">\u00d7<\/button><\/td>\n                                <\/tr>\n                                <tr>\n                                    <td class=\"muted\">3<\/td>\n                                    <td contenteditable=\"true\">Warranty Series 3.0 X30<\/td>\n                                    <td class=\"num\" contenteditable=\"true\">1<\/td>\n                                    <td class=\"num\" contenteditable=\"true\">25.00<\/td>\n                                    <td class=\"num\" contenteditable=\"true\">25.00<\/td>\n                                    <td style=\"text-align:center\"><button class=\"btn-remove\"\n                                            title=\"Remove row\">\u00d7<\/button><\/td>\n                                <\/tr>\n                            <\/tbody>\n                        <\/table>\n                        <div class=\"items-actions\">\n                            <button type=\"button\" id=\"add-item-btn\" class=\"btn btn-outline\">+ Add Item<\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"amount-wrap\">\n                    <div class=\"card\">\n                        <div class=\"card-h\">\n                            <div class=\"card-title\">Amount Summary<\/div>\n                            <div class=\"pill\">Verified<\/div>\n                        <\/div>\n                        <div class=\"card-b\">\n                            <div class=\"amount\">\n                                <div class=\"row\">\n                                    <div class=\"l\">Subtotal<\/div>\n                                    <div class=\"r\" id=\"subtotal\">0.00<\/div>\n                                <\/div>\n                                <div class=\"row\">\n                                    <div class=\"l\">Discount<\/div>\n                                    <div class=\"r\" id=\"discount\" contenteditable=\"true\">0.00<\/div>\n                                <\/div>\n                                <div class=\"row\">\n                                    <div class=\"l\">Tax<\/div>\n                                    <div class=\"r\" id=\"tax\" contenteditable=\"true\">0.00<\/div>\n                                <\/div>\n                                <div class=\"row\">\n                                    <div class=\"l\">Fees<\/div>\n                                    <div class=\"r\" id=\"fees\" contenteditable=\"true\">0.00<\/div>\n                                <\/div>\n                                <div class=\"total\">\n                                    <div class=\"label\">Total Received<\/div>\n                                    <div class=\"value\" id=\"grand-total\" contenteditable=\"false\">0.00<\/div>\n                                <\/div>\n                            <\/div>\n\n                            <div style=\"height:12px\"><\/div>\n\n                            <div class=\"kv\">\n                                <div class=\"k\">Received By<\/div>\n                                <div class=\"v\" contenteditable=\"true\">LOUIS THAI Finance<\/div>\n\n                                <div class=\"k\">Division<\/div>\n                                <div class=\"v\" contenteditable=\"true\">MSIC 96092 \/ 46909 \/ 45105<\/div>\n\n                                <div class=\"k\">Notes<\/div>\n                                <div class=\"v\" contenteditable=\"true\">This receipt is system-generated and serves as\n                                    proof of payment.\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"card\">\n                        <div class=\"card-h\">\n                            <div class=\"card-title\">Internal Use<\/div>\n                            <div class=\"pill\">Optional<\/div>\n                        <\/div>\n                        <div class=\"card-b\">\n                            <div class=\"kv\">\n                                <div class=\"k\">Voucher Code<\/div>\n                                <div class=\"v mono\" contenteditable=\"true\">-<\/div>\n\n                                <div class=\"k\">Approved By<\/div>\n                                <div class=\"v\" contenteditable=\"true\">Dr. Steven Kok Hao Wan<\/div>\n\n                                <div class=\"k\">Prepared By<\/div>\n                                <div class=\"v\" contenteditable=\"true\">Wong Shee Yee, Louis<\/div>\n\n                                <div class=\"k\">Attach Proof<\/div>\n                                <div class=\"v\">\n                                    <input id=\"attach-proof\" class=\"file-input\" type=\"file\"\n                                        accept=\"image\/*,application\/pdf\" \/>\n                                    <div id=\"attach-preview\" class=\"attach-preview muted\">Upload bank slip \/ gateway\n                                        receipt (image or\n                                        PDF). Preview will appear here.<\/div>\n                                <\/div>\n                            <\/div>\n\n                            <div style=\"height:12px\"><\/div>\n\n                            <div class=\"note\">\n                                <b>Tip for internal staff use:<\/b> Export to PDF via <b>Cmd+P<\/b> \u2192 <b>Save as\n                                    PDF<\/b>.<br \/>\n                                Any issue with system receipt generator please directly report to relevant department to\n                                slove the issue\n                                to advoid delay of receipt issue progress.\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"footer\">\n                <div class=\"sign\">\n                    <div class=\"sig-row\">\n                        <div class=\"sig\">\n                            <div class=\"label\">Customer Signature<\/div>\n                            <div class=\"line\"><\/div>\n                        <\/div>\n                        <div class=\"sig\">\n                            <div class=\"label\">Authorized Signature<\/div>\n                            <div class=\"line\"><\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"sig-row\">\n                        <div class=\"sig\">\n                            <div class=\"label\">Date<\/div>\n                            <input class=\"date-input\" type=\"date\" id=\"voucher-date\" \/>\n                        <\/div>\n                        <div class=\"sig\">\n                            <div class=\"label\">Company Stamp<\/div>\n                            <div class=\"line\"><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"note\">\n                    <b>LOUIS THAI<\/b> \u00b7 Receipt Voucher<br \/>\n                    This document confirms payment received. Any disputes should be supported by evidence.<br \/>\n                    <span style=\"font-family:var(--mono)\">System powered by LOUIS THAI Digitalization | Future Inovation\n                        by 2030 |\n                        ESG | Green Receipt<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div style=\"margin-top:24px; display:flex; justify-content:center; gap:16px;\">\n            <button type=\"button\" id=\"download-pdf-btn\" class=\"btn btn-primary\"\n                style=\"padding:12px 32px; font-weight:700;\">Download Professional PDF<\/button>\n        <\/div>\n    <\/div>\n\n    <script>\n        (function () {\n            \/\/ Set today's date by default\n            const d = document.getElementById('voucher-date');\n            if (d && !d.value) {\n                const now = new Date();\n                const yyyy = now.getFullYear();\n                const mm = String(now.getMonth() + 1).padStart(2, '0');\n                const dd = String(now.getDate()).padStart(2, '0');\n                d.value = `${yyyy}-${mm}-${dd}`;\n            }\n\n            \/\/ Signature pads (mouse + touch)\n            function initSig(canvas) {\n                const ctx = canvas.getContext('2d');\n                ctx.lineWidth = 2.2;\n                ctx.lineCap = 'round';\n                ctx.strokeStyle = '#111827';\n                let drawing = false;\n                let last = null;\n\n                function pos(e) {\n                    const rect = canvas.getBoundingClientRect();\n                    const clientX = (e.touches && e.touches[0]) ? e.touches[0].clientX : e.clientX;\n                    const clientY = (e.touches && e.touches[0]) ? e.touches[0].clientY : e.clientY;\n                    return {\n                        x: (clientX - rect.left) * (canvas.width \/ rect.width),\n                        y: (clientY - rect.top) * (canvas.height \/ rect.height)\n                    };\n                }\n\n                function start(e) {\n                    drawing = true;\n                    last = pos(e);\n                    e.preventDefault();\n                }\n                function move(e) {\n                    if (!drawing) return;\n                    const p = pos(e);\n                    ctx.beginPath();\n                    ctx.moveTo(last.x, last.y);\n                    ctx.lineTo(p.x, p.y);\n                    ctx.stroke();\n                    last = p;\n                    e.preventDefault();\n                }\n                function end() { drawing = false; last = null; }\n\n                canvas.addEventListener('mousedown', start);\n                canvas.addEventListener('mousemove', move);\n                window.addEventListener('mouseup', end);\n\n                canvas.addEventListener('touchstart', start, { passive: false });\n                canvas.addEventListener('touchmove', move, { passive: false });\n                window.addEventListener('touchend', end);\n\n                return {\n                    clear() { ctx.clearRect(0, 0, canvas.width, canvas.height); }\n                };\n            }\n\n            const sigPads = {};\n            document.querySelectorAll('canvas.sig-canvas').forEach(c => {\n                sigPads[c.id] = initSig(c);\n            });\n            document.querySelectorAll('.sig-clear').forEach(btn => {\n                btn.addEventListener('click', () => {\n                    const id = btn.getAttribute('data-clear');\n                    if (sigPads[id]) sigPads[id].clear();\n                });\n            });\n\n            \/\/ Attach proof preview (image\/pdf)\n            const fileInput = document.getElementById('attach-proof');\n            const preview = document.getElementById('attach-preview');\n            if (fileInput && preview) {\n                fileInput.addEventListener('change', () => {\n                    const f = fileInput.files && fileInput.files[0];\n                    if (!f) { preview.textContent = 'Upload bank slip \/ gateway receipt (image or PDF). Preview will appear here.'; return; }\n                    const url = URL.createObjectURL(f);\n                    preview.innerHTML = '';\n                    if (f.type === 'application\/pdf') {\n                        const reader = new FileReader();\n                        reader.onload = function () {\n                            const typedarray = new Uint8Array(this.result);\n                            const pdfjsLib = window['pdfjs-dist\/build\/pdf'];\n                            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/3.4.120\/pdf.worker.min.js';\n\n                            pdfjsLib.getDocument(typedarray).promise.then(pdf => {\n                                pdf.getPage(1).then(page => {\n                                    const viewport = page.getViewport({ scale: 1.5 });\n                                    const canvas = document.createElement('canvas');\n                                    const context = canvas.getContext('2d');\n                                    canvas.height = viewport.height;\n                                    canvas.width = viewport.width;\n\n                                    page.render({ canvasContext: context, viewport: viewport }).promise.then(() => {\n                                        preview.innerHTML = '';\n                                        preview.appendChild(canvas);\n                                    });\n                                });\n                            }).catch(err => {\n                                console.error('PDF Render error:', err);\n                                preview.textContent = 'Error rendering PDF preview. But file is attached.';\n                            });\n                        };\n                        reader.readAsArrayBuffer(f);\n                    } else if (f.type.startsWith('image\/')) {\n                        const img = document.createElement('img');\n                        img.src = url;\n                        img.alt = 'Proof preview';\n                        preview.appendChild(img);\n                    } else {\n                        preview.textContent = 'Unsupported file type. Please upload an image or PDF.';\n                    }\n                });\n            }\n\n            \/\/ Items table add row + subtotal calc\n            const tbody = document.querySelector('table.items tbody');\n            const addBtn = document.getElementById('add-item-btn');\n            const subtotalEl = document.getElementById('subtotal');\n\n            function parseNum(v) {\n                if (v == null) return 0;\n                const s = String(v).replace(\/[^\\d.\\-]\/g, '');\n                const n = parseFloat(s);\n                return Number.isFinite(n) ? n : 0;\n            }\n            function fmt(n) {\n                return (Math.round(n * 100) \/ 100).toFixed(2);\n            }\n            function renumber() {\n                if (!tbody) return;\n                [...tbody.querySelectorAll('tr')].forEach((tr, i) => {\n                    const td0 = tr.querySelector('td');\n                    if (td0) td0.textContent = String(i + 1);\n                });\n            }\n            function recalc() {\n                if (!tbody || !subtotalEl) return;\n                let sum = 0;\n                [...tbody.querySelectorAll('tr')].forEach(tr => {\n                    const tds = tr.querySelectorAll('td');\n                    if (tds.length < 5) return;\n                    const qty = parseNum(tds[2].textContent);\n                    const unit = parseNum(tds[3].textContent);\n                    const amount = (qty && unit) ? qty * unit : parseNum(tds[4].textContent);\n\n                    \/\/ If we have qty and unit, update amount cell unless they are 0\n                    if (qty !== 0 && unit !== 0) {\n                        tds[4].textContent = fmt(amount);\n                    }\n                    sum += parseNum(tds[4].textContent);\n                });\n\n                subtotalEl.textContent = fmt(sum);\n\n                const disc = parseNum(document.getElementById('discount').textContent);\n                const tax = parseNum(document.getElementById('tax').textContent);\n                const fees = parseNum(document.getElementById('fees').textContent);\n                const total = sum - disc + tax + fees;\n\n                const gt = document.getElementById('grand-total');\n                if (gt) gt.textContent = fmt(total);\n            }\n\n            document.addEventListener('input', (e) => {\n                const target = e.target;\n                if (target.closest('table.items tbody') ||\n                    target.id === 'discount' ||\n                    target.id === 'tax' ||\n                    target.id === 'fees') {\n                    recalc();\n                }\n            });\n\n            if (addBtn && tbody) {\n                addBtn.addEventListener('click', () => {\n                    const tr = document.createElement('tr');\n                    tr.innerHTML = `\n          <td class=\"muted\">${tbody.children.length + 1}<\/td>\n          <td contenteditable=\"true\">New item<\/td>\n          <td class=\"num\" contenteditable=\"true\">1<\/td>\n          <td class=\"num\" contenteditable=\"true\">0.00<\/td>\n          <td class=\"num\" contenteditable=\"true\">0.00<\/td>\n          <td style=\"text-align:center\"><button class=\"btn-remove\" title=\"Remove row\">\u00d7<\/button><\/td>\n        `;\n                    tbody.appendChild(tr);\n                    renumber();\n                    recalc();\n                    \/\/ Scroll into view for convenience\n                    tr.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n                });\n\n                tbody.addEventListener('click', (e) => {\n                    if (e.target.classList.contains('btn-remove')) {\n                        const tr = e.target.closest('tr');\n                        if (tbody.querySelectorAll('tr').length > 1) {\n                            tr.remove();\n                            renumber();\n                            recalc();\n                        } else {\n                            \/\/ Clear row if it's the last one\n                            tr.querySelectorAll('td[contenteditable=\"true\"]').forEach(td => {\n                                td.textContent = td.classList.contains('num') ? '0.00' : 'New item';\n                            });\n                            recalc();\n                        }\n                    }\n                });\n            }\n\n            \/\/ PDF Export function\n            const downloadBtn = document.getElementById('download-pdf-btn');\n            if (downloadBtn) {\n                downloadBtn.addEventListener('click', async () => {\n                    const { jsPDF } = window.jspdf;\n                    const paper = document.querySelector('.paper');\n                    const actions = document.querySelectorAll('.items-actions, .btn-remove, .file-input, .sig-clear');\n\n                    \/\/ Show loading state\n                    const originalText = downloadBtn.textContent;\n                    downloadBtn.textContent = 'Generating...';\n                    downloadBtn.disabled = true;\n\n                    \/\/ Temporary hide interactive elements\n                    actions.forEach(el => el.style.opacity = '0');\n\n                    try {\n                        const canvas = await html2canvas(paper, {\n                            scale: 4, \/\/ Ultra HD Scale (4x density)\n                            useCORS: true,\n                            logging: false,\n                            backgroundColor: '#ffffff',\n                            windowWidth: 980,\n                            onclone: (clonedDoc) => {\n                                const clonedPaper = clonedDoc.querySelector('.paper');\n                                clonedPaper.style.fontSmoothing = 'antialiased';\n                                clonedPaper.style.webkitFontSmoothing = 'antialiased';\n                                clonedPaper.style.textRendering = 'optimizeLegibility';\n                            }\n                        });\n\n                        const imgData = canvas.toDataURL('image\/jpeg', 1.0); \/\/ Max quality JPEG for smooth gradients\n\n                        \/\/ Calculate dimensions\n                        const imgWidthInMm = 210;\n                        const imgHeightInMm = (canvas.height * imgWidthInMm) \/ canvas.width;\n\n                        const pdfPageHeight = Math.max(297, imgHeightInMm);\n                        const pdf = new jspdf.jsPDF({\n                            orientation: 'p',\n                            unit: 'mm',\n                            format: [imgWidthInMm, pdfPageHeight],\n                            compress: true\n                        });\n\n                        pdf.addImage(imgData, 'JPEG', 0, 0, imgWidthInMm, imgHeightInMm, undefined, 'FAST');\n\n                        const clientName = document.getElementById('field-client-name')?.textContent.trim().replace(\/\\s+\/g, '_').replace(\/[^\\w-]\/g, '') || 'Client';\n                        const receiptNo = document.getElementById('field-receipt-no')?.textContent.trim().replace(\/\\s+\/g, '_').replace(\/[^\\w-]\/g, '') || 'Receipt';\n\n                        pdf.save(`${clientName}_${receiptNo}.pdf`);\n                    } catch (err) {\n                        console.error('PDF Generation failed:', err);\n                        alert('Failed to generate PDF. Please try again.');\n                    } finally {\n                        \/\/ Restore interactive elements\n                        actions.forEach(el => el.style.opacity = '');\n                        downloadBtn.textContent = originalText;\n                        downloadBtn.disabled = false;\n                    }\n                });\n            }\n\n            \/\/ Initial calc\n            recalc();\n        })();\n    <\/script>\n\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>LOUIS THAI | Receipt Voucher LOUIS THAI Receipt Voucher LOUIS THAI International Group Sdn Bhd (1433631-V) Website: https;\/\/louisthai.com\/ \u00b7 Contact: +60 111 622 3916 \u00b7 Email: louis@louisthai.com RECEIPT VOUCHER NO. R26\/0001 RECEIPT VOUCHER NO. 2 &#8211; Issue Date 01 Jan 2026 Currency MYR Reference INV0126\/0001 Received From Official Receipt Client \/ Company &#8211; Contact No. [&hellip;]<\/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-7913","page","type-page","status-publish","hentry","entry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/louisthai.com\/hk\/wp-json\/wp\/v2\/pages\/7913","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=7913"}],"version-history":[{"count":18,"href":"https:\/\/louisthai.com\/hk\/wp-json\/wp\/v2\/pages\/7913\/revisions"}],"predecessor-version":[{"id":8110,"href":"https:\/\/louisthai.com\/hk\/wp-json\/wp\/v2\/pages\/7913\/revisions\/8110"}],"wp:attachment":[{"href":"https:\/\/louisthai.com\/hk\/wp-json\/wp\/v2\/media?parent=7913"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}