{% extends 'base.html' %}
{% block title %}Products{% endblock %}

{% block content %}
<div class="flex justify-between items-center mb-6">
  <div>
    <h1 class="text-2xl font-bold">Products</h1>
    {% if low_stock_count %}
      <span class="badge badge-warning badge-sm">⚠ {{ low_stock_count }} low stock</span>
    {% endif %}
  </div>
  <a href="{% url 'inventory:export_products' %}" class="btn btn-outline btn-sm">
    ⬇ Export CSV
  </a>
  <a href="{% url 'inventory:product_create' %}" class="btn btn-primary btn-sm">➕ Add Product</a>
</div>
<!-- Search & Filter -->
<form method="get" class="flex flex-wrap gap-2 items-end mb-4">
  <div class="form-control">
    <input type="text" name="q" value="{{ query }}"
           placeholder="Search name or SKU..."
           class="input input-bordered input-sm w-64"/>
  </div>
  <div class="form-control">
    <select name="category" class="select select-bordered select-sm">
      <option value="">All Categories</option>
      {% for cat in categories %}
        <option value="{{ cat.pk }}" {% if current_category == cat.pk|stringformat:"s" %}selected{% endif %}>
          {{ cat.name }}
        </option>
      {% endfor %}
    </select>
  </div>
  <div class="form-control">
    <label class="label cursor-pointer gap-2">
      <input type="checkbox" name="low_stock" value="1"
             class="checkbox checkbox-sm checkbox-warning"
             {% if request.GET.low_stock %}checked{% endif %}/>
      <span class="label-text text-sm">Low stock only</span>
    </label>
  </div>
  <button class="btn btn-primary btn-sm">🔍 Search</button>
  <a href="{% url 'inventory:product_list' %}" class="btn btn-ghost btn-sm">Reset</a>
</form>
<div class="card bg-base-100 shadow">
  <div class="card-body p-0">
    <table class="table table-zebra">
      <thead>
        <tr>
          <th>Name</th>
          <th>SKU</th>
          <th>Category</th>
          <th>Stock</th>
          <th>Cost Price</th>
          <th>Selling Price</th>
          <th>Stock Value</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for product in products %}
        <tr class="{% if product.is_low_stock %}bg-warning/10{% endif %}">
          <td class="font-medium">
            {{ product.name }}
            {% if product.is_low_stock %}
              <span class="badge badge-warning badge-xs ml-1">Low</span>
            {% endif %}
          </td>
          <td class="font-mono text-xs text-base-content/50">{{ product.sku|default:"—" }}</td>
          <td>{{ product.category.name|default:"—" }}</td>
          <td>{{ product.stock_quantity }} {{ product.unit }}</td>
          <td>{{ business.currency }} {{ product.cost_price|floatformat:0 }}</td>
          <td>{{ business.currency }} {{ product.selling_price|floatformat:0 }}</td>
          <td>{{ business.currency }} {{ product.stock_value|floatformat:0 }}</td>
          <td class="flex gap-1">
            <a href="{% url 'inventory:product_detail' product.pk %}" class="btn btn-ghost btn-xs">View</a>
            <a href="{% url 'inventory:product_edit' product.pk %}" class="btn btn-ghost btn-xs">Edit</a>
            <a href="{% url 'inventory:stock_adjust' product.pk %}" class="btn btn-ghost btn-xs">Stock</a>
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="8" class="text-center text-base-content/40 py-10">
            No products yet. <a href="{% url 'inventory:product_create' %}" class="link link-primary">Add first product</a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% include 'partials/pagination.html' with page_obj=products %}
{% endblock %}