{% extends 'dashboard_base.html' %}
{% set title = 'HR' %}
{% set heading = 'HR Operations Dashboard' %}

{% block dashboard_body %}
<div class="row g-3">
  <div class="col-12 col-md-3">
    <div class="card kpi-card shadow-sm p-3">
      <div class="kpi-label">Pending Leave Approvals</div>
      <div id="kpi-pending-leaves" class="kpi-value">–</div>
    </div>
  </div>
  <div class="col-12 col-md-3">
    <div class="card kpi-card shadow-sm p-3">
      <div class="kpi-label">Avg Hours ({{ month or '—' }})</div>
      <div id="kpi-avg-hours" class="kpi-value">–</div>
    </div>
  </div>
</div>

<div class="row g-3 mt-1">
  <div class="col-12 col-lg-6">
    <div class="card shadow-sm p-3">
      <div class="d-flex justify-content-between align-items-center">
        <h6 class="mb-0">Attendance Distribution ({{ month or '—' }})</h6>
      </div>
      <canvas id="chart-att-dist" height="140"></canvas>
    </div>
  </div>

  <div class="col-12 col-lg-6">
    <div class="card shadow-sm p-3">
      <div class="d-flex justify-content-between align-items-center">
        <h6 class="mb-0">Department Leave Heatmap ({{ month or '—' }})</h6>
      </div>

      <div class="table-responsive">
        <table class="table table-sm align-middle">
          <thead>
            <tr>
              <th class="text-nowrap">Department</th>
              <th id="heatmap-days" colspan="0"></th>
            </tr>
          </thead>
          <tbody id="heatmap-body"></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<script>
(async function(){
  // --- KPIs ---
  const k = await fetch('/dashboard/api/hr/kpis' + window.location.search).then(r=>r.json());
  document.getElementById('kpi-pending-leaves').textContent = k.pending_leaves;
  document.getElementById('kpi-avg-hours').textContent = (k.avg_hours || 0).toFixed(1);

  // --- Attendance distribution chart ---
  const dist = k.attendance_dist || {};
  const labels = Object.keys(dist);
  const values = labels.map(l => dist[l]);

  new Chart(document.getElementById('chart-att-dist'), {
    type: 'doughnut',
    data: { labels, datasets: [{ data: values }] },
    options: { responsive: true }
  });

  // --- Department Leave Heatmap (table-based) ---
  const hm = await fetch('/dashboard/api/hr/department_leave_heatmap' + window.location.search).then(r=>r.json());

  // Header days
  const header = document.getElementById('heatmap-days');
  header.setAttribute('colspan', hm.days || 0);
  header.innerHTML = Array.from({ length: hm.days || 0 }, (_, i) => `<span class="px-1">${i + 1}</span>`).join('');

  // Body rows
  const tbody = document.getElementById('heatmap-body');
  tbody.innerHTML = (hm.labels || []).map((label, rowIdx) => {
    const cells = (hm.matrix?.[rowIdx] || []).map(v => {
      const alpha = Math.min(1, v / 4); // tweak intensity
      const bg = `rgba(255, 122, 0, ${alpha})`; // brand orange with alpha
      return `<td style="background:${bg};text-align:center;">${v || ''}</td>`;
    }).join('');
    return `<tr><th class="text-nowrap">${label}</th>${cells}</tr>`;
  }).join('');
})();
</script>
{% endblock %}