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

{% block title %}Low Stock Report{% endblock %}

{% block content %}
<div class="container-fluid py-2">

  <div class="card mb-2" style="border-radius:14px;">
    <div class="card-body py-2">
      <div class="d-flex flex-wrap align-items-center justify-content-between" style="gap:.6rem;">
        <div>
          <h5 class="mb-0" style="font-weight:900;">Low Stock Report</h5>
          <div class="text-muted" style="font-weight:700;font-size:.85rem;">
            Required = Stock Limit − Present Stock • Required Cost = Required × Purchase Price
          </div>
        </div>

        <div class="d-flex flex-wrap align-items-center" style="gap:.4rem;">
          <a class="btn btn-success btn-sm" href="{% url 'reports:low_stock_report_excel' %}?{{ query_string }}">
            <i class="fas fa-file-excel mr-1"></i> Excel
          </a>
          <a class="btn btn-danger btn-sm" href="{% url 'reports:low_stock_report_pdf' %}?{{ query_string }}">
            <i class="fas fa-file-pdf mr-1"></i> PDF
          </a>
        </div>
      </div>

      <hr class="my-2">

      <form method="get" class="form-row align-items-end" style="gap:.4rem;">
        <div class="form-group mb-0">
          <label style="font-weight:800;font-size:.8rem;">From</label>
          <input type="date" name="from" class="form-control form-control-sm" value="{{ filters.from|date:'Y-m-d' }}">
        </div>

        <div class="form-group mb-0">
          <label style="font-weight:800;font-size:.8rem;">To</label>
          <input type="date" name="to" class="form-control form-control-sm" value="{{ filters.to|date:'Y-m-d' }}">
        </div>

        <div class="form-group mb-0">
          <label style="font-weight:800;font-size:.8rem;">Only Low</label>
          <select name="only_low" class="custom-select custom-select-sm">
            <option value="1" {% if filters.only_low == "1" %}selected{% endif %}>Yes</option>
            <option value="0" {% if filters.only_low == "0" %}selected{% endif %}>All (show required=0 too)</option>
          </select>
        </div>

        <div class="form-group mb-0">
          <label style="font-weight:800;font-size:.8rem;">Limit</label>
          <select name="limit" class="custom-select custom-select-sm">
            <option value="100" {% if limit == 100 %}selected{% endif %}>Top 100</option>
            <option value="200" {% if limit == 200 %}selected{% endif %}>Top 200</option>
            <option value="500" {% if limit == 500 %}selected{% endif %}>Top 500</option>
            <option value="1000" {% if limit == 1000 %}selected{% endif %}>Top 1000</option>
          </select>
        </div>

        <div class="form-group mb-0" style="min-width:220px;">
          <label style="font-weight:800;font-size:.8rem;">Company</label>
          <select name="company_id" class="custom-select custom-select-sm">
            <option value="0">All Companies</option>
            {% for c in companies %}
              <option value="{{ c.t_id }}" {% if filters.company_id == c.t_id %}selected{% endif %}>
                {{ c.name|default:"—" }}
              </option>
            {% endfor %}
          </select>
        </div>

        <div class="form-group mb-0" style="min-width:220px;">
          <label style="font-weight:800;font-size:.8rem;">Category</label>
          <select name="category_id" class="custom-select custom-select-sm">
            <option value="0">All Categories</option>
            {% for c in categories %}
              <option value="{{ c.t_id }}" {% if filters.category_id == c.t_id %}selected{% endif %}>
                {{ c.cat_name|default:"—" }}
              </option>
            {% endfor %}
          </select>
        </div>

        <div class="form-group mb-0">
          <button class="btn btn-primary btn-sm" type="submit" style="font-weight:900;border-radius:10px;">
            <i class="fas fa-filter mr-1"></i> Apply
          </button>
          <a class="btn btn-light btn-sm" href="{% url 'reports:low_stock_report' %}" style="font-weight:900;border-radius:10px;">
            Reset
          </a>
        </div>
      </form>
    </div>
  </div>

  <div class="card" style="border-radius:14px;">
    <div class="card-body p-0">
      <div class="d-flex justify-content-between px-3 py-2">
        <div class="text-muted" style="font-weight:800;">
          Low Items: <span class="text-dark">{{ totals.low_items }}</span>
          &nbsp; • &nbsp;
          Total Required Qty: <span class="text-dark">{{ totals.total_required_qty|floatformat:2 }}</span>
          &nbsp; • &nbsp;
          Total Required Cost: <span class="text-dark">{{ totals.total_required_cost|floatformat:2 }}</span>
        </div>
      </div>

      <div class="table-responsive">
        <table class="table table-sm mb-0">
          <thead class="thead-light">
            <tr>
              <th style="width:40px;">#</th>
              <th>Name</th>
              <th style="width:160px;">Company</th>
              <th style="width:160px;">Category</th>
              <th class="text-right" style="width:100px;">Limit</th>
              <th class="text-right" style="width:110px;">Stock</th>
              <th class="text-right" style="width:110px;">Required</th>
              <th class="text-right" style="width:110px;">P.Price</th>
              <th class="text-right" style="width:130px;">Req Cost</th>
              <th class="text-right" style="width:120px;">Sold Qty</th>
            </tr>
          </thead>
          <tbody>
            {% for it in items %}
              <tr {% if it.required_qty > 0 %}style="background:#FEFCE8;"{% endif %}>
                <td>{{ forloop.counter }}</td>
                <td style="font-weight:800;">{{ it.name }}</td>
                <td>{{ it.company_name }}</td>
                <td>{{ it.category_name }}</td>
                <td class="text-right">{{ it.stock_limit|floatformat:2 }}</td>
                <td class="text-right">{{ it.present_stock|floatformat:2 }}</td>
                <td class="text-right" style="font-weight:900;">{{ it.required_qty|floatformat:2 }}</td>
                <td class="text-right">{{ it.purchase_price|floatformat:2 }}</td>
                <td class="text-right" style="font-weight:900;">{{ it.required_cost|floatformat:2 }}</td>
                <td class="text-right">{{ it.sold_qty|floatformat:2 }}</td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="10" class="text-center text-muted py-4" style="font-weight:900;">
                  No items found.
                </td>
              </tr>
            {% endfor %}
          </tbody>
          {% if items %}
          <tfoot>
            <tr style="background:#EEF2FF;font-weight:900;">
              <td colspan="6" class="text-right">TOTAL</td>
              <td class="text-right">{{ totals.total_required_qty|floatformat:2 }}</td>
              <td></td>
              <td class="text-right">{{ totals.total_required_cost|floatformat:2 }}</td>
              <td class="text-right">{{ totals.total_sold_qty|floatformat:2 }}</td>
            </tr>
          </tfoot>
          {% endif %}
        </table>
      </div>

    </div>
  </div>

</div>
{% endblock %}