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

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h1>Ad-Hoc Drill-Down</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-2">

  <label class="mr-2">Date To:</label>
  <input type="date" name="date_to" value="{{ date_to }}" class="form-control mr-3">

  <select id="filter_products"
          name="product_ids"
          multiple
          class="form-control mr-3"
          style="width:200px">
    {% for prod in selected_products %}
      <option value="{{ prod.id }}" selected>{{ prod.text }}</option>
    {% endfor %}
  </select>

  <select id="filter_depts"
          name="department_ids"
          multiple
          class="form-control mr-3"
          style="width:200px">
    {% for dept in selected_departments %}
      <option value="{{ dept.id }}" selected>{{ dept.text }}</option>
    {% endfor %}
  </select>

  <button type="submit" class="btn btn-primary mr-2">Filter</button>
  <a href="?{% if date_from %}date_from={{date_from}}&{% endif %}
           {% if date_to   %}date_to={{date_to}}&{% endif %}
           {% for p in selected_products %}product_ids={{p.id}}&{% endfor %}
           {% for d in selected_departments %}department_ids={{d.id}}&{% endfor %}
           export=excel"
     class="btn btn-success mr-2">Export Excel</a>
  <a href="?{% if date_from %}date_from={{date_from}}&{% endif %}
           {% if date_to   %}date_to={{date_to}}&{% endif %}
           {% for p in selected_products %}product_ids={{p.id}}&{% endfor %}
           {% for d in selected_departments %}department_ids={{d.id}}&{% endfor %}
           export=pdf"
     class="btn btn-danger">Export PDF</a>
</form>

<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>Date</th>
      <th>Department</th>
      <th>Code</th>
      <th>Name</th>
      <th class="text-right">Qty</th>
      <th class="text-right">Unit Cost</th>
      <th class="text-right">Line Cost</th>
    </tr>
  </thead>
  <tbody>
    {% for date, dept, code, name, qty, uc, lc in report_rows %}
    <tr>
      <td>{{ date }}</td>
      <td>{{ dept }}</td>
      <td>{{ code }}</td>
      <td>{{ name }}</td>
      <td class="text-right">{{ qty|intcomma }}</td>
      <td class="text-right">{{ uc|floatformat:2|intcomma }}</td>
      <td class="text-right">{{ lc|floatformat:2|intcomma }}</td>
    </tr>
    {% empty %}
    <tr><td colspan="7" class="text-center">No records found.</td></tr>
    {% endfor %}
  </tbody>
  <tfoot>
    <tr>
      <th colspan="4">Totals</th>
      <th class="text-right">{{ totals.4|intcomma }}</th>
      <th></th>
      <th class="text-right">{{ totals.6|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">Ad-Hoc Drill-Down Help</h5>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <p>
          Filter by date range, products, and departments to see every
          production line item (raw & finished) including quantities and costs.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary"
                data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

{% block javascripts %}

  <script>
    $(function(){
      $('#filter_products').select2({
        placeholder: 'Products…',
        multiple: true,
        width: 'resolve',
        ajax: {
          url: '{% url "manufacturing:ajax_search_product_by_name" %}',
          dataType: 'json',
          delay: 250,
          data: params => ({ q: params.term }),
          processResults: data => ({ results: data.results }),
          cache: true
        },
        minimumInputLength: 1
      });
      $('#filter_depts').select2({
        placeholder: 'Departments…',
        multiple: true,
        width: 'resolve',
        ajax: {
          url: '{% url "manufacturing:ajax_search_department" %}',
          dataType: 'json',
          delay: 250,
          data: params => ({ q: params.term }),
          processResults: data => ({ results: data.results }),
          cache: true
        },
        minimumInputLength: 1
      });
    });
  </script>
{% endblock %}
{% endblock %}