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);
});
}
يرجى ملاحظة أن الأرقام المذكورة هي أرقام استرشادية فقط ويجب استخدامها كمرجع عام، ولا يُمكن اعتبارها حسابات نهائية أو التزامًا من إن بي إف الإسلامي بتقديم التمويل. للحصول على الأرقام النهائية والدقيقة، يُرجى زيارة أي من فروع بنك الفجيرة الوطني ، حيث سيكون فريقنا على استعداد تام لمساعدتك وضمان حصولك على أفضل عرض يتناسب مع متطلباتك.
