{% extends 'dashboard/base.html' %}
{% load humanize %}
{% block title %}Products{% endblock %}
{% block page_title %}Products{% endblock %}

{% block extra_css %}
<style>
.product-thumb { width:46px;height:52px;border-radius:6px;overflow:hidden;background:var(--bg);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--muted); }
.product-thumb img { width:100%;height:100%;object-fit:cover; }

/* Toggle switch */
.toggle-sw { position:relative;display:inline-block;width:38px;height:21px;cursor:pointer; }
.toggle-sw input { display:none; }
.toggle-sw .sl { position:absolute;inset:0;background:#ddd;border-radius:21px;transition:background .2s; }
.toggle-sw .sl::before { content:'';position:absolute;left:2px;top:2px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s; }
.toggle-sw input:checked + .sl { background:var(--success); }
.toggle-sw input:checked + .sl::before { transform:translateX(17px); }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
  <div class="page-header-left">
    <div class="breadcrumb"><a href="{% url 'dashboard:home' %}">Dashboard</a><span class="breadcrumb-sep">/</span>Products</div>
    <div class="page-title">Products</div>
    <div class="page-subtitle">{{ products.paginator.count }} product{{ products.paginator.count|pluralize }} total</div>
  </div>
  <div class="page-actions">
    <a href="{% url 'dashboard:product_add' %}" class="btn btn-accent"><i class="fas fa-plus"></i> Add Product</a>
  </div>
</div>

<!-- Filters -->
<div class="card" style="margin-bottom:18px">
  <div class="card-body" style="padding:14px 18px">
    <form method="GET" class="filter-bar">
      <div class="search-input-wrap">
        <i class="fas fa-search"></i>
        <input type="text" name="q" value="{{ q }}" placeholder="Search products…" class="form-control">
      </div>
      <select name="category" class="form-control" style="max-width:160px" onchange="this.form.submit()">
        <option value="">All Categories</option>
        {% for cat in categories %}
        <option value="{{ cat.slug }}" {% if cat_filter == cat.slug %}selected{% endif %}>{{ cat.name }}</option>
        {% endfor %}
      </select>
      <select name="status" class="form-control" style="max-width:160px" onchange="this.form.submit()">
        <option value="">All Status</option>
        <option value="active"       {% if status_filter == 'active' %}selected{% endif %}>Active</option>
        <option value="inactive"     {% if status_filter == 'inactive' %}selected{% endif %}>Inactive</option>
        <option value="low_stock"    {% if status_filter == 'low_stock' %}selected{% endif %}>Low Stock</option>
        <option value="out_of_stock" {% if status_filter == 'out_of_stock' %}selected{% endif %}>Out of Stock</option>
      </select>
      <button type="submit" class="btn btn-primary">Filter</button>
      {% if q or cat_filter or status_filter %}
      <a href="{% url 'dashboard:product_list' %}" class="btn btn-outline">Clear</a>
      {% endif %}
    </form>
  </div>
</div>

<!-- Table -->
<div class="card">
  <div class="table-wrap">
    <table class="data-table">
      <thead><tr>
        <th>Product</th>
        <th>Category</th>
        <th>Price</th>
        <th>Stock</th>
        <th>Flags</th>
        <th style="text-align:center">Active</th>
        <th style="text-align:center">Actions</th>
      </tr></thead>
      <tbody>
        {% for product in products %}
        <tr>
          <td>
            <div style="display:flex;align-items:center;gap:12px">
              <div class="product-thumb">
                {% if product.image %}<img src="{{ product.image.url }}" alt="">
                {% else %}<i class="fas fa-tshirt" style="font-size:18px"></i>{% endif %}
              </div>
              <div>
                <div class="fw-600 truncate" style="max-width:180px">{{ product.name|truncatechars:32 }}</div>
                <div style="font-size:11px;color:var(--muted)">{{ product.slug }}</div>
              </div>
            </div>
          </td>
          <td><span class="badge badge-secondary">{{ product.category.name }}</span></td>
          <td>
            <div class="fw-600">₦{{ product.effective_price|floatformat:0|intcomma }}</div>
            {% if product.discount_price %}<div style="font-size:11px;color:var(--muted);text-decoration:line-through">₦{{ product.price|floatformat:0|intcomma }}</div>{% endif %}
          </td>
          <td>
            <span style="font-weight:600;color:{% if product.stock == 0 %}var(--danger){% elif product.stock <= 5 %}var(--warning){% else %}var(--success){% endif %}">
              {{ product.stock }}
            </span>
            {% if product.stock == 0 %}<div style="font-size:10px;color:var(--danger)">Out of stock</div>
            {% elif product.stock <= 5 %}<div style="font-size:10px;color:var(--warning)">Low stock</div>{% endif %}
          </td>
          <td>
            <div style="display:flex;gap:4px;flex-wrap:wrap">
              {% if product.is_new_arrival %}<span class="badge badge-info"    style="font-size:10px">New</span>{% endif %}
              {% if product.is_featured   %}<span class="badge badge-purple"   style="font-size:10px">Featured</span>{% endif %}
              {% if product.is_best_seller%}<span class="badge badge-warning"  style="font-size:10px">Bestseller</span>{% endif %}
            </div>
          </td>
          <td style="text-align:center">
            <label class="toggle-sw" title="Toggle active">
              <input type="checkbox" {% if product.is_active %}checked{% endif %} onchange="toggleProduct({{ product.pk }}, this)">
              <span class="sl"></span>
            </label>
          </td>
          <td>
            <div style="display:flex;gap:5px;justify-content:center">
              <a href="{{ product.get_absolute_url }}" target="_blank" class="btn btn-outline btn-sm btn-icon" title="View"><i class="fas fa-eye"></i></a>
              <a href="{% url 'dashboard:product_edit' product.pk %}" class="btn btn-outline btn-sm btn-icon" title="Edit"><i class="fas fa-edit"></i></a>
              <form action="{% url 'dashboard:product_delete' product.pk %}" method="POST" onsubmit="return confirm('Delete this product?')">
                {% csrf_token %}<button type="submit" class="btn btn-danger btn-sm btn-icon" title="Delete"><i class="fas fa-trash"></i></button>
              </form>
            </div>
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="7">
          <div class="empty-state">
            <i class="fas fa-box-open"></i>
            <h3>No products found</h3>
            <p>Try adjusting filters or <a href="{% url 'dashboard:product_add' %}" style="color:var(--accent)">add a new product</a>.</p>
          </div>
        </td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% if products.has_other_pages %}
  <div class="pagination" style="padding:16px">
    <span style="font-size:12px;color:var(--muted);align-self:center">{{ products.paginator.count }} products</span>
    {% if products.has_previous %}<a href="?page={{ products.previous_page_number }}&q={{ q }}&category={{ cat_filter }}&status={{ status_filter }}" class="page-btn"><i class="fas fa-chevron-left" style="font-size:11px"></i></a>{% endif %}
    {% for num in products.paginator.page_range %}
      {% if products.number == num %}<span class="page-btn active">{{ num }}</span>
      {% elif num >= products.number|add:'-2' and num <= products.number|add:'2' %}<a href="?page={{ num }}&q={{ q }}&category={{ cat_filter }}&status={{ status_filter }}" class="page-btn">{{ num }}</a>{% endif %}
    {% endfor %}
    {% if products.has_next %}<a href="?page={{ products.next_page_number }}&q={{ q }}&category={{ cat_filter }}&status={{ status_filter }}" class="page-btn"><i class="fas fa-chevron-right" style="font-size:11px"></i></a>{% endif %}
  </div>
  {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
function toggleProduct(pk, cb) {
  fetch(`/dashboard/products/${pk}/toggle/`, {
    method:'POST', headers:{'X-CSRFToken':'{{ csrf_token }}'}
  }).then(r=>r.json()).then(d=>{ if(!d.status) cb.checked = !cb.checked; })
    .catch(()=> cb.checked = !cb.checked);
}
</script>
{% endblock %}