{% extends "finance/base.html" %}
{% load humanize %}

{% block content %}
<style>
  .comparison-table-wrap { width: 100%; max-width: 100%; overflow: visible; border: 1px solid #dfe3e7; border-radius: 4px; }
  .comparison-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-bottom: 0; }
  .comparison-table th { background: #56636f; color: #fff; text-align: center; vertical-align: middle; white-space: normal; overflow-wrap: anywhere; border: 1px solid #68747e; padding: 7px 5px; font-size: .82rem; }
  .comparison-table td { border: 1px solid #e1e4e7; padding: 6px 5px; font-size: .82rem; background: #fff; overflow-wrap: anywhere; }
  .comparison-table tbody tr:nth-child(even) td { background: #f3f4f5; }
  .comparison-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .9rem; }
  .amount-unit { font-size: .82rem; color: #6c757d; margin: 0 0 8px; }
  .comparison-table .acct-no { width: 13%; }
  .comparison-table .acct-name { width: 22%; }
  .comparison-table .version-col { width: 13%; }
  .comparison-table .delta-col { width: 9%; }
  .delta-positive { color: #198754 !important; font-weight: 600; }
  .delta-negative { color: #dc3545 !important; font-weight: 600; }
  .delta-neutral { color: #495057 !important; }
  .filter-panel { background: #f3f5f7; padding: 12px; border-radius: 5px; margin-bottom: 14px; }
  .version-legend { margin-bottom: 8px; }
  @media (max-width: 1100px) {
    .comparison-table th, .comparison-table td { font-size: .74rem; padding: 5px 3px; }
    .comparison-table .num { white-space: normal; overflow-wrap: anywhere; }
  }
</style>
<div class="container-fluid px-3">
  <div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
    <div>
      <h3 class="mb-1">Budget Version Comparison</h3>
      <div class="text-muted">Compare up to three saved versions. This screen is read-only and does not change the active budget.</div>
    </div>
    <a href="{% url 'budget' %}?year={{ year }}" class="btn btn-secondary">Back to Entry Budget / WP&amp;B</a>
  </div>

  <form method="get" class="filter-panel">
    <div class="row g-2 align-items-end">
      <div class="col-6 col-md-2">
        <label class="form-label">Budget Year</label>
        <select name="year" class="form-select" onchange="this.form.submit()">
          {% for y in years %}<option value="{{ y }}" {% if y == year %}selected{% endif %}>{{ y }}</option>{% endfor %}
        </select>
      </div>
      <div class="col-6 col-md-2">
        <label class="form-label">Comparison Period</label>
        <select name="period" class="form-select">
          {% for option in period_options %}<option value="{{ option.value }}" {% if option.value == period %}selected{% endif %}>{{ option.label }}</option>{% endfor %}
        </select>
      </div>
      {% for n in "123" %}
      <div class="col-6 col-md-2">
        <label class="form-label">Version {{ n }}</label>
        <select name="v{{ n }}" class="form-select">
          <option value="">— Not selected —</option>
          {% for version in versions %}
          <option value="{{ version.id }}" {% if version.id|stringformat:"s" == selected_v1 and n == "1" or version.id|stringformat:"s" == selected_v2 and n == "2" or version.id|stringformat:"s" == selected_v3 and n == "3" %}selected{% endif %}>
            V{{ version.version_no }}{% if version.status == 'ACTIVE' %} — ACTIVE{% endif %} · {{ version.effective_date|date:"d-m-Y" }}
          </option>
          {% endfor %}
        </select>
      </div>
      {% endfor %}
      <div class="col-12 col-md-2">
        <label class="form-label">Search Account</label>
        <input type="text" name="search" value="{{ search }}" class="form-control" placeholder="Account No / Name">
      </div>
      <div class="col-8 col-md-1">
        <label class="form-label">Status</label>
        <select name="budget_status" class="form-select">
          <option value="all" {% if budget_status == 'all' %}selected{% endif %}>All</option>
          <option value="budgeted" {% if budget_status == 'budgeted' %}selected{% endif %}>Budgeted</option>
          <option value="non_budgeted" {% if budget_status == 'non_budgeted' %}selected{% endif %}>Non Budgeted</option>
        </select>
      </div>
      <div class="col-4 col-md-1"><button class="btn btn-primary w-100" type="submit">Compare</button></div>
    </div>
    <div class="small text-muted mt-2">Period: <strong>{{ period_label }}</strong>. Semua pasangan versi yang dipilih dibandingkan. Kenaikan berwarna hijau, penurunan merah.</div>
  </form>

  {% if not selected_headers %}
    <div class="alert alert-info">Belum ada versi budget untuk tahun {{ year }}. Silakan upload budget terlebih dahulu.</div>
  {% else %}
    <div class="mb-2 d-flex flex-wrap gap-2 version-legend">
      {% for version in selected_headers %}
      <span class="badge {% if version.status == 'ACTIVE' %}bg-success{% else %}bg-secondary{% endif %}">V{{ version.version_no }} · {{ version.status }} · Effective {{ version.effective_date|date:"d-m-Y" }}</span>
      {% endfor %}
    </div>
    <div class="amount-unit">All amounts in <strong>IDR million (Rp juta)</strong>, rounded to the nearest million. Percentages retain two decimals.</div>
    <div class="comparison-table-wrap">
      <table class="table table-sm comparison-table">
        <colgroup>
          <col style="width:4%"><col class="acct-no"><col class="acct-name">
          {% for item in selected_headers %}<col class="version-col">{% endfor %}
          {% for d in rows.0.deltas %}<col class="delta-col"><col class="delta-col">{% endfor %}
        </colgroup>
        <thead><tr>
          <th>No</th><th>Account No</th><th>Account Name</th>
          {% for item in selected_headers %}<th>V{{ item.version_no }}<br><small>{{ item.status }}</small></th>{% endfor %}
          {% for d in rows.0.deltas %}<th>Δ Amount<br>V{{ d.to_version.version_no }} vs V{{ d.from_version.version_no }}</th><th>Δ %</th>{% endfor %}
        </tr></thead>
        <tbody>
          {% for row in rows %}
          <tr>
            <td class="text-center">{{ forloop.counter }}</td>
            <td>{{ row.acct_no }}</td>
            <td>{{ row.acct_name }}</td>
            {% for v in row.versions %}<td class="num">{{ v.period_total_million|intcomma }}</td>{% endfor %}
            {% for d in row.deltas %}
              <td class="num {% if d.amount > 0 %}delta-positive{% elif d.amount < 0 %}delta-negative{% else %}delta-neutral{% endif %}">{{ d.amount_million|intcomma }}</td>
              <td class="num {% if d.percent > 0 %}delta-positive{% elif d.percent < 0 %}delta-negative{% else %}delta-neutral{% endif %}">{% if d.percent != None %}{{ d.percent|floatformat:2 }}%{% else %}—{% endif %}</td>
            {% endfor %}
          </tr>
          {% empty %}
          <tr><td colspan="12" class="text-center text-muted py-4">Tidak ada account yang sesuai filter.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% endif %}
</div>
{% endblock %}