{% extends "pos/base.html" %}
{% block heading %}Stock History{% if product %} – {{ product.name }}{% endif %}{% endblock heading %}

{% block content %}

<div class="mb-3">
  <label class="mr-2 font-weight-bold">Product:</label>
  <select id="product-search" class="form-control" style="max-width: 420px; display:inline-block;">
    <option></option>
    {% if product %}
      <option value="{{ product.prod_id }}" selected>{{ product.name }} ({{ product.product_code }})</option>
    {% endif %}
  </select>
</div>

{% if product %}
<div class="row">
  <!-- LEFT: History Table -->
  <div class="col-lg-9">

    <form method="get" class="form-inline mb-3">
      <label class="mr-2">Warehouse:</label>
      <select name="warehouse" class="form-control mr-3">
        <option value="">All</option>
        {% for w in warehouses %}
        <option value="{{ w }}" {% if w == selected_warehouse %}selected{% endif %}>{{ w }}</option>
        {% endfor %}
      </select>

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

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

      <button class="btn btn-primary">Search</button>
    </form>

    <div class="mb-3">
      <a href="{% url 'reports:stock_history_export_excel' product.prod_id %}?{{ query_string }}" class="btn btn-success">
        Export Excel
      </a>
      <a href="{% url 'reports:stock_history_export_pdf' product.prod_id %}?{{ query_string }}" class="btn btn-danger">
        Export PDF
      </a>
    </div>

    <div class="table-responsive">
      <table class="table table-bordered table-sm">
        <thead class="thead-light">
          <tr>
            <th>Bill No</th>
            <th>Warehouse</th>
            <th>Description</th>
            <th>Category</th>
            <th class="text-right">Prev</th>
            <th class="text-right">Changed</th>
            <th class="text-right">Rate</th>
            <th class="text-right">New</th>
            <th>Date</th>
            <th>Time</th>
          </tr>
        </thead>
        <tbody>
          {% for r in rows %}
          <tr>
            <td>{{ r.bill_no }}</td>
            <td>{{ r.warehouse_name }}</td>
            <td>{{ r.description }}</td>
            <td>{{ r.cat_label }}</td>
            <td class="text-right">{{ r.previous_stock_disp }}</td>
            <td class="text-right">{{ r.changed_stock_disp }}</td>
            <td class="text-right">{{ r.p_rates|floatformat:2 }}</td>
            <td class="text-right">{{ r.new_stock_disp }}</td>
            <td>{{ r.date }}</td>
            <td>{{ r.time }}</td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="11" class="text-center text-muted">No stock history in selected range.</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

  </div>

  <!-- RIGHT: Summary -->
  <div class="col-lg-3">
    <div class="card">
      <div class="card-header font-weight-bold">
        Summary{% if selected_warehouse %} <small class="text-muted">({{ selected_warehouse }})</small>{% endif %}
      </div>
      <div class="card-body p-2">
        <table class="table table-sm mb-0">
          <tbody>
            <tr>
              <th>Opening Stock</th>
              <td class="text-right font-weight-bold">{{ opening_stock }}</td>
            </tr>

            {% for x in category_summary %}
            <tr>
              <td>{{ x.key }}</td>
              <td class="text-right">{{ x.qty }}</td>
            </tr>
            {% endfor %}

            <tr>
              <th>Net Change</th>
              <td class="text-right font-weight-bold">{{ net_change }}</td>
            </tr>

            <tr class="table-active">
              <th>Closing Stock</th>
              <td class="text-right font-weight-bold">{{ closing_stock }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

</div>
{% else %}
<p class="text-muted">Upar product search karke shuru karein.</p>
{% endif %}

<script>
$(document).ready(function () {
  var stockHistoryBaseUrl = "{% url 'reports:stock_history' 999999999 %}".replace('999999999/', '');
  var productSearchUrl = "{% url 'reports:stock_history_product_search' %}";

  $('#product-search').select2({
    placeholder: 'Product ka naam likhein...',
    minimumInputLength: 1,
    ajax: {
      url: productSearchUrl,
      dataType: 'json',
      delay: 250,
      data: function (params) {
        return { term: params.term };
      },
      processResults: function (data) {
        return data;
      }
    }
  });

  $('#product-search').on('select2:select', function (e) {
    var prodId = e.params.data.id;
    window.location.href = stockHistoryBaseUrl + prodId + '/' + window.location.search;
  });
});
</script>

{% endblock %}