Bill & Invoice Generator<\/title>\n <style>\n :root {\n --primary-color: #007bff;\n --primary-hover: #0056b3;\n --danger-color: #dc3545;\n --danger-hover: #bd2130;\n --success-color: #28a745;\n --bg-color: #f8f9fa;\n --card-bg: #ffffff;\n --text-color: #333333;\n --border-color: #ced4da;\n --border-radius: 6px;\n }\n\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n }\n\n body {\n background-color: var(--bg-color);\n color: var(--text-color);\n padding: 20px;\n line-height: 1.5;\n }\n\n \/* Control \/ Action Bar *\/\n .control-bar {\n max-width: 900px;\n margin: 0 auto 20px auto;\n background: var(--card-bg);\n padding: 15px 20px;\n border-radius: var(--border-radius);\n box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n display: flex;\n flex-wrap: wrap;\n gap: 15px;\n align-items: center;\n justify-content: space-between;\n }\n\n .control-group {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .control-group label {\n font-weight: 600;\n font-size: 14px;\n }\n\n \/* Invoice Container *\/\n .invoice-container {\n max-width: 900px;\n margin: 0 auto;\n background: var(--card-bg);\n padding: 40px;\n border-radius: var(--border-radius);\n box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n }\n\n \/* Buttons & Inputs *\/\n button {\n background-color: var(--primary-color);\n color: white;\n border: none;\n padding: 8px 16px;\n border-radius: var(--border-radius);\n cursor: pointer;\n font-weight: 600;\n font-size: 14px;\n transition: background-color 0.2s;\n }\n\n button:hover {\n background-color: var(--primary-hover);\n }\n\n button.btn-danger {\n background-color: var(--danger-color);\n }\n\n button.btn-danger:hover {\n background-color: var(--danger-hover);\n }\n\n button.btn-success {\n background-color: var(--success-color);\n }\n\n button.btn-success:hover {\n background-color: #218838;\n }\n\n input, select, textarea {\n width: 100%;\n padding: 8px 10px;\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius);\n font-size: 14px;\n color: var(--text-color);\n background: #fff;\n }\n\n input:focus, select:focus, textarea:focus {\n outline: none;\n border-color: var(--primary-color);\n box-shadow: 0 0 0 3px rgba(0,123,255,0.15);\n }\n\n input.invalid {\n border-color: var(--danger-color) !important;\n background-color: #fff8f8;\n }\n\n \/* Header Layout *\/\n .invoice-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 30px;\n gap: 20px;\n }\n\n .company-info {\n flex: 1;\n }\n\n .logo-container {\n margin-bottom: 10px;\n max-width: 180px;\n }\n\n .logo-container img {\n max-width: 100%;\n max-height: 80px;\n display: block;\n }\n\n .company-inputs input, .company-inputs textarea {\n margin-bottom: 8px;\n border: 1px dashed var(--border-color);\n background: transparent;\n }\n .company-inputs input:hover, .company-inputs textarea:hover,\n .company-inputs input:focus, .company-inputs textarea:focus {\n border-style: solid;\n background: #fff;\n }\n\n .invoice-meta {\n text-align: right;\n flex: 1;\n max-width: 320px;\n }\n\n .invoice-meta h1 {\n font-size: 28px;\n color: var(--primary-color);\n margin-bottom: 10px;\n }\n\n .meta-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n gap: 10px;\n }\n\n .meta-row label {\n font-weight: 600;\n font-size: 13px;\n white-space: nowrap;\n }\n\n \/* Customer Section *\/\n .customer-section {\n background: #fdfdfe;\n border: 1px solid #eaeaea;\n padding: 20px;\n border-radius: var(--border-radius);\n margin-bottom: 30px;\n }\n\n .customer-section h3 {\n font-size: 16px;\n margin-bottom: 12px;\n color: #555;\n }\n\n .customer-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 15px;\n }\n\n @media (max-width: 600px) {\n .customer-grid, .invoice-header {\n flex-direction: column;\n grid-template-columns: 1fr;\n }\n .invoice-meta {\n text-align: left;\n max-width: 100%;\n }\n }\n\n .form-group {\n margin-bottom: 10px;\n }\n\n .form-group label {\n display: block;\n font-size: 12px;\n font-weight: 600;\n margin-bottom: 4px;\n color: #666;\n }\n\n \/* Line Items Table *\/\n .table-responsive {\n overflow-x: auto;\n margin-bottom: 20px;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n text-align: left;\n }\n\n th, td {\n padding: 10px 12px;\n border-bottom: 1px solid #eaeaea;\n font-size: 14px;\n }\n\n th {\n background-color: #f1f3f5;\n font-weight: 600;\n color: #495057;\n }\n\n td input {\n padding: 6px 8px;\n }\n\n .text-right {\n text-align: right;\n }\n\n .text-center {\n text-align: center;\n }\n\n \/* Summary Section *\/\n .invoice-summary {\n display: flex;\n justify-content: flex-end;\n margin-top: 20px;\n }\n\n .summary-box {\n width: 320px;\n }\n\n .summary-row {\n display: flex;\n justify-content: space-between;\n padding: 8px 0;\n font-size: 14px;\n border-bottom: 1px solid #eaeaea;\n }\n\n .summary-row.total {\n font-size: 18px;\n font-weight: bold;\n color: var(--primary-color);\n border-bottom: 2px solid var(--primary-color);\n border-top: 1px solid var(--border-color);\n margin-top: 5px;\n padding-top: 10px;\n }\n\n .summary-row input {\n width: 100px;\n text-align: right;\n padding: 4px 8px;\n }\n\n \/* Notification Toast *\/\n #toast {\n position: fixed;\n bottom: 20px;\n right: 20px;\n background: #333;\n color: #fff;\n padding: 10px 20px;\n border-radius: var(--border-radius);\n font-size: 14px;\n opacity: 0;\n transition: opacity 0.3s ease;\n pointer-events: none;\n z-index: 1000;\n }\n #toast.show {\n opacity: 1;\n }\n\n \/* Print Styles *\/\n @media print {\n body {\n background: white;\n padding: 0;\n }\n .no-print {\n display: none !important;\n }\n .invoice-container {\n box-shadow: none;\n padding: 0;\n max-width: 100%;\n }\n input, textarea, select {\n border: none !important;\n background: transparent !important;\n box-shadow: none !important;\n padding: 0 !important;\n resize: none;\n }\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n button, .fa, .delete-row-btn {\n display: none !important;\n }\n table th {\n background-color: #f1f3f5 !important;\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n \n <div class=\"control-bar no-print\">\n <div class=\"control-group\">\n <label for=\"currency-select\">Currency:<\/label>\n <select id=\"currency-select\" onchange=\"updateCurrency()\">\n <option value=\"$\">USD ($)<\/option>\n <option value=\"\u20ac\">EUR (\u20ac)<\/option>\n <option value=\"\u00a3\">GBP (\u00a3)<\/option>\n <option value=\"\u20b9\">INR (\u20b9)<\/option>\n <option value=\"\u00a5\">JPY (\u00a5)<\/option>\n <option value=\"A$\">AUD (A$)<\/option>\n <option value=\"C$\">CAD (C$)<\/option>\n <\/select>\n <\/div>\n\n <div class=\"control-group\">\n <label for=\"saved-invoices-select\">Load:<\/label>\n <select id=\"saved-invoices-select\" style=\"width: 150px;\">\n <option value=\"\">— Select Saved —<\/option>\n <\/select>\n <button onclick=\"loadSelectedInvoice()\">Load<\/button>\n <button onclick=\"deleteSelectedInvoice()\" class=\"btn-danger\">Delete<\/button>\n <\/div>\n\n <div class=\"control-group\">\n <button onclick=\"saveInvoice()\" class=\"btn-success\">Save Invoice<\/button>\n <button onclick=\"newInvoice()\">New<\/button>\n <button onclick=\"window.print()\">Print \/ PDF<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"invoice-container\">\n \n \n <div class=\"invoice-header\">\n <div class=\"company-info\">\n <div class=\"logo-container\">\n <img decoding=\"async\" id=\"company-logo-display\" src=\"\" alt=\"\" style=\"display: none;\">\n <input type=\"file\" id=\"company-logo-input\" accept=\"image\/*\" class=\"no-print\" onchange=\"handleLogoUpload(event)\" style=\"font-size: 11px; padding: 2px;\">\n <\/div>\n <div class=\"company-inputs\">\n <input type=\"text\" id=\"comp-name\" placeholder=\"Your Company Name\" oninput=\"saveCompanyInfo()\">\n <textarea id=\"comp-address\" rows=\"3\" placeholder=\"Company Address, City, Country\" oninput=\"saveCompanyInfo()\"><\/textarea>\n <input type=\"email\" id=\"comp-email\" placeholder=\"company@example.com\" oninput=\"saveCompanyInfo()\">\n <input type=\"text\" id=\"comp-phone\" placeholder=\"+1 (555) 000-0000\" oninput=\"saveCompanyInfo()\">\n <\/div>\n <\/div>\n\n <div class=\"invoice-meta\">\n <h1>INVOICE<\/h1>\n <div class=\"meta-row\">\n <label>Invoice #:<\/label>\n <input type=\"text\" id=\"inv-number\" value=\"INV-1001\" style=\"text-align: right;\">\n <\/div>\n <div class=\"meta-row\">\n <label>Date:<\/label>\n <input type=\"date\" id=\"inv-date\" style=\"text-align: right;\">\n <\/div>\n <div class=\"meta-row\">\n <label>Due Date:<\/label>\n <input type=\"date\" id=\"inv-due-date\" style=\"text-align: right;\">\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"customer-section\">\n <h3>Bill To:<\/h3>\n <div class=\"customer-grid\">\n <div>\n <div class=\"form-group\">\n <label>Client \/ Customer Name<\/label>\n <input type=\"text\" id=\"cust-name\" placeholder=\"Client Company or Name\">\n <\/div>\n <div class=\"form-group\">\n <label>Email Address<\/label>\n <input type=\"email\" id=\"cust-email\" placeholder=\"client@example.com\">\n <\/div>\n <\/div>\n <div>\n <div class=\"form-group\">\n <label>Phone Number<\/label>\n <input type=\"text\" id=\"cust-phone\" placeholder=\"+1 (555) 000-0000\">\n <\/div>\n <div class=\"form-group\">\n <label>Billing Address<\/label>\n <input type=\"text\" id=\"cust-address\" placeholder=\"Street, City, State, Zip\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"table-responsive\">\n <table id=\"items-table\">\n <thead>\n <tr>\n <th style=\"width: 45%;\">Description<\/th>\n <th style=\"width: 15%;\" class=\"text-center\">Quantity<\/th>\n <th style=\"width: 15%;\" class=\"text-right\">Rate<\/th>\n <th style=\"width: 20%;\" class=\"text-right\">Amount<\/th>\n <th style=\"width: 5%;\" class=\"no-print\"><\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"items-tbody\">\n \n <\/tbody>\n <\/table>\n <\/div>\n\n <div class=\"no-print\" style=\"margin-bottom: 30px;\">\n <button onclick=\"addItemRow()\">+ Add Line Item<\/button>\n <\/div>\n\n \n <div class=\"invoice-summary\">\n <div class=\"summary-box\">\n <div class=\"summary-row\">\n <span>Subtotal<\/span>\n <span id=\"subtotal-display\">$0.00<\/span>\n <\/div>\n <div class=\"summary-row\">\n <span>Discount (Flat)<\/span>\n <span><input type=\"number\" id=\"discount-input\" value=\"0.00\" min=\"0\" step=\"0.01\" oninput=\"calculateTotals()\"><\/span>\n <\/div>\n <div class=\"summary-row\">\n <span>Tax (%)<\/span>\n <span><input type=\"number\" id=\"tax-rate-input\" value=\"10\" min=\"0\" max=\"100\" step=\"0.1\" oninput=\"calculateTotals()\"><\/span>\n <\/div>\n <div class=\"summary-row total\">\n <span>Total<\/span>\n <span id=\"total-display\">$0.00<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div id=\"toast\"><\/div>\n\n <script>\n \/\/ Global Currency Configuration\n let currentCurrency = \"$\";\n\n \/\/ Initialize App on Load\n window.addEventListener(\"DOMContentLoaded\", () => {\n setDefaultDates();\n loadCompanyInfo();\n populateSavedInvoicesDropdown();\n \n \/\/ Add initial row if table is empty\n if (document.getElementById(\"items-tbody\").rows.length === 0) {\n addItemRow(\"Web Design & Development Services\", 1, 1500.00);\n addItemRow(\"Hosting & Domain Setup (1 Year)\", 1, 150.00);\n }\n calculateTotals();\n });\n\n \/\/ Set default dates (Today and Due in 30 days)\n function setDefaultDates() {\n const today = new Date().toISOString().split('T')[0];\n const dueDate = new Date();\n dueDate.setDate(dueDate.getDate() + 30);\n const dueDateString = dueDate.toISOString().split('T')[0];\n\n document.getElementById(\"inv-date\").value = today;\n document.getElementById(\"inv-due-date\").value = dueDateString;\n }\n\n \/\/ --- Company Info & LocalStorage ---\n function saveCompanyInfo() {\n const company = {\n name: document.getElementById(\"comp-name\").value,\n address: document.getElementById(\"comp-address\").value,\n email: document.getElementById(\"comp-email\").value,\n phone: document.getElementById(\"comp-phone\").value,\n logo: document.getElementById(\"company-logo-display\").src || \"\"\n };\n localStorage.setItem(\"bill_gen_company\", JSON.stringify(company));\n }\n\n function loadCompanyInfo() {\n const saved = localStorage.getItem(\"bill_gen_company\");\n if (saved) {\n try {\n const company = JSON.parse(saved);\n document.getElementById(\"comp-name\").value = company.name || \"\";\n document.getElementById(\"comp-address\").value = company.address || \"\";\n document.getElementById(\"comp-email\").value = company.email || \"\";\n document.getElementById(\"comp-phone\").value = company.phone || \"\";\n \n if (company.logo) {\n const img = document.getElementById(\"company-logo-display\");\n img.src = company.logo;\n img.style.display = \"block\";\n }\n } catch(e) {\n console.error(\"Error loading company info\", e);\n }\n }\n \n const savedCurrency = localStorage.getItem(\"bill_gen_currency\");\n if(savedCurrency) {\n currentCurrency = savedCurrency;\n document.getElementById(\"currency-select\").value = savedCurrency;\n }\n }\n\n \/\/ --- Logo Handling ---\n function handleLogoUpload(event) {\n const file = event.target.files[0];\n if (file) {\n const reader = new FileReader();\n reader.onload = function(e) {\n const base64String = e.target.result;\n const img = document.getElementById(\"company-logo-display\");\n img.src = base64String;\n img.style.display = \"block\";\n saveCompanyInfo();\n };\n reader.readAsDataURL(file);\n }\n }\n\n \/\/ --- Currency Handling ---\n function updateCurrency() {\n currentCurrency = document.getElementById(\"currency-select\").value;\n localStorage.setItem(\"bill_gen_currency\", currentCurrency);\n calculateTotals();\n }\n\n \/\/ --- Line Items Management ---\n function addItemRow(desc = \"\", qty = 1, rate = 0) {\n const tbody = document.getElementById(\"items-tbody\");\n const row = document.createElement(\"tr\");\n\n row.innerHTML = `\n <td><input type=\"text\" class=\"item-desc\" value=\"${escapeHtml(desc)}\" placeholder=\"Item description or service\"><\/td>\n <td class=\"text-center\"><input type=\"number\" class=\"item-qty\" value=\"${qty}\" min=\"0.01\" step=\"any\" oninput=\"validateAndCalculate(this)\"><\/td>\n <td class=\"text-right\"><input type=\"number\" class=\"item-rate\" value=\"${rate.toFixed(2)}\" min=\"0\" step=\"any\" oninput=\"validateAndCalculate(this)\"><\/td>\n <td class=\"text-right item-amount\">${currentCurrency}${(qty * rate).toFixed(2)}<\/td>\n <td class=\"text-center no-print\">\n <button type=\"button\" class=\"btn-danger\" style=\"padding: 4px 8px; font-size: 12px;\" onclick=\"deleteItemRow(this)\">X<\/button>\n <\/td>\n `;\n tbody.appendChild(row);\n calculateTotals();\n }\n\n function deleteItemRow(btn) {\n const row = btn.closest(\"tr\");\n const tbody = document.getElementById(\"items-tbody\");\n if (tbody.rows.length > 1) {\n row.remove();\n calculateTotals();\n } else {\n showToast(\"Invoice must contain at least one line item.\");\n }\n }\n\n function validateAndCalculate(input) {\n const val = parseFloat(input.value);\n if (isNaN(val) || val < 0) {\n input.classList.add(\"invalid\");\n } else {\n input.classList.remove(\"invalid\");\n }\n calculateTotals();\n }\n\n \/\/ --- Calculations ---\n function calculateTotals() {\n const rows = document.querySelectorAll(\"#items-tbody tr\");\n let subtotal = 0;\n\n rows.forEach(row => {\n const qtyInput = row.querySelector(\".item-qty\");\n const rateInput = row.querySelector(\".item-rate\");\n const amountDisplay = row.querySelector(\".item-amount\");\n\n const qty = parseFloat(qtyInput.value) || 0;\n const rate = parseFloat(rateInput.value) || 0;\n const amount = qty * rate;\n\n amountDisplay.textContent = currentCurrency + amount.toFixed(2);\n subtotal += amount;\n });\n\n \/\/ Discount & Tax\n const discountInput = document.getElementById(\"discount-input\");\n const taxRateInput = document.getElementById(\"tax-rate-input\");\n\n let discount = parseFloat(discountInput.value) || 0;\n let taxRate = parseFloat(taxRateInput.value) || 0;\n\n if (discount < 0) discount = 0;\n if (taxRate < 0) taxRate = 0;\n\n let taxableAmount = subtotal - discount;\n if (taxableAmount < 0) taxableAmount = 0;\n\n let taxAmount = taxableAmount * (taxRate \/ 100);\n let total = taxableAmount + taxAmount;\n\n \/\/ Render summaries\n document.getElementById(\"subtotal-display\").textContent = currentCurrency + subtotal.toFixed(2);\n document.getElementById(\"total-display\").textContent = currentCurrency + total.toFixed(2);\n }\n\n \/\/ --- Save, Load, & Delete Invoices (LocalStorage) ---\n function getSavedInvoices() {\n const data = localStorage.getItem(\"bill_gen_invoices\");\n return data ? JSON.parse(data) : {};\n }\n\n function saveInvoice() {\n const invNumber = document.getElementById(\"inv-number\").value.trim();\n if (!invNumber) {\n showToast(\"Please provide an invoice number.\");\n return;\n }\n\n \/\/ Gather Line items\n const items = [];\n const rows = document.querySelectorAll(\"#items-tbody tr\");\n rows.forEach(row => {\n items.push({\n description: row.querySelector(\".item-desc\").value,\n qty: parseFloat(row.querySelector(\".item-qty\").value) || 0,\n rate: parseFloat(row.querySelector(\".item-rate\").value) || 0\n });\n });\n\n const invoiceData = {\n invoiceNumber: invNumber,\n date: document.getElementById(\"inv-date\").value,\n dueDate: document.getElementById(\"inv-due-date\").value,\n currency: currentCurrency,\n customer: {\n name: document.getElementById(\"cust-name\").value,\n email: document.getElementById(\"cust-email\").value,\n phone: document.getElementById(\"cust-phone\").value,\n address: document.getElementById(\"cust-address\").value\n },\n discount: document.getElementById(\"discount-input\").value,\n taxRate: document.getElementById(\"tax-rate-input\").value,\n items: items\n };\n\n const invoices = getSavedInvoices();\n invoices[invNumber] = invoiceData;\n localStorage.setItem(\"bill_gen_invoices\", JSON.stringify(invoices));\n\n populateSavedInvoicesDropdown();\n showToast(`Invoice \"${invNumber}\" saved successfully!`);\n }\n\n function populateSavedInvoicesDropdown() {\n const select = document.getElementById(\"saved-invoices-select\");\n const invoices = getSavedInvoices();\n \n select.innerHTML = '<option value=\"\">-- Select Saved --<\/option>';\n\n Object.keys(invoices).forEach(invNum => {\n const opt = document.createElement(\"option\");\n opt.value = invNum;\n opt.textContent = invNum;\n select.appendChild(opt);\n });\n }\n\n function loadSelectedInvoice() {\n const select = document.getElementById(\"saved-invoices-select\");\n const invNum = select.value;\n if (!invNum) {\n showToast(\"Please select an invoice to load.\");\n return;\n }\n\n const invoices = getSavedInvoices();\n const inv = invoices[invNum];\n if (!inv) {\n showToast(\"Invoice not found.\");\n return;\n }\n\n document.getElementById(\"inv-number\").value = inv.invoiceNumber || \"\";\n document.getElementById(\"inv-date\").value = inv.date || \"\";\n document.getElementById(\"inv-due-date\").value = inv.dueDate || \"\";\n \n if (inv.currency) {\n currentCurrency = inv.currency;\n document.getElementById(\"currency-select\").value = inv.currency;\n }\n\n if (inv.customer) {\n document.getElementById(\"cust-name\").value = inv.customer.name || \"\";\n document.getElementById(\"cust-email\").value = inv.customer.email || \"\";\n document.getElementById(\"cust-phone\").value = inv.customer.phone || \"\";\n document.getElementById(\"cust-address\").value = inv.customer.address || \"\";\n }\n\n document.getElementById(\"discount-input\").value = inv.discount || \"0\";\n document.getElementById(\"tax-rate-input\").value = inv.taxRate || \"0\";\n\n const tbody = document.getElementById(\"items-tbody\");\n tbody.innerHTML = \"\";\n if (inv.items && inv.items.length > 0) {\n inv.items.forEach(item => {\n addItemRow(item.description, item.qty, item.rate);\n });\n } else {\n addItemRow();\n }\n\n calculateTotals();\n showToast(`Loaded invoice ${invNum}`);\n }\n\n function deleteSelectedInvoice() {\n const select = document.getElementById(\"saved-invoices-select\");\n const invNum = select.value;\n if (!invNum) {\n showToast(\"Please select an invoice to delete.\");\n return;\n }\n\n if (confirm(`Are you sure you want to delete invoice ${invNum}?`)) {\n const invoices = getSavedInvoices();\n delete invoices[invNum];\n localStorage.setItem(\"bill_gen_invoices\", JSON.stringify(invoices));\n populateSavedInvoicesDropdown();\n showToast(`Deleted invoice ${invNum}`);\n }\n }\n\n function newInvoice() {\n if (confirm(\"Clear current fields to create a new invoice?\")) {\n const invNumField = document.getElementById(\"inv-number\");\n const currentVal = invNumField.value;\n const match = currentVal.match(\/(\\D*)(\\d+)$\/);\n if (match) {\n const prefix = match[1];\n const num = parseInt(match[2], 10) + 1;\n invNumField.value = prefix + num;\n } else {\n invNumField.value = \"INV-\" + Math.floor(1000 + Math.random() * 9000);\n }\n\n setDefaultDates();\n \n document.getElementById(\"cust-name\").value = \"\";\n document.getElementById(\"cust-email\").value = \"\";\n document.getElementById(\"cust-phone\").value = \"\";\n document.getElementById(\"cust-address\").value = \"\";\n\n document.getElementById(\"discount-input\").value = \"0.00\";\n document.getElementById(\"tax-rate-input\").value = \"10\";\n\n const tbody = document.getElementById(\"items-tbody\");\n tbody.innerHTML = \"\";\n addItemRow(\"Standard Service \/ Item\", 1, 100.00);\n calculateTotals();\n showToast(\"Started a new invoice.\");\n }\n }\n\n function showToast(message) {\n const toast = document.getElementById(\"toast\");\n toast.textContent = message;\n toast.classList.add(\"show\");\n setTimeout(() => {\n toast.classList.remove(\"show\");\n }, 3000);\n }\n\n function escapeHtml(str) {\n return str.replace(\/&\/g, \"&\")\n .replace(\/<\/g, \"<\")\n .replace(\/>\/g, \">\")\n .replace(\/\"\/g, \""\")\n .replace(\/'\/g, \"'\");\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Bill & Invoice Generator Currency: USD ($)EUR (\u20ac)GBP (\u00a3)INR (\u20b9)JPY (\u00a5)AUD (A$)CAD (C$) Load: — Select Saved — Load Delete Save Invoice New Print \/ PDF INVOICE Invoice #: Date: Due Date: Bill To: Client \/ Customer Name Email Address Phone Number Billing Address Description Quantity Rate Amount + Add Line Item Subtotal $0.00 Discount […]<\/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-549","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/549","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=549"}],"version-history":[{"count":2,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/549\/revisions"}],"predecessor-version":[{"id":756,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/549\/revisions\/756"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":549,"date":"2026-07-20T14:34:58","date_gmt":"2026-07-20T14:34:58","guid":{"rendered":"https:\/\/freewebtools.co.in\/?page_id=549"},"modified":"2026-07-28T16:29:12","modified_gmt":"2026-07-28T16:29:12","slug":"bill-generator","status":"publish","type":"page","link":"https:\/\/freewebtools.co.in\/index.php\/bill-generator\/","title":{"rendered":"Bill Generator"},"content":{"rendered":"\n\n\n\n \n \n Bill & Invoice Generator<\/title>\n <style>\n :root {\n --primary-color: #007bff;\n --primary-hover: #0056b3;\n --danger-color: #dc3545;\n --danger-hover: #bd2130;\n --success-color: #28a745;\n --bg-color: #f8f9fa;\n --card-bg: #ffffff;\n --text-color: #333333;\n --border-color: #ced4da;\n --border-radius: 6px;\n }\n\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n }\n\n body {\n background-color: var(--bg-color);\n color: var(--text-color);\n padding: 20px;\n line-height: 1.5;\n }\n\n \/* Control \/ Action Bar *\/\n .control-bar {\n max-width: 900px;\n margin: 0 auto 20px auto;\n background: var(--card-bg);\n padding: 15px 20px;\n border-radius: var(--border-radius);\n box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n display: flex;\n flex-wrap: wrap;\n gap: 15px;\n align-items: center;\n justify-content: space-between;\n }\n\n .control-group {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .control-group label {\n font-weight: 600;\n font-size: 14px;\n }\n\n \/* Invoice Container *\/\n .invoice-container {\n max-width: 900px;\n margin: 0 auto;\n background: var(--card-bg);\n padding: 40px;\n border-radius: var(--border-radius);\n box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n }\n\n \/* Buttons & Inputs *\/\n button {\n background-color: var(--primary-color);\n color: white;\n border: none;\n padding: 8px 16px;\n border-radius: var(--border-radius);\n cursor: pointer;\n font-weight: 600;\n font-size: 14px;\n transition: background-color 0.2s;\n }\n\n button:hover {\n background-color: var(--primary-hover);\n }\n\n button.btn-danger {\n background-color: var(--danger-color);\n }\n\n button.btn-danger:hover {\n background-color: var(--danger-hover);\n }\n\n button.btn-success {\n background-color: var(--success-color);\n }\n\n button.btn-success:hover {\n background-color: #218838;\n }\n\n input, select, textarea {\n width: 100%;\n padding: 8px 10px;\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius);\n font-size: 14px;\n color: var(--text-color);\n background: #fff;\n }\n\n input:focus, select:focus, textarea:focus {\n outline: none;\n border-color: var(--primary-color);\n box-shadow: 0 0 0 3px rgba(0,123,255,0.15);\n }\n\n input.invalid {\n border-color: var(--danger-color) !important;\n background-color: #fff8f8;\n }\n\n \/* Header Layout *\/\n .invoice-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 30px;\n gap: 20px;\n }\n\n .company-info {\n flex: 1;\n }\n\n .logo-container {\n margin-bottom: 10px;\n max-width: 180px;\n }\n\n .logo-container img {\n max-width: 100%;\n max-height: 80px;\n display: block;\n }\n\n .company-inputs input, .company-inputs textarea {\n margin-bottom: 8px;\n border: 1px dashed var(--border-color);\n background: transparent;\n }\n .company-inputs input:hover, .company-inputs textarea:hover,\n .company-inputs input:focus, .company-inputs textarea:focus {\n border-style: solid;\n background: #fff;\n }\n\n .invoice-meta {\n text-align: right;\n flex: 1;\n max-width: 320px;\n }\n\n .invoice-meta h1 {\n font-size: 28px;\n color: var(--primary-color);\n margin-bottom: 10px;\n }\n\n .meta-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n gap: 10px;\n }\n\n .meta-row label {\n font-weight: 600;\n font-size: 13px;\n white-space: nowrap;\n }\n\n \/* Customer Section *\/\n .customer-section {\n background: #fdfdfe;\n border: 1px solid #eaeaea;\n padding: 20px;\n border-radius: var(--border-radius);\n margin-bottom: 30px;\n }\n\n .customer-section h3 {\n font-size: 16px;\n margin-bottom: 12px;\n color: #555;\n }\n\n .customer-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 15px;\n }\n\n @media (max-width: 600px) {\n .customer-grid, .invoice-header {\n flex-direction: column;\n grid-template-columns: 1fr;\n }\n .invoice-meta {\n text-align: left;\n max-width: 100%;\n }\n }\n\n .form-group {\n margin-bottom: 10px;\n }\n\n .form-group label {\n display: block;\n font-size: 12px;\n font-weight: 600;\n margin-bottom: 4px;\n color: #666;\n }\n\n \/* Line Items Table *\/\n .table-responsive {\n overflow-x: auto;\n margin-bottom: 20px;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n text-align: left;\n }\n\n th, td {\n padding: 10px 12px;\n border-bottom: 1px solid #eaeaea;\n font-size: 14px;\n }\n\n th {\n background-color: #f1f3f5;\n font-weight: 600;\n color: #495057;\n }\n\n td input {\n padding: 6px 8px;\n }\n\n .text-right {\n text-align: right;\n }\n\n .text-center {\n text-align: center;\n }\n\n \/* Summary Section *\/\n .invoice-summary {\n display: flex;\n justify-content: flex-end;\n margin-top: 20px;\n }\n\n .summary-box {\n width: 320px;\n }\n\n .summary-row {\n display: flex;\n justify-content: space-between;\n padding: 8px 0;\n font-size: 14px;\n border-bottom: 1px solid #eaeaea;\n }\n\n .summary-row.total {\n font-size: 18px;\n font-weight: bold;\n color: var(--primary-color);\n border-bottom: 2px solid var(--primary-color);\n border-top: 1px solid var(--border-color);\n margin-top: 5px;\n padding-top: 10px;\n }\n\n .summary-row input {\n width: 100px;\n text-align: right;\n padding: 4px 8px;\n }\n\n \/* Notification Toast *\/\n #toast {\n position: fixed;\n bottom: 20px;\n right: 20px;\n background: #333;\n color: #fff;\n padding: 10px 20px;\n border-radius: var(--border-radius);\n font-size: 14px;\n opacity: 0;\n transition: opacity 0.3s ease;\n pointer-events: none;\n z-index: 1000;\n }\n #toast.show {\n opacity: 1;\n }\n\n \/* Print Styles *\/\n @media print {\n body {\n background: white;\n padding: 0;\n }\n .no-print {\n display: none !important;\n }\n .invoice-container {\n box-shadow: none;\n padding: 0;\n max-width: 100%;\n }\n input, textarea, select {\n border: none !important;\n background: transparent !important;\n box-shadow: none !important;\n padding: 0 !important;\n resize: none;\n }\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n button, .fa, .delete-row-btn {\n display: none !important;\n }\n table th {\n background-color: #f1f3f5 !important;\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n \n <div class=\"control-bar no-print\">\n <div class=\"control-group\">\n <label for=\"currency-select\">Currency:<\/label>\n <select id=\"currency-select\" onchange=\"updateCurrency()\">\n <option value=\"$\">USD ($)<\/option>\n <option value=\"\u20ac\">EUR (\u20ac)<\/option>\n <option value=\"\u00a3\">GBP (\u00a3)<\/option>\n <option value=\"\u20b9\">INR (\u20b9)<\/option>\n <option value=\"\u00a5\">JPY (\u00a5)<\/option>\n <option value=\"A$\">AUD (A$)<\/option>\n <option value=\"C$\">CAD (C$)<\/option>\n <\/select>\n <\/div>\n\n <div class=\"control-group\">\n <label for=\"saved-invoices-select\">Load:<\/label>\n <select id=\"saved-invoices-select\" style=\"width: 150px;\">\n <option value=\"\">— Select Saved —<\/option>\n <\/select>\n <button onclick=\"loadSelectedInvoice()\">Load<\/button>\n <button onclick=\"deleteSelectedInvoice()\" class=\"btn-danger\">Delete<\/button>\n <\/div>\n\n <div class=\"control-group\">\n <button onclick=\"saveInvoice()\" class=\"btn-success\">Save Invoice<\/button>\n <button onclick=\"newInvoice()\">New<\/button>\n <button onclick=\"window.print()\">Print \/ PDF<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"invoice-container\">\n \n \n <div class=\"invoice-header\">\n <div class=\"company-info\">\n <div class=\"logo-container\">\n <img decoding=\"async\" id=\"company-logo-display\" src=\"\" alt=\"\" style=\"display: none;\">\n <input type=\"file\" id=\"company-logo-input\" accept=\"image\/*\" class=\"no-print\" onchange=\"handleLogoUpload(event)\" style=\"font-size: 11px; padding: 2px;\">\n <\/div>\n <div class=\"company-inputs\">\n <input type=\"text\" id=\"comp-name\" placeholder=\"Your Company Name\" oninput=\"saveCompanyInfo()\">\n <textarea id=\"comp-address\" rows=\"3\" placeholder=\"Company Address, City, Country\" oninput=\"saveCompanyInfo()\"><\/textarea>\n <input type=\"email\" id=\"comp-email\" placeholder=\"company@example.com\" oninput=\"saveCompanyInfo()\">\n <input type=\"text\" id=\"comp-phone\" placeholder=\"+1 (555) 000-0000\" oninput=\"saveCompanyInfo()\">\n <\/div>\n <\/div>\n\n <div class=\"invoice-meta\">\n <h1>INVOICE<\/h1>\n <div class=\"meta-row\">\n <label>Invoice #:<\/label>\n <input type=\"text\" id=\"inv-number\" value=\"INV-1001\" style=\"text-align: right;\">\n <\/div>\n <div class=\"meta-row\">\n <label>Date:<\/label>\n <input type=\"date\" id=\"inv-date\" style=\"text-align: right;\">\n <\/div>\n <div class=\"meta-row\">\n <label>Due Date:<\/label>\n <input type=\"date\" id=\"inv-due-date\" style=\"text-align: right;\">\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"customer-section\">\n <h3>Bill To:<\/h3>\n <div class=\"customer-grid\">\n <div>\n <div class=\"form-group\">\n <label>Client \/ Customer Name<\/label>\n <input type=\"text\" id=\"cust-name\" placeholder=\"Client Company or Name\">\n <\/div>\n <div class=\"form-group\">\n <label>Email Address<\/label>\n <input type=\"email\" id=\"cust-email\" placeholder=\"client@example.com\">\n <\/div>\n <\/div>\n <div>\n <div class=\"form-group\">\n <label>Phone Number<\/label>\n <input type=\"text\" id=\"cust-phone\" placeholder=\"+1 (555) 000-0000\">\n <\/div>\n <div class=\"form-group\">\n <label>Billing Address<\/label>\n <input type=\"text\" id=\"cust-address\" placeholder=\"Street, City, State, Zip\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"table-responsive\">\n <table id=\"items-table\">\n <thead>\n <tr>\n <th style=\"width: 45%;\">Description<\/th>\n <th style=\"width: 15%;\" class=\"text-center\">Quantity<\/th>\n <th style=\"width: 15%;\" class=\"text-right\">Rate<\/th>\n <th style=\"width: 20%;\" class=\"text-right\">Amount<\/th>\n <th style=\"width: 5%;\" class=\"no-print\"><\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"items-tbody\">\n \n <\/tbody>\n <\/table>\n <\/div>\n\n <div class=\"no-print\" style=\"margin-bottom: 30px;\">\n <button onclick=\"addItemRow()\">+ Add Line Item<\/button>\n <\/div>\n\n \n <div class=\"invoice-summary\">\n <div class=\"summary-box\">\n <div class=\"summary-row\">\n <span>Subtotal<\/span>\n <span id=\"subtotal-display\">$0.00<\/span>\n <\/div>\n <div class=\"summary-row\">\n <span>Discount (Flat)<\/span>\n <span><input type=\"number\" id=\"discount-input\" value=\"0.00\" min=\"0\" step=\"0.01\" oninput=\"calculateTotals()\"><\/span>\n <\/div>\n <div class=\"summary-row\">\n <span>Tax (%)<\/span>\n <span><input type=\"number\" id=\"tax-rate-input\" value=\"10\" min=\"0\" max=\"100\" step=\"0.1\" oninput=\"calculateTotals()\"><\/span>\n <\/div>\n <div class=\"summary-row total\">\n <span>Total<\/span>\n <span id=\"total-display\">$0.00<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div id=\"toast\"><\/div>\n\n <script>\n \/\/ Global Currency Configuration\n let currentCurrency = \"$\";\n\n \/\/ Initialize App on Load\n window.addEventListener(\"DOMContentLoaded\", () => {\n setDefaultDates();\n loadCompanyInfo();\n populateSavedInvoicesDropdown();\n \n \/\/ Add initial row if table is empty\n if (document.getElementById(\"items-tbody\").rows.length === 0) {\n addItemRow(\"Web Design & Development Services\", 1, 1500.00);\n addItemRow(\"Hosting & Domain Setup (1 Year)\", 1, 150.00);\n }\n calculateTotals();\n });\n\n \/\/ Set default dates (Today and Due in 30 days)\n function setDefaultDates() {\n const today = new Date().toISOString().split('T')[0];\n const dueDate = new Date();\n dueDate.setDate(dueDate.getDate() + 30);\n const dueDateString = dueDate.toISOString().split('T')[0];\n\n document.getElementById(\"inv-date\").value = today;\n document.getElementById(\"inv-due-date\").value = dueDateString;\n }\n\n \/\/ --- Company Info & LocalStorage ---\n function saveCompanyInfo() {\n const company = {\n name: document.getElementById(\"comp-name\").value,\n address: document.getElementById(\"comp-address\").value,\n email: document.getElementById(\"comp-email\").value,\n phone: document.getElementById(\"comp-phone\").value,\n logo: document.getElementById(\"company-logo-display\").src || \"\"\n };\n localStorage.setItem(\"bill_gen_company\", JSON.stringify(company));\n }\n\n function loadCompanyInfo() {\n const saved = localStorage.getItem(\"bill_gen_company\");\n if (saved) {\n try {\n const company = JSON.parse(saved);\n document.getElementById(\"comp-name\").value = company.name || \"\";\n document.getElementById(\"comp-address\").value = company.address || \"\";\n document.getElementById(\"comp-email\").value = company.email || \"\";\n document.getElementById(\"comp-phone\").value = company.phone || \"\";\n \n if (company.logo) {\n const img = document.getElementById(\"company-logo-display\");\n img.src = company.logo;\n img.style.display = \"block\";\n }\n } catch(e) {\n console.error(\"Error loading company info\", e);\n }\n }\n \n const savedCurrency = localStorage.getItem(\"bill_gen_currency\");\n if(savedCurrency) {\n currentCurrency = savedCurrency;\n document.getElementById(\"currency-select\").value = savedCurrency;\n }\n }\n\n \/\/ --- Logo Handling ---\n function handleLogoUpload(event) {\n const file = event.target.files[0];\n if (file) {\n const reader = new FileReader();\n reader.onload = function(e) {\n const base64String = e.target.result;\n const img = document.getElementById(\"company-logo-display\");\n img.src = base64String;\n img.style.display = \"block\";\n saveCompanyInfo();\n };\n reader.readAsDataURL(file);\n }\n }\n\n \/\/ --- Currency Handling ---\n function updateCurrency() {\n currentCurrency = document.getElementById(\"currency-select\").value;\n localStorage.setItem(\"bill_gen_currency\", currentCurrency);\n calculateTotals();\n }\n\n \/\/ --- Line Items Management ---\n function addItemRow(desc = \"\", qty = 1, rate = 0) {\n const tbody = document.getElementById(\"items-tbody\");\n const row = document.createElement(\"tr\");\n\n row.innerHTML = `\n <td><input type=\"text\" class=\"item-desc\" value=\"${escapeHtml(desc)}\" placeholder=\"Item description or service\"><\/td>\n <td class=\"text-center\"><input type=\"number\" class=\"item-qty\" value=\"${qty}\" min=\"0.01\" step=\"any\" oninput=\"validateAndCalculate(this)\"><\/td>\n <td class=\"text-right\"><input type=\"number\" class=\"item-rate\" value=\"${rate.toFixed(2)}\" min=\"0\" step=\"any\" oninput=\"validateAndCalculate(this)\"><\/td>\n <td class=\"text-right item-amount\">${currentCurrency}${(qty * rate).toFixed(2)}<\/td>\n <td class=\"text-center no-print\">\n <button type=\"button\" class=\"btn-danger\" style=\"padding: 4px 8px; font-size: 12px;\" onclick=\"deleteItemRow(this)\">X<\/button>\n <\/td>\n `;\n tbody.appendChild(row);\n calculateTotals();\n }\n\n function deleteItemRow(btn) {\n const row = btn.closest(\"tr\");\n const tbody = document.getElementById(\"items-tbody\");\n if (tbody.rows.length > 1) {\n row.remove();\n calculateTotals();\n } else {\n showToast(\"Invoice must contain at least one line item.\");\n }\n }\n\n function validateAndCalculate(input) {\n const val = parseFloat(input.value);\n if (isNaN(val) || val < 0) {\n input.classList.add(\"invalid\");\n } else {\n input.classList.remove(\"invalid\");\n }\n calculateTotals();\n }\n\n \/\/ --- Calculations ---\n function calculateTotals() {\n const rows = document.querySelectorAll(\"#items-tbody tr\");\n let subtotal = 0;\n\n rows.forEach(row => {\n const qtyInput = row.querySelector(\".item-qty\");\n const rateInput = row.querySelector(\".item-rate\");\n const amountDisplay = row.querySelector(\".item-amount\");\n\n const qty = parseFloat(qtyInput.value) || 0;\n const rate = parseFloat(rateInput.value) || 0;\n const amount = qty * rate;\n\n amountDisplay.textContent = currentCurrency + amount.toFixed(2);\n subtotal += amount;\n });\n\n \/\/ Discount & Tax\n const discountInput = document.getElementById(\"discount-input\");\n const taxRateInput = document.getElementById(\"tax-rate-input\");\n\n let discount = parseFloat(discountInput.value) || 0;\n let taxRate = parseFloat(taxRateInput.value) || 0;\n\n if (discount < 0) discount = 0;\n if (taxRate < 0) taxRate = 0;\n\n let taxableAmount = subtotal - discount;\n if (taxableAmount < 0) taxableAmount = 0;\n\n let taxAmount = taxableAmount * (taxRate \/ 100);\n let total = taxableAmount + taxAmount;\n\n \/\/ Render summaries\n document.getElementById(\"subtotal-display\").textContent = currentCurrency + subtotal.toFixed(2);\n document.getElementById(\"total-display\").textContent = currentCurrency + total.toFixed(2);\n }\n\n \/\/ --- Save, Load, & Delete Invoices (LocalStorage) ---\n function getSavedInvoices() {\n const data = localStorage.getItem(\"bill_gen_invoices\");\n return data ? JSON.parse(data) : {};\n }\n\n function saveInvoice() {\n const invNumber = document.getElementById(\"inv-number\").value.trim();\n if (!invNumber) {\n showToast(\"Please provide an invoice number.\");\n return;\n }\n\n \/\/ Gather Line items\n const items = [];\n const rows = document.querySelectorAll(\"#items-tbody tr\");\n rows.forEach(row => {\n items.push({\n description: row.querySelector(\".item-desc\").value,\n qty: parseFloat(row.querySelector(\".item-qty\").value) || 0,\n rate: parseFloat(row.querySelector(\".item-rate\").value) || 0\n });\n });\n\n const invoiceData = {\n invoiceNumber: invNumber,\n date: document.getElementById(\"inv-date\").value,\n dueDate: document.getElementById(\"inv-due-date\").value,\n currency: currentCurrency,\n customer: {\n name: document.getElementById(\"cust-name\").value,\n email: document.getElementById(\"cust-email\").value,\n phone: document.getElementById(\"cust-phone\").value,\n address: document.getElementById(\"cust-address\").value\n },\n discount: document.getElementById(\"discount-input\").value,\n taxRate: document.getElementById(\"tax-rate-input\").value,\n items: items\n };\n\n const invoices = getSavedInvoices();\n invoices[invNumber] = invoiceData;\n localStorage.setItem(\"bill_gen_invoices\", JSON.stringify(invoices));\n\n populateSavedInvoicesDropdown();\n showToast(`Invoice \"${invNumber}\" saved successfully!`);\n }\n\n function populateSavedInvoicesDropdown() {\n const select = document.getElementById(\"saved-invoices-select\");\n const invoices = getSavedInvoices();\n \n select.innerHTML = '<option value=\"\">-- Select Saved --<\/option>';\n\n Object.keys(invoices).forEach(invNum => {\n const opt = document.createElement(\"option\");\n opt.value = invNum;\n opt.textContent = invNum;\n select.appendChild(opt);\n });\n }\n\n function loadSelectedInvoice() {\n const select = document.getElementById(\"saved-invoices-select\");\n const invNum = select.value;\n if (!invNum) {\n showToast(\"Please select an invoice to load.\");\n return;\n }\n\n const invoices = getSavedInvoices();\n const inv = invoices[invNum];\n if (!inv) {\n showToast(\"Invoice not found.\");\n return;\n }\n\n document.getElementById(\"inv-number\").value = inv.invoiceNumber || \"\";\n document.getElementById(\"inv-date\").value = inv.date || \"\";\n document.getElementById(\"inv-due-date\").value = inv.dueDate || \"\";\n \n if (inv.currency) {\n currentCurrency = inv.currency;\n document.getElementById(\"currency-select\").value = inv.currency;\n }\n\n if (inv.customer) {\n document.getElementById(\"cust-name\").value = inv.customer.name || \"\";\n document.getElementById(\"cust-email\").value = inv.customer.email || \"\";\n document.getElementById(\"cust-phone\").value = inv.customer.phone || \"\";\n document.getElementById(\"cust-address\").value = inv.customer.address || \"\";\n }\n\n document.getElementById(\"discount-input\").value = inv.discount || \"0\";\n document.getElementById(\"tax-rate-input\").value = inv.taxRate || \"0\";\n\n const tbody = document.getElementById(\"items-tbody\");\n tbody.innerHTML = \"\";\n if (inv.items && inv.items.length > 0) {\n inv.items.forEach(item => {\n addItemRow(item.description, item.qty, item.rate);\n });\n } else {\n addItemRow();\n }\n\n calculateTotals();\n showToast(`Loaded invoice ${invNum}`);\n }\n\n function deleteSelectedInvoice() {\n const select = document.getElementById(\"saved-invoices-select\");\n const invNum = select.value;\n if (!invNum) {\n showToast(\"Please select an invoice to delete.\");\n return;\n }\n\n if (confirm(`Are you sure you want to delete invoice ${invNum}?`)) {\n const invoices = getSavedInvoices();\n delete invoices[invNum];\n localStorage.setItem(\"bill_gen_invoices\", JSON.stringify(invoices));\n populateSavedInvoicesDropdown();\n showToast(`Deleted invoice ${invNum}`);\n }\n }\n\n function newInvoice() {\n if (confirm(\"Clear current fields to create a new invoice?\")) {\n const invNumField = document.getElementById(\"inv-number\");\n const currentVal = invNumField.value;\n const match = currentVal.match(\/(\\D*)(\\d+)$\/);\n if (match) {\n const prefix = match[1];\n const num = parseInt(match[2], 10) + 1;\n invNumField.value = prefix + num;\n } else {\n invNumField.value = \"INV-\" + Math.floor(1000 + Math.random() * 9000);\n }\n\n setDefaultDates();\n \n document.getElementById(\"cust-name\").value = \"\";\n document.getElementById(\"cust-email\").value = \"\";\n document.getElementById(\"cust-phone\").value = \"\";\n document.getElementById(\"cust-address\").value = \"\";\n\n document.getElementById(\"discount-input\").value = \"0.00\";\n document.getElementById(\"tax-rate-input\").value = \"10\";\n\n const tbody = document.getElementById(\"items-tbody\");\n tbody.innerHTML = \"\";\n addItemRow(\"Standard Service \/ Item\", 1, 100.00);\n calculateTotals();\n showToast(\"Started a new invoice.\");\n }\n }\n\n function showToast(message) {\n const toast = document.getElementById(\"toast\");\n toast.textContent = message;\n toast.classList.add(\"show\");\n setTimeout(() => {\n toast.classList.remove(\"show\");\n }, 3000);\n }\n\n function escapeHtml(str) {\n return str.replace(\/&\/g, \"&\")\n .replace(\/<\/g, \"<\")\n .replace(\/>\/g, \">\")\n .replace(\/\"\/g, \""\")\n .replace(\/'\/g, \"'\");\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Bill & Invoice Generator Currency: USD ($)EUR (\u20ac)GBP (\u00a3)INR (\u20b9)JPY (\u00a5)AUD (A$)CAD (C$) Load: — Select Saved — Load Delete Save Invoice New Print \/ PDF INVOICE Invoice #: Date: Due Date: Bill To: Client \/ Customer Name Email Address Phone Number Billing Address Description Quantity Rate Amount + Add Line Item Subtotal $0.00 Discount […]<\/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-549","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/549","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=549"}],"version-history":[{"count":2,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/549\/revisions"}],"predecessor-version":[{"id":756,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/549\/revisions\/756"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}