{% extends "layouts/default.html" %}

{% block title %}KPI Dashboard{% endblock %}

{% block stylesheets %}
  <link rel="stylesheet" href="/static/assets/css/kpi_dashboard.css">
{% endblock %}

{% block content %}
<div class="panel-header bg-primary-gradient mt--4">
  <div class="page-inner py-4">
    <h2 class="text-white fw-bold">KPI Dashboard</h2>
  </div>
</div>

<div class="page-inner mt--5">
  <!-- Table card -->
  <div class="card">
    <!-- Tabs + filters inside card header -->
    <div class="card-header pb-0 pt-3">
      <ul class="nav nav-tabs card-header-tabs" id="kpi-tabs">
        <li class="nav-item">
          <a class="nav-link active" id="tab-alerts" href="#" onclick="switchTab('alerts'); return false;">Alerts</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="tab-cases" href="#" onclick="switchTab('cases'); return false;">Cases</a>
        </li>
      </ul>
      <div class="d-flex gap-2 mt-2 mb-2">
        <input id="filter-owner" class="form-control form-control-sm" style="width:180px"
               placeholder="Enter Assignee..." oninput="debouncedLoad()">
        <input id="filter-title" class="form-control form-control-sm" style="width:240px"
               placeholder="Enter name..." oninput="debouncedLoad()">
      </div>
    </div>
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-hover table-sm mb-0" id="alerts-table">
          <thead class="table-light">
            <tr>
              <th><input type="checkbox" id="chk-all" onchange="toggleAll(this)"></th>
              <th></th>
              <th>Assignee</th>
              <th class="sortable" data-col="alert_id" onclick="sortBy('alert_id')">No. <span class="sort-icon">↕</span></th>
              <th class="sortable" data-col="alert_title" onclick="sortBy('alert_title')">Name <span class="sort-icon">↕</span></th>
              <th class="sortable" data-col="alert_classification_id" onclick="sortBy('alert_classification_id')">Category <span class="sort-icon">↕</span></th>
              <th>Product</th>
              <th class="sortable" data-col="alert_creation_time" onclick="sortBy('alert_creation_time')">Created at <span class="sort-icon">↕</span></th>
              <th class="sortable" data-col="kpi" onclick="sortBy('kpi')">KPI Timeout <span class="sort-icon">↕</span></th>
              <th class="sortable" data-col="alert_source_event_time" onclick="sortBy('alert_source_event_time')">Notified at <span class="sort-icon">↕</span></th>
              <th>Closed at</th>
              <th>Region</th>
            </tr>
          </thead>
          <tbody id="alerts-body">
            <tr><td colspan="12" class="text-center text-muted py-4">Loading...</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- Pagination (outside card) -->
  <div class="d-flex justify-content-between align-items-center mt-2">
    <button class="btn btn-sm btn-outline-secondary" onclick="prevPage()">&#8249; Prev</button>
    <span id="page-info" class="text-muted small"></span>
    <button class="btn btn-sm btn-outline-secondary" onclick="nextPage()">Next &#8250;</button>
  </div>
</div>
{% endblock %}

{% block javascripts %}
  <script src="/static/assets/js/iris/kpi_dashboard.js"></script>
{% endblock %}