{"id":27,"date":"2025-02-13T14:18:58","date_gmt":"2025-02-13T14:18:58","guid":{"rendered":"https:\/\/finovate.vamtam.com\/?page_id=27"},"modified":"2025-10-03T08:25:28","modified_gmt":"2025-10-03T08:25:28","slug":"mortgage-calculator","status":"publish","type":"page","link":"https:\/\/skgmortgages.com\/index.php\/mortgage-calculator\/","title":{"rendered":"Mortgage Calculator"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"27\" class=\"elementor elementor-27\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cfebbf3 e-con-full e-flex e-con e-parent\" data-id=\"cfebbf3\" data-element_type=\"container\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-53d7858 e-flex e-con-boxed e-con e-parent\" data-id=\"53d7858\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1d63d58 elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-html\" data-id=\"1d63d58\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"mortgage-calculator-container\">\r\n  <style>\r\n    \/* Scoped styles for mortgage calculator *\/\r\n    #mortgage-calculator-container * {\r\n      box-sizing: border-box;\r\n      font-family: 'Work Sans', Arial, sans-serif;\r\n    }\r\n\r\n    :root {\r\n      --primary-color: #007bff;\r\n      --button-color: #00236a;\r\n      --text-color: #333;\r\n      --light-grey: #f8f8f8;\r\n      --dark-grey: #777;\r\n      --border-color: #e0e0e0;\r\n      --shadow: 0 4px 20px rgba(0, 0, 0, 0.05);\r\n      --border-radius: 12px;\r\n      --highlight-color: #D4AF37;\r\n    }\r\n\r\n    #mortgage-calculator-container {\r\n      background-color: var(--light-grey);\r\n      padding: 20px;\r\n    }\r\n\r\n    #mortgage-calculator-container .calculator-wrapper {\r\n      background-color: #ffffff;\r\n      padding: 40px;\r\n      border-radius: var(--border-radius);\r\n      box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.1);\r\n      border: 2px solid #0A2342;\r\n      width: 100%;\r\n      max-width: 1200px;\r\n      margin: auto;\r\n    }\r\n\r\n    #mortgage-calculator-container h1 {\r\n      font-size: 2.5rem;\r\n      font-weight: 600;\r\n      color: #0A2342;\r\n      text-align: left;\r\n      margin-bottom: 20px;\r\n    }\r\n\r\n    #mortgage-calculator-container .main-tabs {\r\n      display: flex;\r\n      margin-bottom: 20px;\r\n      gap: 10px;\r\n    }\r\n\r\n    #mortgage-calculator-container .main-tab-link {\r\n      padding: 12px 20px;\r\n      cursor: pointer;\r\n      font-weight: 500;\r\n      color: #777;\r\n      border-radius: var(--border-radius);\r\n      background-color: #fff;\r\n      border: 1px solid #e0e0e0;\r\n      transition: all 0.2s ease-in-out;\r\n    }\r\n\r\n    #mortgage-calculator-container .main-tab-link:hover {\r\n      background-color: #D4AF37;\r\n      color: #0A2342;\r\n    }\r\n\r\n    #mortgage-calculator-container .main-tab-link.active {\r\n      background-color: #0A2342;\r\n      color: #fff;\r\n      border-color: #0A2342;\r\n    }\r\n\r\n    #mortgage-calculator-container .tab-content-container {\r\n      display: none;\r\n    }\r\n\r\n    #mortgage-calculator-container .tab-content-container.active {\r\n      display: block;\r\n    }\r\n\r\n    #mortgage-calculator-container .form-section {\r\n      padding: 20px;\r\n    }\r\n\r\n    #mortgage-calculator-container .form-section h2 {\r\n      color: #0A2342;\r\n      margin-bottom: 20px;\r\n      font-weight: 700;\r\n    }\r\n\r\n    #mortgage-calculator-container .form-group {\r\n      margin-bottom: 20px;\r\n    }\r\n\r\n    #mortgage-calculator-container label {\r\n      display: block;\r\n      margin-bottom: 8px;\r\n      font-weight: 600;\r\n      color: #333;\r\n    }\r\n\r\n    #mortgage-calculator-container input,\r\n    #mortgage-calculator-container select {\r\n      width: 100%;\r\n      padding: 12px;\r\n      border: 1px solid #cbd5e0;\r\n      border-radius: 8px;\r\n      font-size: 15px;\r\n      transition: border-color 0.3s;\r\n    }\r\n\r\n    #mortgage-calculator-container input:focus,\r\n    #mortgage-calculator-container select:focus {\r\n      outline: none;\r\n      border-color: #D4AF37;\r\n      box-shadow: 0 0 4px rgba(212, 175, 55, 0.3);\r\n    }\r\n\r\n    #mortgage-calculator-container .calculate-button {\r\n      padding: 14px;\r\n      width: 100%;\r\n      background: #0A2342;\r\n      border: none;\r\n      border-radius: 10px;\r\n      color: #fff;\r\n      font-size: 16px;\r\n      font-weight: bold;\r\n      cursor: pointer;\r\n      margin-top: 10px;\r\n      transition: background 0.3s;\r\n    }\r\n\r\n    #mortgage-calculator-container .calculate-button:hover {\r\n      background: #D4AF37;\r\n      color: #0A2342;\r\n    }\r\n\r\n    #mortgage-calculator-container .results-panel {\r\n      padding: 20px;\r\n      background: #fdfdfd;\r\n      border-radius: 12px;\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: center;\r\n    }\r\n\r\n    #mortgage-calculator-container .results-panel h3 {\r\n      color: #0A2342;\r\n      margin-bottom: 20px;\r\n      font-weight: 700;\r\n    }\r\n\r\n    #mortgage-calculator-container .highlight {\r\n      font-size: 36px;\r\n      font-weight: bold;\r\n      color: #0A2342;\r\n      margin-bottom: 20px;\r\n      padding: 15px;\r\n      border-radius: 12px;\r\n      background: #D4AF37;\r\n      text-align: center;\r\n    }\r\n\r\n    #mortgage-calculator-container .breakdown p {\r\n      margin: 10px 0;\r\n      font-size: 17px;\r\n      display: flex;\r\n      justify-content: space-between;\r\n      border-bottom: 1px dashed #e0e0e0;\r\n      padding-bottom: 5px;\r\n      align-items: center;\r\n    }\r\n\r\n    #mortgage-calculator-container .breakdown p i {\r\n      margin-right: 8px;\r\n      color: #D4AF37;\r\n    }\r\n\r\n    #mortgage-calculator-container .breakdown span {\r\n      font-weight: bold;\r\n      color: #0A2342;\r\n    }\r\n\r\n    #mortgage-calculator-container .comparison-container {\r\n      display: grid;\r\n      grid-template-columns: 1fr 1fr;\r\n      gap: 30px;\r\n    }\r\n\r\n    #mortgage-calculator-container .comparison-results-section {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 20px;\r\n      padding: 20px;\r\n    }\r\n\r\n    #mortgage-calculator-container .comparison-result-card {\r\n      background: #fdfdfd;\r\n      border: 1px solid #cbd5e0;\r\n      border-radius: 8px;\r\n      padding: 20px;\r\n    }\r\n\r\n    #mortgage-calculator-container .hidden {\r\n      display: none;\r\n    }\r\n\r\n    #mortgage-calculator-container .button-group {\r\n      display: flex;\r\n      gap: 10px;\r\n    }\r\n\r\n    #mortgage-calculator-container .button-group .reset-button {\r\n      background: #f0f0f0;\r\n      color: #333;\r\n      border: 1px solid #cbd5e0;\r\n      width: 50%;\r\n    }\r\n\r\n    #mortgage-calculator-container .button-group .reset-button:hover {\r\n      background: #ddd;\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      #mortgage-calculator-container .main-tabs {\r\n        flex-direction: column;\r\n        gap: 5px;\r\n      }\r\n      #mortgage-calculator-container .comparison-container {\r\n        grid-template-columns: 1fr;\r\n      }\r\n    }\r\n  <\/style>\r\n\r\n  <div class=\"calculator-wrapper\">\r\n    <h1>Mortgage Calculators<\/h1>\r\n    <div class=\"main-tabs\">\r\n      <div class=\"main-tab-link active\" data-tab=\"single-calc\">Single Calculator<\/div>\r\n      <div class=\"main-tab-link\" data-tab=\"comparison-calc\">Comparison Calculator<\/div>\r\n    <\/div>\r\n\r\n    <div id=\"single-calc\" class=\"tab-content-container active\">\r\n      <div class=\"single-calc-container comparison-container\">\r\n        <div class=\"form-section\">\r\n          <h2>Mortgage Calculator<\/h2>\r\n          <div class=\"form-group\">\r\n            <label>Mortgage Amount ($)<\/label>\r\n            <input type=\"text\" id=\"single-amount\" placeholder=\"e.g. 150,000\">\r\n          <\/div>\r\n          <div class=\"form-group\">\r\n            <label>Interest Rate (%)<\/label>\r\n            <select id=\"single-rate-type\"><\/select>\r\n            <input type=\"number\" id=\"single-rate\" step=\"0.01\" class=\"hidden\">\r\n          <\/div>\r\n          <div class=\"form-group\">\r\n            <label>Amortization Period (Years)<\/label>\r\n            <select id=\"single-years\"><\/select>\r\n          <\/div>\r\n          <div class=\"form-group\">\r\n            <label>Payment Frequency<\/label>\r\n            <select id=\"single-frequency\">\r\n              <option value=\"12\" selected>Monthly<\/option>\r\n              <option value=\"26\">Bi-weekly<\/option>\r\n              <option value=\"52\">Weekly<\/option>\r\n            <\/select>\r\n          <\/div>\r\n          <div class=\"button-group\">\r\n            <button class=\"calculate-button\" id=\"single-calc-btn\">Calculate<\/button>\r\n            <button class=\"calculate-button reset-button\" id=\"single-reset-btn\">Reset<\/button>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"results-panel\" id=\"single-results\">\r\n          <h3>Your Payment:<\/h3>\r\n          <p class=\"highlight\" id=\"single-payment\">$0.00<\/p>\r\n          <div class=\"breakdown\">\r\n            <p><i class=\"fas fa-money-bill-wave\"><\/i> <span>Total Payments During Term:<\/span> <span id=\"single-totalPayments\">$0.00<\/span><\/p>\r\n            <p><i class=\"fas fa-percentage\"><\/i> <span>Interest Paid:<\/span> <span id=\"single-interestPaid\">$0.00<\/span><\/p>\r\n            <p><i class=\"fas fa-arrow-up\"><\/i> <span>Principal Paid:<\/span> <span id=\"single-principalPaid\">$0.00<\/span><\/p>\r\n            <p><i class=\"fas fa-university\"><\/i> <span>Balance at End of Term:<\/span> <span id=\"single-balance\">$0.00<\/span><\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"comparison-calc\" class=\"tab-content-container\">\r\n      <div class=\"comparison-container\">\r\n        <div class=\"form-section\">\r\n          <h2>Comparison Calculator<\/h2>\r\n          <div class=\"form-group\">\r\n            <label>Mortgage 1 Amount ($)<\/label>\r\n            <input type=\"text\" id=\"loan1\" placeholder=\"e.g. 300,000\">\r\n          <\/div>\r\n          <div class=\"form-group\">\r\n            <label>Mortgage 1 Interest Rate (%)<\/label>\r\n            <select id=\"rateType1\"><\/select>\r\n            <input type=\"number\" id=\"rate1\" step=\"0.01\" class=\"hidden\">\r\n          <\/div>\r\n          <div class=\"form-group\">\r\n            <label>Mortgage 1 Loan Term (Years)<\/label>\r\n            <select id=\"term1\"><\/select>\r\n          <\/div>\r\n          <div class=\"form-group\">\r\n            <label>Mortgage 2 Amount ($)<\/label>\r\n            <input type=\"text\" id=\"loan2\" placeholder=\"e.g. 320,000\">\r\n          <\/div>\r\n          <div class=\"form-group\">\r\n            <label>Mortgage 2 Interest Rate (%)<\/label>\r\n            <select id=\"rateType2\"><\/select>\r\n            <input type=\"number\" id=\"rate2\" step=\"0.01\" class=\"hidden\">\r\n          <\/div>\r\n          <div class=\"form-group\">\r\n            <label>Mortgage 2 Loan Term (Years)<\/label>\r\n            <select id=\"term2\"><\/select>\r\n          <\/div>\r\n          <div class=\"button-group\">\r\n            <button class=\"calculate-button\" id=\"comparison-calc-btn\">Calculate<\/button>\r\n            <button class=\"calculate-button reset-button\" id=\"comparison-reset-btn\">Reset<\/button>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"results-panel comparison-results-section\">\r\n          <h3>Your Comparison:<\/h3>\r\n          <div class=\"comparison-result-card\">\r\n            <p class=\"highlight\" id=\"monthlyPayment1\">$0.00<\/p>\r\n            <div class=\"breakdown\">\r\n              <p><i class=\"fas fa-money-bill-wave\"><\/i> <span>Total Cost:<\/span> <span id=\"totalCost1\">$0.00<\/span><\/p>\r\n              <p><i class=\"fas fa-percent\"><\/i> <span>Mortgage 1<\/span><\/p>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"comparison-result-card\">\r\n            <p class=\"highlight\" id=\"monthlyPayment2\">$0.00<\/p>\r\n            <div class=\"breakdown\">\r\n              <p><i class=\"fas fa-money-bill-wave\"><\/i> <span>Total Cost:<\/span> <span id=\"totalCost2\">$0.00<\/span><\/p>\r\n              <p><i class=\"fas fa-percent\"><\/i> <span>Mortgage 2<\/span><\/p>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    (function(){\r\n      const container = document.getElementById('mortgage-calculator-container');\r\n\r\n      \/\/ Function to format numbers with commas\r\n      function formatNumberWithCommas(number) {\r\n        if (isNaN(number) || number === null) return \"0.00\";\r\n        return number.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });\r\n      }\r\n      \r\n      function formatInput(inputElement) {\r\n        let value = inputElement.value.replace(\/,\/g, '');\r\n        if (!isNaN(value) && value !== '') {\r\n            inputElement.value = parseFloat(value).toLocaleString('en-US');\r\n        }\r\n      }\r\n\r\n      \/\/ Add event listeners to input fields to format on keyup\r\n      ['single-amount', 'loan1', 'loan2'].forEach(id => {\r\n          const input = container.querySelector(`#${id}`);\r\n          if (input) {\r\n              input.addEventListener('keyup', () => formatInput(input));\r\n          }\r\n      });\r\n\r\n      \/\/ Populate Interest Rate dropdowns\r\n      const rates = [\r\n        {label:\"1 year open 9.95%\", value:\"9.95\"},\r\n        {label:\"6 month closed 6.09%\", value:\"6.09\"},\r\n        {label:\"1 year closed 6.09%\", value:\"6.09\"},\r\n        {label:\"2 year closed 5.39%\", value:\"5.39\"},\r\n        {label:\"3 year closed 6.05%\", value:\"6.05\"},\r\n        {label:\"4 year closed 5.99%\", value:\"5.99\"},\r\n        {label:\"5 year closed 6.09%\", value:\"6.09\"},\r\n        {label:\"6 year closed 6.29%\", value:\"6.29\"},\r\n        {label:\"7 year closed 6.40%\", value:\"6.40\"},\r\n        {label:\"10 year closed 6.80%\", value:\"6.80\"},\r\n        {label:\"5 year open variable 8.00%\", value:\"8.00\"},\r\n        {label:\"5 year closed variable 4.54%\", value:\"4.54\"},\r\n        {label:\"3 year closed 4.49%\", value:\"4.49\"},\r\n        {label:\"5 year closed 4.64%\", value:\"4.64\"}\r\n      ];\r\n\r\n      ['single-rate-type','rateType1','rateType2'].forEach(id=>{\r\n        const sel = container.querySelector(`#${id}`);\r\n        sel.innerHTML = `<option value=\"custom\">Add my own interest rate<\/option>`;\r\n        rates.forEach(r=>{\r\n          const opt = document.createElement('option');\r\n          opt.value=r.value; opt.textContent=r.label;\r\n          if(r.value===\"4.64\") opt.selected=true;\r\n          sel.appendChild(opt);\r\n        });\r\n        \r\n        sel.addEventListener('change', () => {\r\n          const customRateInput = container.querySelector(`#${id.replace('Type', '')}`);\r\n          if (sel.value === 'custom') {\r\n            customRateInput.classList.remove('hidden');\r\n            customRateInput.focus();\r\n          } else {\r\n            customRateInput.classList.add('hidden');\r\n          }\r\n        });\r\n      });\r\n      \r\n      \/\/ Populate year dropdowns\r\n      const singleYears = container.querySelector('#single-years');\r\n      const term1 = container.querySelector('#term1');\r\n      const term2 = container.querySelector('#term2');\r\n      [singleYears, term1, term2].forEach(sel=>{\r\n        for(let i=1;i<=30;i++){\r\n          const opt = document.createElement('option');\r\n          opt.value=i; opt.textContent=i+' years';\r\n          sel.appendChild(opt);\r\n        }\r\n        [35, 40].forEach(year => {\r\n          const opt = document.createElement('option');\r\n          opt.value = year;\r\n          opt.textContent = year + ' years';\r\n          sel.appendChild(opt);\r\n        });\r\n      });\r\n      term1.value=30; term2.value=25; singleYears.value=20;\r\n\r\n      \/\/ Tabs\r\n      const tabs = container.querySelectorAll('.main-tab-link');\r\n      const contents = container.querySelectorAll('.tab-content-container');\r\n      tabs.forEach(tab=>{\r\n        tab.addEventListener('click',()=>{\r\n          tabs.forEach(t=>t.classList.remove('active'));\r\n          contents.forEach(c=>c.classList.remove('active'));\r\n          tab.classList.add('active');\r\n          const tabId = tab.dataset.tab;\r\n          container.querySelector(`#${tabId}`).classList.add('active');\r\n        });\r\n      });\r\n\r\n      \/\/ Single Calculator\r\n      const singleAmount = container.querySelector('#single-amount');\r\n      const singleRateType = container.querySelector('#single-rate-type');\r\n      const singleRate = container.querySelector('#single-rate');\r\n      const singleCalcBtn = container.querySelector('#single-calc-btn');\r\n      const singleResetBtn = container.querySelector('#single-reset-btn');\r\n\r\n      function calculateSingle(){\r\n        let amt = parseFloat(singleAmount.value.replace(\/,\/g,''));\r\n        let rate;\r\n        if (singleRateType.value === 'custom') {\r\n            rate = parseFloat(singleRate.value);\r\n        } else {\r\n            rate = parseFloat(singleRateType.value);\r\n        }\r\n        \r\n        let years = parseInt(container.querySelector('#single-years').value);\r\n        let freq = parseInt(container.querySelector('#single-frequency').value);\r\n        \r\n        if(isNaN(amt)||isNaN(rate)||isNaN(years) || rate <= 0){\r\n          alert(\"Please enter valid numbers for all fields.\");\r\n          return;\r\n        }\r\n        \r\n        let r = rate \/ 100 \/ freq;\r\n        let n = years * freq;\r\n        let pay = r === 0 ? amt \/ n : amt * (r * Math.pow(1 + r, n)) \/ (Math.pow(1 + r, n) - 1);\r\n        \r\n        let termPayments = Math.min(5 * freq, n);\r\n        let bal = amt;\r\n        let totalPaid = 0;\r\n        let interestPaid = 0;\r\n        \r\n        for(let i = 0; i < termPayments; i++){\r\n          let interest = bal * r;\r\n          let principal = pay - interest;\r\n          bal -= principal;\r\n          totalPaid += pay;\r\n          interestPaid += interest;\r\n        }\r\n\r\n        const principalPaid = totalPaid - interestPaid;\r\n        \r\n        container.querySelector('#single-payment').textContent = `$${formatNumberWithCommas(pay)}`;\r\n        container.querySelector('#single-totalPayments').textContent = `$${formatNumberWithCommas(totalPaid)}`;\r\n        container.querySelector('#single-interestPaid').textContent = `$${formatNumberWithCommas(interestPaid)}`;\r\n        container.querySelector('#single-principalPaid').textContent = `$${formatNumberWithCommas(principalPaid)}`;\r\n        container.querySelector('#single-balance').textContent = `$${formatNumberWithCommas(bal)}`;\r\n      }\r\n\r\n      singleCalcBtn.addEventListener('click', calculateSingle);\r\n      singleResetBtn.addEventListener('click', () => {\r\n        singleAmount.value = '';\r\n        singleRateType.value = '4.64';\r\n        singleRate.value = '';\r\n        singleRate.classList.add('hidden');\r\n        container.querySelector('#single-years').value = 20;\r\n        container.querySelector('#single-frequency').value = 12;\r\n        container.querySelector('#single-payment').textContent = '$0.00';\r\n        container.querySelector('#single-totalPayments').textContent = '$0.00';\r\n        container.querySelector('#single-interestPaid').textContent = '$0.00';\r\n        container.querySelector('#single-principalPaid').textContent = '$0.00';\r\n        container.querySelector('#single-balance').textContent = '$0.00';\r\n      });\r\n\r\n      \/\/ Comparison Calculator\r\n      function calcComp(loan, rate, term){\r\n        const monthlyRate = rate\/100\/12;\r\n        const n = term * 12;\r\n        if(monthlyRate === 0) return {monthly: loan\/n, total: loan};\r\n        let monthly = (loan * monthlyRate) \/ (1 - Math.pow(1 + monthlyRate, -n));\r\n        return {monthly: monthly, total: monthly * n};\r\n      }\r\n\r\n      container.querySelector('#comparison-calc-btn').addEventListener('click', () => {\r\n        let loan1 = parseFloat(container.querySelector('#loan1').value.replace(\/,\/g,''));\r\n        let loan2 = parseFloat(container.querySelector('#loan2').value.replace(\/,\/g,''));\r\n        \r\n        let rate1, rate2;\r\n        if (container.querySelector('#rateType1').value === 'custom') {\r\n            rate1 = parseFloat(container.querySelector('#rate1').value);\r\n        } else {\r\n            rate1 = parseFloat(container.querySelector('#rateType1').value);\r\n        }\r\n\r\n        if (container.querySelector('#rateType2').value === 'custom') {\r\n            rate2 = parseFloat(container.querySelector('#rate2').value);\r\n        } else {\r\n            rate2 = parseFloat(container.querySelector('#rateType2').value);\r\n        }\r\n        \r\n        const term1 = parseInt(container.querySelector('#term1').value);\r\n        const term2 = parseInt(container.querySelector('#term2').value);\r\n        \r\n        if (isNaN(loan1) || isNaN(loan2) || isNaN(rate1) || isNaN(rate2) || isNaN(term1) || isNaN(term2) || rate1 <= 0 || rate2 <= 0) {\r\n            alert(\"Please enter valid numbers for all fields.\");\r\n            return;\r\n        }\r\n\r\n        let res1 = calcComp(loan1, rate1, term1);\r\n        let res2 = calcComp(loan2, rate2, term2);\r\n\r\n        container.querySelector('#monthlyPayment1').textContent = `$${formatNumberWithCommas(res1.monthly)}`;\r\n        container.querySelector('#totalCost1').textContent = `$${formatNumberWithCommas(res1.total)}`;\r\n        container.querySelector('#monthlyPayment2').textContent = `$${formatNumberWithCommas(res2.monthly)}`;\r\n        container.querySelector('#totalCost2').textContent = `$${formatNumberWithCommas(res2.total)}`;\r\n      });\r\n\r\n      container.querySelector('#comparison-reset-btn').addEventListener('click', () => {\r\n        container.querySelector('#loan1').value = '';\r\n        container.querySelector('#loan2').value = '';\r\n        container.querySelector('#rateType1').value = '4.64';\r\n        container.querySelector('#rateType2').value = '4.64';\r\n        container.querySelector('#rate1').value = '';\r\n        container.querySelector('#rate2').value = '';\r\n        container.querySelector('#rate1').classList.add('hidden');\r\n        container.querySelector('#rate2').classList.add('hidden');\r\n        container.querySelector('#term1').value = 30;\r\n        container.querySelector('#term2').value = 25;\r\n        container.querySelector('#monthlyPayment1').textContent = '$0.00';\r\n        container.querySelector('#totalCost1').textContent = '$0.00';\r\n        container.querySelector('#monthlyPayment2').textContent = '$0.00';\r\n        container.querySelector('#totalCost2').textContent = '$0.00';\r\n      });\r\n    })();\r\n  <\/script>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0b214d5 e-flex e-con-boxed e-con e-parent\" data-id=\"0b214d5\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<a class=\"elementor-element elementor-element-230b4a1 e-con-full vamtam-icon-hover-parent e-flex e-con e-child\" data-id=\"230b4a1\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\" href=\"https:\/\/skgmortgages.com\/index.php\/mortgage-calculator\/\">\n\t\t\t\t<div class=\"elementor-element elementor-element-43a9fd4 elementor-hidden-desktop elementor-widget elementor-widget-html\" data-id=\"43a9fd4\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"skg-calc-wrapper\">\r\n  <div class=\"skg-calc-card\">\r\n    <form id=\"skg-calc-form\" onsubmit=\"return false\">\r\n      <label for=\"amount\" style=\"color: black !important;\">Loan amount<\/label>\r\n      <input id=\"amount\" class=\"skg-field\" type=\"number\" placeholder=\"e.g. 50,00,000\" value=\"5000000\" style=\"color: black !important;\">\r\n\r\n      <label for=\"interest\" style=\"color: black !important;\">Annual interest rate (%)<\/label>\r\n      <input id=\"interest\" class=\"skg-field\" type=\"number\" step=\"0.01\" value=\"7.25\" style=\"color: black !important;\">\r\n\r\n      <label for=\"years\" style=\"color: black !important;\">Term (years)<\/label>\r\n      <input id=\"years\" class=\"skg-field\" type=\"number\" value=\"20\" style=\"color: black !important;\">\r\n\r\n      <label for=\"extra\" style=\"color: black !important;\">Extra monthly payment (optional)<\/label>\r\n      <input id=\"extra\" class=\"skg-field\" type=\"number\" value=\"0\" style=\"color: black !important;\">\r\n\r\n      <label for=\"freq\" style=\"color: black !important;\">Payments \/ year<\/label>\r\n      <select id=\"freq\" class=\"skg-field\" style=\"color: black !important;\">\r\n        <option value=\"12\">Monthly<\/option>\r\n        <option value=\"26\">Fortnightly<\/option>\r\n        <option value=\"52\">Weekly<\/option>\r\n      <\/select>\r\n\r\n      <div class=\"skg-actions\">\r\n        <button class=\"skg-btn primary\" id=\"calc-btn\">Calculate<\/button>\r\n        <button class=\"skg-btn ghost\" id=\"reset-btn\" type=\"button\">Reset<\/button>\r\n      <\/div>\r\n    <\/form>\r\n\r\n    <div class=\"skg-results\">\r\n      <div class=\"skg-result-item\">\r\n        <span class=\"skg-muted\">Monthly payment<\/span>\r\n        <span class=\"skg-big\" id=\"monthly\">\u2014<\/span>\r\n      <\/div>\r\n      <div class=\"skg-result-item\">\r\n        <span class=\"skg-muted\">Total payment<\/span>\r\n        <span id=\"total-pay\">\u2014<\/span>\r\n      <\/div>\r\n      <div class=\"skg-result-item\">\r\n        <span class=\"skg-muted\">Total interest<\/span>\r\n        <span id=\"total-interest\">\u2014<\/span>\r\n      <\/div>\r\n    <\/div>\r\n    <footer class=\"skg-note\">Tip: Add extra payments to reduce loan term.<\/footer>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n  \/* Wrapper to isolate styles *\/\r\n  .skg-calc-wrapper {\r\n    display: flex;\r\n    justify-content: center;\r\n    margin: 20px 0;\r\n  }\r\n\r\n  .skg-calc-card {\r\n    background: #ffffff;\r\n    border-radius: 10px;\r\n    padding: 16px;\r\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\r\n    width: 100%;\r\n    max-width: 480px;\r\n  }\r\n\r\n  .skg-field, .skg-field select {\r\n    width: 100%;\r\n    padding: 10px 12px;\r\n    margin-bottom: 12px;\r\n    border-radius: 10px;\r\n    border: 1px solid #ccc;\r\n    background: #ffffff;\r\n    color: #111;\r\n  }\r\n\r\n  .skg-field::placeholder { color: #aaa; }\r\n\r\n  .skg-actions {\r\n    display: flex;\r\n    gap: 10px;\r\n    justify-content: center;\r\n    margin: 14px 0;\r\n  }\r\n\r\n  .skg-btn { flex: 1; border: 0; padding: 10px 14px; border-radius: 10px; font-weight: 600; cursor: pointer; }\r\n  .skg-btn.primary { background: #0f1724; color: #fff; }\r\n  .skg-btn.ghost { background: #e1e1e1; border: 1px solid #ccc; color: #333; }\r\n\r\n  .skg-results { margin-top: 16px; padding: 12px; border-radius: 10px; background: #fafafa; border: 1px solid #eee; }\r\n  .skg-result-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee; }\r\n  .skg-result-item:last-child { border-bottom: 0; }\r\n  .skg-big { font-size: 18px; font-weight: 700; }\r\n  .skg-muted { color: #555; font-size: 13px; }\r\n  .skg-note { text-align: center; margin-top: 12px; color: #555; font-size: 12px; }\r\n<\/style>\r\n\r\n<script>\r\n  const $ = s => document.querySelector('.skg-calc-wrapper ' + s);\r\n  const format = v => v.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });\r\n\r\n  function calcMonthlyPayment(P, annualRate, years, paymentsPerYear){\r\n    if(annualRate===0) return P\/(years*paymentsPerYear);\r\n    const r = annualRate\/100\/paymentsPerYear;\r\n    const n = years*paymentsPerYear;\r\n    return P * r * Math.pow(1 + r, n) \/ (Math.pow(1 + r, n) - 1);\r\n  }\r\n\r\n  function calculate(){\r\n    const P = +$('#amount').value || 0;\r\n    const annual = +$('#interest').value || 0;\r\n    const years = +$('#years').value || 0;\r\n    const freq = +$('#freq').value || 12;\r\n    const extra = +$('#extra').value || 0;\r\n    if(P <= 0 || years <= 0){ alert('Enter valid loan amount & term'); return; }\r\n    const base = calcMonthlyPayment(P, annual, years, freq);\r\n    const totalPayments = (base + extra) * years * freq;\r\n    const totalInterest = totalPayments - P;\r\n    $('#monthly').textContent = format(base + extra);\r\n    $('#total-pay').textContent = format(totalPayments);\r\n    $('#total-interest').textContent = format(totalInterest);\r\n  }\r\n\r\n  $('#calc-btn').addEventListener('click', calculate);\r\n  $('#reset-btn').addEventListener('click', ()=>{\r\n    $('#amount').value = 5000000;\r\n    $('#interest').value = 7.25;\r\n    $('#years').value = 20;\r\n    $('#extra').value = 0;\r\n    $('#freq').value = 12;\r\n    $('#monthly').textContent = '\u2014';\r\n    $('#total-pay').textContent = '\u2014';\r\n    $('#total-interest').textContent = '\u2014';\r\n  });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/a>\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>Mortgage Calculators Single Calculator Comparison Calculator Mortgage Calculator Mortgage Amount ($) Interest Rate (%) Amortization Period (Years) Payment Frequency MonthlyBi-weeklyWeekly Calculate Reset Your Payment: $0.00 Total Payments During Term: $0.00 Interest Paid: $0.00 Principal Paid: $0.00 Balance at End of Term: $0.00 Comparison Calculator Mortgage 1 Amount ($) Mortgage 1 Interest Rate (%) Mortgage 1&#8230;<\/p>\n","protected":false},"author":1,"featured_media":10093,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-27","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/skgmortgages.com\/index.php\/wp-json\/wp\/v2\/pages\/27","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/skgmortgages.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/skgmortgages.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/skgmortgages.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/skgmortgages.com\/index.php\/wp-json\/wp\/v2\/comments?post=27"}],"version-history":[{"count":95,"href":"https:\/\/skgmortgages.com\/index.php\/wp-json\/wp\/v2\/pages\/27\/revisions"}],"predecessor-version":[{"id":989822,"href":"https:\/\/skgmortgages.com\/index.php\/wp-json\/wp\/v2\/pages\/27\/revisions\/989822"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/skgmortgages.com\/index.php\/wp-json\/wp\/v2\/media\/10093"}],"wp:attachment":[{"href":"https:\/\/skgmortgages.com\/index.php\/wp-json\/wp\/v2\/media?parent=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}