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

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h1>Production Run Summary</h1>
  <!-- Help button -->
  <button class="btn btn-outline-secondary btn-sm" data-toggle="modal" data-target="#helpModal">
    ?
  </button>
</div>

<!-- Date range filter + export buttons -->
<form method="get" class="form-inline mb-3">
  <label class="mr-2">Date From:</label>
  <input type="date" name="date_from" class="form-control mr-3"
         value="{{ date_from }}">
  <label class="mr-2">Date To:</label>
  <input type="date" name="date_to" class="form-control mr-3"
         value="{{ date_to }}">
  <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-striped table-bordered">
  <thead>
    <tr>
      <th>Date</th>
      <th>Invoice #</th>
      <th class="text-right">Finished Qty</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">Grand Total</th>
    </tr>
  </thead>
  <tbody>
    {% for r in report_rows %}
    <tr>
      <td>{{ r.date }}</td>
      <td>{{ r.invoice_no }}</td>
      <td class="text-right">{{ r.finished_qty|intcomma }}</td>
      <td class="text-right">{{ r.raw_cost|floatformat:2|intcomma }}</td>
      <td class="text-right">{{ r.labour|floatformat:2|intcomma }}</td>
      <td class="text-right">{{ r.fuel|floatformat:2|intcomma }}</td>
      <td class="text-right">{{ r.other|floatformat:2|intcomma }}</td>
      <td class="text-right font-weight-bold">
        {{ r.grand_total|floatformat:2|intcomma }}
      </td>
    </tr>
    {% empty %}
    <tr>
      <td colspan="8" class="text-center">No runs found.</td>
    </tr>
    {% endfor %}
  </tbody>
  <tfoot>
    <tr>
      <th colspan="2">Totals</th>
      <th class="text-right">{{ total_finished|intcomma }}</th>
      <th class="text-right">{{ total_raw|floatformat:2|intcomma }}</th>
      <th class="text-right">{{ total_labour|floatformat:2|intcomma }}</th>
      <th class="text-right">{{ total_fuel|floatformat:2|intcomma }}</th>
      <th class="text-right">{{ total_other|floatformat:2|intcomma }}</th>
      <th class="text-right">{{ total_grand|floatformat:2|intcomma }}</th>
    </tr>
  </tfoot>
</table>

<!-- Help Modal -->
<div class="modal fade" id="helpModal" tabindex="-1" role="dialog"
     aria-labelledby="helpModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="helpModalLabel">Production Run Summary Help</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>
          This report lists all production runs in the selected date range,
          showing finished-item totals, raw-material cost, labour, fuel, other
          overheads, and the grand total cost per run. Use the date filters
          above to restrict to a specific period, and click “Export Excel” or
          “Export PDF” to download the data.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary"
                data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}