{% extends "base.html" %}
{% block content %}

<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
  <h5 class="mb-0">Trial Balance</h5>
  <a class="btn btn-sm btn-outline-gold"
     href="{{ url_for('trial_balance_export', date_from=date_from, date_to=date_to) }}">
    Export CSV
  </a>
</div>

<!-- Date filter -->
<form method="get" action="{{ url_for('trial_balance') }}" class="d-flex gap-3 align-items-end mb-4 flex-wrap p-3 bg-dark border border-secondary rounded">
  <div>
    <label class="form-label small mb-1 fw-bold text-muted">Anchor Date</label>
    <input type="date" name="anchor_date" class="form-control form-control-sm" value="{{ anchor_date }}">
  </div>
  
  <div>
    <label class="form-label small mb-1 fw-bold text-muted">Period Preset</label>
    <select name="preset" class="form-select form-select-sm" id="presetSelect" onchange="toggleCustomDates()">
      <option value="day" {% if preset=='day' %}selected{% endif %}>Day</option>
      <option value="week" {% if preset=='week' %}selected{% endif %}>Week</option>
      <option value="month" {% if preset=='month' %}selected{% endif %}>Month</option>
      <option value="quarter" {% if preset=='quarter' %}selected{% endif %}>Quarter</option>
      <option value="year" {% if preset=='year' %}selected{% endif %}>Year (Fiscal)</option>
      <option value="custom" {% if preset=='custom' %}selected{% endif %}>Custom Range</option>
    </select>
  </div>

  <div id="customDates" class="gap-2 align-items-end" style="{% if preset != 'custom' %}display: none !important;{% else %}display: flex !important;{% endif %}">
    <div>
      <label class="form-label small mb-1 fw-bold text-muted">From Date</label>
      <input type="date" name="date_from" class="form-control form-control-sm" value="{{ date_from }}">
    </div>
    <div>
      <label class="form-label small mb-1 fw-bold text-muted">To Date</label>
      <input type="date" name="date_to" class="form-control form-control-sm" value="{{ date_to }}">
    </div>
  </div>

  <div>
    <button class="btn btn-sm btn-primary px-3">Apply Period</button>
    <a class="btn btn-sm btn-outline-secondary" href="{{ url_for('trial_balance') }}">Reset</a>
  </div>
</form>

<div class="alert alert-dark computed-range-bar py-2 px-3 mb-4 d-flex justify-content-between align-items-center small">
  <span>📅 Computed Reporting Range: <strong class="text-warning-custom">{{ date_from or 'Genesis' }}</strong> &nbsp;to&nbsp; <strong class="text-warning-custom">{{ date_to or 'Infinity' }}</strong></span>
  {% if preset != 'custom' %}
  <span class="badge bg-secondary text-capitalize">{{ preset }} mode</span>
  {% endif %}
</div>

<script>
  function toggleCustomDates() {
    var select = document.getElementById("presetSelect");
    var customDiv = document.getElementById("customDates");
    if (select.value === "custom") {
      customDiv.setAttribute("style", "display: flex !important;");
    } else {
      customDiv.setAttribute("style", "display: none !important;");
    }
  }
</script>

<!-- Trial balance table -->
{% if comparative_tb %}
<table class="table table-dark table-hover table-sm align-middle">
  <thead>
    <tr>
      <th style="width:120px;">Account No</th>
      <th>Description</th>
      <th class="text-end" style="width:160px;">Current Period<br><span class="text-muted font-monospace" style="font-size: 11px;">{{ date_from }} to {{ date_to }}</span></th>
      <th class="text-end" style="width:160px;">Prior Period<br><span class="text-muted font-monospace" style="font-size: 11px;">{{ prior_from }} to {{ prior_to }}</span></th>
      <th class="text-end" style="width:140px;">Variance<br><span class="text-muted" style="font-size: 11px;">(Amount)</span></th>
      <th class="text-end" style="width:120px;">Variance<br><span class="text-muted" style="font-size: 11px;">(%)</span></th>
    </tr>
  </thead>
  <tbody>
    {% for row in comparative_tb %}
    <tr>
      <td class="mono" style="color:#e0e0e0;">{{ row.account_no }}</td>
      <td>{{ row.description }}</td>
      <td class="text-end font-monospace">{{ "%.2f"|format(row.current_bal) }}</td>
      <td class="text-end font-monospace text-muted">{{ "%.2f"|format(row.prior_bal) }}</td>
      <td class="text-end font-monospace fw-bold {{ 'text-success' if row.variance > 0 else 'text-danger' if row.variance < 0 else 'text-muted' }}">
        {% if row.variance > 0 %}+{% endif %}{{ "%.2f"|format(row.variance) }}
      </td>
      <td class="text-end font-monospace fw-bold {{ 'text-success' if row.variance > 0 else 'text-danger' if row.variance < 0 else 'text-muted' }}">
        {% if row.pct_variance is not none %}
          {% if row.variance > 0 %}+{% endif %}{{ "%.2f"|format(row.pct_variance) }}%
        {% else %}
          —
        {% endif %}
      </td>
    </tr>
    {% endfor %}
  </tbody>
  <tfoot>
    <tr style="border-top:2px solid rgba(255,255,255,0.1);">
      <td colspan="2" class="text-muted">Net (should be 0)</td>
      <td class="text-end font-monospace {{ 'text-danger' if total != 0 else 'text-success' }}">
        {{ "%.2f"|format(total) }}
      </td>
      <td colspan="3"></td>
    </tr>
  </tfoot>
</table>
{% else %}
<table class="table table-dark table-hover table-sm">
  <thead>
    <tr>
      <th style="width:140px;">Account No</th>
      <th>Description</th>
      <th class="text-end" style="width:160px;">Balance</th>
    </tr>
  </thead>
  <tbody>
    {% for acct, desc, bal in tb %}
    <tr>
      <td class="mono" style="color:#e0e0e0;">{{ acct }}</td>
      <td>{{ desc }}</td>
      <td class="text-end font-monospace">{{ "%.2f"|format(bal) }}</td>
    </tr>
    {% else %}
    <tr><td colspan="3" class="text-muted text-center py-3">No posted entries found.</td></tr>
    {% endfor %}
  </tbody>
  {% if tb %}
  <tfoot>
    <tr style="border-top:2px solid rgba(255,255,255,0.1);">
      <td colspan="2" class="text-muted">Net (should be 0)</td>
      <td class="text-end font-monospace {{ 'text-danger' if total != 0 else 'text-success' }}">
        {{ "%.2f"|format(total) }}
      </td>
    </tr>
  </tfoot>
  {% endif %}
</table>
{% endif %}

<!-- Composition -->
{% if tb %}
<div class="mt-4">
  <p class="text-muted small mb-2">Posted batches contributing to this balance:</p>
  <table class="table table-dark table-sm" style="max-width:600px;">
    <thead>
      <tr>
        <th style="width:70px;">Type</th>
        <th>Filename</th>
        <th style="width:80px;">Status</th>
        <th style="width:60px;">Rows</th>
      </tr>
    </thead>
    <tbody>
      {% for type, filename, status, rows in composition %}
      <tr>
        <td>{{ type }}</td>
        <td>{{ filename }}</td>
        <td><span class="badge badge-posted">{{ status }}</span></td>
        <td>{{ rows }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}

{% endblock %}