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

{% block title %}Business Worth Δ Report{% endblock %}

{% block stylesheets %}
  <style>
    .custom-date { display: none; }
    .branches-panel { max-height: 300px; overflow-y: auto; }
  </style>
{% endblock %}

{% block heading %}
  Δ from {{ from_date }} to {{ to_date }}
{% endblock %}

{% block content %}
<form method="get" class="mb-4">
  <div class="row gx-3">

    <!-- Branches selector -->
    <div class="col-md-4">
      <div class="card p-3 branches-panel">
        <div class="form-check mb-2">
          <input class="form-check-input" type="checkbox" id="select_all">
          <label class="form-check-label fw-bold" for="select_all">Select All Branches</label>
        </div>
        {% for br in branches %}
        <div class="form-check">
          <input class="form-check-input branch-checkbox"
                 type="checkbox" name="branches" value="{{ br.id }}"
                 id="branch_{{ br.id }}"
                 {% if br.id|stringformat:"s" in selected_branches %}checked{% endif %}>
          <label class="form-check-label" for="branch_{{ br.id }}">
            {{ br.label }}
          </label>
        </div>
        {% endfor %}
      </div>
    </div>

    <!-- Period & Date filters -->
    <div class="col-md-8">
      <div class="row g-2 align-items-end">

        <div class="col-auto">
          <label for="period">Period</label>
          <select id="period" name="period" class="form-select form-select-sm">
            <option value="1d" {% if period == '1d' %}selected{% endif %}>1 Day</option>
            <option value="1w" {% if period == '1w' %}selected{% endif %}>1 Week</option>
            <option value="1m" {% if period == '1m' %}selected{% endif %}>1 Month</option>
            <option value="custom" {% if period == 'custom' %}selected{% endif %}>Custom</option>
          </select>
        </div>

        <div class="col-auto custom-date">
          <label for="from_date">From</label>
          <input type="date" id="from_date" name="from_date"
                 value="{{ from_date }}" class="form-control form-control-sm">
        </div>

        <div class="col-auto custom-date">
          <label for="to_date">To</label>
          <input type="date" id="to_date" name="to_date"
                 value="{{ to_date }}" class="form-control form-control-sm">
        </div>

        <div class="col-auto">
          <button type="submit" class="btn btn-primary btn-sm">Run Report</button>
        </div>

      </div>
    </div>

  </div>
</form>

<table class="table table-sm table-bordered">
  <thead class="table-light">
    <tr>
      <th>Branch</th>
      <th class="text-end">Δ Assets</th>
      <th class="text-end">Δ Liabilities</th>
      <th class="text-end">Δ Growth</th>
    </tr>
  </thead>
  <tbody>
    {% for d in deltas %}
    <tr>
      <td>{{ d.tenant }}</td>
      <td class="text-end">{{ d.delta_assets|floatformat:2 }}</td>
      <td class="text-end">{{ d.delta_liabilities|floatformat:2 }}</td>
      <td class="text-end">{{ d.delta_growth|floatformat:2 }}</td>
    </tr>
    {% endfor %}
    <tr class="table-active fw-bold">
      <td>Total</td>
      <td class="text-end">{{ overall.assets|floatformat:2 }}</td>
      <td class="text-end">{{ overall.liabilities|floatformat:2 }}</td>
      <td class="text-end">{{ overall.growth|floatformat:2 }}</td>
    </tr>
  </tbody>
</table>

{% endblock %}

{% block javascripts %}
<script>
document.addEventListener('DOMContentLoaded', function(){
  // Period → show/hide custom dates
  const period    = document.getElementById('period');
  const customEls = document.querySelectorAll('.custom-date');
  function toggleDates(){
    customEls.forEach(el => {
      el.style.display = (period.value === 'custom') ? 'block' : 'none';
    });
  }
  period.addEventListener('change', toggleDates);
  toggleDates();

  // Select All branches
  const selectAll       = document.getElementById('select_all');
  const branchCheckboxes= document.querySelectorAll('.branch-checkbox');
  selectAll.addEventListener('change', () => {
    branchCheckboxes.forEach(cb => cb.checked = selectAll.checked);
  });
  branchCheckboxes.forEach(cb => {
    cb.addEventListener('change', () => {
      if (!cb.checked) selectAll.checked = false;
      else if ([...branchCheckboxes].every(c=>c.checked)) selectAll.checked = true;
    });
  });
  // initialize select_all checked state
  selectAll.checked = [...branchCheckboxes].every(c=>c.checked);
});
</script>
{% endblock %}