{"id":12910,"date":"2025-02-03T11:07:52","date_gmt":"2025-02-03T04:07:52","guid":{"rendered":"https:\/\/www.bubbdrinks.com\/?page_id=12910"},"modified":"2025-02-03T17:32:33","modified_gmt":"2025-02-03T10:32:33","slug":"fee","status":"publish","type":"page","link":"https:\/\/www.bubbdrinks.com\/en\/fee\/","title":{"rendered":"FEE"},"content":{"rendered":"
\n\t
\n\t\t
\n\t\t\t\n\n\n \n \n Payment Form<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n background-color: #f4f4f9;\n }\n\n .payment-form {\n max-width: 800px;\n margin: 30px auto;\n padding: 20px;\n background-color: white;\n border-radius: 8px;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n }\n\n h1 {\n text-align: center;\n margin-bottom: 20px;\n }\n\n label {\n display: block;\n margin: 10px 0 5px;\n }\n\n select, input, button {\n width: 100%;\n padding: 10px;\n margin: 5px 0;\n border-radius: 5px;\n border: 1px solid #ccc;\n }\n\n button {\n background-color: #28a745;\n color: white;\n font-size: 16px;\n cursor: pointer;\n border: none;\n }\n\n button:hover {\n background-color: #218838;\n }\n\n #paymentHistory {\n margin-top: 30px;\n border-top: 1px solid #ddd;\n padding-top: 10px;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n }\n\n th, td {\n padding: 10px;\n text-align: left;\n border: 1px solid #ddd;\n }\n\n th {\n background-color: #f2f2f2;\n }\n\n .fees {\n margin-top: 20px;\n font-size: 16px;\n }\n\n .fees span {\n font-weight: bold;\n }\n\n \/* Highlight the total fee *\/\n .highlight-total-fee {\n font-size: 18px;\n font-weight: bold;\n color: #fff;\n background-color: #dc3545; \/* Red background to make it stand out *\/\n padding: 8px;\n border-radius: 5px;\n }\n\n @media (max-width: 600px) {\n .payment-form {\n padding: 10px;\n }\n\n select, input, button {\n width: 100%;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"payment-form\">\n <h1>Submit Payment<\/h1>\n\n <label for=\"paymentMonth\">Select Month:<\/label>\n <select id=\"paymentMonth\">\n <option value=\"\">Select Month<\/option>\n <option value=\"January\">January<\/option>\n <option value=\"February\">February<\/option>\n <option value=\"March\">March<\/option>\n <option value=\"April\">April<\/option>\n <option value=\"May\">May<\/option>\n <option value=\"June\">June<\/option>\n <option value=\"July\">July<\/option>\n <option value=\"August\">August<\/option>\n <option value=\"September\">September<\/option>\n <option value=\"October\">October<\/option>\n <option value=\"November\">November<\/option>\n <option value=\"December\">December<\/option>\n <\/select>\n\n <label for=\"totalSales\">Enter Total Sales:<\/label>\n <input type=\"number\" id=\"totalSales\" placeholder=\"Total Sales\" oninput=\"calculateFees()\">\n\n <label for=\"receiptUpload\">Upload Receipt:<\/label>\n <input type=\"file\" id=\"receiptUpload\">\n\n <div class=\"fees\">\n <p>Royalty Fee (3%): <span id=\"royaltyFee\">$0.00<\/span><\/p>\n <p>Marketing Fee (1%): <span id=\"marketingFee\">$0.00<\/span><\/p>\n <p>Total Fee: <span id=\"totalFee\" class=\"highlight-total-fee\">$0.00<\/span><\/p>\n <\/div>\n\n <button onclick=\"submitPayment()\">Submit Payment<\/button>\n\n <div id=\"paymentHistory\">\n <h3>Payment History<\/h3>\n <table id=\"historyTable\">\n <thead>\n <tr>\n <th>Month<\/th>\n <th>Amount<\/th>\n <th>Payment Date<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <!-- Payment history will be displayed here -->\n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\n <script>\n function calculateFees() {\n const totalSales = parseFloat(document.getElementById('totalSales').value);\n \n if (isNaN(totalSales) || totalSales <= 0) {\n document.getElementById('royaltyFee').textContent = '$0.00';\n document.getElementById('marketingFee').textContent = '$0.00';\n document.getElementById('totalFee').textContent = '$0.00';\n return;\n }\n\n const royaltyFee = totalSales * 0.03; \/\/ 3% royalty fee\n const marketingFee = totalSales * 0.01; \/\/ 1% marketing fee\n const totalFee = royaltyFee + marketingFee;\n\n document.getElementById('royaltyFee').textContent = `$${royaltyFee.toFixed(2)}`;\n document.getElementById('marketingFee').textContent = `$${marketingFee.toFixed(2)}`;\n document.getElementById('totalFee').textContent = `$${totalFee.toFixed(2)}`;\n }\n\n function submitPayment() {\n const month = document.getElementById('paymentMonth').value;\n const totalSales = parseFloat(document.getElementById('totalSales').value);\n const receiptFile = document.getElementById('receiptUpload').files[0];\n\n if (!month) {\n alert('Please select a month.');\n return;\n }\n\n if (isNaN(totalSales) || totalSales <= 0) {\n alert('Please enter a valid sales amount.');\n return;\n }\n\n if (!receiptFile) {\n alert('Please upload a payment receipt.');\n return;\n }\n\n const royaltyFee = totalSales * 0.03; \/\/ 3% royalty fee\n const marketingFee = totalSales * 0.01; \/\/ 1% marketing fee\n const totalFee = royaltyFee + marketingFee;\n\n if (totalFee <= 0) {\n alert('Please calculate the fees before submitting.');\n return;\n }\n\n const paymentDate = new Date().toLocaleDateString();\n\n \/\/ Save to localStorage (simulating database)\n let history = JSON.parse(localStorage.getItem(\"paymentHistory\")) || [];\n history.push({ month, amount: totalFee.toFixed(2), date: paymentDate });\n localStorage.setItem(\"paymentHistory\", JSON.stringify(history));\n\n \/\/ Update history table (only display the last 12 records)\n updatePaymentHistory();\n\n \/\/ Send email notification to WooCommerce email\n sendPaymentEmailNotification(month, totalFee.toFixed(2), paymentDate);\n\n alert(`Payment submitted for ${month}. An email notification has been sent.`);\n }\n\n function sendPaymentEmailNotification(month, amount, paymentDate) {\n const data = {\n action: 'send_payment_email',\n month: month,\n amount: amount,\n paymentDate: paymentDate\n };\n\n jQuery.post(ajaxurl, data, function(response) {\n console.log('Payment email sent successfully:', response);\n }).fail(function(xhr, status, error) {\n console.error('Error sending email:', error);\n });\n }\n\n function updatePaymentHistory() {\n const historyTable = document.getElementById('historyTable').getElementsByTagName('tbody')[0];\n const history = JSON.parse(localStorage.getItem(\"paymentHistory\")) || [];\n\n \/\/ Clear the table before adding new rows\n historyTable.innerHTML = '';\n\n \/\/ Loop through the last 12 months of history\n for (let i = 0; i < Math.min(history.length, 12); i++) {\n const record = history[i];\n const row = historyTable.insertRow();\n row.innerHTML = `<td>${record.month}<\/td><td>$${record.amount}<\/td><td>${record.date}<\/td>`;\n }\n }\n\n \/\/ Initial call to display payment history when page loads\n window.onload = updatePaymentHistory;\n <\/script>\n<\/body>\n<\/html>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"Payment Form Submit Payment Select Month: Select Month January February March April May June July August September October November December Enter Total Sales: Upload Receipt: Royalty Fee (3%): $0.00 Marketing Fee (1%): $0.00 Total Fee: $0.00 Submit Payment Payment History Month Amount Payment Date","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-12910","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.bubbdrinks.com\/en\/wp-json\/wp\/v2\/pages\/12910","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bubbdrinks.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bubbdrinks.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bubbdrinks.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bubbdrinks.com\/en\/wp-json\/wp\/v2\/comments?post=12910"}],"version-history":[{"count":0,"href":"https:\/\/www.bubbdrinks.com\/en\/wp-json\/wp\/v2\/pages\/12910\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.bubbdrinks.com\/en\/wp-json\/wp\/v2\/media?parent=12910"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}