@extends('layouts.dashboardnew')

@section('content')

<!-- estilos calculadora -->
<link href="{{ asset('assets/css/calculadora.css') }}" rel="stylesheet" type="text/css">


{{-- ============================================================== --}}
{{-- HERO --}}
{{-- ============================================================== --}}
<div class="calc-hero mt-4 fade-in">
    <h2><i class="fa-solid fa-calculator" style="margin-right:8px"></i> Calculadora MLM</h2>
    <p>Simula tu plan de compensación con costos reales, valor comisionable, proyección temporal y análisis de rentabilidad.</p>
    <div class="hero-actions">
        <button class="hero-btn hero-btn-light" onclick="openHelpModal()">
            <i class="fa-solid fa-circle-play"></i> ¿Cómo funciona?
        </button>
        <a href="https://sinergiared.com/como-crear-plan-de-compensacion-multinivel/" target="_blank" class="hero-btn hero-btn-light" style="text-decoration:none">
            <i class="fa-solid fa-book-open"></i> Guía: Plan de Compensación
        </a>
    </div>
</div>


{{-- ============================================================== --}}
{{-- MODAL DE AYUDA (VIDEO + BLOG) --}}
{{-- ============================================================== --}}
<div class="modal-overlay" id="helpModal">
    <div class="modal-box">
        <div class="modal-header">
            <h3><i class="fa-solid fa-graduation-cap" style="color:#2563EB;margin-right:8px"></i> Aprende a usar la Calculadora</h3>
            <button class="modal-close" onclick="closeHelpModal()"><i class="fa-solid fa-xmark"></i></button>
        </div>

        <div class="modal-tabs">
            <button class="modal-tab active" onclick="switchTab('video',this)">🎬 Video tutorial</button>
            <button class="modal-tab" onclick="switchTab('guide',this)">📘 Guía escrita</button>
        </div>

        {{-- =================================================== --}}
        {{-- VIDEO TAB                                            --}}
        {{-- Para cambiar el video:                               --}}
        {{-- 1. Reemplaza el src del iframe con tu URL de embed   --}}
        {{-- YouTube: https://www.youtube.com/embed/VIDEO_ID      --}}
        {{-- Vimeo: https://player.vimeo.com/video/VIDEO_ID       --}}
        {{-- =================================================== --}}
        <div class="modal-tab-content active" id="tab-video">
            <div class="video-container">
                <iframe
                    src="https://www.youtube.com/embed/YQH9T1GzaYs"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen>
                </iframe>
            </div>
            <p style="font-size:12px;color:#8a94a6;text-align:center;margin-top:12px">
                ¿Dudas? Escríbenos por WhatsApp: <a href="https://wa.me/573213912535" target="_blank" style="color:#2563EB;font-weight:600">+57 321 391 2535</a>
            </p>
        </div>

        <div class="modal-tab-content" id="tab-guide">
            <div style="font-size:14px;color:#4a5568;line-height:1.7">
                <h4 style="font-size:16px;font-weight:700;color:#1a1a2e;margin-bottom:12px">¿Cómo crear un plan de compensación?</h4>

                <p style="margin-bottom:12px">La calculadora te permite simular los 3 tipos de planes más usados en multinivel: <strong>Binario, Uninivel y Matriz</strong>. Sigue estos pasos:</p>

                <div style="background:#f0f7ff;border-radius:10px;padding:14px;margin-bottom:12px">
                    <strong style="color:#2563EB">Paso 1:</strong> Ingresa tu nombre y el de tu empresa para personalizar el reporte.
                </div>
                <div style="background:#E1F5EE;border-radius:10px;padding:14px;margin-bottom:12px">
                    <strong style="color:#1D9E75">Paso 2:</strong> Define el precio, costos e impuestos de tu producto. La calculadora generará automáticamente el <em>valor comisionable</em>.
                </div>
                <div style="background:#FAECE7;border-radius:10px;padding:14px;margin-bottom:12px">
                    <strong style="color:#D85A30">Paso 3:</strong> Configura la estructura de tu plan (niveles, comisiones, capping) y selecciona una proyección temporal.
                </div>
                <div style="background:#FAEEDA;border-radius:10px;padding:14px;margin-bottom:16px">
                    <strong style="color:#EF9F27">Paso 4:</strong> Presiona "Simular" y analiza los resultados. Puedes exportar a PDF para compartirlo.
                </div>

                <a href="https://sinergiared.com/como-crear-plan-de-compensacion-multinivel/" target="_blank" style="display:inline-flex;align-items:center;gap:6px;color:#2563EB;font-weight:700;font-size:14px;text-decoration:none">
                    <i class="fa-solid fa-arrow-up-right-from-square"></i> Leer artículo completo en el blog
                </a>
            </div>
        </div>
    </div>
</div>


{{-- ============================================================== --}}
{{-- SELECTOR DE PLAN --}}
{{-- ============================================================== --}}
<div class="plan-selector fade-in" style="animation-delay:.1s">
    <div class="plan-btn active" data-plan="binary" onclick="selectPlan('binary')">
        <div class="plan-icon" style="background:#EFF6FF;color:#2563EB"><i class="fa-solid fa-code-branch"></i></div>
        <div class="plan-name">Binario</div>
        <div class="plan-desc">2 piernas · pares</div>
    </div>
    <div class="plan-btn" data-plan="unilevel" onclick="selectPlan('unilevel')">
        <div class="plan-icon" style="background:#E1F5EE;color:#1D9E75"><i class="fa-solid fa-sitemap"></i></div>
        <div class="plan-name">Uninivel</div>
        <div class="plan-desc">Ancho ilimitado</div>
    </div>
    <div class="plan-btn" data-plan="matrix" onclick="selectPlan('matrix')">
        <div class="plan-icon" style="background:#E6F1FB;color:#378ADD"><i class="fa-solid fa-table-cells"></i></div>
        <div class="plan-name">Matriz</div>
        <div class="plan-desc">Ancho × Profundidad</div>
    </div>
</div>


<div class="row">
    {{-- COLUMNA IZQUIERDA --}}
    <div class="col-lg-5 mb-3">

        {{-- PASO 0: Datos personales --}}
        <div class="calc-card fade-in" style="animation-delay:.12s">
            <div class="section-title"><span class="step-num"><i class="fa-solid fa-user" style="font-size:12px"></i></span> Tu información</div>
            <div class="section-subtitle">Personaliza tu simulación y el reporte PDF.</div>
            <div class="row">
                <div class="col-6">
                    <div class="form-group-calc">
                        <label>Nombre completo</label>
                        <input type="text" class="calc-input" id="userName" placeholder="Ej: Carlos Pérez">
                    </div>
                </div>
                <div class="col-6">
                    <div class="form-group-calc">
                        <label>Empresa o proyecto</label>
                        <input type="text" class="calc-input" id="companyName" placeholder="Ej: Mi Red Global">
                    </div>
                </div>
            </div>
        </div>

        {{-- PASO 1: Producto --}}
        <div class="calc-card fade-in" style="animation-delay:.15s">
            <div class="section-title"><span class="step-num">1</span> Producto o servicio</div>
            <div class="section-subtitle">Define el precio y los costos reales de tu producto.</div>
            <div class="form-group-calc">
                <label>Precio de venta al público</label>
                <div class="input-group-calc"><span class="input-addon">$</span><input type="number" class="calc-input" id="salePrice" value="100" min="1" step="1" oninput="updateComissionable()"></div>
            </div>
            <div class="form-group-calc">
                <label>Costo de producción / adquisición</label>
                <div class="input-group-calc"><span class="input-addon">$</span><input type="number" class="calc-input" id="productionCost" value="25" min="0" step="1" oninput="updateComissionable()"></div>
            </div>
            <div class="row">
                <div class="col-6"><div class="form-group-calc"><label>IVA / Impuesto <span class="info-tip" title="Impuesto sobre la venta. Ej: 19% Colombia, 16% México">?</span></label><div class="input-group-calc"><span class="input-addon">%</span><input type="number" class="calc-input" id="taxSale" value="19" min="0" max="100" step="0.5" oninput="updateComissionable()"></div></div></div>
                <div class="col-6"><div class="form-group-calc"><label>Pasarela de pago <span class="info-tip" title="Comisión por cobros con tarjeta, PayU, Stripe, etc.">?</span></label><div class="input-group-calc"><span class="input-addon">%</span><input type="number" class="calc-input" id="gatewayFee" value="5" min="0" max="100" step="0.5" oninput="updateComissionable()"></div></div></div>
            </div>
            <div class="form-group-calc">
                <label>Logística y envío</label>
                <div class="input-group-calc"><span class="input-addon">$</span><input type="number" class="calc-input" id="shippingCost" value="4" min="0" step="1" oninput="updateComissionable()"></div>
            </div>
            <div class="auto-calc-box"><div class="acb-label">Utilidad bruta por producto</div><div class="acb-value" id="grossProfit">$0</div><div class="acb-detail" id="grossDetail"></div></div>
            <div class="form-group-calc">
                <label>% de utilidad destinado a comisiones <span class="info-tip" title="Qué porcentaje de la utilidad bruta compartes con tu red.">?</span></label>
                <div class="input-group-calc"><span class="input-addon">%</span><input type="number" class="calc-input" id="commissionableRate" value="40" min="1" max="100" step="1" oninput="updateComissionable()"></div>
            </div>
            <div class="auto-calc-box" style="background:#EFF6FF;border-color:#2563EB"><div class="acb-label" style="color:#2563EB">Valor comisionable por producto</div><div class="acb-value" id="commissionableValue">$0</div><div class="acb-detail" id="commDetail"></div></div>
        </div>

        {{-- PASO 2: Estructura --}}
        <div class="calc-card fade-in" style="animation-delay:.2s">
            <div class="section-title"><span class="step-num">2</span> Estructura del plan</div>

            <div class="plan-fields active" id="fields-binary">
                <div class="form-group-calc"><label>Niveles de profundidad</label><input type="number" class="calc-input" id="binaryDepth" value="5" min="1" max="20" oninput="generateLevelInputs('binary')"><div class="input-hint">Cada nivel duplica miembros. 5 niveles = 62 miembros.</div></div>
                <div class="form-group-calc"><label>Tipo de par</label><select class="calc-input" id="pairType"><option value="1:1">1:1 (un par = 1 izq + 1 der)</option><option value="2:1">2:1 (dos izq + un der)</option></select></div>
                <div class="form-group-calc"><label>Tope semanal por afiliado (capping) <span class="info-tip" title="Máximo que un afiliado puede ganar por semana. 0 = sin límite.">?</span></label><div class="input-group-calc"><span class="input-addon">$</span><input type="number" class="calc-input" id="binaryCapping" value="0" min="0" step="10"></div><div class="input-hint">Ejemplo: si es $500 y genera $2,000, solo recibe $500. 0 = sin límite.</div></div>
            </div>

            <div class="plan-fields" id="fields-unilevel">
                <div class="form-group-calc"><label>Niveles de profundidad</label><input type="number" class="calc-input" id="unilevelDepth" value="4" min="1" max="15" oninput="generateLevelInputs('unilevel')"></div>
                <div class="form-group-calc"><label>Referidos promedio por miembro</label><input type="number" class="calc-input" id="unilevelWidth" value="3" min="1" max="20"><div class="input-hint">Promedio de personas que recluta cada miembro.</div></div>
            </div>

            <div class="plan-fields" id="fields-matrix">
                <div class="form-group-calc"><label>Ancho de la matriz</label><input type="number" class="calc-input" id="matrixWidth" value="3" min="2" max="10"><div class="input-hint">Máximo de referidos directos por miembro.</div></div>
                <div class="form-group-calc"><label>Profundidad de la matriz</label><input type="number" class="calc-input" id="matrixDepth" value="4" min="1" max="12" oninput="generateLevelInputs('matrix')"></div>
            </div>

            <div style="margin-top:16px">
                <label style="font-size:13px;font-weight:600;color:#4a5568;margin-bottom:8px;display:block">Distribución de comisiones por nivel</label>
                <div class="toggle-group" id="commModeToggle">
                    <button class="toggle-option active" onclick="setCommMode('single')" data-mode="single">Un solo % para todos</button>
                    <button class="toggle-option" onclick="setCommMode('perlevel')" data-mode="perlevel">Diferente % por nivel</button>
                </div>
                <div id="singleCommBox"><div class="form-group-calc" style="margin-top:8px"><div class="input-group-calc"><span class="input-addon">%</span><input type="number" class="calc-input" id="singleCommRate" value="10" min="0" max="100" step="0.5"></div><div class="input-hint">Se aplica el mismo porcentaje en todos los niveles.</div></div></div>
                <div id="perLevelCommBox" style="display:none;margin-top:8px"><div class="input-hint" style="margin-bottom:8px">Define qué % del valor comisionable se paga en cada nivel. La suma debería ser 100%.</div><div id="levelInputsContainer"></div><div style="text-align:right;margin-top:4px"><span style="font-size:12px;font-weight:600" id="levelSumDisplay">Total: 0%</span></div></div>
            </div>
        </div>

        {{-- PASO 3: Retenciones --}}
        <div class="calc-card fade-in" style="animation-delay:.25s">
            <div class="section-title"><span class="step-num">3</span> Retenciones al afiliado</div>
            <div class="section-subtitle">Descuentos al momento de pagar la comisión.</div>
            <div class="form-group-calc"><label>Retención en la fuente <span class="info-tip" title="Porcentaje que se retiene al afiliado al pagarle.">?</span></label><div class="input-group-calc"><span class="input-addon">%</span><input type="number" class="calc-input" id="withholdingTax" value="0" min="0" max="100" step="0.5"></div></div>
        </div>

        {{-- PASO 4: Proyección --}}
        <div class="calc-card fade-in" style="animation-delay:.3s">
            <div class="section-title"><span class="step-num">4</span> Proyección temporal</div>
            <div class="section-subtitle">¿En cuánto tiempo proyectas alcanzar esta red?</div>
            <div class="time-selector">
                <div class="time-btn active" data-months="1" onclick="selectTime(1,this)"><div class="time-num">1</div><div class="time-label">mes</div></div>
                <div class="time-btn" data-months="3" onclick="selectTime(3,this)"><div class="time-num">3</div><div class="time-label">meses</div></div>
                <div class="time-btn" data-months="6" onclick="selectTime(6,this)"><div class="time-num">6</div><div class="time-label">meses</div></div>
                <div class="time-btn" data-months="12" onclick="selectTime(12,this)"><div class="time-num">12</div><div class="time-label">meses</div></div>
                <div class="time-btn" data-months="24" onclick="selectTime(24,this)"><div class="time-num">24</div><div class="time-label">meses</div></div>
            </div>
        </div>

        <button class="btn-calculate fade-in" style="animation-delay:.35s" onclick="calculateMLM()"><i class="fa-solid fa-bolt"></i> Simular y calcular</button>
    </div>

    {{-- COLUMNA DERECHA --}}
    <div class="col-lg-7 mb-3">
        <div class="results-panel" id="resultsPanel">
            <div class="row mb-3">
                <div class="col-6 col-md-3 mb-2"><div class="result-metric"><div class="metric-icon" style="background:#EFF6FF;color:#2563EB"><i class="fa-solid fa-users"></i></div><div class="metric-label">Miembros</div><div class="metric-value" id="r-members">0</div></div></div>
                <div class="col-6 col-md-3 mb-2"><div class="result-metric"><div class="metric-icon" style="background:#E6F1FB;color:#378ADD"><i class="fa-solid fa-receipt"></i></div><div class="metric-label">Ventas brutas</div><div class="metric-value" id="r-revenue">$0</div></div></div>
                <div class="col-6 col-md-3 mb-2"><div class="result-metric"><div class="metric-icon" style="background:#FAECE7;color:#D85A30"><i class="fa-solid fa-money-bill-transfer"></i></div><div class="metric-label">Comisiones</div><div class="metric-value text-expense" id="r-commissions">$0</div></div></div>
                <div class="col-6 col-md-3 mb-2"><div class="result-metric"><div class="metric-icon" style="background:#E1F5EE;color:#1D9E75"><i class="fa-solid fa-piggy-bank"></i></div><div class="metric-label">Ganancia neta</div><div class="metric-value text-profit" id="r-profit">$0</div></div></div>
            </div>
            <div id="profitMessage"></div>
            <div id="timeMessage" style="display:none"></div>

            {{-- Export button --}}
            <div class="text-center mb-3" id="exportSection" style="display:none">
                <button class="btn-export" onclick="exportPDF()"><i class="fa-solid fa-file-pdf"></i> Exportar reporte en PDF</button>
            </div>

            <div class="row mb-3">
                <div class="col-md-7 mb-2"><div class="calc-card" style="margin-bottom:0"><div class="section-title" style="margin-bottom:10px;font-size:14px"><i class="fa-solid fa-chart-bar" style="color:#8a94a6;font-size:13px"></i> Desglose financiero</div><div class="chart-box"><canvas id="financeChart"></canvas></div></div></div>
                <div class="col-md-5 mb-2"><div class="calc-card" style="margin-bottom:0"><div class="section-title" style="margin-bottom:10px;font-size:14px"><i class="fa-solid fa-chart-pie" style="color:#8a94a6;font-size:13px"></i> Distribución</div><div class="chart-box"><canvas id="expenseChart"></canvas></div></div></div>
            </div>
            <div class="calc-card mb-3" id="projectionCard" style="display:none"><div class="section-title" style="margin-bottom:10px;font-size:14px"><i class="fa-solid fa-chart-line" style="color:#8a94a6;font-size:13px"></i> Proyección de crecimiento</div><div class="chart-box"><canvas id="projectionChart"></canvas></div></div>
            <div class="calc-card mb-3"><div class="section-title" style="margin-bottom:10px;font-size:14px"><i class="fa-solid fa-layer-group" style="color:#8a94a6;font-size:13px"></i> Miembros por nivel</div><div class="chart-box" style="height:220px"><canvas id="levelsChart"></canvas></div></div>
            <div class="calc-card"><div class="section-title" style="margin-bottom:10px;font-size:14px"><i class="fa-solid fa-list-check" style="color:#8a94a6;font-size:13px"></i> Reporte detallado</div><div class="table-responsive"><table class="breakdown-table"><thead><tr><th>Concepto</th><th>Valor</th></tr></thead><tbody id="breakdownBody"></tbody></table></div></div>
        </div>

        <div class="calc-card text-center" id="placeholderPanel" style="padding:60px 20px">
            <div style="font-size:48px;margin-bottom:16px;opacity:.2"><i class="fa-solid fa-chart-line"></i></div>
            <h5 style="color:#8a94a6;font-weight:600">Configura tu plan y presiona "Simular"</h5>
            <p style="color:#b0b8c9;font-size:14px;max-width:400px;margin:0 auto">Los resultados aparecerán con gráficas, proyección temporal y análisis de rentabilidad inteligente.</p>
        </div>
    </div>
</div>

@endsection

@push('script')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<script>
// ===================== STATE =====================
var currentPlan='binary',commMode='single',selectedMonths=1,charts={},lastCalcData=null;

// ===================== MODAL =====================
function openHelpModal(){document.getElementById('helpModal').classList.add('show')}
function closeHelpModal(){document.getElementById('helpModal').classList.remove('show')}
function switchTab(tab,btn){
    document.querySelectorAll('.modal-tab').forEach(function(t){t.classList.remove('active')});
    document.querySelectorAll('.modal-tab-content').forEach(function(c){c.classList.remove('active')});
    btn.classList.add('active');
    document.getElementById('tab-'+tab).classList.add('active');
}

// ===================== PLAN SELECT =====================
function selectPlan(p){currentPlan=p;document.querySelectorAll('.plan-btn').forEach(function(b){b.classList.remove('active')});document.querySelector('.plan-btn[data-plan="'+p+'"]').classList.add('active');document.querySelectorAll('.plan-fields').forEach(function(f){f.classList.remove('active')});document.getElementById('fields-'+p).classList.add('active');generateLevelInputs(p)}
function selectTime(m,el){selectedMonths=m;document.querySelectorAll('.time-btn').forEach(function(b){b.classList.remove('active')});el.classList.add('active')}
function setCommMode(m){commMode=m;document.querySelectorAll('#commModeToggle .toggle-option').forEach(function(b){b.classList.remove('active')});document.querySelector('#commModeToggle .toggle-option[data-mode="'+m+'"]').classList.add('active');document.getElementById('singleCommBox').style.display=m==='single'?'block':'none';document.getElementById('perLevelCommBox').style.display=m==='perlevel'?'block':'none';if(m==='perlevel')generateLevelInputs(currentPlan)}

function getDepth(){if(currentPlan==='binary')return parseInt(document.getElementById('binaryDepth').value)||5;if(currentPlan==='unilevel')return parseInt(document.getElementById('unilevelDepth').value)||4;return parseInt(document.getElementById('matrixDepth').value)||4}

function generateLevelInputs(){
    var depth=getDepth(),c=document.getElementById('levelInputsContainer'),d=[];
    if(depth===3)d=[50,30,20];else if(depth===4)d=[40,30,20,10];else if(depth===5)d=[35,25,20,12,8];else{var b=Math.floor(100/depth),r=100-(b*depth);for(var i=0;i<depth;i++)d.push(i===0?b+r:b)}
    var h='';for(var i=0;i<depth;i++){h+='<div class="level-row"><span class="level-label">Nivel '+(i+1)+'</span><div class="input-group-calc" style="flex:1"><span class="input-addon">%</span><input type="number" class="calc-input level-comm-input" value="'+(d[i]||10)+'" min="0" max="100" step="1" oninput="updateLevelSum()"></div></div>'}
    c.innerHTML=h;updateLevelSum();
}
function updateLevelSum(){var inputs=document.querySelectorAll('.level-comm-input'),s=0;inputs.forEach(function(i){s+=parseFloat(i.value)||0});var d=document.getElementById('levelSumDisplay');d.textContent='Total: '+s+'%';d.style.color=s===100?'#1D9E75':(s>100?'#E24B4A':'#D85A30')}

function updateComissionable(){
    var price=parseFloat(document.getElementById('salePrice').value)||0,prodCost=parseFloat(document.getElementById('productionCost').value)||0,taxR=parseFloat(document.getElementById('taxSale').value)||0,gw=parseFloat(document.getElementById('gatewayFee').value)||0,ship=parseFloat(document.getElementById('shippingCost').value)||0,cr=parseFloat(document.getElementById('commissionableRate').value)||0;
    var taxA=price*(taxR/100),gwA=price*(gw/100),gross=price-prodCost-taxA-gwA-ship,cv=gross*(cr/100);
    document.getElementById('grossProfit').textContent='$'+gross.toFixed(2);
    document.getElementById('grossDetail').textContent='$'+price+' - $'+prodCost+' - $'+taxA.toFixed(2)+' (IVA) - $'+gwA.toFixed(2)+' (pasarela) - $'+ship+' (envío)';
    document.getElementById('commissionableValue').textContent='$'+cv.toFixed(2);
    document.getElementById('commDetail').textContent=cr+'% de $'+gross.toFixed(2)+' de utilidad';
}

function fmt(n){return '$'+Math.round(n).toLocaleString('es-CO')}

// ===================== CALCULATE =====================
function calculateMLM(){
    var price=parseFloat(document.getElementById('salePrice').value)||0,prodCost=parseFloat(document.getElementById('productionCost').value)||0,taxSR=parseFloat(document.getElementById('taxSale').value)||0,gwR=parseFloat(document.getElementById('gatewayFee').value)||0,ship=parseFloat(document.getElementById('shippingCost').value)||0,commR=parseFloat(document.getElementById('commissionableRate').value)||0,whR=parseFloat(document.getElementById('withholdingTax').value)||0;
    var taxPU=price*(taxSR/100),gwPU=price*(gwR/100),costsPU=prodCost+taxPU+gwPU+ship,grossPU=price-costsPU,cvPU=grossPU*(commR/100);
    var depth,mpl=[],tm=0;
    if(currentPlan==='binary'){depth=parseInt(document.getElementById('binaryDepth').value)||5;for(var i=1;i<=depth;i++){var m=Math.pow(2,i);mpl.push(m);tm+=m}}
    else if(currentPlan==='unilevel'){depth=parseInt(document.getElementById('unilevelDepth').value)||4;var w=parseInt(document.getElementById('unilevelWidth').value)||3;for(var i=1;i<=depth;i++){var m=Math.pow(w,i);mpl.push(m);tm+=m}}
    else{var mw=parseInt(document.getElementById('matrixWidth').value)||3;depth=parseInt(document.getElementById('matrixDepth').value)||4;for(var i=1;i<=depth;i++){var m=Math.pow(mw,i);mpl.push(m);tm+=m}}

    var tSales=tm*price,tCosts=tm*costsPU,tGross=tm*grossPU,tCVPool=tm*cvPU,tComm=0,cpl=[];
    if(commMode==='single'){
        var sr=parseFloat(document.getElementById('singleCommRate').value)||0;
        if(currentPlan==='binary'){var pt=document.getElementById('pairType').value,pr=pt==='1:1'?1:.67;for(var i=0;i<depth;i++){var pairs=Math.floor(mpl[i]/2*pr),lc=pairs*cvPU*(sr/100);cpl.push(lc);tComm+=lc}}
        else{for(var i=0;i<depth;i++){var lc=mpl[i]*cvPU*(sr/100);cpl.push(lc);tComm+=lc}}
    }else{
        var inputs=document.querySelectorAll('.level-comm-input');
        if(currentPlan==='binary'){var pt=document.getElementById('pairType').value,pr=pt==='1:1'?1:.67;for(var i=0;i<depth;i++){var lr=parseFloat(inputs[i]?inputs[i].value:0)||0,pairs=Math.floor(mpl[i]/2*pr),lc=pairs*cvPU*(lr/100);cpl.push(lc);tComm+=lc}}
        else{for(var i=0;i<depth;i++){var lr=parseFloat(inputs[i]?inputs[i].value:0)||0,lc=mpl[i]*cvPU*(lr/100);cpl.push(lc);tComm+=lc}}
    }
    if(currentPlan==='binary'){var cap=parseFloat(document.getElementById('binaryCapping').value)||0;if(cap>0)tComm=Math.min(tComm,cap*tm)}
    var whT=tComm*(whR/100),netComm=tComm-whT,compRetains=tGross-tComm,margin=tSales>0?(compRetains/tSales)*100:0;

    // Store for PDF
    lastCalcData={userName:document.getElementById('userName').value.trim(),companyName:document.getElementById('companyName').value.trim(),planName:currentPlan==='binary'?'Binario':(currentPlan==='unilevel'?'Uninivel':'Matriz'),totalMembers:tm,totalSales:tSales,totalCosts:tCosts,totalGross:tGross,totalCVPool:tCVPool,totalComm:tComm,whT:whT,netComm:netComm,compRetains:compRetains,margin:margin,mpl:mpl,depth:depth,price:price,prodCost:prodCost,taxSR:taxSR,gwR:gwR,ship:ship,commR:commR,whR:whR,taxPU:taxPU,gwPU:gwPU,grossPU:grossPU,cvPU:cvPU,months:selectedMonths};

    document.getElementById('placeholderPanel').style.display='none';
    document.getElementById('resultsPanel').classList.add('show');
    document.getElementById('exportSection').style.display='block';

    document.getElementById('r-members').textContent=tm.toLocaleString('es-CO');
    document.getElementById('r-revenue').textContent=fmt(tSales);
    document.getElementById('r-commissions').textContent=fmt(tComm);
    document.getElementById('r-profit').textContent=fmt(compRetains);

    var pmDiv=document.getElementById('profitMessage'),mc,ic,mt,mx;
    if(margin>=30){mc='msg-excellent';ic='fa-solid fa-rocket';mt='¡Tu negocio tiene gran potencial!';mx='Margen del '+Math.round(margin)+'%. Excelente estructura de costos y comisiones. Tu plan está optimizado para escalar con solidez financiera.'}
    else if(margin>=20){mc='msg-good';ic='fa-solid fa-circle-check';mt='Buena rentabilidad, buena proyección para construir esa red';mx='Margen del '+Math.round(margin)+'%. Tu plan de compensación está equilibrado. Tienes espacio para crecer sin comprometer la salud financiera.'}
    else if(margin>=10){mc='msg-ok';ic='fa-solid fa-lightbulb';mt='Rentabilidad aceptable, puedes optimizar';mx='Margen del '+Math.round(margin)+'%. Considera ajustar el % comisionable o revisar costos para mayor holgura financiera.'}
    else if(margin>=0){mc='msg-risk';ic='fa-solid fa-triangle-exclamation';mt='Margen ajustado, revisa tu estructura';mx='Margen del '+Math.round(margin)+'%. Te sugerimos hacer ajustes a los porcentajes o validar los costos y volver a simular.'}
    else{mc='msg-bad';ic='fa-solid fa-circle-xmark';mt='Plan no rentable — necesita ajustes';mx='Margen negativo del '+Math.round(margin)+'%. Las comisiones superan la utilidad. Reduce el % comisionable o revisa costos.'}
    pmDiv.innerHTML='<div class="profit-msg '+mc+'"><div class="pm-icon"><i class="'+ic+'"></i></div><div><div class="pm-title">'+mt+'</div><div class="pm-text">'+mx+'</div></div></div>';

    var tmDiv=document.getElementById('timeMessage');
    if(selectedMonths>1){tmDiv.style.display='flex';tmDiv.innerHTML='<i class="fa-solid fa-clock"></i><div><strong>Proyección a '+selectedMonths+' meses.</strong> A mayor tiempo, mayor volumen y mayor apalancamiento.</div>'}else{tmDiv.style.display='none'}

    var projCard=document.getElementById('projectionCard'),mLabels=[],mRev=[],mProf=[];
    if(selectedMonths>1){projCard.style.display='block';for(var m=1;m<=selectedMonths;m++){mLabels.push('Mes '+m);var gf=1-Math.pow(1-m/selectedMonths,2),mm=Math.round(tm*gf),mr=mm*price,mp=mm*grossPU-(mm*cvPU*(tComm/tCVPool||0));mRev.push(mr);mProf.push(mp)}}else{projCard.style.display='none'}

    var pn=lastCalcData.planName;
    var tb=document.getElementById('breakdownBody');
    var rh='<tr class="row-section"><td colspan="2">Datos del producto</td></tr>';
    rh+='<tr><td>Precio de venta</td><td>'+fmt(price)+'</td></tr>';
    rh+='<tr><td>Costo producción</td><td>'+fmt(prodCost)+'</td></tr>';
    rh+='<tr><td>IVA/Impuesto ('+taxSR+'%)</td><td>'+fmt(taxPU)+'</td></tr>';
    rh+='<tr><td>Pasarela de pago ('+gwR+'%)</td><td>'+fmt(gwPU)+'</td></tr>';
    rh+='<tr><td>Logística/envío</td><td>'+fmt(ship)+'</td></tr>';
    rh+='<tr><td><strong>Utilidad bruta por producto</strong></td><td><strong>'+fmt(grossPU)+'</strong></td></tr>';
    rh+='<tr><td>Valor comisionable ('+commR+'%)</td><td style="color:#2563EB;font-weight:700">'+fmt(cvPU)+'</td></tr>';
    rh+='<tr class="row-section"><td colspan="2">Red y comisiones ('+pn+')</td></tr>';
    rh+='<tr><td>Total de miembros</td><td>'+tm.toLocaleString('es-CO')+'</td></tr>';
    rh+='<tr><td>Ventas brutas totales</td><td>'+fmt(tSales)+'</td></tr>';
    rh+='<tr><td>Costos empresa totales</td><td style="color:#D85A30">'+fmt(tCosts)+'</td></tr>';
    rh+='<tr><td>Utilidad bruta total</td><td>'+fmt(tGross)+'</td></tr>';
    rh+='<tr><td>Pool comisionable total</td><td style="color:#2563EB">'+fmt(tCVPool)+'</td></tr>';
    rh+='<tr><td>Comisiones a pagar</td><td style="color:#D85A30">'+fmt(tComm)+'</td></tr>';
    if(whR>0){rh+='<tr><td>&nbsp;&nbsp;Retención al afiliado ('+whR+'%)</td><td>- '+fmt(whT)+'</td></tr>';rh+='<tr><td>&nbsp;&nbsp;Neto pagado al afiliado</td><td>'+fmt(netComm)+'</td></tr>'}
    rh+='<tr class="row-total"><td>Ganancia neta empresa</td><td class="'+(compRetains>=0?'text-profit':'text-expense')+'">'+fmt(compRetains)+'</td></tr>';
    rh+='<tr class="row-total"><td>Margen de rentabilidad</td><td class="'+(margin>=20?'text-profit':'text-expense')+'">'+Math.round(margin)+'%</td></tr>';
    if(selectedMonths>1){rh+='<tr class="row-section"><td colspan="2">Proyección a '+selectedMonths+' meses</td></tr>';rh+='<tr><td>Ventas acumuladas proyectadas</td><td>'+fmt(mRev.reduce(function(a,b){return a+b},0))+'</td></tr>';rh+='<tr><td>Ganancia acumulada proyectada</td><td class="text-profit">'+fmt(mProf.reduce(function(a,b){return a+b},0))+'</td></tr>'}
    tb.innerHTML=rh;

    Object.keys(charts).forEach(function(k){if(charts[k])charts[k].destroy()});

    charts.finance=new Chart(document.getElementById('financeChart').getContext('2d'),{type:'bar',data:{labels:['Ventas','Costos','Utilidad','Comisiones','Ganancia'],datasets:[{data:[tSales,tCosts,tGross,tComm,Math.max(compRetains,0)],backgroundColor:['rgba(37,99,235,.7)','rgba(216,90,48,.5)','rgba(55,138,221,.6)','rgba(226,75,74,.6)',compRetains>=0?'rgba(29,158,117,.7)':'rgba(226,75,74,.7)'],borderRadius:6,barPercentage:.55}]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false}},scales:{y:{beginAtZero:true,grid:{color:'rgba(0,0,0,.04)'},ticks:{font:{size:11},color:'#8a94a6',callback:function(v){return '$'+(v>=1000?Math.round(v/1000)+'k':Math.round(v))}}},x:{grid:{display:false},ticks:{font:{size:10},color:'#8a94a6',maxRotation:45}}}}});

    charts.expense=new Chart(document.getElementById('expenseChart').getContext('2d'),{type:'doughnut',data:{labels:['Producción','IVA','Pasarela','Envío','Comisiones','Ganancia'],datasets:[{data:[tm*prodCost,tm*taxPU,tm*gwPU,tm*ship,tComm,Math.max(compRetains,0)],backgroundColor:['#888780','#E24B4A','#D85A30','#BA7517','#2563EB','#1D9E75'],borderWidth:0,hoverOffset:8}]},options:{responsive:true,maintainAspectRatio:false,cutout:'62%',plugins:{legend:{position:'bottom',labels:{boxWidth:9,boxHeight:9,borderRadius:4,useBorderRadius:true,padding:8,font:{size:10}}}}}});

    charts.levels=new Chart(document.getElementById('levelsChart').getContext('2d'),{type:'bar',data:{labels:mpl.map(function(_,i){return 'N'+(i+1)}),datasets:[{label:'Miembros',data:mpl,backgroundColor:'rgba(37,99,235,.65)',borderRadius:6,barPercentage:.5}]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false}},scales:{y:{beginAtZero:true,grid:{color:'rgba(0,0,0,.04)'},ticks:{font:{size:11},color:'#8a94a6'}},x:{grid:{display:false},ticks:{font:{size:11},color:'#8a94a6'}}}}});

    if(selectedMonths>1){
        charts.projection=new Chart(document.getElementById('projectionChart').getContext('2d'),{type:'line',data:{labels:mLabels,datasets:[{label:'Ventas acum.',data:mRev.map(function(v,i){var s=0;for(var j=0;j<=i;j++)s+=mRev[j];return s}),borderColor:'#2563EB',backgroundColor:'rgba(37,99,235,.08)',fill:true,tension:.3,pointRadius:2},{label:'Ganancia acum.',data:mProf.map(function(v,i){var s=0;for(var j=0;j<=i;j++)s+=mProf[j];return s}),borderColor:'#1D9E75',backgroundColor:'rgba(29,158,117,.08)',fill:true,tension:.3,pointRadius:2}]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{position:'top',align:'end',labels:{boxWidth:10,boxHeight:10,borderRadius:3,useBorderRadius:true,padding:12,font:{size:11}}}},scales:{y:{beginAtZero:true,grid:{color:'rgba(0,0,0,.04)'},ticks:{font:{size:11},color:'#8a94a6',callback:function(v){return '$'+(v>=1e6?Math.round(v/1e6)+'M':v>=1000?Math.round(v/1000)+'k':Math.round(v))}}},x:{grid:{display:false},ticks:{font:{size:10},color:'#8a94a6',maxRotation:45}}}}});
    }

    if(window.innerWidth<992)document.getElementById('resultsPanel').scrollIntoView({behavior:'smooth',block:'start'});
}

// ===================== PDF EXPORT =====================
function exportPDF(){
    if(!lastCalcData)return;
    var d=lastCalcData;
    var jsPDF=window.jspdf.jsPDF;
    var doc=new jsPDF('p','mm','a4');
    var W=210,H=297,M=15,cw=W-M*2;
    var y=M;

    // Colors
    var blue=[37,99,235],green=[29,158,117],orange=[216,90,48],dark=[26,26,46],gray=[138,148,166];

    // Header bar
    doc.setFillColor(15,23,42);
    doc.rect(0,0,W,38,  'F');
    doc.setFontSize(18);doc.setTextColor(255,255,255);
    doc.text('Proyección y Simulación',M,16);
    var title2=d.companyName?('"'+d.companyName+'"'):'de Plan de Compensación MLM';
    doc.setFontSize(12);doc.text(title2,M,24);
    if(d.userName){doc.setFontSize(10);doc.setTextColor(180,190,210);doc.text('Preparado para: '+d.userName,M,32)}
    doc.setFontSize(8);doc.setTextColor(180,190,210);doc.text('Generado con sinergiared.com',W-M,32,{align:'right'});
    y=46;

    // Watermark
    doc.setFontSize(60);doc.setTextColor(230,235,245);
    doc.text('SINERGIA RED',W/2,H/2,{align:'center',angle:45});

    // Plan info
    doc.setFontSize(11);doc.setTextColor.apply(doc,dark);
    doc.text('Plan: '+d.planName+' · '+d.totalMembers.toLocaleString('es-CO')+' miembros · Proyección: '+d.months+(d.months===1?' mes':' meses'),M,y);
    y+=10;

    // Metrics boxes
    var metrics=[
        {label:'Ventas Brutas',value:fmt(d.totalSales),color:blue},
        {label:'Comisiones',value:fmt(d.totalComm),color:orange},
        {label:'Ganancia Neta',value:fmt(d.compRetains),color:green},
        {label:'Margen',value:Math.round(d.margin)+'%',color:d.margin>=20?green:orange}
    ];
    var bw=(cw-9)/4;
    metrics.forEach(function(m,i){
        var bx=M+i*(bw+3);
        doc.setFillColor(m.color[0],m.color[1],m.color[2]);doc.roundedRect(bx,y,bw,22,3,3,'F');
        doc.setFontSize(8);doc.setTextColor(255,255,255);doc.text(m.label,bx+bw/2,y+8,{align:'center'});
        doc.setFontSize(13);doc.text(m.value,bx+bw/2,y+17,{align:'center'});
    });
    y+=30;

    // Breakdown table
    doc.setFontSize(12);doc.setTextColor.apply(doc,dark);doc.text('Desglose financiero',M,y);y+=6;

    var rows=[
        ['Precio de venta',fmt(d.price)],
        ['Costo producción',fmt(d.prodCost)],
        ['IVA ('+d.taxSR+'%)',fmt(d.taxPU)],
        ['Pasarela ('+d.gwR+'%)',fmt(d.gwPU)],
        ['Logística/envío',fmt(d.ship)],
        ['Utilidad bruta unitaria',fmt(d.grossPU)],
        ['Valor comisionable ('+d.commR+'%)',fmt(d.cvPU)],
        ['',''],
        ['Total miembros',d.totalMembers.toLocaleString('es-CO')],
        ['Ventas brutas totales',fmt(d.totalSales)],
        ['Costos empresa totales',fmt(d.totalCosts)],
        ['Utilidad bruta total',fmt(d.totalGross)],
        ['Pool comisionable total',fmt(d.totalCVPool)],
        ['Comisiones a pagar',fmt(d.totalComm)],
        ['Ganancia neta empresa',fmt(d.compRetains)],
        ['Margen de rentabilidad',Math.round(d.margin)+'%']
    ];

    doc.setFontSize(9);
    rows.forEach(function(r){
        if(r[0]===''){y+=2;return}
        var isTotal=r[0]==='Ganancia neta empresa'||r[0]==='Margen de rentabilidad';
        if(isTotal){doc.setFillColor(240,247,255);doc.rect(M,y-1,cw,7,'F');doc.setTextColor.apply(doc,blue);doc.setFont(undefined,'bold')}
        else{doc.setTextColor.apply(doc,dark);doc.setFont(undefined,'normal')}
        doc.text(r[0],M+2,y+4);doc.text(r[1],W-M-2,y+4,{align:'right'});
        y+=7;
        if(y>H-40){doc.addPage();y=M}
    });

    // Profitability message
    y+=6;
    if(d.margin>=30){doc.setTextColor.apply(doc,green);doc.text('✓ ¡Tu negocio tiene gran potencial! Margen: '+Math.round(d.margin)+'%',M,y)}
    else if(d.margin>=20){doc.setTextColor.apply(doc,blue);doc.text('✓ Buena rentabilidad, buena proyección para construir esa red. Margen: '+Math.round(d.margin)+'%',M,y)}
    else if(d.margin>=0){doc.setTextColor.apply(doc,orange);doc.text('⚠ Margen del '+Math.round(d.margin)+'% — Revisar estructura y costos',M,y)}
    else{doc.setTextColor(226,75,74);doc.text('✗ Plan no rentable — Necesita ajustes. Margen: '+Math.round(d.margin)+'%',M,y)}

    // Footer
    var fy=H-18;
    doc.setDrawColor(220,225,235);doc.line(M,fy,W-M,fy);
    doc.setFontSize(8);doc.setTextColor.apply(doc,gray);
    doc.text('sinergiared.com · consultas@sinergiared.com · WhatsApp: +573213912535 · IG: @sinergiaredint',W/2,fy+6,{align:'center'});
    doc.text('Este documento es una simulación ilustrativa. Los resultados reales dependen de múltiples factores.',W/2,fy+11,{align:'center'});

    // Save
    var filename='Simulacion-MLM';
    if(d.companyName)filename+='-'+d.companyName.replace(/[^a-zA-Z0-9]/g,'-');
    doc.save(filename+'.pdf');
}

// ===================== INIT =====================
updateComissionable();
generateLevelInputs('binary');
</script>
@endpush