{% extends "base.html" %}
{% load static erp_tags %}

{% block title %}{{ page_title }}{% endblock %}

{% block content %}
{# Report Selection + Date Range #}
<div class="row">
  <div class="col-12">
    <div class="card mb-4">
      <div class="card-header pb-0">
        <div class="row align-items-end">
          <div class="col-md-3">
            <h6>{{ report_title|default:"Report" }}</h6>
            {% if scope_label %}<p class="text-xs text-secondary mb-2" data-testid="report-scope">Data for: {{ scope_label }}</p>{% endif %}
          </div>
          <div class="col-md-9">
            <form method="get" class="row g-2 justify-content-end">
              <div class="col-auto">
                <select name="report" aria-label="Report" class="form-control form-control-sm" data-auto-submit>
                  {% for key, label in report_choices %}
                  <option value="{{ key }}" {% if active_report == key %}selected{% endif %}>{{ label }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="col-auto">
                <select name="period" aria-label="Period" class="form-control form-control-sm" data-auto-submit>
                  <option value="today" {% if period == "today" %}selected{% endif %}>Today</option>
                  <option value="week" {% if period == "week" %}selected{% endif %}>This Week</option>
                  <option value="month" {% if period == "month" %}selected{% endif %}>This Month</option>
                  <option value="quarter" {% if period == "quarter" %}selected{% endif %}>This Quarter</option>
                  <option value="year" {% if period == "year" %}selected{% endif %}>This Year</option>
                </select>
              </div>
              <div class="col-auto">
                <input type="date" name="date_from" aria-label="From date" class="form-control form-control-sm" value="{{ date_from|date:'Y-m-d' }}">
              </div>
              <div class="col-auto">
                <input type="date" name="date_to" aria-label="To date" class="form-control form-control-sm" value="{{ date_to|date:'Y-m-d' }}">
              </div>
              <div class="col-auto">
                <button type="submit" class="btn bg-gradient-primary btn-sm mb-0">Apply</button>
              </div>
              <div class="col-auto">
                <a href="?report={{ active_report }}&period={{ period }}&date_from={{ date_from|date:'Y-m-d' }}&date_to={{ date_to|date:'Y-m-d' }}&export=csv" class="btn btn-outline-secondary btn-sm mb-0">
                  <i class="fas fa-file-csv me-1"></i> CSV
                </a>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{# KPI Summary Cards #}
{% if summary_cards %}
<div class="row">
  {% for card in summary_cards %}
  <div class="col-xl-3 col-sm-6 mb-4">
    <div class="card">
      <div class="card-body p-3">
        <div class="row">
          <div class="col-8">
            <div class="numbers">
              <p class="text-sm mb-0 text-capitalize font-weight-bold">{{ card.label }}</p>
              <h5 class="font-weight-bolder mb-0">{{ card.value }}</h5>
            </div>
          </div>
          <div class="col-4 text-end">
            <div class="icon icon-shape bg-gradient-{{ card.color|default:'primary' }} shadow text-center border-radius-md">
              <i class="{{ card.icon|default:'fas fa-chart-bar' }} text-lg opacity-10" aria-hidden="true"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}

{# Chart #}
<div class="row">
  <div class="col-12">
    <div class="card mb-4">
      <div class="card-header pb-0">
        <h6>{{ chart_title|default:"Chart" }}</h6>
      </div>
      <div class="card-body p-3">
        <div class="chart">
          <canvas id="report-chart" class="chart-canvas" height="300"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>

{# Data Table #}
<div class="row">
  <div class="col-12">
    <div class="card mb-4">
      <div class="card-header pb-0">
        <h6>Data</h6>
      </div>
      <div class="card-body px-0 pt-0 pb-2">
        <div class="table-responsive p-0">
          <table class="table align-items-center mb-0">
            <thead>
              <tr>
                {% for col in table_columns %}
                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 {% if forloop.first %}ps-3{% else %}ps-2{% endif %} {% if col.align == 'end' %}text-end pe-4{% endif %}">{{ col.label }}</th>
                {% endfor %}
              </tr>
            </thead>
            <tbody>
              {% for row in table_data %}
              <tr>
                {% for val in row %}
                <td class="{% if forloop.first %}ps-3{% endif %}">
                  <span class="text-sm">{% if val is None or val == "" %}—{% else %}{{ val }}{% endif %}</span>
                </td>
                {% endfor %}
              </tr>
              {% empty %}
              <tr>
                <td colspan="{{ table_columns|length }}" class="text-center py-4 text-sm text-secondary">No data for selected period.</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

{# Definitions: how every number above is computed, so it can be audited #}
{% if definitions %}
<div class="row">
  <div class="col-12">
    <div class="card mb-4" id="report-definitions">
      <div class="card-header pb-0">
        <h6>How these numbers are calculated</h6>
      </div>
      <div class="card-body pt-2">
        <dl class="row text-sm mb-0">
          {% for term, meaning in definitions %}
          <dt class="col-sm-3">{{ term }}</dt>
          <dd class="col-sm-9">{{ meaning }}</dd>
          {% endfor %}
        </dl>
      </div>
    </div>
  </div>
</div>
{% endif %}
{% include "erp/_list_a11y_script.html" %}
{% endblock %}

{% block javascripts %}
<script src="{% static 'assets/js/plugins/chartjs.min.js' %}"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
  var ctx = document.getElementById("report-chart");
  if (ctx && typeof Chart !== "undefined") {
    var chartData = {{ chart_data|safe }};
    new Chart(ctx, {
      type: chartData.type || "bar",
      data: {
        labels: chartData.labels || [],
        datasets: chartData.datasets || []
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: chartData.datasets && chartData.datasets.length > 1 } },
        scales: {
          y: { beginAtZero: true }
        }
      }
    });
  }
});
</script>
{% endblock %}