Fuel Card Optimizer<\/title>\r\n <style>\r\n :root {\r\n --primary: #2563eb;\r\n --surface: #ffffff;\r\n --background: #f1f5f9;\r\n --text-main: #1e293b;\r\n --text-sub: #64748b;\r\n --border: #e2e8f0;\r\n --green-text: #15803d;\r\n --green-bg: #dcfce7;\r\n --red-text: #b91c1c;\r\n --red-bg: #fee2e2;\r\n }\r\n\r\n body {\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n background-color: var(--background);\r\n color: var(--text-main);\r\n margin: 0;\r\n padding: 20px;\r\n }\r\n\r\n .container {\r\n max-width: 1100px;\r\n margin: 0 auto;\r\n }\r\n\r\n h1 {\r\n text-align: center;\r\n margin-bottom: 2rem;\r\n color: var(--text-main);\r\n }\r\n\r\n \/* Input Panel *\/\r\n .controls-panel {\r\n background: var(--surface);\r\n padding: 1.5rem;\r\n border-radius: 12px;\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\r\n margin-bottom: 2rem;\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 1rem;\r\n align-items: end;\r\n }\r\n\r\n @media (min-width: 768px) {\r\n .controls-panel {\r\n grid-template-columns: 2fr 1fr 1fr;\r\n }\r\n }\r\n\r\n .form-group {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.5rem;\r\n }\r\n\r\n label {\r\n font-size: 0.85rem;\r\n font-weight: 700;\r\n color: var(--text-sub);\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n }\r\n\r\n select, input {\r\n padding: 0.75rem;\r\n border: 1px solid var(--border);\r\n border-radius: 8px;\r\n font-size: 1rem;\r\n background: #fff;\r\n width: 100%;\r\n box-sizing: border-box;\r\n }\r\n\r\n button {\r\n background-color: var(--primary);\r\n color: white;\r\n padding: 0.75rem 1.5rem;\r\n border: none;\r\n border-radius: 8px;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n height: 46px; \/* Match input height *\/\r\n }\r\n\r\n button:hover {\r\n background-color: #1d4ed8;\r\n transform: translateY(-1px);\r\n }\r\n\r\n \/* Results Grid *\/\r\n #resultsArea {\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 1.5rem;\r\n }\r\n\r\n @media (min-width: 850px) {\r\n #resultsArea {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n\r\n \/* Card Styling *\/\r\n .card {\r\n background: var(--surface);\r\n border-radius: 12px;\r\n border: 1px solid var(--border);\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n transition: transform 0.2s, box-shadow 0.2s;\r\n }\r\n\r\n .card:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\r\n border-color: #cbd5e1;\r\n }\r\n\r\n .card-header {\r\n padding: 1.25rem;\r\n border-bottom: 1px solid var(--border);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n background: #f8fafc;\r\n }\r\n\r\n .card-title {\r\n font-size: 1.1rem;\r\n font-weight: 700;\r\n color: var(--text-main);\r\n margin: 0;\r\n }\r\n\r\n .roi-badge {\r\n font-size: 0.9rem;\r\n font-weight: 700;\r\n padding: 0.25rem 0.75rem;\r\n border-radius: 999px;\r\n white-space: nowrap;\r\n }\r\n\r\n .bg-green { background: var(--green-bg); color: var(--green-text); }\r\n .bg-red { background: var(--red-bg); color: var(--red-text); }\r\n\r\n .card-body {\r\n padding: 1.25rem;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 1.5rem;\r\n }\r\n\r\n .metric {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .metric-label {\r\n font-size: 0.75rem;\r\n color: var(--text-sub);\r\n text-transform: uppercase;\r\n margin-bottom: 0.25rem;\r\n }\r\n\r\n .metric-value {\r\n font-size: 1.25rem;\r\n font-weight: 700;\r\n }\r\n\r\n .metric-sub {\r\n font-size: 0.75rem;\r\n color: var(--text-sub);\r\n margin-top: 2px;\r\n }\r\n\r\n .savings-value { font-size: 1.5rem; }\r\n\r\n .card-footer {\r\n margin-top: auto;\r\n background: #fdfdfd;\r\n border-top: 1px solid var(--border);\r\n padding: 1rem 1.25rem;\r\n }\r\n\r\n .info-title {\r\n font-size: 0.75rem;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n color: var(--text-sub);\r\n margin-bottom: 0.5rem;\r\n display: block;\r\n }\r\n\r\n .info-text {\r\n font-size: 0.85rem;\r\n color: var(--text-main);\r\n white-space: pre-wrap;\r\n line-height: 1.5;\r\n }\r\n\r\n .text-green { color: var(--green-text); }\r\n .text-red { color: var(--red-text); }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"container\">\r\n <h1>Fuel Card Savings Calculator<\/h1>\r\n\r\n <div class=\"controls-panel\">\r\n <div class=\"form-group\">\r\n <label for=\"cardSelect\">Select Card<\/label>\r\n <select id=\"cardSelect\">\r\n <option value=\"\" selected>Compare All Cards<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"monthlySpend\">Monthly Fuel Spend (\u20b9)<\/label>\r\n <input type=\"number\" id=\"monthlySpend\" placeholder=\"e.g. 5000\" min=\"0\">\r\n <\/div>\r\n\r\n <button onclick=\"calculate()\">Calculate<\/button>\r\n <\/div>\r\n\r\n <div id=\"resultsArea\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n const cards = [\r\n {\r\n name: \"RBL IndianOil XTRA\",\r\n pointsPerSpend: 15, spendBlock: 100, valuePerPoint: 0.50, monthlyCapRP: 2000,\r\n surchargeWaiverMax: 200, annualFee: 1500, waiverThreshold: 275000,\r\n info: \"Earnings: Earn 7.5% in reward points (15 RP per \u20b9100, 1 RP = \u20b90.50) on fuel spends at IndianOil outlets.\\nLimitations: Monthly reward earning is capped at 1,000 RP, applicable on fuel spends up to ~\u20b96,666 per month.\\nSurcharge: 1% fuel surcharge waiver on transactions between \u20b9500 and \u20b94,000.\\nFees: Annual Fee \u20b91,500 + GST; waived on spending \u20b92.75 Lakhs.\"\r\n },\r\n {\r\n name: \"SBI BPCL Octane\",\r\n pointsPerSpend: 25, spendBlock: 100, valuePerPoint: 0.25, monthlyCapRP: 2500,\r\n surchargeWaiverMax: 100, annualFee: 1499, waiverThreshold: 200000,\r\n info: \"Earnings: Earn 6.25% in reward points (25 RP per \u20b9100, 1 RP = \u20b90.25) on fuel spends at BPCL stations.\\nLimitations: Monthly reward earning is capped at 2,500 RP (~\u20b910,000 spend).\\nSurcharge: 1% waiver on txns up to \u20b94,000.\\nFees: Annual Fee \u20b91,499 + GST; waived on spending \u20b92 Lakhs.\"\r\n },\r\n {\r\n name: \"IDFC FIRST Power+\",\r\n pointsPerSpend: 30, spendBlock: 150, valuePerPoint: 0.25, monthlyCapRP: 2400,\r\n surchargeWaiverMax: 0, annualFee: 499, waiverThreshold: 150000, hpPayBenefit: 0.015,\r\n info: \"Earnings: Earn 5.0% (30 RP\/\u20b9150) at HPCL + 1.5% extra via HP Pay App.\\nLimitations: Monthly cap 2,400 RP (~\u20b912,000 spend).\\nSurcharge: Surcharge waiver discontinued.\\nFees: Annual Fee \u20b9499 + GST; waived on spending \u20b91.5 Lakhs.\"\r\n },\r\n {\r\n name: \"IndianOil HDFC Bank\",\r\n isFuelPoints: true, monthlyCapFP_Intro: 250, monthlyCapFP_Normal: 150, pointValue: 0.96, \r\n surchargeWaiverMax: 250, annualFee: 500, waiverThreshold: 50000,\r\n info: \"Earnings: Earn 5.0% as Fuel Points (1 FP \u2248 \u20b91) at IndianOil.\\nLimitations: Capped at 150 FP\/month (Post 6m) (~\u20b93k-5k spend).\\nSurcharge: 1% waiver on txns > \u20b9400 (Max \u20b9250\/m).\\nFees: Annual Fee \u20b9500 + GST; waived on spending \u20b950,000.\"\r\n },\r\n {\r\n name: \"Std. Chartered Super Value\",\r\n isCashback: true, cashbackRate: 0.05, monthlyCapCashback: 200, surchargeWaiverMax: 0,\r\n annualFee: 750, waiverThreshold: 90000,\r\n info: \"Earnings: 5.0% direct cashback on fuel at any pump.\\nLimitations: Max cashback \u20b9200\/month (~\u20b94,000 spend).\\nSurcharge: Surcharge waiver discontinued.\\nFees: Annual Fee \u20b9750 + GST; waived on spending \u20b990,000.\"\r\n },\r\n {\r\n name: \"ICICI HPCL Super Saver\",\r\n pointsPerSpend: 16, spendBlock: 100, valuePerPoint: 0.25, monthlyCapRP: 800,\r\n surchargeWaiverMax: 100, annualFee: 500, waiverThreshold: 150000, hpPayBenefit: 0.015,\r\n info: \"Earnings: 4.0% rewards (16 RP\/\u20b9100) at HPCL + 1.5% via HP Pay App.\\nLimitations: Monthly cap 800 RP (~\u20b95,000 spend).\\nFees: Annual Fee \u20b9500 + GST; waived on spending \u20b91.5 Lakhs.\"\r\n },\r\n {\r\n name: \"HPCL BoB \u00c9nergie\",\r\n pointsPerSpend: 24, spendBlock: 150, valuePerPoint: 0.25, monthlyCapRP: 1000,\r\n surchargeWaiverMax: 100, annualFee: 499, waiverThreshold: 50000, hpPayBenefit: 0.015,\r\n info: \"Earnings: 4.0% rewards (24 RP\/\u20b9150) at HPCL + 1.5% via HP Pay App.\\nLimitations: Monthly cap 1,000 RP (~\u20b96,250 spend).\\nSurcharge: 1% waiver on txns \u20b9400-\u20b95,000.\\nFees: Annual Fee \u20b9499 + GST; waived on spending \u20b950,000.\"\r\n },\r\n {\r\n name: \"IndianOil Axis Bank\",\r\n pointsPerSpend: 20, spendBlock: 100, valuePerPoint: 0.20, monthlyCapRP: 1000,\r\n surchargeWaiverMax: 50, annualFee: 500, waiverThreshold: 50000,\r\n info: \"Earnings: 4.0% value (20 EDGE Points\/\u20b9100) at IndianOil.\\nLimitations: Cap 1,000 Points\/month (~\u20b95,000 spend).\\nSurcharge: 1% waiver on txns \u20b9400-\u20b94,000.\\nFees: Annual Fee \u20b9500 + GST; waived on spending \u20b950,000.\"\r\n },\r\n {\r\n name: \"SBI BPCL Card\",\r\n pointsPerSpend: 13, spendBlock: 100, valuePerPoint: 0.25, monthlyCapRP: 1300,\r\n surchargeWaiverMax: 100, annualFee: 499, waiverThreshold: 50000,\r\n info: \"Earnings: 3.25% rewards (13 RP\/\u20b9100) at BPCL.\\nLimitations: Monthly cap 1,300 RP (~\u20b910,000 spend).\\nSurcharge: 1% waiver on txns up to \u20b94,000.\\nFees: Annual Fee \u20b9499 + GST; waived on spending \u20b950,000.\"\r\n },\r\n {\r\n name: \"Kotak IndianOil\",\r\n pointsPerSpend: 24, spendBlock: 150, valuePerPoint: 0.20, monthlyCapRP: 1200,\r\n surchargeWaiverMax: 100, annualFee: 449, waiverThreshold: 50000,\r\n info: \"Earnings: 3.2% value (24 RP\/\u20b9150) at IndianOil.\\nLimitations: Monthly cap 1,200 RP (~\u20b97,500 spend).\\nSurcharge: 1% waiver on txns \u20b9100-\u20b95,000.\\nFees: Annual Fee \u20b9449 + GST; waived on spending \u20b950,000.\"\r\n }\r\n ];\r\n\r\n \/\/ Populate Dropdown\r\n const select = document.getElementById('cardSelect');\r\n cards.forEach((card, index) => {\r\n const option = document.createElement('option');\r\n option.value = index;\r\n option.textContent = card.name;\r\n select.appendChild(option);\r\n });\r\n\r\n function calculate() {\r\n const spend = parseFloat(document.getElementById('monthlySpend').value);\r\n if (!spend || spend < 0) {\r\n alert(\"Please enter a valid monthly spend\");\r\n return;\r\n }\r\n\r\n const selectedCardIndex = document.getElementById('cardSelect').value;\r\n const resultsArea = document.getElementById('resultsArea');\r\n resultsArea.innerHTML = \"\"; \r\n\r\n let cardsToCompare = (selectedCardIndex !== \"\") ? [cards[selectedCardIndex]] : [...cards];\r\n\r\n \/\/ Sort by Net Savings descending if showing all\r\n if (selectedCardIndex === \"\") {\r\n cardsToCompare = cardsToCompare.map(card => {\r\n const metrics = calculateMetrics(card, spend);\r\n return { ...card, ...metrics };\r\n }).sort((a, b) => b.totalNetReturn - a.totalNetReturn);\r\n } else {\r\n cardsToCompare = cardsToCompare.map(card => {\r\n const metrics = calculateMetrics(card, spend);\r\n return { ...card, ...metrics };\r\n });\r\n }\r\n\r\n cardsToCompare.forEach(card => {\r\n const isProfitable = card.totalNetReturn >= 0;\r\n const badgeClass = isProfitable ? 'bg-green' : 'bg-red';\r\n const valueClass = isProfitable ? 'text-green' : 'text-red';\r\n const sign = isProfitable ? '+' : '';\r\n\r\n const cardDiv = document.createElement('div');\r\n cardDiv.className = 'card';\r\n \r\n cardDiv.innerHTML = `\r\n <div class=\"card-header\">\r\n <h3 class=\"card-title\">${card.name}<\/h3>\r\n <span class=\"roi-badge ${badgeClass}\">${card.returnPercentage.toFixed(2)}% ROI<\/span>\r\n <\/div>\r\n\r\n <div class=\"card-body\">\r\n <div class=\"metric\">\r\n <span class=\"metric-label\">Net Annual Savings<\/span>\r\n <span class=\"metric-value savings-value ${valueClass}\">${sign}\u20b9${Math.floor(card.totalNetReturn).toLocaleString()}<\/span>\r\n <span class=\"metric-sub\">Returns - Fees - Surcharges<\/span>\r\n <\/div>\r\n \r\n <div class=\"metric\">\r\n <span class=\"metric-label\">Breakdown<\/span>\r\n <div style=\"font-size: 0.9rem;\">\r\n <div><span style=\"color:#15803d\">Rewards:<\/span> \u20b9${Math.floor(card.annualRewardsValue)}<\/div>\r\n <div style=\"color:#64748b\">Fees: -\u20b9${Math.ceil(card.annualFeeTotal)}<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"card-footer\">\r\n <span class=\"info-title\">Card Details<\/span>\r\n <div class=\"info-text\">${card.info}<\/div>\r\n <\/div>\r\n `;\r\n\r\n resultsArea.appendChild(cardDiv);\r\n });\r\n }\r\n\r\n function calculateMetrics(card, spend) {\r\n const annualSpend = spend * 12;\r\n\r\n \/\/ Rewards\r\n let monthlyRewardsValue = 0;\r\n if (card.isFuelPoints) {\r\n const pointsEarned = Math.min(spend * 0.05, card.monthlyCapFP_Normal); \r\n monthlyRewardsValue = pointsEarned * card.pointValue;\r\n } else if (card.isCashback) {\r\n const cashback = Math.min(spend * card.cashbackRate, card.monthlyCapCashback);\r\n monthlyRewardsValue = cashback;\r\n } else {\r\n let points = Math.floor(spend \/ card.spendBlock) * card.pointsPerSpend;\r\n if (points > card.monthlyCapRP) points = card.monthlyCapRP;\r\n monthlyRewardsValue = points * card.valuePerPoint;\r\n if (card.hpPayBenefit) monthlyRewardsValue += (spend * card.hpPayBenefit);\r\n }\r\n const annualRewardsValue = monthlyRewardsValue * 12;\r\n\r\n \/\/ Costs\r\n const surcharge = spend * 0.01;\r\n const waiver = Math.min(surcharge, card.surchargeWaiverMax);\r\n const gstOnSurcharge = surcharge * 0.18;\r\n const monthlySurchargeCost = (surcharge - waiver) + gstOnSurcharge;\r\n const annualSurchargeCost = monthlySurchargeCost * 12;\r\n const annualFeeTotal = annualSpend >= card.waiverThreshold ? 0 : (card.annualFee * 1.18);\r\n\r\n const totalNetReturn = annualRewardsValue - annualSurchargeCost - annualFeeTotal;\r\n const returnPercentage = (totalNetReturn \/ annualSpend) * 100;\r\n\r\n return {\r\n annualRewardsValue,\r\n annualFeeTotal,\r\n totalNetReturn,\r\n returnPercentage\r\n };\r\n }\r\n<\/script>\r\n\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Fuel Card Optimizer Fuel Card Savings Calculator Select Card Compare All Cards Monthly Fuel Spend (\u20b9) Calculate<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"footnotes":""},"class_list":["post-1258","page","type-page","status-publish"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/mynidhi.com\/ml\/wp-json\/wp\/v2\/pages\/1258","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mynidhi.com\/ml\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mynidhi.com\/ml\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mynidhi.com\/ml\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mynidhi.com\/ml\/wp-json\/wp\/v2\/comments?post=1258"}],"version-history":[{"count":20,"href":"https:\/\/mynidhi.com\/ml\/wp-json\/wp\/v2\/pages\/1258\/revisions"}],"predecessor-version":[{"id":1416,"href":"https:\/\/mynidhi.com\/ml\/wp-json\/wp\/v2\/pages\/1258\/revisions\/1416"}],"wp:attachment":[{"href":"https:\/\/mynidhi.com\/ml\/wp-json\/wp\/v2\/media?parent=1258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\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 Fuel Card Optimizer<\/title>\r\n <style>\r\n :root {\r\n --primary: #2563eb;\r\n --surface: #ffffff;\r\n --background: #f1f5f9;\r\n --text-main: #1e293b;\r\n --text-sub: #64748b;\r\n --border: #e2e8f0;\r\n --green-text: #15803d;\r\n --green-bg: #dcfce7;\r\n --red-text: #b91c1c;\r\n --red-bg: #fee2e2;\r\n }\r\n\r\n body {\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n background-color: var(--background);\r\n color: var(--text-main);\r\n margin: 0;\r\n padding: 20px;\r\n }\r\n\r\n .container {\r\n max-width: 1100px;\r\n margin: 0 auto;\r\n }\r\n\r\n h1 {\r\n text-align: center;\r\n margin-bottom: 2rem;\r\n color: var(--text-main);\r\n }\r\n\r\n \/* Input Panel *\/\r\n .controls-panel {\r\n background: var(--surface);\r\n padding: 1.5rem;\r\n border-radius: 12px;\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\r\n margin-bottom: 2rem;\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 1rem;\r\n align-items: end;\r\n }\r\n\r\n @media (min-width: 768px) {\r\n .controls-panel {\r\n grid-template-columns: 2fr 1fr 1fr;\r\n }\r\n }\r\n\r\n .form-group {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.5rem;\r\n }\r\n\r\n label {\r\n font-size: 0.85rem;\r\n font-weight: 700;\r\n color: var(--text-sub);\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n }\r\n\r\n select, input {\r\n padding: 0.75rem;\r\n border: 1px solid var(--border);\r\n border-radius: 8px;\r\n font-size: 1rem;\r\n background: #fff;\r\n width: 100%;\r\n box-sizing: border-box;\r\n }\r\n\r\n button {\r\n background-color: var(--primary);\r\n color: white;\r\n padding: 0.75rem 1.5rem;\r\n border: none;\r\n border-radius: 8px;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n height: 46px; \/* Match input height *\/\r\n }\r\n\r\n button:hover {\r\n background-color: #1d4ed8;\r\n transform: translateY(-1px);\r\n }\r\n\r\n \/* Results Grid *\/\r\n #resultsArea {\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 1.5rem;\r\n }\r\n\r\n @media (min-width: 850px) {\r\n #resultsArea {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n\r\n \/* Card Styling *\/\r\n .card {\r\n background: var(--surface);\r\n border-radius: 12px;\r\n border: 1px solid var(--border);\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n transition: transform 0.2s, box-shadow 0.2s;\r\n }\r\n\r\n .card:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\r\n border-color: #cbd5e1;\r\n }\r\n\r\n .card-header {\r\n padding: 1.25rem;\r\n border-bottom: 1px solid var(--border);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n background: #f8fafc;\r\n }\r\n\r\n .card-title {\r\n font-size: 1.1rem;\r\n font-weight: 700;\r\n color: var(--text-main);\r\n margin: 0;\r\n }\r\n\r\n .roi-badge {\r\n font-size: 0.9rem;\r\n font-weight: 700;\r\n padding: 0.25rem 0.75rem;\r\n border-radius: 999px;\r\n white-space: nowrap;\r\n }\r\n\r\n .bg-green { background: var(--green-bg); color: var(--green-text); }\r\n .bg-red { background: var(--red-bg); color: var(--red-text); }\r\n\r\n .card-body {\r\n padding: 1.25rem;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 1.5rem;\r\n }\r\n\r\n .metric {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .metric-label {\r\n font-size: 0.75rem;\r\n color: var(--text-sub);\r\n text-transform: uppercase;\r\n margin-bottom: 0.25rem;\r\n }\r\n\r\n .metric-value {\r\n font-size: 1.25rem;\r\n font-weight: 700;\r\n }\r\n\r\n .metric-sub {\r\n font-size: 0.75rem;\r\n color: var(--text-sub);\r\n margin-top: 2px;\r\n }\r\n\r\n .savings-value { font-size: 1.5rem; }\r\n\r\n .card-footer {\r\n margin-top: auto;\r\n background: #fdfdfd;\r\n border-top: 1px solid var(--border);\r\n padding: 1rem 1.25rem;\r\n }\r\n\r\n .info-title {\r\n font-size: 0.75rem;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n color: var(--text-sub);\r\n margin-bottom: 0.5rem;\r\n display: block;\r\n }\r\n\r\n .info-text {\r\n font-size: 0.85rem;\r\n color: var(--text-main);\r\n white-space: pre-wrap;\r\n line-height: 1.5;\r\n }\r\n\r\n .text-green { color: var(--green-text); }\r\n .text-red { color: var(--red-text); }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"container\">\r\n <h1>Fuel Card Savings Calculator<\/h1>\r\n\r\n <div class=\"controls-panel\">\r\n <div class=\"form-group\">\r\n <label for=\"cardSelect\">Select Card<\/label>\r\n <select id=\"cardSelect\">\r\n <option value=\"\" selected>Compare All Cards<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"monthlySpend\">Monthly Fuel Spend (\u20b9)<\/label>\r\n <input type=\"number\" id=\"monthlySpend\" placeholder=\"e.g. 5000\" min=\"0\">\r\n <\/div>\r\n\r\n <button onclick=\"calculate()\">Calculate<\/button>\r\n <\/div>\r\n\r\n <div id=\"resultsArea\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n const cards = [\r\n {\r\n name: \"RBL IndianOil XTRA\",\r\n pointsPerSpend: 15, spendBlock: 100, valuePerPoint: 0.50, monthlyCapRP: 2000,\r\n surchargeWaiverMax: 200, annualFee: 1500, waiverThreshold: 275000,\r\n info: \"Earnings: Earn 7.5% in reward points (15 RP per \u20b9100, 1 RP = \u20b90.50) on fuel spends at IndianOil outlets.\\nLimitations: Monthly reward earning is capped at 1,000 RP, applicable on fuel spends up to ~\u20b96,666 per month.\\nSurcharge: 1% fuel surcharge waiver on transactions between \u20b9500 and \u20b94,000.\\nFees: Annual Fee \u20b91,500 + GST; waived on spending \u20b92.75 Lakhs.\"\r\n },\r\n {\r\n name: \"SBI BPCL Octane\",\r\n pointsPerSpend: 25, spendBlock: 100, valuePerPoint: 0.25, monthlyCapRP: 2500,\r\n surchargeWaiverMax: 100, annualFee: 1499, waiverThreshold: 200000,\r\n info: \"Earnings: Earn 6.25% in reward points (25 RP per \u20b9100, 1 RP = \u20b90.25) on fuel spends at BPCL stations.\\nLimitations: Monthly reward earning is capped at 2,500 RP (~\u20b910,000 spend).\\nSurcharge: 1% waiver on txns up to \u20b94,000.\\nFees: Annual Fee \u20b91,499 + GST; waived on spending \u20b92 Lakhs.\"\r\n },\r\n {\r\n name: \"IDFC FIRST Power+\",\r\n pointsPerSpend: 30, spendBlock: 150, valuePerPoint: 0.25, monthlyCapRP: 2400,\r\n surchargeWaiverMax: 0, annualFee: 499, waiverThreshold: 150000, hpPayBenefit: 0.015,\r\n info: \"Earnings: Earn 5.0% (30 RP\/\u20b9150) at HPCL + 1.5% extra via HP Pay App.\\nLimitations: Monthly cap 2,400 RP (~\u20b912,000 spend).\\nSurcharge: Surcharge waiver discontinued.\\nFees: Annual Fee \u20b9499 + GST; waived on spending \u20b91.5 Lakhs.\"\r\n },\r\n {\r\n name: \"IndianOil HDFC Bank\",\r\n isFuelPoints: true, monthlyCapFP_Intro: 250, monthlyCapFP_Normal: 150, pointValue: 0.96, \r\n surchargeWaiverMax: 250, annualFee: 500, waiverThreshold: 50000,\r\n info: \"Earnings: Earn 5.0% as Fuel Points (1 FP \u2248 \u20b91) at IndianOil.\\nLimitations: Capped at 150 FP\/month (Post 6m) (~\u20b93k-5k spend).\\nSurcharge: 1% waiver on txns > \u20b9400 (Max \u20b9250\/m).\\nFees: Annual Fee \u20b9500 + GST; waived on spending \u20b950,000.\"\r\n },\r\n {\r\n name: \"Std. Chartered Super Value\",\r\n isCashback: true, cashbackRate: 0.05, monthlyCapCashback: 200, surchargeWaiverMax: 0,\r\n annualFee: 750, waiverThreshold: 90000,\r\n info: \"Earnings: 5.0% direct cashback on fuel at any pump.\\nLimitations: Max cashback \u20b9200\/month (~\u20b94,000 spend).\\nSurcharge: Surcharge waiver discontinued.\\nFees: Annual Fee \u20b9750 + GST; waived on spending \u20b990,000.\"\r\n },\r\n {\r\n name: \"ICICI HPCL Super Saver\",\r\n pointsPerSpend: 16, spendBlock: 100, valuePerPoint: 0.25, monthlyCapRP: 800,\r\n surchargeWaiverMax: 100, annualFee: 500, waiverThreshold: 150000, hpPayBenefit: 0.015,\r\n info: \"Earnings: 4.0% rewards (16 RP\/\u20b9100) at HPCL + 1.5% via HP Pay App.\\nLimitations: Monthly cap 800 RP (~\u20b95,000 spend).\\nFees: Annual Fee \u20b9500 + GST; waived on spending \u20b91.5 Lakhs.\"\r\n },\r\n {\r\n name: \"HPCL BoB \u00c9nergie\",\r\n pointsPerSpend: 24, spendBlock: 150, valuePerPoint: 0.25, monthlyCapRP: 1000,\r\n surchargeWaiverMax: 100, annualFee: 499, waiverThreshold: 50000, hpPayBenefit: 0.015,\r\n info: \"Earnings: 4.0% rewards (24 RP\/\u20b9150) at HPCL + 1.5% via HP Pay App.\\nLimitations: Monthly cap 1,000 RP (~\u20b96,250 spend).\\nSurcharge: 1% waiver on txns \u20b9400-\u20b95,000.\\nFees: Annual Fee \u20b9499 + GST; waived on spending \u20b950,000.\"\r\n },\r\n {\r\n name: \"IndianOil Axis Bank\",\r\n pointsPerSpend: 20, spendBlock: 100, valuePerPoint: 0.20, monthlyCapRP: 1000,\r\n surchargeWaiverMax: 50, annualFee: 500, waiverThreshold: 50000,\r\n info: \"Earnings: 4.0% value (20 EDGE Points\/\u20b9100) at IndianOil.\\nLimitations: Cap 1,000 Points\/month (~\u20b95,000 spend).\\nSurcharge: 1% waiver on txns \u20b9400-\u20b94,000.\\nFees: Annual Fee \u20b9500 + GST; waived on spending \u20b950,000.\"\r\n },\r\n {\r\n name: \"SBI BPCL Card\",\r\n pointsPerSpend: 13, spendBlock: 100, valuePerPoint: 0.25, monthlyCapRP: 1300,\r\n surchargeWaiverMax: 100, annualFee: 499, waiverThreshold: 50000,\r\n info: \"Earnings: 3.25% rewards (13 RP\/\u20b9100) at BPCL.\\nLimitations: Monthly cap 1,300 RP (~\u20b910,000 spend).\\nSurcharge: 1% waiver on txns up to \u20b94,000.\\nFees: Annual Fee \u20b9499 + GST; waived on spending \u20b950,000.\"\r\n },\r\n {\r\n name: \"Kotak IndianOil\",\r\n pointsPerSpend: 24, spendBlock: 150, valuePerPoint: 0.20, monthlyCapRP: 1200,\r\n surchargeWaiverMax: 100, annualFee: 449, waiverThreshold: 50000,\r\n info: \"Earnings: 3.2% value (24 RP\/\u20b9150) at IndianOil.\\nLimitations: Monthly cap 1,200 RP (~\u20b97,500 spend).\\nSurcharge: 1% waiver on txns \u20b9100-\u20b95,000.\\nFees: Annual Fee \u20b9449 + GST; waived on spending \u20b950,000.\"\r\n }\r\n ];\r\n\r\n \/\/ Populate Dropdown\r\n const select = document.getElementById('cardSelect');\r\n cards.forEach((card, index) => {\r\n const option = document.createElement('option');\r\n option.value = index;\r\n option.textContent = card.name;\r\n select.appendChild(option);\r\n });\r\n\r\n function calculate() {\r\n const spend = parseFloat(document.getElementById('monthlySpend').value);\r\n if (!spend || spend < 0) {\r\n alert(\"Please enter a valid monthly spend\");\r\n return;\r\n }\r\n\r\n const selectedCardIndex = document.getElementById('cardSelect').value;\r\n const resultsArea = document.getElementById('resultsArea');\r\n resultsArea.innerHTML = \"\"; \r\n\r\n let cardsToCompare = (selectedCardIndex !== \"\") ? [cards[selectedCardIndex]] : [...cards];\r\n\r\n \/\/ Sort by Net Savings descending if showing all\r\n if (selectedCardIndex === \"\") {\r\n cardsToCompare = cardsToCompare.map(card => {\r\n const metrics = calculateMetrics(card, spend);\r\n return { ...card, ...metrics };\r\n }).sort((a, b) => b.totalNetReturn - a.totalNetReturn);\r\n } else {\r\n cardsToCompare = cardsToCompare.map(card => {\r\n const metrics = calculateMetrics(card, spend);\r\n return { ...card, ...metrics };\r\n });\r\n }\r\n\r\n cardsToCompare.forEach(card => {\r\n const isProfitable = card.totalNetReturn >= 0;\r\n const badgeClass = isProfitable ? 'bg-green' : 'bg-red';\r\n const valueClass = isProfitable ? 'text-green' : 'text-red';\r\n const sign = isProfitable ? '+' : '';\r\n\r\n const cardDiv = document.createElement('div');\r\n cardDiv.className = 'card';\r\n \r\n cardDiv.innerHTML = `\r\n <div class=\"card-header\">\r\n <h3 class=\"card-title\">${card.name}<\/h3>\r\n <span class=\"roi-badge ${badgeClass}\">${card.returnPercentage.toFixed(2)}% ROI<\/span>\r\n <\/div>\r\n\r\n <div class=\"card-body\">\r\n <div class=\"metric\">\r\n <span class=\"metric-label\">Net Annual Savings<\/span>\r\n <span class=\"metric-value savings-value ${valueClass}\">${sign}\u20b9${Math.floor(card.totalNetReturn).toLocaleString()}<\/span>\r\n <span class=\"metric-sub\">Returns - Fees - Surcharges<\/span>\r\n <\/div>\r\n \r\n <div class=\"metric\">\r\n <span class=\"metric-label\">Breakdown<\/span>\r\n <div style=\"font-size: 0.9rem;\">\r\n <div><span style=\"color:#15803d\">Rewards:<\/span> \u20b9${Math.floor(card.annualRewardsValue)}<\/div>\r\n <div style=\"color:#64748b\">Fees: -\u20b9${Math.ceil(card.annualFeeTotal)}<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"card-footer\">\r\n <span class=\"info-title\">Card Details<\/span>\r\n <div class=\"info-text\">${card.info}<\/div>\r\n <\/div>\r\n `;\r\n\r\n resultsArea.appendChild(cardDiv);\r\n });\r\n }\r\n\r\n function calculateMetrics(card, spend) {\r\n const annualSpend = spend * 12;\r\n\r\n \/\/ Rewards\r\n let monthlyRewardsValue = 0;\r\n if (card.isFuelPoints) {\r\n const pointsEarned = Math.min(spend * 0.05, card.monthlyCapFP_Normal); \r\n monthlyRewardsValue = pointsEarned * card.pointValue;\r\n } else if (card.isCashback) {\r\n const cashback = Math.min(spend * card.cashbackRate, card.monthlyCapCashback);\r\n monthlyRewardsValue = cashback;\r\n } else {\r\n let points = Math.floor(spend \/ card.spendBlock) * card.pointsPerSpend;\r\n if (points > card.monthlyCapRP) points = card.monthlyCapRP;\r\n monthlyRewardsValue = points * card.valuePerPoint;\r\n if (card.hpPayBenefit) monthlyRewardsValue += (spend * card.hpPayBenefit);\r\n }\r\n const annualRewardsValue = monthlyRewardsValue * 12;\r\n\r\n \/\/ Costs\r\n const surcharge = spend * 0.01;\r\n const waiver = Math.min(surcharge, card.surchargeWaiverMax);\r\n const gstOnSurcharge = surcharge * 0.18;\r\n const monthlySurchargeCost = (surcharge - waiver) + gstOnSurcharge;\r\n const annualSurchargeCost = monthlySurchargeCost * 12;\r\n const annualFeeTotal = annualSpend >= card.waiverThreshold ? 0 : (card.annualFee * 1.18);\r\n\r\n const totalNetReturn = annualRewardsValue - annualSurchargeCost - annualFeeTotal;\r\n const returnPercentage = (totalNetReturn \/ annualSpend) * 100;\r\n\r\n return {\r\n annualRewardsValue,\r\n annualFeeTotal,\r\n totalNetReturn,\r\n returnPercentage\r\n };\r\n }\r\n<\/script>\r\n\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Fuel Card Optimizer Fuel Card Savings Calculator Select Card Compare All Cards Monthly Fuel Spend (\u20b9) Calculate<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"footnotes":""},"class_list":["post-1258","page","type-page","status-publish"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/mynidhi.com\/ml\/wp-json\/wp\/v2\/pages\/1258","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mynidhi.com\/ml\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mynidhi.com\/ml\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mynidhi.com\/ml\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mynidhi.com\/ml\/wp-json\/wp\/v2\/comments?post=1258"}],"version-history":[{"count":20,"href":"https:\/\/mynidhi.com\/ml\/wp-json\/wp\/v2\/pages\/1258\/revisions"}],"predecessor-version":[{"id":1416,"href":"https:\/\/mynidhi.com\/ml\/wp-json\/wp\/v2\/pages\/1258\/revisions\/1416"}],"wp:attachment":[{"href":"https:\/\/mynidhi.com\/ml\/wp-json\/wp\/v2\/media?parent=1258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}