{% extends 'core/base.html' %}
{% load currency_filters %}
{% load static %}

{% block title %}Products - SwiftPOS{% endblock %}
{% block topbar_title %}Inventory - Products{% endblock %}

{% block extra_css %}
<style>
/* ── Product Card (list style) ───────────────────────── */
.pl-card {
    display: flex;
    align-items: stretch;
    background: var(--sp-surface, #fff);
    border: 1px solid var(--sp-border-subtle, #e8ecf0);
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
    position: relative;
}
.pl-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.09);
    transform: translateY(-2px);
    border-color: #c7d2fe;
}

/* Left image strip */
.pl-card-img {
    width: 90px;
    flex-shrink: 0;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.pl-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pl-card-img .pl-no-img {
    color: #cbd5e1;
    font-size: 2rem;
}

/* Status dot top-left of image */
.pl-status-dot {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.pl-status-dot.in-stock { background: #22c55e; }
.pl-status-dot.low-stock { background: #f59e0b; }
.pl-status-dot.out-stock { background: #ef4444; }
.pl-status-dot.hidden { background: #94a3b8; }

/* Body */
.pl-card-body {
    flex: 1;
    padding: 0.85rem 1rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pl-product-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--sp-text-main, #1e293b);
    text-decoration: none;
    display: block;
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.pl-product-name:hover { color: var(--sp-primary, #4f46e5); }

.pl-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    align-items: center;
    margin-bottom: 0.55rem;
}
.pl-meta-chip {
    font-size: 0.68rem;
    color: var(--sp-text-muted, #6b7280);
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-weight: 500;
}
.pl-meta-chip i { font-size: 0.6rem; opacity: 0.7; }

/* Stats row */
.pl-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.pl-stat {
    display: flex;
    flex-direction: column;
    min-width: 64px;
}
.pl-stat-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sp-text-muted, #9ca3af);
    font-weight: 700;
    line-height: 1;
}
.pl-stat-value {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--sp-text-main, #1e293b);
    line-height: 1.2;
}
.pl-stat-value.price { color: #059669; }
.pl-stat-value.stock-low { color: #d97706; }
.pl-stat-value.stock-out { color: #ef4444; }

/* Right action strip */
.pl-card-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem 0.6rem;
    border-left: 1px solid var(--sp-border-subtle, #f1f5f9);
    background: #fafbfc;
    flex-shrink: 0;
}
.pl-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    border: 1px solid var(--sp-border-subtle, #e2e8f0);
    background: #fff;
    color: var(--sp-text-muted, #6b7280);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}
.pl-action-btn:hover {
    background: var(--sp-primary, #4f46e5);
    border-color: var(--sp-primary, #4f46e5);
    color: #fff;
}
.pl-action-btn.edit:hover { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.pl-action-btn.danger:hover { background: #ef4444; border-color: #ef4444; color: #fff; }

/* The grid itself */
.pl-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
}
@media (max-width: 767.98px) {
    .pl-grid { grid-template-columns: 1fr; }
}
</style>
{% endblock %}

{% block content %}
{% with products=page_obj %}
<div class="container-fluid px-0">

    <!-- Toast Messages -->
    <div class="swiftpos-toast-container">
        {% if messages %}{% for message in messages %}
            <div class="swiftpos-toast swiftpos-toast-{{ message.tags }}">
                <div class="toast-icon">
                    {% if message.tags == 'success' %}<i class="fas fa-check-circle"></i>
                    {% elif message.tags == 'error' or message.tags == 'danger' %}<i class="fas fa-exclamation-circle"></i>
                    {% elif message.tags == 'warning' %}<i class="fas fa-exclamation-triangle"></i>
                    {% else %}<i class="fas fa-info-circle"></i>{% endif %}
                </div>
                <div class="toast-text">{{ message }}</div>
            </div>
        {% endfor %}{% endif %}
    </div>

    <!-- Page Header -->
    <div class="sp-page-header">
        <div>
            <h1 class="sp-page-title"><i class="fas fa-boxes"></i> Products</h1>
            <p class="sp-page-subtitle">{{ page_obj.paginator.count }} product{{ page_obj.paginator.count|pluralize }} total{% if show_hidden == 'true' %} · showing hidden{% endif %}</p>
        </div>
        <div class="sp-page-actions">
            {% if show_hidden == 'true' %}
                <a href="{% url 'inventory:product_list' %}" class="btn btn-outline-info btn-sm d-flex align-items-center gap-2">
                    <i class="fas fa-eye"></i> Show Active
                </a>
            {% else %}
                <a href="{% url 'inventory:product_list' %}?hidden=true" class="btn btn-outline-secondary btn-sm d-flex align-items-center gap-2">
                    <i class="fas fa-eye-slash"></i> View Hidden
                </a>
            {% endif %}
            <a href="{% url 'inventory:stock_adjustment_history' %}" class="btn btn-outline-secondary btn-sm d-flex align-items-center gap-2">
                <i class="fas fa-rotate"></i> Stock History
            </a>
            <a href="{% url 'inventory:add_product' %}" class="btn btn-primary btn-sm d-flex align-items-center gap-2">
                <i class="fas fa-plus"></i> Add Product
            </a>
        </div>
    </div>

    <!-- Filters -->
    <form method="get" class="sp-filter-bar mb-4">
        <div class="row g-3 align-items-end">
            <div class="col-md-4">
                <label class="form-label small fw-bold text-muted mb-1">Search</label>
                <div class="input-group">
                    <span class="input-group-text bg-white border-end-0"><i class="fas fa-search text-muted" style="font-size:.75rem;"></i></span>
                    <input type="text" name="q" value="{{ query }}" class="form-control border-start-0 ps-0"
                           placeholder="Name, SKU or barcode…">
                </div>
            </div>
            <div class="col-md-3">
                <label class="form-label small fw-bold text-muted mb-1">Category</label>
                <select name="category" class="form-select">
                    <option value="">All categories</option>
                    {% for cat in categories %}
                        <option value="{{ cat.id }}" {% if selected_category|stringformat:'s' == cat.id|stringformat:'s' %}selected{% endif %}>{{ cat.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label small fw-bold text-muted mb-1">Stock Status</label>
                <select name="stock_status" class="form-select">
                    <option value="">All</option>
                    <option value="in_stock" {% if selected_stock_status == 'in_stock' %}selected{% endif %}>In stock</option>
                    <option value="low_stock" {% if selected_stock_status == 'low_stock' %}selected{% endif %}>Low stock</option>
                    <option value="out_of_stock" {% if selected_stock_status == 'out_of_stock' %}selected{% endif %}>Out of stock</option>
                </select>
            </div>
            <div class="col-md-2 d-flex gap-2">
                <button type="submit" class="btn btn-primary btn-sm flex-fill">
                    <i class="fas fa-filter me-1"></i> Filter
                </button>
                <a href="{% url 'inventory:product_list' %}" class="btn btn-outline-secondary btn-sm">Reset</a>
            </div>
        </div>
    </form>

    <!-- Product Grid -->
    {% if products %}
    <div class="pl-grid mb-3">
        {% for product in products %}
        <div class="pl-card">

            <!-- Image -->
            <div class="pl-card-img">
                {% if product.stock_status == 'in_stock' and not product.is_hidden %}
                    <span class="pl-status-dot in-stock" title="In Stock"></span>
                {% elif product.stock_status == 'low_stock' %}
                    <span class="pl-status-dot low-stock" title="Low Stock"></span>
                {% elif product.is_hidden %}
                    <span class="pl-status-dot hidden" title="Hidden"></span>
                {% else %}
                    <span class="pl-status-dot out-stock" title="Out of Stock"></span>
                {% endif %}

                {% if product.image %}
                    <img src="{{ product.image.url }}" alt="{{ product.name }}">
                {% else %}
                    <i class="fas fa-box-open pl-no-img"></i>
                {% endif %}
            </div>

            <!-- Body -->
            <div class="pl-card-body">
                <div>
                    <a href="{% url 'inventory:product_detail' product.id %}" class="pl-product-name">{{ product.name }}</a>
                    <div class="pl-meta-row">
                        <span class="pl-meta-chip"><i class="fas fa-barcode"></i> {{ product.sku }}</span>
                        <span class="pl-meta-chip"><i class="fas fa-tag"></i> {{ product.category.name|default:"Uncategorized" }}</span>
                        {% if product.is_hidden %}
                        <span class="sp-badge sp-badge-neutral" style="font-size:.62rem;">Hidden</span>
                        {% endif %}
                    </div>
                </div>
                <div class="pl-stats-row">
                    <div class="pl-stat">
                        <span class="pl-stat-label">Price</span>
                        <span class="pl-stat-value price">{% money product.price %}</span>
                    </div>
                    <div style="width:1px;height:28px;background:var(--sp-border-subtle,#e8ecf0);"></div>
                    <div class="pl-stat">
                        <span class="pl-stat-label">Stock</span>
                        <span class="pl-stat-value {% if product.stock_status == 'low_stock' %}stock-low{% elif product.stock_status == 'out_of_stock' %}stock-out{% endif %}">
                            {{ product.stock_quantity }}
                        </span>
                    </div>
                    <div style="width:1px;height:28px;background:var(--sp-border-subtle,#e8ecf0);"></div>
                    <div class="pl-stat">
                        <span class="pl-stat-label">Status</span>
                        <span>
                            {% if product.is_hidden %}
                                <span class="sp-badge sp-badge-neutral" style="font-size:.62rem;">Hidden</span>
                            {% elif product.stock_status == 'in_stock' %}
                                <span class="sp-badge sp-badge-success" style="font-size:.62rem;">In Stock</span>
                            {% elif product.stock_status == 'low_stock' %}
                                <span class="sp-badge sp-badge-warning" style="font-size:.62rem;">Low Stock</span>
                            {% else %}
                                <span class="sp-badge sp-badge-danger" style="font-size:.62rem;">Out of Stock</span>
                            {% endif %}
                        </span>
                    </div>
                    {% if product.cost_price %}
                    <div style="width:1px;height:28px;background:var(--sp-border-subtle,#e8ecf0);"></div>
                    <div class="pl-stat">
                        <span class="pl-stat-label">Cost</span>
                        <span class="pl-stat-value" style="color:#64748b;font-size:.78rem;">{% money product.cost_price %}</span>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Actions -->
            <div class="pl-card-actions">
                <a href="{% url 'inventory:product_detail' product.id %}" class="pl-action-btn" title="View">
                    <i class="fas fa-eye"></i>
                </a>
                <a href="{% url 'inventory:edit_product' product.id %}" class="pl-action-btn edit" title="Edit">
                    <i class="fas fa-pen"></i>
                </a>
                <form method="POST" action="{% url 'inventory:toggle_product_visibility' product.id %}" style="margin:0;">
                    {% csrf_token %}
                    <button type="submit" class="pl-action-btn danger"
                            title="{% if product.is_hidden %}Unhide{% else %}Hide{% endif %}">
                        <i class="fas {% if product.is_hidden %}fa-eye{% else %}fa-eye-slash{% endif %}"></i>
                    </button>
                </form>
            </div>

        </div>
        {% endfor %}
    </div>

    {% else %}
    <!-- Empty state -->
    <div class="card">
        <div class="sp-empty-state py-5">
            <div class="sp-empty-state-icon"><i class="fas fa-boxes"></i></div>
            <div class="sp-empty-state-title">No products found</div>
            <p class="sp-empty-state-text">Try adjusting your filters or add your first product.</p>
            <a href="{% url 'inventory:add_product' %}" class="btn btn-primary btn-sm mt-2">
                <i class="fas fa-plus me-1"></i> Add Product
            </a>
        </div>
    </div>
    {% endif %}

    <!-- Pagination -->
    {% if products.has_other_pages %}
    <div class="d-flex justify-content-between align-items-center mt-2 small text-muted">
        <span>Page {{ products.number }} of {{ products.paginator.num_pages }}</span>
        <nav>
            <ul class="pagination pagination-sm mb-0">
                {% if products.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ products.previous_page_number }}&q={{ query }}&category={{ selected_category }}&stock_status={{ selected_stock_status }}">Prev</a>
                </li>
                {% endif %}
                {% for num in products.paginator.page_range %}
                    {% if num == products.number %}
                        <li class="page-item active"><span class="page-link">{{ num }}</span></li>
                    {% elif num > products.number|add:'-3' and num < products.number|add:'3' %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ num }}&q={{ query }}&category={{ selected_category }}&stock_status={{ selected_stock_status }}">{{ num }}</a>
                        </li>
                    {% endif %}
                {% endfor %}
                {% if products.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ products.next_page_number }}&q={{ query }}&category={{ selected_category }}&stock_status={{ selected_stock_status }}">Next</a>
                </li>
                {% endif %}
            </ul>
        </nav>
    </div>
    {% endif %}

</div>
{% endwith %}
{% endblock %}