{% extends 'base.html' %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
  <div>
    <h2 class="fw-bold mb-1">Dashboard Eksekutif</h2>
    <div class="text-secondary">Ringkasan mutu, akreditasi, dokumen, dan keuangan institusi.</div>
  </div>
</div>

<div class="row g-3 mb-4">
  <div class="col-md-6 col-xl-3">
    <div class="metric-card card h-100">
      <div class="card-body">
        <div class="metric-label">Kesiapan Akreditasi</div>
        <div class="metric-value">{{ stats.avg_accreditation }}%</div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-xl-3">
    <div class="metric-card card h-100">
      <div class="card-body">
        <div class="metric-label">Total Pemasukan</div>
        <div class="metric-value">Rp {{ '{:,.0f}'.format(stats.income).replace(',', '.') }}</div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-xl-3">
    <div class="metric-card card h-100">
      <div class="card-body">
        <div class="metric-label">Total Pengeluaran</div>
        <div class="metric-value">Rp {{ '{:,.0f}'.format(stats.expense).replace(',', '.') }}</div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-xl-3">
    <div class="metric-card card h-100">
      <div class="card-body">
        <div class="metric-label">Temuan Terbuka</div>
        <div class="metric-value">{{ stats.open_findings }}</div>
      </div>
    </div>
  </div>
</div>

<div class="row g-4 mb-4">
  <div class="col-xl-8">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-header bg-white border-0 pt-4 pb-0">
        <h5 class="fw-bold">Tren Pemasukan vs Pengeluaran</h5>
      </div>
      <div class="card-body">
        <canvas id="monthlyChart" height="120"></canvas>
      </div>
    </div>
  </div>
  <div class="col-xl-4">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-header bg-white border-0 pt-4 pb-0">
        <h5 class="fw-bold">Komposisi Sumber Dana</h5>
      </div>
      <div class="card-body">
        <canvas id="sourceChart" height="220"></canvas>
      </div>
    </div>
  </div>
</div>

<div class="row g-4 mb-4">
  <div class="col-xl-6">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-header bg-white border-0 pt-4 pb-0">
        <h5 class="fw-bold">Target vs Aktual Standar Mutu</h5>
      </div>
      <div class="card-body">
        <canvas id="qualityChart" height="180"></canvas>
      </div>
    </div>
  </div>
  <div class="col-xl-6">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-header bg-white border-0 pt-4 pb-0">
        <h5 class="fw-bold">Aktivitas Terbaru</h5>
      </div>
      <div class="card-body">
        <h6 class="fw-semibold">Dokumen terbaru</h6>
        <ul class="list-group list-group-flush mb-3">
          {% for doc in recent_docs %}
          <li class="list-group-item px-0 d-flex justify-content-between"><span>{{ doc.title }}</span><span class="badge text-bg-light">{{ doc.status }}</span></li>
          {% else %}
          <li class="list-group-item px-0">Belum ada dokumen.</li>
          {% endfor %}
        </ul>
        <h6 class="fw-semibold">Temuan terbaru</h6>
        <ul class="list-group list-group-flush">
          {% for item in recent_findings %}
          <li class="list-group-item px-0 d-flex justify-content-between"><span>{{ item.title }}</span><span class="badge text-bg-warning">{{ item.status }}</span></li>
          {% else %}
          <li class="list-group-item px-0">Belum ada temuan.</li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const monthlyLabels = {{ monthly.keys()|list|tojson }};
const monthlyIncome = {{ monthly.values()|map(attribute='income')|list|tojson }};
const monthlyExpense = {{ monthly.values()|map(attribute='expense')|list|tojson }};
const sourceLabels = {{ finance_by_source.keys()|list|tojson }};
const sourceData = {{ finance_by_source.values()|list|tojson }};
const qualityLabels = {{ quality_gap|map(attribute='code')|list|tojson }};
const qualityTarget = {{ quality_gap|map(attribute='target')|list|tojson }};
const qualityActual = {{ quality_gap|map(attribute='actual')|list|tojson }};

new Chart(document.getElementById('monthlyChart'), {
  type: 'line',
  data: { labels: monthlyLabels, datasets: [
    { label: 'Pemasukan', data: monthlyIncome, tension: 0.35 },
    { label: 'Pengeluaran', data: monthlyExpense, tension: 0.35 }
  ]},
  options: { responsive: true, plugins: { legend: { position: 'bottom' } } }
});

new Chart(document.getElementById('sourceChart'), {
  type: 'doughnut',
  data: { labels: sourceLabels, datasets: [{ data: sourceData }]},
  options: { responsive: true, plugins: { legend: { position: 'bottom' } } }
});

new Chart(document.getElementById('qualityChart'), {
  type: 'bar',
  data: { labels: qualityLabels, datasets: [
    { label: 'Target', data: qualityTarget },
    { label: 'Aktual', data: qualityActual }
  ]},
  options: { responsive: true, plugins: { legend: { position: 'bottom' } } }
});
</script>
{% endblock %}