document.addEventListener("DOMContentLoaded", function() {
// Set default min date for all date inputs
const today = new Date().toISOString().split('T')[0];
const startDateInputs = document.querySelectorAll('input[type="date"]');
startDateInputs.forEach(input => {
input.setAttribute("min", today);
input.value = today; // Set default value to today
});
// Sync input fields for all loan types
const loanTypes = ['personal', 'home', 'car'];
loanTypes.forEach(type => {
const loanAmountInput = document.getElementById(`loan-amount-${type}`);
const loanDurationSelect = document.getElementById(`loan-duration-${type}`);
const customDurationInput = document.getElementById(`custom-duration-${type}`);
const startDateInput = document.getElementById(`start-date-${type}`);
const resultDisplay = document.getElementById(`monthly-payment-${type}`);
loanAmountInput.addEventListener('input', () => {
formatLoanInput(loanAmountInput); // Ensure formatting happens on input
validateAndCalculate(type, resultDisplay); // Validate and calculate on loan amount input
});
loanDurationSelect.addEventListener('change', () => {
if (loanDurationSelect.value === 'custom') {
customDurationInput.style.display = 'block';
} else {
customDurationInput.style.display = 'none';
customDurationInput.value = ""; // Reset custom duration
}
validateAndCalculate(type, resultDisplay); // Validate and calculate on duration change
});
customDurationInput.addEventListener('input', () => {
validateAndCalculate(type, resultDisplay); // Validate and calculate on custom duration input
});
startDateInput.addEventListener('input', () => {
validateAndCalculate(type, resultDisplay); // Validate and calculate on start date input
});
});
// Tab functionality
const tabs = document.querySelectorAll('.tab-button');
const panes = document.querySelectorAll('.tab-pane');
tabs.forEach(tab => {
tab.addEventListener('click', function() {
tabs.forEach(t => t.classList.remove('active'));
panes.forEach(pane => pane.classList.remove('active'));
this.classList.add('active');
const targetPane = document.getElementById(this.dataset.target);
targetPane.classList.add('active');
// Hide all result displays first
document.querySelectorAll('[id^="monthly-payment-"]').forEach(resultDiv => {
resultDiv.style.display = 'none';
});
// Show the result for the selected tab
document.getElementById(`monthly-payment-${this.dataset.target}`).style.display = 'block';
// Reset form fields when changing tabs
resetForm();
});
});
// Trigger click on the personal loan tab to set default view
tabs[0].click();
});
// Formatting loan input to add commas
function formatLoanInput(input) {
const value = input.value.replace(/,/g, '');
if (!isNaN(value)) {
input.value = Number(value).toLocaleString('en-US');
}
}
// Validate and calculate monthly payment
function validateAndCalculate(type, resultDisplay) {
const loanAmountInput = document.getElementById(`loan-amount-${type}`);
const loanDurationSelect = document.getElementById(`loan-duration-${type}`);
const customDurationInput = document.getElementById(`custom-duration-${type}`);
const startDateInput = document.getElementById(`start-date-${type}`);
const loanAmount = parseFloat(loanAmountInput.value.replace(/,/g, ''));
let loanDuration = loanDurationSelect.value === 'custom' ? parseInt(customDurationInput.value) : parseInt(loanDurationSelect.value);
const startDate = new Date(startDateInput.value);
// Clear previous error messages
clearErrorMessages(type);
let errorFound = false;
// Validate input fields
if (isNaN(loanAmount) || loanAmount < 5000) {
document.getElementById(`loan-amount-error-${type}`).innerText = "Loan amount must be at least AED 5,000";
errorFound = true;
}
if (isNaN(loanDuration) || loanDuration 348) {
document.getElementById(`loan-duration-error-${type}`).innerText = "Loan duration must be between 12 and 348 months";
errorFound = true;
}
if (isNaN(startDate.getTime())) {
document.getElementById(`start-date-error-${type}`).innerText = "Please select a valid start date.";
errorFound = true;
}
// Perform calculation if no errors
if (!errorFound) {
setTimeout(function() {
// Define static interest rates
var interestRates = {
personal: 6.5,
home: 3.99,
car: 2.75
};
// Get the corresponding interest rate
var interestType = interestRates[type] || 0; // Default to 0 if the loan type is not found
var interestRate = (interestType / 100 / 360) * 30.45;
// Calculate monthly payment
var payments = (interestRate / (1 - Math.pow((1 + interestRate), -loanDuration))) * loanAmount;
var emi = Math.round(payments);
resultDisplay.innerHTML = `${emi.toLocaleString('en-US', { style: 'currency', currency: 'AED' })}
per month`;
}, 250);
} else {
resultDisplay.innerText = "Please correct the errors above.";
}
}
// Clear error messages
function clearErrorMessages(type) {
document.getElementById(`loan-amount-error-${type}`).innerText = "";
document.getElementById(`loan-duration-error-${type}`).innerText = "";
document.getElementById(`start-date-error-${type}`).innerText = "";
}
// Reset form fields
function resetForm() {
const loanTypes = ['personal', 'home', 'car'];
loanTypes.forEach(type => {
document.getElementById(`loan-amount-${type}`).value = "";
document.getElementById(`loan-duration-${type}`).selectedIndex = 0;
document.getElementById(`custom-duration-${type}`).style.display = "none";
document.getElementById(`custom-duration-${type}`).value = "";
document.getElementById(`start-date-${type}`).value = new Date().toISOString().split('T')[0]; // Reset to today
clearErrorMessages(type);
});
}
Please note that figures stated are indicative and should only be used as a guide. They should not be considered final calculations or as a commitment from NBF Islamic to grant financing. To establish final accurate figures, please visit any NBF Islamic branch where a member of our team will be happy to assist you, ensuring you get the best deal to match your requirements.
