<?php


/*
Plugin Name: SIP & Lumpsum Calculator PRO (Final Tabs + Graph Tabs)
Description: SIP, Lumpsum & Combo Calculator with Line & Donut inside Tabs
Version: 2.1
*/

if (!defined('ABSPATH')) exit;

add_shortcode('sip_lumpsum_calculator_pro', function () {
ob_start(); ?>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<style>
.sippro-wrap{
    max-width:440px;margin:30px auto;padding:22px;border-radius:22px;
    background:linear-gradient(180deg,#0f2d36,#143a44);
    color:#fff;font-family:system-ui;box-shadow:0 20px 45px rgba(0,0,0,.35)
}
.main-tabs,.graph-tabs{
    display:flex;background:#1b3f48;padding:6px;border-radius:16px;margin-bottom:14px
}
.main-tabs button,.graph-tabs button{
    flex:1;padding:10px;font-weight:700;border:none;border-radius:12px;
    background:transparent;color:#cfdfe4;cursor:pointer
}
.main-tabs button.active,.graph-tabs button.active{
    background:linear-gradient(135deg,#ff9800,#ff5722);color:#fff
}
label{font-size:13px;font-weight:600;color:#cfe6ec;margin:6px 0;display:block}
input{
    width:100%;padding:13px;border-radius:14px;border:none;
    font-size:15px;font-weight:600;margin-bottom:10px
}
.result{
    background:#163e47;padding:14px;border-radius:14px;margin:10px 0
}
.result strong{font-size:20px;display:block}
.tab{display:none}
.tab.active{display:block}
.graph-wrap{display:none}
.graph-wrap.active{display:block}
.chart-box{background:#fff;padding:10px;border-radius:16px;margin-top:10px}
.donut-box{position:relative}
.donut-center{
    position:absolute;top:50%;left:0;width:100%;
    transform:translateY(-50%);
    text-align:center;font-weight:800;font-size:16px;color:#111
}
canvas{max-width:100%}
</style>

<div class="sippro-wrap">

<!-- MAIN TABS -->
<div class="main-tabs">
    <button class="active" onclick="switchMain(event,'sip')">SIP</button>
    <button onclick="switchMain(event,'lump')">Lumpsum</button>
    <button onclick="switchMain(event,'combo')">SIP + Lumpsum</button>
</div>

<!-- ================= SIP ================= -->
<div id="sip" class="tab active">

<label>Monthly SIP (₹)</label><input id="sip_amt" value="5000">
<label>Return (%)</label><input id="sip_rate" value="12">
<label>Years</label><input id="sip_years" value="20">
<label>Annual Step-Up (%) (Optional)</label><input id="sip_step">

<div class="result"><strong id="sip_val">₹0</strong></div>

<div class="graph-tabs">
    <button class="active" onclick="switchGraph(event,'sipLineWrap')">Growth</button>
    <button onclick="switchGraph(event,'sipDonutWrap')">Distribution</button>
</div>

<div id="sipLineWrap" class="graph-wrap active chart-box">
    <canvas id="sipLine" height="260"></canvas>
</div>

<div id="sipDonutWrap" class="graph-wrap chart-box donut-box">
    <canvas id="sipDonut"></canvas>
    <div class="donut-center" id="sipDonutCenter"></div>
</div>

</div>

<!-- ================= LUMPSUM ================= -->
<div id="lump" class="tab">

<label>Lumpsum Amount (₹)</label><input id="lump_amt" value="100000">
<label>Return (%)</label><input id="lump_rate" value="12">
<label>Years</label><input id="lump_years" value="20">

<div class="result"><strong id="lump_val">₹0</strong></div>

<div class="graph-tabs">
    <button class="active" onclick="switchGraph(event,'lumpLineWrap')">Growth</button>
    <button onclick="switchGraph(event,'lumpDonutWrap')">Distribution</button>
</div>

<div id="lumpLineWrap" class="graph-wrap active chart-box">
    <canvas id="lumpLine" height="260"></canvas>
</div>

<div id="lumpDonutWrap" class="graph-wrap chart-box donut-box">
    <canvas id="lumpDonut"></canvas>
    <div class="donut-center" id="lumpDonutCenter"></div>
</div>

</div>

<!-- ================= COMBO ================= -->
<div id="combo" class="tab">

<label>SIP / Month (₹)</label><input id="c_sip" value="5000">
<label>Lumpsum (₹)</label><input id="c_lump" value="100000">
<label>Return (%)</label><input id="c_rate" value="12">
<label>Years</label><input id="c_years" value="20">

<div class="result"><strong id="combo_val">₹0</strong></div>

<div class="graph-tabs">
    <button class="active" onclick="switchGraph(event,'comboLineWrap')">Growth</button>
    <button onclick="switchGraph(event,'comboDonutWrap')">Distribution</button>
</div>

<div id="comboLineWrap" class="graph-wrap active chart-box">
  <canvas id="comboLine" height="260"></canvas>
</div>

<div id="comboDonutWrap" class="graph-wrap chart-box donut-box">
    <canvas id="comboDonut"></canvas>
    <div class="donut-center" id="comboDonutCenter"></div>
</div>

</div>

</div>

<script>
let charts={};

const rupee=v=>"₹"+Math.round(v).toLocaleString('en-IN');

function switchMain(e,id){
    document.querySelectorAll('.main-tabs button').forEach(b=>b.classList.remove('active'));
    e.target.classList.add('active');
    document.querySelectorAll('.tab').forEach(t=>t.classList.remove('active'));
    document.getElementById(id).classList.add('active');
    setTimeout(calculate,50);
}

function switchGraph(e,id){
    const tab=e.target.closest('.tab');
    tab.querySelectorAll('.graph-tabs button').forEach(b=>b.classList.remove('active'));
    tab.querySelectorAll('.graph-wrap').forEach(w=>w.classList.remove('active'));
    e.target.classList.add('active');
    tab.querySelector('#'+id).classList.add('active');
    setTimeout(()=>{Object.values(charts).forEach(c=>c&&c.resize())},50);
}

function sipCalc(m,r,y,step){
    let inv=0,val=0,arr=[];
    r=r/100/12; step=step||0;
    for(let yr=1;yr<=y;yr++){
        for(let i=0;i<12;i++){ val=(val+m)*(1+r); inv+=m; }
        arr.push(val); m+=m*(step/100);
    }
    return {inv,val,arr};
}

function lumpArr(p,r,y){
    let a=[];
    for(let i=1;i<=y;i++) a.push(p*Math.pow(1+r/100,i));
    return a;
}

function drawLine(id,data){
    if(charts[id]) charts[id].destroy();
    charts[id]=new Chart(document.getElementById(id),{
        type:'line',
        data:{labels:data.map((_,i)=>"Year "+(i+1)),datasets:[{data:data,fill:true}]},
        options:{plugins:{legend:{display:false}}}
    });
}

function drawDonut(id,inv,ret,centerId){
    if(charts[id]) charts[id].destroy();
    charts[id]=new Chart(document.getElementById(id),{
        type:'doughnut',
        data:{labels:['Invested','Returns'],
        datasets:[{data:[inv,ret],backgroundColor:['#4dd0e1','#ff9800'],borderWidth:0}]},
        options:{cutout:'70%',plugins:{legend:{display:false}}}
    });
    document.getElementById(centerId).innerText=rupee(inv+ret);
}

function calculate(){

    let step=sip_step.value===''?0:+sip_step.value;

    // SIP
    let s=sipCalc(+sip_amt.value,+sip_rate.value,+sip_years.value,step);
    sip_val.innerText=rupee(s.val);
    drawLine('sipLine',s.arr);
    drawDonut('sipDonut',s.inv,s.val-s.inv,'sipDonutCenter');

    // LUMPSUM
    let la=lumpArr(+lump_amt.value,+lump_rate.value,+lump_years.value);
    let lv=la.at(-1);
    lump_val.innerText=rupee(lv);
    drawLine('lumpLine',la);
    drawDonut('lumpDonut',+lump_amt.value,lv-+lump_amt.value,'lumpDonutCenter');

    // COMBO
    let cs=sipCalc(+c_sip.value,+c_rate.value,+c_years.value,0);
    let cl=lumpArr(+c_lump.value,+c_rate.value,+c_years.value);
    let ca=cs.arr.map((v,i)=>v+(cl[i]||0));
    let cv=ca.at(-1);
    combo_val.innerText=rupee(cv);
    drawLine('comboLine',ca);
    drawDonut('comboDonut',cs.inv+ +c_lump.value,cv-(cs.inv+ +c_lump.value),'comboDonutCenter');
}

document.querySelectorAll('.sippro-wrap input').forEach(i=>i.addEventListener('input',calculate));
calculate();
</script>

<?php
return ob_get_clean();
});