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

{% block title %}Best Selling Items{% 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;">Best Selling Items</h5>
          <div class="text-muted" style="font-weight:700;font-size:.85rem;">
            Top {{ limit }} • Sort: {{ sort|title }} • Range: {{ filters.from }} → {{ filters.to }}
          </div>
        </div>

        <div class="d-flex flex-wrap align-items-center" style="gap:.4rem;">
          <a class="btn btn-success btn-sm" href="{% url 'reports:best_selling_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:best_selling_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;">Sort</label>
          <select name="sort" class="custom-select custom-select-sm">
            <option value="amount" {% if sort == "amount" %}selected{% endif %}>Amount Wise</option>
            <option value="qty" {% if sort == "qty" %}selected{% endif %}>Qty Wise</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>
          </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:best_selling_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;">
          Total Qty: <span class="text-dark">{{ totals.qty|floatformat:2 }}</span>
          &nbsp; • &nbsp;
          Total Amount: <span class="text-dark">{{ totals.amount|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 style="width:80px;">Prod ID</th>
              <th style="width:130px;">Code</th>
              <th>Name</th>
              <th style="width:160px;">Company</th>
              <th style="width:160px;">Category</th>
              <th class="text-right" style="width:100px;">Qty</th>
              <th class="text-right" style="width:120px;">Amount</th>
              <th class="text-right" style="width:110px;">Avg</th>
            </tr>
          </thead>
          <tbody>
            {% for it in items %}
              <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ it.prod_id }}</td>
                <td>{{ it.product_code }}</td>
                <td style="font-weight:800;">{{ it.name }}</td>
                <td>{{ it.company_name }}</td>
                <td>{{ it.category_name }}</td>
                <td class="text-right">{{ it.qty|floatformat:2 }}</td>
                <td class="text-right">{{ it.amount|floatformat:2 }}</td>
                <td class="text-right">{{ it.avg|floatformat:2 }}</td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="9" class="text-center text-muted py-4" style="font-weight:900;">
                  No data found for selected filters.
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

    </div>
  </div>

</div>
{% endblock %}