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

{% block content %}
<div class="d-flex justify-content-between mb-3">
  <h1>Cost Breakdown</h1>
  <button class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#helpModal">?</button>
</div>
<form method="get" class="form-inline mb-3">
  <label class="mr-2">Date From:</label>
  <input type="date" name="date_from" value="{{ date_from }}" class="form-control mr-3">
  <label class="mr-2">Date To:</label>
  <input type="date" name="date_to" value="{{ date_to }}" class="form-control mr-3">
  <button type="submit" class="btn btn-primary mr-2">Filter</button>
  <a href="?date_from={{date_from}}&date_to={{date_to}}&export=excel" class="btn btn-success mr-2">Export Excel</a>
  <a href="?date_from={{date_from}}&date_to={{date_to}}&export=pdf" class="btn btn-danger">Export PDF</a>
</form>

<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>Code</th>
      <th>Name</th>
      <th class="text-right">Raw Cost</th>
      <th class="text-right">Labour</th>
      <th class="text-right">Fuel</th>
      <th class="text-right">Other</th>
      <th class="text-right">Total</th>
    </tr>
  </thead>
  <tbody>
    {% for code,name,raw,lab,fuel,oth,tot in report_rows %}
    <tr>
      <td>{{ code }}</td>
      <td>{{ name }}</td>
      <td class="text-right">{{ raw|floatformat:2|intcomma }}</td>
      <td class="text-right">{{ lab|floatformat:2|intcomma }}</td>
      <td class="text-right">{{ fuel|floatformat:2|intcomma }}</td>
      <td class="text-right">{{ oth|floatformat:2|intcomma }}</td>
      <td class="text-right">{{ tot|floatformat:2|intcomma }}</td>
    </tr>
    {% empty %}
    <tr><td colspan="7" class="text-center">No data.</td></tr>
    {% endfor %}
  </tbody>
  <tfoot>
    <tr>
      <th colspan="2">Totals</th>
      <th class="text-right">{{ totals.2|floatformat:2|intcomma }}</th>
      <th class="text-right">{{ totals.3|floatformat:2|intcomma }}</th>
      <th class="text-right">{{ totals.4|floatformat:2|intcomma }}</th>
      <th class="text-right">{{ totals.5|floatformat:2|intcomma }}</th>
      <th class="text-right">{{ totals.6|floatformat:2|intcomma }}</th>
    </tr>
  </tfoot>
</table>

<div class="modal fade" id="helpModal" tabindex="-1"><div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">Cost Breakdown Help</h5>
      <button type="button" class="close" data-dismiss="modal">&times;</button>
    </div>
    <div class="modal-body">
      <p>
        Allocates each run’s raw material, labour, fuel, and other costs
        proportionally to finished items, then aggregates per product over
        the selected date range.
      </p>
    </div>
  </div>
</div></div>
{% endblock %}