{"id":522,"date":"2026-08-11T19:58:53","date_gmt":"2026-08-11T19:58:53","guid":{"rendered":"https:\/\/webandseoteam.com\/motley_finance\/?page_id=522"},"modified":"2026-08-11T19:58:53","modified_gmt":"2026-08-11T19:58:53","slug":"emi-calculator","status":"publish","type":"page","link":"https:\/\/webandseoteam.com\/motley_finance\/emi-calculator\/","title":{"rendered":"EMI Calculator"},"content":{"rendered":"\n<!--=========================================\n    EMI CALCULATOR BLOCK START\n==========================================-->\n<section id=\"emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41\" class=\"emi-calculator-block py-4\">\n    <div class=\"container\">\n        <div class=\"emi-calc-wrapper p-4 p-md-5 bg-white border rounded-4 shadow-sm\">\n            \n            <!-- Section Header -->\n                            <div class=\"text-center mb-4 mb-md-5\">\n                    <h2 class=\"emi-calc-title fw-bold text-uppercase tracking-wide mb-2\">EMI CALCULATOR<\/h2>\n                    <div class=\"emi-calc-title-line mx-auto\"><\/div>\n                <\/div>\n            \n            <!-- Main Calculation Box -->\n            <div class=\"emi-calc-box border rounded-3 p-4 mb-4\">\n                <div class=\"row align-items-center position-relative\">\n                    \n                    <!-- Left Column: Inputs & Controls -->\n                    <div class=\"col-lg-6 pe-lg-4\">\n                        <div class=\"emi-calc-inputs\">\n                            <p class=\"text-muted fs-7 mb-4\">\n                                <span class=\"text-theme-gold\">*<\/span> An asterisk indicates a required field.\n                            <\/p>\n\n                            <!-- Principal Loan Amount -->\n                            <div class=\"mb-4\">\n                                <label for=\"emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41-principal-input\" class=\"form-label fw-semibold text-theme-dark mb-2\">\n                                    Principal Loan Amount <span class=\"text-theme-gold\">*<\/span> :\n                                <\/label>\n                                <div class=\"d-flex align-items-center gap-3\">\n                                    <div class=\"flex-grow-1\">\n                                        <input type=\"range\" \n                                               class=\"form-range emi-slider principal-slider\" \n                                               id=\"emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41-principal-slider\" \n                                               min=\"1000\" \n                                               max=\"10000000\" \n                                               step=\"500\" \n                                               value=\"10000\">\n                                    <\/div>\n                                    <div class=\"number-input-wrap\">\n                                        <input type=\"number\" \n                                               class=\"form-control text-center fw-medium emi-num-input principal-input\" \n                                               id=\"emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41-principal-input\" \n                                               min=\"1000\" \n                                               max=\"10000000\" \n                                               value=\"10000\">\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n\n                            <!-- Interest Rate -->\n                            <div class=\"mb-4\">\n                                <label for=\"emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41-interest-input\" class=\"form-label fw-semibold text-theme-dark mb-2\">\n                                    Interest Rate ( % p.a ) <span class=\"text-theme-gold\">*<\/span> :\n                                <\/label>\n                                <div class=\"d-flex align-items-center gap-3\">\n                                    <div class=\"flex-grow-1\">\n                                        <input type=\"range\" \n                                               class=\"form-range emi-slider interest-slider\" \n                                               id=\"emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41-interest-slider\" \n                                               min=\"0\" \n                                               max=\"30\" \n                                               step=\"0.1\" \n                                               value=\"0\">\n                                    <\/div>\n                                    <div class=\"number-input-wrap\">\n                                        <input type=\"number\" \n                                               class=\"form-control text-center fw-medium emi-num-input interest-input\" \n                                               id=\"emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41-interest-input\" \n                                               min=\"0\" \n                                               max=\"30\" \n                                               step=\"0.1\" \n                                               value=\"0\">\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n\n                            <!-- Loan Term (Years) -->\n                            <div class=\"mb-4\">\n                                <label for=\"emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41-term-input\" class=\"form-label fw-semibold text-theme-dark mb-2\">\n                                    Loan Term (Years) <span class=\"text-theme-gold\">*<\/span> :\n                                <\/label>\n                                <div class=\"d-flex align-items-center gap-3\">\n                                    <div class=\"flex-grow-1\">\n                                        <input type=\"range\" \n                                               class=\"form-range emi-slider term-slider\" \n                                               id=\"emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41-term-slider\" \n                                               min=\"1\" \n                                               max=\"30\" \n                                               step=\"1\" \n                                               value=\"1\">\n                                    <\/div>\n                                    <div class=\"number-input-wrap\">\n                                        <input type=\"number\" \n                                               class=\"form-control text-center fw-medium emi-num-input term-input\" \n                                               id=\"emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41-term-input\" \n                                               min=\"1\" \n                                               max=\"30\" \n                                               step=\"1\" \n                                               value=\"1\">\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n\n\n\n                        <\/div>\n                    <\/div>\n\n                    <!-- Center Vertical Divider (Desktop) -->\n                    <div class=\"col-lg-1 d-none d-lg-flex justify-content-center\">\n                        <div class=\"calc-divider-v\"><\/div>\n                    <\/div>\n\n                    <!-- Right Column: Pie Chart & Breakdown -->\n                    <div class=\"col-lg-5 ps-lg-4 mt-5 mt-lg-0 text-center\">\n                        <div class=\"emi-chart-container mx-auto\">\n                            <!-- Interactive Dynamic Conic-Gradient Pie Chart -->\n                            <div class=\"emi-pie-chart-container position-relative mx-auto my-2\">\n                                <div class=\"emi-pie-chart-circle\"><\/div>\n                                \n                                <!-- Percentage Label Badges on Chart -->\n                                <div class=\"interest-pct-badge position-absolute text-white fw-bold fs-7 px-2 py-1 rounded-pill\">\n                                    <span class=\"interest-pct-val\">0%<\/span>\n                                <\/div>\n                                <div class=\"principal-pct-badge position-absolute text-white fw-bold fs-7 px-2 py-1 rounded-pill\">\n                                    <span class=\"principal-pct-val\">100%<\/span>\n                                <\/div>\n                            <\/div>\n\n                            <!-- Legend -->\n                            <div class=\"d-flex justify-content-center align-items-center gap-4 mt-4 text-theme-dark fs-7\">\n                                <div class=\"d-flex align-items-center gap-2\">\n                                    <span class=\"legend-box principal-box\"><\/span>\n                                    <span class=\"fw-medium\">Principal Amount <span class=\"principal-legend-pct text-muted fw-normal\">(100%)<\/span><\/span>\n                                <\/div>\n                                <div class=\"d-flex align-items-center gap-2\">\n                                    <span class=\"legend-box interest-box\"><\/span>\n                                    <span class=\"fw-medium\">Total Interest <span class=\"interest-legend-pct text-muted fw-normal\">(0%)<\/span><\/span>\n                                <\/div>\n                            <\/div>\n\n                            <!-- Formula & Repayment Note -->\n                            <div class=\"mt-4\">\n                                <h5 class=\"fw-bold text-theme-dark mb-1\">Total Repayment<\/h5>\n                                <p class=\"text-muted fs-7 mb-0\">Total Repayment = Principal Amount + Total Interest<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                <\/div>\n            <\/div>\n\n            <!-- Bottom Summary Cards (3 Columns) -->\n            <div class=\"row g-3 mb-4\">\n                <div class=\"col-md-4\">\n                    <div class=\"emi-summary-card text-center p-3 p-md-4 border rounded-3 h-100\">\n                        <div class=\"card-title text-muted fs-6 mb-2\">Monthly Payment (EMI):<\/div>\n                        <div class=\"card-value fw-bold fs-3 emi-monthly-val text-theme-gold\">\n                            Rs. 833\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"col-md-4\">\n                    <div class=\"emi-summary-card text-center p-3 p-md-4 border rounded-3 h-100\">\n                        <div class=\"card-title text-muted fs-6 mb-2\">Total Interest:<\/div>\n                        <div class=\"card-value fw-bold text-theme-dark fs-3 emi-interest-val\">\n                            Rs. 0\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"col-md-4\">\n                    <div class=\"emi-summary-card text-center p-3 p-md-4 border rounded-3 h-100\">\n                        <div class=\"card-title text-muted fs-6 mb-2\">Total Repayment:<\/div>\n                        <div class=\"card-value fw-bold text-theme-dark fs-3 emi-repayment-val\">\n                            Rs. 10000\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Month-wise & Year-wise Payment Breakdown Table (Amortization Schedule) -->\n            <div class=\"emi-breakup-section mt-5 mb-4\" id=\"emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41-breakup-section\">\n                <div class=\"d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-3 gap-2 pb-2 border-bottom\">\n                    <div>\n                        <h4 class=\"fw-bold text-theme-dark mb-1 fs-5\">Payment Breakdown Schedule<\/h4>\n                        <p class=\"text-muted fs-7 mb-0\">Detailed amortization schedule showing principal and interest distribution.<\/p>\n                    <\/div>\n                    <div class=\"d-flex align-items-center gap-2\">\n                        <span class=\"fs-7 fw-semibold text-theme-dark\">View Mode:<\/span>\n                        <div class=\"btn-group btn-group-sm breakup-view-toggle\" role=\"group\" aria-label=\"Breakup View Toggle\">\n                            <button type=\"button\" class=\"btn btn-theme-gold active view-mode-btn mode-monthly\" data-mode=\"monthly\">Monthly<\/button>\n                            <button type=\"button\" class=\"btn btn-outline-secondary view-mode-btn mode-yearly\" data-mode=\"yearly\">Yearly<\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"table-responsive border rounded-3 emi-table-wrapper\" style=\"max-height: 440px; overflow-y: auto;\">\n                    <table class=\"table table-hover table-striped align-middle mb-0 text-center fs-7 emi-breakup-table\">\n                        <thead class=\"sticky-top shadow-sm\" style=\"background-color: var(--theme-dark); color: #ffffff;\">\n                            <tr>\n                                <th scope=\"col\" class=\"py-3 fw-semibold text-start ps-4\" style=\"width: 20%;\">Period<\/th>\n                                <th scope=\"col\" class=\"py-3 fw-semibold text-end\" style=\"width: 20%;\">Principal Paid<\/th>\n                                <th scope=\"col\" class=\"py-3 fw-semibold text-end\" style=\"width: 20%;\">Interest Paid<\/th>\n                                <th scope=\"col\" class=\"py-3 fw-semibold text-end\" style=\"width: 20%;\">Total Payment (EMI)<\/th>\n                                <th scope=\"col\" class=\"py-3 fw-semibold text-end pe-4\" style=\"width: 20%;\">Balance Principal<\/th>\n                            <\/tr>\n                        <\/thead>\n                        <tbody class=\"emi-breakup-tbody\">\n                            <!-- Dynamic Rows Injected by JS -->\n                        <\/tbody>\n                        <tfoot class=\"table-light fw-bold border-top border-2\" style=\"background-color: #f8fafc;\">\n                            <!-- Dynamic Summary Footer Injected by JS -->\n                        <\/tfoot>\n                    <\/table>\n                <\/div>\n            <\/div>\n\n            <!-- Footer Note Box -->\n                            <div class=\"emi-disclaimer-box border rounded-3 p-3 text-start\">\n                    <p class=\"mb-0 fw-semibold text-theme-dark fs-7\">\n                        NOTE:- Calculated EMI Result is indicative only.                    <\/p>\n                <\/div>\n            \n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- Block Theme Scoped Styles -->\n<style>\n\/* Motley Finance Theme Colors Integration *\/\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 {\n    --theme-gold: #C79A2B;\n    --theme-gold-light: #E3BF67;\n    --theme-dark: #0B192C;\n    --theme-border: #E2E8F0;\n    --theme-gray: #64748B;\n}\n\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .text-theme-gold {\n    color: var(--theme-gold) !important;\n}\n\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .text-theme-dark {\n    color: var(--theme-dark) !important;\n}\n\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .emi-calc-title {\n    font-size: 1.85rem;\n    letter-spacing: 1.5px;\n    color: var(--theme-dark);\n}\n\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .emi-calc-title-line {\n    width: 60px;\n    height: 3px;\n    background: linear-gradient(135deg, var(--theme-gold), var(--theme-gold-light));\n    border-radius: 3px;\n}\n\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .fs-7 {\n    font-size: 0.875rem;\n}\n\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .emi-calc-box {\n    background-color: #ffffff;\n    border-color: var(--theme-border) !important;\n    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);\n}\n\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .calc-divider-v {\n    width: 1px;\n    height: 90%;\n    background-color: var(--theme-border);\n    min-height: 250px;\n}\n\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .number-input-wrap {\n    width: 110px;\n    min-width: 110px;\n}\n\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .emi-num-input {\n    border: 1px solid #cbd5e1;\n    border-radius: 6px;\n    padding: 6px 8px;\n    color: var(--theme-dark);\n    font-size: 0.95rem;\n    box-shadow: none;\n    transition: all 0.2s ease;\n}\n\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .emi-num-input:focus {\n    border-color: var(--theme-gold);\n    outline: none;\n    box-shadow: 0 0 0 3px rgba(199, 154, 43, 0.15);\n}\n\n\/* Custom Range Slider Thumb Styling with Gold Theme Accent *\/\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .emi-slider {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 100%;\n    height: 5px;\n    background: #e2e8f0;\n    border-radius: 3px;\n    outline: none;\n}\n\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .emi-slider::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    background: #ffffff;\n    border: 2px solid var(--theme-gold);\n    box-shadow: 0 2px 6px rgba(199, 154, 43, 0.3);\n    cursor: pointer;\n    transition: transform 0.15s ease, border-color 0.15s ease;\n}\n\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .emi-slider::-moz-range-thumb {\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    background: #ffffff;\n    border: 2px solid var(--theme-gold);\n    box-shadow: 0 2px 6px rgba(199, 154, 43, 0.3);\n    cursor: pointer;\n}\n\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .emi-slider::-webkit-slider-thumb:hover {\n    transform: scale(1.15);\n    background: var(--theme-gold);\n}\n\n\/* Motley Finance Theme Button *\/\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .theme-btn.emi-calc-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 13px 28px;\n    background: linear-gradient(135deg, var(--theme-gold), var(--theme-gold-light));\n    color: #ffffff;\n    font-size: 15px;\n    font-weight: 600;\n    letter-spacing: 0.5px;\n    border-radius: 50px;\n    border: none;\n    text-decoration: none;\n    transition: all 0.3s ease;\n    box-shadow: 0 10px 25px rgba(199, 154, 43, 0.35);\n    cursor: pointer;\n}\n\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .theme-btn.emi-calc-btn:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 14px 30px rgba(199, 154, 43, 0.45);\n    color: #ffffff;\n}\n\n\/* Pie Chart Container & Circular Gradient *\/\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .emi-pie-chart-container {\n    width: 220px;\n    height: 220px;\n    margin: 0 auto;\n}\n\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .emi-pie-chart-circle {\n    width: 220px;\n    height: 220px;\n    border-radius: 50%;\n    border: 4px solid #ffffff;\n    box-shadow: 0 10px 30px rgba(11, 25, 44, 0.14);\n    background: conic-gradient(var(--theme-gold) 0% 100%, var(--theme-dark) 100% 100%);\n    transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .interest-pct-badge {\n    top: 18%;\n    left: 50%;\n    transform: translateX(-50%);\n    background: rgba(11, 25, 44, 0.85);\n    backdrop-filter: blur(4px);\n    box-shadow: 0 2px 8px rgba(0,0,0,0.2);\n    transition: opacity 0.3s ease;\n    opacity: 0;\n    pointer-events: none;\n}\n\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .principal-pct-badge {\n    bottom: 18%;\n    left: 50%;\n    transform: translateX(-50%);\n    background: rgba(199, 154, 43, 0.9);\n    backdrop-filter: blur(4px);\n    box-shadow: 0 2px 8px rgba(0,0,0,0.15);\n    transition: opacity 0.3s ease;\n    pointer-events: none;\n}\n\n\/* Pie Chart Legends *\/\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .legend-box {\n    display: inline-block;\n    width: 16px;\n    height: 16px;\n    border-radius: 4px;\n}\n\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .principal-box {\n    background-color: var(--theme-gold);\n}\n\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .interest-box {\n    background-color: var(--theme-dark);\n}\n\n\/* Amortization Table & Toggle Buttons *\/\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .emi-table-wrapper {\n    background-color: #ffffff;\n    border-color: var(--theme-border) !important;\n}\n\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .emi-breakup-table thead th {\n    background-color: var(--theme-dark) !important;\n    color: #ffffff !important;\n    border: none;\n}\n\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .view-mode-btn {\n    font-size: 0.8rem;\n    font-weight: 600;\n    padding: 5px 14px;\n    transition: all 0.2s ease;\n}\n\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .view-mode-btn.active {\n    background-color: var(--theme-gold) !important;\n    border-color: var(--theme-gold) !important;\n    color: #ffffff !important;\n    box-shadow: 0 2px 6px rgba(199, 154, 43, 0.3);\n}\n\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .view-mode-btn:not(.active):hover {\n    border-color: var(--theme-gold);\n    color: var(--theme-gold);\n}\n\n\/* Summary Cards *\/\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .emi-summary-card {\n    background-color: #ffffff;\n    border-color: var(--theme-border) !important;\n    border-top: 3px solid var(--theme-gold) !important;\n    transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .emi-summary-card:hover {\n    transform: translateY(-3px);\n    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);\n}\n\n\/* Footer Disclaimer Box *\/\n#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41 .emi-disclaimer-box {\n    background-color: #fdfbf7;\n    border-color: rgba(199, 154, 43, 0.3) !important;\n    border-left: 4px solid var(--theme-gold) !important;\n}\n<\/style>\n\n<!-- Block Script -->\n<script>\n(function($) {\n    function initEmiCalculator() {\n        var $block = $('#emi-calc-block_f50294ebdabd69f8a71cff24db7b7b41');\n        if (!$block.length) return;\n\n        var currencySymbol = 'Rs.';\n\n        var $pSlider = $block.find('.principal-slider');\n        var $pInput  = $block.find('.principal-input');\n        var $iSlider = $block.find('.interest-slider');\n        var $iInput  = $block.find('.interest-input');\n        var $tSlider = $block.find('.term-slider');\n        var $tInput  = $block.find('.term-input');\n\n        var $emiVal       = $block.find('.emi-monthly-val');\n        var $interestVal  = $block.find('.emi-interest-val');\n        var $repaymentVal = $block.find('.emi-repayment-val');\n\n        var $principalArc   = $block.find('.principal-arc');\n        var $principalText  = $block.find('.principal-pct-text');\n        var $interestText   = $block.find('.interest-pct-text');\n\n        var $pieChartCircle    = $block.find('.emi-pie-chart-circle');\n        var $principalBadge    = $block.find('.principal-pct-badge');\n        var $interestBadge     = $block.find('.interest-pct-badge');\n        var $principalPctVal   = $block.find('.principal-pct-val');\n        var $interestPctVal    = $block.find('.interest-pct-val');\n        var $principalLegendPct = $block.find('.principal-legend-pct');\n        var $interestLegendPct  = $block.find('.interest-legend-pct');\n\n        \/\/ Sync slider & number input with live recalculation for smooth pie chart updates\n        function syncInputs($slider, $input) {\n            $slider.on('input change', function() {\n                $input.val($(this).val());\n                calculateEMI();\n            });\n            $input.on('input change', function() {\n                var val = parseFloat($(this).val()) || 0;\n                var min = parseFloat($slider.attr('min'));\n                var max = parseFloat($slider.attr('max'));\n                if (val < min) val = min;\n                if (val > max) val = max;\n                $slider.val(val);\n                calculateEMI();\n            });\n        }\n\n        syncInputs($pSlider, $pInput);\n        syncInputs($iSlider, $iInput);\n        syncInputs($tSlider, $tInput);\n\n        var currentViewMode = 'monthly';\n        var lastSchedule = [];\n\n        $block.find('.view-mode-btn').on('click', function() {\n            $block.find('.view-mode-btn').removeClass('active btn-theme-gold').addClass('btn-outline-secondary');\n            $(this).removeClass('btn-outline-secondary').addClass('active btn-theme-gold');\n            currentViewMode = $(this).data('mode');\n            renderBreakupTable(lastSchedule);\n        });\n\n\n\n        function calculateEMI() {\n            var principal = parseFloat($pInput.val()) || 0;\n            var ratePerAnnum = parseFloat($iInput.val()) || 0;\n            var termYears = parseFloat($tInput.val()) || 0;\n\n            if (principal <= 0 || termYears <= 0) {\n                renderResults(0, 0, 0, 100, 0);\n                lastSchedule = [];\n                renderBreakupTable([]);\n                return;\n            }\n\n            var totalMonths = termYears * 12;\n            var emi = 0;\n            var totalInterest = 0;\n            var totalRepayment = 0;\n\n            if (ratePerAnnum === 0) {\n                \/\/ 0% interest calculation\n                emi = principal \/ totalMonths;\n                totalInterest = 0;\n                totalRepayment = principal;\n            } else {\n                \/\/ Standard EMI formula: P * r * (1+r)^n \/ ((1+r)^n - 1)\n                var monthlyRate = ratePerAnnum \/ (12 * 100);\n                var rateFactor = Math.pow(1 + monthlyRate, totalMonths);\n                emi = (principal * monthlyRate * rateFactor) \/ (rateFactor - 1);\n                totalRepayment = emi * totalMonths;\n                totalInterest = totalRepayment - principal;\n            }\n\n            var principalPct = 100;\n            var interestPct = 0;\n\n            if (totalRepayment > 0) {\n                principalPct = Math.round((principal \/ totalRepayment) * 100);\n                interestPct = 100 - principalPct;\n            }\n\n            \/\/ Generate Amortization Schedule\n            lastSchedule = generateAmortizationSchedule(principal, ratePerAnnum, totalMonths, emi);\n\n            renderResults(Math.round(emi), Math.round(totalInterest), Math.round(totalRepayment), principalPct, interestPct);\n            renderBreakupTable(lastSchedule);\n        }\n\n        function generateAmortizationSchedule(principal, ratePerAnnum, totalMonths, emi) {\n            var schedule = [];\n            var balance = principal;\n            var monthlyRate = ratePerAnnum > 0 ? (ratePerAnnum \/ (12 * 100)) : 0;\n\n            for (var m = 1; m <= totalMonths; m++) {\n                var interestPayment = (monthlyRate > 0) ? (balance * monthlyRate) : 0;\n                var principalPayment = emi - interestPayment;\n\n                if (balance - principalPayment < 0 || m === totalMonths) {\n                    principalPayment = balance;\n                    var actualPaid = principalPayment + interestPayment;\n                    balance = 0;\n                    schedule.push({\n                        month: m,\n                        year: Math.ceil(m \/ 12),\n                        principalPaid: principalPayment,\n                        interestPaid: interestPayment,\n                        totalPaid: actualPaid,\n                        balance: 0\n                    });\n                } else {\n                    balance -= principalPayment;\n                    schedule.push({\n                        month: m,\n                        year: Math.ceil(m \/ 12),\n                        principalPaid: principalPayment,\n                        interestPaid: interestPayment,\n                        totalPaid: emi,\n                        balance: balance\n                    });\n                }\n            }\n            return schedule;\n        }\n\n        function renderBreakupTable(schedule) {\n            var $tbody = $block.find('.emi-breakup-tbody');\n            var $tfoot = $block.find('.emi-breakup-table tfoot');\n            $tbody.empty();\n            $tfoot.empty();\n\n            if (!schedule || !schedule.length) {\n                $tbody.append('<tr><td colspan=\"5\" class=\"py-4 text-muted\">No breakdown data available.<\/td><\/tr>');\n                return;\n            }\n\n            var totalPrincipalSum = 0;\n            var totalInterestSum = 0;\n            var totalPaymentSum = 0;\n\n            if (currentViewMode === 'monthly') {\n                $.each(schedule, function(idx, item) {\n                    totalPrincipalSum += item.principalPaid;\n                    totalInterestSum += item.interestPaid;\n                    totalPaymentSum += item.totalPaid;\n\n                    var rowHtml = '<tr>' +\n                        '<td class=\"text-start ps-4 fw-medium text-theme-dark\">Month ' + item.month + '<\/td>' +\n                        '<td class=\"text-end text-success\">' + currencySymbol + ' ' + Math.round(item.principalPaid).toLocaleString('en-IN') + '<\/td>' +\n                        '<td class=\"text-end text-danger\">' + currencySymbol + ' ' + Math.round(item.interestPaid).toLocaleString('en-IN') + '<\/td>' +\n                        '<td class=\"text-end fw-semibold\">' + currencySymbol + ' ' + Math.round(item.totalPaid).toLocaleString('en-IN') + '<\/td>' +\n                        '<td class=\"text-end pe-4 text-muted\">' + currencySymbol + ' ' + Math.round(item.balance).toLocaleString('en-IN') + '<\/td>' +\n                    '<\/tr>';\n                    $tbody.append(rowHtml);\n                });\n            } else {\n                \/\/ Yearly Mode Aggregation\n                var yearlyData = {};\n                $.each(schedule, function(idx, item) {\n                    if (!yearlyData[item.year]) {\n                        yearlyData[item.year] = {\n                            year: item.year,\n                            principalPaid: 0,\n                            interestPaid: 0,\n                            totalPaid: 0,\n                            balance: item.balance\n                        };\n                    }\n                    yearlyData[item.year].principalPaid += item.principalPaid;\n                    yearlyData[item.year].interestPaid += item.interestPaid;\n                    yearlyData[item.year].totalPaid += item.totalPaid;\n                    yearlyData[item.year].balance = item.balance;\n                });\n\n                $.each(yearlyData, function(yr, item) {\n                    totalPrincipalSum += item.principalPaid;\n                    totalInterestSum += item.interestPaid;\n                    totalPaymentSum += item.totalPaid;\n\n                    var rowHtml = '<tr>' +\n                        '<td class=\"text-start ps-4 fw-bold text-theme-dark\">Year ' + item.year + '<\/td>' +\n                        '<td class=\"text-end text-success fw-medium\">' + currencySymbol + ' ' + Math.round(item.principalPaid).toLocaleString('en-IN') + '<\/td>' +\n                        '<td class=\"text-end text-danger fw-medium\">' + currencySymbol + ' ' + Math.round(item.interestPaid).toLocaleString('en-IN') + '<\/td>' +\n                        '<td class=\"text-end fw-semibold\">' + currencySymbol + ' ' + Math.round(item.totalPaid).toLocaleString('en-IN') + '<\/td>' +\n                        '<td class=\"text-end pe-4 text-muted\">' + currencySymbol + ' ' + Math.round(item.balance).toLocaleString('en-IN') + '<\/td>' +\n                    '<\/tr>';\n                    $tbody.append(rowHtml);\n                });\n            }\n\n            \/\/ Summary Footer Row\n            var footHtml = '<tr>' +\n                '<td class=\"text-start ps-4 text-theme-dark\">Total Repayment<\/td>' +\n                '<td class=\"text-end text-success\">' + currencySymbol + ' ' + Math.round(totalPrincipalSum).toLocaleString('en-IN') + '<\/td>' +\n                '<td class=\"text-end text-danger\">' + currencySymbol + ' ' + Math.round(totalInterestSum).toLocaleString('en-IN') + '<\/td>' +\n                '<td class=\"text-end text-theme-gold fs-6\">' + currencySymbol + ' ' + Math.round(totalPaymentSum).toLocaleString('en-IN') + '<\/td>' +\n                '<td class=\"text-end pe-4 text-muted\">0<\/td>' +\n            '<\/tr>';\n            $tfoot.append(footHtml);\n        }\n\n        function renderResults(emi, interest, repayment, pPct, iPct) {\n            $emiVal.text(currencySymbol + ' ' + emi.toLocaleString('en-IN'));\n            $interestVal.text(currencySymbol + ' ' + interest.toLocaleString('en-IN'));\n            $repaymentVal.text(currencySymbol + ' ' + repayment.toLocaleString('en-IN'));\n\n            $principalPctVal.text(pPct + '%');\n            $interestPctVal.text(iPct + '%');\n            $principalLegendPct.text('(' + pPct + '%)');\n            $interestLegendPct.text('(' + iPct + '%)');\n\n            \/\/ Handle percentage badge visibility\n            if (iPct <= 0) {\n                $interestBadge.css('opacity', '0');\n            } else {\n                $interestBadge.css('opacity', '1');\n            }\n\n            if (pPct <= 0) {\n                $principalBadge.css('opacity', '0');\n            } else {\n                $principalBadge.css('opacity', '1');\n            }\n\n            \/\/ Update 2-color Pie Chart conic-gradient background\n            $pieChartCircle.css('background', 'conic-gradient(#C79A2B 0% ' + pPct + '%, #0B192C ' + pPct + '% 100%)');\n        }\n\n        \/\/ Initial Calculation\n        calculateEMI();\n    }\n\n    $(document).ready(initEmiCalculator);\n\n    if (window.acf) {\n        window.acf.addAction('render_block_preview\/type=acf\/emi-calculator', initEmiCalculator);\n    }\n})(jQuery);\n<\/script>\n<!--=========================================\n    EMI CALCULATOR BLOCK END\n==========================================-->\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-522","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>EMI Calculator - Motley Finance<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"EMI Calculator - Motley Finance\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webandseoteam.com\/motley_finance\/emi-calculator\/\" \/>\n<meta property=\"og:site_name\" content=\"Motley Finance\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webandseoteam.com\\\/motley_finance\\\/emi-calculator\\\/\",\"url\":\"https:\\\/\\\/webandseoteam.com\\\/motley_finance\\\/emi-calculator\\\/\",\"name\":\"EMI Calculator - Motley Finance\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webandseoteam.com\\\/motley_finance\\\/#website\"},\"datePublished\":\"2026-08-11T19:58:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webandseoteam.com\\\/motley_finance\\\/emi-calculator\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webandseoteam.com\\\/motley_finance\\\/emi-calculator\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webandseoteam.com\\\/motley_finance\\\/emi-calculator\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webandseoteam.com\\\/motley_finance\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"EMI Calculator\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/webandseoteam.com\\\/motley_finance\\\/#website\",\"url\":\"https:\\\/\\\/webandseoteam.com\\\/motley_finance\\\/\",\"name\":\"Motley Finance\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/webandseoteam.com\\\/motley_finance\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/webandseoteam.com\\\/motley_finance\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/webandseoteam.com\\\/motley_finance\\\/#organization\",\"name\":\"Motley Finance\",\"url\":\"https:\\\/\\\/webandseoteam.com\\\/motley_finance\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webandseoteam.com\\\/motley_finance\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/webandseoteam.com\\\/motley_finance\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/Logo.png\",\"contentUrl\":\"https:\\\/\\\/webandseoteam.com\\\/motley_finance\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/Logo.png\",\"width\":288,\"height\":79,\"caption\":\"Motley Finance\"},\"image\":{\"@id\":\"https:\\\/\\\/webandseoteam.com\\\/motley_finance\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"EMI Calculator - Motley Finance","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"EMI Calculator - Motley Finance","og_url":"https:\/\/webandseoteam.com\/motley_finance\/emi-calculator\/","og_site_name":"Motley Finance","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/webandseoteam.com\/motley_finance\/emi-calculator\/","url":"https:\/\/webandseoteam.com\/motley_finance\/emi-calculator\/","name":"EMI Calculator - Motley Finance","isPartOf":{"@id":"https:\/\/webandseoteam.com\/motley_finance\/#website"},"datePublished":"2026-08-11T19:58:53+00:00","breadcrumb":{"@id":"https:\/\/webandseoteam.com\/motley_finance\/emi-calculator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webandseoteam.com\/motley_finance\/emi-calculator\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webandseoteam.com\/motley_finance\/emi-calculator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webandseoteam.com\/motley_finance\/"},{"@type":"ListItem","position":2,"name":"EMI Calculator"}]},{"@type":"WebSite","@id":"https:\/\/webandseoteam.com\/motley_finance\/#website","url":"https:\/\/webandseoteam.com\/motley_finance\/","name":"Motley Finance","description":"","publisher":{"@id":"https:\/\/webandseoteam.com\/motley_finance\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webandseoteam.com\/motley_finance\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webandseoteam.com\/motley_finance\/#organization","name":"Motley Finance","url":"https:\/\/webandseoteam.com\/motley_finance\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webandseoteam.com\/motley_finance\/#\/schema\/logo\/image\/","url":"https:\/\/webandseoteam.com\/motley_finance\/wp-content\/uploads\/2026\/07\/Logo.png","contentUrl":"https:\/\/webandseoteam.com\/motley_finance\/wp-content\/uploads\/2026\/07\/Logo.png","width":288,"height":79,"caption":"Motley Finance"},"image":{"@id":"https:\/\/webandseoteam.com\/motley_finance\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/webandseoteam.com\/motley_finance\/wp-json\/wp\/v2\/pages\/522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webandseoteam.com\/motley_finance\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/webandseoteam.com\/motley_finance\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/webandseoteam.com\/motley_finance\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webandseoteam.com\/motley_finance\/wp-json\/wp\/v2\/comments?post=522"}],"version-history":[{"count":1,"href":"https:\/\/webandseoteam.com\/motley_finance\/wp-json\/wp\/v2\/pages\/522\/revisions"}],"predecessor-version":[{"id":523,"href":"https:\/\/webandseoteam.com\/motley_finance\/wp-json\/wp\/v2\/pages\/522\/revisions\/523"}],"wp:attachment":[{"href":"https:\/\/webandseoteam.com\/motley_finance\/wp-json\/wp\/v2\/media?parent=522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}