{% extends 'theme/base.html' %}
{% load static %}

{% block title %}{{ category.name }}AL WASAY{% endblock %}

{% block content %}
<section class="relative">
    <img src="{% static 'images/hero_1.png' %}" alt="Blog Header" class="absolute inset-0 w-full h-full object-cover">
    <div class="absolute inset-0"></div>
    
    <div class="relative z-10 px-6 lg:px-20 xl:px-32 py-12 lg:py-16">
        <nav class="flex items-center gap-2 text-sm font-poppins mb-4">
            <a href="{% url 'products:product_list' %}" class="text-accent/60 hover:text-accent transition">Products</a>
            <svg class="w-4 h-4 text-accent/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
            <span class="text-accent">{{ category.name }}</span>
        </nav>
        <h1 class="text-accent text-3xl lg:text-4xl font-bold font-poppins">{{ category.name }}</h1>
        {% if category.description %}
        <p class="mt-2 text-accent/80 text-base font-poppins max-w-2xl">{{ category.description }}</p>
        {% endif %}
    </div>
</section>

<section class="bg-accent py-12 lg:py-16">
    <div class="px-6 lg:px-20 xl:px-32">
        <div class="flex flex-col lg:flex-row gap-8">
            
            <aside class="w-full lg:w-64 flex-shrink-0">
                <div class="bg-white rounded-lg p-5 mb-6 shadow-sm">
                    <h3 class="text-primary-dark text-base font-semibold font-poppins mb-4">Search in {{ category.name }}</h3>
                    <form method="GET">
                        <div class="relative">
                            <input type="text" name="q" value="{{ query|default:'' }}" placeholder="Search products..." 
                                class="w-full pl-4 pr-10 py-2.5 border border-secondary/30 rounded-md text-sm font-poppins focus:outline-none focus:border-primary">
                            <button type="submit" class="absolute right-3 top-1/2 -translate-y-1/2 text-secondary hover:text-primary">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                                </svg>
                            </button>
                        </div>
                    </form>
                </div>

                {% if brands %}
                <div class="bg-white rounded-lg p-5 shadow-sm">
                    <h3 class="text-primary-dark text-base font-semibold font-poppins mb-4">Filter by Brand</h3>
                    <ul class="space-y-2">
                        <li>
                            <a href="{% url 'products:category_products' category.slug %}" 
                                class="text-sm font-poppins {% if not current_brand %}text-primary font-semibold{% else %}text-secondary hover:text-primary{% endif %} transition">
                                All Brands
                            </a>
                        </li>
                        {% for brand in brands %}
                        <li>
                            <a href="{% url 'products:category_products' category.slug %}?brand={{ brand.slug }}" 
                                class="text-sm font-poppins {% if current_brand == brand.slug %}text-primary font-semibold{% else %}text-secondary hover:text-primary{% endif %} transition">
                                {{ brand.name }}
                            </a>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}

                <div class="mt-6">
                    <a href="{% url 'products:product_list' %}" class="inline-flex items-center gap-2 text-primary font-semibold font-poppins hover:text-primary-dark transition">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                        </svg>
                        All Products
                    </a>
                </div>
            </aside>

            <div class="flex-1">
                <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
                    <p class="text-secondary text-sm font-poppins">
                        {{ products.paginator.count }} product{{ products.paginator.count|pluralize }} in {{ category.name }}
                    </p>
                    <div class="flex items-center gap-2">
                        <label class="text-secondary text-sm font-poppins">Sort by:</label>
                        <select onchange="window.location.href=this.value" class="px-3 py-2 border border-secondary/30 rounded-md text-sm font-poppins focus:outline-none focus:border-primary">
                            <option value="?sort=newest{% if current_brand %}&brand={{ current_brand }}{% endif %}{% if query %}&q={{ query }}{% endif %}" {% if current_sort == 'newest' %}selected{% endif %}>Newest</option>
                            <option value="?sort=name_asc{% if current_brand %}&brand={{ current_brand }}{% endif %}{% if query %}&q={{ query }}{% endif %}" {% if current_sort == 'name_asc' %}selected{% endif %}>Name (A-Z)</option>
                            <option value="?sort=name_desc{% if current_brand %}&brand={{ current_brand }}{% endif %}{% if query %}&q={{ query }}{% endif %}" {% if current_sort == 'name_desc' %}selected{% endif %}>Name (Z-A)</option>
                            {% if user.is_authenticated %}
                            <option value="?sort=price_low{% if current_brand %}&brand={{ current_brand }}{% endif %}{% if query %}&q={{ query }}{% endif %}" {% if current_sort == 'price_low' %}selected{% endif %}>Price (Low to High)</option>
                            <option value="?sort=price_high{% if current_brand %}&brand={{ current_brand }}{% endif %}{% if query %}&q={{ query }}{% endif %}" {% if current_sort == 'price_high' %}selected{% endif %}>Price (High to Low)</option>
                            {% endif %}
                        </select>
                    </div>
                </div>

                {% if products %}
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                    {% for product in products %}
                    <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition group">
                        <div class="relative overflow-hidden">
                            {% if product.main_image %}
                            <img src="{{ product.main_image.url }}" alt="{{ product.name }}" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300">
                            {% else %}
                            <div class="w-full h-48 bg-secondary/10 flex items-center justify-center">
                                <svg class="w-12 h-12 text-secondary/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                </svg>
                            </div>
                            {% endif %}
                            
                            {% if product.is_on_sale and user.is_authenticated %}
                            <span class="absolute top-3 left-3 px-2 py-1 bg-red-500 text-white text-xs font-semibold font-poppins rounded">
                                -{{ product.discount_percentage }}%
                            </span>
                            {% endif %}
                            
                            {% if not product.is_in_stock %}
                            <span class="absolute top-3 right-3 px-2 py-1 bg-gray-800 text-white text-xs font-semibold font-poppins rounded">
                                Out of Stock
                            </span>
                            {% endif %}
                        </div>
                        
                        <div class="p-5">
                            {% if product.brand %}
                            <p class="text-primary text-xs font-semibold font-poppins uppercase mb-1">{{ product.brand.name }}</p>
                            {% endif %}
                            
                            <h3 class="text-primary-dark text-base font-semibold font-poppins mb-2 line-clamp-2">{{ product.name }}</h3>
                            
                            <p class="text-secondary text-xs font-poppins mb-3">SKU: {{ product.sku }}</p>
                            
                            {% if user.is_authenticated %}
                            <div class="flex items-center gap-2">
                                {% if product.is_on_sale %}
                                <span class="text-primary-dark text-lg font-bold font-poppins">AED {{ product.sale_price }}</span>
                                <span class="text-secondary text-sm font-poppins line-through">AED {{ product.price }}</span>
                                {% else %}
                                <span class="text-primary-dark text-lg font-bold font-poppins">AED {{ product.price }}</span>
                                {% endif %}
                            </div>
                            {% else %}
                            <a href="{% url 'users:login' %}?next={{ request.path }}" class="inline-flex items-center gap-1 text-primary text-sm font-semibold font-poppins hover:text-primary-dark transition">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                                </svg>
                                Login to see price
                            </a>
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                </div>

                {% if products.has_other_pages %}
                <div class="flex justify-center items-center gap-2 mt-10">
                    {% if products.has_previous %}
                    <a href="?page={{ products.previous_page_number }}{% if current_brand %}&brand={{ current_brand }}{% endif %}{% if query %}&q={{ query }}{% endif %}{% if current_sort %}&sort={{ current_sort }}{% endif %}" 
                        class="px-4 py-2 bg-white border border-secondary/30 rounded-md text-primary-dark font-poppins hover:bg-primary hover:text-accent hover:border-primary transition">
                        Previous
                    </a>
                    {% endif %}
                    
                    <span class="px-4 py-2 text-secondary font-poppins">
                        Page {{ products.number }} of {{ products.paginator.num_pages }}
                    </span>
                    
                    {% if products.has_next %}
                    <a href="?page={{ products.next_page_number }}{% if current_brand %}&brand={{ current_brand }}{% endif %}{% if query %}&q={{ query }}{% endif %}{% if current_sort %}&sort={{ current_sort }}{% endif %}" 
                        class="px-4 py-2 bg-white border border-secondary/30 rounded-md text-primary-dark font-poppins hover:bg-primary hover:text-accent hover:border-primary transition">
                        Next
                    </a>
                    {% endif %}
                </div>
                {% endif %}

                {% else %}
                <div class="text-center py-16">
                    <svg class="w-16 h-16 text-secondary/50 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
                    </svg>
                    <h3 class="text-primary-dark text-xl font-semibold font-poppins mb-2">No products found</h3>
                    <p class="text-secondary font-poppins">No products in this category yet.</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</section>


{% endblock %}