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

{% block title %}Finished Goods Production (Multi-Tenant){% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h1>Finished Goods Production</h1>
</div>

<form method="get" class="mb-4">
  <div class="row gx-3">

    <!-- Branches selector -->
    <div class="col-md-4">
      <div class="card p-3" style="max-height:300px; overflow-y:auto">
        <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-cb"
                 type="checkbox" name="branches"
                 value="{{ br.id }}"
                 id="br_{{ br.id }}"
                 {% if br.id|stringformat:"s" in selected_branches %}checked{% endif %}>
          <label class="form-check-label" for="br_{{ br.id }}">
            {{ br.label }}
          </label>
        </div>
        {% endfor %}
      </div>
    </div>

    <!-- Date filters & buttons -->
    <div class="col-md-8">
      <div class="form-inline mb-2">
        <label class="me-2">Date From:</label>
        <input type="date" name="date_from" class="form-control me-3"
               value="{{ date_from }}">
        <label class="me-2">Date To:</label>
        <input type="date" name="date_to" class="form-control me-3"
               value="{{ date_to }}">
      </div>
      <div class="mb-2">
        <button type="submit" class="btn btn-primary me-2">Filter</button>
        <a href="?date_from={{date_from}}&date_to={{date_to}}
{% for b in selected_branches %}&branches={{b}}{% endfor %}&export=excel"
           class="btn btn-success me-2">Export Excel</a>
        <a href="?date_from={{date_from}}&date_to={{date_to}}
{% for b in selected_branches %}&branches={{b}}{% endfor %}&export=pdf"
           class="btn btn-danger">Export PDF</a>
      </div>
    </div>

  </div>
</form>

{% for t in tenants %}
  <h4 class="mt-4">{{ t.label }}</h4>
  <table class="table table-sm table-striped table-bordered">
    <thead>
      <tr>
        <th>Name</th>
        <th class="text-end">Total Qty</th>
        <th class="text-end">Total Cost</th>
      </tr>
    </thead>
    <tbody>
      {% for code,name,qty,cost in t.rows %}
      <tr>
        <td>{{ name }}</td>
        <td class="text-end">{{ qty|intcomma }}</td>
        <td class="text-end">{{ cost|floatformat:2|intcomma }}</td>
      </tr>
      {% empty %}
      <tr><td colspan="3" class="text-center">No data for this branch.</td></tr>
      {% endfor %}
    </tbody>
    <tfoot>
      <tr class="fw-bold">
        <td colspan="1">Branch Totals</td>
        <td class="text-end">{{ t.tot_qty|intcomma }}</td>
        <td class="text-end">{{ t.tot_cost|floatformat:2|intcomma }}</td>
      </tr>
    </tfoot>
  </table>
{% endfor %}

<h3 class="mt-5">Overall Totals</h3>
<table class="table table-sm table-bordered w-auto">
  <thead class="table-light">
    <tr>
      <th class="text-end">Total Qty</th>
      <th class="text-end">Total Cost</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="text-end">{{ overall.qty|intcomma }}</td>
      <td class="text-end">{{ overall.cost|floatformat:2|intcomma }}</td>
    </tr>
  </tbody>
</table>

{% endblock %}

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