Universal Invoice & Bill Generator – Production Edition<\/title>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2pdf.js\/0.10.1\/html2pdf.bundle.min.js\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/docx@8.5.0\/build\/index.umd.min.js\"><\/script>\n\n <style>\n \/* --- SCOPED APPLICATION UI STYLES --- *\/\n .uige-body {\n background-color: #f4f6f9;\n font-family: 'Inter', sans-serif;\n color: #333;\n }\n .uige-app-header {\n background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);\n color: #fff;\n padding: 2.5rem 0;\n margin-bottom: 2rem;\n border-bottom: 5px solid #0d6efd;\n }\n .uige-card {\n border: none;\n border-radius: 12px;\n box-shadow: 0 4px 12px rgba(0,0,0,0.05);\n margin-bottom: 1.5rem;\n background: #fff;\n }\n .uige-card-header {\n background-color: #fff;\n border-bottom: 1px solid #edf2f7;\n font-weight: 600;\n padding: 1rem 1.25rem;\n }\n .uige-focus-ring:focus {\n border-color: #3b82f6 !important;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;\n outline: none;\n }\n .uige-template-card {\n border: 2px solid #e2e8f0;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n text-align: center;\n padding: 1rem;\n background: #fff;\n }\n .uige-template-card:hover {\n border-color: #3b82f6;\n transform: translateY(-2px);\n }\n .uige-template-card.active {\n border-color: #2563eb;\n background-color: #eff6ff;\n box-shadow: 0 0 0 1px #2563eb;\n }\n \n \/* --- LIVE PREVIEW CONTAINER --- *\/\n #uige-preview-wrapper {\n background-color: #525659;\n padding: 2rem 1rem;\n border-radius: 12px;\n overflow-x: auto;\n display: flex;\n justify-content: center;\n }\n \n \/* --- A4 PRINT ENGINE AND INVOICE MARKUP VARIATIONS --- *\/\n .invoice-print-container {\n width: 210mm;\n min-height: 297mm;\n padding: 20mm;\n background: #ffffff;\n color: #000000;\n box-sizing: border-box;\n position: relative;\n font-size: 14px;\n line-height: 1.4;\n }\n\n \/* Border Variants *\/\n .inv-border-classic { border: 2px solid #000; }\n .inv-border-classic .inv-table th, .inv-border-classic .inv-table td { border: 1px solid #000; }\n \n .inv-border-modern { border: 1px solid #ddd; }\n .inv-border-modern .inv-table th { background-color: #f8fafc; border-bottom: 2px solid #cbd5e1; }\n .inv-border-modern .inv-table td { border-bottom: 1px solid #e2e8f0; }\n \n .inv-border-rounded { border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; }\n .inv-border-rounded .inv-table { border-radius: 6px; overflow: hidden; border: 1px solid #cbd5e1; }\n .inv-border-rounded .inv-table th { border-bottom: 1px solid #cbd5e1; background-color: var(--theme-bg); }\n .inv-border-rounded .inv-table td { border-bottom: 1px solid #f1f5f9; }\n\n \/* Font Classes *\/\n .inv-font-arial { font-family: Arial, sans-serif; }\n .inv-font-roboto { font-family: 'Roboto', sans-serif; }\n .inv-font-poppins { font-family: 'Poppins', sans-serif; }\n .inv-font-inter { font-family: 'Inter', sans-serif; }\n\n \/* Color Themes *\/\n .inv-theme-blue { --theme-color: #1e40af; --theme-bg: #eff6ff; }\n .inv-theme-green { --theme-color: #065f46; --theme-bg: #ecfdf5; }\n .inv-theme-black { --theme-color: #0f172a; --theme-bg: #f8fafc; }\n .inv-theme-red { --theme-color: #991b1b; --theme-bg: #fef2f2; }\n .inv-theme-purple { --theme-color: #6b21a8; --theme-bg: #faf5ff; }\n\n .inv-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }\n .inv-logo { max-width: 150px; max-height: 70px; object-fit: contain; }\n .inv-title-banner { font-size: 24px; font-weight: 700; text-transform: uppercase; color: var(--theme-color); margin-bottom: 5px; }\n .inv-meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px dashed #cbd5e1; }\n .inv-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }\n .inv-table th { padding: 10px; text-align: left; font-weight: 600; background-color: var(--theme-bg); color: var(--theme-color); }\n .inv-table td { padding: 10px; vertical-align: top; }\n .inv-summary-wrapper { display: flex; justify-content: space-between; margin-bottom: 30px; page-break-inside: avoid; }\n .inv-words { width: 55%; font-style: italic; font-size: 13px; }\n .inv-totals { width: 40%; }\n .inv-totals-row { display: flex; justify-content: space-between; padding: 5px 0; }\n .inv-totals-grand { font-size: 16px; font-weight: 700; border-top: 2px solid var(--theme-color); border-bottom: 2px solid var(--theme-color); padding: 8px 0; color: var(--theme-color); }\n .inv-footer { position: absolute; bottom: 15mm; left: 20mm; right: 20mm; border-top: 1px solid #cbd5e1; padding-top: 15px; display: flex; justify-content: space-between; align-items: flex-end; page-break-inside: avoid; }\n \n .uige-blank-line { display: inline-block; border-bottom: 1px dashed #000; margin-left: 5px; flex-grow: 1; min-height: 20px; }\n .uige-blank-row { display: flex; margin-bottom: 8px; width: 100%; align-items: flex-end; }\n\n \/* TOAST NOTIFICATION SYSTEM *\/\n .uige-toast-container { position: fixed; top: 20px; right: 20px; z-index: 1100; }\n .uige-toast { background: #333; color: #fff; padding: 12px 24px; border-radius: 8px; margin-bottom: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 10px; animation: slideIn 0.3s ease forwards; }\n .uige-toast-success { border-left: 4px solid #10b981; }\n .uige-toast-error { border-left: 4px solid #ef4444; }\n @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }\n\n \/* NATIVE DEVICE PRINT MEDIA CONFIGURATION *\/\n @media print {\n body * { visibility: hidden !important; }\n #print-area, #print-area * { visibility: visible !important; }\n #print-area { position: absolute; left: 0; top: 0; width: 210mm; height: 297mm; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }\n .no-print { display: none !important; }\n @page { size: A4 portrait; margin: 0; }\n tr { page-break-inside: avoid !important; }\n }\n <\/style>\n<\/head>\n<body class=\"uige-body\">\n\n<div class=\"uige-toast-container\" id=\"uige-toasts\"><\/div>\n\n<header class=\"uige-app-header no-print\">\n <div class=\"container text-center\">\n <h1 class=\"fw-bold\">Universal Invoice & Bill Generator<\/h1>\n <p class=\"lead mb-0\">Production-Ready Single-Screen Native Workstation Asset<\/p>\n <\/div>\n<\/header>\n\n<main class=\"container mb-5 no-print\">\n <div class=\"row\">\n <div class=\"col-xl-6 col-lg-12\">\n \n <div class=\"uige-card\">\n <div class=\"uige-card-header\">1. Select Base Template Engine<\/div>\n <div class=\"uige-card-body p-3\">\n <div class=\"row g-2\" id=\"uige-tpl-grid\">\n <div class=\"col-4 col-sm-3\"><div class=\"uige-template-card active\" data-template=\"classic\">Classic<\/div><\/div>\n <div class=\"col-4 col-sm-3\"><div class=\"uige-template-card\" data-template=\"gst\">GST Invoice<\/div><\/div>\n <div class=\"col-4 col-sm-3\"><div class=\"uige-template-card\" data-template=\"computer\">Comp Shop<\/div><\/div>\n <div class=\"col-4 col-sm-3\"><div class=\"uige-template-card\" data-template=\"electronics\">Electronics<\/div><\/div>\n <div class=\"col-4 col-sm-3\"><div class=\"uige-template-card\" data-template=\"cash\">Cash Memo<\/div><\/div>\n <div class=\"col-4 col-sm-3\"><div class=\"uige-template-card\" data-template=\"service\">Service<\/div><\/div>\n <div class=\"col-4 col-sm-3\"><div class=\"uige-template-card\" data-template=\"minimal\">Minimal<\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"uige-card\">\n <div class=\"uige-card-header\">2. Presentation Branding Layout Options<\/div>\n <div class=\"uige-card-body p-3\">\n <div class=\"row g-3\">\n <div class=\"col-sm-4\">\n <label for=\"cfg-theme\" class=\"form-label\">Theme Color Profile<\/label>\n <select class=\"form-select uige-focus-ring\" id=\"cfg-theme\">\n <option value=\"blue\">Blue Corporate<\/option>\n <option value=\"green\">Green Clean Tech<\/option>\n <option value=\"black\">High Contrast Black<\/option>\n <option value=\"red\">Crimson Academic<\/option>\n <option value=\"purple\">Creative Purple<\/option>\n <\/select>\n <\/div>\n <div class=\"col-sm-4\">\n <label for=\"cfg-font\" class=\"form-label\">Typography Axis<\/label>\n <select class=\"form-select uige-focus-ring\" id=\"cfg-font\">\n <option value=\"inter\">Inter Sans-Serif<\/option>\n <option value=\"arial\">Standard Arial<\/option>\n <option value=\"roboto\">Roboto Engine<\/option>\n <option value=\"poppins\">Poppins Display<\/option>\n <\/select>\n <\/div>\n <div class=\"col-sm-4\">\n <label for=\"cfg-border\" class=\"form-label\">Border Matrix Frame<\/label>\n <select class=\"form-select uige-focus-ring\" id=\"cfg-border\">\n <option value=\"classic\">Classic Structural Book<\/option>\n <option value=\"modern\">Modern Borderless Minimal<\/option>\n <option value=\"rounded\">Soft Rounded Boundaries<\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"uige-card\">\n <div class=\"uige-card-header d-flex justify-content-between align-items-center\">\n <span>3. Sender \/ Shop Registry Profile<\/span>\n <span class=\"badge bg-light text-dark\">All Fields Optional<\/span>\n <\/div>\n <div class=\"uige-card-body p-3\">\n <div class=\"row g-3\">\n <div class=\"col-12\">\n <label for=\"shop-logo\" class=\"form-label\">Shop Logo (Base64 URL Asset or Remote Direct Image Link)<\/label>\n <input type=\"text\" class=\"form-control uige-focus-ring\" id=\"shop-logo\" placeholder=\"Leave blank to drop space dynamically\">\n <\/div>\n <div class=\"col-sm-6\">\n <label for=\"shop-name\" class=\"form-label\">Corporate Registered Name<\/label>\n <input type=\"text\" class=\"form-control uige-focus-ring\" id=\"shop-name\" placeholder=\"e.g., Nexus Computers Ltd.\">\n <\/div>\n <div class=\"col-sm-6\">\n <label for=\"shop-gst\" class=\"form-label\">Tax \/ VAT ID Registry Token<\/label>\n <input type=\"text\" class=\"form-control uige-focus-ring\" id=\"shop-gst\" placeholder=\"e.g., GSTIN-12345XYZ\">\n <\/div>\n <div class=\"col-12\">\n <label for=\"shop-address\" class=\"form-label\">Physical Dispatch Address<\/label>\n <input type=\"text\" class=\"form-control uige-focus-ring\" id=\"shop-address\" placeholder=\"HQ Avenue Suite, Silicon Valley\">\n <\/div>\n <div class=\"col-sm-4\">\n <label for=\"shop-phone\" class=\"form-label\">Support Helpline<\/label>\n <input type=\"text\" class=\"form-control uige-focus-ring\" id=\"shop-phone\" placeholder=\"Line Phone\">\n <\/div>\n <div class=\"col-sm-4\">\n <label for=\"shop-email\" class=\"form-label\">Enterprise Mailing Address<\/label>\n <input type=\"email\" class=\"form-control uige-focus-ring\" id=\"shop-email\" placeholder=\"billing@nexus.com\">\n <\/div>\n <div class=\"col-sm-4\">\n <label for=\"shop-web\" class=\"form-label\">Web URL Access<\/label>\n <input type=\"text\" class=\"form-control uige-focus-ring\" id=\"shop-web\" placeholder=\"www.nexus.com\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"uige-card\">\n <div class=\"uige-card-header\">4. Sequence Controls & Book Ledger Tokens<\/div>\n <div class=\"uige-card-body p-3\">\n <div class=\"row g-3\">\n <div class=\"col-sm-4\">\n <label for=\"inv-number\" class=\"form-label\">Invoice Number ID Serial<\/label>\n <input type=\"text\" class=\"form-control uige-focus-ring\" id=\"inv-number\">\n <\/div>\n <div class=\"col-sm-4\">\n <label for=\"inv-date\" class=\"form-label\">Execution Record Date<\/label>\n <input type=\"date\" class=\"form-control uige-focus-ring\" id=\"inv-date\">\n <\/div>\n <div class=\"col-sm-4\">\n <label for=\"inv-payment\" class=\"form-label\">Payment Channel Method<\/label>\n <input type=\"text\" class=\"form-control uige-focus-ring\" id=\"inv-payment\" placeholder=\"e.g., Credit Card, Bank Check, Wire\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"uige-card\">\n <div class=\"uige-card-header\">5. Client Distribution Allocation Mode<\/div>\n <div class=\"uige-card-body p-3\">\n <div class=\"mb-3 d-flex gap-4\">\n <div class=\"form-check\">\n <input class=\"form-check-input\" type=\"radio\" name=\"cust-mode\" id=\"mode-digital\" value=\"digital\" checked>\n <label class=\"form-check-label fw-bold\" for=\"mode-digital\">Digital Realtime Data Input<\/label>\n <\/div>\n <div class=\"form-check\">\n <input class=\"form-check-input\" type=\"radio\" name=\"cust-mode\" id=\"mode-blank\" value=\"blank\">\n <label class=\"form-check-label fw-bold\" for=\"mode-blank\">Blank Book Mode (Manual Writer Lines)<\/label>\n <\/div>\n <\/div>\n \n <div id=\"customer-digital-fields\" class=\"row g-3\">\n <div class=\"col-sm-6\">\n <label for=\"cust-name\" class=\"form-label\">Recipient Client Name<\/label>\n <input type=\"text\" class=\"form-control uige-focus-ring\" id=\"cust-name\" placeholder=\"Johnathan Doe\">\n <\/div>\n <div class=\"col-sm-6\">\n <label for=\"cust-phone\" class=\"form-label\">Client Mobile Phone<\/label>\n <input type=\"text\" class=\"form-control uige-focus-ring\" id=\"cust-phone\" placeholder=\"Cell Reference\">\n <\/div>\n <div class=\"col-12\">\n <label for=\"cust-address\" class=\"form-label\">Billing\/Delivery Destination Address<\/label>\n <input type=\"text\" class=\"form-control uige-focus-ring\" id=\"cust-address\" placeholder=\"Destination Residence Location\">\n <\/div>\n <div class=\"col-sm-6\">\n <label for=\"cust-email\" class=\"form-label\">Client Account Email<\/label>\n <input type=\"email\" class=\"form-control uige-focus-ring\" id=\"cust-email\" placeholder=\"john@doe.com\">\n <\/div>\n <div class=\"col-sm-6\">\n <label for=\"cust-receiver\" class=\"form-label\">Authorized Consignee Receiver<\/label>\n <input type=\"text\" class=\"form-control uige-focus-ring\" id=\"cust-receiver\" placeholder=\"Drop Agent Name\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"uige-card\">\n <div class=\"uige-card-header d-flex justify-content-between align-items-center\">\n <span>6. Operational Line Statements & Ledger Rows<\/span>\n <button type=\"button\" class=\"btn btn-sm btn-primary\" id=\"btn-add-item\">+ Append Statement Row<\/button>\n <\/div>\n <div class=\"uige-card-body p-0\">\n <div class=\"table-responsive\">\n <table class=\"table align-middle mb-0\" id=\"ui-items-table\">\n <thead class=\"table-light\">\n <tr>\n <th style=\"width: 5%\">#<\/th>\n <th style=\"width: 45%\">Product Specification\/Service Descriptor<\/th>\n <th style=\"width: 15%\">Quantity<\/th>\n <th style=\"width: 15%\">Unit Rate ($)<\/th>\n <th style=\"width: 20%\">Row Operational Actions<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"ui-items-tbody\"><\/tbody>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"uige-card\">\n <div class=\"uige-card-header\">7. Ledger Math Modifiers & Declarations<\/div>\n <div class=\"uige-card-body p-3\">\n <div class=\"row g-3\">\n <div class=\"col-sm-6\">\n <label for=\"calc-discount\" class=\"form-label\">Flat Discount Deductions ($)<\/label>\n <input type=\"number\" class=\"form-control uige-focus-ring\" id=\"calc-discount\" value=\"0\" min=\"0\">\n <div class=\"invalid-feedback\" id=\"val-discount-msg\">Discount allocations cannot override basic item balances.<\/div>\n <\/div>\n <div class=\"col-sm-6\">\n <label for=\"calc-tax-rate\" class=\"form-label\">Unified Tax \/ GST Ceiling Frame (%)<\/label>\n <input type=\"number\" class=\"form-control uige-focus-ring\" id=\"calc-tax-rate\" value=\"18\" min=\"0\" max=\"100\">\n <div class=\"invalid-feedback\" id=\"val-tax-msg\">Tax evaluation ceilings cannot exceed 100%.<\/div>\n <\/div>\n <div class=\"col-12\">\n <label for=\"shop-footer-text\" class=\"form-label\">Footer Declaration Liability Agreement Clauses<\/label>\n <input type=\"text\" class=\"form-control uige-focus-ring\" id=\"shop-footer-text\" placeholder=\"Specify statutory warnings or warranty terms clear text here\">\n <\/div>\n <div class=\"col-12\">\n <label for=\"shop-signature-text\" class=\"form-label\">Authorized Verification Assignee Signature Caption<\/label>\n <input type=\"text\" class=\"form-control uige-focus-ring\" id=\"shop-signature-text\" placeholder=\"Corporate Endorsement Title Signatory Meta\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"uige-card\">\n <div class=\"uige-card-header\">8. Local Blueprint Configuration Store Persistence Console<\/div>\n <div class=\"uige-card-body p-3\">\n <div class=\"d-flex flex-wrap gap-2 mb-3\">\n <button type=\"button\" class=\"btn btn-success flex-grow-1\" id=\"btn-save-blueprint\">\ud83d\udcbe Freeze Configurations as Blueprint<\/button>\n <button type=\"button\" class=\"btn btn-danger\" id=\"btn-reset-app\">\ud83d\udd04 Reset Working Canvas Fields<\/button>\n <\/div>\n <div id=\"saved-blueprints-section\" class=\"d-none\">\n <label class=\"form-label fw-bold\">Active Offline System Configuration Blueprints Available<\/label>\n <div id=\"blueprints-list-container\" class=\"list-group\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"uige-card bg-light border-primary mb-5\">\n <div class=\"uige-card-body p-3 text-center d-grid gap-2\">\n <button type=\"button\" class=\"btn btn-primary btn-lg\" id=\"btn-trigger-print\">\ud83d\udda8\ufe0f Open Native OS Print Engine (A4 Profile)<\/button>\n <div class=\"row g-2\">\n <div class=\"col-6\">\n <button type=\"button\" class=\"btn btn-dark w-100\" id=\"btn-export-pdf\">\ud83d\udd25 Save Vector PDF Asset<\/button>\n <\/div>\n <div class=\"col-6\">\n <button type=\"button\" class=\"btn btn-info text-white w-100\" id=\"btn-export-docx\">\ud83d\udcdd Stream Editable DOCX File<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n <div class=\"col-xl-6 col-lg-12\">\n <div class=\"sticky-top\" style=\"top: 1rem; z-index: 1010;\">\n <div class=\"d-flex justify-content-between align-items-center mb-2 text-dark bg-white p-2 rounded shadow-sm\">\n <span class=\"fw-bold text-uppercase small\">\ud83d\udfe2 Live View Visualizer Matrix Engine<\/span>\n <span class=\"badge bg-primary\">A4 Portrait Standard Blueprint<\/span>\n <\/div>\n <div id=\"uige-preview-wrapper\">\n <div id=\"print-area\" class=\"invoice-print-container inv-font-inter inv-theme-blue inv-border-classic\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/main>\n\n<script>\n (function () {\n \/\/ Core Isolated State Engine\n let internalState = {\n template: 'classic',\n theme: 'blue',\n font: 'inter',\n border: 'classic',\n shop: { logo: '', name: '', gst: '', address: '', phone: '', email: '', web: '', footerText: '', signatureText: '' },\n meta: { number: '', date: '', payment: '' },\n customerMode: 'digital',\n customer: { name: '', phone: '', address: '', email: '', receiver: '' },\n items: [\n { id: 1, name: 'Premium High Performance Computing Device Pack', qty: 1, rate: 850.00 },\n { id: 2, name: 'Extended Enterprise Engineering Support Access', qty: 5, rate: 75.00 }\n ],\n discount: 25.00,\n taxRate: 18.00\n };\n\n const STORAGE_KEY_PREFIX = 'UIGE_PROD_CORE_2026_';\n\n \/\/ UI Toast Engine Mapping\n function pushNotification(message, variation = 'success') {\n const boundary = document.getElementById('uige-toasts');\n const alertBox = document.createElement('div');\n alertBox.className = `uige-toast uige-toast-${variation}`;\n alertBox.innerHTML = `<span>${variation === 'success' ? '\u2714' : '\u274c'}<\/span> <span>${message}<\/span>`;\n boundary.appendChild(alertBox);\n setTimeout(() => { alertBox.remove(); }, 3500);\n }\n\n \/\/ Amount In Words Formula Parser\n function parseCurrencyToWords(val) {\n let units = ['', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve', 'Thirteen', 'Fourteen', 'Fifteen', 'Sixteen', 'Seventeen', 'Eighteen', 'Nineteen'];\n let tens = ['', '', 'Twenty', 'Thirty', 'Forty', 'Fifty', 'Sixty', 'Seventy', 'Eighty', 'Ninety'];\n \n function convertUnderThousand(num) {\n if (num === 0) return '';\n if (num < 20) return units[num] + ' ';\n if (num < 100) return tens[Math.floor(num \/ 10)] + ' ' + convertUnderThousand(num % 10);\n return units[Math.floor(num \/ 100)] + ' Hundred ' + convertUnderThousand(num % 100);\n }\n\n let valueInteger = Math.floor(val);\n if (valueInteger === 0) return 'Zero Dollars Only';\n\n let trackingString = '';\n if (Math.floor(valueInteger \/ 1000000) > 0) {\n trackingString += convertUnderThousand(Math.floor(valueInteger \/ 1000000)) + 'Million ';\n valueInteger %= 1000000;\n }\n if (Math.floor(valueInteger \/ 1000) > 0) {\n trackingString += convertUnderThousand(Math.floor(valueInteger \/ 1000)) + 'Thousand ';\n valueInteger %= 1000;\n }\n trackingString += convertUnderThousand(valueInteger);\n return trackingString.trim() + ' Dollars Only';\n }\n\n function extractCanvasUI() {\n \/\/ Field values pull\n internalState.theme = document.getElementById('cfg-theme').value;\n internalState.font = document.getElementById('cfg-font').value;\n internalState.border = document.getElementById('cfg-border').value;\n\n internalState.shop.logo = document.getElementById('shop-logo').value.trim();\n internalState.shop.name = document.getElementById('shop-name').value.trim();\n internalState.shop.gst = document.getElementById('shop-gst').value.trim();\n internalState.shop.address = document.getElementById('shop-address').value.trim();\n internalState.shop.phone = document.getElementById('shop-phone').value.trim();\n internalState.shop.email = document.getElementById('shop-email').value.trim();\n internalState.shop.web = document.getElementById('shop-web').value.trim();\n internalState.shop.footerText = document.getElementById('shop-footer-text').value.trim();\n internalState.shop.signatureText = document.getElementById('shop-signature-text').value.trim();\n\n internalState.meta.number = document.getElementById('inv-number').value.trim();\n internalState.meta.date = document.getElementById('inv-date').value;\n internalState.meta.payment = document.getElementById('inv-payment').value.trim();\n\n internalState.customerMode = document.querySelector('input[name=\"cust-mode\"]:checked').value;\n internalState.customer.name = document.getElementById('cust-name').value.trim();\n internalState.customer.phone = document.getElementById('cust-phone').value.trim();\n internalState.customer.address = document.getElementById('cust-address').value.trim();\n internalState.customer.email = document.getElementById('cust-email').value.trim();\n internalState.customer.receiver = document.getElementById('cust-receiver').value.trim();\n\n \/\/ Dynamic evaluation validation wrappers\n let prospectiveTaxRate = parseFloat(document.getElementById('calc-tax-rate').value);\n if (prospectiveTaxRate > 100) {\n document.getElementById('calc-tax-rate').classList.add('is-invalid');\n internalState.taxRate = 100;\n } else if (prospectiveTaxRate < 0 || isNaN(prospectiveTaxRate)) {\n document.getElementById('calc-tax-rate').classList.add('is-invalid');\n internalState.taxRate = 0;\n } else {\n document.getElementById('calc-tax-rate').classList.remove('is-invalid');\n internalState.taxRate = prospectiveTaxRate;\n }\n\n let derivedSubtotal = internalState.items.reduce((acc, current) => acc + (current.qty * current.rate), 0);\n let prospectiveDiscount = parseFloat(document.getElementById('calc-discount').value) || 0;\n \n if (prospectiveDiscount > derivedSubtotal) {\n document.getElementById('calc-discount').classList.add('is-invalid');\n internalState.discount = derivedSubtotal;\n } else if (prospectiveDiscount < 0 || isNaN(prospectiveDiscount)) {\n document.getElementById('calc-discount').classList.add('is-invalid');\n internalState.discount = 0;\n } else {\n document.getElementById('calc-discount').classList.remove('is-invalid');\n internalState.discount = prospectiveDiscount;\n }\n\n localStorage.setItem(STORAGE_KEY_PREFIX + 'AUTOSAVE_CORE', JSON.stringify(internalState));\n }\n\n function restoreStateAndRenderUI() {\n const cachedValue = localStorage.getItem(STORAGE_KEY_PREFIX + 'AUTOSAVE_CORE');\n if (cachedValue) {\n try { internalState = JSON.parse(cachedValue); } catch (e) { console.error(e); }\n } else {\n internalState.meta.date = new Date().toISOString().slice(0, 10);\n internalState.meta.number = 'TXN-' + Math.floor(10000 + Math.random() * 90000);\n }\n\n \/\/ Sync structural items array data controls to form field matrices\n document.getElementById('cfg-theme').value = internalState.theme;\n document.getElementById('cfg-font').value = internalState.font;\n document.getElementById('cfg-border').value = internalState.border;\n\n document.getElementById('shop-logo').value = internalState.shop.logo;\n document.getElementById('shop-name').value = internalState.shop.name;\n document.getElementById('shop-gst').value = internalState.shop.gst;\n document.getElementById('shop-address').value = internalState.shop.address;\n document.getElementById('shop-phone').value = internalState.shop.phone;\n document.getElementById('shop-email').value = internalState.shop.email;\n document.getElementById('shop-web').value = internalState.shop.web;\n document.getElementById('shop-footer-text').value = internalState.shop.footerText;\n document.getElementById('shop-signature-text').value = internalState.shop.signatureText;\n\n document.getElementById('inv-number').value = internalState.meta.number;\n document.getElementById('inv-date').value = internalState.meta.date;\n document.getElementById('inv-payment').value = internalState.meta.payment;\n\n document.getElementById('calc-discount').value = internalState.discount;\n document.getElementById('calc-tax-rate').value = internalState.taxRate;\n\n if (internalState.customerMode === 'blank') {\n document.getElementById('mode-blank').checked = true;\n document.getElementById('customer-digital-fields').classList.add('d-none');\n } else {\n document.getElementById('mode-digital').checked = true;\n document.getElementById('customer-digital-fields').classList.remove('d-none');\n }\n\n document.getElementById('cust-name').value = internalState.customer.name;\n document.getElementById('cust-phone').value = internalState.customer.phone;\n document.getElementById('cust-address').value = internalState.customer.address;\n document.getElementById('cust-email').value = internalState.customer.email;\n document.getElementById('cust-receiver').value = internalState.customer.receiver;\n\n syncSelectionFrameworkCardHighlight();\n rebuildItemsFormTable();\n executeCalculatedViewRender();\n renderBlueprintListMenu();\n }\n\n function syncSelectionFrameworkCardHighlight() {\n document.querySelectorAll('.uige-template-card').forEach(card => {\n if (card.getAttribute('data-template') === internalState.template) {\n card.classList.add('active');\n } else {\n card.classList.remove('active');\n }\n });\n }\n\n function rebuildItemsFormTable() {\n const anchor = document.getElementById('ui-items-tbody');\n anchor.innerHTML = '';\n internalState.items.forEach((item, index) => {\n const tr = document.createElement('tr');\n tr.innerHTML = `\n <td>${index + 1}<\/td>\n <td><input type=\"text\" class=\"form-control uige-focus-ring item-hook\" data-id=\"${item.id}\" data-type=\"name\" value=\"${item.name}\"><\/td>\n <td><input type=\"number\" class=\"form-control text-end uige-focus-ring item-hook\" data-id=\"${item.id}\" data-type=\"qty\" value=\"${item.qty}\" min=\"1\"><\/td>\n <td><input type=\"number\" class=\"form-control text-end uige-focus-ring item-hook\" data-id=\"${item.id}\" data-type=\"rate\" value=\"${item.rate}\" min=\"0\" step=\"0.01\"><\/td>\n <td>\n <div class=\"btn-group btn-group-sm\">\n <button type=\"button\" class=\"btn btn-outline-secondary\" onclick=\"window.uigeDuplicateRow(${item.id})\">Duplicate<\/button>\n <button type=\"button\" class=\"btn btn-outline-danger\" onclick=\"window.uigeDeleteRow(${item.id})\">Delete<\/button>\n <\/div>\n <\/td>\n `;\n anchor.appendChild(tr);\n });\n }\n\n function executeCalculatedViewRender() {\n const viewAnchor = document.getElementById('print-area');\n let itemSubtotalSum = 0;\n let rowsHtml = '';\n\n internalState.items.forEach((item, index) => {\n let computedRowCost = item.qty * item.rate;\n itemSubtotalSum += computedRowCost;\n rowsHtml += `\n <tr>\n <td style=\"text-align: center; border-right: 1px solid #cbd5e1;\">${index + 1}<\/td>\n <td style=\"border-right: 1px solid #cbd5e1; font-weight: 500;\">${item.name || 'Product Specification Asset'}<\/td>\n <td style=\"text-align: center; border-right: 1px solid #cbd5e1;\">${item.qty}<\/td>\n <td style=\"text-align: right; border-right: 1px solid #cbd5e1;\">${parseFloat(item.rate).toFixed(2)}<\/td>\n <td style=\"text-align: right; font-weight:600;\">${computedRowCost.toFixed(2)}<\/td>\n <\/tr>\n `;\n });\n\n let activeTaxValue = (itemSubtotalSum - internalState.discount) * (internalState.taxRate \/ 100);\n if (activeTaxValue < 0) activeTaxValue = 0;\n \n let totalUnroundedRaw = itemSubtotalSum - internalState.discount + activeTaxValue;\n let finalRoundedCeil = Math.round(totalUnroundedRaw);\n let roundVariance = finalRoundedCeil - totalUnroundedRaw;\n\n viewAnchor.className = `invoice-print-container inv-font-${internalState.font} inv-theme-${internalState.theme} inv-border-${internalState.border}`;\n \n let headlineText = \"INVOICE\";\n if (internalState.template === 'gst') headlineText = \"TAX INVOICE\";\n if (internalState.template === 'computer') headlineText = \"COMPUTER TECH SERVICES BILL\";\n if (internalState.template === 'electronics') headlineText = \"ELECTRONICS CASH MEMO\";\n if (internalState.template === 'cash') headlineText = \"CASH MEMO RECEIPT\";\n if (internalState.template === 'service') headlineText = \"SERVICE JOB INVOICE\";\n if (internalState.template === 'minimal') headlineText = \"ACCOUNT STATEMENT\";\n\n let logoMarkup = internalState.shop.logo ? `<img decoding=\"async\" src=\"${internalState.shop.logo}\" class=\"inv-logo\" alt=\"Logo\">` : '';\n let taxIdBlock = internalState.shop.gst ? `<div style=\"font-size: 11px;\" class=\"text-secondary\">Tax ID Number: <strong>${internalState.shop.gst}<\/strong><\/div>` : '';\n\n let clientDataBlock = '';\n if (internalState.customerMode === 'blank') {\n clientDataBlock = `\n <div>\n <div class=\"fw-bold text-uppercase mb-2\" style=\"color:var(--theme-color); font-size:11px;\">Client Assignment Profile<\/div>\n <div class=\"uige-blank-row\">Customer\/M\/s: <span class=\"uige-blank-line\"><\/span><\/div>\n <div class=\"uige-blank-row\">Location Address: <span class=\"uige-blank-line\"><\/span><\/div>\n <div class=\"uige-blank-row\">Phone Axis Number: <span class=\"uige-blank-line\"><\/span><\/div>\n <div class=\"uige-blank-row\">Consignee Receipt: <span class=\"uige-blank-line\"><\/span><\/div>\n <\/div>\n `;\n } else {\n clientDataBlock = `\n <div>\n <div class=\"fw-bold text-uppercase mb-1\" style=\"color:var(--theme-color); font-size:11px;\">Billed To Recipient:<\/div>\n <div class=\"fw-bold fs-5 mb-1\">${internalState.customer.name || '__________________________'}<\/div>\n <div class=\"text-secondary small\">\n ${internalState.customer.address || 'Location Destination Address Line'}<br>\n Phone: ${internalState.customer.phone || 'N\/A'} | Email: ${internalState.customer.email || 'N\/A'}<br>\n <span class=\"text-dark\">Assignee\/Receiver: ${internalState.customer.receiver || 'Manual Dispatch'}<\/span>\n <\/div>\n <\/div>\n `;\n }\n\n viewAnchor.innerHTML = `\n <div class=\"inv-header\">\n <div>\n ${logoMarkup}\n <div class=\"fw-bold fs-4 mt-1\" style=\"color: var(--theme-color); line-height: 1.1;\">${internalState.shop.name || 'Your Shop Registry Name'}<\/div>\n <div class=\"text-muted small mt-1\" style=\"max-width: 340px;\">${internalState.shop.address || 'Set Shop Address under settings panel.'}<\/div>\n ${taxIdBlock}\n <\/div>\n <div class=\"text-end\">\n <div class=\"inv-title-banner\">${headlineText}<\/div>\n <div class=\"small text-muted\">A4 Vector Standard Output Ledger<\/div>\n <div class=\"mt-2\" style=\"font-size: 13px;\">\n <div>Invoice Reference: <strong>${internalState.meta.number || '---'}<\/strong><\/div>\n <div>Dated Axis: <strong>${internalState.meta.date || '---'}<\/strong><\/div>\n <div>Payment Terms: <span class=\"badge bg-secondary\">${internalState.meta.payment || 'Standard Due'}<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"inv-meta-grid\">\n ${clientDataBlock}\n <div style=\"background-color: var(--theme-bg); padding: 12px; border-radius: 6px; font-size: 12px;\">\n <div class=\"fw-bold text-uppercase\" style=\"color: var(--theme-color);\">Compliance Framework Declaration<\/div>\n <p class=\"mb-0 text-muted mt-1\" style=\"line-height: 1.3;\">This statement marks a finalized offline distribution billing record ledger. Calculations generated via integrated browser runtime calculations matching local configurations asset perfectly.<\/p>\n <\/div>\n <\/div>\n\n <table class=\"inv-table\">\n <thead>\n <tr>\n <th style=\"width: 8%; text-align: center;\">S.No<\/th>\n <th style=\"width: 52%;\">Product Specification \/ Service Descriptor<\/th>\n <th style=\"width: 12%; text-align: center;\">Qty<\/th>\n <th style=\"width: 13%; text-align: right;\">Rate ($)<\/th>\n <th style=\"width: 15%; text-align: right;\">Amount ($)<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n ${rowsHtml}\n <\/tbody>\n <\/table>\n\n <div class=\"inv-summary-wrapper\">\n <div class=\"inv-words\">\n <div class=\"text-uppercase fw-bold text-secondary\" style=\"font-size: 10px;\">Total Certified Net Amount in Language Matrix<\/div>\n <div class=\"fw-bold text-dark mt-1\" style=\"font-size: 13px;\">${parseCurrencyToWords(finalRoundedCeil)}<\/div>\n \n <div class=\"mt-4 p-2\" style=\"border: 1px dashed #cbd5e1; border-radius: 6px; background-color: #f8fafc;\">\n <span class=\"fw-bold d-block text-uppercase\" style=\"font-size: 10px; color: var(--theme-color);\">Statutory Liability Conditions \/ Memos<\/span>\n <span class=\"text-muted\" style=\"font-size: 11px; line-height: 1.2;\">${internalState.shop.footerText || 'System generation output document. Subject to regional legal transaction terms.'}<\/span>\n <\/div>\n <\/div>\n <div class=\"inv-totals\">\n <div class=\"inv-totals-row\">\n <span class=\"text-muted\">Subtotal Gross:<\/span>\n <span>${itemSubtotalSum.toFixed(2)}<\/span>\n <\/div>\n <div class=\"inv-totals-row\">\n <span class=\"text-muted\">Allocated Adjustments:<\/span>\n <span class=\"text-danger\">-${parseFloat(internalState.discount).toFixed(2)}<\/span>\n <\/div>\n <div class=\"inv-totals-row\">\n <span class=\"text-muted\">Tax Calculation Pool (${internalState.taxRate}%):<\/span>\n <span>+${activeTaxValue.toFixed(2)}<\/span>\n <\/div>\n <div class=\"inv-totals-row text-muted small\">\n <span>Rounding Off:<\/span>\n <span>${roundVariance >= 0 ? '+' : ''}${roundVariance.toFixed(2)}<\/span>\n <\/div>\n <div class=\"inv-totals-row inv-totals-grand\">\n <span>NET PAYABLE VALUE:<\/span>\n <span>$ ${parseFloat(finalRoundedCeil).toFixed(2)}<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"inv-footer\">\n <div style=\"font-size: 11px; color: #64748b;\">\n ${internalState.shop.phone ? 'Phone: ' + internalState.shop.phone : ''} ${internalState.shop.email ? ' | Email: ' + internalState.shop.email : ''}\n ${internalState.shop.web ? '<br>Domain Link: ' + internalState.shop.web : ''}\n <\/div>\n <div class=\"text-center\" style=\"min-width: 210px;\">\n <div class=\"mb-4\" style=\"border-bottom: 1px solid #000; width: 100%;\"><\/div>\n <div class=\"fw-bold\" style=\"font-size: 11px; color: var(--theme-color);\">${internalState.shop.signatureText || 'Authorized Verification Signatory Seal'}<\/div>\n <div class=\"text-muted\" style=\"font-size: 9px;\">Statutory Sign-Off Node<\/div>\n <\/div>\n <\/div>\n `;\n }\n\n function renderBlueprintListMenu() {\n const holder = document.getElementById('blueprints-list-container');\n const box = document.getElementById('saved-blueprints-section');\n holder.innerHTML = '';\n let counter = 0;\n\n for (let i = 0; i < localStorage.length; i++) {\n const storageKey = localStorage.key(i);\n if (storageKey.startsWith(STORAGE_KEY_PREFIX + 'BLUEPRINT_NODE_')) {\n counter++;\n const contextLabel = storageKey.replace(STORAGE_KEY_PREFIX + 'BLUEPRINT_NODE_', '');\n const row = document.createElement('div');\n row.className = \"list-group-item d-flex justify-content-between align-items-center p-2\";\n row.innerHTML = `\n <div><span class=\"fw-bold text-dark\">${contextLabel}<\/span><\/div>\n <div class=\"btn-group btn-group-sm\">\n <button type=\"button\" class=\"btn btn-sm btn-outline-success\" id=\"uige-load-bp-${counter}\">Load<\/button>\n <button type=\"button\" class=\"btn btn-sm btn-outline-danger\" id=\"uige-del-bp-${counter}\">Wipe<\/button>\n <\/div>\n `;\n holder.appendChild(row);\n\n \/\/ Scoped event handlers to preserve clean execution\n document.getElementById(`uige-load-bp-${counter}`).addEventListener('click', () => {\n const staticPayload = localStorage.getItem(storageKey);\n if (staticPayload) {\n try {\n const parsed = JSON.parse(staticPayload);\n internalState.template = parsed.template;\n internalState.theme = parsed.theme;\n internalState.font = parsed.font;\n internalState.border = parsed.border;\n internalState.shop = parsed.shop;\n restoreStateAndRenderUI();\n pushNotification(`Blueprint configuration [${contextLabel}] loaded successfully.`);\n } catch (err) { pushNotification(\"Failed to accurately parse configurations storage maps.\", \"error\"); }\n }\n });\n\n document.getElementById(`uige-del-bp-${counter}`).addEventListener('click', () => {\n if (confirm(`Confirm permanent deletion of Blueprint configuration entry: \"${contextLabel}\"?`)) {\n localStorage.removeItem(storageKey);\n renderBlueprintListMenu();\n pushNotification(\"Blueprint dropped out of device cache memory safely.\");\n }\n });\n }\n }\n\n if (counter > 0) box.classList.remove('d-none');\n else box.classList.add('d-none');\n }\n\n \/\/ Global Window Mappings for runtime table mutation handlers\n window.uigeDeleteRow = function (id) {\n if (internalState.items.length <= 1) {\n pushNotification(\"Operation aborted. Ledger tables require at least one row entry item.\", \"error\");\n return;\n }\n internalState.items = internalState.items.filter(i => i.id !== id);\n rebuildItemsFormTable();\n extractCanvasUI();\n executeCalculatedViewRender();\n };\n\n window.uigeDuplicateRow = function (id) {\n const targetItem = internalState.items.find(i => i.id === id);\n if (targetItem) {\n const clonedObj = Object.assign({}, targetItem);\n clonedObj.id = Date.now() + Math.floor(Math.random() * 100);\n internalState.items.push(clonedObj);\n rebuildItemsFormTable();\n extractCanvasUI();\n executeCalculatedViewRender();\n pushNotification(\"Ledger item statement row cloned successfully.\");\n }\n };\n\n \/\/ Wire Event Framework Systems\n document.addEventListener('DOMContentLoaded', () => {\n restoreStateAndRenderUI();\n\n \/\/ Core Template Configuration click mappings\n document.getElementById('uige-tpl-grid').addEventListener('click', (e) => {\n const structuralCard = e.target.closest('.uige-template-card');\n if (structuralCard) {\n internalState.template = structuralCard.getAttribute('data-template');\n syncSelectionFrameworkCardHighlight();\n extractCanvasUI();\n executeCalculatedViewRender();\n }\n });\n\n \/\/ Track standard changes across input matrices\n document.querySelectorAll('.form-control, .form-select, input[type=\"radio\"]').forEach(field => {\n field.addEventListener('input', () => {\n extractCanvasUI();\n executeCalculatedViewRender();\n });\n });\n\n \/\/ Toggle radio views dynamically\n document.querySelectorAll('input[name=\"cust-mode\"]').forEach(radio => {\n radio.addEventListener('change', (e) => {\n if (e.target.value === 'blank') {\n document.getElementById('customer-digital-fields').classList.add('d-none');\n } else {\n document.getElementById('customer-digital-fields').classList.remove('d-none');\n }\n extractCanvasUI();\n executeCalculatedViewRender();\n });\n });\n\n \/\/ Append statement row items\n document.getElementById('btn-add-item').addEventListener('click', () => {\n const allocationId = Date.now() + Math.floor(Math.random() * 10);\n internalState.items.push({ id: allocationId, name: '', qty: 1, rate: 0.00 });\n rebuildItemsFormTable();\n extractCanvasUI();\n executeCalculatedViewRender();\n });\n\n \/\/ Native input mutations straight out of table forms\n document.getElementById('ui-items-tbody').addEventListener('input', (e) => {\n if (e.target.classList.contains('item-hook')) {\n const trackingId = parseInt(e.target.getAttribute('data-id'));\n const propertyField = e.target.getAttribute('data-type');\n const inventoryItem = internalState.items.find(i => i.id === trackingId);\n \n if (inventoryItem) {\n if (propertyField === 'name') inventoryItem.name = e.target.value;\n if (propertyField === 'qty') {\n let parsedQuantity = parseInt(e.target.value);\n inventoryItem.qty = parsedQuantity >= 1 ? parsedQuantity : 1;\n }\n if (propertyField === 'rate') {\n let parsedRate = parseFloat(e.target.value);\n inventoryItem.rate = parsedRate >= 0 ? parsedRate : 0;\n }\n }\n extractCanvasUI();\n executeCalculatedViewRender();\n }\n });\n\n \/\/ Save Blueprint Entry Action Mapping\n document.getElementById('btn-save-blueprint').addEventListener('click', () => {\n const namingCode = prompt(\"Enter a descriptive name for this Blueprint Configuration Profile:\");\n if (namingCode && namingCode.trim() !== '') {\n const blueprintPayload = {\n template: internalState.template,\n theme: internalState.theme,\n font: internalState.font,\n border: internalState.border,\n shop: internalState.shop\n };\n localStorage.setItem(STORAGE_KEY_PREFIX + 'BLUEPRINT_NODE_' + namingCode.trim(), JSON.stringify(blueprintPayload));\n renderBlueprintListMenu();\n pushNotification(`Configuration Blueprint [${namingCode.trim()}] safely cached.`);\n }\n });\n\n \/\/ Canvas hard wipe layout reset action\n document.getElementById('btn-reset-app').addEventListener('click', () => {\n if (confirm(\"Confirm form canvas hard reset? This action reverts all inputs to defaults while preserving saved Blueprints.\")) {\n localStorage.removeItem(STORAGE_KEY_PREFIX + 'AUTOSAVE_CORE');\n location.reload();\n }\n });\n\n \/\/ Native Device Engine Call Execution Links\n document.getElementById('btn-trigger-print').addEventListener('click', () => {\n window.print();\n });\n\n \/\/ High Resolution Vector html2pdf Canvas Output Generation Map Engine\n document.getElementById('btn-export-pdf').addEventListener('click', () => {\n pushNotification(\"Compiling vector asset print metrics. Please wait...\");\n const focalContainer = document.getElementById('print-area');\n const generationOptions = {\n margin: 0,\n filename: `Invoice_${internalState.meta.number || 'Standard'}.pdf`,\n image: { type: 'jpeg', quality: 1.0 },\n html2canvas: { scale: 3, useCORS: true, logging: false },\n jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }\n };\n html2pdf().set(generationOptions).from(focalContainer).save().then(() => {\n pushNotification(\"High-Fidelity PDF file stream delivery execution successful.\");\n });\n });\n\n \/\/ Stream Native Editable OpenXML Compliant DOCX Configuration Pipeline File Engine\n document.getElementById('btn-export-docx').addEventListener('click', () => {\n pushNotification(\"Structuring Word OpenXML layout maps...\");\n \n try {\n const { Document, Packer, Paragraph, TextRun, Table, TableRow, TableCell, WidthType, BorderStyle, AlignmentType } = docx;\n\n \/\/ Build item calculation metrics\n let itemSubtotalSum = internalState.items.reduce((acc, curr) => acc + (curr.qty * curr.rate), 0);\n let activeTaxValue = Math.max(0, (itemSubtotalSum - internalState.discount) * (internalState.taxRate \/ 100));\n let finalNetValue = Math.round(itemSubtotalSum - internalState.discount + activeTaxValue);\n\n \/\/ Map UI rows into native layout table formats\n const documentTableRows = [\n new TableRow({\n children: [\n new TableCell({ children: [new Paragraph({ text: \"S.No\", bold: true })], width: { size: 10, type: WidthType.PERCENTAGE } }),\n new TableCell({ children: [new Paragraph({ text: \"Item Description & Specifications\", bold: true })], width: { size: 50, type: WidthType.PERCENTAGE } }),\n new TableCell({ children: [new Paragraph({ text: \"Qty\", bold: true })], width: { size: 10, type: WidthType.PERCENTAGE } }),\n new TableCell({ children: [new Paragraph({ text: \"Rate ($)\", bold: true })], width: { size: 15, type: WidthType.PERCENTAGE } }),\n new TableCell({ children: [new Paragraph({ text: \"Amount ($)\", bold: true })], width: { size: 15, type: WidthType.PERCENTAGE } }),\n ],\n })\n ];\n\n internalState.items.forEach((item, idx) => {\n documentTableRows.push(\n new TableRow({\n children: [\n new TableCell({ children: [new Paragraph({ text: String(idx + 1), alignment: AlignmentType.CENTER })] }),\n new TableCell({ children: [new Paragraph({ text: item.name || \"Product Entry Specification\" })] }),\n new TableCell({ children: [new Paragraph({ text: String(item.qty), alignment: AlignmentType.CENTER })] }),\n new TableCell({ children: [new Paragraph({ text: parseFloat(item.rate).toFixed(2), alignment: AlignmentType.RIGHT })] }),\n new TableCell({ children: [new Paragraph({ text: parseFloat(item.qty * item.rate).toFixed(2), alignment: AlignmentType.RIGHT })] }),\n ],\n })\n );\n });\n\n \/\/ Build document schema trees structure mappings\n const wordDocStructure = new Document({\n sections: [{\n properties: {},\n children: [\n new Paragraph({\n children: [\n new TextRun({ text: internalState.shop.name || \"Your Shop Business Title\", bold: true, size: 32 }),\n ],\n spacing: { after: 120 }\n }),\n new Paragraph({ text: internalState.shop.address || \"Shop Address Line Location Entry Reference Data Matrix\", spacing: { after: 240 } }),\n new Paragraph({ text: `Invoice Serial Identifier: ${internalState.meta.number || '---'}`, bold: true }),\n new Paragraph({ text: `Execution Document Date: ${internalState.meta.date || '---'}`, spacing: { after: 240 } }),\n new Paragraph({ text: `Recipient Name: ${internalState.customerMode === 'blank' ? 'Blank Book Allocation Profile' : (internalState.customer.name || 'John Doe Client Value')}`, bold: true, spacing: { after: 240 } }),\n \n new Table({\n width: { size: 100, type: WidthType.PERCENTAGE },\n rows: documentTableRows,\n borders: {\n top: { style: BorderStyle.SINGLE, size: 1, color: \"cbd5e1\" },\n bottom: { style: BorderStyle.SINGLE, size: 1, color: \"cbd5e1\" },\n left: { style: BorderStyle.SINGLE, size: 1, color: \"cbd5e1\" },\n right: { style: BorderStyle.SINGLE, size: 1, color: \"cbd5e1\" },\n }\n }),\n \n new Paragraph({ text: `\\nSubtotal Gross Aggregate: $ ${itemSubtotalSum.toFixed(2)}`, alignment: AlignmentType.RIGHT }),\n new Paragraph({ text: `Adjustments\/Deductions: $ -${parseFloat(internalState.discount).toFixed(2)}`, alignment: AlignmentType.RIGHT }),\n new Paragraph({ text: `Taxation Pool Assessment (${internalState.taxRate}%): $ +${activeTaxValue.toFixed(2)}`, alignment: AlignmentType.RIGHT }),\n new Paragraph({\n children: [new TextRun({ text: `NET PAYABLE OUTCOME: $ ${parseFloat(finalNetValue).toFixed(2)}`, bold: true })],\n alignment: AlignmentType.RIGHT,\n spacing: { before: 120, after: 240 }\n }),\n new Paragraph({ text: `Words Representation: ${parseCurrencyToWords(finalNetValue)}`, font: \"Courier\" }),\n new Paragraph({ text: `Terms: ${internalState.shop.footerText || 'N\/A Verification reference.'}`, spacing: { before: 240 } }),\n ],\n }],\n });\n\n Packer.toBlob(wordDocStructure).then(blobObject => {\n const temporaryUrlLink = URL.createObjectURL(blobObject);\n const downloadAnchorElement = document.createElement('a');\n downloadAnchorElement.href = temporaryUrlLink;\n downloadAnchorElement.download = `Invoice_${internalState.meta.number || 'Standard'}.docx`;\n document.body.appendChild(downloadAnchorElement);\n downloadAnchorElement.click();\n document.body.removeChild(downloadAnchorElement);\n URL.revokeObjectURL(temporaryUrlLink);\n pushNotification(\"Editable OpenXML Word .docx stream compiled successfully.\");\n });\n\n } catch (docxGenerationException) {\n console.error(docxGenerationException);\n pushNotification(\"DOCX construction engine failure.\", \"error\");\n }\n });\n });\n })();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Universal Invoice & Bill Generator – Production Edition Universal Invoice & Bill Generator Production-Ready Single-Screen Native Workstation Asset 1. Select Base Template Engine Classic GST Invoice Comp Shop Electronics Cash Memo Service Minimal 2. Presentation Branding Layout Options Theme Color Profile Blue CorporateGreen Clean TechHigh Contrast BlackCrimson AcademicCreative Purple Typography Axis Inter Sans-SerifStandard ArialRoboto EnginePoppins […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-271","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/271","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=271"}],"version-history":[{"count":2,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/271\/revisions"}],"predecessor-version":[{"id":289,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/271\/revisions\/289"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":271,"date":"2026-07-10T11:47:06","date_gmt":"2026-07-10T11:47:06","guid":{"rendered":"https:\/\/freewebtools.co.in\/?page_id=271"},"modified":"2026-07-10T13:52:15","modified_gmt":"2026-07-10T13:52:15","slug":"271-2","status":"publish","type":"page","link":"https:\/\/freewebtools.co.in\/index.php\/271-2\/","title":{"rendered":"Invoice Bill"},"content":{"rendered":"\n\n\n\n \n \n Universal Invoice & Bill Generator – Production Edition<\/title>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2pdf.js\/0.10.1\/html2pdf.bundle.min.js\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/docx@8.5.0\/build\/index.umd.min.js\"><\/script>\n\n <style>\n \/* --- SCOPED APPLICATION UI STYLES --- *\/\n .uige-body {\n background-color: #f4f6f9;\n font-family: 'Inter', sans-serif;\n color: #333;\n }\n .uige-app-header {\n background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);\n color: #fff;\n padding: 2.5rem 0;\n margin-bottom: 2rem;\n border-bottom: 5px solid #0d6efd;\n }\n .uige-card {\n border: none;\n border-radius: 12px;\n box-shadow: 0 4px 12px rgba(0,0,0,0.05);\n margin-bottom: 1.5rem;\n background: #fff;\n }\n .uige-card-header {\n background-color: #fff;\n border-bottom: 1px solid #edf2f7;\n font-weight: 600;\n padding: 1rem 1.25rem;\n }\n .uige-focus-ring:focus {\n border-color: #3b82f6 !important;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;\n outline: none;\n }\n .uige-template-card {\n border: 2px solid #e2e8f0;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n text-align: center;\n padding: 1rem;\n background: #fff;\n }\n .uige-template-card:hover {\n border-color: #3b82f6;\n transform: translateY(-2px);\n }\n .uige-template-card.active {\n border-color: #2563eb;\n background-color: #eff6ff;\n box-shadow: 0 0 0 1px #2563eb;\n }\n \n \/* --- LIVE PREVIEW CONTAINER --- *\/\n #uige-preview-wrapper {\n background-color: #525659;\n padding: 2rem 1rem;\n border-radius: 12px;\n overflow-x: auto;\n display: flex;\n justify-content: center;\n }\n \n \/* --- A4 PRINT ENGINE AND INVOICE MARKUP VARIATIONS --- *\/\n .invoice-print-container {\n width: 210mm;\n min-height: 297mm;\n padding: 20mm;\n background: #ffffff;\n color: #000000;\n box-sizing: border-box;\n position: relative;\n font-size: 14px;\n line-height: 1.4;\n }\n\n \/* Border Variants *\/\n .inv-border-classic { border: 2px solid #000; }\n .inv-border-classic .inv-table th, .inv-border-classic .inv-table td { border: 1px solid #000; }\n \n .inv-border-modern { border: 1px solid #ddd; }\n .inv-border-modern .inv-table th { background-color: #f8fafc; border-bottom: 2px solid #cbd5e1; }\n .inv-border-modern .inv-table td { border-bottom: 1px solid #e2e8f0; }\n \n .inv-border-rounded { border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; }\n .inv-border-rounded .inv-table { border-radius: 6px; overflow: hidden; border: 1px solid #cbd5e1; }\n .inv-border-rounded .inv-table th { border-bottom: 1px solid #cbd5e1; background-color: var(--theme-bg); }\n .inv-border-rounded .inv-table td { border-bottom: 1px solid #f1f5f9; }\n\n \/* Font Classes *\/\n .inv-font-arial { font-family: Arial, sans-serif; }\n .inv-font-roboto { font-family: 'Roboto', sans-serif; }\n .inv-font-poppins { font-family: 'Poppins', sans-serif; }\n .inv-font-inter { font-family: 'Inter', sans-serif; }\n\n \/* Color Themes *\/\n .inv-theme-blue { --theme-color: #1e40af; --theme-bg: #eff6ff; }\n .inv-theme-green { --theme-color: #065f46; --theme-bg: #ecfdf5; }\n .inv-theme-black { --theme-color: #0f172a; --theme-bg: #f8fafc; }\n .inv-theme-red { --theme-color: #991b1b; --theme-bg: #fef2f2; }\n .inv-theme-purple { --theme-color: #6b21a8; --theme-bg: #faf5ff; }\n\n .inv-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }\n .inv-logo { max-width: 150px; max-height: 70px; object-fit: contain; }\n .inv-title-banner { font-size: 24px; font-weight: 700; text-transform: uppercase; color: var(--theme-color); margin-bottom: 5px; }\n .inv-meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px dashed #cbd5e1; }\n .inv-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }\n .inv-table th { padding: 10px; text-align: left; font-weight: 600; background-color: var(--theme-bg); color: var(--theme-color); }\n .inv-table td { padding: 10px; vertical-align: top; }\n .inv-summary-wrapper { display: flex; justify-content: space-between; margin-bottom: 30px; page-break-inside: avoid; }\n .inv-words { width: 55%; font-style: italic; font-size: 13px; }\n .inv-totals { width: 40%; }\n .inv-totals-row { display: flex; justify-content: space-between; padding: 5px 0; }\n .inv-totals-grand { font-size: 16px; font-weight: 700; border-top: 2px solid var(--theme-color); border-bottom: 2px solid var(--theme-color); padding: 8px 0; color: var(--theme-color); }\n .inv-footer { position: absolute; bottom: 15mm; left: 20mm; right: 20mm; border-top: 1px solid #cbd5e1; padding-top: 15px; display: flex; justify-content: space-between; align-items: flex-end; page-break-inside: avoid; }\n \n .uige-blank-line { display: inline-block; border-bottom: 1px dashed #000; margin-left: 5px; flex-grow: 1; min-height: 20px; }\n .uige-blank-row { display: flex; margin-bottom: 8px; width: 100%; align-items: flex-end; }\n\n \/* TOAST NOTIFICATION SYSTEM *\/\n .uige-toast-container { position: fixed; top: 20px; right: 20px; z-index: 1100; }\n .uige-toast { background: #333; color: #fff; padding: 12px 24px; border-radius: 8px; margin-bottom: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 10px; animation: slideIn 0.3s ease forwards; }\n .uige-toast-success { border-left: 4px solid #10b981; }\n .uige-toast-error { border-left: 4px solid #ef4444; }\n @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }\n\n \/* NATIVE DEVICE PRINT MEDIA CONFIGURATION *\/\n @media print {\n body * { visibility: hidden !important; }\n #print-area, #print-area * { visibility: visible !important; }\n #print-area { position: absolute; left: 0; top: 0; width: 210mm; height: 297mm; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }\n .no-print { display: none !important; }\n @page { size: A4 portrait; margin: 0; }\n tr { page-break-inside: avoid !important; }\n }\n <\/style>\n<\/head>\n<body class=\"uige-body\">\n\n<div class=\"uige-toast-container\" id=\"uige-toasts\"><\/div>\n\n<header class=\"uige-app-header no-print\">\n <div class=\"container text-center\">\n <h1 class=\"fw-bold\">Universal Invoice & Bill Generator<\/h1>\n <p class=\"lead mb-0\">Production-Ready Single-Screen Native Workstation Asset<\/p>\n <\/div>\n<\/header>\n\n<main class=\"container mb-5 no-print\">\n <div class=\"row\">\n <div class=\"col-xl-6 col-lg-12\">\n \n <div class=\"uige-card\">\n <div class=\"uige-card-header\">1. Select Base Template Engine<\/div>\n <div class=\"uige-card-body p-3\">\n <div class=\"row g-2\" id=\"uige-tpl-grid\">\n <div class=\"col-4 col-sm-3\"><div class=\"uige-template-card active\" data-template=\"classic\">Classic<\/div><\/div>\n <div class=\"col-4 col-sm-3\"><div class=\"uige-template-card\" data-template=\"gst\">GST Invoice<\/div><\/div>\n <div class=\"col-4 col-sm-3\"><div class=\"uige-template-card\" data-template=\"computer\">Comp Shop<\/div><\/div>\n <div class=\"col-4 col-sm-3\"><div class=\"uige-template-card\" data-template=\"electronics\">Electronics<\/div><\/div>\n <div class=\"col-4 col-sm-3\"><div class=\"uige-template-card\" data-template=\"cash\">Cash Memo<\/div><\/div>\n <div class=\"col-4 col-sm-3\"><div class=\"uige-template-card\" data-template=\"service\">Service<\/div><\/div>\n <div class=\"col-4 col-sm-3\"><div class=\"uige-template-card\" data-template=\"minimal\">Minimal<\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"uige-card\">\n <div class=\"uige-card-header\">2. Presentation Branding Layout Options<\/div>\n <div class=\"uige-card-body p-3\">\n <div class=\"row g-3\">\n <div class=\"col-sm-4\">\n <label for=\"cfg-theme\" class=\"form-label\">Theme Color Profile<\/label>\n <select class=\"form-select uige-focus-ring\" id=\"cfg-theme\">\n <option value=\"blue\">Blue Corporate<\/option>\n <option value=\"green\">Green Clean Tech<\/option>\n <option value=\"black\">High Contrast Black<\/option>\n <option value=\"red\">Crimson Academic<\/option>\n <option value=\"purple\">Creative Purple<\/option>\n <\/select>\n <\/div>\n <div class=\"col-sm-4\">\n <label for=\"cfg-font\" class=\"form-label\">Typography Axis<\/label>\n <select class=\"form-select uige-focus-ring\" id=\"cfg-font\">\n <option value=\"inter\">Inter Sans-Serif<\/option>\n <option value=\"arial\">Standard Arial<\/option>\n <option value=\"roboto\">Roboto Engine<\/option>\n <option value=\"poppins\">Poppins Display<\/option>\n <\/select>\n <\/div>\n <div class=\"col-sm-4\">\n <label for=\"cfg-border\" class=\"form-label\">Border Matrix Frame<\/label>\n <select class=\"form-select uige-focus-ring\" id=\"cfg-border\">\n <option value=\"classic\">Classic Structural Book<\/option>\n <option value=\"modern\">Modern Borderless Minimal<\/option>\n <option value=\"rounded\">Soft Rounded Boundaries<\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"uige-card\">\n <div class=\"uige-card-header d-flex justify-content-between align-items-center\">\n <span>3. Sender \/ Shop Registry Profile<\/span>\n <span class=\"badge bg-light text-dark\">All Fields Optional<\/span>\n <\/div>\n <div class=\"uige-card-body p-3\">\n <div class=\"row g-3\">\n <div class=\"col-12\">\n <label for=\"shop-logo\" class=\"form-label\">Shop Logo (Base64 URL Asset or Remote Direct Image Link)<\/label>\n <input type=\"text\" class=\"form-control uige-focus-ring\" id=\"shop-logo\" placeholder=\"Leave blank to drop space dynamically\">\n <\/div>\n <div class=\"col-sm-6\">\n <label for=\"shop-name\" class=\"form-label\">Corporate Registered Name<\/label>\n <input type=\"text\" class=\"form-control uige-focus-ring\" id=\"shop-name\" placeholder=\"e.g., Nexus Computers Ltd.\">\n <\/div>\n <div class=\"col-sm-6\">\n <label for=\"shop-gst\" class=\"form-label\">Tax \/ VAT ID Registry Token<\/label>\n <input type=\"text\" class=\"form-control uige-focus-ring\" id=\"shop-gst\" placeholder=\"e.g., GSTIN-12345XYZ\">\n <\/div>\n <div class=\"col-12\">\n <label for=\"shop-address\" class=\"form-label\">Physical Dispatch Address<\/label>\n <input type=\"text\" class=\"form-control uige-focus-ring\" id=\"shop-address\" placeholder=\"HQ Avenue Suite, Silicon Valley\">\n <\/div>\n <div class=\"col-sm-4\">\n <label for=\"shop-phone\" class=\"form-label\">Support Helpline<\/label>\n <input type=\"text\" class=\"form-control uige-focus-ring\" id=\"shop-phone\" placeholder=\"Line Phone\">\n <\/div>\n <div class=\"col-sm-4\">\n <label for=\"shop-email\" class=\"form-label\">Enterprise Mailing Address<\/label>\n <input type=\"email\" class=\"form-control uige-focus-ring\" id=\"shop-email\" placeholder=\"billing@nexus.com\">\n <\/div>\n <div class=\"col-sm-4\">\n <label for=\"shop-web\" class=\"form-label\">Web URL Access<\/label>\n <input type=\"text\" class=\"form-control uige-focus-ring\" id=\"shop-web\" placeholder=\"www.nexus.com\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"uige-card\">\n <div class=\"uige-card-header\">4. Sequence Controls & Book Ledger Tokens<\/div>\n <div class=\"uige-card-body p-3\">\n <div class=\"row g-3\">\n <div class=\"col-sm-4\">\n <label for=\"inv-number\" class=\"form-label\">Invoice Number ID Serial<\/label>\n <input type=\"text\" class=\"form-control uige-focus-ring\" id=\"inv-number\">\n <\/div>\n <div class=\"col-sm-4\">\n <label for=\"inv-date\" class=\"form-label\">Execution Record Date<\/label>\n <input type=\"date\" class=\"form-control uige-focus-ring\" id=\"inv-date\">\n <\/div>\n <div class=\"col-sm-4\">\n <label for=\"inv-payment\" class=\"form-label\">Payment Channel Method<\/label>\n <input type=\"text\" class=\"form-control uige-focus-ring\" id=\"inv-payment\" placeholder=\"e.g., Credit Card, Bank Check, Wire\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"uige-card\">\n <div class=\"uige-card-header\">5. Client Distribution Allocation Mode<\/div>\n <div class=\"uige-card-body p-3\">\n <div class=\"mb-3 d-flex gap-4\">\n <div class=\"form-check\">\n <input class=\"form-check-input\" type=\"radio\" name=\"cust-mode\" id=\"mode-digital\" value=\"digital\" checked>\n <label class=\"form-check-label fw-bold\" for=\"mode-digital\">Digital Realtime Data Input<\/label>\n <\/div>\n <div class=\"form-check\">\n <input class=\"form-check-input\" type=\"radio\" name=\"cust-mode\" id=\"mode-blank\" value=\"blank\">\n <label class=\"form-check-label fw-bold\" for=\"mode-blank\">Blank Book Mode (Manual Writer Lines)<\/label>\n <\/div>\n <\/div>\n \n <div id=\"customer-digital-fields\" class=\"row g-3\">\n <div class=\"col-sm-6\">\n <label for=\"cust-name\" class=\"form-label\">Recipient Client Name<\/label>\n <input type=\"text\" class=\"form-control uige-focus-ring\" id=\"cust-name\" placeholder=\"Johnathan Doe\">\n <\/div>\n <div class=\"col-sm-6\">\n <label for=\"cust-phone\" class=\"form-label\">Client Mobile Phone<\/label>\n <input type=\"text\" class=\"form-control uige-focus-ring\" id=\"cust-phone\" placeholder=\"Cell Reference\">\n <\/div>\n <div class=\"col-12\">\n <label for=\"cust-address\" class=\"form-label\">Billing\/Delivery Destination Address<\/label>\n <input type=\"text\" class=\"form-control uige-focus-ring\" id=\"cust-address\" placeholder=\"Destination Residence Location\">\n <\/div>\n <div class=\"col-sm-6\">\n <label for=\"cust-email\" class=\"form-label\">Client Account Email<\/label>\n <input type=\"email\" class=\"form-control uige-focus-ring\" id=\"cust-email\" placeholder=\"john@doe.com\">\n <\/div>\n <div class=\"col-sm-6\">\n <label for=\"cust-receiver\" class=\"form-label\">Authorized Consignee Receiver<\/label>\n <input type=\"text\" class=\"form-control uige-focus-ring\" id=\"cust-receiver\" placeholder=\"Drop Agent Name\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"uige-card\">\n <div class=\"uige-card-header d-flex justify-content-between align-items-center\">\n <span>6. Operational Line Statements & Ledger Rows<\/span>\n <button type=\"button\" class=\"btn btn-sm btn-primary\" id=\"btn-add-item\">+ Append Statement Row<\/button>\n <\/div>\n <div class=\"uige-card-body p-0\">\n <div class=\"table-responsive\">\n <table class=\"table align-middle mb-0\" id=\"ui-items-table\">\n <thead class=\"table-light\">\n <tr>\n <th style=\"width: 5%\">#<\/th>\n <th style=\"width: 45%\">Product Specification\/Service Descriptor<\/th>\n <th style=\"width: 15%\">Quantity<\/th>\n <th style=\"width: 15%\">Unit Rate ($)<\/th>\n <th style=\"width: 20%\">Row Operational Actions<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"ui-items-tbody\"><\/tbody>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"uige-card\">\n <div class=\"uige-card-header\">7. Ledger Math Modifiers & Declarations<\/div>\n <div class=\"uige-card-body p-3\">\n <div class=\"row g-3\">\n <div class=\"col-sm-6\">\n <label for=\"calc-discount\" class=\"form-label\">Flat Discount Deductions ($)<\/label>\n <input type=\"number\" class=\"form-control uige-focus-ring\" id=\"calc-discount\" value=\"0\" min=\"0\">\n <div class=\"invalid-feedback\" id=\"val-discount-msg\">Discount allocations cannot override basic item balances.<\/div>\n <\/div>\n <div class=\"col-sm-6\">\n <label for=\"calc-tax-rate\" class=\"form-label\">Unified Tax \/ GST Ceiling Frame (%)<\/label>\n <input type=\"number\" class=\"form-control uige-focus-ring\" id=\"calc-tax-rate\" value=\"18\" min=\"0\" max=\"100\">\n <div class=\"invalid-feedback\" id=\"val-tax-msg\">Tax evaluation ceilings cannot exceed 100%.<\/div>\n <\/div>\n <div class=\"col-12\">\n <label for=\"shop-footer-text\" class=\"form-label\">Footer Declaration Liability Agreement Clauses<\/label>\n <input type=\"text\" class=\"form-control uige-focus-ring\" id=\"shop-footer-text\" placeholder=\"Specify statutory warnings or warranty terms clear text here\">\n <\/div>\n <div class=\"col-12\">\n <label for=\"shop-signature-text\" class=\"form-label\">Authorized Verification Assignee Signature Caption<\/label>\n <input type=\"text\" class=\"form-control uige-focus-ring\" id=\"shop-signature-text\" placeholder=\"Corporate Endorsement Title Signatory Meta\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"uige-card\">\n <div class=\"uige-card-header\">8. Local Blueprint Configuration Store Persistence Console<\/div>\n <div class=\"uige-card-body p-3\">\n <div class=\"d-flex flex-wrap gap-2 mb-3\">\n <button type=\"button\" class=\"btn btn-success flex-grow-1\" id=\"btn-save-blueprint\">\ud83d\udcbe Freeze Configurations as Blueprint<\/button>\n <button type=\"button\" class=\"btn btn-danger\" id=\"btn-reset-app\">\ud83d\udd04 Reset Working Canvas Fields<\/button>\n <\/div>\n <div id=\"saved-blueprints-section\" class=\"d-none\">\n <label class=\"form-label fw-bold\">Active Offline System Configuration Blueprints Available<\/label>\n <div id=\"blueprints-list-container\" class=\"list-group\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"uige-card bg-light border-primary mb-5\">\n <div class=\"uige-card-body p-3 text-center d-grid gap-2\">\n <button type=\"button\" class=\"btn btn-primary btn-lg\" id=\"btn-trigger-print\">\ud83d\udda8\ufe0f Open Native OS Print Engine (A4 Profile)<\/button>\n <div class=\"row g-2\">\n <div class=\"col-6\">\n <button type=\"button\" class=\"btn btn-dark w-100\" id=\"btn-export-pdf\">\ud83d\udd25 Save Vector PDF Asset<\/button>\n <\/div>\n <div class=\"col-6\">\n <button type=\"button\" class=\"btn btn-info text-white w-100\" id=\"btn-export-docx\">\ud83d\udcdd Stream Editable DOCX File<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n <div class=\"col-xl-6 col-lg-12\">\n <div class=\"sticky-top\" style=\"top: 1rem; z-index: 1010;\">\n <div class=\"d-flex justify-content-between align-items-center mb-2 text-dark bg-white p-2 rounded shadow-sm\">\n <span class=\"fw-bold text-uppercase small\">\ud83d\udfe2 Live View Visualizer Matrix Engine<\/span>\n <span class=\"badge bg-primary\">A4 Portrait Standard Blueprint<\/span>\n <\/div>\n <div id=\"uige-preview-wrapper\">\n <div id=\"print-area\" class=\"invoice-print-container inv-font-inter inv-theme-blue inv-border-classic\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/main>\n\n<script>\n (function () {\n \/\/ Core Isolated State Engine\n let internalState = {\n template: 'classic',\n theme: 'blue',\n font: 'inter',\n border: 'classic',\n shop: { logo: '', name: '', gst: '', address: '', phone: '', email: '', web: '', footerText: '', signatureText: '' },\n meta: { number: '', date: '', payment: '' },\n customerMode: 'digital',\n customer: { name: '', phone: '', address: '', email: '', receiver: '' },\n items: [\n { id: 1, name: 'Premium High Performance Computing Device Pack', qty: 1, rate: 850.00 },\n { id: 2, name: 'Extended Enterprise Engineering Support Access', qty: 5, rate: 75.00 }\n ],\n discount: 25.00,\n taxRate: 18.00\n };\n\n const STORAGE_KEY_PREFIX = 'UIGE_PROD_CORE_2026_';\n\n \/\/ UI Toast Engine Mapping\n function pushNotification(message, variation = 'success') {\n const boundary = document.getElementById('uige-toasts');\n const alertBox = document.createElement('div');\n alertBox.className = `uige-toast uige-toast-${variation}`;\n alertBox.innerHTML = `<span>${variation === 'success' ? '\u2714' : '\u274c'}<\/span> <span>${message}<\/span>`;\n boundary.appendChild(alertBox);\n setTimeout(() => { alertBox.remove(); }, 3500);\n }\n\n \/\/ Amount In Words Formula Parser\n function parseCurrencyToWords(val) {\n let units = ['', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve', 'Thirteen', 'Fourteen', 'Fifteen', 'Sixteen', 'Seventeen', 'Eighteen', 'Nineteen'];\n let tens = ['', '', 'Twenty', 'Thirty', 'Forty', 'Fifty', 'Sixty', 'Seventy', 'Eighty', 'Ninety'];\n \n function convertUnderThousand(num) {\n if (num === 0) return '';\n if (num < 20) return units[num] + ' ';\n if (num < 100) return tens[Math.floor(num \/ 10)] + ' ' + convertUnderThousand(num % 10);\n return units[Math.floor(num \/ 100)] + ' Hundred ' + convertUnderThousand(num % 100);\n }\n\n let valueInteger = Math.floor(val);\n if (valueInteger === 0) return 'Zero Dollars Only';\n\n let trackingString = '';\n if (Math.floor(valueInteger \/ 1000000) > 0) {\n trackingString += convertUnderThousand(Math.floor(valueInteger \/ 1000000)) + 'Million ';\n valueInteger %= 1000000;\n }\n if (Math.floor(valueInteger \/ 1000) > 0) {\n trackingString += convertUnderThousand(Math.floor(valueInteger \/ 1000)) + 'Thousand ';\n valueInteger %= 1000;\n }\n trackingString += convertUnderThousand(valueInteger);\n return trackingString.trim() + ' Dollars Only';\n }\n\n function extractCanvasUI() {\n \/\/ Field values pull\n internalState.theme = document.getElementById('cfg-theme').value;\n internalState.font = document.getElementById('cfg-font').value;\n internalState.border = document.getElementById('cfg-border').value;\n\n internalState.shop.logo = document.getElementById('shop-logo').value.trim();\n internalState.shop.name = document.getElementById('shop-name').value.trim();\n internalState.shop.gst = document.getElementById('shop-gst').value.trim();\n internalState.shop.address = document.getElementById('shop-address').value.trim();\n internalState.shop.phone = document.getElementById('shop-phone').value.trim();\n internalState.shop.email = document.getElementById('shop-email').value.trim();\n internalState.shop.web = document.getElementById('shop-web').value.trim();\n internalState.shop.footerText = document.getElementById('shop-footer-text').value.trim();\n internalState.shop.signatureText = document.getElementById('shop-signature-text').value.trim();\n\n internalState.meta.number = document.getElementById('inv-number').value.trim();\n internalState.meta.date = document.getElementById('inv-date').value;\n internalState.meta.payment = document.getElementById('inv-payment').value.trim();\n\n internalState.customerMode = document.querySelector('input[name=\"cust-mode\"]:checked').value;\n internalState.customer.name = document.getElementById('cust-name').value.trim();\n internalState.customer.phone = document.getElementById('cust-phone').value.trim();\n internalState.customer.address = document.getElementById('cust-address').value.trim();\n internalState.customer.email = document.getElementById('cust-email').value.trim();\n internalState.customer.receiver = document.getElementById('cust-receiver').value.trim();\n\n \/\/ Dynamic evaluation validation wrappers\n let prospectiveTaxRate = parseFloat(document.getElementById('calc-tax-rate').value);\n if (prospectiveTaxRate > 100) {\n document.getElementById('calc-tax-rate').classList.add('is-invalid');\n internalState.taxRate = 100;\n } else if (prospectiveTaxRate < 0 || isNaN(prospectiveTaxRate)) {\n document.getElementById('calc-tax-rate').classList.add('is-invalid');\n internalState.taxRate = 0;\n } else {\n document.getElementById('calc-tax-rate').classList.remove('is-invalid');\n internalState.taxRate = prospectiveTaxRate;\n }\n\n let derivedSubtotal = internalState.items.reduce((acc, current) => acc + (current.qty * current.rate), 0);\n let prospectiveDiscount = parseFloat(document.getElementById('calc-discount').value) || 0;\n \n if (prospectiveDiscount > derivedSubtotal) {\n document.getElementById('calc-discount').classList.add('is-invalid');\n internalState.discount = derivedSubtotal;\n } else if (prospectiveDiscount < 0 || isNaN(prospectiveDiscount)) {\n document.getElementById('calc-discount').classList.add('is-invalid');\n internalState.discount = 0;\n } else {\n document.getElementById('calc-discount').classList.remove('is-invalid');\n internalState.discount = prospectiveDiscount;\n }\n\n localStorage.setItem(STORAGE_KEY_PREFIX + 'AUTOSAVE_CORE', JSON.stringify(internalState));\n }\n\n function restoreStateAndRenderUI() {\n const cachedValue = localStorage.getItem(STORAGE_KEY_PREFIX + 'AUTOSAVE_CORE');\n if (cachedValue) {\n try { internalState = JSON.parse(cachedValue); } catch (e) { console.error(e); }\n } else {\n internalState.meta.date = new Date().toISOString().slice(0, 10);\n internalState.meta.number = 'TXN-' + Math.floor(10000 + Math.random() * 90000);\n }\n\n \/\/ Sync structural items array data controls to form field matrices\n document.getElementById('cfg-theme').value = internalState.theme;\n document.getElementById('cfg-font').value = internalState.font;\n document.getElementById('cfg-border').value = internalState.border;\n\n document.getElementById('shop-logo').value = internalState.shop.logo;\n document.getElementById('shop-name').value = internalState.shop.name;\n document.getElementById('shop-gst').value = internalState.shop.gst;\n document.getElementById('shop-address').value = internalState.shop.address;\n document.getElementById('shop-phone').value = internalState.shop.phone;\n document.getElementById('shop-email').value = internalState.shop.email;\n document.getElementById('shop-web').value = internalState.shop.web;\n document.getElementById('shop-footer-text').value = internalState.shop.footerText;\n document.getElementById('shop-signature-text').value = internalState.shop.signatureText;\n\n document.getElementById('inv-number').value = internalState.meta.number;\n document.getElementById('inv-date').value = internalState.meta.date;\n document.getElementById('inv-payment').value = internalState.meta.payment;\n\n document.getElementById('calc-discount').value = internalState.discount;\n document.getElementById('calc-tax-rate').value = internalState.taxRate;\n\n if (internalState.customerMode === 'blank') {\n document.getElementById('mode-blank').checked = true;\n document.getElementById('customer-digital-fields').classList.add('d-none');\n } else {\n document.getElementById('mode-digital').checked = true;\n document.getElementById('customer-digital-fields').classList.remove('d-none');\n }\n\n document.getElementById('cust-name').value = internalState.customer.name;\n document.getElementById('cust-phone').value = internalState.customer.phone;\n document.getElementById('cust-address').value = internalState.customer.address;\n document.getElementById('cust-email').value = internalState.customer.email;\n document.getElementById('cust-receiver').value = internalState.customer.receiver;\n\n syncSelectionFrameworkCardHighlight();\n rebuildItemsFormTable();\n executeCalculatedViewRender();\n renderBlueprintListMenu();\n }\n\n function syncSelectionFrameworkCardHighlight() {\n document.querySelectorAll('.uige-template-card').forEach(card => {\n if (card.getAttribute('data-template') === internalState.template) {\n card.classList.add('active');\n } else {\n card.classList.remove('active');\n }\n });\n }\n\n function rebuildItemsFormTable() {\n const anchor = document.getElementById('ui-items-tbody');\n anchor.innerHTML = '';\n internalState.items.forEach((item, index) => {\n const tr = document.createElement('tr');\n tr.innerHTML = `\n <td>${index + 1}<\/td>\n <td><input type=\"text\" class=\"form-control uige-focus-ring item-hook\" data-id=\"${item.id}\" data-type=\"name\" value=\"${item.name}\"><\/td>\n <td><input type=\"number\" class=\"form-control text-end uige-focus-ring item-hook\" data-id=\"${item.id}\" data-type=\"qty\" value=\"${item.qty}\" min=\"1\"><\/td>\n <td><input type=\"number\" class=\"form-control text-end uige-focus-ring item-hook\" data-id=\"${item.id}\" data-type=\"rate\" value=\"${item.rate}\" min=\"0\" step=\"0.01\"><\/td>\n <td>\n <div class=\"btn-group btn-group-sm\">\n <button type=\"button\" class=\"btn btn-outline-secondary\" onclick=\"window.uigeDuplicateRow(${item.id})\">Duplicate<\/button>\n <button type=\"button\" class=\"btn btn-outline-danger\" onclick=\"window.uigeDeleteRow(${item.id})\">Delete<\/button>\n <\/div>\n <\/td>\n `;\n anchor.appendChild(tr);\n });\n }\n\n function executeCalculatedViewRender() {\n const viewAnchor = document.getElementById('print-area');\n let itemSubtotalSum = 0;\n let rowsHtml = '';\n\n internalState.items.forEach((item, index) => {\n let computedRowCost = item.qty * item.rate;\n itemSubtotalSum += computedRowCost;\n rowsHtml += `\n <tr>\n <td style=\"text-align: center; border-right: 1px solid #cbd5e1;\">${index + 1}<\/td>\n <td style=\"border-right: 1px solid #cbd5e1; font-weight: 500;\">${item.name || 'Product Specification Asset'}<\/td>\n <td style=\"text-align: center; border-right: 1px solid #cbd5e1;\">${item.qty}<\/td>\n <td style=\"text-align: right; border-right: 1px solid #cbd5e1;\">${parseFloat(item.rate).toFixed(2)}<\/td>\n <td style=\"text-align: right; font-weight:600;\">${computedRowCost.toFixed(2)}<\/td>\n <\/tr>\n `;\n });\n\n let activeTaxValue = (itemSubtotalSum - internalState.discount) * (internalState.taxRate \/ 100);\n if (activeTaxValue < 0) activeTaxValue = 0;\n \n let totalUnroundedRaw = itemSubtotalSum - internalState.discount + activeTaxValue;\n let finalRoundedCeil = Math.round(totalUnroundedRaw);\n let roundVariance = finalRoundedCeil - totalUnroundedRaw;\n\n viewAnchor.className = `invoice-print-container inv-font-${internalState.font} inv-theme-${internalState.theme} inv-border-${internalState.border}`;\n \n let headlineText = \"INVOICE\";\n if (internalState.template === 'gst') headlineText = \"TAX INVOICE\";\n if (internalState.template === 'computer') headlineText = \"COMPUTER TECH SERVICES BILL\";\n if (internalState.template === 'electronics') headlineText = \"ELECTRONICS CASH MEMO\";\n if (internalState.template === 'cash') headlineText = \"CASH MEMO RECEIPT\";\n if (internalState.template === 'service') headlineText = \"SERVICE JOB INVOICE\";\n if (internalState.template === 'minimal') headlineText = \"ACCOUNT STATEMENT\";\n\n let logoMarkup = internalState.shop.logo ? `<img decoding=\"async\" src=\"${internalState.shop.logo}\" class=\"inv-logo\" alt=\"Logo\">` : '';\n let taxIdBlock = internalState.shop.gst ? `<div style=\"font-size: 11px;\" class=\"text-secondary\">Tax ID Number: <strong>${internalState.shop.gst}<\/strong><\/div>` : '';\n\n let clientDataBlock = '';\n if (internalState.customerMode === 'blank') {\n clientDataBlock = `\n <div>\n <div class=\"fw-bold text-uppercase mb-2\" style=\"color:var(--theme-color); font-size:11px;\">Client Assignment Profile<\/div>\n <div class=\"uige-blank-row\">Customer\/M\/s: <span class=\"uige-blank-line\"><\/span><\/div>\n <div class=\"uige-blank-row\">Location Address: <span class=\"uige-blank-line\"><\/span><\/div>\n <div class=\"uige-blank-row\">Phone Axis Number: <span class=\"uige-blank-line\"><\/span><\/div>\n <div class=\"uige-blank-row\">Consignee Receipt: <span class=\"uige-blank-line\"><\/span><\/div>\n <\/div>\n `;\n } else {\n clientDataBlock = `\n <div>\n <div class=\"fw-bold text-uppercase mb-1\" style=\"color:var(--theme-color); font-size:11px;\">Billed To Recipient:<\/div>\n <div class=\"fw-bold fs-5 mb-1\">${internalState.customer.name || '__________________________'}<\/div>\n <div class=\"text-secondary small\">\n ${internalState.customer.address || 'Location Destination Address Line'}<br>\n Phone: ${internalState.customer.phone || 'N\/A'} | Email: ${internalState.customer.email || 'N\/A'}<br>\n <span class=\"text-dark\">Assignee\/Receiver: ${internalState.customer.receiver || 'Manual Dispatch'}<\/span>\n <\/div>\n <\/div>\n `;\n }\n\n viewAnchor.innerHTML = `\n <div class=\"inv-header\">\n <div>\n ${logoMarkup}\n <div class=\"fw-bold fs-4 mt-1\" style=\"color: var(--theme-color); line-height: 1.1;\">${internalState.shop.name || 'Your Shop Registry Name'}<\/div>\n <div class=\"text-muted small mt-1\" style=\"max-width: 340px;\">${internalState.shop.address || 'Set Shop Address under settings panel.'}<\/div>\n ${taxIdBlock}\n <\/div>\n <div class=\"text-end\">\n <div class=\"inv-title-banner\">${headlineText}<\/div>\n <div class=\"small text-muted\">A4 Vector Standard Output Ledger<\/div>\n <div class=\"mt-2\" style=\"font-size: 13px;\">\n <div>Invoice Reference: <strong>${internalState.meta.number || '---'}<\/strong><\/div>\n <div>Dated Axis: <strong>${internalState.meta.date || '---'}<\/strong><\/div>\n <div>Payment Terms: <span class=\"badge bg-secondary\">${internalState.meta.payment || 'Standard Due'}<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"inv-meta-grid\">\n ${clientDataBlock}\n <div style=\"background-color: var(--theme-bg); padding: 12px; border-radius: 6px; font-size: 12px;\">\n <div class=\"fw-bold text-uppercase\" style=\"color: var(--theme-color);\">Compliance Framework Declaration<\/div>\n <p class=\"mb-0 text-muted mt-1\" style=\"line-height: 1.3;\">This statement marks a finalized offline distribution billing record ledger. Calculations generated via integrated browser runtime calculations matching local configurations asset perfectly.<\/p>\n <\/div>\n <\/div>\n\n <table class=\"inv-table\">\n <thead>\n <tr>\n <th style=\"width: 8%; text-align: center;\">S.No<\/th>\n <th style=\"width: 52%;\">Product Specification \/ Service Descriptor<\/th>\n <th style=\"width: 12%; text-align: center;\">Qty<\/th>\n <th style=\"width: 13%; text-align: right;\">Rate ($)<\/th>\n <th style=\"width: 15%; text-align: right;\">Amount ($)<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n ${rowsHtml}\n <\/tbody>\n <\/table>\n\n <div class=\"inv-summary-wrapper\">\n <div class=\"inv-words\">\n <div class=\"text-uppercase fw-bold text-secondary\" style=\"font-size: 10px;\">Total Certified Net Amount in Language Matrix<\/div>\n <div class=\"fw-bold text-dark mt-1\" style=\"font-size: 13px;\">${parseCurrencyToWords(finalRoundedCeil)}<\/div>\n \n <div class=\"mt-4 p-2\" style=\"border: 1px dashed #cbd5e1; border-radius: 6px; background-color: #f8fafc;\">\n <span class=\"fw-bold d-block text-uppercase\" style=\"font-size: 10px; color: var(--theme-color);\">Statutory Liability Conditions \/ Memos<\/span>\n <span class=\"text-muted\" style=\"font-size: 11px; line-height: 1.2;\">${internalState.shop.footerText || 'System generation output document. Subject to regional legal transaction terms.'}<\/span>\n <\/div>\n <\/div>\n <div class=\"inv-totals\">\n <div class=\"inv-totals-row\">\n <span class=\"text-muted\">Subtotal Gross:<\/span>\n <span>${itemSubtotalSum.toFixed(2)}<\/span>\n <\/div>\n <div class=\"inv-totals-row\">\n <span class=\"text-muted\">Allocated Adjustments:<\/span>\n <span class=\"text-danger\">-${parseFloat(internalState.discount).toFixed(2)}<\/span>\n <\/div>\n <div class=\"inv-totals-row\">\n <span class=\"text-muted\">Tax Calculation Pool (${internalState.taxRate}%):<\/span>\n <span>+${activeTaxValue.toFixed(2)}<\/span>\n <\/div>\n <div class=\"inv-totals-row text-muted small\">\n <span>Rounding Off:<\/span>\n <span>${roundVariance >= 0 ? '+' : ''}${roundVariance.toFixed(2)}<\/span>\n <\/div>\n <div class=\"inv-totals-row inv-totals-grand\">\n <span>NET PAYABLE VALUE:<\/span>\n <span>$ ${parseFloat(finalRoundedCeil).toFixed(2)}<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"inv-footer\">\n <div style=\"font-size: 11px; color: #64748b;\">\n ${internalState.shop.phone ? 'Phone: ' + internalState.shop.phone : ''} ${internalState.shop.email ? ' | Email: ' + internalState.shop.email : ''}\n ${internalState.shop.web ? '<br>Domain Link: ' + internalState.shop.web : ''}\n <\/div>\n <div class=\"text-center\" style=\"min-width: 210px;\">\n <div class=\"mb-4\" style=\"border-bottom: 1px solid #000; width: 100%;\"><\/div>\n <div class=\"fw-bold\" style=\"font-size: 11px; color: var(--theme-color);\">${internalState.shop.signatureText || 'Authorized Verification Signatory Seal'}<\/div>\n <div class=\"text-muted\" style=\"font-size: 9px;\">Statutory Sign-Off Node<\/div>\n <\/div>\n <\/div>\n `;\n }\n\n function renderBlueprintListMenu() {\n const holder = document.getElementById('blueprints-list-container');\n const box = document.getElementById('saved-blueprints-section');\n holder.innerHTML = '';\n let counter = 0;\n\n for (let i = 0; i < localStorage.length; i++) {\n const storageKey = localStorage.key(i);\n if (storageKey.startsWith(STORAGE_KEY_PREFIX + 'BLUEPRINT_NODE_')) {\n counter++;\n const contextLabel = storageKey.replace(STORAGE_KEY_PREFIX + 'BLUEPRINT_NODE_', '');\n const row = document.createElement('div');\n row.className = \"list-group-item d-flex justify-content-between align-items-center p-2\";\n row.innerHTML = `\n <div><span class=\"fw-bold text-dark\">${contextLabel}<\/span><\/div>\n <div class=\"btn-group btn-group-sm\">\n <button type=\"button\" class=\"btn btn-sm btn-outline-success\" id=\"uige-load-bp-${counter}\">Load<\/button>\n <button type=\"button\" class=\"btn btn-sm btn-outline-danger\" id=\"uige-del-bp-${counter}\">Wipe<\/button>\n <\/div>\n `;\n holder.appendChild(row);\n\n \/\/ Scoped event handlers to preserve clean execution\n document.getElementById(`uige-load-bp-${counter}`).addEventListener('click', () => {\n const staticPayload = localStorage.getItem(storageKey);\n if (staticPayload) {\n try {\n const parsed = JSON.parse(staticPayload);\n internalState.template = parsed.template;\n internalState.theme = parsed.theme;\n internalState.font = parsed.font;\n internalState.border = parsed.border;\n internalState.shop = parsed.shop;\n restoreStateAndRenderUI();\n pushNotification(`Blueprint configuration [${contextLabel}] loaded successfully.`);\n } catch (err) { pushNotification(\"Failed to accurately parse configurations storage maps.\", \"error\"); }\n }\n });\n\n document.getElementById(`uige-del-bp-${counter}`).addEventListener('click', () => {\n if (confirm(`Confirm permanent deletion of Blueprint configuration entry: \"${contextLabel}\"?`)) {\n localStorage.removeItem(storageKey);\n renderBlueprintListMenu();\n pushNotification(\"Blueprint dropped out of device cache memory safely.\");\n }\n });\n }\n }\n\n if (counter > 0) box.classList.remove('d-none');\n else box.classList.add('d-none');\n }\n\n \/\/ Global Window Mappings for runtime table mutation handlers\n window.uigeDeleteRow = function (id) {\n if (internalState.items.length <= 1) {\n pushNotification(\"Operation aborted. Ledger tables require at least one row entry item.\", \"error\");\n return;\n }\n internalState.items = internalState.items.filter(i => i.id !== id);\n rebuildItemsFormTable();\n extractCanvasUI();\n executeCalculatedViewRender();\n };\n\n window.uigeDuplicateRow = function (id) {\n const targetItem = internalState.items.find(i => i.id === id);\n if (targetItem) {\n const clonedObj = Object.assign({}, targetItem);\n clonedObj.id = Date.now() + Math.floor(Math.random() * 100);\n internalState.items.push(clonedObj);\n rebuildItemsFormTable();\n extractCanvasUI();\n executeCalculatedViewRender();\n pushNotification(\"Ledger item statement row cloned successfully.\");\n }\n };\n\n \/\/ Wire Event Framework Systems\n document.addEventListener('DOMContentLoaded', () => {\n restoreStateAndRenderUI();\n\n \/\/ Core Template Configuration click mappings\n document.getElementById('uige-tpl-grid').addEventListener('click', (e) => {\n const structuralCard = e.target.closest('.uige-template-card');\n if (structuralCard) {\n internalState.template = structuralCard.getAttribute('data-template');\n syncSelectionFrameworkCardHighlight();\n extractCanvasUI();\n executeCalculatedViewRender();\n }\n });\n\n \/\/ Track standard changes across input matrices\n document.querySelectorAll('.form-control, .form-select, input[type=\"radio\"]').forEach(field => {\n field.addEventListener('input', () => {\n extractCanvasUI();\n executeCalculatedViewRender();\n });\n });\n\n \/\/ Toggle radio views dynamically\n document.querySelectorAll('input[name=\"cust-mode\"]').forEach(radio => {\n radio.addEventListener('change', (e) => {\n if (e.target.value === 'blank') {\n document.getElementById('customer-digital-fields').classList.add('d-none');\n } else {\n document.getElementById('customer-digital-fields').classList.remove('d-none');\n }\n extractCanvasUI();\n executeCalculatedViewRender();\n });\n });\n\n \/\/ Append statement row items\n document.getElementById('btn-add-item').addEventListener('click', () => {\n const allocationId = Date.now() + Math.floor(Math.random() * 10);\n internalState.items.push({ id: allocationId, name: '', qty: 1, rate: 0.00 });\n rebuildItemsFormTable();\n extractCanvasUI();\n executeCalculatedViewRender();\n });\n\n \/\/ Native input mutations straight out of table forms\n document.getElementById('ui-items-tbody').addEventListener('input', (e) => {\n if (e.target.classList.contains('item-hook')) {\n const trackingId = parseInt(e.target.getAttribute('data-id'));\n const propertyField = e.target.getAttribute('data-type');\n const inventoryItem = internalState.items.find(i => i.id === trackingId);\n \n if (inventoryItem) {\n if (propertyField === 'name') inventoryItem.name = e.target.value;\n if (propertyField === 'qty') {\n let parsedQuantity = parseInt(e.target.value);\n inventoryItem.qty = parsedQuantity >= 1 ? parsedQuantity : 1;\n }\n if (propertyField === 'rate') {\n let parsedRate = parseFloat(e.target.value);\n inventoryItem.rate = parsedRate >= 0 ? parsedRate : 0;\n }\n }\n extractCanvasUI();\n executeCalculatedViewRender();\n }\n });\n\n \/\/ Save Blueprint Entry Action Mapping\n document.getElementById('btn-save-blueprint').addEventListener('click', () => {\n const namingCode = prompt(\"Enter a descriptive name for this Blueprint Configuration Profile:\");\n if (namingCode && namingCode.trim() !== '') {\n const blueprintPayload = {\n template: internalState.template,\n theme: internalState.theme,\n font: internalState.font,\n border: internalState.border,\n shop: internalState.shop\n };\n localStorage.setItem(STORAGE_KEY_PREFIX + 'BLUEPRINT_NODE_' + namingCode.trim(), JSON.stringify(blueprintPayload));\n renderBlueprintListMenu();\n pushNotification(`Configuration Blueprint [${namingCode.trim()}] safely cached.`);\n }\n });\n\n \/\/ Canvas hard wipe layout reset action\n document.getElementById('btn-reset-app').addEventListener('click', () => {\n if (confirm(\"Confirm form canvas hard reset? This action reverts all inputs to defaults while preserving saved Blueprints.\")) {\n localStorage.removeItem(STORAGE_KEY_PREFIX + 'AUTOSAVE_CORE');\n location.reload();\n }\n });\n\n \/\/ Native Device Engine Call Execution Links\n document.getElementById('btn-trigger-print').addEventListener('click', () => {\n window.print();\n });\n\n \/\/ High Resolution Vector html2pdf Canvas Output Generation Map Engine\n document.getElementById('btn-export-pdf').addEventListener('click', () => {\n pushNotification(\"Compiling vector asset print metrics. Please wait...\");\n const focalContainer = document.getElementById('print-area');\n const generationOptions = {\n margin: 0,\n filename: `Invoice_${internalState.meta.number || 'Standard'}.pdf`,\n image: { type: 'jpeg', quality: 1.0 },\n html2canvas: { scale: 3, useCORS: true, logging: false },\n jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }\n };\n html2pdf().set(generationOptions).from(focalContainer).save().then(() => {\n pushNotification(\"High-Fidelity PDF file stream delivery execution successful.\");\n });\n });\n\n \/\/ Stream Native Editable OpenXML Compliant DOCX Configuration Pipeline File Engine\n document.getElementById('btn-export-docx').addEventListener('click', () => {\n pushNotification(\"Structuring Word OpenXML layout maps...\");\n \n try {\n const { Document, Packer, Paragraph, TextRun, Table, TableRow, TableCell, WidthType, BorderStyle, AlignmentType } = docx;\n\n \/\/ Build item calculation metrics\n let itemSubtotalSum = internalState.items.reduce((acc, curr) => acc + (curr.qty * curr.rate), 0);\n let activeTaxValue = Math.max(0, (itemSubtotalSum - internalState.discount) * (internalState.taxRate \/ 100));\n let finalNetValue = Math.round(itemSubtotalSum - internalState.discount + activeTaxValue);\n\n \/\/ Map UI rows into native layout table formats\n const documentTableRows = [\n new TableRow({\n children: [\n new TableCell({ children: [new Paragraph({ text: \"S.No\", bold: true })], width: { size: 10, type: WidthType.PERCENTAGE } }),\n new TableCell({ children: [new Paragraph({ text: \"Item Description & Specifications\", bold: true })], width: { size: 50, type: WidthType.PERCENTAGE } }),\n new TableCell({ children: [new Paragraph({ text: \"Qty\", bold: true })], width: { size: 10, type: WidthType.PERCENTAGE } }),\n new TableCell({ children: [new Paragraph({ text: \"Rate ($)\", bold: true })], width: { size: 15, type: WidthType.PERCENTAGE } }),\n new TableCell({ children: [new Paragraph({ text: \"Amount ($)\", bold: true })], width: { size: 15, type: WidthType.PERCENTAGE } }),\n ],\n })\n ];\n\n internalState.items.forEach((item, idx) => {\n documentTableRows.push(\n new TableRow({\n children: [\n new TableCell({ children: [new Paragraph({ text: String(idx + 1), alignment: AlignmentType.CENTER })] }),\n new TableCell({ children: [new Paragraph({ text: item.name || \"Product Entry Specification\" })] }),\n new TableCell({ children: [new Paragraph({ text: String(item.qty), alignment: AlignmentType.CENTER })] }),\n new TableCell({ children: [new Paragraph({ text: parseFloat(item.rate).toFixed(2), alignment: AlignmentType.RIGHT })] }),\n new TableCell({ children: [new Paragraph({ text: parseFloat(item.qty * item.rate).toFixed(2), alignment: AlignmentType.RIGHT })] }),\n ],\n })\n );\n });\n\n \/\/ Build document schema trees structure mappings\n const wordDocStructure = new Document({\n sections: [{\n properties: {},\n children: [\n new Paragraph({\n children: [\n new TextRun({ text: internalState.shop.name || \"Your Shop Business Title\", bold: true, size: 32 }),\n ],\n spacing: { after: 120 }\n }),\n new Paragraph({ text: internalState.shop.address || \"Shop Address Line Location Entry Reference Data Matrix\", spacing: { after: 240 } }),\n new Paragraph({ text: `Invoice Serial Identifier: ${internalState.meta.number || '---'}`, bold: true }),\n new Paragraph({ text: `Execution Document Date: ${internalState.meta.date || '---'}`, spacing: { after: 240 } }),\n new Paragraph({ text: `Recipient Name: ${internalState.customerMode === 'blank' ? 'Blank Book Allocation Profile' : (internalState.customer.name || 'John Doe Client Value')}`, bold: true, spacing: { after: 240 } }),\n \n new Table({\n width: { size: 100, type: WidthType.PERCENTAGE },\n rows: documentTableRows,\n borders: {\n top: { style: BorderStyle.SINGLE, size: 1, color: \"cbd5e1\" },\n bottom: { style: BorderStyle.SINGLE, size: 1, color: \"cbd5e1\" },\n left: { style: BorderStyle.SINGLE, size: 1, color: \"cbd5e1\" },\n right: { style: BorderStyle.SINGLE, size: 1, color: \"cbd5e1\" },\n }\n }),\n \n new Paragraph({ text: `\\nSubtotal Gross Aggregate: $ ${itemSubtotalSum.toFixed(2)}`, alignment: AlignmentType.RIGHT }),\n new Paragraph({ text: `Adjustments\/Deductions: $ -${parseFloat(internalState.discount).toFixed(2)}`, alignment: AlignmentType.RIGHT }),\n new Paragraph({ text: `Taxation Pool Assessment (${internalState.taxRate}%): $ +${activeTaxValue.toFixed(2)}`, alignment: AlignmentType.RIGHT }),\n new Paragraph({\n children: [new TextRun({ text: `NET PAYABLE OUTCOME: $ ${parseFloat(finalNetValue).toFixed(2)}`, bold: true })],\n alignment: AlignmentType.RIGHT,\n spacing: { before: 120, after: 240 }\n }),\n new Paragraph({ text: `Words Representation: ${parseCurrencyToWords(finalNetValue)}`, font: \"Courier\" }),\n new Paragraph({ text: `Terms: ${internalState.shop.footerText || 'N\/A Verification reference.'}`, spacing: { before: 240 } }),\n ],\n }],\n });\n\n Packer.toBlob(wordDocStructure).then(blobObject => {\n const temporaryUrlLink = URL.createObjectURL(blobObject);\n const downloadAnchorElement = document.createElement('a');\n downloadAnchorElement.href = temporaryUrlLink;\n downloadAnchorElement.download = `Invoice_${internalState.meta.number || 'Standard'}.docx`;\n document.body.appendChild(downloadAnchorElement);\n downloadAnchorElement.click();\n document.body.removeChild(downloadAnchorElement);\n URL.revokeObjectURL(temporaryUrlLink);\n pushNotification(\"Editable OpenXML Word .docx stream compiled successfully.\");\n });\n\n } catch (docxGenerationException) {\n console.error(docxGenerationException);\n pushNotification(\"DOCX construction engine failure.\", \"error\");\n }\n });\n });\n })();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Universal Invoice & Bill Generator – Production Edition Universal Invoice & Bill Generator Production-Ready Single-Screen Native Workstation Asset 1. Select Base Template Engine Classic GST Invoice Comp Shop Electronics Cash Memo Service Minimal 2. Presentation Branding Layout Options Theme Color Profile Blue CorporateGreen Clean TechHigh Contrast BlackCrimson AcademicCreative Purple Typography Axis Inter Sans-SerifStandard ArialRoboto EnginePoppins […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-271","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/271","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=271"}],"version-history":[{"count":2,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/271\/revisions"}],"predecessor-version":[{"id":289,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/271\/revisions\/289"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}