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

{% block title %}Income Sheet{% endblock %}

{% block stylesheets %}
<style>
  .section-footer { background:#e9ecef; font-weight:700; }
  .sub-tabs .nav-link { font-size:.85rem; padding:.35rem .75rem; }
  .toggle-btn { font-size:.8rem; }
  .toggle-btn .active { background:#0d6efd!important; color:#fff!important; }
  .overhead-row td { font-style:italic; color:#555; }
  .grand-box { border:2px solid #0d6efd; border-radius:.5rem; padding:1rem; }
  .grand-box .positive { color:#198754; }
  .grand-box .negative { color:#dc3545; }
  @media print { .no-print{display:none!important;} }
</style>
{% endblock %}

{% block heading %}Income Sheet{% endblock %}

{% block content %}
<div class="container-fluid my-3">

{# ═══════ HEADER FILTERS ═══════ #}
<form method="get" class="mb-4 no-print">
  <div class="row g-2 align-items-end">
    <div class="col-auto">
      <label class="small mb-1">From</label>
      <input type="date" name="start_date" value="{{ start_date|date:'Y-m-d' }}" class="form-control form-control-sm">
    </div>
    <div class="col-auto">
      <label class="small mb-1">To</label>
      <input type="date" name="end_date" value="{{ end_date|date:'Y-m-d' }}" class="form-control form-control-sm">
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-filter"></i> Filter</button>
      <button type="button" class="btn btn-outline-secondary btn-sm" onclick="window.print()"><i class="fa fa-print"></i> Print</button>
    </div>
  </div>
</form>

<h5 class="text-center mb-3">Income Sheet &mdash; {{ start_date }} to {{ end_date }}</h5>

{# ═══════ MAIN TABS ═══════ #}
<ul class="nav nav-tabs" id="mainTabs" role="tablist">
  <li class="nav-item"><a class="nav-link active main-tab-link" href="#tab_sale">Sale</a></li>
  <li class="nav-item"><a class="nav-link main-tab-link" href="#tab_return">Return</a></li>
  <li class="nav-item"><a class="nav-link main-tab-link" href="#tab_expense">Expense</a></li>
  <li class="nav-item"><a class="nav-link main-tab-link" href="#tab_salary">Salary</a></li>
  <li class="nav-item"><a class="nav-link main-tab-link" href="#tab_settle">Settlements</a></li>
  <li class="nav-item"><a class="nav-link main-tab-link" href="#tab_adj">Adjustment</a></li>
</ul>

<div class="tab-content border border-top-0 p-3" id="mainTabContent">

{# ═══════════════════════════════════════════════════════════════════ #}
{# TAB: SALE                                                          #}
{# ═══════════════════════════════════════════════════════════════════ #}
<div class="tab-pane-custom" id="tab_sale">
  <!-- Sub-tabs -->
  <ul class="nav nav-pills sub-tabs mb-3 mt-2" data-sub-group="sale">
    <li class="nav-item"><a class="nav-link active sub-tab-link" href="#sale_cash">Cash</a></li>
    <li class="nav-item"><a class="nav-link sub-tab-link" href="#sale_credit">Credit</a></li>
    <li class="nav-item"><a class="nav-link sub-tab-link" href="#sale_vendor">Vendor</a></li>
  </ul>
  <div class="tab-content">
    {% for sub_key, sub in sale_tabs.items %}
    <div class="tab-pane-custom {% if sub_key != 'cash' %}d-none{% endif %}" id="sale_{{ sub_key }}">
      <!-- Toggle -->
      <div class="btn-group btn-group-sm toggle-btn mb-2" data-toggle-target="sale_{{ sub_key }}">
        <button type="button" class="btn btn-outline-primary active" data-mode="items">Item-wise</button>
        <button type="button" class="btn btn-outline-primary" data-mode="bills">Bill-wise</button>
      </div>

      <!-- ITEM-WISE TABLE -->
      <div class="view-items" id="sale_{{ sub_key }}_items">
        <div class="table-responsive">
          <table class="table table-sm table-bordered">
            <thead class="table-light">
              <tr>
                <th>Item Name</th>
                <th class="text-end">Qty</th>
                <th class="text-end">Sale Amount</th>
                <th class="text-end">COGS</th>
                <th class="text-end">Profit</th>
                <th class="text-end">Margin %</th>
              </tr>
            </thead>
            <tbody>
              {% for i in sub.items %}
              <tr>
                <td>{{ i.name }}</td>
                <td class="text-end">{{ i.qty }}</td>
                <td class="text-end">{{ i.sale_amt|floatformat:2 }}</td>
                <td class="text-end">{{ i.cogs|floatformat:2 }}</td>
                <td class="text-end">{{ i.profit|floatformat:2 }}</td>
                <td class="text-end">{{ i.margin|floatformat:2 }}%</td>
              </tr>
              {% empty %}
              <tr><td colspan="6" class="text-center text-muted">No items</td></tr>
              {% endfor %}
            </tbody>
            <tfoot>
              <tr class="section-footer">
                <td>Items Total</td>
                <td></td>
                <td class="text-end">{{ sub.total_sale|floatformat:2 }}</td>
                <td class="text-end">{{ sub.total_cogs|floatformat:2 }}</td>
                <td class="text-end" colspan="2">{{ sub.items_profit|floatformat:2 }}</td>
              </tr>
              <!-- Overheads -->
              <tr class="overhead-row">
                <td colspan="4" class="text-end">Flat Discount (−)</td>
                <td class="text-end" colspan="2">{{ sub.overheads.discount|floatformat:2 }}</td>
              </tr>
              <tr class="overhead-row">
                <td colspan="4" class="text-end">Transport Charges (+)</td>
                <td class="text-end" colspan="2">{{ sub.overheads.transport|floatformat:2 }}</td>
              </tr>
              <tr class="overhead-row">
                <td colspan="4" class="text-end">Other Charges (+)</td>
                <td class="text-end" colspan="2">{{ sub.overheads.other|floatformat:2 }}</td>
              </tr>
              <tr class="overhead-row">
                <td colspan="4" class="text-end">Advance Tax (−)</td>
                <td class="text-end" colspan="2">{{ sub.overheads.adv_tax|floatformat:2 }}</td>
              </tr>
              <tr class="section-footer">
                <td colspan="4" class="text-end">Net Profit</td>
                <td class="text-end" colspan="2">{{ sub.net_profit|floatformat:2 }}</td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>

      <!-- BILL-WISE TABLE -->
      <div class="view-bills d-none" id="sale_{{ sub_key }}_bills">
        <div class="table-responsive">
          <table class="table table-sm table-bordered">
            <thead class="table-light">
              <tr>
                <th>Invoice #</th>
                <th>Date</th>
                <th class="text-end">Bill Amount</th>
                <th class="text-end">COGS</th>
                <th class="text-end">Profit</th>
              </tr>
            </thead>
            <tbody>
              {% for b in sub.bills %}
              <tr>
                <td>{{ b.inv }}</td>
                <td>{{ b.date }}</td>
                <td class="text-end">{{ b.amount|floatformat:2 }}</td>
                <td class="text-end">{{ b.cogs|floatformat:2 }}</td>
                <td class="text-end">{{ b.profit|floatformat:2 }}</td>
              </tr>
              {% empty %}
              <tr><td colspan="5" class="text-center text-muted">No bills</td></tr>
              {% endfor %}
            </tbody>
            <tfoot>
              <tr class="section-footer">
                <td colspan="4" class="text-end">Total Bill Profit</td>
                <td class="text-end">{{ sub.bill_profit|floatformat:2 }}</td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>

  <!-- Sale Tab Total -->
  <div class="alert alert-primary py-2 mt-2">
    <strong>Total Sale Profit:</strong>
    <span class="float-end fw-bold">{{ grand.sale_profit|floatformat:2 }}</span>
  </div>
</div>

{# ═══════════════════════════════════════════════════════════════════ #}
{# TAB: RETURN                                                        #}
{# ═══════════════════════════════════════════════════════════════════ #}
<div class="tab-pane-custom d-none" id="tab_return">
  <ul class="nav nav-pills sub-tabs mb-3 mt-2" data-sub-group="return">
    <li class="nav-item"><a class="nav-link active sub-tab-link" href="#ret_cash">Cash</a></li>
    <li class="nav-item"><a class="nav-link sub-tab-link" href="#ret_credit">Credit</a></li>
    <li class="nav-item"><a class="nav-link sub-tab-link" href="#ret_vendor">Vendor</a></li>
  </ul>
  <div class="tab-content">
    {% for sub_key, sub in return_tabs.items %}
    <div class="tab-pane-custom {% if sub_key != 'cash' %}d-none{% endif %}" id="ret_{{ sub_key }}">
      <div class="btn-group btn-group-sm toggle-btn mb-2" data-toggle-target="ret_{{ sub_key }}">
        <button type="button" class="btn btn-outline-primary active" data-mode="items">Item-wise</button>
        <button type="button" class="btn btn-outline-primary" data-mode="bills">Bill-wise</button>
      </div>

      <!-- ITEM-WISE -->
      <div class="view-items" id="ret_{{ sub_key }}_items">
        <div class="table-responsive">
          <table class="table table-sm table-bordered">
            <thead class="table-light">
              <tr>
                <th>Item Name</th>
                <th class="text-end">Qty</th>
                <th class="text-end">Return Amount</th>
                <th class="text-end">COGS</th>
                <th class="text-end">Profit</th>
                <th class="text-end">Margin %</th>
              </tr>
            </thead>
            <tbody>
              {% for i in sub.items %}
              <tr>
                <td>{{ i.name }}</td>
                <td class="text-end">{{ i.qty }}</td>
                <td class="text-end">{{ i.sale_amt|floatformat:2 }}</td>
                <td class="text-end">{{ i.cogs|floatformat:2 }}</td>
                <td class="text-end">{{ i.profit|floatformat:2 }}</td>
                <td class="text-end">{{ i.margin|floatformat:2 }}%</td>
              </tr>
              {% empty %}
              <tr><td colspan="6" class="text-center text-muted">No return items</td></tr>
              {% endfor %}
            </tbody>
            <tfoot>
              <tr class="section-footer">
                <td>Items Total</td>
                <td></td>
                <td class="text-end">{{ sub.total_sale|floatformat:2 }}</td>
                <td class="text-end">{{ sub.total_cogs|floatformat:2 }}</td>
                <td class="text-end" colspan="2">{{ sub.items_profit|floatformat:2 }}</td>
              </tr>
              <tr class="overhead-row">
                <td colspan="4" class="text-end">Flat Discount (−)</td>
                <td class="text-end" colspan="2">{{ sub.overheads.discount|floatformat:2 }}</td>
              </tr>
              <tr class="overhead-row">
                <td colspan="4" class="text-end">Transport Charges (+)</td>
                <td class="text-end" colspan="2">{{ sub.overheads.transport|floatformat:2 }}</td>
              </tr>
              <tr class="overhead-row">
                <td colspan="4" class="text-end">Other Charges (+)</td>
                <td class="text-end" colspan="2">{{ sub.overheads.other|floatformat:2 }}</td>
              </tr>
              <tr class="overhead-row">
                <td colspan="4" class="text-end">Advance Tax (−)</td>
                <td class="text-end" colspan="2">{{ sub.overheads.adv_tax|floatformat:2 }}</td>
              </tr>
              <tr class="section-footer">
                <td colspan="4" class="text-end">Net Profit</td>
                <td class="text-end" colspan="2">{{ sub.net_profit|floatformat:2 }}</td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>

      <!-- BILL-WISE -->
      <div class="view-bills d-none" id="ret_{{ sub_key }}_bills">
        <div class="table-responsive">
          <table class="table table-sm table-bordered">
            <thead class="table-light">
              <tr>
                <th>Invoice #</th>
                <th>Date</th>
                <th class="text-end">Bill Amount</th>
                <th class="text-end">COGS</th>
                <th class="text-end">Profit</th>
              </tr>
            </thead>
            <tbody>
              {% for b in sub.bills %}
              <tr>
                <td>{{ b.inv }}</td>
                <td>{{ b.date }}</td>
                <td class="text-end">{{ b.amount|floatformat:2 }}</td>
                <td class="text-end">{{ b.cogs|floatformat:2 }}</td>
                <td class="text-end">{{ b.profit|floatformat:2 }}</td>
              </tr>
              {% empty %}
              <tr><td colspan="5" class="text-center text-muted">No return bills</td></tr>
              {% endfor %}
            </tbody>
            <tfoot>
              <tr class="section-footer">
                <td colspan="4" class="text-end">Total Bill Profit</td>
                <td class="text-end">{{ sub.bill_profit|floatformat:2 }}</td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
  <div class="alert alert-warning py-2 mt-2">
    <strong>Total Return Profit:</strong>
    <span class="float-end fw-bold">{{ grand.return_profit|floatformat:2 }}</span>
  </div>
</div>

{# ═══════════════════════════════════════════════════════════════════ #}
{# TAB: EXPENSE                                                       #}
{# ═══════════════════════════════════════════════════════════════════ #}
<div class="tab-pane-custom d-none" id="tab_expense">
  <h6 class="mt-2 mb-3">Expenses</h6>
  <div class="table-responsive">
    <table class="table table-sm table-bordered">
      <thead class="table-light">
        <tr>
          <th>Invoice #</th><th>Date</th><th>Expense Name</th><th>Description</th>
          <th class="text-end">Amount</th>
        </tr>
      </thead>
      <tbody>
        {% for r in expense_rows %}
        <tr>
          <td>{{ r.inv }}</td><td>{{ r.date }}</td><td>{{ r.name }}</td><td>{{ r.descp }}</td>
          <td class="text-end">{{ r.amount|floatformat:2 }}</td>
        </tr>
        {% empty %}
        <tr><td colspan="5" class="text-center text-muted">No expenses</td></tr>
        {% endfor %}
      </tbody>
      <tfoot>
        <tr class="section-footer">
          <td colspan="4" class="text-end">Total Expenses</td>
          <td class="text-end">{{ expense_total|floatformat:2 }}</td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

{# ═══════════════════════════════════════════════════════════════════ #}
{# TAB: SALARY                                                        #}
{# ═══════════════════════════════════════════════════════════════════ #}
<div class="tab-pane-custom d-none" id="tab_salary">
  <h6 class="mt-2 mb-3">Salaries</h6>
  <div class="table-responsive">
    <table class="table table-sm table-bordered">
      <thead class="table-light">
        <tr>
          <th>Staff Name</th><th>Date</th><th>Invoice #</th>
          <th class="text-end">Amount</th>
        </tr>
      </thead>
      <tbody>
        {% for r in salary_rows %}
        <tr>
          <td>{{ r.staff }}</td><td>{{ r.date }}</td><td>{{ r.inv }}</td>
          <td class="text-end">{{ r.amount|floatformat:2 }}</td>
        </tr>
        {% empty %}
        <tr><td colspan="4" class="text-center text-muted">No salary records</td></tr>
        {% endfor %}
      </tbody>
      <tfoot>
        <tr class="section-footer">
          <td colspan="3" class="text-end">Total Salaries</td>
          <td class="text-end">{{ salary_total|floatformat:2 }}</td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

{# ═══════════════════════════════════════════════════════════════════ #}
{# TAB: SETTLEMENTS                                                   #}
{# ═══════════════════════════════════════════════════════════════════ #}
<div class="tab-pane-custom d-none" id="tab_settle">
  <ul class="nav nav-pills sub-tabs mb-3 mt-2" data-sub-group="settle">
    <li class="nav-item"><a class="nav-link active sub-tab-link" href="#settle_cust">Customer Settlements</a></li>
    <li class="nav-item"><a class="nav-link sub-tab-link" href="#settle_vend">Vendor Settlements</a></li>
  </ul>
  <div class="tab-content">
    <!-- Customer -->
    <div class="tab-pane-custom" id="settle_cust">
      <div class="table-responsive">
        <table class="table table-sm table-bordered">
          <thead class="table-light">
            <tr><th>Party</th><th>Date</th><th>Invoice #</th><th class="text-end">Amount</th></tr>
          </thead>
          <tbody>
            {% for r in cust_settlements %}
            <tr>
              <td>{{ r.party }}</td><td>{{ r.date }}</td><td>{{ r.inv }}</td>
              <td class="text-end">{{ r.amount|floatformat:2 }}</td>
            </tr>
            {% empty %}
            <tr><td colspan="4" class="text-center text-muted">No records</td></tr>
            {% endfor %}
          </tbody>
          <tfoot>
            <tr class="section-footer">
              <td colspan="3" class="text-end">Total Customer Settlements</td>
              <td class="text-end">{{ cust_settle_total|floatformat:2 }}</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
    <!-- Vendor -->
    <div class="tab-pane-custom d-none" id="settle_vend">
      <div class="table-responsive">
        <table class="table table-sm table-bordered">
          <thead class="table-light">
            <tr><th>Party</th><th>Date</th><th>Invoice #</th><th class="text-end">Amount</th></tr>
          </thead>
          <tbody>
            {% for r in vend_settlements %}
            <tr>
              <td>{{ r.party }}</td><td>{{ r.date }}</td><td>{{ r.inv }}</td>
              <td class="text-end">{{ r.amount|floatformat:2 }}</td>
            </tr>
            {% empty %}
            <tr><td colspan="4" class="text-center text-muted">No records</td></tr>
            {% endfor %}
          </tbody>
          <tfoot>
            <tr class="section-footer">
              <td colspan="3" class="text-end">Total Vendor Settlements</td>
              <td class="text-end">{{ vend_settle_total|floatformat:2 }}</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>
</div>

{# ═══════════════════════════════════════════════════════════════════ #}
{# TAB: ADJUSTMENT                                                    #}
{# ═══════════════════════════════════════════════════════════════════ #}
<div class="tab-pane-custom d-none" id="tab_adj">
  <h6 class="mt-2 mb-3">Stock Adjustments</h6>
  <div class="table-responsive">
    <table class="table table-sm table-bordered">
      <thead class="table-light">
        <tr>
          <th>Adj #</th><th>Date</th><th>Product</th>
          <th class="text-end">Qty</th><th class="text-end">Price</th>
          <th class="text-end">Value</th><th>Remarks</th>
        </tr>
      </thead>
      <tbody>
        {% for r in adjustment_rows %}
        <tr>
          <td>{{ r.adj_no }}</td><td>{{ r.date }}</td><td>{{ r.product }}</td>
          <td class="text-end">{{ r.qty }}</td><td class="text-end">{{ r.price|floatformat:2 }}</td>
          <td class="text-end">{{ r.value|floatformat:2 }}</td><td>{{ r.remarks }}</td>
        </tr>
        {% empty %}
        <tr><td colspan="7" class="text-center text-muted">No adjustments</td></tr>
        {% endfor %}
      </tbody>
      <tfoot>
        <tr class="section-footer">
          <td colspan="5" class="text-end">Total Adjustment Value</td>
          <td class="text-end">{{ adj_total|floatformat:2 }}</td>
          <td></td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

</div>{# /tab-content #}

{# ═══════════════════════════════════════════════════════════════════ #}
{# GRAND SUMMARY                                                      #}
{# ═══════════════════════════════════════════════════════════════════ #}
<div class="grand-box mt-4 mb-4">
  <h5 class="mb-3 text-center">Grand Summary</h5>
  <table class="table table-sm table-bordered mb-3">
    <tbody>
      <tr>
        <td>Sale Profit</td>
        <td class="text-end positive fw-bold">+ {{ grand.sale_profit|floatformat:2 }}</td>
      </tr>
      <tr>
        <td>Vendor Settlements</td>
        <td class="text-end positive fw-bold">+ {{ grand.vend_settle|floatformat:2 }}</td>
      </tr>
      <tr>
        <td>Return Profit</td>
        <td class="text-end negative fw-bold">− {{ grand.return_profit|floatformat:2 }}</td>
      </tr>
      <tr>
        <td>Expenses</td>
        <td class="text-end negative fw-bold">− {{ grand.expense|floatformat:2 }}</td>
      </tr>
      <tr>
        <td>Salaries</td>
        <td class="text-end negative fw-bold">− {{ grand.salary|floatformat:2 }}</td>
      </tr>
      <tr>
        <td>Customer Settlements</td>
        <td class="text-end negative fw-bold">− {{ grand.cust_settle|floatformat:2 }}</td>
      </tr>
      <tr id="adj_row" class="d-none">
        <td>
          Stock Adjustment
        </td>
        <td class="text-end fw-bold" id="adj_val">{{ grand.adj|floatformat:2 }}</td>
      </tr>
    </tbody>
    <tfoot>
      <tr class="table-primary">
        <td class="fw-bold fs-5">
          Grand Profit
          <div class="form-check form-switch d-inline-block ms-3">
            <input class="form-check-input" type="checkbox" id="adjToggle">
            <label class="form-check-label small" for="adjToggle">Include Stock Adjustment</label>
          </div>
        </td>
        <td class="text-end fw-bold fs-5" id="grandProfitVal">
          {{ grand.grand_without_adj|floatformat:2 }}
        </td>
      </tr>
    </tfoot>
  </table>
</div>

</div>
{% endblock %}

{% block javascripts %}
<script>
document.addEventListener('DOMContentLoaded', function(){

  // ── MAIN TAB switching (no Bootstrap dependency) ──
  var mainLinks = document.querySelectorAll('.main-tab-link');
  var mainPanes = document.querySelectorAll('#mainTabContent > .tab-pane-custom');

  mainLinks.forEach(function(link){
    link.addEventListener('click', function(e){
      e.preventDefault();
      // Deactivate all
      mainLinks.forEach(function(l){ l.classList.remove('active'); });
      mainPanes.forEach(function(p){ p.classList.add('d-none'); });
      // Activate clicked
      link.classList.add('active');
      var target = document.querySelector(link.getAttribute('href'));
      if(target) target.classList.remove('d-none');
    });
  });

  // ── SUB-TAB switching (Sale, Return, Settlements) ──
  document.querySelectorAll('.sub-tab-link').forEach(function(link){
    link.addEventListener('click', function(e){
      e.preventDefault();
      // Find sibling links in same nav
      var nav = link.closest('ul');
      nav.querySelectorAll('.sub-tab-link').forEach(function(l){ l.classList.remove('active'); });
      link.classList.add('active');
      // Find sibling panes in same tab-content
      var tabContent = nav.nextElementSibling;
      tabContent.querySelectorAll('.tab-pane-custom').forEach(function(p){ p.classList.add('d-none'); });
      var target = document.querySelector(link.getAttribute('href'));
      if(target) target.classList.remove('d-none');
    });
  });

  // ── Item-wise / Bill-wise toggle ──
  document.querySelectorAll('.toggle-btn').forEach(function(group){
    var target = group.dataset.toggleTarget;
    var btns = group.querySelectorAll('button');
    btns.forEach(function(btn){
      btn.addEventListener('click', function(){
        btns.forEach(function(b){ b.classList.remove('active'); });
        btn.classList.add('active');
        var mode = btn.dataset.mode;
        var itemsDiv = document.getElementById(target + '_items');
        var billsDiv = document.getElementById(target + '_bills');
        if(mode === 'items'){
          itemsDiv.classList.remove('d-none');
          billsDiv.classList.add('d-none');
        } else {
          itemsDiv.classList.add('d-none');
          billsDiv.classList.remove('d-none');
        }
      });
    });
  });

  // ── Adjustment On/Off toggle ──
  var adjToggle   = document.getElementById('adjToggle');
  var adjRow      = document.getElementById('adj_row');
  var grandVal    = document.getElementById('grandProfitVal');
  var withoutAdj  = {{ grand.grand_without_adj }};
  var withAdj     = {{ grand.grand_with_adj }};

  adjToggle.addEventListener('change', function(){
    if(this.checked){
      adjRow.classList.remove('d-none');
      grandVal.textContent = withAdj.toFixed(2);
    } else {
      adjRow.classList.add('d-none');
      grandVal.textContent = withoutAdj.toFixed(2);
    }
  });
});
</script>
{% endblock %}