{% extends "base.html" %}
{% load static %}

{% block title %}Products - POS System{% endblock %}

{% block page_pretitle %}
<div class="page-pretitle">
    <span class="badge badge-purple-light">
        <i class="ti ti-building-store me-1"></i>POS System
    </span>
</div>
{% endblock %}

{% block page_title %}
<i class="ti ti-package me-2"></i>Products
{% endblock %}

{% block page_actions %}
<a href="{% url 'pos:dashboard' %}" class="btn btn-outline-secondary">
    <i class="ti ti-arrow-left me-1"></i> Back to Dashboard
</a>
<a href="{% url 'pos:product_create' %}" class="btn btn-primary">
    <i class="ti ti-plus"></i> Add Product
</a>
{% endblock %}

{% block content %}
<div class="animate-fade-in-up">
    <!-- Search and Filter -->
    <div class="card shadow-sm mb-4">
        <div class="card-header bg-gradient-primary text-white">
            <h3 class="card-title mb-0">
                <i class="ti ti-filter me-2"></i>Search & Filter
            </h3>
        </div>
        <div class="card-body">
            <form method="get" action="" class="row g-3">
                <div class="col-md-4">
                    <label class="form-label">
                        <i class="ti ti-search me-1"></i>Search Products
                    </label>
                    <input type="text" name="search" class="form-control" placeholder="Product name, SKU, or barcode..." value="{{ request.GET.search }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">
                        <i class="ti ti-category me-1"></i>Category
                    </label>
                    <select name="category" class="form-select">
                        <option value="">All Categories</option>
                        {% for cat in categories %}
                        <option value="{{ cat.id }}" {% if request.GET.category == cat.id|stringformat:"s" %}selected{% endif %}>
                            {{ cat.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">
                        <i class="ti ti-box me-1"></i>Stock Status
                    </label>
                    <select name="stock_status" class="form-select">
                        <option value="">All Stock</option>
                        <option value="in_stock" {% if request.GET.stock_status == "in_stock" %}selected{% endif %}>In Stock</option>
                        <option value="low_stock" {% if request.GET.stock_status == "low_stock" %}selected{% endif %}>Low Stock</option>
                        <option value="out_of_stock" {% if request.GET.stock_status == "out_of_stock" %}selected{% endif %}>Out of Stock</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">&nbsp;</label>
                    <div class="btn-group w-100">
                        <button type="submit" class="btn btn-primary">
                            <i class="ti ti-search"></i> Search
                        </button>
                        <a href="{% url 'pos:product_list' %}" class="btn btn-outline-secondary">
                            <i class="ti ti-x"></i> Clear
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Products Grid -->
    <div class="row">
        {% for product in products %}
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="card shadow-sm hover-lift h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <div class="me-3">
                            <div class="avatar avatar-lg" style="background: linear-gradient(135deg, {{ product.category.color|default:'#667eea' }}20 0%, {{ product.category.color|default:'#667eea' }}40 100%); color: {{ product.category.color|default:'#667eea' }}; font-size: 1.2rem; font-weight: 700;">
                                {{ product.name|slice:":2"|upper }}
                            </div>
                        </div>
                        <div class="flex-fill">
                            <div class="fw-bold mb-1">{{ product.name }}</div>
                            <div class="text-muted small">
                                <i class="ti ti-barcode me-1"></i>{{ product.sku }}
                            </div>
                            {% if product.category %}
                            <span class="badge badge-primary-light mt-1">
                                <i class="ti ti-category me-1"></i>{{ product.category.name }}
                            </span>
                            {% endif %}
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-6">
                            <div class="p-2 bg-light rounded text-center">
                                <div class="text-muted small mb-1">
                                    <i class="ti ti-tag me-1"></i>Price
                                </div>
                                <div class="h4 mb-0 text-primary">RM {{ product.selling_price|floatformat:2 }}</div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-2 bg-light rounded text-center">
                                <div class="text-muted small mb-1">
                                    <i class="ti ti-box me-1"></i>Stock
                                </div>
                                <div class="h4 mb-0">
                                    {{ product.current_stock|floatformat:0 }}
                                    {% if product.unit_of_measure %}
                                    <small class="text-muted">{{ product.unit_of_measure }}</small>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Stock Status -->
                    {% if product.current_stock <= 0 %}
                    <div class="alert alert-danger mb-3">
                        <i class="ti ti-alert-circle me-1"></i>
                        <strong>Out of Stock!</strong>
                    </div>
                    {% elif product.current_stock <= product.reorder_level %}
                    <div class="alert alert-warning mb-3">
                        <i class="ti ti-alert-triangle me-1"></i>
                        <strong>Low Stock!</strong> Reorder: {{ product.reorder_level }}
                    </div>
                    {% else %}
                    <div class="alert alert-success mb-3">
                        <i class="ti ti-check-circle me-1"></i>
                        <strong>In Stock</strong>
                    </div>
                    {% endif %}

                    <div class="d-flex gap-2">
                        <a href="{% url 'pos:product_detail' product.id %}" class="btn btn-primary btn-sm flex-fill">
                            <i class="ti ti-eye"></i> View
                        </a>
                        <a href="{% url 'pos:product_update' product.id %}" class="btn btn-outline-secondary btn-sm flex-fill">
                            <i class="ti ti-edit"></i> Edit
                        </a>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12">
            <div class="empty-state">
                <i class="ti ti-package-off"></i>
                <h3>No products found</h3>
                <p class="text-muted">
                    {% if request.GET.search or request.GET.category or request.GET.stock_status %}
                        Try adjusting your filters or search terms.
                    {% else %}
                        Start by adding your first product.
                    {% endif %}
                </p>
                <div class="btn-list">
                    {% if request.GET.search or request.GET.category or request.GET.stock_status %}
                        <a href="{% url 'pos:product_list' %}" class="btn btn-outline-secondary">
                            <i class="ti ti-x"></i> Clear Filters
                        </a>
                    {% endif %}
                    <a href="{% url 'pos:product_create' %}" class="btn btn-primary">
                        <i class="ti ti-plus"></i> Add Product
                    </a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Pagination -->
    {% if products.has_other_pages %}
    <div class="d-flex justify-content-center mt-4">
        <ul class="pagination">
            {% if products.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page={{ products.previous_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.category %}&category={{ request.GET.category }}{% endif %}{% if request.GET.stock_status %}&stock_status={{ request.GET.stock_status }}{% endif %}">
                    <i class="ti ti-chevron-left"></i> Previous
                </a>
            </li>
            {% endif %}

            <li class="page-item active">
                <a class="page-link">{{ products.number }} of {{ products.paginator.num_pages }}</a>
            </li>

            {% if products.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ products.next_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.category %}&category={{ request.GET.category }}{% endif %}{% if request.GET.stock_status %}&stock_status={{ request.GET.stock_status }}{% endif %}">
                    Next <i class="ti ti-chevron-right"></i>
                </a>
            </li>
            {% endif %}
        </ul>
    </div>
    {% endif %}
</div>
{% endblock %}