{% extends "comp/base.html" %}
{% load comp_extras %}
{% block title %}Dashboard{% endblock %}
{% block content %}
<div class="head"><div><h1>{{ rep.name }}</h1><p class="muted">{{ rep.get_role_display }} · {{ rep.team }} · {{ rep.territory }}{% if plan %} · {{ plan }}{% endif %}</p></div>
<form method="get" class="inline">
{% if reps %}<select name="rep" onchange="this.form.submit()">{% for r in reps %}<option value="{{ r.code }}" {% if r.id == rep.id %}selected{% endif %}>{{ r.name }}</option>{% endfor %}</select>{% endif %}
<select name="period" onchange="this.form.submit()">{% for p in periods %}<option value="{{ p.id }}" {% if p.id == period.id %}selected{% endif %}>{{ p.label }} ({{ p.status }})</option>{% endfor %}</select>
</form></div>
{% if not period %}<p class="card">No periods yet. Run <code>python manage.py seed_demo</code>.</p>{% else %}
<div class="grid">
<section class="card center">
<h2>Attainment YTD</h2>
<svg viewBox="0 0 200 120" class="gauge" role="img" aria-label="Attainment {{ att_pct|floatformat:1 }} percent">
<path d="M10,100 A90,90 0 0 1 190,100" fill="none" stroke="var(--line)" stroke-width="16" stroke-linecap="round"/>
<path d="M10,100 A90,90 0 0 1 190,100" fill="none" stroke="{% if res.attainment >= 1 %}var(--good){% else %}var(--accent){% endif %}" stroke-width="16" stroke-linecap="round" stroke-dasharray="{{ gauge|floatformat:2 }} 400"/>
<text x="100" y="88" text-anchor="middle" font-size="26" font-weight="700">{{ att_pct|floatformat:1 }}%</text>
<text x="100" y="108" text-anchor="middle" font-size="10" fill="var(--muted)">of {{ res.quota|money }} quota</text>
</svg>
<p class="muted">Credit YTD <b>{{ res.credit_ytd|money }}</b>{% if to_next is not None %}<br>{{ to_next|money }} to the next tier{% endif %}</p>
</section>
<section class="card">
<h2>Tier ladder</h2>
{% if tiers %}
<table class="ladder"><thead><tr><th>From</th><th>Multiplier</th><th></th></tr></thead>
{% for t in tiers %}<tr class="{% if t.current %}current{% endif %}"><td>{{ t.threshold|pct }}</td><td>x{{ t.mult|floatformat:"-2" }}</td><td>{% if t.current %}you are here{% elif t.next is None and False %}{% endif %}</td></tr>{% endfor %}
</table>
<p class="muted">{{ plan.get_tier_mode_display }} tiers: {% if plan.tier_mode == "marginal" %}each tier's multiplier applies only to credit inside that band.{% else %}the reached tier's multiplier applies to all credit YTD.{% endif %}</p>
{% else %}<p class="muted">This plan has no attainment tiers.</p>{% endif %}
</section>
<section class="card">
<h2>Earnings, {{ period.label }}</h2>
<div class="big">{{ res.earnings|money }}</div>
<table class="kv">
<tr><td>Draw advanced</td><td>{{ res.draw_paid|money }}</td></tr>
<tr><td>Unrecovered balance carried in</td><td>{{ res.balance_in|money }}</td></tr>
<tr><td>Unrecovered balance carried out</td><td>{{ res.balance_out|money }}</td></tr>
<tr><td><b>Net pay</b></td><td><b>{{ res.net_pay|money }}</b></td></tr></table>
{% if stored %}<p><a href="{% url 'statement' stored.pk %}">Open full statement with calculation traces</a></p>{% else %}<p class="muted">Live preview: period not calculated yet.</p>{% endif %}
</section>
<section class="card" id="whatif" data-rep="{{ rep.code }}" data-period="{{ period.id }}">
<h2>What-if simulator</h2>
<p class="muted">If I close this much more ACV in {{ period.label }}:</p>
<input type="range" id="wi-amount" min="0" max="{{ whatif_max }}" step="5000" value="0" aria-label="Additional ACV">
<div class="row"><b id="wi-amount-label">$0</b>
<select id="wi-family"><option>Platform</option><option>Analytics</option><option>Services</option></select></div>
<table class="kv"><tr><td>Projected earnings</td><td id="wi-earn">{{ res.earnings|money }}</td></tr>
<tr><td>Change</td><td id="wi-delta">$0.00</td></tr>
<tr><td>Projected attainment</td><td id="wi-att">{{ att_pct|floatformat:1 }}%</td></tr></table>
</section>
</div>
{% if lines %}<section class="card"><h2>Recent lines</h2>
<table><thead><tr><th>Date</th><th>Line</th><th class="num">Amount</th></tr></thead>
{% for l in lines %}<tr><td>{{ l.event_date }}</td><td>{{ l.description }}</td><td class="num {% if l.amount < 0 %}neg{% endif %}">{{ l.amount|money }}</td></tr>{% endfor %}</table></section>{% endif %}
<section class="card"><h2>Statement history</h2>
<table><thead><tr><th>Period</th><th class="num">Earnings</th><th class="num">Net pay</th><th></th></tr></thead>
{% for s in recent %}<tr><td>{{ s.period.label }}</td><td class="num">{{ s.earnings|money }}</td><td class="num">{{ s.net_pay|money }}</td><td><a href="{% url 'statement' s.pk %}">View</a></td></tr>{% endfor %}</table></section>
<script>
const box=document.getElementById('whatif'),amt=document.getElementById('wi-amount'),fam=document.getElementById('wi-family');
const usd=n=>Number(n).toLocaleString('en-US',{style:'currency',currency:'USD'});
let timer;
async function update(){
  document.getElementById('wi-amount-label').textContent=usd(amt.value);
  const q=new URLSearchParams({rep:box.dataset.rep,period:box.dataset.period,amount:amt.value,family:fam.value});
  const r=await (await fetch('{% url "api_whatif" %}?'+q)).json();
  document.getElementById('wi-earn').textContent=usd(r.projected_earnings);
  document.getElementById('wi-delta').textContent=(r.delta>=0?'+':'')+usd(r.delta);
  document.getElementById('wi-att').textContent=(r.projected_attainment*100).toFixed(1)+'%';
}
const sched=()=>{clearTimeout(timer);timer=setTimeout(update,120)};
amt.addEventListener('input',sched);fam.addEventListener('change',sched);
</script>
{% endif %}
{% endblock %}