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

{% block title %}Products{% endblock %}

{% block content %}
<div style="display: flex; justify-content: space-between; align-items: center; margin: 30px 0 20px 0;">
    <h1>Products Management</h1>
    <a href="{{ url_for('add_product') }}" class="btn btn-primary">
        <i class="fas fa-plus"></i> Add New Product
    </a>
</div>

{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ category }}" style="padding: 12px 20px; border-radius: 5px; margin-bottom: 20px;">
    {{ message }}
</div>
{% endfor %}
{% endif %}
{% endwith %}

<div class="card">
    <div class="card-header">
        <i class="fas fa-box"></i> All Products ({{ products|length }})
    </div>
    <table class="data-table">
        <thead>
            <tr>
                <th>Image</th>
                <th>Name</th>
                <th>Category</th>
                <th>Subcategory</th>
                <th>Price</th>
                <th>Badge</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% if products|length == 0 %}
            <tr>
                <td colspan="8" style="text-align: center; padding: 40px; color: #999;">
                    <i class="fas fa-box-open" style="font-size: 48px; margin-bottom: 10px;"></i>
                    <p>No products yet. Click "Add New Product" to get started!</p>
                </td>
            </tr>
            {% else %}
            {% for product in products %}
            <tr>
                <td>
                    {% if product.primary_image %}
                    <img src="/{{ product.primary_image }}" alt="{{ product.name }}" class="product-img">
                    {% else %}
                    <div class="product-img"
                        style="background: #e0e0e0; display: flex; align-items: center; justify-content: center;">
                        <i class="fas fa-image" style="color: #999;"></i>
                    </div>
                    {% endif %}
                </td>
                <td><strong>{{ product.name }}</strong></td>
                <td>{{ product.category_name }}</td>
                <td>{{ product.subcategory_name }}</td>
                <td>₹{{ product.price_current }}</td>
                <td>
                    {% if product.badge %}
                    <span class="badge badge-success">{{ product.badge }}</span>
                    {% endif %}
                </td>
                <td>
                    {% if product.is_active %}
                    <span class="badge badge-success">Active</span>
                    {% else %}
                    <span class="badge badge-danger">Inactive</span>
                    {% endif %}
                </td>
                <td>
                    <a href="{{ url_for('edit_product', product_id=product.id) }}" class="btn btn-sm btn-primary"
                        title="Edit">
                        <i class="fas fa-edit"></i>
                    </a>
                    <form method="POST" action="{{ url_for('delete_product', product_id=product.id) }}"
                        style="display: inline;"
                        onsubmit="return confirm('Are you sure you want to delete this product?');">
                        <button type="submit" class="btn btn-sm btn-danger" title="Delete">
                            <i class="fas fa-trash"></i>
                        </button>
                    </form>
                </td>
            </tr>
            {% endfor %}
            {% endif %}
        </tbody>
    </table>
</div>

<style>
    .alert-success {
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }

    .alert-error {
        background: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }
</style>
{% endblock %}