{% extends "pos/base.html" %}
{% load static %}

{% block title %}Balance Sheet{% endblock %}

{% block stylesheets %}
<style>
  :root{
    --bs-navy:    #1a2b4c;
    --bs-navy2:   #24365c;
    --bs-accent:  #2f6fed;
    --bs-green:   #1a7d4f;
    --bs-red:     #c0392b;
    --bs-border:  #d7dce3;
    --bs-bg:      #f7f8fa;
    --bs-bg-alt:  #fbfcfd;
    --bs-muted:   #6b7686;
  }

  .bs-wrap{ max-width: 980px; margin: 0 auto; }

  .bs-toolbar{
    background:#fff; border:1px solid var(--bs-border); border-radius:8px;
    padding:16px 20px; margin-bottom:18px;
    display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end;
    box-shadow: 0 1px 2px rgba(20,30,50,0.04);
  }
  .bs-toolbar .form-group{ margin-bottom:0; }
  .bs-toolbar label{ font-size:.72rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.03em; color:var(--bs-muted); margin-bottom:4px; display:block; }
  .bs-toolbar select, .bs-toolbar input[type=date]{
    border:1px solid var(--bs-border); border-radius:6px; height:36px; font-size:.85rem;
  }
  .bs-toolbar .btn-bs-primary{
    background:var(--bs-navy); border-color:var(--bs-navy); color:#fff; font-weight:600;
    border-radius:6px; height:36px; padding:0 18px;
  }
  .bs-toolbar .btn-bs-primary:hover{ background:var(--bs-navy2); color:#fff; }
  .bs-toolbar .btn-bs-outline{
    border:1px solid var(--bs-border); border-radius:6px; height:36px; padding:0 16px;
    background:#fff; color:var(--bs-navy); font-weight:600;
  }
  .bs-toolbar .btn-bs-outline:hover{ background:var(--bs-bg); }

  .bs-status{
    border-radius:8px; padding:10px 16px; margin-bottom:18px; font-size:.85rem;
    font-weight:600; display:flex; align-items:center; gap:8px;
  }
  .bs-status.ok{ background:#e9f7ef; color:var(--bs-green); border:1px solid #bfe8d2; }
  .bs-status.bad{ background:#fdecea; color:var(--bs-red); border:1px solid #f5c6c0; }

  .bs-doc{
    background:#fff; border:1px solid var(--bs-border); border-radius:10px;
    box-shadow: 0 2px 6px rgba(20,30,50,0.06);
    overflow:hidden;
  }
  .bs-doc-header{
    background: linear-gradient(135deg, var(--bs-navy) 0%, var(--bs-navy2) 100%);
    color:#fff; padding:26px 32px 22px;
    text-align:center;
  }
  .bs-doc-header .bs-company{ font-size:1.15rem; font-weight:700; letter-spacing:.02em; }
  .bs-doc-header .bs-title{ font-size:1rem; font-weight:600; margin-top:4px; opacity:.95; }
  .bs-doc-header .bs-subtitle{ font-size:.8rem; margin-top:6px; opacity:.78; }

  .bs-section{ padding: 0; }
  .bs-section + .bs-section{ border-top: 2px solid var(--bs-bg); }

  .bs-section-head{
    background: var(--bs-bg);
    padding: 11px 24px;
    font-size: .78rem; font-weight: 800; letter-spacing:.06em; text-transform:uppercase;
    color: var(--bs-navy);
    border-bottom: 1px solid var(--bs-border);
    display:flex; justify-content:space-between; align-items:center;
  }

  table.bs-table{ width:100%; border-collapse:collapse; font-size:.86rem; }
  table.bs-table thead th{
    font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--bs-muted);
    font-weight:700; padding:6px 24px; text-align:right; border-bottom:1px solid var(--bs-border);
    background:var(--bs-bg-alt);
  }
  table.bs-table thead th.bs-th-name{ text-align:left; }

  .bs-row td{ padding: 6px 24px; border-bottom:1px solid #eef0f3; }
  .bs-row:hover{ background:#f5f8ff; }
  .bs-name-cell{ white-space:nowrap; }
  .bs-depth-0 .bs-name-cell{ padding-left: 24px; }
  .bs-depth-1 .bs-name-cell{ padding-left: 44px; }
  .bs-depth-2 .bs-name-cell{ padding-left: 64px; }
  .bs-depth-3 .bs-name-cell{ padding-left: 84px; }
  .bs-depth-4 .bs-name-cell{ padding-left: 104px; }
  .bs-acct-code{ color:#9aa3b1; font-size:.74rem; margin-right:8px; font-family: 'Courier New', monospace; }

  .bs-group-row td{ font-weight:700; color:var(--bs-navy); background:#fafbfd; }
  .bs-group-row .bs-acct-code{ color:#b9c2cf; }

  .bs-leaf-row .bs-leaf-name{ color:#2c3440; }
  .bs-amount-cell{ font-family:'Courier New', monospace; white-space:nowrap; }
  .bs-negative{ color: var(--bs-red); }

  .bs-compare-cell{ color:#8b94a3; }
  .bs-change-up{ color: var(--bs-green); font-weight:600; }
  .bs-change-down{ color: var(--bs-red); font-weight:600; }
  .bs-change-flat{ color:#b6bcc6; }

  .bs-depth-0 .bs-group-name, .bs-depth-0 .bs-leaf-name{ font-size:.92rem; }
  .bs-depth-1 .bs-group-name, .bs-depth-1 .bs-leaf-name{ font-size:.88rem; }
  .bs-depth-2 .bs-leaf-name, .bs-depth-2 .bs-group-name{ font-size:.85rem; color:#444; }

  .bs-total-row td{
    border-top: 2px solid var(--bs-navy);
    border-bottom: none;
    font-weight: 800; font-size: .92rem; color: var(--bs-navy);
    background: #eef2fb;
    padding: 10px 24px;
  }
  .bs-pl-row td{
    font-style: italic; color:#4a5568; background:#fffbea; font-weight:600;
    border-top: 1px dashed #e0c469;
  }

  .bs-grand-row td{
    background: var(--bs-navy);
    color:#fff;
    font-weight:800; font-size:1rem;
    padding: 13px 24px;
    border: none;
  }
  .bs-grand-row .bs-acct-code{ display:none; }

  .bs-check-row{
    background:#fff; padding:16px 24px; text-align:center; font-size:.82rem; color:var(--bs-muted);
    border-top:1px solid var(--bs-border);
  }
  .bs-check-row strong{ color:var(--bs-navy); }

  @media print{
    .no-print{ display:none !important; }
    body{ background:#fff; }
    .bs-doc{ box-shadow:none; border:1px solid #ccc; }
    .bs-wrap{ max-width:100%; }
  }
</style>
{% endblock %}

{% block heading %}Balance Sheet{% endblock %}

{% block content %}
<div class="bs-wrap">

  <form method="get" class="bs-toolbar no-print" id="bsFilterForm">
    <div class="form-group">
      <label>As Of Date</label>
      <input type="date" name="as_of_date" class="form-control" value="{{ as_of_date }}">
    </div>

    <div class="form-group">
      <label>Compare To</label>
      <select name="compare_mode" class="form-control" id="compareModeSelect">
        <option value="" {% if not compare_mode %}selected{% endif %}>No comparison</option>
        <option value="prev_month" {% if compare_mode == "prev_month" %}selected{% endif %}>Previous month-end</option>
        <option value="prev_year" {% if compare_mode == "prev_year" %}selected{% endif %}>Previous year (same date)</option>
        <option value="custom" {% if compare_mode == "custom" %}selected{% endif %}>Custom date&hellip;</option>
      </select>
    </div>

    <div class="form-group" id="customCompareGroup" style="{% if compare_mode != 'custom' %}display:none;{% endif %}">
      <label>Compare Date</label>
      <input type="date" name="compare_date" class="form-control" value="{{ compare_date_input }}">
    </div>

    <div class="form-group">
      <button type="submit" class="btn btn-bs-primary">Run Report</button>
    </div>
    <div class="form-group">
      <button type="button" class="btn btn-bs-outline" onclick="window.print()">
        <i class="fas fa-print mr-1"></i>Print
      </button>
    </div>
  </form>

  <div class="bs-status no-print {% if bs.is_balanced %}ok{% else %}bad{% endif %}">
    {% if bs.is_balanced %}
      &#10003; Balanced &mdash; Total Assets equal Total Liabilities + Equity.
    {% else %}
      &#9888; Out of balance &mdash; Assets ({{ bs.total_assets|floatformat:2 }}) vs.
      Liabilities + Equity ({{ bs.total_liab_plus_equity|floatformat:2 }}).
    {% endif %}
  </div>

  <div class="bs-doc">

    <div class="bs-doc-header">
      <div class="bs-company">{{ request.session.business_name|default:"Your Company" }}</div>
      <div class="bs-title">Balance Sheet</div>
      <div class="bs-subtitle">
        As of {{ bs.as_of_date }}
        {% if bs.has_comparison %} &nbsp;vs.&nbsp; {{ bs.compare_date }}{% endif %}
      </div>
    </div>

    <div class="bs-section">
      <div class="bs-section-head">Assets</div>
      <table class="bs-table">
        <thead>
          <tr>
            <th class="bs-th-name">Account</th>
            <th>{{ bs.as_of_date }}</th>
            {% if bs.has_comparison %}
              <th>{{ bs.compare_date }}</th>
              <th>Change</th>
            {% endif %}
          </tr>
        </thead>
        <tbody>
          {% for node in bs.assets.roots %}
            {% include "coa/_bs_node.html" with node=node depth=0 has_comparison=bs.has_comparison %}
          {% empty %}
            <tr><td colspan="4" class="text-center text-muted py-3">No asset balances.</td></tr>
          {% endfor %}
        </tbody>
        <tfoot>
          <tr class="bs-total-row">
            <td>Total Assets</td>
            <td class="bs-amount-cell text-right">{{ bs.total_assets|floatformat:2 }}</td>
            {% if bs.has_comparison %}
              <td colspan="2"></td>
            {% endif %}
          </tr>
        </tfoot>
      </table>
    </div>

    <div class="bs-section">
      <div class="bs-section-head">Liabilities</div>
      <table class="bs-table">
        <tbody>
          {% for node in bs.liabilities.roots %}
            {% include "coa/_bs_node.html" with node=node depth=0 has_comparison=bs.has_comparison %}
          {% empty %}
            <tr><td colspan="4" class="text-center text-muted py-3">No liability balances.</td></tr>
          {% endfor %}
        </tbody>
        <tfoot>
          <tr class="bs-total-row">
            <td>Total Liabilities</td>
            <td class="bs-amount-cell text-right">{{ bs.total_liabilities|floatformat:2 }}</td>
            {% if bs.has_comparison %}
              <td colspan="2"></td>
            {% endif %}
          </tr>
        </tfoot>
      </table>
    </div>

    <div class="bs-section">
      <div class="bs-section-head">Equity</div>
      <table class="bs-table">
        <tbody>
          {% for node in bs.equity.roots %}
            {% include "coa/_bs_node.html" with node=node depth=0 has_comparison=bs.has_comparison %}
          {% endfor %}
          <tr class="bs-pl-row">
            <td class="bs-name-cell" style="padding-left:12px;">
              <span class="bs-acct-code"></span>Current Period Profit / (Loss)
            </td>
            <td class="bs-amount-cell text-right">
              {% if bs.current_pl < 0 %}
                <span class="bs-negative">({{ bs.current_pl|floatformat:2|cut:"-" }})</span>
              {% else %}
                {{ bs.current_pl|floatformat:2 }}
              {% endif %}
            </td>
            {% if bs.has_comparison %}
              <td class="bs-amount-cell bs-compare-cell text-right">
                {% if bs.current_pl_compare < 0 %}
                  <span class="bs-negative">({{ bs.current_pl_compare|floatformat:2|cut:"-" }})</span>
                {% else %}
                  {{ bs.current_pl_compare|floatformat:2 }}
                {% endif %}
              </td>
              <td></td>
            {% endif %}
          </tr>
        </tbody>
        <tfoot>
          <tr class="bs-total-row">
            <td>Total Equity</td>
            <td class="bs-amount-cell text-right">{{ bs.total_equity|floatformat:2 }}</td>
            {% if bs.has_comparison %}
              <td colspan="2"></td>
            {% endif %}
          </tr>
        </tfoot>
      </table>
    </div>

    <table class="bs-table">
      <tbody>
        <tr class="bs-grand-row">
          <td>Total Liabilities &amp; Equity</td>
          <td class="bs-amount-cell text-right">{{ bs.total_liab_plus_equity|floatformat:2 }}</td>
          {% if bs.has_comparison %}<td colspan="2"></td>{% endif %}
        </tr>
      </tbody>
    </table>

    <div class="bs-check-row no-print">
      Assets <strong>{{ bs.total_assets|floatformat:2 }}</strong>
      &nbsp;=&nbsp;
      Liabilities + Equity <strong>{{ bs.total_liab_plus_equity|floatformat:2 }}</strong>
    </div>

  </div>

  <p class="text-center text-muted mt-3 no-print" style="font-size:.78rem;">
    Generated {{ bs.as_of_date }} &middot; All figures in your base currency &middot; Negative amounts shown in parentheses
  </p>

</div>
{% endblock %}

{% block javascripts %}
<script>
  document.getElementById('compareModeSelect').addEventListener('change', function(){
    document.getElementById('customCompareGroup').style.display =
      (this.value === 'custom') ? '' : 'none';
  });
</script>
{% endblock %}