{"id":296,"date":"2026-07-10T14:51:11","date_gmt":"2026-07-10T14:51:11","guid":{"rendered":"https:\/\/freewebtools.co.in\/?page_id=296"},"modified":"2026-07-16T13:10:40","modified_gmt":"2026-07-16T13:10:40","slug":"296-2","status":"publish","type":"page","link":"https:\/\/freewebtools.co.in\/index.php\/296-2\/","title":{"rendered":"Advance Bill Generate"},"content":{"rendered":"\n<div id=\"wp-invoice-tool-wrapper\" 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    \n    <div class=\"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=\"theme-selector\">\n            <option value=\"theme-classic\">Theme 1: Classic<\/option>\n            <option value=\"theme-modern\">Theme 2: Modern<\/option>\n            <option value=\"theme-computer\">Theme 3: Computer Shop<\/option>\n            <option value=\"theme-hardware\">Theme 4: Hardware<\/option>\n            <option value=\"theme-medical\">Theme 5: Medical<\/option>\n            <option value=\"theme-grocery\">Theme 6: Grocery<\/option>\n            <option value=\"theme-electronics\">Theme 7: Electronics<\/option>\n            <option value=\"theme-fashion\">Theme 8: Fashion<\/option>\n            <option value=\"theme-restaurant\">Theme 9: Restaurant<\/option>\n            <option value=\"theme-gst\">Theme 10: GST Tax<\/option>\n        <\/select>\n        <select id=\"bg-selector\">\n            <option value=\"#ffffff\">White<\/option>\n            <option value=\"#fffdd0\">Cream<\/option>\n            <option value=\"#f5f5f5\">Grey<\/option>\n        <\/select>\n        <select id=\"title-selector\">\n            <option value=\"INVOICE\" selected>Invoice<\/option>\n            <option value=\"BILL\">Bill<\/option>\n            <option value=\"TAX INVOICE\">Tax Invoice<\/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\" class=\"theme-classic\" style=\"padding: 20px; min-height: 800px;\">\n        <div id=\"invoice-header\" style=\"text-align: center; margin-bottom: 15px;\">\n            <h1 id=\"title-display-area\" style=\"margin: 0; 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        <table id=\"invoice-items-table\" style=\"width: 100%; border-collapse: collapse; margin-top: 10px;\">\n            <thead>\n                <tr id=\"table-head-row\">\n                    <th style=\"border: 1px solid #333; padding: 8px;\">S.No<\/th>\n                    <th style=\"border: 1px solid #333; padding: 8px;\">Product Description<\/th>\n                    <th style=\"border: 1px solid #333; padding: 8px;\">Qty<\/th>\n                    <th style=\"border: 1px solid #333; padding: 8px;\">Rate<\/th>\n                    <th style=\"border: 1px solid #333; padding: 8px;\">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\n        <div id=\"footer-section\" 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; text-align: right;\"><\/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    \/* Theme Definitions *\/\n    .theme-classic { border: 1px solid #333; }\n    .theme-modern { font-family: sans-serif !important; border: 2px solid #000; }\n    .theme-computer { background: #f0f8ff !important; border-top: 5px solid #2196F3; }\n    .theme-hardware { border: 3px double #795548; }\n    .theme-medical { border: 2px solid #e91e63; }\n    .theme-grocery { border: 2px solid #4caf50; }\n    .theme-electronics { border: 2px solid #607d8b; }\n    .theme-fashion { border: 2px solid #9c27b0; }\n    .theme-restaurant { border: 2px solid #ff9800; }\n    .theme-gst { border: 2px solid #3f51b5; }\n\n    @media print {\n        body * { visibility: hidden; }\n        #wp-invoice-tool-wrapper, #wp-invoice-tool-wrapper * { visibility: visible; }\n        #wp-invoice-tool-wrapper { 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    }\n<\/style>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    const sheet = document.getElementById(\"invoice-sheet-main\");\n    const themeSelector = document.getElementById(\"theme-selector\");\n    const bgSelector = document.getElementById(\"bg-selector\");\n    const titleSelector = document.getElementById(\"title-selector\");\n    const titleDisplay = document.getElementById(\"title-display-area\");\n    const tbody = document.getElementById(\"invoice-items-body\");\n    const grandTotal = document.getElementById(\"grand-total-display\");\n\n    themeSelector.addEventListener(\"change\", function(e) {\n        sheet.className = e.target.value;\n    });\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;\n    });\n\n    document.getElementById(\"print-action-btn\").addEventListener(\"click\", () => window.print());\n    document.getElementById(\"reset-action-btn\").addEventListener(\"click\", () => window.location.reload());\n\n    function updateCalculations() {\n        let total = 0;\n        tbody.querySelectorAll(\"tr\").forEach(row => {\n            const qty = parseFloat(row.querySelector(\".qty-input\").value) || 0;\n            const rate = parseFloat(row.querySelector(\".rate-input\").value) || 0;\n            const amt = qty * rate;\n            row.querySelector(\".amount-input\").value = amt.toFixed(2);\n            total += amt;\n        });\n        grandTotal.value = total.toFixed(2);\n    }\n\n    function createRow() {\n        const row = document.createElement(\"tr\");\n        row.innerHTML = `<td style=\"border: 1px solid #333; padding: 8px; text-align: center;\">${tbody.rows.length + 1}<\/td>\n                        <td style=\"border: 1px solid #333; padding: 8px;\"><input type=\"text\" style=\"width:100%; border:none;\"><\/td>\n                        <td style=\"border: 1px solid #333; padding: 8px;\"><input type=\"number\" class=\"qty-input\" style=\"width:100%; border:none;\"><\/td>\n                        <td style=\"border: 1px solid #333; padding: 8px;\"><input type=\"number\" class=\"rate-input\" style=\"width:100%; border:none;\"><\/td>\n                        <td style=\"border: 1px solid #333; padding: 8px;\"><input type=\"text\" class=\"amount-input\" readonly style=\"width:100%; border:none;\"><\/td>`;\n        row.querySelectorAll(\"input\").forEach(i => i.addEventListener(\"input\", updateCalculations));\n        tbody.appendChild(row);\n    }\n\n    document.getElementById(\"add-row-action-btn\").addEventListener(\"click\", createRow);\n    for (let i = 0; i < 8; i++) createRow();\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Theme 1: ClassicTheme 2: ModernTheme 3: Computer ShopTheme 4: HardwareTheme 5: MedicalTheme 6: GroceryTheme 7: ElectronicsTheme 8: FashionTheme 9: RestaurantTheme 10: GST Tax WhiteCreamGrey InvoiceBillTax Invoice Print \/ PDF Reset INVOICE Bill No: Date: Customer: Address: S.No Product Description Qty Rate Amount + Add Row Grand Total: 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-296","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/296","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=296"}],"version-history":[{"count":23,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/296\/revisions"}],"predecessor-version":[{"id":377,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/296\/revisions\/377"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}