\n\n\n \n \n
Premium Calculator for Florists<\/title>\n <!-- Tailwind CSS from jsDelivr -->\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\n <!-- Font Awesome for icons -->\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\n <!-- Google Fonts -->\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n <!-- jsPDF library for PDF generation -->\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf-autotable\/3.5.30\/jspdf.plugin.autotable.min.js\"><\/script>\n\n <style>\n :root {\n --primary: #8cc63f; \/* This is still used by the page, not the PDF *\/\n --primary-dark: #7baa37;\n --accent: #b5e087;\n --bg: #f8f9fa;\n --card-bg: #ffffff;\n --text: #333333;\n --radius: 10px;\n --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\n --btn-bg: #8cc63f;\n --btn-hover: #7baa37;\n }\n * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; }\n body { background: var(--bg); color: var(--text); padding: 0px; }\n\n\n .logo {\n font-size: 24px;\n font-weight: 700;\n color: var(--primary-dark);\n }\n\n .logo span {\n color: var(--primary);\n }\n\n .container {\n width: 100%;\n max-width: none;\n margin: 0;\n }\n\n .card {\n background: var(--card-bg);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n padding: 24px;\n margin-bottom: 20px;\n border: 1px solid #eaeaea;\n transition: transform 0.2s, box-shadow 0.2s;\n }\n\n .card:hover {\n box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);\n }\n\n .card h2 {\n color: var(--primary);\n font-size: 1.25rem;\n font-weight: 600;\n margin-bottom: 16px;\n display: flex;\n align-items: center;\n }\n\n .card h2 i {\n margin-right: 10px;\n }\n\n .form-group {\n margin-bottom: 16px;\n }\n\n label {\n display: block;\n margin-bottom: 6px;\n font-weight: 500;\n font-size: 0.95rem;\n color: #555;\n }\n\n input[type=\"text\"],\n input[type=\"number\"],\n input[type=\"date\"],\n input[type=\"file\"],\n select {\n width: 100%;\n padding: 10px 12px;\n border: 1px solid #e2e8f0;\n border-radius: var(--radius);\n font-size: 0.95rem;\n transition: border-color 0.3s;\n background-color: #f9fafb;\n }\n\n input[type=\"text\"]:focus,\n input[type=\"number\"]:focus,\n input[type=\"date\"]:focus,\n input[type=\"file\"]:focus,\n select:focus {\n outline: none;\n border-color: var(--primary);\n box-shadow: 0 0 0 3px rgba(140, 198, 63, 0.2);\n }\n\n button {\n background: var(--btn-bg);\n color: white;\n border: none;\n padding: 10px 16px;\n border-radius: var(--radius);\n cursor: pointer;\n transition: background 0.2s ease;\n font-weight: 500;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n button:hover {\n background: var(--btn-hover);\n }\n\n button i {\n margin-right: 8px;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n margin-top: 10px;\n }\n\n th, td {\n padding: 12px 10px;\n border-bottom: 1px solid #eee;\n text-align: left;\n font-size: 0.9rem;\n }\n\n th {\n background: #f8fafc;\n font-weight: 600;\n color: #555;\n }\n\n tr:hover {\n background-color: #f9fafb;\n }\n\n .color-box {\n display: inline-block;\n width: 16px;\n height: 16px;\n margin-right: 8px;\n vertical-align: middle;\n border: 1px solid #ccc;\n border-radius: 3px;\n }\n\n #noItemsMessage {\n color: #94a3b8;\n text-align: center;\n margin: 30px 0;\n font-size: 0.95rem;\n }\n\n .grid {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n gap: 20px;\n }\n\n .col-span-3 {\n grid-column: span 3;\n }\n\n .col-span-6 {\n grid-column: span 6;\n }\n\n .col-span-12 {\n grid-column: span 12;\n }\n\n .markup-group {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-top: 20px;\n background-color: #f9fafb;\n padding: 12px;\n border-radius: var(--radius);\n border: 1px dashed #e2e8f0;\n }\n\n .markup-group select,\n .markup-group input {\n margin-bottom: 0;\n }\n\n @media (max-width: 1024px) {\n .grid {\n grid-template-columns: repeat(6, 1fr);\n }\n .col-span-3, .col-span-6 {\n grid-column: span 6;\n }\n }\n\n @media (max-width: 768px) {\n .grid {\n grid-template-columns: 1fr;\n }\n .col-span-3, .col-span-6, .col-span-12 {\n grid-column: span 1;\n }\n }\n\n tfoot tr td {\n font-weight: 500;\n }\n\n .text-right {\n text-align: right;\n }\n\n .btn-add {\n width: 100%;\n margin-top: 6px;\n }\n\n <\/style>\n<\/head>\n\n<body>\n\n <div class=\"grid\">\n <!-- Left Column -->\n <div class=\"col-span-3\">\n <div class=\"card\">\n <h2><i class=\"fas fa-leaf\"><\/i> Add Flowers<\/h2>\n <div class=\"form-group\">\n <label for=\"flowerNameInput\">Flower Name:<\/label>\n <input type=\"text\" id=\"flowerNameInput\" placeholder=\"Enter flower name\" \/>\n <\/div>\n <div class=\"form-group\">\n <label for=\"flowerColorSelect\">Color:<\/label>\n <select id=\"flowerColorSelect\">\n <option value=\"Yellow\">Yellow<\/option>\n <option value=\"Orange\">Orange<\/option>\n <option value=\"Blue\">Blue<\/option>\n <option value=\"White\">White<\/option>\n <option value=\"Brown\">Brown (Caf\u00e9)<\/option>\n <option value=\"Fuchsia\">Fuchsia<\/option>\n <option value=\"Gray\">Gray<\/option>\n <option value=\"Lavender\">Lavender<\/option>\n <option value=\"Maroon\">Maroon (Marr\u00f3n)<\/option>\n <option value=\"Black\">Black<\/option>\n <option value=\"Mix\">Mix<\/option>\n <option value=\"Purple\">Purple<\/option>\n <option value=\"Red\">Red<\/option>\n <option value=\"Pink\">Pink<\/option>\n <option value=\"Salmon\">Salmon<\/option>\n <option value=\"Green\">Green<\/option>\n <option value=\"LightGreen\">Light Green<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <label for=\"priceInput\">Price per unit (<span class=\"currencySymbolDisplay\">\u20ac<\/span>):<\/label>\n <input type=\"number\" id=\"priceInput\" min=\"0\" step=\"0.01\" placeholder=\"0.00\" \/>\n <\/div>\n <div class=\"form-group\">\n <label for=\"quantityInput\">Quantity:<\/label>\n <input type=\"number\" id=\"quantityInput\" min=\"1\" step=\"1\" value=\"1\" \/>\n <\/div>\n <div class=\"form-group\">\n <label for=\"vatInput\">VAT (%):<\/label>\n <input type=\"number\" id=\"vatInput\" min=\"0\" step=\"0.01\" placeholder=\"e.g., 20 for 20%\" value=\"0\"\/>\n <\/div>\n <button class=\"btn-add\" id=\"addItemBtn\"><i class=\"fas fa-plus\"><\/i> Add to List<\/button>\n <\/div>\n <\/div>\n\n <!-- Center Column -->\n <div class=\"col-span-6\">\n <div class=\"card\">\n <h2><i class=\"fas fa-clipboard-list\"><\/i> Selected Flowers List<\/h2>\n <table id=\"itemsTableElement\" style=\"display:none;\">\n <thead>\n <tr>\n <th>Flower<\/th>\n <th>Color<\/th>\n <th>VAT (%)<\/th>\n <th>Price<\/th>\n <th>Quantity<\/th>\n <th>Subtotal<\/th>\n <th>Actions<\/th>\n <\/tr>\n <\/thead>\n <tbody><\/tbody>\n <tfoot>\n <tr>\n <td colspan=\"5\" class=\"text-right\">Subtotal without VAT:<\/td>\n <td id=\"totalWithoutVatDisplay\">\u20ac0.00<\/td>\n <td><\/td>\n <\/tr>\n <tr>\n <td colspan=\"5\" class=\"text-right\">Total VAT:<\/td>\n <td id=\"totalVatDisplay\">\u20ac0.00<\/td>\n <td><\/td>\n <\/tr>\n <tr>\n <td colspan=\"5\" class=\"text-right\">Base with VAT:<\/td>\n <td id=\"totalWithVatDisplay\">\u20ac0.00<\/td>\n <td><\/td>\n <\/tr>\n <\/tfoot>\n <\/table>\n <p id=\"noItemsMessage\">You haven't added any flowers yet.<\/p>\n <\/div>\n\n <div class=\"card\">\n <h2><i class=\"fas fa-dollar-sign\"><\/i> Currency Settings<\/h2>\n <div class=\"form-group\">\n <label for=\"currencySelect\">Select Currency:<\/label>\n <select id=\"currencySelect\">\n <option value=\"EUR\" data-symbol=\"\u20ac\">EUR (\u20ac)<\/option>\n <option value=\"USD\" data-symbol=\"$\">USD ($)<\/option>\n <option value=\"GBP\" data-symbol=\"\u00a3\">GBP (\u00a3)<\/option>\n <option value=\"CAD\" data-symbol=\"CA$\">CAD (CA$)<\/option>\n <option value=\"AUD\" data-symbol=\"A$\">AUD (A$)<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <div class=\"markup-group\">\n <select id=\"markupTypeSelect\" class=\"w-1\/2\">\n <option value=\"100\">Markup (+100%)<\/option>\n <option value=\"300\">3x (+300%)<\/option>\n <option value=\"350\">Floral Markup (+350%)<\/option>\n <option value=\"2.5\">Production (+2.5%)<\/option>\n <option value=\"150\">Multiplier 2.5x (+150%)<\/option>\n <option value=\"custom\">Custom Markup (%)<\/option>\n <\/select>\n <input type=\"number\"\n id=\"customMarkupInput\"\n min=\"0\"\n step=\"0.01\"\n placeholder=\"0.00\"\n style=\"display:none; width:120px;\" \/>\n <button id=\"generatePdfBtn\">\n <i class=\"fas fa-eye\"><\/i> View Invoice\n <\/button>\n <span id=\"finalPricePreview\" class=\"ml-4 font-semibold\">\u20ac0.00<\/span>\n <\/div>\n <\/div>\n\n <!-- Right Column -->\n <div class=\"col-span-3\">\n <div class=\"card\">\n <h2><i class=\"fas fa-user\"><\/i> Client Details<\/h2>\n <div class=\"form-group\">\n <label for=\"invoiceNumberInput\">Invoice Number:<\/label>\n <input type=\"text\" id=\"invoiceNumberInput\" placeholder=\"0001\" \/>\n <\/div>\n <div class=\"form-group\">\n <label for=\"invoiceDateInput\">Date:<\/label>\n <input type=\"date\" id=\"invoiceDateInput\" \/>\n <\/div>\n <div class=\"form-group\">\n <label for=\"clientNameInput\">Client Name:<\/label>\n <input type=\"text\" id=\"clientNameInput\" placeholder=\"Name\" \/>\n <\/div>\n <div class=\"form-group\">\n <label for=\"clientAddressInput\">Client Address:<\/label>\n <input type=\"text\" id=\"clientAddressInput\" placeholder=\"e.g., 123 Main St, Anytown, USA\" \/>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <h2><i class=\"fas fa-tag\"><\/i> Branding<\/h2>\n <div class=\"form-group\">\n <label for=\"logoFileInput\">Florist Logo:<\/label>\n <input type=\"file\" id=\"logoFileInput\" accept=\"image\/*\" \/>\n <\/div>\n <div class=\"form-group\">\n <label for=\"companyNameInput\">Company Name:<\/label>\n <input type=\"text\" id=\"companyNameInput\" placeholder=\"Your Florist LLC\" \/>\n <\/div>\n <div class=\"form-group\">\n <label for=\"companyPhoneInput\">Contact Phone:<\/label>\n <input type=\"text\" id=\"companyPhoneInput\" placeholder=\"+1 555 123 4567\" \/>\n <\/div>\n <div class=\"form-group\">\n <label for=\"companyTaxIdInput\">Tax ID \/ VAT No.:<\/label>\n <input type=\"text\" id=\"companyTaxIdInput\" placeholder=\"e.g., EIN, VAT ID\" \/>\n <\/div>\n <div class=\"form-group\">\n <label for=\"companyAddressInput\">Address:<\/label>\n <input type=\"text\" id=\"companyAddressInput\" placeholder=\"e.g., 456 Business Rd, Anytown, USA\" \/>\n <\/div>\n <div class=\"form-group\">\n <label for=\"companyEmailInput\">Email:<\/label>\n <input type=\"text\" id=\"companyEmailInput\" placeholder=\"info@yourflorist.com\" \/>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ jsPDF setup\n const { jsPDF } = window.jspdf;\n let logoDataUrl = null;\n\n \/\/ DOM Elements\n const logoFileInput = document.getElementById('logoFileInput');\n logoFileInput.addEventListener('change', e => {\n const file = e.target.files[0];\n if (file) {\n const reader = new FileReader();\n reader.onload = () => { logoDataUrl = reader.result; };\n reader.readAsDataURL(file);\n }\n });\n\n const companyNameInput = document.getElementById('companyNameInput');\n const companyPhoneInput = document.getElementById('companyPhoneInput');\n const companyTaxIdInput = document.getElementById('companyTaxIdInput');\n const companyAddressInput = document.getElementById('companyAddressInput');\n const companyEmailInput = document.getElementById('companyEmailInput');\n\n const invoiceNumberInput = document.getElementById('invoiceNumberInput');\n const invoiceDateInput = document.getElementById('invoiceDateInput');\n const clientNameInput = document.getElementById('clientNameInput');\n const clientAddressInput = document.getElementById('clientAddressInput');\n\n \/\/ Set default invoice date to today\n const today = new Date();\n const formattedDate = today.toISOString().substring(0, 10);\n invoiceDateInput.value = formattedDate;\n\n const colorHexMap = {\n \"Yellow\": \"#f1c40f\", \"Orange\": \"#e67e22\", \"Red\": \"#e74c3c\",\n \"Pink\": \"#fd79a8\", \"Blue\": \"#3498db\", \"Green\": \"#2ecc71\",\n \"Purple\": \"#9b59b6\", \"White\": \"#ecf0f1\", \"Black\": \"#2d3436\",\n \"Brown\": \"#6d4c41\", \"Lavender\": \"#b39ddb\", \"Maroon\": \"#8d6e63\",\n \"Mix\": \"#95a5a6\", \"Fuchsia\": \"#d63031\", \"Gray\": \"#7f8c8d\",\n \"Salmon\": \"#fa8072\", \"LightGreen\": \"#a8e063\"\n };\n\n const items = []; \/\/ Array to store added flower items\n const flowerNameInputEl = document.getElementById('flowerNameInput');\n const flowerColorSelectEl = document.getElementById('flowerColorSelect');\n const priceInputEl = document.getElementById('priceInput');\n const quantityInputEl = document.getElementById('quantityInput');\n const vatInputEl = document.getElementById('vatInput');\n const addItemBtnEl = document.getElementById('addItemBtn');\n\n const itemsTableEl = document.getElementById('itemsTableElement');\n const tableBodyEl = itemsTableEl.querySelector('tbody');\n const totalWithoutVatDisplayEl = document.getElementById('totalWithoutVatDisplay');\n const totalVatDisplayEl = document.getElementById('totalVatDisplay');\n const totalWithVatDisplayEl = document.getElementById('totalWithVatDisplay');\n const noItemsMessageEl = document.getElementById('noItemsMessage');\n\n const markupTypeSelectEl = document.getElementById('markupTypeSelect');\n const customMarkupInputEl = document.getElementById('customMarkupInput');\n const generatePdfBtnEl = document.getElementById('generatePdfBtn');\n const finalPricePreviewEl = document.getElementById('finalPricePreview');\n \n const currencySelectEl = document.getElementById('currencySelect');\n const currencySymbolDisplayElements = document.querySelectorAll('.currencySymbolDisplay');\n\n function getSelectedCurrencySymbol() {\n const selectedOption = currencySelectEl.options[currencySelectEl.selectedIndex];\n return selectedOption.dataset.symbol || currencySelectEl.value;\n }\n\n function updateCurrencyDisplays() {\n const symbol = getSelectedCurrencySymbol();\n currencySymbolDisplayElements.forEach(el => el.textContent = symbol);\n renderItems(); \/\/ Re-render items to update currency symbols in table\n updateFinalPricePreview(); \/\/ Update preview with new currency\n }\n currencySelectEl.addEventListener('change', updateCurrencyDisplays);\n\n\n function updateFinalPricePreview() {\n let markupPercent = parseFloat(markupTypeSelectEl.value);\n if (markupTypeSelectEl.value === 'custom') {\n markupPercent = parseFloat(customMarkupInputEl.value) || 0;\n }\n \n let previewTotal = 0;\n items.forEach(item => {\n const unitPriceWithMarkup = item.price * (1 + markupPercent \/ 100);\n const unitPriceWithMarkupAndVat = unitPriceWithMarkup * (1 + item.vat \/ 100);\n previewTotal += unitPriceWithMarkupAndVat * item.quantity;\n });\n const currencySymbol = getSelectedCurrencySymbol();\n finalPricePreviewEl.textContent = `${currencySymbol}${previewTotal.toFixed(2)}`;\n }\n\n markupTypeSelectEl.addEventListener('change', updateFinalPricePreview);\n customMarkupInputEl.addEventListener('input', updateFinalPricePreview);\n\n function renderItems() {\n tableBodyEl.innerHTML = '';\n const currencySymbol = getSelectedCurrencySymbol();\n\n if (!items.length) {\n itemsTableEl.style.display = 'none';\n noItemsMessageEl.style.display = 'block'; \/\/ Show 'block' instead of default ''\n updateTotalsDisplay();\n updateFinalPricePreview();\n return;\n }\n\n itemsTableEl.style.display = ''; \/\/ Show table\n noItemsMessageEl.style.display = 'none';\n\n items.forEach((item, index) => {\n const subtotal = item.price * item.quantity;\n const tr = document.createElement('tr');\n tr.innerHTML = `\n <td>${item.name}<\/td>\n <td><span class=\"color-box\" style=\"background:${colorHexMap[item.color] || '#ccc'}\"><\/span>${item.color}<\/td>\n <td>${item.vat.toFixed(2)}%<\/td>\n <td>${currencySymbol}${item.price.toFixed(2)}<\/td>\n <td>${item.quantity}<\/td>\n <td>${currencySymbol}${subtotal.toFixed(2)}<\/td>\n <td><button onclick=\"removeItem(${index})\"><i class=\"fas fa-trash\"><\/i><\/button><\/td>\n `;\n tableBodyEl.appendChild(tr);\n });\n\n updateTotalsDisplay();\n updateFinalPricePreview();\n }\n\n function updateTotalsDisplay() {\n let subtotalWithoutVat = 0;\n let totalVat = 0;\n const currencySymbol = getSelectedCurrencySymbol();\n\n items.forEach(item => {\n const itemSubtotal = item.price * item.quantity;\n subtotalWithoutVat += itemSubtotal;\n totalVat += itemSubtotal * (item.vat \/ 100);\n });\n\n const totalWithVat = subtotalWithoutVat + totalVat;\n\n totalWithoutVatDisplayEl.textContent = `${currencySymbol}${subtotalWithoutVat.toFixed(2)}`;\n totalVatDisplayEl.textContent = `${currencySymbol}${totalVat.toFixed(2)}`;\n totalWithVatDisplayEl.textContent = `${currencySymbol}${totalWithVat.toFixed(2)}`;\n }\n\n\n addItemBtnEl.addEventListener('click', () => {\n const name = flowerNameInputEl.value.trim();\n const color = flowerColorSelectEl.value;\n const price = parseFloat(priceInputEl.value) || 0;\n const quantity = parseInt(quantityInputEl.value) || 1;\n const vat = parseFloat(vatInputEl.value) || 0;\n\n if (!name || price <= 0 || quantity <= 0) {\n alert('Please complete all flower fields correctly.');\n return;\n }\n\n items.push({ name, color, price, quantity, vat });\n renderItems();\n\n \/\/ Reset input fields\n flowerNameInputEl.value = '';\n flowerColorSelectEl.value = 'Yellow'; \/\/ Default color\n priceInputEl.value = '';\n quantityInputEl.value = '1';\n vatInputEl.value = '0'; \/\/ Default VAT\n\n flowerNameInputEl.focus();\n });\n\n window.removeItem = function(index) { \/\/ Make it globally accessible for inline onclick\n items.splice(index, 1);\n renderItems();\n };\n\n markupTypeSelectEl.addEventListener('change', () => {\n customMarkupInputEl.style.display = markupTypeSelectEl.value === 'custom' ? 'block' : 'none';\n updateFinalPricePreview();\n });\n\n async function buildInvoicePdf(invoiceData) {\n const {\n number, date, client, company, items,\n basePriceWithMarkup, vatBreakdown, totalSaleAmount, markupPercent,\n logo, currencySymbol\n } = invoiceData;\n\n const { jsPDF } = window.jspdf;\n const doc = new jsPDF({ unit: 'pt', format: 'a4' });\n\n const pageW = doc.internal.pageSize.getWidth();\n const pageH = doc.internal.pageSize.getHeight(); \/\/ eslint-disable-line no-unused-vars\n const margin = 40;\n const contentWidth = pageW - margin * 2;\n\n \/\/ PDF Colors\n const colorBlack = '#000000';\n const colorDarkGrey = '#333333';\n const colorMediumGrey = '#777777';\n const colorLightGrey = '#CCCCCC';\n const colorVeryLightGrey = '#F0F0F0';\n\n let currentY = margin;\n let logoHeightWithPadding = 0;\n\n \/\/ 0. Logo (if provided)\n if (logo) {\n try {\n const img = new Image();\n img.src = logo;\n await new Promise((resolve, reject) => {\n img.onload = resolve;\n img.onerror = reject;\n });\n const maxLogoHeight = 40;\n const aspectRatio = img.width \/ img.height;\n let logoH = maxLogoHeight;\n let logoW = maxLogoHeight * aspectRatio;\n if (logoW > contentWidth \/ 4) { \/\/ Limit logo width\n logoW = contentWidth \/ 4;\n logoH = logoW \/ aspectRatio;\n }\n doc.addImage(img, img.src.startsWith('data:image\/jpeg') ? 'JPEG' : 'PNG', margin, currentY, logoW, logoH);\n logoHeightWithPadding = logoH + 15; \/\/ Add some padding below logo\n } catch (e) {\n console.error(\"Error loading logo for PDF:\", e);\n }\n }\n \n \/\/ 1. Invoice Number & Date (Top-Right)\n let headerContentY = currentY + 5; \n\n doc.setFont('helvetica', 'normal');\n doc.setFontSize(9);\n const invoiceInfoX = pageW - margin;\n let invoiceDetailsY = headerContentY;\n\n doc.setTextColor(colorMediumGrey);\n doc.text(`Invoice No.:`, invoiceInfoX, invoiceDetailsY, { align: 'right' });\n doc.setTextColor(colorDarkGrey);\n doc.setFont('helvetica', 'bold');\n doc.text(`${number || 'N\/A'}`, invoiceInfoX, invoiceDetailsY + 13, { align: 'right' });\n invoiceDetailsY += 28;\n\n doc.setFont('helvetica', 'normal');\n doc.setTextColor(colorMediumGrey);\n doc.text(`Date:`, invoiceInfoX, invoiceDetailsY, { align: 'right' });\n doc.setTextColor(colorDarkGrey);\n doc.setFont('helvetica', 'bold');\n doc.text(`${date || new Date().toLocaleDateString('en-US')}`, invoiceInfoX, invoiceDetailsY + 13, { align: 'right' });\n \n currentY = Math.max(currentY + logoHeightWithPadding, invoiceDetailsY + 13 + 15);\n\n\n \/\/ --- Separator Line ---\n doc.setDrawColor(colorLightGrey);\n doc.line(margin, currentY, pageW - margin, currentY);\n currentY += 20;\n\n \/\/ 2. Company (FROM) & Client (TO) Details\n const columnWidth = (contentWidth - 20) \/ 2;\n const fromX = margin;\n const toX = margin + columnWidth + 20;\n let fromY = currentY;\n let toY = currentY;\n const detailLineHeight = 11;\n const sectionTitleLineHeight = 15;\n\n doc.setFont('helvetica', 'bold');\n doc.setFontSize(9);\n doc.setTextColor(colorMediumGrey);\n doc.text('FROM:', fromX, fromY);\n fromY += sectionTitleLineHeight;\n\n doc.setFont('helvetica', 'bold');\n doc.setFontSize(10);\n doc.setTextColor(colorDarkGrey);\n if (company.name) {\n const companyNameLines = doc.splitTextToSize(company.name, columnWidth);\n doc.text(companyNameLines, fromX, fromY);\n fromY += companyNameLines.length * (doc.getLineHeightFactor() * doc.getFontSize());\n }\n\n doc.setFont('helvetica', 'normal');\n doc.setFontSize(9);\n doc.setTextColor(colorMediumGrey);\n if (company.address) {\n const companyAddrLines = doc.splitTextToSize(company.address, columnWidth);\n doc.text(companyAddrLines, fromX, fromY);\n fromY += companyAddrLines.length * detailLineHeight;\n }\n if (company.taxId) { doc.text(`Tax ID: ${company.taxId}`, fromX, fromY); fromY += detailLineHeight; }\n if (company.phone) { doc.text(`Tel: ${company.phone}`, fromX, fromY); fromY += detailLineHeight; }\n if (company.email) { doc.text(`Email: ${company.email}`, fromX, fromY); fromY += detailLineHeight; }\n\n doc.setFont('helvetica', 'bold');\n doc.setFontSize(9);\n doc.setTextColor(colorMediumGrey);\n doc.text('TO:', toX, toY);\n toY += sectionTitleLineHeight;\n\n doc.setFont('helvetica', 'bold');\n doc.setFontSize(10);\n doc.setTextColor(colorDarkGrey);\n if (client.name) {\n const clientNameLines = doc.splitTextToSize(client.name || 'Unspecified Client', columnWidth);\n doc.text(clientNameLines, toX, toY);\n toY += clientNameLines.length * (doc.getLineHeightFactor() * doc.getFontSize());\n }\n\n doc.setFont('helvetica', 'normal');\n doc.setFontSize(9);\n doc.setTextColor(colorMediumGrey);\n if (client.address) {\n const clientAddrLines = doc.splitTextToSize(client.address, columnWidth);\n doc.text(clientAddrLines, toX, toY);\n toY += clientAddrLines.length * detailLineHeight;\n }\n\n currentY = Math.max(fromY, toY) + 25;\n\n \/\/ 3. Items Table\n const head = [['Description', 'Color', 'Qty.', `Unit Price (${currencySymbol})`, 'VAT (%)', `Subtotal (${currencySymbol})`]];\n const body = items.map(item => {\n const unitPriceWithMarkup = item.price * (1 + markupPercent \/ 100);\n return [\n item.name, item.color, item.quantity,\n unitPriceWithMarkup.toFixed(2),\n `${item.vat.toFixed(2)}`, \/\/ Show item's specific VAT rate\n (unitPriceWithMarkup * item.quantity).toFixed(2)\n ];\n });\n\n doc.autoTable({\n head: head, body: body, startY: currentY,\n margin: { left: margin, right: margin },\n theme: 'grid',\n headStyles: {\n fillColor: colorVeryLightGrey, textColor: colorDarkGrey,\n fontStyle: 'bold', halign: 'center', fontSize: 9,\n cellPadding: {top: 6, right: 5, bottom: 6, left: 5},\n lineColor: colorLightGrey\n },\n styles: {\n font: 'helvetica', fontSize: 9, textColor: colorDarkGrey,\n cellPadding: {top: 5, right: 5, bottom: 5, left: 5},\n overflow: 'linebreak', lineColor: colorLightGrey\n },\n columnStyles: { \/\/ Adjust column widths as needed\n 0: { halign: 'left', cellWidth: 'auto' }, \/\/ Description\n 1: { halign: 'left', cellWidth: 70 }, \/\/ Color\n 2: { halign: 'center', cellWidth: 40 }, \/\/ Qty\n 3: { halign: 'right', cellWidth: 70 }, \/\/ Unit Price\n 4: { halign: 'center', cellWidth: 50 }, \/\/ VAT %\n 5: { halign: 'right', cellWidth: 80 } \/\/ Subtotal\n }\n });\n currentY = doc.lastAutoTable.finalY + 15;\n\n \/\/ 4. Totals Section\n const totalsData = [\n ['Subtotal (Taxable Amount):', `${currencySymbol}${basePriceWithMarkup.toFixed(2)}`]\n ];\n\n let totalVatFromBreakdown = 0;\n for (const rate in vatBreakdown) {\n totalsData.push([`VAT ${rate}%:`, `${currencySymbol}${vatBreakdown[rate].toFixed(2)}`]);\n totalVatFromBreakdown += vatBreakdown[rate];\n }\n if (Object.keys(vatBreakdown).length === 0 && basePriceWithMarkup > 0) { \/\/ If no VAT items but there's a subtotal\n totalsData.push([`Total VAT:`, `${currencySymbol}0.00`]);\n }\n\n\n totalsData.push(['TOTAL:', `${currencySymbol}${totalSaleAmount.toFixed(2)}`]);\n\n doc.autoTable({\n body: totalsData, startY: currentY,\n margin: { left: pageW \/ 2, right: margin }, \/\/ Align totals to the right half\n theme: 'plain',\n styles: {\n font: 'helvetica', fontSize: 9, textColor: colorDarkGrey,\n cellPadding: {top: 3, right: 5, bottom: 3, left: 5},\n halign: 'right'\n },\n columnStyles: {\n 0: { fontStyle: 'normal', halign: 'right' },\n 1: { fontStyle: 'bold', halign: 'right' }\n },\n didParseCell: function (data) {\n \/\/ Make the 'TOTAL:' row bold and larger\n if (data.row.index === totalsData.length - 1) { \n data.cell.styles.fontStyle = 'bold';\n data.cell.styles.fontSize = 11;\n if (data.column.index === 1) data.cell.styles.textColor = colorBlack; \/\/ Make total amount black\n }\n }\n });\n currentY = doc.lastAutoTable.finalY + 40;\n\n \/\/ 5. Footer\n doc.setFont('helvetica', 'normal');\n doc.setFontSize(8);\n doc.setTextColor(colorMediumGrey);\n const footerText = 'Thank you for your purchase.';\n const footerTextWidth = doc.getTextWidth(footerText);\n doc.text(footerText, (pageW - footerTextWidth) \/ 2, pageH - margin + 15); \/\/ Position at bottom center\n\n return doc;\n }\n\n\n\/* =============================================================\n BUTTON: VIEW INVOICE\n ============================================================= *\/\ngeneratePdfBtnEl.addEventListener('click', async () => {\n if (!items.length) {\n alert('Please add at least one flower before viewing the invoice.');\n return;\n }\n\n const markupPercent = markupTypeSelectEl.value === 'custom'\n ? (parseFloat(customMarkupInputEl.value) || 0)\n : parseFloat(markupTypeSelectEl.value);\n\n let basePriceWithMarkup = 0;\n const vatBreakdown = {}; \/\/ To store VAT amounts grouped by rate for PDF details\n\n items.forEach(item => {\n const unitPriceWithMarkup = item.price * (1 + markupPercent \/ 100);\n const lineBasePriceWithMarkup = unitPriceWithMarkup * item.quantity;\n const lineVatAmount = lineBasePriceWithMarkup * (item.vat \/ 100);\n\n basePriceWithMarkup += lineBasePriceWithMarkup;\n if (item.vat > 0) {\n vatBreakdown[item.vat.toFixed(2)] = (vatBreakdown[item.vat.toFixed(2)] || 0) + lineVatAmount;\n }\n });\n \n let totalVatAmount = 0;\n for(const rate in vatBreakdown){\n totalVatAmount += vatBreakdown[rate];\n }\n const totalSaleAmount = basePriceWithMarkup + totalVatAmount;\n const selectedCurrencySymbol = getSelectedCurrencySymbol();\n\n const invoiceDataObject = {\n number: invoiceNumberInput.value,\n date: invoiceDateInput.value,\n client: { name: clientNameInput.value, address: clientAddressInput.value },\n company: {\n name: companyNameInput.value,\n address: companyAddressInput.value,\n phone: companyPhoneInput.value,\n email: companyEmailInput.value,\n taxId: companyTaxIdInput.value\n },\n items: items, \/\/ Pass original items; markup is applied in PDF\n basePriceWithMarkup,\n vatBreakdown, \/\/ Pass the structured VAT breakdown\n totalSaleAmount,\n markupPercent,\n logo: logoDataUrl || null,\n currencySymbol: selectedCurrencySymbol\n };\n\n const doc = await buildInvoicePdf(invoiceDataObject);\n window.open(doc.output('bloburl'), '_blank');\n});\n\n\n\/* ---------- Initialize View ---------- *\/\nupdateCurrencyDisplays(); \/\/ Initial call to set currency symbols\nrenderItems();\nupdateFinalPricePreview();\n\n <\/script>\n<\/body>\n<\/html><\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-3 fusion-flex-container has-pattern-background has-mask-background nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-padding-top:20px;--awb-padding-bottom:50px;--awb-background-color:var(--awb-color2);--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1352px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-2 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-text fusion-text-3 fusion-text-no-margin\" style=\"--awb-margin-bottom:20px;\"><h2 style=\"text-align: center; font-size: 30px; color: #000000;\" data-fusion-font=\"true\">How does our pricing calculator for florists work?<\/h2>\n<\/div><ul style=\"--awb-size:15px;--awb-iconcolor:var(--awb-color1);--awb-line-height:25.5px;--awb-icon-width:25.5px;--awb-icon-height:25.5px;--awb-icon-margin:10.5px;--awb-content-margin:36px;--awb-circlecolor:var(--awb-color5);--awb-circle-yes-font-size:13.2px;\" class=\"fusion-checklist fusion-checklist-4 fusion-checklist-default type-numbered\"><li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-yes\">1<\/span><div class=\"fusion-li-item-content\">\n<p><strong>Add the products or flowers<\/strong> you are going to sell: indicate the unit price, the quantity and the corresponding VAT rate.<\/p>\n<\/div><\/li><li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-yes\">2<\/span><div class=\"fusion-li-item-content\">\n<p><strong>Personalize your invoice<\/strong> (optional): add your florist’s data and logo to appear on the final document.<\/p>\n<\/div><\/li><li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-yes\">3<\/span><div class=\"fusion-li-item-content\">\n<p><strong>Add customer data<\/strong> (optional): if you want them to appear on the invoice, you can include their name, address, etc.<\/p>\n<\/div><\/li><li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-yes\">4<\/span><div class=\"fusion-li-item-content\">\n<p><strong>Select your profit margin<\/strong> or enter a custom percentage. You will see in real time how the final price including VAT is calculated.<\/p>\n<\/div><\/li><li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-yes\">5<\/span><div class=\"fusion-li-item-content\">\n<p><strong>Generate and download or print a professional and personalized invoice<\/strong> ready to deliver to your customer or send by email.<\/p>\n<\/div><\/li><\/ul><\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-4 fusion-flex-container has-pattern-background has-mask-background nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-sizes-bottom:0px;--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-padding-top:20px;--awb-padding-bottom:100px;--awb-margin-bottom-small:0px;--awb-background-color:var(--awb-color2);--awb-background-color-small:var(--awb-color2);--awb-background-image:linear-gradient(180deg, rgba(255,255,255,0) 51%,var(--awb-color1) 100%);--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1352px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-3 fusion_builder_column_1_3 1_3 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:5.76%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><i class=\"fb-icon-element-1 fb-icon-element fontawesome-icon fa-coins fas circle-yes\" style=\"--awb-circlecolor-hover:var(--awb-color5);--awb-circlebordercolor-hover:var(--awb-color8);--awb-circlebordersize:1px;--awb-font-size:28.16px;--awb-width:56.32px;--awb-height:56.32px;--awb-line-height:54.32px;--awb-margin-top:0;--awb-margin-right:0;--awb-margin-bottom:0;--awb-margin-left:0;--awb-align-self:center;\"><\/i><div class=\"fusion-text fusion-text-4 fusion-text-no-margin\" style=\"--awb-margin-top:20px;--awb-margin-bottom:20px;\"><h3 class=\"fusion-responsive-typography-calculated\" style=\"font-size: 20px; text-align: center; --fontsize: 20; line-height: 1.2; --minfontsize: 20; color: var(--awb-color8);\" data-fusion-font=\"true\" data-fontsize=\"20\" data-lineheight=\"24px\">Automatic Margin Application<\/h3>\n<\/div><div class=\"fusion-text fusion-text-5\"><p class=\"\" style=\"text-align: center;\" data-start=\"177\" data-end=\"284\">Define your profit margin and the tool applies it directly before VAT, without manual calculations.<\/p>\n<\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-4 fusion_builder_column_1_3 1_3 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:5.76%;--awb-width-medium:50%;--awb-order-medium:0;--awb-spacing-right-medium:3.84%;--awb-spacing-left-medium:3.84%;--awb-width-small:50%;--awb-order-small:0;--awb-spacing-right-small:3.84%;--awb-spacing-left-small:3.84%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><i class=\"fb-icon-element-2 fb-icon-element fontawesome-icon fa-file-invoice fas circle-yes\" style=\"--awb-circlecolor-hover:var(--awb-color5);--awb-circlebordercolor-hover:var(--awb-color8);--awb-circlebordersize:1px;--awb-font-size:28.16px;--awb-width:56.32px;--awb-height:56.32px;--awb-line-height:54.32px;--awb-margin-top:0;--awb-margin-right:0;--awb-margin-bottom:0;--awb-margin-left:0;--awb-align-self:center;\"><\/i><div class=\"fusion-text fusion-text-6 fusion-text-no-margin\" style=\"--awb-margin-top:20px;--awb-margin-bottom:20px;\"><h3 class=\"fusion-responsive-typography-calculated\" style=\"font-size: 20px; text-align: center; --fontsize: 20; line-height: 1.2; --minfontsize: 20; color: var(--awb-color8);\" data-fusion-font=\"true\" data-fontsize=\"20\" data-lineheight=\"24px\">\u202fPersonalized PDF Invoice<\/h3>\n<\/div><div class=\"fusion-text fusion-text-7\"><p style=\"text-align: center;\">Genera una factura clara y lista para enviar, con tus datos, el branding de tu florister\u00eda, desglose de IVA y totales, en un solo clic.<\/p>\n<\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-5 fusion_builder_column_1_3 1_3 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:5.76%;--awb-width-medium:50%;--awb-order-medium:0;--awb-spacing-right-medium:3.84%;--awb-spacing-left-medium:3.84%;--awb-width-small:50%;--awb-order-small:0;--awb-spacing-right-small:3.84%;--awb-spacing-left-small:3.84%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><i class=\"fb-icon-element-3 fb-icon-element fontawesome-icon fa-print fas circle-yes\" style=\"--awb-circlecolor-hover:var(--awb-color5);--awb-circlebordercolor-hover:var(--awb-color8);--awb-circlebordersize:1px;--awb-font-size:28.16px;--awb-width:56.32px;--awb-height:56.32px;--awb-line-height:54.32px;--awb-margin-top:0;--awb-margin-right:0;--awb-margin-bottom:0;--awb-margin-left:0;--awb-align-self:center;\"><\/i><div class=\"fusion-text fusion-text-8 fusion-text-no-margin\" style=\"--awb-margin-top:20px;--awb-margin-bottom:20px;\"><h3 style=\"font-size: 20px; color: var(--awb-color8); text-align: center;\" data-fusion-font=\"true\">Preview and Print<\/h3>\n<\/div><div class=\"fusion-text fusion-text-9\"><p style=\"text-align: center;\">Preview the final price in real time and send the invoice directly to print if needed.<\/p>\n<\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-6 fusion_builder_column_1_3 1_3 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:5.76%;--awb-width-medium:50%;--awb-order-medium:0;--awb-spacing-right-medium:3.84%;--awb-spacing-left-medium:3.84%;--awb-width-small:50%;--awb-order-small:0;--awb-spacing-right-small:3.84%;--awb-spacing-left-small:3.84%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><i class=\"fb-icon-element-4 fb-icon-element fontawesome-icon fa-globe fas circle-yes\" style=\"--awb-circlecolor-hover:var(--awb-color5);--awb-circlebordercolor-hover:var(--awb-color8);--awb-circlebordersize:1px;--awb-font-size:28.16px;--awb-width:56.32px;--awb-height:56.32px;--awb-line-height:54.32px;--awb-margin-top:0;--awb-margin-right:0;--awb-margin-bottom:0;--awb-margin-left:0;--awb-align-self:center;\"><\/i><div class=\"fusion-text fusion-text-10 fusion-text-no-margin\" style=\"--awb-margin-top:20px;--awb-margin-bottom:20px;\"><h3 style=\"font-size: 20px; color: var(--awb-color8); text-align: center;\" data-fusion-font=\"true\">Browser-Based<\/h3>\n<\/div><div class=\"fusion-text fusion-text-11\"><p class=\"\" style=\"text-align: center;\" data-start=\"617\" data-end=\"717\">You don’t need to install anything. Everything is calculated directly in your browser in a fast, private and simple way.<\/p>\n<\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-7 fusion_builder_column_1_3 1_3 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:5.76%;--awb-width-medium:50%;--awb-order-medium:0;--awb-spacing-right-medium:3.84%;--awb-spacing-left-medium:3.84%;--awb-width-small:50%;--awb-order-small:0;--awb-spacing-right-small:3.84%;--awb-spacing-left-small:3.84%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><i class=\"fb-icon-element-5 fb-icon-element fontawesome-icon fa-seedling fas circle-yes\" style=\"--awb-circlecolor-hover:var(--awb-color5);--awb-circlebordercolor-hover:var(--awb-color8);--awb-circlebordersize:1px;--awb-font-size:28.16px;--awb-width:56.32px;--awb-height:56.32px;--awb-line-height:54.32px;--awb-margin-top:0;--awb-margin-right:0;--awb-margin-bottom:0;--awb-margin-left:0;--awb-align-self:center;\"><\/i><div class=\"fusion-text fusion-text-12 fusion-text-no-margin\" style=\"--awb-margin-top:20px;--awb-margin-bottom:20px;\"><h3 style=\"font-size: 20px; color: var(--awb-color8); text-align: center;\" data-fusion-font=\"true\">Designed for Florists<\/h3>\n<\/div><div class=\"fusion-text fusion-text-13\"><p style=\"text-align: center;\">The calculator is adapted to the real needs of the sector: bouquets, centerpieces, arrangements, events…<\/p>\n<\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-8 fusion_builder_column_1_3 1_3 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:5.76%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><i class=\"fb-icon-element-6 fb-icon-element fontawesome-icon fa-lock fas circle-yes\" style=\"--awb-circlecolor-hover:var(--awb-color5);--awb-circlebordercolor-hover:var(--awb-color8);--awb-circlebordersize:1px;--awb-font-size:28.16px;--awb-width:56.32px;--awb-height:56.32px;--awb-line-height:54.32px;--awb-margin-top:0;--awb-margin-right:0;--awb-margin-bottom:0;--awb-margin-left:0;--awb-align-self:center;\"><\/i><div class=\"fusion-text fusion-text-14 fusion-text-no-margin\" style=\"--awb-margin-top:20px;--awb-margin-bottom:20px;\"><h3 style=\"font-size: 20px; color: var(--awb-color8); text-align: center;\" data-fusion-font=\"true\">\u202fNo Registration and 100% Private<\/h3>\n<\/div><div class=\"fusion-text fusion-text-15\"><p style=\"text-align: center;\">We do not store your data or your invoices. It is 100% private: you make the calculation, you keep it.<\/p>\n<\/div><\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-5 fusion-flex-container has-pattern-background has-mask-background nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-padding-bottom:100px;--awb-background-color:var(--awb-color1);--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1352px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-9 fusion_builder_column_1_1 1_1 fusion-flex-column fusion-column-inner-bg-wrapper\" style=\"--awb-padding-top:20px;--awb-padding-right:40px;--awb-padding-bottom:20px;--awb-padding-left:40px;--awb-overflow:hidden;--awb-inner-bg-color:var(--awb-color5);--awb-inner-bg-color-hover:var(--awb-color5);--awb-inner-bg-size:cover;--awb-border-radius:7px 7px 7px 7px;--awb-inner-bg-border-radius:7px 7px 7px 7px;--awb-inner-bg-overflow:hidden;--awb-transform:scaleX(1) scaleY(1);--awb-transform-hover:scaleX(1.02) scaleY(1.02);--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><span class=\"fusion-column-inner-bg hover-type-none\"><a class=\"fusion-column-anchor\" href=\"https:\/\/go.verdnatura.es\/register-app-c\" rel=\"noopener noreferrer\" target=\"_blank\"><span class=\"fusion-column-inner-bg-image\"><\/span><\/a><\/span><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-text fusion-text-16\"><p style=\"text-align: center;\"><b style=\"color: #ffffff; font-size: 25px;\" data-fusion-font=\"true\">Not yet a Verdnatura customer?<\/b><\/p>\n<\/div><div class=\"fusion-text fusion-text-17\"><p style=\"text-align: center; color: #ffffff;\"><strong>Access to the largest and most competitive selection of wholesale florist products in Spain.<\/strong><br \/>\n<strong>Competitive prices, variety, professional service and everything you need to run and grow your floral business in one place.<\/strong><\/p>\n<\/div><div style=\"text-align:center;\"><a class=\"fusion-button button-flat fusion-button-default-size button-custom fusion-button-default button-1 fusion-button-default-span fusion-button-default-type\" style=\"--button_accent_color:var(--awb-color1);--button_accent_hover_color:var(--awb-color1);--button_border_hover_color:var(--awb-color1);--button_gradient_top_color:var(--awb-color8);--button_gradient_bottom_color:var(--awb-color8);--button_gradient_top_color_hover:hsla(var(--awb-color4-h),var(--awb-color4-s),calc(var(--awb-color4-l) - 12%),var(--awb-color4-a));--button_gradient_bottom_color_hover:hsla(var(--awb-color4-h),var(--awb-color4-s),calc(var(--awb-color4-l) - 12%),var(--awb-color4-a));\" target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\/\/go.verdnatura.es\/register-app-c-en\"><span class=\"fusion-button-text\">I want to become a customer<\/span><\/a><\/div><\/div><\/div><\/div><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"100-width.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-24894","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Pricing + VAT Calculator for Florists - Verdnatura<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/verdnatura.info\/en\/forist-pricing-calculator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pricing + VAT Calculator for Florists - Verdnatura\" \/>\n<meta property=\"og:url\" content=\"https:\/\/verdnatura.info\/en\/forist-pricing-calculator\/\" \/>\n<meta property=\"og:site_name\" content=\"Verdnatura\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-07T05:28:45+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/verdnatura.info\/en\/forist-pricing-calculator\/\",\"url\":\"https:\/\/verdnatura.info\/en\/forist-pricing-calculator\/\",\"name\":\"Pricing + VAT Calculator for Florists - Verdnatura\",\"isPartOf\":{\"@id\":\"https:\/\/verdnatura.info\/en\/#website\"},\"datePublished\":\"2025-10-06T10:39:48+00:00\",\"dateModified\":\"2025-10-07T05:28:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/verdnatura.info\/en\/forist-pricing-calculator\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/verdnatura.info\/en\/forist-pricing-calculator\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/verdnatura.info\/en\/forist-pricing-calculator\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/verdnatura.info\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Pricing + VAT Calculator for Florists\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/verdnatura.info\/en\/#website\",\"url\":\"https:\/\/verdnatura.info\/en\/\",\"name\":\"Verdnatura\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/verdnatura.info\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pricing + VAT Calculator for Florists - Verdnatura","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/verdnatura.info\/en\/forist-pricing-calculator\/","og_locale":"en_US","og_type":"article","og_title":"Pricing + VAT Calculator for Florists - Verdnatura","og_url":"https:\/\/verdnatura.info\/en\/forist-pricing-calculator\/","og_site_name":"Verdnatura","article_modified_time":"2025-10-07T05:28:45+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/verdnatura.info\/en\/forist-pricing-calculator\/","url":"https:\/\/verdnatura.info\/en\/forist-pricing-calculator\/","name":"Pricing + VAT Calculator for Florists - Verdnatura","isPartOf":{"@id":"https:\/\/verdnatura.info\/en\/#website"},"datePublished":"2025-10-06T10:39:48+00:00","dateModified":"2025-10-07T05:28:45+00:00","breadcrumb":{"@id":"https:\/\/verdnatura.info\/en\/forist-pricing-calculator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/verdnatura.info\/en\/forist-pricing-calculator\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/verdnatura.info\/en\/forist-pricing-calculator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/verdnatura.info\/en\/"},{"@type":"ListItem","position":2,"name":"Pricing + VAT Calculator for Florists"}]},{"@type":"WebSite","@id":"https:\/\/verdnatura.info\/en\/#website","url":"https:\/\/verdnatura.info\/en\/","name":"Verdnatura","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/verdnatura.info\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/pages\/24894","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/comments?post=24894"}],"version-history":[{"count":1,"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/pages\/24894\/revisions"}],"predecessor-version":[{"id":24895,"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/pages\/24894\/revisions\/24895"}],"wp:attachment":[{"href":"https:\/\/verdnatura.info\/en\/wp-json\/wp\/v2\/media?parent=24894"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}