{"id":373,"date":"2026-07-12T06:17:00","date_gmt":"2026-07-12T06:17:00","guid":{"rendered":"https:\/\/freewebtools.co.in\/?page_id=373"},"modified":"2026-07-12T06:17:00","modified_gmt":"2026-07-12T06:17:00","slug":"advance-billing-format-maker","status":"publish","type":"page","link":"https:\/\/freewebtools.co.in\/index.php\/advance-billing-format-maker\/","title":{"rendered":"Advance Billing Format Maker"},"content":{"rendered":"\n<div id=\"wp-invoice-container\" style=\"font-family: 'Times New Roman', Times, serif; max-width: 800px; width: 100%; margin: 20px auto; padding: 20px; background: #ffffff; border: 1px solid #333; box-sizing: border-box; color: #000; overflow-x: auto;\">\n    <div id=\"wp-invoice-controls\" style=\"margin-bottom: 20px; padding: 15px; background: #eee; border: 1px solid #ccc; display: flex; gap: 10px; flex-wrap: wrap;\">\n        <select id=\"bg-selector-input\">\n            <option value=\"#ffffff\">White<\/option>\n            <option value=\"#fffdd0\">Cream<\/option>\n            <option value=\"#ffffe0\">Light Yellow<\/option>\n            <option value=\"#e0f7fa\">Light Blue<\/option>\n            <option value=\"#e8f5e9\">Light Green<\/option>\n            <option value=\"#fce4ec\">Pink<\/option>\n            <option value=\"#f5f5f5\">Grey<\/option>\n        <\/select>\n        <select id=\"title-selector-input\">\n            <option value=\"None\">None<\/option>\n            <option value=\"INVOICE\" selected>Invoice<\/option>\n            <option value=\"BILL\">Bill<\/option>\n            <option value=\"CASH MEMO\">Cash Memo<\/option>\n            <option value=\"TAX INVOICE\">Tax Invoice<\/option>\n            <option value=\"ESTIMATE\">Estimate<\/option>\n            <option value=\"RECEIPT\">Receipt<\/option>\n        <\/select>\n        <button type=\"button\" id=\"print-action-btn\">Print \/ PDF<\/button>\n        <button type=\"button\" id=\"reset-action-btn\">Reset<\/button>\n    <\/div>\n\n    <div id=\"invoice-sheet-main\" style=\"padding: 20px; min-height: 800px;\">\n        <div style=\"text-align: center; margin-bottom: 15px;\">\n            <h1 id=\"title-display-area\" style=\"margin: 0; text-decoration: underline; font-size: 24px; text-transform: uppercase;\">INVOICE<\/h1>\n            <input type=\"text\" value=\"ABC STORE\" style=\"text-align: center; font-weight: bold; font-size: 22px; border: none; width: 100%; background: transparent;\">\n            <input type=\"text\" value=\"Address | Mobile | GST\" style=\"text-align: center; font-size: 14px; border: none; width: 100%; background: transparent;\">\n        <\/div>\n\n        <div id=\"invoice-meta-section\" style=\"margin: 20px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;\">\n            <div>Bill No: <input type=\"text\" style=\"border: none; border-bottom: 1px dashed #333; background: transparent; width: 50%;\"><\/div>\n            <div>Date: <input type=\"text\" style=\"border: none; border-bottom: 1px dashed #333; background: transparent; width: 60%;\"><\/div>\n            <div>Customer: <input type=\"text\" style=\"border: none; border-bottom: 1px dashed #333; background: transparent; width: 70%;\"><\/div>\n            <div>Address: <input type=\"text\" style=\"border: none; border-bottom: 1px dashed #333; background: transparent; width: 70%;\"><\/div>\n        <\/div>\n\n        <div style=\"overflow-x: auto;\">\n            <table id=\"invoice-items-table\" style=\"width: 100%; min-width: 500px; border-collapse: collapse; margin-top: 10px;\">\n                <thead>\n                    <tr>\n                        <th style=\"border: 1px solid #333; padding: 8px; width: 8%;\">S.No<\/th>\n                        <th style=\"border: 1px solid #333; padding: 8px; width: 52%;\">Product Description<\/th>\n                        <th style=\"border: 1px solid #333; padding: 8px; width: 10%;\">Qty<\/th>\n                        <th style=\"border: 1px solid #333; padding: 8px; width: 15%;\">Rate<\/th>\n                        <th style=\"border: 1px solid #333; padding: 8px; width: 15%;\">Amount<\/th>\n                    <\/tr>\n                <\/thead>\n                <tbody id=\"invoice-items-body\"><\/tbody>\n            <\/table>\n            <button type=\"button\" id=\"add-row-action-btn\" style=\"margin-top: 10px; padding: 5px 15px; cursor: pointer;\">+ Add Row<\/button>\n        <\/div>\n\n        <div style=\"margin-top: 20px;\">\n            <div style=\"text-align: right; font-weight: bold;\">Grand Total: <input type=\"text\" id=\"grand-total-display\" readonly style=\"border: none; border-bottom: 1px solid #333; background: transparent; width: 150px; font-weight: bold; text-align: right;\"><\/div>\n            <div style=\"margin-top: 10px;\">Amount in Words: <input type=\"text\" style=\"border: none; border-bottom: 1px dashed #333; background: transparent; width: 80%;\"><\/div>\n            <div style=\"margin-top: 50px; font-weight: bold; display: flex; justify-content: flex-end;\">\n                <span>Authorized Signature<\/span>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n    @media (max-width: 600px) {\n        #invoice-meta-section { grid-template-columns: 1fr !important; }\n    }\n    @media print {\n        body * { visibility: hidden; }\n        #wp-invoice-container, #wp-invoice-container * { visibility: visible; }\n        #wp-invoice-container { position: absolute; left: 0; top: 0; width: 100%; border: none !important; margin: 0; padding: 0; }\n        #wp-invoice-controls, #add-row-action-btn { display: none !important; }\n        @page { size: A4 portrait; margin: 1cm; }\n    }\n<\/style>\n\n<script>\n    document.addEventListener(\"DOMContentLoaded\", function() {\n        const sheet = document.getElementById(\"invoice-sheet-main\");\n        const bgSelector = document.getElementById(\"bg-selector-input\");\n        const titleSelector = document.getElementById(\"title-selector-input\");\n        const titleDisplay = document.getElementById(\"title-display-area\");\n        const printBtn = document.getElementById(\"print-action-btn\");\n        const resetBtn = document.getElementById(\"reset-action-btn\");\n        const addRowBtn = document.getElementById(\"add-row-action-btn\");\n        const tbody = document.getElementById(\"invoice-items-body\");\n        const grandTotal = document.getElementById(\"grand-total-display\");\n\n        bgSelector.addEventListener(\"change\", function(e) {\n            sheet.style.backgroundColor = e.target.value;\n        });\n\n        titleSelector.addEventListener(\"change\", function(e) {\n            titleDisplay.innerText = e.target.value === \"None\" ? \"\" : e.target.value;\n        });\n\n        printBtn.addEventListener(\"click\", function() {\n            window.print();\n        });\n\n        resetBtn.addEventListener(\"click\", function() {\n            window.location.reload();\n        });\n\n        function updateCalculations() {\n            let total = 0;\n            const rows = tbody.querySelectorAll(\"tr\");\n            rows.forEach(function(row) {\n                const qty = parseFloat(row.querySelector(\".qty-input\").value) || 0;\n                const rate = parseFloat(row.querySelector(\".rate-input\").value) || 0;\n                const amount = qty * rate;\n                row.querySelector(\".amount-input\").value = amount.toFixed(2);\n                total += amount;\n            });\n            grandTotal.value = total.toFixed(2);\n        }\n\n        function createRow() {\n            const rowNumber = tbody.rows.length + 1;\n            const row = document.createElement(\"tr\");\n            row.innerHTML = '<td style=\"border: 1px solid #333; padding: 8px; text-align: center;\">' + rowNumber + '<\/td>' +\n                            '<td style=\"border: 1px solid #333; padding: 8px;\"><input type=\"text\" style=\"width:100%; border:none; background:transparent;\"><\/td>' +\n                            '<td style=\"border: 1px solid #333; padding: 8px;\"><input type=\"number\" class=\"qty-input\" style=\"width:100%; border:none; background:transparent;\"><\/td>' +\n                            '<td style=\"border: 1px solid #333; padding: 8px;\"><input type=\"number\" class=\"rate-input\" style=\"width:100%; border:none; background:transparent;\"><\/td>' +\n                            '<td style=\"border: 1px solid #333; padding: 8px;\"><input type=\"text\" class=\"amount-input\" readonly style=\"width:100%; border:none; background:transparent;\"><\/td>';\n            \n            row.querySelector(\".qty-input\").addEventListener(\"input\", updateCalculations);\n            row.querySelector(\".rate-input\").addEventListener(\"input\", updateCalculations);\n            tbody.appendChild(row);\n        }\n\n        addRowBtn.addEventListener(\"click\", createRow);\n\n        for (let i = 0; i < 8; i++) {\n            createRow();\n        }\n    });\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>WhiteCreamLight YellowLight BlueLight GreenPinkGrey NoneInvoiceBillCash MemoTax InvoiceEstimateReceipt Print \/ PDF Reset INVOICE Bill No: Date: Customer: Address: S.No Product Description Qty Rate Amount + Add Row Grand Total: Amount in Words: Authorized Signature<\/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-373","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/373","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=373"}],"version-history":[{"count":1,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/373\/revisions"}],"predecessor-version":[{"id":375,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/373\/revisions\/375"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}