{% extends "base.html" %}
{% block content %}
<h1>KPI Dashboard</h1>
<p><strong>Mingguan:</strong> {{ w_range }} &nbsp;|&nbsp; <strong>Bulanan:</strong> {{ m_range }}</p>

<div class="grid2">
  <div class="card">
    <h3>Weekly IN/OUT per Item</h3>
    <canvas id="w_item"></canvas>
  </div>
  <div class="card">
    <h3>Weekly OUT per User</h3>
    <canvas id="w_user"></canvas>
  </div>
  <div class="card">
    <h3>Monthly IN/OUT per Item</h3>
    <canvas id="m_item"></canvas>
  </div>
  <div class="card">
    <h3>Monthly OUT per Area</h3>
    <canvas id="m_area"></canvas>
  </div>
</div>

<script>
  const W_ITEM_LABELS = {{ w_item.keys()|list|tojson }};
  const W_ITEM_IN = {{ w_item.values()|map(attribute='IN')|list|tojson }};
  const W_ITEM_OUT = {{ w_item.values()|map(attribute='OUT')|list|tojson }};
  const W_USER_LABELS = {{ w_user.keys()|list|tojson }};
  const W_USER_OUT = {{ w_user.values()|map(attribute='OUT')|list|tojson }};
  const M_ITEM_LABELS = {{ m_item.keys()|list|tojson }};
  const M_ITEM_IN = {{ m_item.values()|map(attribute='IN')|list|tojson }};
  const M_ITEM_OUT = {{ m_item.values()|map(attribute='OUT')|list|tojson }};
  const M_AREA_LABELS = {{ m_area.keys()|list|tojson }};
  const M_AREA_OUT = {{ m_area.values()|map(attribute='OUT')|list|tojson }};

  function mkBar(id, labels, data1, label1, data2=null, label2="") {
    const ctx = document.getElementById(id).getContext('2d');
    const datasets = [{label: label1, data: data1}];
    if (data2) datasets.push({label: label2, data: data2});
    new Chart(ctx, {type:'bar', data:{labels: labels, datasets: datasets}, options:{responsive:true, plugins:{legend:{position:'bottom'}}}});
  }
  mkBar('w_item', W_ITEM_LABELS, W_ITEM_IN, 'IN', W_ITEM_OUT, 'OUT');
  mkBar('w_user', W_USER_LABELS, W_USER_OUT, 'OUT');
  mkBar('m_item', M_ITEM_LABELS, M_ITEM_IN, 'IN', M_ITEM_OUT, 'OUT');
  mkBar('m_area', M_AREA_LABELS, M_AREA_OUT, 'OUT');
</script>
{% endblock %}