{% extends "base.html" %}

{% block title %}Products - Golden Uniforms{% endblock %}

{% block content %}
<div class="container py-4">
    <!-- Horizontal Categories Grid -->
    <div class="categories-horizontal-section mb-4">
        <div class="categories-header">
            <h5 class="mb-3 fw-bold">Categories</h5>
        </div>
        <div class="categories-horizontal-grid">
            <a href="{{ url_for('products') }}" class="category-item-horizontal {% if not selected_category %}active{% endif %}">
                All Products
            </a>
            {% for category in categories %}
            <a href="{{ url_for('products', category_id=category.id) }}" 
               class="category-item-horizontal {% if selected_category and selected_category.id == category.id %}active{% endif %}">
                {{ category.name }}
            </a>
            {% endfor %}
        </div>
    </div>

    <!-- Products -->
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2>
                    {% if search_query %}
                        Search Results for "{{ search_query }}"
                    {% elif selected_subcategory %}
                        {{ selected_subcategory.name }}
                    {% elif selected_category %}
                        {{ selected_category.name }}
                    {% else %}
                        All Products
                    {% endif %}
                </h2>
                <span class="text-muted">
                    {% if search_results_count is not none %}
                        {{ search_results_count }} results found
                    {% else %}
                        {{ products|length }} products found
                    {% endif %}
                </span>
            </div>
            
            <!-- Subcategory Navigation -->
            {% if selected_category and subcategories %}
            <div class="subcategory-nav-wrapper mb-4">
                <div class="subcategory-nav-container">
                    <div class="subcategory-nav">
                        <a href="{{ url_for('products', category_id=selected_category.id) }}" 
                           class="subcategory-nav-btn {% if not selected_subcategory %}active{% endif %}">
                            All {{ selected_category.name }}
                        </a>
                        {% for subcategory in subcategories %}
                        <a href="{{ url_for('products_by_subcategory', subcategory_id=subcategory.id) }}" 
                           class="subcategory-nav-btn {% if selected_subcategory and selected_subcategory.id == subcategory.id %}active{% endif %}">
                            {{ subcategory.name }}
                        </a>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endif %}
            
            {% if products %}
                <!-- Display products in a clean grid -->
                <div class="products-grid">
                    {% for product in products %}
                    <div class="product-card-wrapper">
                        <div class="card product-card h-100 shadow-sm">
                            <div class="position-relative">
                                <div class="card-img-top bg-light d-flex align-items-center justify-content-center" style="height: 250px;">
                                    {% if product.image_url %}
                                        <img src="{{ product.image_url }}" alt="{{ product.name }}" class="img-fluid" style="max-height: 100%; max-width: 100%; object-fit: cover;">
                                    {% else %}
                                        <i class="fas fa-image fa-3x text-muted"></i>
                                    {% endif %}
                                </div>
                                {% if product.is_featured %}
                                    <span class="badge bg-orange position-absolute top-0 start-0 m-2">Featured</span>
                                {% endif %}
                                {% if product.is_clearance %}
                                    <span class="badge bg-danger position-absolute top-0 end-0 m-2">Sale</span>
                                {% endif %}
                            </div>
                            <div class="card-body d-flex flex-column">
                                <h5 class="card-title text-center">{{ product.name }}</h5>
                                <p class="card-text flex-grow-1">{{ product.description[:100] }}{% if product.description|length > 100 %}...{% endif %}</p>
                                <div class="price-action-row d-flex justify-content-between align-items-center w-100">
                                    <span class="h5 text-orange mb-0">KES {{ "%.2f"|format(product.price) }}</span>
                                    <form method="POST" action="{{ url_for('add_to_cart', product_id=product.id) }}" class="d-inline">
                                        <button type="submit" class="btn btn-orange btn-sm">
                                            <i class="fas fa-cart-plus"></i> Add
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            {% else %}
            <div class="text-center py-5">
                <i class="fas fa-box-open fa-4x text-muted mb-3"></i>
                <h4 class="text-muted">No products available</h4>
                <p class="text-muted">Check back later for new arrivals!</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}