República Dominicana

Hogarium Real Estate

hogariumrd.com

<div id="loan-master-v87" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #ffffff; padding: 25px 20px; border: 1px solid #e2e8f0; border-radius: 16px; max-width: 500px; margin: 0 auto; box-shadow: 0 4px 20px rgba(0,0,0,0.05);">

    <h2 style="color: #1a1a1a !important; margin: 0 0 8px 0 !important; font-weight: 800 !important; font-size: 28px !important; text-align: center !important; letter-spacing: -0.5px !important;">Calculadora de Préstamos</h2>
    
    <p style="text-align: center; font-size: 11px; color: #e53e3e; font-weight: 700; margin: 0 0 10px 0;">NOTA: Si no carga el cálculo, actualiza la página.</p>
    
    <p style="color: #94a3b8; font-size: 12px; margin-bottom: 25px; text-align: center;">Resultados automáticos garantizados.</p>

    <div style="display: grid; grid-template-columns: 1fr; gap: 15px; margin-bottom: 20px;">
        
        <div style="width: 100%;">
            <label style="display: block; font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; margin-bottom: 5px;">Precio de Venta</label>
            <div style="display: flex !important; flex-direction: row !important; align-items: center !important; border: 1.5px solid #f1f5f9; border-radius: 8px; padding: 0 12px; background: #f8fafc; overflow: hidden !important;">
                <span style="color: #94a3b8; font-weight: 700; font-size: 14px; margin-right: 6px; white-space: nowrap !important;">RD$</span>
                <input type="text" id="v87_p" placeholder="5,000,000" inputmode="decimal" style="flex: 1 !important; border: none !important; background: transparent !important; padding: 12px 0 !important; font-size: 17px !important; font-weight: 700 !important; outline: none !important; color: #1e293b !important; width: 100% !important;">
            </div>
        </div>

        <div style="display: grid; grid-template-columns: 1.8fr 1fr; gap: 12px;">
            <div>
                <label style="display: block; font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; margin-bottom: 5px;">Inicial</label>
                <div style="display: flex !important; flex-direction: row !important; align-items: center !important; border: 1.5px solid #f1f5f9; border-radius: 8px; padding: 0 10px; background: #f8fafc;">
                    <span style="color: #94a3b8; font-weight: 700; font-size: 12px; margin-right: 4px; white-space: nowrap !important;">RD$</span>
                    <input type="text" id="v87_i" placeholder="1,000,000" inputmode="decimal" style="flex: 1 !important; border: none !important; background: transparent !important; padding: 12px 0 !important; font-size: 15px !important; font-weight: 700 !important; outline: none !important; width: 100% !important;">
                </div>
            </div>
            <div>
                <label style="display: block; font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; margin-bottom: 5px;">Años</label>
                <div style="display: flex !important; flex-direction: row !important; align-items: center !important; border: 1.5px solid #f1f5f9; border-radius: 8px; padding: 0 10px; background: #f8fafc;">
                    <input type="text" id="v87_a" placeholder="20" inputmode="numeric" style="flex: 1 !important; border: none !important; background: transparent !important; padding: 12px 0 !important; font-size: 15px !important; font-weight: 700 !important; outline: none !important; width: 100% !important; text-align: center !important;">
                </div>
            </div>
        </div>
    </div>

    <div style="background: #f0f7ff; padding: 14px; border-radius: 10px; border: 1px solid #e0eefe; margin-bottom: 10px; display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important;">
        <span style="font-weight: 600; color: #475569; font-size: 13px; white-space: nowrap !important;">Monto Préstamo:</span>
        <span id="v87_out_m" style="font-size: 17px; font-weight: 900; color: #2563eb; white-space: nowrap !important;">RD$ 0.00</span>
    </div>

    <div style="background: #fff7ed; padding: 14px; border-radius: 10px; border: 1px solid #ffedd5; margin-bottom: 5px; display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important;">
        <span style="font-weight: 600; color: #9a3412; font-size: 13px; white-space: nowrap !important;">Impuesto (3%):</span>
        <span id="v87_out_tax" style="font-size: 17px; font-weight: 900; color: #ea580c; white-space: nowrap !important;">RD$ 0.00</span>
    </div>
    <p style="font-size: 9px; color: #9a3412; margin: 0 0 25px 0; font-weight: 700; text-align: center; letter-spacing: 0.2px;">ESTE ES EL MONTO A PAGAR PARA PASAR EL INMUEBLE A NOMBRE SUYO</p>

    <table style="width: 100% !important; border-collapse: collapse !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; overflow: hidden !important; table-layout: fixed !important; display: table !important;">
        <thead>
            <tr style="background: #0f172a !important; color: #ffffff !important; display: table-row !important;">
                <th style="width: 38% !important; padding: 12px 5px !important; font-size: 11px !important; text-transform: uppercase !important; text-align: center !important; font-weight: 700 !important; display: table-cell !important;">Tasa Anual</th>
                <th style="width: 62% !important; padding: 12px 5px !important; font-size: 11px !important; text-transform: uppercase !important; text-align: center !important; font-weight: 700 !important; display: table-cell !important;">Cuota Mensual</th>
            </tr>
        </thead>
        <tbody id="v87_table_body" style="display: table-row-group !important;">
        </tbody>
    </table>

    <div style="margin-top: 20px; padding: 12px; background: #f8fafc; border-radius: 8px; border: 1px solid #f1f5f9;">
        <p style="text-align: center; font-size: 9px; color: #64748b; margin: 0; line-height: 1.5;">
            <strong>NOTA IMPORTANTE:</strong> Estos montos son estimados e ilustrativos. Consulta con tu banco.<br>
            <span style="color: #94a3b8;">*Incluye Seguros de Vida, Incapacidad e Incendio (estimados).</span>
        </p>
    </div>
</div>

<script>
(function() {
    // Configuración de constantes
    const F_VIDA = 0.0464 / 100;
    const F_INCAP = 0.0139 / 100;
    const F_INCENDIO = 0.0677 / 100;

    // Helper para formatear dinero (RD$)
    const fmtMoney = new Intl.NumberFormat('es-DO', { 
        style: 'currency', 
        currency: 'DOP', 
        minimumFractionDigits: 0,
        maximumFractionDigits: 0
    });

    // Helper para limpiar el input y obtener número puro
    function getCleanNumber(val) {
        if (!val) return 0;
        // Elimina todo lo que no sea número o punto decimal
        return parseFloat(val.replace(/[^0-9.]/g, '')) || 0;
    }

    // Helper para formatear input con comas mientras escribes
    function formatInputNumber(num) {
        if (!num) return '';
        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }

    function coreCalculate() {
        const pEl = document.getElementById('v87_p');
        const iEl = document.getElementById('v87_i');
        const aEl = document.getElementById('v87_a');

        if (!pEl || !iEl || !aEl) return;

        // Obtener valores limpios para cálculo
        const p = getCleanNumber(pEl.value);
        const i = getCleanNumber(iEl.value);
        const a = getCleanNumber(aEl.value);

        // Cálculos base
        const monto = Math.max(0, p - i);
        const tax = p * 0.03;

        // Mostrar resultados de cabecera
        document.getElementById('v87_out_m').innerText = fmtMoney.format(monto);
        document.getElementById('v87_out_tax').innerText = fmtMoney.format(tax);

        // Generar tabla
        let html = '';
        if (monto > 0 && a > 0) {
            const meses = a * 12;
            const seguros = (monto * F_VIDA) + (monto * F_INCAP) + (p * F_INCENDIO);

            // Generar filas para tasas de 9.0% a 15.0%
            for (let t_int = 90; t_int <= 150; t_int += 5) {
                const t = t_int / 10; // Tasa %
                const r = (t / 100) / 12; // Tasa mensual
                const pot = Math.pow(1 + r, meses);
                const cuotaBanco = (monto * pot * r) / (pot - 1);
                const total = cuotaBanco + seguros;

                html += `
                <tr style="border-bottom: 1px solid #f1f5f9 !important; display: table-row !important;">
                    <td style="padding: 12px 5px !important; text-align: center !important; font-weight: 700 !important; color: #64748b !important; font-size: 14px !important; display: table-cell !important;">${t.toFixed(2)}%</td>
                    <td style="padding: 12px 5px !important; text-align: center !important; font-weight: 800 !important; color: #2563eb !important; font-size: 14px !important; display: table-cell !important;">
                        <span style="background: #f0f7ff !important; padding: 4px 10px !important; border-radius: 6px !important; white-space: nowrap !important;">${fmtMoney.format(total)}</span>
                    </td>
                </tr>`;
            }
        } else {
            html = '<tr style="display: table-row !important;"><td colspan="2" style="padding:30px !important; text-align:center !important; font-size:13px !important; color:#94a3b8 !important; display: table-cell !important;">Ingresa Precio, Inicial y Años.</td></tr>';
        }
        
        const tableBody = document.getElementById('v87_table_body');
        if(tableBody) tableBody.innerHTML = html;
    }

    // Inicializador robusto con Delegación de Eventos
    function initCalculator() {
        const container = document.getElementById('loan-master-v87');
        
        if (container) {
            // Establecer valores por defecto si están vacíos
            const pEl = document.getElementById('v87_p');
            const iEl = document.getElementById('v87_i');
            const aEl = document.getElementById('v87_a');

            if(pEl && !pEl.value) pEl.value = "5,000,000";
            if(iEl && !iEl.value) iEl.value = "1,000,000";
            if(aEl && !aEl.value) aEl.value = "20";

            // Event Listener en el contenedor (funciona mejor con CMS)
            container.addEventListener('input', function(e) {
                // Solo reaccionar si el cambio viene de nuestros inputs
                if (e.target.id === 'v87_p' || e.target.id === 'v87_i' || e.target.id === 'v87_a') {
                    
                    // Lógica visual: Formatear con comas si es precio o inicial
                    if (e.target.id !== 'v87_a') {
                        // Guardar posición del cursor para evitar saltos molestos
                        const cursor = e.target.selectionStart; 
                        const oldLen = e.target.value.length;
                        
                        const raw = getCleanNumber(e.target.value);
                        if (raw > 0) {
                             e.target.value = formatInputNumber(raw);
                        }
                        
                        // Ajuste menor de cursor (opcional, ayuda a la usabilidad)
                        // Si se agregó una coma, ajustar cursor
                        // (Simplificado para estabilidad: dejar cursor al final si es complicado)
                    }

                    // Ejecutar cálculo
                    coreCalculate();
                }
            });

            // Ejecutar cálculo inicial
            coreCalculate();
            
            // Detener el intervalo de búsqueda
            if (window.loanInterval) clearInterval(window.loanInterval);
        }
    }

    // Intentar inicializar cada 300ms hasta encontrar el contenedor
    window.loanInterval = setInterval(initCalculator, 300);

})();
</script>