{% extends "network/base.html" %}
{% block title %}Budget Forecast — Network Design Canvas{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">Budget Forecast</h1>
    <p class="page-subtitle">Enterprise-wide tech refresh budget projection from all project refresh plans</p>
  </div>
  <div class="page-actions">
    <a href="/network/enterprise" class="btn btn-secondary">Enterprise Summary</a>
  </div>
</div>
<div id="budget-content"></div>
{% endblock %}
{% block scripts %}
<script>
async function load() {
  const d = await fetch(NC_BASE + '/api/budget-forecast').then(r => r.json());
  const el = document.getElementById('budget-content');
  let html = '<div class="stats-bar"><div class="stat-card"><div class="stat-value">$' + (d.grand_total || 0).toLocaleString() + '</div><div class="stat-label">Total Refresh Budget</div></div>';
  (d.forecast || []).forEach(f => {
    html += '<div class="stat-card"><div class="stat-value">$' + (f.total_cost || 0).toLocaleString() + '</div><div class="stat-label">FY ' + f.target_year + ' (' + f.item_count + ' items)</div></div>';
  });
  html += '</div>';
  if (d.forecast && d.forecast.length) {
    html += '<section class="panel panel-wide" style="margin-top:16px;"><div class="panel-header"><h2 class="panel-title">Year-by-Year Breakdown</h2></div><table class="data-table"><thead><tr><th>Fiscal Year</th><th>Items</th><th>Total Cost</th><th>% of Total</th></tr></thead><tbody>';
    d.forecast.forEach(f => {
      const pct = d.grand_total ? ((f.total_cost / d.grand_total) * 100).toFixed(1) : 0;
      html += '<tr><td><strong>FY ' + f.target_year + '</strong></td><td>' + f.item_count + '</td><td>$' + (f.total_cost || 0).toLocaleString() + '</td><td>' + pct + '%</td></tr>';
    });
    html += '</tbody></table></section>';
  } else {
    html += '<section class="panel panel-wide" style="margin-top:16px;"><div style="padding:16px;color:var(--text-dim);">No refresh plans created yet. Add refresh items to projects to see budget forecasts.</div></section>';
  }
  el.innerHTML = html;
}
load();
</script>
{% endblock %}