{% extends "base.html" %}
{% block page_heading %}Product Management{% endblock %}
{% block content %}
<div class="d-flex flex-wrap gap-2 mb-3 justify-content-between align-items-center">
  <form class="d-flex gap-2 flex-wrap" method="GET">
    <input type="search" name="q" class="form-control" placeholder="Search products..." value="{{ search }}" style="max-width:220px">
    <select name="category" class="form-select" style="max-width:160px">
      <option value="">All Categories</option>
      {% for c in categories %}
      <option value="{{ c.name }}" {{ 'selected' if cat_filter == c.name else '' }}>{{ c.name }}</option>
      {% endfor %}
    </select>
    <button type="submit" class="btn btn-primary btn-sm">Search</button>
  </form>
  <div class="d-flex gap-2">
    <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#addProductModal">
      <i class="bi bi-plus-lg"></i> Add Product
    </button>
    {% if current_user.is_admin() %}
    <button class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#importModal">
      <i class="bi bi-file-earmark-excel"></i> Import Excel
    </button>
    {% endif %}
  </div>
</div>

<div class="card-panel">
  <div class="table-responsive">
    <table class="data-table">
      <thead>
        <tr>
          <th>Product</th><th>Category</th><th>Price</th><th>Stock</th><th>Barcode</th><th>GST%</th><th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for p in products %}
        <tr>
          <td>{{ p.product_name }}</td>
          <td>{{ p.category }}</td>
          <td>{{ p.price|currency }}</td>
          <td>
            {% if p.stock <= 10 %}
            <span class="badge-stock-low">{{ p.stock }}</span>
            {% else %}
            <span class="badge-stock-ok">{{ p.stock }}</span>
            {% endif %}
          </td>
          <td>
            {% if p.barcode %}
            <a href="{{ url_for('api_barcode', pid=p.id) }}" target="_blank" title="View barcode">{{ p.barcode }}</a>
            {% else %}—{% endif %}
          </td>
          <td>{{ p.gst_rate or 18 }}%</td>
          <td>
            <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editModal{{ p.id }}">Edit</button>
            {% if current_user.is_admin() %}
            <form method="POST" action="{{ url_for('delete_product', pid=p.id) }}" class="d-inline" onsubmit="return confirm('Delete this product?')">
              <button class="btn btn-sm btn-outline-danger">Delete</button>
            </form>
            {% endif %}
          </td>
        </tr>

        <div class="modal fade" id="editModal{{ p.id }}" tabindex="-1">
          <div class="modal-dialog">
            <form method="POST" action="{{ url_for('edit_product', pid=p.id) }}" class="modal-content">
              <div class="modal-header"><h5 class="modal-title">Edit Product</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
              <div class="modal-body">
                <div class="mb-2"><label class="form-label">Product Name</label><input name="product_name" class="form-control" value="{{ p.product_name }}" required></div>
                <div class="mb-2"><label class="form-label">Category</label><input name="category" class="form-control" value="{{ p.category }}" required></div>
                <div class="row">
                  <div class="col-6 mb-2"><label class="form-label">Price</label><input name="price" type="number" step="0.01" class="form-control" value="{{ p.price }}" required></div>
                  <div class="col-6 mb-2"><label class="form-label">Stock</label><input name="stock" type="number" class="form-control" value="{{ p.stock }}" required></div>
                </div>
                <div class="row">
                  <div class="col-6 mb-2"><label class="form-label">Barcode</label><input name="barcode" class="form-control" value="{{ p.barcode or '' }}"></div>
                  <div class="col-6 mb-2"><label class="form-label">GST %</label><input name="gst_rate" type="number" step="0.01" class="form-control" value="{{ p.gst_rate or 18 }}"></div>
                </div>
              </div>
              <div class="modal-footer"><button type="submit" class="btn btn-primary">Save</button></div>
            </form>
          </div>
        </div>
        {% else %}
        <tr><td colspan="7" class="text-center text-muted">No products found.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<div class="card-panel">
  <h5>Category Management</h5>
  <form method="POST" action="{{ url_for('add_category') }}" class="d-flex gap-2">
    <input name="name" class="form-control" placeholder="New category name" style="max-width:240px" required>
    <button class="btn btn-secondary btn-sm">Add Category</button>
  </form>
  <div class="mt-2 d-flex flex-wrap gap-1">
    {% for c in categories %}
    <span class="badge bg-secondary">{{ c.name }}</span>
    {% endfor %}
  </div>
</div>

<div class="modal fade" id="addProductModal" tabindex="-1">
  <div class="modal-dialog">
    <form method="POST" action="{{ url_for('add_product') }}" class="modal-content">
      <div class="modal-header"><h5 class="modal-title">Add Product</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
      <div class="modal-body">
        <div class="mb-2"><label class="form-label">Product Name</label><input name="product_name" class="form-control" required></div>
        <div class="mb-2"><label class="form-label">Category</label>
          <input name="category" class="form-control" list="catList" required>
          <datalist id="catList">{% for c in categories %}<option value="{{ c.name }}">{% endfor %}</datalist>
        </div>
        <div class="row">
          <div class="col-6 mb-2"><label class="form-label">Price (₹)</label><input name="price" type="number" step="0.01" class="form-control" required></div>
          <div class="col-6 mb-2"><label class="form-label">Stock</label><input name="stock" type="number" class="form-control" value="0" required></div>
        </div>
        <div class="row">
          <div class="col-6 mb-2"><label class="form-label">Barcode</label><input name="barcode" class="form-control"></div>
          <div class="col-6 mb-2"><label class="form-label">GST %</label><input name="gst_rate" type="number" class="form-control" value="18"></div>
        </div>
      </div>
      <div class="modal-footer"><button type="submit" class="btn btn-primary">Add Product</button></div>
    </form>
  </div>
</div>

<div class="modal fade" id="importModal" tabindex="-1">
  <div class="modal-dialog">
    <form method="POST" action="{{ url_for('import_products') }}" enctype="multipart/form-data" class="modal-content">
      <div class="modal-header"><h5 class="modal-title">Import Products from Excel</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
      <div class="modal-body">
        <p class="small text-muted">Required columns: <strong>Product Name, Category, Price, Stock Quantity, Barcode</strong></p>
        <input type="file" name="excel_file" class="form-control" accept=".xlsx,.xls" required>
      </div>
      <div class="modal-footer"><button type="submit" class="btn btn-primary">Upload &amp; Import</button></div>
    </form>
  </div>
</div>
{% endblock %}