{"id":14396,"date":"2025-12-12T12:48:14","date_gmt":"2025-12-12T12:48:14","guid":{"rendered":"https:\/\/tendify.net\/?p=14396"},"modified":"2026-07-15T05:29:07","modified_gmt":"2026-07-15T05:29:07","slug":"proforma-invoice-builder","status":"publish","type":"post","link":"https:\/\/tendify.net\/fa\/proforma-invoice-builder\/","title":{"rendered":"Free Proforma Invoice Builder"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Tendify - Ultimate Proforma Invoice Generator<\/title>\r\n \r\n <!-- Tailwind CSS CDN for modern utilities -->\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <!-- jsPDF Library for generating high-quality PDFs -->\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\r\n \r\n <!-- Lucide Icons for clean UI elements -->\r\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n\r\n <!-- Internal CSS: Solid dark-theme fallback for Elementor integration to prevent styles breaking -->\r\n <style>\r\n \/* Premium Dark Theme variables matching Tendify.net identity *\/\r\n :root {\r\n --bg-primary: #0b0f19;\r\n --bg-secondary: #161b26;\r\n --bg-tertiary: #1f2635;\r\n --accent-color: #6366f1; \/* Indigo *\/\r\n --accent-hover: #4f46e5;\r\n --text-main: #f3f4f6;\r\n --text-muted: #9ca3af;\r\n --border-color: #2e3748;\r\n --success-color: #10b981;\r\n --danger-color: #ef4444;\r\n }\r\n\r\n \/* Standard Reset and Base Styles *\/\r\n .tendify-wrapper {\r\n background-color: var(--bg-primary);\r\n color: var(--text-main);\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n padding: 1.5rem;\r\n border-radius: 1rem;\r\n border: 1px solid var(--border-color);\r\n max-width: 1250px;\r\n margin: 2rem auto;\r\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);\r\n }\r\n\r\n .tendify-wrapper input, \r\n .tendify-wrapper textarea, \r\n .tendify-wrapper select {\r\n background-color: var(--bg-secondary) !important;\r\n border: 1px solid var(--border-color) !important;\r\n color: var(--text-main) !important;\r\n border-radius: 0.375rem !important;\r\n padding: 0.625rem 0.875rem !important;\r\n outline: none !important;\r\n transition: all 0.2s ease-in-out !important;\r\n font-size: 0.875rem !important;\r\n }\r\n\r\n .tendify-wrapper input:focus, \r\n .tendify-wrapper textarea:focus, \r\n .tendify-wrapper select:focus {\r\n border-color: var(--accent-color) !important;\r\n box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;\r\n }\r\n\r\n .tendify-btn-primary {\r\n background-color: var(--accent-color) !important;\r\n color: #ffffff !important;\r\n font-weight: 600 !important;\r\n padding: 0.625rem 1.25rem !important;\r\n border-radius: 0.375rem !important;\r\n transition: all 0.2s !important;\r\n display: inline-flex !important;\r\n align-items: center !important;\r\n gap: 0.5rem !important;\r\n cursor: pointer !important;\r\n border: none !important;\r\n }\r\n\r\n .tendify-btn-primary:hover {\r\n background-color: var(--accent-hover) !important;\r\n transform: translateY(-1px);\r\n }\r\n\r\n .tendify-btn-primary:active {\r\n transform: translateY(0);\r\n }\r\n\r\n .tendify-btn-secondary {\r\n background-color: transparent !important;\r\n color: var(--text-main) !important;\r\n border: 1px solid var(--border-color) !important;\r\n font-weight: 500 !important;\r\n padding: 0.625rem 1.25rem !important;\r\n border-radius: 0.375rem !important;\r\n transition: all 0.2s !important;\r\n display: inline-flex !important;\r\n align-items: center !important;\r\n gap: 0.5rem !important;\r\n cursor: pointer !important;\r\n }\r\n\r\n .tendify-btn-secondary:hover {\r\n background-color: var(--bg-tertiary) !important;\r\n border-color: var(--text-muted) !important;\r\n }\r\n\r\n .tendify-card {\r\n background-color: var(--bg-secondary);\r\n border: 1px solid var(--border-color);\r\n border-radius: 0.5rem;\r\n padding: 1.25rem;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .section-title {\r\n font-size: 1.125rem;\r\n font-weight: 600;\r\n color: var(--text-main);\r\n border-bottom: 2px solid var(--border-color);\r\n padding-bottom: 0.5rem;\r\n margin-bottom: 1rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n }\r\n\r\n \/* Helper class to ensure custom layout works in any CMS environment *\/\r\n .tendify-grid-2 {\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 1rem;\r\n }\r\n @media (min-width: 768px) {\r\n .tendify-grid-2 {\r\n grid-template-columns: 1fr 1fr;\r\n }\r\n }\r\n\r\n \/* Custom Table styling for dark theme *\/\r\n .tendify-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n margin-top: 0.75rem;\r\n }\r\n .tendify-table th {\r\n background-color: var(--bg-tertiary);\r\n color: var(--text-muted);\r\n font-weight: 600;\r\n text-align: left;\r\n padding: 0.75rem;\r\n border-bottom: 1px solid var(--border-color);\r\n font-size: 0.75rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n }\r\n .tendify-table td {\r\n padding: 0.75rem 0.5rem;\r\n border-bottom: 1px solid var(--border-color);\r\n vertical-align: middle;\r\n }\r\n\r\n \/* Custom scrollbar for webkit *\/\r\n ::-webkit-scrollbar {\r\n width: 8px;\r\n height: 8px;\r\n }\r\n ::-webkit-scrollbar-track {\r\n background: var(--bg-primary);\r\n }\r\n ::-webkit-scrollbar-thumb {\r\n background: var(--border-color);\r\n border-radius: 4px;\r\n }\r\n ::-webkit-scrollbar-thumb:hover {\r\n background: var(--text-muted);\r\n }\r\n\r\n \/* Live Preview Paper Styles *\/\r\n .preview-paper {\r\n background-color: #ffffff;\r\n color: #1e293b;\r\n font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\r\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"tendify-wrapper\">\r\n <!-- Header Branding -->\r\n <div class=\"flex flex-col md:flex-row justify-between items-center mb-6 border-b border-gray-800 pb-5 gap-4\">\r\n <div>\r\n <h1 class=\"text-2xl md:text-3xl font-extrabold tracking-wider text-white flex items-center gap-2\">\r\n <span class=\"text-indigo-500 font-black\">TENDIFY<\/span> \r\n <span class=\"text-gray-400 text-lg font-light\">| Premium Proforma Invoice<\/span>\r\n <\/h1>\r\n <p class=\"text-sm text-gray-400 mt-1\">Design, preview, and generate client-ready invoices with zero effort<\/p>\r\n <\/div>\r\n <div class=\"text-right flex flex-col items-end gap-1\">\r\n <span class=\"bg-indigo-900\/40 text-indigo-400 text-xs font-semibold px-3 py-1.5 rounded-full border border-indigo-700\/50\">\r\n Tendify.Net Tool Suite\r\n <\/span>\r\n <span class=\"text-[10px] text-gray-500\">Draft Auto-Saved Locally<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- MAIN GRID: Editor Left, Live Preview Right -->\r\n <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-6\">\r\n \r\n <!-- LEFT COLUMN: Form Editor (7 Cols) -->\r\n <div class=\"lg:col-span-7\">\r\n <form id=\"invoiceForm\" onsubmit=\"event.preventDefault();\">\r\n \r\n <!-- STEP 1: Invoice details & Currency -->\r\n <div class=\"tendify-card\">\r\n <div class=\"section-title\">\r\n <i data-lucide=\"file-text\" class=\"w-5 h-5 text-indigo-400\"><\/i>\r\n <span>Basic Settings & Logo<\/span>\r\n <\/div>\r\n \r\n <!-- Logo Upload Field -->\r\n <div class=\"mb-4 bg-gray-950\/40 p-3 rounded-lg border border-dashed border-gray-800 flex flex-col sm:flex-row items-center gap-4\">\r\n <div class=\"relative w-16 h-16 bg-gray-900 rounded border border-gray-700 flex items-center justify-center overflow-hidden\">\r\n <img id=\"logoPreview\" class=\"hidden w-full h-full object-contain\" alt=\"Logo Preview\">\r\n <i id=\"logoPlaceholderIcon\" data-lucide=\"image\" class=\"w-8 h-8 text-gray-600\"><\/i>\r\n <\/div>\r\n <div class=\"flex-1 text-center sm:text-left\">\r\n <span class=\"block text-xs font-semibold text-gray-300\">Company Logo (Optional)<\/span>\r\n <span class=\"block text-[10px] text-gray-500 mb-2\">Recommended: PNG with transparent background<\/span>\r\n <input type=\"file\" id=\"logoUpload\" accept=\"image\/*\" class=\"hidden\" onchange=\"handleLogoUpload(this)\">\r\n <button type=\"button\" class=\"bg-gray-800 hover:bg-gray-700 text-white text-xs px-3 py-1.5 rounded border border-gray-700 cursor-pointer\" onclick=\"document.getElementById('logoUpload').click()\">\r\n Choose Image File\r\n <\/button>\r\n <button type=\"button\" id=\"removeLogoBtn\" class=\"hidden ml-2 text-red-400 hover:text-red-300 text-xs\" onclick=\"removeLogo()\">\r\n Remove\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-4\">\r\n <div class=\"flex flex-col gap-1.5\">\r\n <label class=\"text-xs font-medium text-gray-400 uppercase tracking-wider\">Invoice Number<\/label>\r\n <input type=\"text\" id=\"invoiceNum\" value=\"PRO-2026-001\" placeholder=\"e.g. PRO-2026-001\" oninput=\"updateCalculations(); saveDraft();\" required>\r\n <\/div>\r\n <div class=\"flex flex-col gap-1.5\">\r\n <label class=\"text-xs font-medium text-gray-400 uppercase tracking-wider\">Issue Date<\/label>\r\n <input type=\"date\" id=\"invoiceDate\" onchange=\"updateCalculations(); saveDraft();\" required>\r\n <\/div>\r\n <div class=\"flex flex-col gap-1.5\">\r\n <label class=\"text-xs font-medium text-gray-400 uppercase tracking-wider\">Currency Symbol<\/label>\r\n <select id=\"currency\" onchange=\"updateCalculations(); saveDraft();\">\r\n <option value=\"$\">USD ($)<\/option>\r\n <option value=\"\u20ac\">EUR (\u20ac)<\/option>\r\n <option value=\"\u00a3\">GBP (\u00a3)<\/option>\r\n <option value=\"\u00a5\">JPY (\u00a5)<\/option>\r\n <option value=\"AED\">AED (Dh)<\/option>\r\n <option value=\"IRR\">IRR (Rial)<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- STEP 2: Sender & Receiver Info -->\r\n <div class=\"tendify-grid-2 mb-6\">\r\n <!-- Seller \/ Sender -->\r\n <div class=\"tendify-card mb-0\">\r\n <div class=\"section-title\">\r\n <i data-lucide=\"building\" class=\"w-5 h-5 text-indigo-400\"><\/i>\r\n <span>From (Your Company)<\/span>\r\n <\/div>\r\n <div class=\"flex flex-col gap-3\">\r\n <div class=\"flex flex-col gap-1\">\r\n <label class=\"text-xs font-medium text-gray-400\">Company Name<\/label>\r\n <input type=\"text\" id=\"sellerName\" value=\"My Global Solutions Ltd.\" placeholder=\"Your company name\" oninput=\"updateCalculations(); saveDraft();\" required>\r\n <\/div>\r\n <div class=\"flex flex-col gap-1\">\r\n <label class=\"text-xs font-medium text-gray-400\">Email Address<\/label>\r\n <input type=\"email\" id=\"sellerEmail\" value=\"billing@mysolutions.com\" placeholder=\"Email address\" oninput=\"updateCalculations(); saveDraft();\">\r\n <\/div>\r\n <div class=\"flex flex-col gap-1\">\r\n <label class=\"text-xs font-medium text-gray-400\">Address & Contact Details<\/label>\r\n <textarea id=\"sellerAddress\" rows=\"2\" placeholder=\"Address, City, Phone Number\" oninput=\"updateCalculations(); saveDraft();\">123 Tech Tower, Business Bay, Dubai, UAE<\/textarea>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Buyer \/ Receiver -->\r\n <div class=\"tendify-card mb-0\">\r\n <div class=\"section-title\">\r\n <i data-lucide=\"user\" class=\"w-5 h-5 text-indigo-400\"><\/i>\r\n <span>To (Client \/ Buyer)<\/span>\r\n <\/div>\r\n <div class=\"flex flex-col gap-3\">\r\n <div class=\"flex flex-col gap-1\">\r\n <label class=\"text-xs font-medium text-gray-400\">Client \/ Company Name<\/label>\r\n <input type=\"text\" id=\"buyerName\" value=\"Acme Corporation Inc.\" placeholder=\"Client company or person name\" oninput=\"updateCalculations(); saveDraft();\" required>\r\n <\/div>\r\n <div class=\"flex flex-col gap-1\">\r\n <label class=\"text-xs font-medium text-gray-400\">Client Email<\/label>\r\n <input type=\"email\" id=\"buyerEmail\" value=\"contact@acme.com\" placeholder=\"Client email address\" oninput=\"updateCalculations(); saveDraft();\">\r\n <\/div>\r\n <div class=\"flex flex-col gap-1\">\r\n <label class=\"text-xs font-medium text-gray-400\">Client Address & Contact<\/label>\r\n <textarea id=\"buyerAddress\" rows=\"2\" placeholder=\"Address, Country, Phone Number\" oninput=\"updateCalculations(); saveDraft();\">Office 402, Trade Center, London, UK<\/textarea>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- STEP 3: Items Table -->\r\n <div class=\"tendify-card\">\r\n <div class=\"section-title flex justify-between items-center\">\r\n <div class=\"flex items-center gap-2\">\r\n <i data-lucide=\"shopping-cart\" class=\"w-5 h-5 text-indigo-400\"><\/i>\r\n <span>Products \/ Services List<\/span>\r\n <\/div>\r\n <button type=\"button\" class=\"tendify-btn-secondary py-1 px-3 text-xs\" onclick=\"addNewRow()\">\r\n <i data-lucide=\"plus\" class=\"w-3.5 h-3.5\"><\/i> Add Item\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"overflow-x-auto\">\r\n <table class=\"tendify-table\" id=\"itemsTable\">\r\n <thead>\r\n <tr>\r\n <th style=\"width: 45%;\">Item Description<\/th>\r\n <th style=\"width: 15%;\">Qty<\/th>\r\n <th style=\"width: 20%;\">Unit Price<\/th>\r\n <th style=\"width: 15%; text-align: right;\">Total<\/th>\r\n <th style=\"width: 5%; text-align: center;\"><\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"itemsBody\">\r\n <!-- Rows loaded dynamically -->\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- STEP 4: Financial Summary & Notes -->\r\n <div class=\"tendify-grid-2\">\r\n <!-- Terms and Notes -->\r\n <div class=\"tendify-card\">\r\n <div class=\"section-title\">\r\n <i data-lucide=\"info\" class=\"w-5 h-5 text-indigo-400\"><\/i>\r\n <span>Notes & Payment Terms<\/span>\r\n <\/div>\r\n <div class=\"flex flex-col gap-3\">\r\n <textarea id=\"invoiceNotes\" rows=\"5\" placeholder=\"Enter bank account details, payment terms, delivery time...\" oninput=\"updateCalculations(); saveDraft();\">Bank Name: International Business Bank\r\nSwift Code: IBBKAE22XXX\r\nAccount Number: 9876-54321-01\r\nTerms: 50% advance, 50% upon completion.<\/textarea>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Calculations panel -->\r\n <div class=\"tendify-card flex flex-col justify-between\">\r\n <div class=\"section-title\">\r\n <i data-lucide=\"calculator\" class=\"w-5 h-5 text-indigo-400\"><\/i>\r\n <span>Calculation Summary<\/span>\r\n <\/div>\r\n <div class=\"flex flex-col gap-3\">\r\n <!-- Subtotal -->\r\n <div class=\"flex justify-between items-center text-sm border-b border-gray-800 pb-2\">\r\n <span class=\"text-gray-400\">Subtotal:<\/span>\r\n <span class=\"font-semibold text-white\"><span class=\"currency-label\">$<\/span><span id=\"subTotalVal\">0.00<\/span><\/span>\r\n <\/div>\r\n \r\n <!-- Tax -->\r\n <div class=\"flex justify-between items-center text-sm\">\r\n <span class=\"text-gray-400\">VAT \/ Tax (%):<\/span>\r\n <div class=\"flex items-center gap-2\">\r\n <input type=\"number\" id=\"taxRate\" value=\"5\" min=\"0\" max=\"100\" class=\"w-16 text-center py-1 px-2 !p-1\" oninput=\"updateCalculations(); saveDraft();\">\r\n <span class=\"text-gray-400\">%<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex justify-between items-center text-sm border-b border-gray-800 pb-2\">\r\n <span class=\"text-gray-400\">Tax Amount:<\/span>\r\n <span class=\"font-medium text-gray-300\"><span class=\"currency-label\">$<\/span><span id=\"taxVal\">0.00<\/span><\/span>\r\n <\/div>\r\n\r\n <!-- Discount with Toggle Type -->\r\n <div class=\"flex justify-between items-center text-sm\">\r\n <span class=\"text-gray-400\">Discount:<\/span>\r\n <div class=\"flex items-center gap-1.5\">\r\n <input type=\"number\" id=\"discountVal\" value=\"0\" min=\"0\" class=\"w-20 text-center py-1 px-2 !p-1\" oninput=\"updateCalculations(); saveDraft();\">\r\n <select id=\"discountType\" class=\"!py-1 !px-2 !text-xs !bg-gray-800\" onchange=\"updateCalculations(); saveDraft();\">\r\n <option value=\"flat\">Fixed Val<\/option>\r\n <option value=\"percent\">% Ratio<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex justify-between items-center text-sm border-b border-gray-800 pb-2\">\r\n <span class=\"text-gray-400\">Calculated Discount:<\/span>\r\n <span class=\"font-medium text-red-400\">- <span class=\"currency-label\">$<\/span><span id=\"calcDiscountVal\">0.00<\/span><\/span>\r\n <\/div>\r\n\r\n <!-- Total Amount -->\r\n <div class=\"flex justify-between items-center text-lg font-bold bg-indigo-950\/30 p-3 rounded border border-indigo-900\/40\">\r\n <span class=\"text-indigo-400\">Grand Total:<\/span>\r\n <span class=\"text-white\"><span class=\"currency-label\">$<\/span><span id=\"grandTotalVal\">0.00<\/span><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ACTION BUTTONS -->\r\n <div class=\"flex flex-col sm:flex-row justify-end gap-3 mt-4 border-t border-gray-800 pt-6\">\r\n <button type=\"button\" class=\"tendify-btn-secondary\" onclick=\"confirmReset()\">\r\n <i data-lucide=\"rotate-ccw\" class=\"w-4 h-4\"><\/i> Clear All\r\n <\/button>\r\n <button type=\"button\" class=\"tendify-btn-primary\" onclick=\"generateInvoicePDF()\">\r\n <i data-lucide=\"download\" class=\"w-4 h-4\"><\/i> Generate PDF Document\r\n <\/button>\r\n <\/div>\r\n\r\n <\/form>\r\n <\/div>\r\n\r\n <!-- RIGHT COLUMN: Real-Time Live Preview (5 Cols) -->\r\n <div class=\"lg:col-span-5 flex flex-col\">\r\n <div class=\"sticky top-6\">\r\n <div class=\"flex justify-between items-center mb-3\">\r\n <h3 class=\"text-sm font-semibold tracking-wider text-gray-400 uppercase flex items-center gap-1.5\">\r\n <span class=\"w-2 h-2 rounded-full bg-emerald-500 animate-pulse\"><\/span>\r\n Live PDF Preview\r\n <\/h3>\r\n <span class=\"text-xs text-indigo-400\">Pre-visualized Layout<\/span>\r\n <\/div>\r\n\r\n <!-- The Live Printable Paper Sheet mockup -->\r\n <div id=\"livePreviewContainer\" class=\"preview-paper rounded-lg p-6 shadow-2xl text-[11px] overflow-hidden\">\r\n <!-- Paper Header -->\r\n <div class=\"flex justify-between items-start border-b border-gray-200 pb-4 mb-4\">\r\n <div>\r\n <!-- Brand \/ Logo display area -->\r\n <div id=\"previewLogoContainer\" class=\"mb-2 hidden\">\r\n <img decoding=\"async\" id=\"previewLogoImg\" src=\"\" class=\"max-h-12 max-w-[150px] object-contain\" alt=\"Invoice Logo\">\r\n <\/div>\r\n <h2 id=\"prevBrandTitle\" class=\"text-lg font-bold text-indigo-600 tracking-wider\">TENDIFY<\/h2>\r\n <p class=\"text-gray-400 text-[9px] uppercase font-semibold\">Proforma Invoice<\/p>\r\n <\/div>\r\n <div class=\"text-right\">\r\n <h3 class=\"text-sm font-bold text-gray-800\">PROFORMA INVOICE<\/h3>\r\n <p class=\"text-gray-500 mt-1\">Ref: <span id=\"prevInvoiceNum\" class=\"font-semibold text-gray-700\">PRO-2026-001<\/span><\/p>\r\n <p class=\"text-gray-500\">Date: <span id=\"prevInvoiceDate\" class=\"text-gray-700\">2026-06-24<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Paper Contacts Info -->\r\n <div class=\"grid grid-cols-2 gap-4 mb-6\">\r\n <div>\r\n <span class=\"text-[9px] font-bold text-indigo-600 block uppercase mb-1\">From<\/span>\r\n <span id=\"prevSellerName\" class=\"font-bold text-gray-800 block text-xs\">My Global Solutions Ltd.<\/span>\r\n <span id=\"prevSellerEmail\" class=\"text-gray-500 block\">billing@mysolutions.com<\/span>\r\n <p id=\"prevSellerAddress\" class=\"text-gray-500 mt-1 whitespace-pre-wrap\">123 Tech Tower, Business Bay, Dubai, UAE<\/p>\r\n <\/div>\r\n <div>\r\n <span class=\"text-[9px] font-bold text-indigo-600 block uppercase mb-1\">To<\/span>\r\n <span id=\"prevBuyerName\" class=\"font-bold text-gray-800 block text-xs\">Acme Corporation Inc.<\/span>\r\n <span id=\"prevBuyerEmail\" class=\"text-gray-500 block\">contact@acme.com<\/span>\r\n <p id=\"prevBuyerAddress\" class=\"text-gray-500 mt-1 whitespace-pre-wrap\">Office 402, Trade Center, London, UK<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Paper Table of items -->\r\n <div class=\"mb-6\">\r\n <table class=\"w-full text-left border-collapse\">\r\n <thead>\r\n <tr class=\"bg-gray-100 text-gray-600 uppercase text-[8px] font-bold tracking-wider\">\r\n <th class=\"py-2 px-3 border-b border-gray-200\">Description<\/th>\r\n <th class=\"py-2 px-2 text-right border-b border-gray-200\">Qty<\/th>\r\n <th class=\"py-2 px-2 text-right border-b border-gray-200\">Price<\/th>\r\n <th class=\"py-2 px-3 text-right border-b border-gray-200\">Amount<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"prevItemsList\">\r\n <!-- Populated in JS dynamically -->\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n\r\n <!-- Paper Footer notes and calculations side-by-side -->\r\n <div class=\"grid grid-cols-12 gap-4 pt-2 border-t border-gray-100\">\r\n <div class=\"col-span-7\">\r\n <span class=\"text-[8px] font-bold text-indigo-600 block uppercase mb-1\">Payment Notes<\/span>\r\n <p id=\"prevNotes\" class=\"text-[9px] text-gray-400 whitespace-pre-wrap leading-relaxed\">Swift code, delivery days etc.<\/p>\r\n <\/div>\r\n <div class=\"col-span-5 text-right flex flex-col gap-1.5 text-gray-500\">\r\n <div class=\"flex justify-between\">\r\n <span>Subtotal:<\/span>\r\n <span id=\"prevSubtotal\" class=\"font-semibold text-gray-700\">$1200.00<\/span>\r\n <\/div>\r\n <div class=\"flex justify-between\">\r\n <span>Tax:<\/span>\r\n <span id=\"prevTax\" class=\"font-semibold text-gray-700\">$60.00<\/span>\r\n <\/div>\r\n <div class=\"flex justify-between text-red-500\">\r\n <span>Discount:<\/span>\r\n <span id=\"prevDiscount\" class=\"font-semibold\">-$0.00<\/span>\r\n <\/div>\r\n <div class=\"flex justify-between text-xs font-bold text-gray-900 border-t border-gray-200 pt-1.5 mt-1\">\r\n <span class=\"text-indigo-600\">Total Due:<\/span>\r\n <span id=\"prevTotalDue\">$1260.00<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"text-center text-[8px] text-gray-300 mt-8 border-t border-dashed border-gray-200 pt-3\">\r\n This is a digital proforma copy of Tendify.Net Free Tools suite.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- JavaScript and PDF Engine Implementation -->\r\n <script>\r\n \/\/ In-memory Logo storage (base64)\r\n let uploadedLogoBase64 = null;\r\n\r\n \/\/ Default Initial Structure\r\n const defaultData = {\r\n invoiceNum: \"PRO-2026-001\",\r\n invoiceDate: new Date().toISOString().split('T')[0],\r\n currency: \"$\",\r\n sellerName: \"My Global Solutions Ltd.\",\r\n sellerEmail: \"billing@mysolutions.com\",\r\n sellerAddress: \"123 Tech Tower, Business Bay, Dubai, UAE\",\r\n buyerName: \"Acme Corporation Inc.\",\r\n buyerEmail: \"contact@acme.com\",\r\n buyerAddress: \"Office 402, Trade Center, London, UK\",\r\n invoiceNotes: \"Bank Name: International Business Bank\\nSwift Code: IBBKAE22XXX\\nAccount Number: 9876-54321-01\\nTerms: 50% advance, 50% upon completion.\",\r\n taxRate: 5,\r\n discountVal: 0,\r\n discountType: \"flat\",\r\n items: [\r\n { desc: \"Premium SEO & Website Deployment\", qty: 1, price: 1200 }\r\n ]\r\n };\r\n\r\n \/\/ Initialize application on load\r\n document.addEventListener(\"DOMContentLoaded\", function() {\r\n \/\/ Create Icons\r\n lucide.createIcons();\r\n\r\n \/\/ Load draft from localstorage or use default\r\n loadDraft();\r\n updateCalculations();\r\n });\r\n\r\n \/\/ Handle Image upload, convert to base64 for previewing & PDF inclusion\r\n function handleLogoUpload(input) {\r\n if (input.files && input.files[0]) {\r\n const reader = new FileReader();\r\n reader.onload = function(e) {\r\n uploadedLogoBase64 = e.target.result;\r\n \r\n \/\/ Show previews\r\n document.getElementById('logoPreview').src = uploadedLogoBase64;\r\n document.getElementById('logoPreview').classList.remove('hidden');\r\n document.getElementById('logoPlaceholderIcon').classList.add('hidden');\r\n document.getElementById('removeLogoBtn').classList.remove('hidden');\r\n\r\n document.getElementById('previewLogoImg').src = uploadedLogoBase64;\r\n document.getElementById('previewLogoContainer').classList.remove('hidden');\r\n document.getElementById('prevBrandTitle').classList.add('hidden');\r\n\r\n saveDraft();\r\n };\r\n reader.readAsDataURL(input.files[0]);\r\n }\r\n }\r\n\r\n \/\/ Delete custom logo\r\n function removeLogo() {\r\n uploadedLogoBase64 = null;\r\n document.getElementById('logoUpload').value = '';\r\n document.getElementById('logoPreview').classList.add('hidden');\r\n document.getElementById('logoPlaceholderIcon').classList.remove('hidden');\r\n document.getElementById('removeLogoBtn').classList.add('hidden');\r\n\r\n document.getElementById('previewLogoContainer').classList.add('hidden');\r\n document.getElementById('prevBrandTitle').classList.remove('hidden');\r\n\r\n saveDraft();\r\n }\r\n\r\n \/\/ Dynamically update individual row total\r\n function updateRowTotal(inputElement) {\r\n const row = inputElement.closest('.item-row');\r\n const qty = parseFloat(row.querySelector('.item-qty').value) || 0;\r\n const price = parseFloat(row.querySelector('.item-price').value) || 0;\r\n const total = qty * price;\r\n \r\n row.querySelector('.row-total-val').textContent = total.toFixed(2);\r\n updateCalculations();\r\n saveDraft();\r\n }\r\n\r\n \/\/ Add a new product\/service row dynamically\r\n function addNewRow(initialDesc = \"\", initialQty = 1, initialPrice = 0) {\r\n const tbody = document.getElementById('itemsBody');\r\n const tr = document.createElement('tr');\r\n tr.className = 'item-row';\r\n tr.innerHTML = `\r\n <td>\r\n <input type=\"text\" class=\"w-full item-desc\" placeholder=\"Product or Service details\" value=\"${initialDesc}\" oninput=\"updateCalculations(); saveDraft();\" required>\r\n <\/td>\r\n <td class=\"px-1\">\r\n <input type=\"number\" class=\"w-full item-qty text-center !px-1\" value=\"${initialQty}\" min=\"1\" oninput=\"updateRowTotal(this)\" required>\r\n <\/td>\r\n <td class=\"px-1\">\r\n <input type=\"number\" class=\"w-full item-price text-right !px-1\" value=\"${initialPrice}\" min=\"0\" step=\"0.01\" oninput=\"updateRowTotal(this)\" required>\r\n <\/td>\r\n <td class=\"font-semibold text-right pr-4 text-gray-300 whitespace-nowrap text-xs\">\r\n <span class=\"currency-label\">${document.getElementById('currency').value}<\/span><span class=\"row-total-val\">${(initialQty * initialPrice).toFixed(2)}<\/span>\r\n <\/td>\r\n <td class=\"text-center\">\r\n <button type=\"button\" class=\"text-red-500 hover:text-red-400 focus:outline-none\" onclick=\"deleteRow(this)\">\r\n <i data-lucide=\"trash-2\" class=\"w-4 h-4\"><\/i>\r\n <\/button>\r\n <\/td>\r\n `;\r\n tbody.appendChild(tr);\r\n lucide.createIcons();\r\n updateCalculations();\r\n }\r\n\r\n \/\/ Delete a item row\r\n function deleteRow(buttonElement) {\r\n const row = buttonElement.closest('tr');\r\n const rows = document.querySelectorAll('.item-row');\r\n if (rows.length > 1) {\r\n row.remove();\r\n updateCalculations();\r\n saveDraft();\r\n } else {\r\n \/\/ Just reset the single remaining row instead of deleting it entirely\r\n row.querySelector('.item-desc').value = '';\r\n row.querySelector('.item-qty').value = '1';\r\n row.querySelector('.item-price').value = '0';\r\n row.querySelector('.row-total-val').textContent = '0.00';\r\n updateCalculations();\r\n saveDraft();\r\n }\r\n }\r\n\r\n \/\/ Recalculate Subtotal, Tax, Discount, and Grand Total + Updates Live Preview Sheet\r\n function updateCalculations() {\r\n const selectedCurrency = document.getElementById('currency').value;\r\n \r\n \/\/ Update currency labels visually across the application\r\n const labels = document.querySelectorAll('.currency-label');\r\n labels.forEach(label => label.textContent = selectedCurrency);\r\n\r\n let subtotal = 0;\r\n const rows = document.querySelectorAll('.item-row');\r\n const previewList = document.getElementById('prevItemsList');\r\n previewList.innerHTML = ''; \/\/ Clear preview items list\r\n\r\n rows.forEach(row => {\r\n const desc = row.querySelector('.item-desc').value || \"Unnamed Product\/Service\";\r\n const qty = parseFloat(row.querySelector('.item-qty').value) || 0;\r\n const price = parseFloat(row.querySelector('.item-price').value) || 0;\r\n const total = qty * price;\r\n subtotal += total;\r\n\r\n \/\/ Populate Live Preview Rows\r\n const tr = document.createElement('tr');\r\n tr.className = 'border-b border-gray-100 text-gray-700';\r\n tr.innerHTML = `\r\n <td class=\"py-2 px-3 text-gray-800 font-medium\">${desc}<\/td>\r\n <td class=\"py-2 px-2 text-right\">${qty}<\/td>\r\n <td class=\"py-2 px-2 text-right\">${selectedCurrency}${price.toFixed(2)}<\/td>\r\n <td class=\"py-2 px-3 text-right font-semibold text-gray-900\">${selectedCurrency}${total.toFixed(2)}<\/td>\r\n `;\r\n previewList.appendChild(tr);\r\n });\r\n\r\n \/\/ Calculate VAT Tax\r\n const taxRate = parseFloat(document.getElementById('taxRate').value) || 0;\r\n const taxAmount = (subtotal * taxRate) \/ 100;\r\n\r\n \/\/ Calculate Discount based on Flat vs Percentage type\r\n const discVal = parseFloat(document.getElementById('discountVal').value) || 0;\r\n const discType = document.getElementById('discountType').value;\r\n let calculatedDiscount = 0;\r\n\r\n if(discType === \"percent\") {\r\n calculatedDiscount = (subtotal * discVal) \/ 100;\r\n } else {\r\n calculatedDiscount = discVal;\r\n }\r\n\r\n \/\/ Calculate Grand Total\r\n const grandTotal = Math.max(0, (subtotal + taxAmount) - calculatedDiscount);\r\n\r\n \/\/ Render calculations on form\r\n document.getElementById('subTotalVal').textContent = subtotal.toFixed(2);\r\n document.getElementById('taxVal').textContent = taxAmount.toFixed(2);\r\n document.getElementById('calcDiscountVal').textContent = calculatedDiscount.toFixed(2);\r\n document.getElementById('grandTotalVal').textContent = grandTotal.toFixed(2);\r\n\r\n \/\/ Update Live Preview fields\r\n document.getElementById('prevInvoiceNum').textContent = document.getElementById('invoiceNum').value || \"N\/A\";\r\n document.getElementById('prevInvoiceDate').textContent = document.getElementById('invoiceDate').value || \"N\/A\";\r\n \r\n document.getElementById('prevSellerName').textContent = document.getElementById('sellerName').value || \"Your Business\";\r\n document.getElementById('prevSellerEmail').textContent = document.getElementById('sellerEmail').value || \"\";\r\n document.getElementById('prevSellerAddress').textContent = document.getElementById('sellerAddress').value || \"\";\r\n\r\n document.getElementById('prevBuyerName').textContent = document.getElementById('buyerName').value || \"Client Name\";\r\n document.getElementById('prevBuyerEmail').textContent = document.getElementById('buyerEmail').value || \"\";\r\n document.getElementById('prevBuyerAddress').textContent = document.getElementById('buyerAddress').value || \"\";\r\n\r\n document.getElementById('prevNotes').textContent = document.getElementById('invoiceNotes').value || \"No payment instructions or terms provided.\";\r\n\r\n document.getElementById('prevSubtotal').textContent = `${selectedCurrency}${subtotal.toFixed(2)}`;\r\n document.getElementById('prevTax').textContent = `${selectedCurrency}${taxAmount.toFixed(2)} (Ref ${taxRate}%)`;\r\n document.getElementById('prevDiscount').textContent = `-${selectedCurrency}${calculatedDiscount.toFixed(2)}`;\r\n document.getElementById('prevTotalDue').textContent = `${selectedCurrency}${grandTotal.toFixed(2)}`;\r\n }\r\n\r\n \/\/ Save Data to browser state safely\r\n function saveDraft() {\r\n const rows = document.querySelectorAll('.item-row');\r\n const items = [];\r\n rows.forEach(row => {\r\n items.push({\r\n desc: row.querySelector('.item-desc').value,\r\n qty: parseFloat(row.querySelector('.item-qty').value) || 1,\r\n price: parseFloat(row.querySelector('.item-price').value) || 0\r\n });\r\n });\r\n\r\n const invoiceData = {\r\n invoiceNum: document.getElementById('invoiceNum').value,\r\n invoiceDate: document.getElementById('invoiceDate').value,\r\n currency: document.getElementById('currency').value,\r\n sellerName: document.getElementById('sellerName').value,\r\n sellerEmail: document.getElementById('sellerEmail').value,\r\n sellerAddress: document.getElementById('sellerAddress').value,\r\n buyerName: document.getElementById('buyerName').value,\r\n buyerEmail: document.getElementById('buyerEmail').value,\r\n buyerAddress: document.getElementById('buyerAddress').value,\r\n invoiceNotes: document.getElementById('invoiceNotes').value,\r\n taxRate: parseFloat(document.getElementById('taxRate').value) || 0,\r\n discountVal: parseFloat(document.getElementById('discountVal').value) || 0,\r\n discountType: document.getElementById('discountType').value,\r\n items: items,\r\n logoBase64: uploadedLogoBase64\r\n };\r\n\r\n localStorage.setItem('tendify_proforma_draft', JSON.stringify(invoiceData));\r\n }\r\n\r\n \/\/ Load draft data from browser storage\r\n function loadDraft() {\r\n const rawDraft = localStorage.getItem('tendify_proforma_draft');\r\n let data = defaultData;\r\n\r\n if(rawDraft) {\r\n try {\r\n data = JSON.parse(rawDraft);\r\n } catch(e) {\r\n data = defaultData;\r\n }\r\n }\r\n\r\n \/\/ Populate basic details\r\n document.getElementById('invoiceNum').value = data.invoiceNum || defaultData.invoiceNum;\r\n document.getElementById('invoiceDate').value = data.invoiceDate || defaultData.invoiceDate;\r\n document.getElementById('currency').value = data.currency || defaultData.currency;\r\n document.getElementById('sellerName').value = data.sellerName || defaultData.sellerName;\r\n document.getElementById('sellerEmail').value = data.sellerEmail || defaultData.sellerEmail;\r\n document.getElementById('sellerAddress').value = data.sellerAddress || defaultData.sellerAddress;\r\n document.getElementById('buyerName').value = data.buyerName || defaultData.buyerName;\r\n document.getElementById('buyerEmail').value = data.buyerEmail || defaultData.buyerEmail;\r\n document.getElementById('buyerAddress').value = data.buyerAddress || defaultData.buyerAddress;\r\n document.getElementById('invoiceNotes').value = data.invoiceNotes || defaultData.invoiceNotes;\r\n document.getElementById('taxRate').value = data.taxRate !== undefined ? data.taxRate : defaultData.taxRate;\r\n document.getElementById('discountVal').value = data.discountVal !== undefined ? data.discountVal : defaultData.discountVal;\r\n document.getElementById('discountType').value = data.discountType || defaultData.discountType;\r\n\r\n \/\/ Clear dynamic items container\r\n document.getElementById('itemsBody').innerHTML = '';\r\n\r\n \/\/ Populate Item List\r\n const itemsList = data.items && data.items.length ? data.items : defaultData.items;\r\n itemsList.forEach(item => {\r\n addNewRow(item.desc, item.qty, item.price);\r\n });\r\n\r\n \/\/ Handle Logo base64\r\n if(data.logoBase64) {\r\n uploadedLogoBase64 = data.logoBase64;\r\n document.getElementById('logoPreview').src = uploadedLogoBase64;\r\n document.getElementById('logoPreview').classList.remove('hidden');\r\n document.getElementById('logoPlaceholderIcon').classList.add('hidden');\r\n document.getElementById('removeLogoBtn').classList.remove('hidden');\r\n\r\n document.getElementById('previewLogoImg').src = uploadedLogoBase64;\r\n document.getElementById('previewLogoContainer').classList.remove('hidden');\r\n document.getElementById('prevBrandTitle').classList.add('hidden');\r\n } else {\r\n removeLogo();\r\n }\r\n }\r\n\r\n \/\/ Modal Confirmation to clear out details safely\r\n function confirmReset() {\r\n const check = confirm(\"Are you sure you want to clear the entire form and start a new proforma?\");\r\n if(check) {\r\n localStorage.removeItem('tendify_proforma_draft');\r\n removeLogo();\r\n resetForm();\r\n }\r\n }\r\n\r\n \/\/ Reset fields to system default\r\n function resetForm() {\r\n document.getElementById('invoiceForm').reset();\r\n const today = new Date().toISOString().split('T')[0];\r\n document.getElementById('invoiceDate').value = today;\r\n document.getElementById('itemsBody').innerHTML = '';\r\n \r\n \/\/ Default item\r\n addNewRow(defaultData.items[0].desc, defaultData.items[0].qty, defaultData.items[0].price);\r\n document.getElementById('invoiceNotes').value = defaultData.invoiceNotes;\r\n updateCalculations();\r\n saveDraft();\r\n }\r\n\r\n \/\/ Multi-page safe jsPDF generator for professional invoices\r\n function generateInvoicePDF() {\r\n const invoiceNum = document.getElementById('invoiceNum').value.trim();\r\n const invoiceDate = document.getElementById('invoiceDate').value;\r\n const sellerName = document.getElementById('sellerName').value.trim();\r\n const buyerName = document.getElementById('buyerName').value.trim();\r\n\r\n if(!invoiceNum || !invoiceDate || !sellerName || !buyerName) {\r\n showCustomNotification(\"Please fill in basic invoice parameters (No., Date, Buyer, Seller).\");\r\n return;\r\n }\r\n\r\n const { jsPDF } = window.jspdf;\r\n const doc = new jsPDF('p', 'pt', 'a4'); \/\/ Standard A4 sheet: 595 x 842 pt\r\n\r\n const currency = document.getElementById('currency').value;\r\n const currencyCode = document.getElementById('currency').options[document.getElementById('currency').selectedIndex].text.split(' ')[0];\r\n\r\n const themeColor = [99, 102, 241]; \/\/ Indigo RGB\r\n const darkColor = [31, 38, 53];\r\n\r\n let currentPage = 1;\r\n\r\n \/\/ Function to draw header & footer on any page index\r\n function renderPageTemplate(pageNumber) {\r\n \/\/ --- PDF HEADER BACKGROUND ---\r\n doc.setFillColor(11, 15, 25);\r\n doc.rect(0, 0, 595, 110, 'F');\r\n\r\n \/\/ Brand Title or Logo\r\n if (uploadedLogoBase64) {\r\n try {\r\n \/\/ Adds logo inside header on top-left safely\r\n doc.addImage(uploadedLogoBase64, 'PNG', 40, 25, 120, 45, undefined, 'FAST');\r\n } catch (e) {\r\n \/\/ Fallback to text if base64 render fails\r\n doc.setTextColor(255, 255, 255);\r\n doc.setFont(\"Helvetica\", \"bold\");\r\n doc.setFontSize(22);\r\n doc.text(\"TENDIFY\", 40, 55);\r\n }\r\n } else {\r\n doc.setTextColor(255, 255, 255);\r\n doc.setFont(\"Helvetica\", \"bold\");\r\n doc.setFontSize(22);\r\n doc.text(\"TENDIFY\", 40, 55);\r\n }\r\n\r\n doc.setTextColor(156, 163, 175);\r\n doc.setFont(\"Helvetica\", \"normal\");\r\n doc.setFontSize(9);\r\n doc.text(\"PROFORMA INVOICE GENERATOR\", 40, 75);\r\n\r\n \/\/ Right hand header details\r\n doc.setTextColor(255, 255, 255);\r\n doc.setFont(\"Helvetica\", \"bold\");\r\n doc.setFontSize(16);\r\n doc.text(\"PROFORMA INVOICE\", 555, 45, { align: \"right\" });\r\n\r\n doc.setFont(\"Helvetica\", \"normal\");\r\n doc.setFontSize(10);\r\n doc.setTextColor(180, 180, 180);\r\n doc.text(`Ref: ${invoiceNum}`, 555, 65, { align: \"right\" });\r\n doc.text(`Date of Issue: ${invoiceDate}`, 555, 79, { align: \"right\" });\r\n\r\n \/\/ Bottom horizontal guide line\r\n doc.setDrawColor(226, 232, 240);\r\n doc.setLineWidth(1);\r\n doc.line(40, 780, 555, 780);\r\n\r\n \/\/ Footer standard brand lines\r\n doc.setFont(\"Helvetica\", \"normal\");\r\n doc.setFontSize(8);\r\n doc.setTextColor(150, 150, 150);\r\n doc.text(\"This is a system generated proforma invoice and is valid without signatures.\", 40, 795);\r\n doc.text(`Page ${pageNumber} | Generated via Tendify.Net`, 555, 795, { align: \"right\" });\r\n }\r\n\r\n \/\/ Setup First Page Template\r\n renderPageTemplate(currentPage);\r\n\r\n \/\/ --- SENDER & BUYER SECTION ---\r\n let currentY = 150;\r\n\r\n \/\/ Seller column\r\n doc.setTextColor(themeColor[0], themeColor[1], themeColor[2]);\r\n doc.setFont(\"Helvetica\", \"bold\");\r\n doc.setFontSize(10);\r\n doc.text(\"FROM (ISSUER)\", 40, currentY);\r\n\r\n doc.setTextColor(darkColor[0], darkColor[1], darkColor[2]);\r\n doc.setFontSize(12);\r\n doc.text(sellerName, 40, currentY + 16);\r\n\r\n doc.setFont(\"Helvetica\", \"normal\");\r\n doc.setFontSize(9);\r\n doc.setTextColor(100, 100, 100);\r\n \r\n const sellerEmail = document.getElementById('sellerEmail').value.trim();\r\n let sellerOffsetY = currentY + 28;\r\n if(sellerEmail) {\r\n doc.text(`Email: ${sellerEmail}`, 40, sellerOffsetY);\r\n sellerOffsetY += 13;\r\n }\r\n \r\n const sellerAddress = document.getElementById('sellerAddress').value.trim();\r\n if(sellerAddress) {\r\n const splitSellerAddr = doc.splitTextToSize(sellerAddress, 230);\r\n doc.text(splitSellerAddr, 40, sellerOffsetY);\r\n }\r\n\r\n \/\/ Buyer Column\r\n doc.setTextColor(themeColor[0], themeColor[1], themeColor[2]);\r\n doc.setFont(\"Helvetica\", \"bold\");\r\n doc.setFontSize(10);\r\n doc.text(\"TO (BUYER \/ CLIENT)\", 320, currentY);\r\n\r\n doc.setTextColor(darkColor[0], darkColor[1], darkColor[2]);\r\n doc.setFontSize(12);\r\n doc.text(buyerName, 320, currentY + 16);\r\n\r\n doc.setFont(\"Helvetica\", \"normal\");\r\n doc.setFontSize(9);\r\n doc.setTextColor(100, 100, 100);\r\n\r\n const buyerEmail = document.getElementById('buyerEmail').value.trim();\r\n let buyerOffsetY = currentY + 28;\r\n if(buyerEmail) {\r\n doc.text(`Email: ${buyerEmail}`, 320, buyerOffsetY);\r\n buyerOffsetY += 13;\r\n }\r\n\r\n const buyerAddress = document.getElementById('buyerAddress').value.trim();\r\n if(buyerAddress) {\r\n const splitBuyerAddr = doc.splitTextToSize(buyerAddress, 230);\r\n doc.text(splitBuyerAddr, 320, buyerOffsetY);\r\n }\r\n\r\n \/\/ --- PRODUCTS & SERVICES LIST TABLE ---\r\n currentY = 260;\r\n\r\n \/\/ Table Header Row Background\r\n doc.setFillColor(31, 38, 53);\r\n doc.rect(40, currentY, 515, 24, 'F');\r\n\r\n doc.setTextColor(255, 255, 255);\r\n doc.setFont(\"Helvetica\", \"bold\");\r\n doc.setFontSize(9);\r\n doc.text(\"Item Description\", 50, currentY + 15);\r\n doc.text(\"Qty\", 320, currentY + 15, { align: \"right\" });\r\n doc.text(\"Unit Price\", 410, currentY + 15, { align: \"right\" });\r\n doc.text(`Total (${currencyCode})`, 545, currentY + 15, { align: \"right\" });\r\n\r\n currentY += 24; \/\/ offset below header line\r\n\r\n const rows = document.querySelectorAll('.item-row');\r\n doc.setFont(\"Helvetica\", \"normal\");\r\n doc.setFontSize(9.5);\r\n doc.setTextColor(50, 50, 50);\r\n\r\n rows.forEach((row, index) => {\r\n \/\/ Safe check for multi page limit. If height exceeds 700, switch page!\r\n if (currentY > 680) {\r\n doc.addPage();\r\n currentPage++;\r\n renderPageTemplate(currentPage);\r\n \r\n \/\/ Redraw Table Headers on new page\r\n currentY = 140;\r\n doc.setFillColor(31, 38, 53);\r\n doc.rect(40, currentY, 515, 24, 'F');\r\n\r\n doc.setTextColor(255, 255, 255);\r\n doc.setFont(\"Helvetica\", \"bold\");\r\n doc.setFontSize(9);\r\n doc.text(\"Item Description\", 50, currentY + 15);\r\n doc.text(\"Qty\", 320, currentY + 15, { align: \"right\" });\r\n doc.text(\"Unit Price\", 410, currentY + 15, { align: \"right\" });\r\n doc.text(`Total (${currencyCode})`, 545, currentY + 15, { align: \"right\" });\r\n\r\n currentY += 24;\r\n doc.setFont(\"Helvetica\", \"normal\");\r\n doc.setFontSize(9.5);\r\n }\r\n\r\n const desc = row.querySelector('.item-desc').value || \"Unnamed Item\";\r\n const qty = parseFloat(row.querySelector('.item-qty').value) || 0;\r\n const price = parseFloat(row.querySelector('.item-price').value) || 0;\r\n const total = qty * price;\r\n\r\n \/\/ Alternating Zebra Row Design\r\n if (index % 2 === 1) {\r\n doc.setFillColor(248, 250, 252);\r\n doc.rect(40, currentY, 515, 22, 'F');\r\n }\r\n\r\n \/\/ Draw light bottom border for rows\r\n doc.setDrawColor(241, 245, 249);\r\n doc.setLineWidth(1);\r\n doc.line(40, currentY + 22, 555, currentY + 22);\r\n\r\n \/\/ Print row details\r\n doc.setTextColor(70, 70, 70);\r\n const splitDesc = doc.splitTextToSize(desc, 240);\r\n doc.text(splitDesc, 50, currentY + 14);\r\n doc.text(qty.toString(), 320, currentY + 14, { align: \"right\" });\r\n doc.text(price.toFixed(2), 410, currentY + 14, { align: \"right\" });\r\n \r\n doc.setTextColor(30, 30, 30);\r\n doc.setFont(\"Helvetica\", \"bold\");\r\n doc.text(`${currency} ${total.toFixed(2)}`, 545, currentY + 14, { align: \"right\" });\r\n doc.setFont(\"Helvetica\", \"normal\");\r\n\r\n currentY += 22;\r\n });\r\n\r\n \/\/ --- SECTION: TOTALS & NOTES ---\r\n \/\/ Safeguard: Check if totals panel fits, otherwise create a new page\r\n if (currentY > 580) {\r\n doc.addPage();\r\n currentPage++;\r\n renderPageTemplate(currentPage);\r\n currentY = 140;\r\n } else {\r\n currentY += 20;\r\n }\r\n\r\n const subtotal = parseFloat(document.getElementById('subTotalVal').textContent) || 0;\r\n const taxRate = parseFloat(document.getElementById('taxRate').value) || 0;\r\n const taxAmount = parseFloat(document.getElementById('taxVal').textContent) || 0;\r\n const calculatedDiscount = parseFloat(document.getElementById('calcDiscountVal').textContent) || 0;\r\n const grandTotal = parseFloat(document.getElementById('grandTotalVal').textContent) || 0;\r\n\r\n \/\/ Draw payment notes block\r\n const notes = document.getElementById('invoiceNotes').value.trim();\r\n if(notes) {\r\n doc.setTextColor(themeColor[0], themeColor[1], themeColor[2]);\r\n doc.setFont(\"Helvetica\", \"bold\");\r\n doc.setFontSize(9);\r\n doc.text(\"NOTES & PAYMENT CONDITIONS\", 40, currentY + 10);\r\n \r\n doc.setTextColor(110, 110, 110);\r\n doc.setFont(\"Helvetica\", \"normal\");\r\n doc.setFontSize(8.5);\r\n const splitNotes = doc.splitTextToSize(notes, 250);\r\n doc.text(splitNotes, 40, currentY + 24);\r\n }\r\n\r\n \/\/ Draw mathematical summary block\r\n const calcX = 350;\r\n doc.setFont(\"Helvetica\", \"normal\");\r\n doc.setFontSize(9.5);\r\n doc.setTextColor(100, 100, 100);\r\n\r\n \/\/ Subtotal label\r\n doc.text(\"Subtotal:\", calcX, currentY + 10);\r\n doc.text(`${currency} ${subtotal.toFixed(2)}`, 545, currentY + 10, { align: \"right\" });\r\n\r\n \/\/ Tax label\r\n doc.text(`Tax (${taxRate}%):`, calcX, currentY + 26);\r\n doc.text(`${currency} ${taxAmount.toFixed(2)}`, 545, currentY + 26, { align: \"right\" });\r\n\r\n \/\/ Discount label\r\n doc.text(\"Discount:\", calcX, currentY + 42);\r\n doc.text(`- ${currency} ${calculatedDiscount.toFixed(2)}`, 545, currentY + 42, { align: \"right\" });\r\n\r\n \/\/ Grand Total Solid banner highlight\r\n doc.setFillColor(99, 102, 241);\r\n doc.rect(calcX - 10, currentY + 52, 215, 26, 'F');\r\n \r\n doc.setTextColor(255, 255, 255);\r\n doc.setFont(\"Helvetica\", \"bold\");\r\n doc.setFontSize(10.5);\r\n doc.text(\"Grand Total Due:\", calcX, currentY + 68);\r\n doc.text(`${currency} ${grandTotal.toFixed(2)}`, 545, currentY + 68, { align: \"right\" });\r\n\r\n \/\/ Download and save locally\r\n doc.save(`Proforma_${invoiceNum}.pdf`);\r\n showCustomNotification(`Download complete: Proforma_${invoiceNum}.pdf`);\r\n }\r\n\r\n \/\/ Custom system notification handler (replaces raw alerts)\r\n function showCustomNotification(message) {\r\n const oldToast = document.getElementById('tendify-toast');\r\n if (oldToast) oldToast.remove();\r\n\r\n const toast = document.createElement('div');\r\n toast.id = 'tendify-toast';\r\n toast.style.position = 'fixed';\r\n toast.style.bottom = '24px';\r\n toast.style.right = '24px';\r\n toast.style.backgroundColor = '#111827';\r\n toast.style.border = '1px solid #4f46e5';\r\n toast.style.color = '#f3f4f6';\r\n toast.style.padding = '12px 20px';\r\n toast.style.borderRadius = '8px';\r\n toast.style.boxShadow = '0 20px 25px -5px rgba(0,0,0,0.5)';\r\n toast.style.zIndex = '99999';\r\n toast.style.fontSize = '13px';\r\n toast.style.fontWeight = '500';\r\n toast.style.display = 'flex';\r\n toast.style.alignItems = 'center';\r\n toast.style.gap = '8px';\r\n toast.style.transition = 'opacity 0.3s ease-in-out';\r\n toast.innerHTML = `<i data-lucide=\"check-circle\" style=\"width: 16px; height: 16px; color:#10b981;\"><\/i> <span>${message}<\/span>`;\r\n \r\n document.body.appendChild(toast);\r\n lucide.createIcons();\r\n\r\n \/\/ Clear toast after 4 seconds\r\n setTimeout(() => {\r\n toast.style.opacity = '0';\r\n setTimeout(() => toast.remove(), 300);\r\n }, 4000);\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-2e1f37d e-flex e-con-boxed e-con e-parent\" data-id=\"2e1f37d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6623190 color-scheme-inherit text-left elementor-widget elementor-widget-text-editor\" data-id=\"6623190\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><!-- SEO Content Section for Tendify Proforma Invoice Generator --><\/p><article class=\"tendify-seo-content\" style=\"max-width: 1000px; margin: 3rem auto; padding: 1.5rem; font-family: system-ui, -apple-system, sans-serif; color: #9ca3af; line-height: 1.7;\"><p><!-- Main Heading --><\/p><h2 style=\"color: #ffffff; font-size: 2rem; font-weight: 800; margin-bottom: 1rem; border-left: 4px solid #6366f1; padding-left: 0.75rem;\"><span style=\"color: #000000;\">Free Premium Proforma Invoice Generator Online<\/span><\/h2><p style=\"margin-bottom: 1.5rem; font-size: 1rem;\">In the fast-paced world of global trade, freelance services, and digital agencies, presenting a professional quote to your clients is paramount.<br \/>Welcome to <strong>Tendify\u2019s Ultimate Proforma Invoice Generator<\/strong>\u2014a completely free, fast, and web-based billing tool designed to help business owners, freelancers, and startups create sleek, accurate, and client-ready proforma invoices instantly. No registration, no hidden fees, and no watermarks.<\/p><p><!-- Section 1: Benefits --><\/p><h3 style=\"color: #f3f4f6; font-size: 1.35rem; font-weight: bold; margin-top: 2rem; margin-bottom: 1rem;\"><span style=\"color: #000000;\">Why Use Tendify’s Proforma Invoice Maker?<\/span><\/h3><p style=\"margin-bottom: 1rem;\">Our online tool simplifies your invoicing process by bypassing complicated accounting software. Here is why thousands of international service providers choose Tendify:<\/p><ul style=\"list-style-type: none; padding-left: 0; margin-bottom: 2rem;\"><li style=\"margin-bottom: 0.75rem; display: flex; align-items: flex-start; gap: 0.5rem;\"><span style=\"color: #6366f1; font-weight: bold;\">\u2714<\/span><br \/><strong>Live Real-Time PDF Preview:<\/strong> Watch your invoice dynamically build on your screen as you type. See exactly what your client will receive before downloading.<\/li><li style=\"margin-bottom: 0.75rem; display: flex; align-items: flex-start; gap: 0.5rem;\"><span style=\"color: #6366f1; font-weight: bold;\">\u2714<\/span><br \/><strong>Custom Branding & Logo Upload:<\/strong> Upload your company logo directly to give your quote a personalized, official corporate look.<\/li><li style=\"margin-bottom: 0.75rem; display: flex; align-items: flex-start; gap: 0.5rem;\"><span style=\"color: #6366f1; font-weight: bold;\">\u2714<\/span><br \/><strong>Smart Automated Calculations:<\/strong> Forget math errors. The script instantly handles product multiplication, custom tax (VAT) percentages, and flexible discounts (flat rate or % percentage ratio).<\/li><li style=\"margin-bottom: 0.75rem; display: flex; align-items: flex-start; gap: 0.5rem;\"><span style=\"color: #6366f1; font-weight: bold;\">\u2714<\/span><br \/><strong>Multi-Currency Support:<\/strong> Easily draft documents in USD, EUR, GBP, AED, and more to cater to international commerce seamlessly.<\/li><li style=\"margin-bottom: 0.75rem; display: flex; align-items: flex-start; gap: 0.5rem;\"><span style=\"color: #6366f1; font-weight: bold;\">\u2714<\/span><br \/><strong>100% Secure & Private (Local Auto-Save):<\/strong> Your business privacy matters. All data is processed securely right inside your web browser. The smart local auto-save draft mechanism prevents you from losing data if your browser reloads.<\/li><\/ul><p><!-- Section 2: How to Use --><\/p><h3 style=\"color: #f3f4f6; font-size: 1.35rem; font-weight: bold; margin-top: 2rem; margin-bottom: 1rem;\"><span style=\"color: #000000;\">How to Generate Your Proforma Invoice in 4 Easy Steps<\/span><\/h3><ol style=\"padding-left: 1.25rem; margin-bottom: 2rem;\"><li style=\"margin-bottom: 0.75rem;\"><strong>Enter Basic Details:<\/strong> Type in your unique invoice reference number, issue date, and choose your preferred local or global currency symbol. (Optional: Upload your brand logo).<\/li><li style=\"margin-bottom: 0.75rem;\"><strong>Input Business Information:<\/strong> Fill out the billing fields with your company structure details (“From”) and your prospective client’s contact credentials (“To”).<\/li><li style=\"margin-bottom: 0.75rem;\"><strong>Add Products or Services:<\/strong> List your itemized services or stock. Use the <em>“+ Add Item”<\/em> button to expand your list with no row limits. Enter the quantity and unit price, and watch the system update totals automatically.<\/li><li style=\"margin-bottom: 0.75rem;\"><strong>Set Adjustments & Download:<\/strong> Inject your custom VAT taxation percentages, deduct discounts, insert payment terms (like bank IBAN or Swift codes) in the notes section, and click <strong>“Generate PDF Document”<\/strong> to save your beautiful, high-quality, signature-ready document.<\/li><\/ol><p><!-- Section 3: Professional FAQ\/Conclusion --><\/p><h3 style=\"color: #f3f4f6; font-size: 1.15rem; font-weight: bold; margin-top: 2rem; margin-bottom: 0.5rem;\"><span style=\"color: #000000;\">What is the difference between a Proforma Invoice and a Commercial Invoice?<\/span><\/h3><p style=\"font-size: 0.9rem; margin-bottom: 1.5rem;\">A proforma invoice is a preliminary bill or quotation sent to an international buyer before the actual products or services are delivered. It outlines a binding agreement regarding costs, quantities, and terms, allowing clients to arrange customs clearance or internal purchase orders. A commercial invoice is issued <em>after<\/em> the transaction is fully executed to demand actual final payment.<\/p><p style=\"text-align: center; color: #6366f1; font-weight: 600; font-size: 0.95rem; margin-top: 2rem; border-top: 1px solid #1f2635;\">Streamline your workflow today with Tendify.Net Web Tools. Professional invoicing made effortless.<\/p><\/article>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>For International Trade Documentation<\/p>","protected":false},"author":15,"featured_media":14397,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[767],"tags":[],"class_list":["post-14396","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-b2b-online-tools"],"_links":{"self":[{"href":"https:\/\/tendify.net\/fa\/wp-json\/wp\/v2\/posts\/14396","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tendify.net\/fa\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tendify.net\/fa\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tendify.net\/fa\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/tendify.net\/fa\/wp-json\/wp\/v2\/comments?post=14396"}],"version-history":[{"count":3,"href":"https:\/\/tendify.net\/fa\/wp-json\/wp\/v2\/posts\/14396\/revisions"}],"predecessor-version":[{"id":18838,"href":"https:\/\/tendify.net\/fa\/wp-json\/wp\/v2\/posts\/14396\/revisions\/18838"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tendify.net\/fa\/wp-json\/wp\/v2\/media\/14397"}],"wp:attachment":[{"href":"https:\/\/tendify.net\/fa\/wp-json\/wp\/v2\/media?parent=14396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tendify.net\/fa\/wp-json\/wp\/v2\/categories?post=14396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tendify.net\/fa\/wp-json\/wp\/v2\/tags?post=14396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}