{% extends "base.html" %}

{% block title %}{{ category.name }} | {{ site_name }}{% endblock %}
{% block meta_description %}{{ category.seo_description or 'خرید ' + category.name + ' با بهترین قیمت از ' + site_name }}{% endblock %}

{% block content %}

<!-- ===== HEADER دسته‌بندی ===== -->
<section style="
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #2563eb 100%);
    padding: 40px 0 30px;
    color: white;
    margin-bottom: 32px;
    border-radius: 0 0 30px 30px;
">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
                    <h1 style="font-size: 32px; font-weight: 800; margin: 0;">{{ category.name }}</h1>
                    {% if category.parent %}
                        <span style="background: rgba(255,255,255,0.15); padding: 4px 14px; border-radius: 20px; font-size: 13px;">
                            <i class="fas fa-level-up-alt"></i> {{ category.parent.name }}
                        </span>
                    {% endif %}
                </div>
                {% if category.description %}
                    <p style="opacity: 0.9; margin-top: 8px;">{{ category.description }}</p>
                {% endif %}
                <div style="margin-top: 12px; display: flex; gap: 12px; flex-wrap: wrap;">
                    <span style="background: rgba(255,255,255,0.15); padding: 4px 16px; border-radius: 20px; font-size: 14px;">
                        <i class="fas fa-box"></i> {{ products.total|persian_number }} محصول
                    </span>
                    {% if category.children %}
                        <span style="background: rgba(255,255,255,0.15); padding: 4px 16px; border-radius: 20px; font-size: 14px;">
                            <i class="fas fa-sitemap"></i> {{ category.children|length }} زیردسته
                        </span>
                    {% endif %}
                </div>
            </div>
            <div class="col-lg-4 text-center d-none d-lg-block">
                {% if category.image %}
                    <img src="{{ category.image }}" alt="{{ category.name }}" style="max-height: 120px; border-radius: 12px;">
                {% else %}
                    <i class="fas fa-tags" style="font-size: 60px; opacity: 0.3;"></i>
                {% endif %}
            </div>
        </div>
    </div>
</section>

<!-- ===== مسیریابی ===== -->
<div class="container">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb" style="background: transparent; padding: 0;">
            <li class="breadcrumb-item"><a href="{{ url_for('index') }}" style="color: var(--primary);">خانه</a></li>
            <li class="breadcrumb-item"><a href="{{ url_for('products') }}" style="color: var(--primary);">محصولات</a></li>
            <li class="breadcrumb-item active" aria-current="page" style="color: var(--gray-500);">{{ category.name }}</li>
        </ol>
    </nav>
</div>

<!-- ===== زیردسته‌بندی‌ها ===== -->
{% if category.children %}
    <div class="container" style="margin-bottom: 32px;">
        <div style="
            background: white;
            border-radius: var(--radius-lg);
            padding: 20px 24px;
            border: 1px solid var(--gray-200);
        ">
            <h5 style="font-weight: 700; margin-bottom: 16px;">
                <i class="fas fa-sitemap" style="color: var(--primary);"></i> زیردسته‌بندی‌ها
            </h5>
            <div style="display: flex; flex-wrap: wrap; gap: 10px;">
                {% for child in category.children %}
                    <a href="{{ url_for('category_products', slug=child.slug) }}" 
                       style="
                           background: var(--gray-50);
                           padding: 8px 20px;
                           border-radius: var(--radius-xl);
                           border: 1px solid var(--gray-200);
                           font-size: 14px;
                           transition: var(--transition);
                           color: var(--gray-700);
                       "
                       onmouseover="this.style.background='var(--primary-light)'; this.style.borderColor='var(--primary)'"
                       onmouseout="this.style.background='var(--gray-50)'; this.style.borderColor='var(--gray-200)'">
                        <i class="fas fa-folder-open" style="color: var(--primary);"></i> {{ child.name }}
                        <span style="color: var(--gray-400); font-size: 12px;">({{ child.products|length }})</span>
                    </a>
                {% endfor %}
            </div>
        </div>
    </div>
{% endif %}

<!-- ===== محصولات دسته‌بندی ===== -->
<div class="container">
    <div class="row">
        
        <!-- ===== فیلترها ===== -->
        <aside class="col-lg-3">
            <div style="
                background: white;
                border-radius: var(--radius-lg);
                padding: 20px;
                border: 1px solid var(--gray-200);
                position: sticky;
                top: 100px;
            ">
                <h5 style="font-weight: 700; margin-bottom: 16px;">
                    <i class="fas fa-sliders-h" style="color: var(--primary);"></i> فیلترها
                </h5>
                
                <form method="GET" action="{{ url_for('category_products', slug=category.slug) }}" id="filter-form">
                    
                    <!-- ===== برند ===== -->
                    <div style="margin-bottom: 16px;">
                        <label style="font-weight: 600; font-size: 14px; display: block; margin-bottom: 6px;">برند</label>
                        <select name="brand" class="form-select form-select-sm" onchange="this.form.submit()" style="border-radius: var(--radius-md);">
                            <option value="">همه برندها</option>
                            {% for brand in brands %}
                                <option value="{{ brand.id }}" {% if request.args.get('brand')|int == brand.id %}selected{% endif %}>
                                    {{ brand.name }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <!-- ===== محدوده قیمت ===== -->
                    <div style="margin-bottom: 16px;">
                        <label style="font-weight: 600; font-size: 14px; display: block; margin-bottom: 6px;">محدوده قیمت</label>
                        <div style="display: flex; gap: 8px;">
                            <input type="number" name="min_price" class="form-control form-control-sm" placeholder="از" value="{{ request.args.get('min_price', '') }}" style="border-radius: var(--radius-md);">
                            <input type="number" name="max_price" class="form-control form-control-sm" placeholder="تا" value="{{ request.args.get('max_price', '') }}" style="border-radius: var(--radius-md);">
                        </div>
                        <button type="submit" class="btn btn-primary btn-sm w-100 mt-2" style="border-radius: var(--radius-md);">
                            <i class="fas fa-search"></i> اعمال قیمت
                        </button>
                    </div>
                    
                    <!-- ===== مرتب‌سازی ===== -->
                    <div style="margin-bottom: 16px;">
                        <label style="font-weight: 600; font-size: 14px; display: block; margin-bottom: 6px;">مرتب‌سازی</label>
                        <select name="sort" class="form-select form-select-sm" onchange="this.form.submit()" style="border-radius: var(--radius-md);">
                            <option value="newest" {% if request.args.get('sort') == 'newest' %}selected{% endif %}>جدیدترین</option>
                            <option value="price_low" {% if request.args.get('sort') == 'price_low' %}selected{% endif %}>قیمت از کم به زیاد</option>
                            <option value="price_high" {% if request.args.get('sort') == 'price_high' %}selected{% endif %}>قیمت از زیاد به کم</option>
                            <option value="popular" {% if request.args.get('sort') == 'popular' %}selected{% endif %}>پرفروش‌ترین</option>
                            <option value="discount" {% if request.args.get('sort') == 'discount' %}selected{% endif %}>بیشترین تخفیف</option>
                        </select>
                    </div>
                    
                    <!-- ===== دکمه Reset ===== -->
                    <a href="{{ url_for('category_products', slug=category.slug) }}" class="btn btn-outline-secondary btn-sm w-100" style="border-radius: var(--radius-md);">
                        <i class="fas fa-undo"></i> حذف فیلترها
                    </a>
                    
                </form>
            </div>
        </aside>
        
        <!-- ===== محصولات ===== -->
        <div class="col-lg-9">
            
            <!-- ===== تعداد نتایج ===== -->
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap;">
                <span style="color: var(--gray-500); font-size: 14px;">
                    <strong>{{ products.total|persian_number }}</strong> محصول در دسته "{{ category.name }}"
                </span>
                <span style="color: var(--gray-500); font-size: 13px;">
                    صفحه {{ products.page|persian_number }} از {{ products.pages|persian_number }}
                </span>
            </div>
            
            <!-- ===== GRID محصولات ===== -->
            <div class="row">
                {% if products.items %}
                    {% for product in products.items %}
                        <div class="col-xl-3 col-lg-4 col-md-4 col-6">
                            <div class="product-card">
                                <div class="image-wrap">
                                    <img src="{{ product.images[0].image_url if product.images else url_for('static', filename='images/no-image.png') }}" 
                                         alt="{{ product.title }}" 
                                         width="300" height="300" loading="lazy">
                                    <div class="badge-wrap">
                                        {% if product.discount_percent > 0 %}
                                            <span class="badge-item discount">٪{{ product.discount_percent }}</span>
                                        {% endif %}
                                        {% if product.is_new %}
                                            <span class="badge-item new">جدید</span>
                                        {% endif %}
                                    </div>
                                    <div class="actions">
                                        <button class="add-to-cart" data-product-id="{{ product.id }}" title="افزودن به سبد">
                                            <i class="fas fa-cart-plus"></i>
                                        </button>
                                        <button class="add-to-wishlist" data-product-id="{{ product.id }}" title="علاقه‌مندی">
                                            <i class="far fa-heart"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="info">
                                    <div class="title"><a href="{{ url_for('product_detail', slug=product.slug) }}">{{ product.title }}</a></div>
                                    
                                    <div class="stock-status">
                                        {% if product.stock_quantity > 10 %}
                                            <span class="stock-in"><i class="fas fa-check-circle"></i> موجود در انبار</span>
                                        {% elif product.stock_quantity > 0 %}
                                            <span class="stock-low"><i class="fas fa-exclamation-triangle"></i> {{ product.stock_quantity|persian_number }} عدد باقی‌مانده</span>
                                        {% else %}
                                            <span class="stock-out"><i class="fas fa-times-circle"></i> ناموجود</span>
                                        {% endif %}
                                    </div>
                                    
                                    <div class="price-wrap">
                                        <span class="current">{{ product.get_final_price()|persian_number }}</span>
                                        <span class="currency">تومان</span>
                                        {% if product.compare_price %}
                                            <span class="old">{{ product.compare_price|persian_number }}</span>
                                            {% if product.discount_percent > 0 %}
                                                <span class="discount-pct">٪{{ product.discount_percent }}</span>
                                            {% endif %}
                                        {% endif %}
                                    </div>
                                    
                                    <div class="rating">
                                        {% set approved = product.reviews|selectattr('is_approved', 'equalto', True)|list %}
                                        {% set count = approved|length %}
                                        {% if count > 0 %}
                                            {% set avg = approved|map(attribute='rating')|sum / count %}
                                            <span class="stars">
                                                {% for i in range(5) %}
                                                    {% if i < avg|round %}<i class="fas fa-star"></i>{% else %}<i class="far fa-star"></i>{% endif %}
                                                {% endfor %}
                                            </span>
                                            ({{ count }})
                                        {% else %}
                                            <span>بدون نظر</span>
                                        {% endif %}
                                    </div>
                                    
                                    {% if product.stock_quantity > 0 %}
                                        <button class="add-btn add-to-cart" data-product-id="{{ product.id }}">
                                            <i class="fas fa-cart-plus"></i> افزودن به سبد
                                        </button>
                                    {% else %}
                                        <button class="add-btn" disabled>
                                            <i class="fas fa-times-circle"></i> ناموجود
                                        </button>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                {% else %}
                    <div class="col-12">
                        <div style="text-align: center; padding: 60px 20px; background: white; border-radius: var(--radius-lg); border: 1px solid var(--gray-200);">
                            <i class="fas fa-box-open" style="font-size: 48px; color: var(--gray-400);"></i>
                            <h4 style="margin-top: 16px;">محصولی در این دسته‌بندی یافت نشد</h4>
                            <p style="color: var(--gray-500);">لطفاً فیلترهای خود را تغییر دهید یا به دسته‌های دیگر مراجعه کنید</p>
                            <a href="{{ url_for('products') }}" class="btn btn-primary">مشاهده همه محصولات</a>
                        </div>
                    </div>
                {% endif %}
            </div>
            
            <!-- ===== صفحه‌بندی ===== -->
            {% if products.pages > 1 %}
                <nav aria-label="صفحه‌بندی" style="margin-top: 24px;">
                    <ul class="pagination justify-content-center">
                        {% if products.has_prev %}
                            <li class="page-item">
                                <a class="page-link" href="{{ url_for('category_products', slug=category.slug, page=products.prev_num, **request.args) }}">
                                    <i class="fas fa-chevron-right"></i> قبلی
                                </a>
                            </li>
                        {% else %}
                            <li class="page-item disabled">
                                <span class="page-link"><i class="fas fa-chevron-right"></i> قبلی</span>
                            </li>
                        {% endif %}
                        
                        {% for page in products.iter_pages() %}
                            {% if page %}
                                <li class="page-item {% if page == products.page %}active{% endif %}">
                                    <a class="page-link" href="{{ url_for('category_products', slug=category.slug, page=page, **request.args) }}">{{ page|persian_number }}</a>
                                </li>
                            {% else %}
                                <li class="page-item disabled">
                                    <span class="page-link">…</span>
                                </li>
                            {% endif %}
                        {% endfor %}
                        
                        {% if products.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="{{ url_for('category_products', slug=category.slug, page=products.next_num, **request.args) }}">
                                    بعدی <i class="fas fa-chevron-left"></i>
                                </a>
                            </li>
                        {% else %}
                            <li class="page-item disabled">
                                <span class="page-link">بعدی <i class="fas fa-chevron-left"></i></span>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}
            
        </div>
    </div>
</div>

{% endblock %}