Embed

<div id="roi-calculator" style="font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; background-color: #f8fafc; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
  <h2 style="text-align: center; color: #1e3a8a; margin-bottom: 20px;">UAE Real Estate ROI Calculator</h2>
  
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;">
    <div>
      <label style="display: block; margin-bottom: 5px; font-weight: bold;">Emirates</label>
      <select id="emirate-select" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px;">
        <option value="All">All Emirates</option>
        <option value="Dubai" selected>Dubai</option>
        <option value="Abu Dhabi">Abu Dhabi</option>
        <option value="Ras Al Khaimah">Ras Al Khaimah</option>
        <option value="Sharjah">Sharjah</option>
      </select>
      
      <label style="display: block; margin-bottom: 5px; font-weight: bold;">Location</label>
      <select id="location-select" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px;">
        
      </select>
    </div>
    
    <div>
      <label style="display: block; margin-bottom: 5px; font-weight: bold;">Purchase Price (AED)</label>
      <input id="purchase-price" type="number" value="1000000" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px;">
      
      <label style="display: block; margin-bottom: 5px; font-weight: bold;">Down Payment (AED)</label>
      <input id="down-payment" type="number" value="250000" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px;">
    </div>
    
    <div>
      <label style="display: block; margin-bottom: 5px; font-weight: bold;">Interest Rate (%)</label>
      <input id="interest-rate" type="number" value="3.5" step="0.1" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px;">
      
      <label style="display: block; margin-bottom: 5px; font-weight: bold;">Loan Term (years)</label>
      <input id="loan-term" type="number" value="25" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px;">
    </div>
    
    <div>
      <label style="display: block; margin-bottom: 5px; font-weight: bold;">Monthly Rent (AED)</label>
      <input id="monthly-rent" type="number" value="5000" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px;">
      
      <label style="display: block; margin-bottom: 5px; font-weight: bold;">Occupancy Rate (%)</label>
      <input id="occupancy-rate" type="number" value="90" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px;">
    </div>
    
    <div>
      <label style="display: block; margin-bottom: 5px; font-weight: bold;">Service Charge (AED/year)</label>
      <input id="service-charge" type="number" value="15000" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px;">
      
      <label style="display: block; margin-bottom: 5px; font-weight: bold;">Holding Period (years)</label>
      <input id="holding-period" type="number" value="5" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px;">
    </div>
  </div>
  
  <div style="text-align: center; margin: 20px 0;">
    <button id="calculate-button" style="background-color: #1e3a8a; color: white; border: none; padding: 10px 20px; border-radius: 4px; font-size: 16px; cursor: pointer;">Calculate ROI</button>
  </div>
  
  <div id="results-section" style="display: none; margin-top: 30px; border-top: 1px solid #e2e8f0; padding-top: 20px;">
    <h3 style="text-align: center; color: #1e3a8a; margin-bottom: 20px;">Investment Results</h3>
    
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px;">
      <div style="background-color: #f0fdf4; padding: 15px; border-radius: 6px;">
        <h4 style="margin: 0 0 5px 0;">Return on Investment</h4>
        <div id="roi-value" style="font-size: 22px; font-weight: bold;"></div>
        <div id="roi-annual" style="font-size: 14px; color: #64748b;"></div>
      </div>
      
      <div style="background-color: #f5f3ff; padding: 15px; border-radius: 6px;">
        <h4 style="margin: 0 0 5px 0;">Future Property Value</h4>
        <div id="future-value" style="font-size: 22px; font-weight: bold;"></div>
        <div id="value-period" style="font-size: 14px; color: #64748b;"></div>
      </div>
    </div>
    
    <div id="recommendation" style="background-color: #f8fafc; border-radius: 6px; padding: 15px; margin-top: 20px; border-left: 4px solid #3b82f6;">
      
    </div>
  </div>
</div>

<script>
// Location data with all UAE locations
const locationData = {
  // Dubai Prime Established
  'Dubai - Downtown': { area: 'Dubai', type: 'Prime Established', appreciationRate: 4.5, occupancyRate: 92, rentalYield: 5.2 },
  'Dubai - Palm Jumeirah': { area: 'Dubai', type: 'Prime Established', appreciationRate: 5.0, occupancyRate: 88, rentalYield: 4.8 },
  'Dubai - Dubai Marina': { area: 'Dubai', type: 'Prime Established', appreciationRate: 4.2, occupancyRate: 90, rentalYield: 5.5 },
  'Dubai - Emirates Hills': { area: 'Dubai', type: 'Prime Established', appreciationRate: 4.2, occupancyRate: 85, rentalYield: 4.2 },
  'Dubai - Bluewaters Island': { area: 'Dubai', type: 'Prime Established', appreciationRate: 4.8, occupancyRate: 90, rentalYield: 5.0 },
  
  // Dubai Prime Upcoming
  'Dubai - Dubai Creek Harbour': { area: 'Dubai', type: 'Prime Upcoming', appreciationRate: 5.5, occupancyRate: 86, rentalYield: 5.7 },
  'Dubai - Dubai Hills Estate': { area: 'Dubai', type: 'Prime Upcoming', appreciationRate: 4.7, occupancyRate: 88, rentalYield: 5.0 },
  'Dubai - Emaar Beachfront': { area: 'Dubai', type: 'Prime Upcoming', appreciationRate: 5.3, occupancyRate: 85, rentalYield: 5.5 },
  'Dubai - MBR City': { area: 'Dubai', type: 'Prime Upcoming', appreciationRate: 5.2, occupancyRate: 84, rentalYield: 5.1 },
  'Dubai - Sanaiya Island': { area: 'Dubai', type: 'Prime Upcoming', appreciationRate: 5.1, occupancyRate: 85, rentalYield: 5.4 },
  
  // Abu Dhabi
  'Abu Dhabi - Saadiyat Island': { area: 'Abu Dhabi', type: 'Prime Established', appreciationRate: 3.8, occupancyRate: 84, rentalYield: 5.0 },
  'Abu Dhabi - Yas Island': { area: 'Abu Dhabi', type: 'Prime Established', appreciationRate: 3.5, occupancyRate: 85, rentalYield: 5.5 },
  
  // Ras Al Khaimah
  'Ras Al Khaimah - Al Marjan Island': { area: 'Ras Al Khaimah', type: 'Prime Upcoming', appreciationRate: 3.5, occupancyRate: 70, rentalYield: 5.8 },
  'Ras Al Khaimah - Sanaiya Island': { area: 'Ras Al Khaimah', type: 'Prime Upcoming', appreciationRate: 3.7, occupancyRate: 72, rentalYield: 5.9 },
  
  // Sharjah
  'Sharjah - Aljada': { area: 'Sharjah', type: 'Prime Upcoming', appreciationRate: 3.0, occupancyRate: 82, rentalYield: 6.5 }
};

// When DOM is fully loaded
document.addEventListener('DOMContentLoaded', function() {
  // DOM Elements
  const emirateSelect = document.getElementById('emirate-select');
  const locationSelect = document.getElementById('location-select');
  const purchasePrice = document.getElementById('purchase-price');
  const downPayment = document.getElementById('down-payment');
  const interestRate = document.getElementById('interest-rate');
  const loanTerm = document.getElementById('loan-term');
  const monthlyRent = document.getElementById('monthly-rent');
  const occupancyRate = document.getElementById('occupancy-rate');
  const serviceCharge = document.getElementById('service-charge');
  const holdingPeriod = document.getElementById('holding-period');
  const calculateButton = document.getElementById('calculate-button');
  const resultsSection = document.getElementById('results-section');

  // Format currency
  function formatCurrency(value) {
    return 'AED ' + Math.round(value).toLocaleString();
  }

  // Format percentage
  function formatPercent(value) {
    return value.toFixed(2) + '%';
  }

  // Filter locations by emirate
  function filterLocations() {
    const selectedEmirate = emirateSelect.value;
    const filteredLocations = Object.keys(locationData).filter(location => {
      return selectedEmirate === 'All' || locationData[location].area === selectedEmirate;
    });
    
    // Clear location select
    locationSelect.innerHTML = '';
    
    // Add options
    filteredLocations.forEach(location => {
      const option = document.createElement('option');
      option.value = location;
      option.textContent = location;
      locationSelect.appendChild(option);
    });
    
    // Trigger change to update info
    updateLocationInfo();
  }

  // Update location info and related fields
  function updateLocationInfo() {
    const selectedLocation = locationSelect.value;
    const location = locationData[selectedLocation];
    
    if (location) {
      // Update related inputs
      occupancyRate.value = location.occupancyRate;
      
      // Calculate rent based on yield
      const price = parseFloat(purchasePrice.value) || 1000000;
      const calculatedRent = Math.round((price * (location.rentalYield / 100)) / 12);
      monthlyRent.value = calculatedRent;
    }
  }

  // Calculate mortgage payment
  function calculateMortgage(loanAmount, interestRate, loanTerm) {
    if (!loanAmount || !interestRate || !loanTerm) return 0;
    
    const monthlyRate = interestRate / 100 / 12;
    const numPayments = loanTerm * 12;
    
    if (interestRate === 0) return loanAmount / numPayments;
    
    const payment = loanAmount * monthlyRate * Math.pow(1 + monthlyRate, numPayments) / 
                   (Math.pow(1 + monthlyRate, numPayments) - 1);
    return payment;
  }

  // Calculate ROI
  function calculateROI() {
    // Get input values
    const price = parseFloat(purchasePrice.value) || 1000000;
    const down = parseFloat(downPayment.value) || 250000;
    const rate = parseFloat(interestRate.value) || 3.5;
    const term = parseFloat(loanTerm.value) || 25;
    const rent = parseFloat(monthlyRent.value) || 5000;
    const occupancy = parseFloat(occupancyRate.value) || 90;
    const service = parseFloat(serviceCharge.value) || 15000;
    const holding = parseFloat(holdingPeriod.value) || 5;
    
    // Calculate loan amount
    const loanAmount = price - down;
    
    // Calculate fees
    const dldFee = price * 0.04;
    const agencyFee = price * 0.02;
    const mortgageFee = loanAmount * 0.0025;
    
    // Total initial investment
    const totalInvestment = down + dldFee + agencyFee + mortgageFee;
    
    // Calculate mortgage payment
    const monthlyPayment = calculateMortgage(loanAmount, rate, term);
    const annualPayment = monthlyPayment * 12;
    
    // Calculate rental income
    const annualRent = rent * 12 * (occupancy / 100);
    
    // Calculate expenses
    const maintenance = price * 0.01; // 1% of property value
    const management = annualRent * 0.05; // 5% of rental income
    const insurance = 2500;
    const totalExpenses = maintenance + management + service + insurance;
    
    // Calculate cash flow
    const cashFlow = annualRent - totalExpenses - annualPayment;
    
    // Get appreciation rate from selected location
    const selectedLocation = locationSelect.value;
    const appreciationRate = locationData[selectedLocation].appreciationRate;
    
    // Calculate future value
    const futureValue = price * Math.pow(1 + (appreciationRate / 100), holding);
    
    // Calculate remaining loan balance (simplified)
    let remainingLoan = loanAmount;
    for (let i = 0; i < holding; i++) {
      const yearlyInterest = remainingLoan * (rate / 100);
      const yearlyPrincipal = Math.min(remainingLoan, annualPayment - yearlyInterest);
      remainingLoan -= yearlyPrincipal;
    }
    
    // Calculate profit
    const equity = futureValue - remainingLoan;
    const totalProfit = (equity - totalInvestment) + (cashFlow * holding);
    
    // Calculate ROI
    const roi = (totalProfit / totalInvestment) * 100;
    const annualROI = (Math.pow(1 + (roi / 100), 1 / holding) - 1) * 100;
    
    // Update results
    document.getElementById('roi-value').textContent = formatPercent(roi);
    document.getElementById('roi-annual').textContent = formatPercent(annualROI) + ' annualized';
    document.getElementById('roi-value').style.color = annualROI > 8 ? '#10b981' : annualROI > 5 ? '#3b82f6' : '#f59e0b';
    
    document.getElementById('future-value').textContent = formatCurrency(futureValue);
    document.getElementById('value-period').textContent = 'After ' + holding + ' years';
    
    // Update recommendation
    const recommendation = document.getElementById('recommendation');
    if (annualROI > 8) {
      recommendation.style.borderLeftColor = '#10b981';
      recommendation.innerHTML = `
        <h4 style="margin: 0 0 10px 0; color: #10b981;">Strong Investment Opportunity</h4>
        <p style="margin: 0; font-size: 14px;">This ${locationData[selectedLocation].type} property in ${selectedLocation.split(' - ')[0]} shows strong potential returns with an annualized ROI of ${formatPercent(annualROI)}.</p>
      `;
    } else if (annualROI > 5) {
      recommendation.style.borderLeftColor = '#3b82f6';
      recommendation.innerHTML = `
        <h4 style="margin: 0 0 10px 0; color: #3b82f6;">Good Investment Potential</h4>
        <p style="margin: 0; font-size: 14px;">This ${locationData[selectedLocation].type} property in ${selectedLocation.split(' - ')[0]} shows decent potential with an annualized ROI of ${formatPercent(annualROI)}.</p>
      `;
    } else {
      recommendation.style.borderLeftColor = '#f59e0b';
      recommendation.innerHTML = `
        <h4 style="margin: 0 0 10px 0; color: #f59e0b;">Moderate Investment Potential</h4>
        <p style="margin: 0; font-size: 14px;">This ${locationData[selectedLocation].type} property in ${selectedLocation.split(' - ')[0]} shows moderate potential with an annualized ROI of ${formatPercent(annualROI)}. Consider negotiating a better purchase price or finding properties with higher rental yields.</p>
      `;
    }
    
    // Show results section
    resultsSection.style.display = 'block';
  }

  // Event listeners
  emirateSelect.addEventListener('change', filterLocations);
  locationSelect.addEventListener('change', updateLocationInfo);
  purchasePrice.addEventListener('change', updateLocationInfo);
  calculateButton.addEventListener('click', calculateROI);

  // Initialize on load
  filterLocations();
});
</script>