Invoice<\/title>\r\n <style>\r\n body {\r\n font-family: Arial, sans-serif;\r\n background: #f4f4f4;\r\n margin: 0;\r\n padding: 16px;\r\n }\r\n .invoice-box {\r\n background: #fff;\r\n max-width: 800px;\r\n margin: 32px auto;\r\n padding: 0 36px 32px 36px;\r\n border-radius: 8px;\r\n box-shadow: 0 2px 12px #bbb;\r\n box-sizing: border-box;\r\n }\r\n .logo-container {\r\n text-align: center;\r\n margin-bottom: 12px;\r\n }\r\n #logoPreview {\r\n max-height: 60px;\r\n max-width: 180px;\r\n object-fit: contain;\r\n border-radius: 3px;\r\n }\r\n .header {\r\n padding: 10px 0 20px 0;\r\n text-align: center;\r\n position: relative;\r\n }\r\n .header-line {\r\n border-bottom: 2px solid #3578e5;\r\n width: 100%;\r\n position: absolute;\r\n left: 0;\r\n top: 40px;\r\n z-index: 0;\r\n }\r\n .footer {\r\n position: relative;\r\n text-align: center;\r\n color: #888;\r\n font-size: 0.95em;\r\n margin-top: 32px;\r\n }\r\n .footer-line {\r\n border-top: 2px solid #3578e5;\r\n margin-bottom: 8px;\r\n }\r\n h2 {\r\n margin: 0 0 8px 0;\r\n position: relative;\r\n background: #fff;\r\n display: inline-block;\r\n padding: 0 20px;\r\n z-index: 1;\r\n }\r\n .header-content {\r\n position: relative;\r\n z-index: 1;\r\n background: #fff;\r\n display: inline-block;\r\n }\r\n .flex {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-top: 10px;\r\n box-sizing: border-box;\r\n }\r\n .section {\r\n margin-bottom: 12px;\r\n }\r\n table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n margin-top: 16px;\r\n overflow-x: auto;\r\n display: block;\r\n }\r\n th, td {\r\n border-bottom: 1px solid #ddd;\r\n padding: 8px;\r\n box-sizing: border-box;\r\n }\r\n th {\r\n background: #f2f2f2;\r\n }\r\n .right {\r\n text-align: right;\r\n }\r\n .bold {\r\n font-weight: bold;\r\n }\r\n .actions {\r\n margin: 18px 0;\r\n display: flex;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n }\r\n .add-btn, .print-btn, .view-btn, .toggle-payment-btn {\r\n background: #3578e5;\r\n color: #fff;\r\n border: none;\r\n padding: 8px 20px;\r\n border-radius: 5px;\r\n cursor: pointer;\r\n flex: 1 1 150px;\r\n min-width: 120px;\r\n box-sizing: border-box;\r\n }\r\n .add-btn {\r\n margin-right: 8px;\r\n flex-grow: 3;\r\n }\r\n .remove-btn, .remove-terms-btn, .remove-payment-btn {\r\n color: #d11;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n font-weight: bold;\r\n font-size: 18px;\r\n float: right;\r\n }\r\n [contenteditable]:focus {\r\n outline: 2px dashed #3578e5;\r\n }\r\n .hidden {\r\n display: none;\r\n }\r\n #termsSection {\r\n border-top: 1px solid #ddd;\r\n margin-top: 32px;\r\n padding-top: 16px;\r\n position: relative;\r\n }\r\n #termsSection h3 {\r\n margin: 0 0 8px 0;\r\n }\r\n #paymentDetailsSection {\r\n border: 1px solid #ddd;\r\n padding: 16px;\r\n margin-top: 32px;\r\n border-radius: 6px;\r\n background: #f9f9f9;\r\n position: relative;\r\n }\r\n #paymentDetailsSection h3 {\r\n margin-top: 0;\r\n }\r\n #paymentDetails {\r\n min-height: 50px;\r\n outline: none;\r\n white-space: pre-wrap;\r\n }\r\n #showPaymentBtn {\r\n display: none;\r\n margin-top: 20px;\r\n max-width: 250px;\r\n width: 100%;\r\n }\r\n input[type=\"text\"], input[type=\"number\"], input[type=\"date\"] {\r\n font-size: 1em;\r\n padding: 4px 6px;\r\n width: 100%;\r\n box-sizing: border-box;\r\n border-radius: 3px;\r\n border: 1px solid #ccc;\r\n }\r\n @media (max-width: 600px) {\r\n .invoice-box {\r\n padding: 0 10px 20px 10px;\r\n }\r\n .flex {\r\n flex-direction: column;\r\n gap: 20px;\r\n }\r\n .actions {\r\n flex-direction: column;\r\n }\r\n table,\r\n table tbody,\r\n table thead,\r\n tr,\r\n td,\r\n th {\r\n display: block;\r\n width: 100%;\r\n }\r\n thead tr {\r\n display: none;\r\n }\r\n tbody tr {\r\n margin-bottom: 15px;\r\n border: 1px solid #ddd;\r\n padding: 10px;\r\n border-radius: 6px;\r\n }\r\n td {\r\n padding-left: 50%;\r\n position: relative;\r\n border: none;\r\n border-bottom: 1px solid #eee;\r\n text-align: left;\r\n white-space: normal;\r\n }\r\n td:last-child {\r\n border-bottom: 0;\r\n }\r\n td:before {\r\n position: absolute;\r\n top: 8px;\r\n left: 10px;\r\n width: 45%;\r\n padding-right: 10px;\r\n white-space: nowrap;\r\n font-weight: bold;\r\n content: attr(data-label);\r\n }\r\n input[type=\"text\"], input[type=\"number\"], input[type=\"date\"] {\r\n width: 100%;\r\n }\r\n }\r\n @media print {\r\n .actions,\r\n .remove-terms-btn,\r\n .remove-payment-btn,\r\n #shipToSection button,\r\n #uploadLogoBtn,\r\n #showPaymentBtn {\r\n display: none;\r\n }\r\n body {\r\n background: #fff;\r\n }\r\n .invoice-box {\r\n box-shadow: none;\r\n }\r\n td:before {\r\n content: none !important;\r\n }\r\n table,\r\n table tbody,\r\n table thead,\r\n tr,\r\n td,\r\n th {\r\n display: table-cell !important;\r\n width: auto !important;\r\n border: 1px solid #ddd !important;\r\n }\r\n tbody tr {\r\n border: none !important;\r\n padding: 0 !important;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"invoice-box\" id=\"invoiceContent\">\r\n\r\n <div class=\"logo-container\">\r\n <img decoding=\"async\" id=\"logoPreview\" src=\"\" alt=\"Your Logo\" \/>\r\n <br \/>\r\n <input type=\"file\" id=\"uploadLogoBtn\" accept=\"image\/*\" title=\"Upload Company Logo\" \/>\r\n <\/div>\r\n\r\n <div class=\"header\">\r\n <div class=\"header-line\"><\/div>\r\n <span class=\"header-content\">\r\n <h2>Invoice<\/h2>\r\n <\/span>\r\n <\/div>\r\n\r\n <div class=\"flex\">\r\n <div>\r\n <p>\r\n <strong>Invoice #:<\/strong>\r\n <input id=\"invoiceNo\" type=\"text\" value=\"001\" \/>\r\n <br \/>\r\n <strong>Date:<\/strong>\r\n <input id=\"invoiceDate\" type=\"date\" value=\"\" \/>\r\n <\/p>\r\n <\/div>\r\n <div style=\"text-align:right;\">\r\n <div contenteditable=\"true\" style=\"font-size:1.12em; font-weight:bold;\" id=\"companyName\">Your Company Name<\/div>\r\n <div contenteditable=\"true\" id=\"companyAddr\">Street Address, City<br \/>Email: info@company.com<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex section\">\r\n <div>\r\n <strong>Bill To:<\/strong><br \/>\r\n <div contenteditable=\"true\" id=\"clientName\">Client Name<\/div>\r\n <div contenteditable=\"true\" id=\"clientAddr\">Client Address<\/div>\r\n <\/div>\r\n <div id=\"shipToSection\">\r\n <strong>Ship To:<\/strong>\r\n <button type=\"button\" onclick=\"removeShipTo()\" title=\"Remove Ship To\">✖<\/button>\r\n <br \/>\r\n <div contenteditable=\"true\" id=\"shipName\" oninput=\"toggleShipTo()\">Recipient Name<\/div>\r\n <div contenteditable=\"true\" id=\"shipAddr\" oninput=\"toggleShipTo()\">Recipient Address<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <form id=\"invoiceForm\">\r\n <table id=\"itemsTable\">\r\n <thead>\r\n <tr>\r\n <th>Description<\/th>\r\n <th>Qty<\/th>\r\n <th>Unit Price<\/th>\r\n <th class=\"right\">Amount<\/th>\r\n <th><\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td data-label=\"Description\"><input type=\"text\" placeholder=\"Item\/Service\" \/><\/td>\r\n <td data-label=\"Qty\"><input type=\"number\" min=\"1\" value=\"1\" oninput=\"calculateInvoice()\" \/><\/td>\r\n <td data-label=\"Unit Price\"><input type=\"number\" min=\"0\" value=\"0\" oninput=\"calculateInvoice()\" \/><\/td>\r\n <td data-label=\"Amount\" class=\"right amount-cell\">0<\/td>\r\n <td><\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"add-btn\" onclick=\"addItem()\">+ Add Item<\/button>\r\n <button type=\"button\" class=\"view-btn\" onclick=\"viewInvoice()\">View Invoice<\/button>\r\n <button type=\"button\" class=\"print-btn\" onclick=\"window.print()\">Print\/Save as PDF<\/button>\r\n <\/div>\r\n <table>\r\n <tr>\r\n <td colspan=\"3\" class=\"right bold\">Subtotal<\/td>\r\n <td class=\"right\"><span id=\"subtotal\">0<\/span><\/td>\r\n <\/tr>\r\n <tr>\r\n <td colspan=\"3\" class=\"right bold\">\r\n Tax (<input type=\"text\" id=\"taxLabel\" value=\"GST\" style=\"width:45px;\" onchange=\"calculateInvoice()\" \/>%)\r\n <\/td>\r\n <td class=\"right\">\r\n <input type=\"number\" value=\"18\" min=\"0\" id=\"taxPercent\" style=\"width:48px;\" oninput=\"calculateInvoice()\" \/>\r\n <\/td>\r\n <\/tr>\r\n <tr>\r\n <td colspan=\"3\" class=\"right bold\">Tax Amount<\/td>\r\n <td class=\"right\"><span id=\"taxAmount\">0<\/span><\/td>\r\n <\/tr>\r\n <tr class=\"bold\">\r\n <td colspan=\"3\" class=\"right\">Total<\/td>\r\n <td class=\"right\"><span id=\"totalAmount\">0<\/span><\/td>\r\n <\/tr>\r\n <\/table>\r\n <\/form>\r\n\r\n \r\n <div id=\"paymentDetailsSection\">\r\n <h3>\r\n Bank Details \/ Payment Link\r\n <button type=\"button\" class=\"remove-payment-btn\" title=\"Hide Payment Details\" onclick=\"togglePaymentDetails()\">✖<\/button>\r\n <\/h3>\r\n <div contenteditable=\"true\" id=\"paymentDetails\">\r\n Bank Name: Your Bank<br \/>\r\n Account Number: 1234567890<br \/>\r\n IFSC Code: ABCD0123456<br \/>\r\n Payment Link: https:\/\/yourpaymentlink.com\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"termsSection\">\r\n <h3>\r\n Terms & Conditions\r\n <button type=\"button\" class=\"remove-terms-btn\" title=\"Remove Terms & Conditions\" onclick=\"removeTerms()\">×<\/button>\r\n <\/h3>\r\n <div contenteditable=\"true\" id=\"termsContent\" onblur=\"toggleTerms()\" style=\"min-height: 70px; border: 1px solid #ddd; padding: 10px; border-radius: 4px; white-space: pre-wrap;\">\r\n Payment due within 15 days of invoice date.\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <button id=\"showPaymentBtn\" class=\"toggle-payment-btn\" onclick=\"togglePaymentDetails()\">Show Bank Details \/ Payment Link<\/button>\r\n\r\n <div class=\"footer\">\r\n <div class=\"footer-line\"><\/div>\r\n <div class=\"footer-content\">Thank you for your business!<\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <script>\r\n const logoInput = document.getElementById('uploadLogoBtn');\r\n const logoPreview = document.getElementById('logoPreview');\r\n logoInput.addEventListener('change', function (e) {\r\n const file = e.target.files[0];\r\n if (!file) return;\r\n const reader = new FileReader();\r\n reader.onload = function (e) {\r\n logoPreview.src = e.target.result;\r\n };\r\n reader.readAsDataURL(file);\r\n });\r\n\r\n function addItem() {\r\n const table = document.getElementById('itemsTable').getElementsByTagName('tbody')[0];\r\n const row = table.insertRow();\r\n row.innerHTML = `\r\n <td data-label=\"Description\"><input type=\"text\" placeholder=\"Item\/Service\" \/><\/td>\r\n <td data-label=\"Qty\"><input type=\"number\" min=\"1\" value=\"1\" oninput=\"calculateInvoice()\" \/><\/td>\r\n <td data-label=\"Unit Price\"><input type=\"number\" min=\"0\" value=\"0\" oninput=\"calculateInvoice()\" \/><\/td>\r\n <td data-label=\"Amount\" class=\"right amount-cell\">0<\/td>\r\n <td><button type=\"button\" class=\"remove-btn\" onclick=\"removeRow(this)\">✖<\/button><\/td>\r\n `;\r\n }\r\n\r\n function removeRow(btn) {\r\n const row = btn.parentElement.parentElement;\r\n row.parentElement.removeChild(row);\r\n calculateInvoice();\r\n }\r\n\r\n function calculateInvoice() {\r\n const table = document.getElementById('itemsTable');\r\n let subtotal = 0;\r\n const rows = table.getElementsByTagName('tbody')[0].rows;\r\n for (let i = 0; i < rows.length; i++) {\r\n const qty = parseFloat(rows[i].cells[1].querySelector('input').value) || 0;\r\n const price = parseFloat(rows[i].cells[2].querySelector('input').value) || 0;\r\n const amount = qty * price;\r\n rows[i].cells[3].textContent = amount.toFixed(2);\r\n subtotal += amount;\r\n }\r\n document.getElementById('subtotal').textContent = subtotal.toFixed(2);\r\n const taxRate = parseFloat(document.getElementById('taxPercent').value) || 0;\r\n const tax = (subtotal * taxRate) \/ 100;\r\n document.getElementById('taxAmount').textContent = tax.toFixed(2);\r\n document.getElementById('totalAmount').textContent = (subtotal + tax).toFixed(2);\r\n }\r\n\r\n function removeShipTo() {\r\n document.getElementById('shipToSection').classList.add('hidden');\r\n }\r\n\r\n function toggleShipTo() {\r\n const name = document.getElementById('shipName').innerText.trim();\r\n const addr = document.getElementById('shipAddr').innerText.trim();\r\n if (name === '' && addr === '') {\r\n removeShipTo();\r\n }\r\n }\r\n\r\n function removeTerms() {\r\n document.getElementById('termsSection').classList.add('hidden');\r\n }\r\n\r\n function toggleTerms() {\r\n const content = document.getElementById('termsContent').innerText.trim();\r\n if (content === '') {\r\n removeTerms();\r\n }\r\n }\r\n\r\n function togglePaymentDetails() {\r\n const paymentSection = document.getElementById('paymentDetailsSection');\r\n const showBtn = document.getElementById('showPaymentBtn');\r\n if (paymentSection.style.display === 'none' || paymentSection.classList.contains('hidden')) {\r\n paymentSection.style.display = 'block';\r\n paymentSection.classList.remove('hidden');\r\n showBtn.style.display = 'none';\r\n } else {\r\n paymentSection.style.display = 'none';\r\n paymentSection.classList.add('hidden');\r\n showBtn.style.display = 'inline-block';\r\n }\r\n }\r\n\r\n function viewInvoice() {\r\n const content = document.getElementById('invoiceContent').innerHTML;\r\n const style = `\r\n <style>\r\n body{font-family: Arial, sans-serif; margin: 30px;}\r\n .invoice-box{max-width: 800px; margin: auto; background: #fff; padding: 0 36px 32px 36px; border-radius: 8px; box-shadow: 0 2px 12px #bbb; }\r\n .logo-container { text-align: center; margin-bottom: 12px; }\r\n #logoPreview { max-height: 60px; max-width: 180px; object-fit: contain; border-radius: 3px; }\r\n .header { padding: 10px 0 20px 0; text-align: center; position: relative; }\r\n .header-line { border-bottom: 2px solid #3578e5; width: 100%; position: absolute; left: 0; top: 40px; z-index: 0; }\r\n .footer { position: relative; text-align: center; color: #888; font-size: 0.95em; margin-top: 32px; }\r\n .footer-line { border-top: 2px solid #3578e5; margin-bottom: 8px; }\r\n h2 { margin: 0 0 8px 0; position: relative; background: #fff; display: inline-block; padding: 0 20px; z-index: 1; }\r\n .header-content { position: relative; z-index: 1; background: #fff; display: inline-block; }\r\n .flex { display: flex; justify-content: space-between; margin-top: 10px; }\r\n .section { margin-bottom: 12px; }\r\n table { width: 100%; border-collapse: collapse; margin-top: 16px; }\r\n th, td { border-bottom: 1px solid #ddd; padding: 8px; }\r\n th { background: #f2f2f2; }\r\n .right { text-align: right; }\r\n .bold { font-weight: bold; }\r\n [contenteditable] { border: none; outline: none; }\r\n input, textarea { border: none; outline: none; }\r\n .hidden, .actions, #uploadLogoBtn, button.remove-btn, button.remove-terms-btn { display: none !important; }\r\n .print-view-btn { background: #3578e5; color: #fff; border: none; padding: 8px 20px; border-radius: 5px; cursor: pointer; margin-bottom: 15px; }\r\n #paymentDetailsSection { background:#f9f9f9; border:1px solid #ddd; padding: 16px; margin-top: 32px; border-radius: 6px; }\r\n <\/style>\r\n `;\r\n\r\n const temp = document.createElement('div');\r\n temp.innerHTML = content;\r\n temp.querySelectorAll('input').forEach(input => {\r\n const span = document.createElement('span');\r\n span.textContent = input.value;\r\n input.parentNode.replaceChild(span, input);\r\n });\r\n temp.querySelectorAll('[contenteditable]').forEach(el => {\r\n el.removeAttribute('contenteditable');\r\n });\r\n\r\n const finalContent = temp.innerHTML;\r\n\r\n const newWindow = window.open('', '_blank');\r\n newWindow.document.write(`\r\n <html>\r\n <head>\r\n <title>View Invoice<\/title>\r\n ${style}\r\n <\/head>\r\n <body>\r\n <button class=\"print-view-btn\" onclick=\"window.print()\">Print\/Save as PDF<\/button>\r\n <div class=\"invoice-box\">${finalContent}<\/div>\r\n <\/body>\r\n <\/html>\r\n `);\r\n newWindow.document.close();\r\n }\r\n\r\n window.onload = function () {\r\n const today = new Date().toISOString().substr(0, 10);\r\n document.getElementById('invoiceDate').value = today;\r\n calculateInvoice();\r\n };\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Invoice Invoice Invoice #: Date: Your Company Name Street Address, CityEmail: info@company.com Bill To: Client Name Client Address Ship To: ✖ Recipient Name Recipient Address Description Qty Unit Price Amount 0 + Add Item View Invoice Print\/Save as PDF Subtotal 0 Tax (%) Tax Amount 0 Total 0 Bank Details \/ Payment Link ✖ Bank […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/pages\/14022"}],"collection":[{"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/comments?post=14022"}],"version-history":[{"count":7,"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/pages\/14022\/revisions"}],"predecessor-version":[{"id":14029,"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/pages\/14022\/revisions\/14029"}],"wp:attachment":[{"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/media?parent=14022"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\r\n\r\n\r\n \r\n \r\n Invoice<\/title>\r\n <style>\r\n body {\r\n font-family: Arial, sans-serif;\r\n background: #f4f4f4;\r\n margin: 0;\r\n padding: 16px;\r\n }\r\n .invoice-box {\r\n background: #fff;\r\n max-width: 800px;\r\n margin: 32px auto;\r\n padding: 0 36px 32px 36px;\r\n border-radius: 8px;\r\n box-shadow: 0 2px 12px #bbb;\r\n box-sizing: border-box;\r\n }\r\n .logo-container {\r\n text-align: center;\r\n margin-bottom: 12px;\r\n }\r\n #logoPreview {\r\n max-height: 60px;\r\n max-width: 180px;\r\n object-fit: contain;\r\n border-radius: 3px;\r\n }\r\n .header {\r\n padding: 10px 0 20px 0;\r\n text-align: center;\r\n position: relative;\r\n }\r\n .header-line {\r\n border-bottom: 2px solid #3578e5;\r\n width: 100%;\r\n position: absolute;\r\n left: 0;\r\n top: 40px;\r\n z-index: 0;\r\n }\r\n .footer {\r\n position: relative;\r\n text-align: center;\r\n color: #888;\r\n font-size: 0.95em;\r\n margin-top: 32px;\r\n }\r\n .footer-line {\r\n border-top: 2px solid #3578e5;\r\n margin-bottom: 8px;\r\n }\r\n h2 {\r\n margin: 0 0 8px 0;\r\n position: relative;\r\n background: #fff;\r\n display: inline-block;\r\n padding: 0 20px;\r\n z-index: 1;\r\n }\r\n .header-content {\r\n position: relative;\r\n z-index: 1;\r\n background: #fff;\r\n display: inline-block;\r\n }\r\n .flex {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-top: 10px;\r\n box-sizing: border-box;\r\n }\r\n .section {\r\n margin-bottom: 12px;\r\n }\r\n table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n margin-top: 16px;\r\n overflow-x: auto;\r\n display: block;\r\n }\r\n th, td {\r\n border-bottom: 1px solid #ddd;\r\n padding: 8px;\r\n box-sizing: border-box;\r\n }\r\n th {\r\n background: #f2f2f2;\r\n }\r\n .right {\r\n text-align: right;\r\n }\r\n .bold {\r\n font-weight: bold;\r\n }\r\n .actions {\r\n margin: 18px 0;\r\n display: flex;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n }\r\n .add-btn, .print-btn, .view-btn, .toggle-payment-btn {\r\n background: #3578e5;\r\n color: #fff;\r\n border: none;\r\n padding: 8px 20px;\r\n border-radius: 5px;\r\n cursor: pointer;\r\n flex: 1 1 150px;\r\n min-width: 120px;\r\n box-sizing: border-box;\r\n }\r\n .add-btn {\r\n margin-right: 8px;\r\n flex-grow: 3;\r\n }\r\n .remove-btn, .remove-terms-btn, .remove-payment-btn {\r\n color: #d11;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n font-weight: bold;\r\n font-size: 18px;\r\n float: right;\r\n }\r\n [contenteditable]:focus {\r\n outline: 2px dashed #3578e5;\r\n }\r\n .hidden {\r\n display: none;\r\n }\r\n #termsSection {\r\n border-top: 1px solid #ddd;\r\n margin-top: 32px;\r\n padding-top: 16px;\r\n position: relative;\r\n }\r\n #termsSection h3 {\r\n margin: 0 0 8px 0;\r\n }\r\n #paymentDetailsSection {\r\n border: 1px solid #ddd;\r\n padding: 16px;\r\n margin-top: 32px;\r\n border-radius: 6px;\r\n background: #f9f9f9;\r\n position: relative;\r\n }\r\n #paymentDetailsSection h3 {\r\n margin-top: 0;\r\n }\r\n #paymentDetails {\r\n min-height: 50px;\r\n outline: none;\r\n white-space: pre-wrap;\r\n }\r\n #showPaymentBtn {\r\n display: none;\r\n margin-top: 20px;\r\n max-width: 250px;\r\n width: 100%;\r\n }\r\n input[type=\"text\"], input[type=\"number\"], input[type=\"date\"] {\r\n font-size: 1em;\r\n padding: 4px 6px;\r\n width: 100%;\r\n box-sizing: border-box;\r\n border-radius: 3px;\r\n border: 1px solid #ccc;\r\n }\r\n @media (max-width: 600px) {\r\n .invoice-box {\r\n padding: 0 10px 20px 10px;\r\n }\r\n .flex {\r\n flex-direction: column;\r\n gap: 20px;\r\n }\r\n .actions {\r\n flex-direction: column;\r\n }\r\n table,\r\n table tbody,\r\n table thead,\r\n tr,\r\n td,\r\n th {\r\n display: block;\r\n width: 100%;\r\n }\r\n thead tr {\r\n display: none;\r\n }\r\n tbody tr {\r\n margin-bottom: 15px;\r\n border: 1px solid #ddd;\r\n padding: 10px;\r\n border-radius: 6px;\r\n }\r\n td {\r\n padding-left: 50%;\r\n position: relative;\r\n border: none;\r\n border-bottom: 1px solid #eee;\r\n text-align: left;\r\n white-space: normal;\r\n }\r\n td:last-child {\r\n border-bottom: 0;\r\n }\r\n td:before {\r\n position: absolute;\r\n top: 8px;\r\n left: 10px;\r\n width: 45%;\r\n padding-right: 10px;\r\n white-space: nowrap;\r\n font-weight: bold;\r\n content: attr(data-label);\r\n }\r\n input[type=\"text\"], input[type=\"number\"], input[type=\"date\"] {\r\n width: 100%;\r\n }\r\n }\r\n @media print {\r\n .actions,\r\n .remove-terms-btn,\r\n .remove-payment-btn,\r\n #shipToSection button,\r\n #uploadLogoBtn,\r\n #showPaymentBtn {\r\n display: none;\r\n }\r\n body {\r\n background: #fff;\r\n }\r\n .invoice-box {\r\n box-shadow: none;\r\n }\r\n td:before {\r\n content: none !important;\r\n }\r\n table,\r\n table tbody,\r\n table thead,\r\n tr,\r\n td,\r\n th {\r\n display: table-cell !important;\r\n width: auto !important;\r\n border: 1px solid #ddd !important;\r\n }\r\n tbody tr {\r\n border: none !important;\r\n padding: 0 !important;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"invoice-box\" id=\"invoiceContent\">\r\n\r\n <div class=\"logo-container\">\r\n <img decoding=\"async\" id=\"logoPreview\" src=\"\" alt=\"Your Logo\" \/>\r\n <br \/>\r\n <input type=\"file\" id=\"uploadLogoBtn\" accept=\"image\/*\" title=\"Upload Company Logo\" \/>\r\n <\/div>\r\n\r\n <div class=\"header\">\r\n <div class=\"header-line\"><\/div>\r\n <span class=\"header-content\">\r\n <h2>Invoice<\/h2>\r\n <\/span>\r\n <\/div>\r\n\r\n <div class=\"flex\">\r\n <div>\r\n <p>\r\n <strong>Invoice #:<\/strong>\r\n <input id=\"invoiceNo\" type=\"text\" value=\"001\" \/>\r\n <br \/>\r\n <strong>Date:<\/strong>\r\n <input id=\"invoiceDate\" type=\"date\" value=\"\" \/>\r\n <\/p>\r\n <\/div>\r\n <div style=\"text-align:right;\">\r\n <div contenteditable=\"true\" style=\"font-size:1.12em; font-weight:bold;\" id=\"companyName\">Your Company Name<\/div>\r\n <div contenteditable=\"true\" id=\"companyAddr\">Street Address, City<br \/>Email: info@company.com<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex section\">\r\n <div>\r\n <strong>Bill To:<\/strong><br \/>\r\n <div contenteditable=\"true\" id=\"clientName\">Client Name<\/div>\r\n <div contenteditable=\"true\" id=\"clientAddr\">Client Address<\/div>\r\n <\/div>\r\n <div id=\"shipToSection\">\r\n <strong>Ship To:<\/strong>\r\n <button type=\"button\" onclick=\"removeShipTo()\" title=\"Remove Ship To\">✖<\/button>\r\n <br \/>\r\n <div contenteditable=\"true\" id=\"shipName\" oninput=\"toggleShipTo()\">Recipient Name<\/div>\r\n <div contenteditable=\"true\" id=\"shipAddr\" oninput=\"toggleShipTo()\">Recipient Address<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <form id=\"invoiceForm\">\r\n <table id=\"itemsTable\">\r\n <thead>\r\n <tr>\r\n <th>Description<\/th>\r\n <th>Qty<\/th>\r\n <th>Unit Price<\/th>\r\n <th class=\"right\">Amount<\/th>\r\n <th><\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td data-label=\"Description\"><input type=\"text\" placeholder=\"Item\/Service\" \/><\/td>\r\n <td data-label=\"Qty\"><input type=\"number\" min=\"1\" value=\"1\" oninput=\"calculateInvoice()\" \/><\/td>\r\n <td data-label=\"Unit Price\"><input type=\"number\" min=\"0\" value=\"0\" oninput=\"calculateInvoice()\" \/><\/td>\r\n <td data-label=\"Amount\" class=\"right amount-cell\">0<\/td>\r\n <td><\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"add-btn\" onclick=\"addItem()\">+ Add Item<\/button>\r\n <button type=\"button\" class=\"view-btn\" onclick=\"viewInvoice()\">View Invoice<\/button>\r\n <button type=\"button\" class=\"print-btn\" onclick=\"window.print()\">Print\/Save as PDF<\/button>\r\n <\/div>\r\n <table>\r\n <tr>\r\n <td colspan=\"3\" class=\"right bold\">Subtotal<\/td>\r\n <td class=\"right\"><span id=\"subtotal\">0<\/span><\/td>\r\n <\/tr>\r\n <tr>\r\n <td colspan=\"3\" class=\"right bold\">\r\n Tax (<input type=\"text\" id=\"taxLabel\" value=\"GST\" style=\"width:45px;\" onchange=\"calculateInvoice()\" \/>%)\r\n <\/td>\r\n <td class=\"right\">\r\n <input type=\"number\" value=\"18\" min=\"0\" id=\"taxPercent\" style=\"width:48px;\" oninput=\"calculateInvoice()\" \/>\r\n <\/td>\r\n <\/tr>\r\n <tr>\r\n <td colspan=\"3\" class=\"right bold\">Tax Amount<\/td>\r\n <td class=\"right\"><span id=\"taxAmount\">0<\/span><\/td>\r\n <\/tr>\r\n <tr class=\"bold\">\r\n <td colspan=\"3\" class=\"right\">Total<\/td>\r\n <td class=\"right\"><span id=\"totalAmount\">0<\/span><\/td>\r\n <\/tr>\r\n <\/table>\r\n <\/form>\r\n\r\n \r\n <div id=\"paymentDetailsSection\">\r\n <h3>\r\n Bank Details \/ Payment Link\r\n <button type=\"button\" class=\"remove-payment-btn\" title=\"Hide Payment Details\" onclick=\"togglePaymentDetails()\">✖<\/button>\r\n <\/h3>\r\n <div contenteditable=\"true\" id=\"paymentDetails\">\r\n Bank Name: Your Bank<br \/>\r\n Account Number: 1234567890<br \/>\r\n IFSC Code: ABCD0123456<br \/>\r\n Payment Link: https:\/\/yourpaymentlink.com\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"termsSection\">\r\n <h3>\r\n Terms & Conditions\r\n <button type=\"button\" class=\"remove-terms-btn\" title=\"Remove Terms & Conditions\" onclick=\"removeTerms()\">×<\/button>\r\n <\/h3>\r\n <div contenteditable=\"true\" id=\"termsContent\" onblur=\"toggleTerms()\" style=\"min-height: 70px; border: 1px solid #ddd; padding: 10px; border-radius: 4px; white-space: pre-wrap;\">\r\n Payment due within 15 days of invoice date.\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <button id=\"showPaymentBtn\" class=\"toggle-payment-btn\" onclick=\"togglePaymentDetails()\">Show Bank Details \/ Payment Link<\/button>\r\n\r\n <div class=\"footer\">\r\n <div class=\"footer-line\"><\/div>\r\n <div class=\"footer-content\">Thank you for your business!<\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <script>\r\n const logoInput = document.getElementById('uploadLogoBtn');\r\n const logoPreview = document.getElementById('logoPreview');\r\n logoInput.addEventListener('change', function (e) {\r\n const file = e.target.files[0];\r\n if (!file) return;\r\n const reader = new FileReader();\r\n reader.onload = function (e) {\r\n logoPreview.src = e.target.result;\r\n };\r\n reader.readAsDataURL(file);\r\n });\r\n\r\n function addItem() {\r\n const table = document.getElementById('itemsTable').getElementsByTagName('tbody')[0];\r\n const row = table.insertRow();\r\n row.innerHTML = `\r\n <td data-label=\"Description\"><input type=\"text\" placeholder=\"Item\/Service\" \/><\/td>\r\n <td data-label=\"Qty\"><input type=\"number\" min=\"1\" value=\"1\" oninput=\"calculateInvoice()\" \/><\/td>\r\n <td data-label=\"Unit Price\"><input type=\"number\" min=\"0\" value=\"0\" oninput=\"calculateInvoice()\" \/><\/td>\r\n <td data-label=\"Amount\" class=\"right amount-cell\">0<\/td>\r\n <td><button type=\"button\" class=\"remove-btn\" onclick=\"removeRow(this)\">✖<\/button><\/td>\r\n `;\r\n }\r\n\r\n function removeRow(btn) {\r\n const row = btn.parentElement.parentElement;\r\n row.parentElement.removeChild(row);\r\n calculateInvoice();\r\n }\r\n\r\n function calculateInvoice() {\r\n const table = document.getElementById('itemsTable');\r\n let subtotal = 0;\r\n const rows = table.getElementsByTagName('tbody')[0].rows;\r\n for (let i = 0; i < rows.length; i++) {\r\n const qty = parseFloat(rows[i].cells[1].querySelector('input').value) || 0;\r\n const price = parseFloat(rows[i].cells[2].querySelector('input').value) || 0;\r\n const amount = qty * price;\r\n rows[i].cells[3].textContent = amount.toFixed(2);\r\n subtotal += amount;\r\n }\r\n document.getElementById('subtotal').textContent = subtotal.toFixed(2);\r\n const taxRate = parseFloat(document.getElementById('taxPercent').value) || 0;\r\n const tax = (subtotal * taxRate) \/ 100;\r\n document.getElementById('taxAmount').textContent = tax.toFixed(2);\r\n document.getElementById('totalAmount').textContent = (subtotal + tax).toFixed(2);\r\n }\r\n\r\n function removeShipTo() {\r\n document.getElementById('shipToSection').classList.add('hidden');\r\n }\r\n\r\n function toggleShipTo() {\r\n const name = document.getElementById('shipName').innerText.trim();\r\n const addr = document.getElementById('shipAddr').innerText.trim();\r\n if (name === '' && addr === '') {\r\n removeShipTo();\r\n }\r\n }\r\n\r\n function removeTerms() {\r\n document.getElementById('termsSection').classList.add('hidden');\r\n }\r\n\r\n function toggleTerms() {\r\n const content = document.getElementById('termsContent').innerText.trim();\r\n if (content === '') {\r\n removeTerms();\r\n }\r\n }\r\n\r\n function togglePaymentDetails() {\r\n const paymentSection = document.getElementById('paymentDetailsSection');\r\n const showBtn = document.getElementById('showPaymentBtn');\r\n if (paymentSection.style.display === 'none' || paymentSection.classList.contains('hidden')) {\r\n paymentSection.style.display = 'block';\r\n paymentSection.classList.remove('hidden');\r\n showBtn.style.display = 'none';\r\n } else {\r\n paymentSection.style.display = 'none';\r\n paymentSection.classList.add('hidden');\r\n showBtn.style.display = 'inline-block';\r\n }\r\n }\r\n\r\n function viewInvoice() {\r\n const content = document.getElementById('invoiceContent').innerHTML;\r\n const style = `\r\n <style>\r\n body{font-family: Arial, sans-serif; margin: 30px;}\r\n .invoice-box{max-width: 800px; margin: auto; background: #fff; padding: 0 36px 32px 36px; border-radius: 8px; box-shadow: 0 2px 12px #bbb; }\r\n .logo-container { text-align: center; margin-bottom: 12px; }\r\n #logoPreview { max-height: 60px; max-width: 180px; object-fit: contain; border-radius: 3px; }\r\n .header { padding: 10px 0 20px 0; text-align: center; position: relative; }\r\n .header-line { border-bottom: 2px solid #3578e5; width: 100%; position: absolute; left: 0; top: 40px; z-index: 0; }\r\n .footer { position: relative; text-align: center; color: #888; font-size: 0.95em; margin-top: 32px; }\r\n .footer-line { border-top: 2px solid #3578e5; margin-bottom: 8px; }\r\n h2 { margin: 0 0 8px 0; position: relative; background: #fff; display: inline-block; padding: 0 20px; z-index: 1; }\r\n .header-content { position: relative; z-index: 1; background: #fff; display: inline-block; }\r\n .flex { display: flex; justify-content: space-between; margin-top: 10px; }\r\n .section { margin-bottom: 12px; }\r\n table { width: 100%; border-collapse: collapse; margin-top: 16px; }\r\n th, td { border-bottom: 1px solid #ddd; padding: 8px; }\r\n th { background: #f2f2f2; }\r\n .right { text-align: right; }\r\n .bold { font-weight: bold; }\r\n [contenteditable] { border: none; outline: none; }\r\n input, textarea { border: none; outline: none; }\r\n .hidden, .actions, #uploadLogoBtn, button.remove-btn, button.remove-terms-btn { display: none !important; }\r\n .print-view-btn { background: #3578e5; color: #fff; border: none; padding: 8px 20px; border-radius: 5px; cursor: pointer; margin-bottom: 15px; }\r\n #paymentDetailsSection { background:#f9f9f9; border:1px solid #ddd; padding: 16px; margin-top: 32px; border-radius: 6px; }\r\n <\/style>\r\n `;\r\n\r\n const temp = document.createElement('div');\r\n temp.innerHTML = content;\r\n temp.querySelectorAll('input').forEach(input => {\r\n const span = document.createElement('span');\r\n span.textContent = input.value;\r\n input.parentNode.replaceChild(span, input);\r\n });\r\n temp.querySelectorAll('[contenteditable]').forEach(el => {\r\n el.removeAttribute('contenteditable');\r\n });\r\n\r\n const finalContent = temp.innerHTML;\r\n\r\n const newWindow = window.open('', '_blank');\r\n newWindow.document.write(`\r\n <html>\r\n <head>\r\n <title>View Invoice<\/title>\r\n ${style}\r\n <\/head>\r\n <body>\r\n <button class=\"print-view-btn\" onclick=\"window.print()\">Print\/Save as PDF<\/button>\r\n <div class=\"invoice-box\">${finalContent}<\/div>\r\n <\/body>\r\n <\/html>\r\n `);\r\n newWindow.document.close();\r\n }\r\n\r\n window.onload = function () {\r\n const today = new Date().toISOString().substr(0, 10);\r\n document.getElementById('invoiceDate').value = today;\r\n calculateInvoice();\r\n };\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Invoice Invoice Invoice #: Date: Your Company Name Street Address, CityEmail: info@company.com Bill To: Client Name Client Address Ship To: ✖ Recipient Name Recipient Address Description Qty Unit Price Amount 0 + Add Item View Invoice Print\/Save as PDF Subtotal 0 Tax (%) Tax Amount 0 Total 0 Bank Details \/ Payment Link ✖ Bank […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/pages\/14022"}],"collection":[{"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/comments?post=14022"}],"version-history":[{"count":7,"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/pages\/14022\/revisions"}],"predecessor-version":[{"id":14029,"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/pages\/14022\/revisions\/14029"}],"wp:attachment":[{"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/media?parent=14022"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}