{% extends 'base.html' %}
{% block title %}Shop — Chiez Stores{% endblock %}
{% block meta_description %}{{ seo_description }}{% endblock %}

{% block extra_css %}
<style>
    *, *::before, *::after { box-sizing: border-box; }

    /* ── Page header ── */
    .shop-page-header {
        background: var(--cream);
        border-bottom: 1px solid var(--light-gray);
    }
    .shop-page-header .inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 28px 20px;
    }

    /* ── Outer container ── */
    .shop-wrap {
        max-width: 1200px;
        margin: 0 auto;
        padding: 28px 20px 60px;
    }

    /* ── Two-column layout ── */
    .shop-layout {
        display: grid;
        grid-template-columns: 240px 1fr;
        gap: 32px;
        align-items: start;
    }

    /* ── Sidebar ── */
    .sidebar {
        position: sticky;
        top: 80px;
        height: fit-content;
    }

    .filter-block { margin-bottom: 28px; }

    .filter-title {
        font-size: 11px;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        font-weight: 600;
        color: var(--black);
        margin-bottom: 14px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--light-gray);
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
    }

    .category-list { list-style: none; margin: 0; padding: 0; }
    .category-list li { margin-bottom: 4px; }
    .category-list a {
        font-size: 13px;
        color: var(--warm-gray);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        transition: color 0.18s;
        text-decoration: none;
    }
    .category-list a:hover { color: var(--black); }
    .category-list a.active { font-weight: 500; color: var(--gold); }
    .category-list .count { font-size: 11px; color: var(--mid-gray); }

    .price-range {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 8px;
        align-items: center;
    }

    .size-grid { display: flex; flex-wrap: wrap; gap: 6px; }
    .size-btn {
        padding: 6px 11px;
        border: 1px solid var(--mid-gray);
        background: none;
        cursor: pointer;
        font-size: 12px;
        border-radius: 3px;
        transition: background 0.18s, border-color 0.18s, color 0.18s;
        color: var(--warm-gray);
        font-family: var(--font-body);
    }
    .size-btn:hover, .size-btn.active {
        border-color: var(--black);
        background: var(--black);
        color: #fff;
    }

    .search-bar-shop {
        display: flex;
        border: 1px solid var(--mid-gray);
        border-radius: 3px;
        overflow: hidden;
        margin-bottom: 28px;
    }
    .search-bar-shop input {
        flex: 1;
        min-width: 0;
        padding: 10px 14px;
        border: none;
        font-family: var(--font-body);
        font-size: 14px;
        outline: none;
        background: var(--white);
    }
    .search-bar-shop button {
        background: var(--black);
        color: #fff;
        border: none;
        padding: 10px 16px;
        cursor: pointer;
        flex-shrink: 0;
    }

    /* ── Mobile filter drawer ── */
    .mobile-filter-bar {
        display: none;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 16px;
    }

    .mobile-filter-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 9px 16px;
        border: 1px solid var(--mid-gray);
        border-radius: 4px;
        background: var(--white);
        font-size: 13px;
        font-weight: 600;
        font-family: var(--font-body);
        cursor: pointer;
        color: var(--black);
        transition: background 0.18s;
    }
    .mobile-filter-btn:hover { background: var(--cream); }
    .mobile-filter-btn .filter-count {
        background: var(--gold);
        color: var(--black);
        font-size: 10px;
        font-weight: 700;
        border-radius: 10px;
        padding: 1px 6px;
        display: none;
    }
    .mobile-filter-btn .filter-count.visible { display: inline; }

    /* Drawer overlay */
    .filter-drawer-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.35);
        z-index: 200;
        opacity: 0;
        transition: opacity 0.25s;
    }
    .filter-drawer-overlay.open { display: block; opacity: 1; }

    /* Drawer panel */
    .filter-drawer {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(320px, 88vw);
        background: var(--white);
        z-index: 201;
        overflow-y: auto;
        padding: 0 0 40px;
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .filter-drawer.open { transform: translateX(0); }

    .filter-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 20px 14px;
        border-bottom: 1px solid var(--light-gray);
        position: sticky;
        top: 0;
        background: var(--white);
        z-index: 1;
    }
    .filter-drawer-header h3 {
        font-family: var(--font-display);
        font-size: 1.1rem;
        font-weight: 300;
        margin: 0;
    }
    .drawer-close {
        background: none;
        border: none;
        font-size: 18px;
        cursor: pointer;
        color: var(--warm-gray);
        line-height: 1;
        padding: 4px;
    }
    .filter-drawer-body { padding: 20px; }

    /* ── Active filters ── */
    .active-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 20px;
    }
    .filter-tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--light-gray);
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 12px;
        color: var(--black);
    }
    .filter-tag a { color: var(--warm-gray); font-size: 14px; text-decoration: none; line-height: 1; }

    /* ── Shop header (result count + sort) ── */
    .shop-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
        padding-bottom: 18px;
        border-bottom: 1px solid var(--light-gray);
        gap: 12px;
        flex-wrap: wrap;
    }
    .result-count { font-size: 13px; color: var(--warm-gray); }
    .sort-select {
        padding: 8px 14px;
        border: 1px solid var(--mid-gray);
        background: var(--white);
        font-family: var(--font-body);
        font-size: 12px;
        letter-spacing: 0.04em;
        border-radius: 3px;
        cursor: pointer;
        outline: none;
        max-width: 100%;
    }

    /* ── Pagination ── */
    .pagination {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
        margin-top: 40px;
    }

    /* ────────────────────────────
       RESPONSIVE
    ──────────────────────────── */

    /* Tablet and below */
    @media (max-width: 860px) {
        .shop-layout {
            grid-template-columns: 1fr;
        }

        /* Hide desktop sticky sidebar */
        .sidebar {
            display: none;
        }

        .mobile-filter-bar {
            display: flex;
        }
    }

    /* Phone */
    @media (max-width: 600px) {
        .shop-wrap {
            padding: 16px 14px 50px;
        }

        .shop-page-header .inner {
            padding: 18px 14px;
        }

        .shop-page-header h1 {
            font-size: 1.7rem !important;
        }

        .shop-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }

        .sort-select { width: 100%; }

        .products-grid {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 12px !important;
        }
    }

    @media (max-width: 380px) {
        .products-grid {
            grid-template-columns: 1fr !important;
        }
    }
</style>
{% endblock %}

{% block content %}

<!-- Page header -->
<div class="shop-page-header">
    <div class="inner">
        <div class="breadcrumb">
            <a href="{% url 'store:home' %}">Home</a>
            <span class="breadcrumb-sep">/</span>
            <span>Shop</span>
            {% if current_category %}
                <span class="breadcrumb-sep">/</span>
                <span>{{ current_category|title }}</span>
            {% endif %}
        </div>
        <h1 style="font-size:2.4rem;margin-top:8px">
            {% if current_category %}{{ current_category|title }}
            {% elif query %}Search: "{{ query }}"
            {% else %}All Products{% endif %}
        </h1>
    </div>
</div>

<!-- Filter drawer overlay (mobile) -->
<div class="filter-drawer-overlay" id="filterOverlay" onclick="closeDrawer()"></div>

<!-- Filter drawer panel (mobile) -->
<div class="filter-drawer" id="filterDrawer" aria-label="Filters">
    <div class="filter-drawer-header">
        <h3>Filters</h3>
        <button class="drawer-close" onclick="closeDrawer()" aria-label="Close filters">
            <i class="fas fa-times"></i>
        </button>
    </div>
    <div class="filter-drawer-body">
        <form method="GET" action="{% url 'store:shop' %}" id="drawerFilterForm">
            {% if current_category %}<input type="hidden" name="category" value="{{ current_category }}">{% endif %}

            <div class="search-bar-shop">
                <input type="text" name="q" value="{{ query }}" placeholder="Search products...">
                <button type="submit"><i class="fas fa-search"></i></button>
            </div>

            <div class="filter-block">
                <div class="filter-title">Categories</div>
                <ul class="category-list">
                    <li><a href="{% url 'store:shop' %}" class="{% if not current_category %}active{% endif %}">All Products</a></li>
                    {% for cat in nav_categories %}
                    <li>
                        <a href="?category={{ cat.slug }}{% if query %}&q={{ query }}{% endif %}"
                           class="{% if current_category == cat.slug %}active{% endif %}">
                            {{ cat.name }}
                            <span class="count">{{ cat.products.count }}</span>
                        </a>
                    </li>
                    {% endfor %}
                </ul>
            </div>

            <div class="filter-block">
                <div class="filter-title">Price Range</div>
                <div class="price-range">
                    <input type="number" name="min_price" value="{{ min_price }}" placeholder="Min ₦" class="form-control" style="font-size:13px">
                    <span style="color:var(--mid-gray);text-align:center">–</span>
                    <input type="number" name="max_price" value="{{ max_price }}" placeholder="Max ₦" class="form-control" style="font-size:13px">
                </div>
            </div>

            <div class="filter-block">
                <div class="filter-title">Size</div>
                    <div class="size-grid">
                        {% for sz in available_sizes %}
                        <button type="submit" name="size" value="{{ sz }}" class="size-btn {% if request.GET.size == sz %}active{% endif %}">
                            {{ sz }}
                        </button>
                        {% endfor %}
                    </div>
            </div>

            <button type="submit" class="btn btn-primary btn-full">Apply Filters</button>
            <a href="{% url 'store:shop' %}" class="btn btn-outline btn-full" style="margin-top:10px">Clear Filters</a>
        </form>
    </div>
</div>

<!-- Main wrapper -->
<div class="shop-wrap">

    <!-- Active filters -->
    {% if query or current_category or min_price or max_price %}
    <div class="active-filters">
        {% if query %}
        <span class="filter-tag">Search: "{{ query }}" <a href="?">×</a></span>
        {% endif %}
        {% if current_category %}
        <span class="filter-tag">{{ current_category|title }} <a href="{% url 'store:shop' %}">×</a></span>
        {% endif %}
        {% if min_price or max_price %}
        <span class="filter-tag">₦{{ min_price|default:'0' }} – ₦{{ max_price|default:'∞' }}
            <a href="?{% if query %}q={{ query }}&{% endif %}{% if current_category %}category={{ current_category }}{% endif %}">×</a>
        </span>
        {% endif %}
        <a href="{% url 'store:shop' %}" style="font-size:12px;color:var(--warm-gray);text-decoration:underline;align-self:center">Clear all</a>
    </div>
    {% endif %}

    <!-- Mobile filter bar -->
    <div class="mobile-filter-bar">
        <button class="mobile-filter-btn" onclick="openDrawer()" type="button">
            <i class="fas fa-sliders-h"></i> Filters
            <span class="filter-count {% if query or current_category or min_price or max_price or request.GET.size %}visible{% endif %}" id="filterBadge">
                {% with count=0 %}
                    {% if query %}{% with count=count|add:1 %}{% endwith %}{% endif %}
                    {% if current_category %}{% with count=count|add:1 %}{% endwith %}{% endif %}
                    {% if min_price or max_price %}{% with count=count|add:1 %}{% endwith %}{% endif %}
                    {% if request.GET.size %}{% with count=count|add:1 %}{% endwith %}{% endif %}
                {% endwith %}
            </span>
        </button>
        <form method="GET" action="{% url 'store:shop' %}" style="display:flex;gap:8px;flex:1;justify-content:flex-end">
            {% if current_category %}<input type="hidden" name="category" value="{{ current_category }}">{% endif %}
            <select name="sort" class="sort-select" onchange="this.form.submit()" style="flex:1;max-width:200px">
                {% for val, label in sort_options.items %}
                <option value="{{ val }}" {% if sort == val %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
            </select>
        </form>
    </div>

    <!-- Two-column layout -->
    <div class="shop-layout">

        <!-- Desktop sidebar -->
        <aside class="sidebar">
            <form method="GET" action="{% url 'store:shop' %}">
                {% if current_category %}<input type="hidden" name="category" value="{{ current_category }}">{% endif %}

                <div class="search-bar-shop">
                    <input type="text" name="q" value="{{ query }}" placeholder="Search products...">
                    <button type="submit"><i class="fas fa-search"></i></button>
                </div>

                <div class="filter-block">
                    <div class="filter-title">
                        Categories
                        <i class="fas fa-chevron-down" style="font-size:9px;color:var(--warm-gray)"></i>
                    </div>
                    <ul class="category-list">
                        <li><a href="{% url 'store:shop' %}" class="{% if not current_category %}active{% endif %}">All Products</a></li>
                        {% for cat in nav_categories %}
                        <li>
                            <a href="?category={{ cat.slug }}{% if query %}&q={{ query }}{% endif %}"
                               class="{% if current_category == cat.slug %}active{% endif %}">
                                {{ cat.name }}
                                <span class="count">{{ cat.products.count }}</span>
                            </a>
                        </li>
                        {% endfor %}
                    </ul>
                </div>

                <div class="filter-block">
                    <div class="filter-title">Price Range</div>
                    <div class="price-range">
                        <input type="number" name="min_price" value="{{ min_price }}" placeholder="Min ₦" class="form-control" style="font-size:13px">
                        <span style="color:var(--mid-gray);text-align:center">–</span>
                        <input type="number" name="max_price" value="{{ max_price }}" placeholder="Max ₦" class="form-control" style="font-size:13px">
                    </div>
                </div>

                <div class="filter-block">
                    <div class="filter-title">Size</div>
                    <div class="size-grid">
                        <button type="submit" name="size" value="XS"  class="size-btn {% if request.GET.size == 'XS'  %}active{% endif %}">XS</button>
                        <button type="submit" name="size" value="S"   class="size-btn {% if request.GET.size == 'S'   %}active{% endif %}">S</button>
                        <button type="submit" name="size" value="M"   class="size-btn {% if request.GET.size == 'M'   %}active{% endif %}">M</button>
                        <button type="submit" name="size" value="L"   class="size-btn {% if request.GET.size == 'L'   %}active{% endif %}">L</button>
                        <button type="submit" name="size" value="XL"  class="size-btn {% if request.GET.size == 'XL'  %}active{% endif %}">XL</button>
                        <button type="submit" name="size" value="XXL" class="size-btn {% if request.GET.size == 'XXL' %}active{% endif %}">XXL</button>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary btn-full">Apply Filters</button>
                <a href="{% url 'store:shop' %}" class="btn btn-outline btn-full" style="margin-top:10px">Clear Filters</a>
            </form>
        </aside>

        <!-- Products column -->
        <div>
            <!-- Sort bar (desktop only) -->
            <div class="shop-header">
                <div class="result-count">
                    Showing {{ products.paginator.count }} product{{ products.paginator.count|pluralize }}
                </div>
                <form method="GET" action="{% url 'store:shop' %}">
                    {% if current_category %}<input type="hidden" name="category" value="{{ current_category }}">{% endif %}
                    {% if query %}<input type="hidden" name="q" value="{{ query }}">{% endif %}
                    <select name="sort" class="sort-select" onchange="this.form.submit()">
                        {% for val, label in sort_options.items %}
                        <option value="{{ val }}" {% if sort == val %}selected{% endif %}>{{ label }}</option>
                        {% endfor %}
                    </select>
                </form>
            </div>

            {% if products %}
            <div class="products-grid">
                {% for product in products %}
                    {% include 'store/partials/product_card.html' %}
                {% endfor %}
            </div>

            <!-- Pagination -->
            {% if products.has_other_pages %}
            <div class="pagination">
                {% if products.has_previous %}
                <a href="?page={{ products.previous_page_number }}{% if current_category %}&category={{ current_category }}{% endif %}{% if query %}&q={{ query }}{% endif %}" class="page-link">
                    <i class="fas fa-chevron-left" style="font-size:10px"></i>
                </a>
                {% endif %}
                {% for num in products.paginator.page_range %}
                <a href="?page={{ num }}{% if current_category %}&category={{ current_category }}{% endif %}{% if query %}&q={{ query }}{% endif %}"
                   class="page-link {% if products.number == num %}active{% endif %}">{{ num }}</a>
                {% endfor %}
                {% if products.has_next %}
                <a href="?page={{ products.next_page_number }}{% if current_category %}&category={{ current_category }}{% endif %}{% if query %}&q={{ query }}{% endif %}" class="page-link">
                    <i class="fas fa-chevron-right" style="font-size:10px"></i>
                </a>
                {% endif %}
            </div>
            {% endif %}

            {% else %}
            <div style="text-align:center;padding:80px 20px">
                <i class="fas fa-search" style="font-size:44px;color:var(--mid-gray);display:block;margin-bottom:18px"></i>
                <h3 style="font-weight:300;color:var(--warm-gray)">No products found</h3>
                <p style="color:var(--mid-gray);margin:10px 0 28px;font-size:14px">Try adjusting your filters or search terms.</p>
                <a href="{% url 'store:shop' %}" class="btn btn-primary">View All Products</a>
            </div>
            {% endif %}

        </div>
    </div><!-- /shop-layout -->
</div><!-- /shop-wrap -->

{% endblock %}

{% block extra_js %}
<script>
    function openDrawer() {
        document.getElementById('filterDrawer').classList.add('open');
        document.getElementById('filterOverlay').classList.add('open');
        document.body.style.overflow = 'hidden';
    }

    function closeDrawer() {
        document.getElementById('filterDrawer').classList.remove('open');
        document.getElementById('filterOverlay').classList.remove('open');
        document.body.style.overflow = '';
    }

    // Close drawer on Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') closeDrawer();
    });
</script>
{% endblock %}