{% extends 'base.html' %}
{% block title %}GYM BULL Shop{% endblock %}
{% block content %}
<header class="topbar">
    <div class="brand-menu">
        <button class="brand-button" type="button" aria-expanded="false" aria-controls="brand-menu-panel">
            <span class="brand">GYM <span>BULL</span></span>
        </button>
        <div class="brand-menu-panel" id="brand-menu-panel" aria-label="GYM BULL menu">
            <div class="brand-menu-heading">Shop by category</div>
            <button type="button" class="brand-category brand-menu-item brand-category-all" data-category="all">View all products</button>
            {% set product_categories = [] %}
            {% for product in products %}
                {% if product.category not in product_categories %}
                    {% set _ = product_categories.append(product.category) %}
                {% endif %}
            {% endfor %}
            {% for category in product_categories %}
            <button type="button" class="brand-category brand-menu-item" data-category="{{ category }}">{{ category }}</button>
            {% endfor %}
            <div class="brand-menu-divider"></div>
            <a class="brand-menu-link" href="{{ url_for('about_us') }}">About Us <span>→</span></a>
            <a class="brand-menu-link" href="{{ url_for('our_projects') }}">Our Projects <span>→</span></a>
        </div>
    </div>
    <div class="header-search">
        <input id="front-search" class="search-input" type="search" placeholder="Search products..." aria-label="Search products">
    </div>
    <nav class="nav">
        <a href="/">Home</a>
    </nav>
</header>

<main class="container">
    <div class="toolbar">
        <select id="price-filter" aria-label="Sort products by price">
            <option value="featured">Featured</option>
            <option value="asc">Price: low to high</option>
            <option value="desc">Price: high to low</option>
        </select>
    </div>

    <div class="grid" id="shop">
        {% for product in products %}
        <article class="card product-card" data-title="{{ product.title|lower }}" data-category="{{ product.category|lower }}" data-price="{{ product.price }}" data-stock="{{ product.stock_quantity }}" data-preorder="{{ 1 if product.preorder_enabled else 0 }}" {% if product.stock_quantity <= 0 and not product.preorder_enabled %}style="display:none;"{% endif %}>
            <a href="/product/{{ product.id }}" aria-label="View {{ product.title }} details">
                <img src="{{ product.image }}" alt="{{ product.title }}">
            </a>
            <div class="card-body">
                <h3><a href="/product/{{ product.id }}">{{ product.title }}</a></h3>
                <p>{{ product.description[:120] }}{% if product.description|length > 120 %}...{% endif %}</p>
                <div class="price">${{ '%.2f'|format(product.price) }}</div>
                {% if product.stock_quantity <= 3 and product.stock_quantity > 0 %}
                <div class="low-stock" data-product-id="{{ product.id }}">
                    Only {{ product.stock_quantity }} left
                </div>
                {% elif product.stock_quantity <= 0 and product.preorder_enabled %}
                <div class="low-stock" data-product-id="{{ product.id }}">
                    Available for preorder
                </div>
                {% endif %}
                <div class="stock-row">
                    <span class="stock-badge {{ product.status_class }}">{{ product.status }}</span>
                    <span class="stock-count">{{ product.category }}</span>
                </div>
                <div class="product-actions">
                    <a class="btn btn-secondary" href="/product/{{ product.id }}">View details</a>
                    <button class="btn btn-primary" type="button" data-product-id="{{ product.id }}" data-product-title="{{ product.title }}" data-product-price="{{ product.price }}" data-product-image="{{ product.image }}" data-product-category="{{ product.category }}" {% if not product.button_enabled %}disabled{% endif %}>{{ product.button_label }}</button>
                </div>
            </div>
        </article>
        {% endfor %}
    </div>

    <section class="front-gallery" aria-label="Featured project images">
        <div class="section-heading"><span>GYM BULL projects</span><strong>Built in motion.</strong></div>
        <div class="front-gallery-grid">
            {% for product in front_gallery %}
            <a class="front-gallery-item" href="{{ url_for('our_projects') }}">
                <img src="{{ product.image }}" alt="{{ product.title }}">
                <span>{{ product.title }}</span>
            </a>
            {% endfor %}
        </div>
    </section>
</main>

<style>
    .brand-menu {
        position: relative;
        display: inline-block;
    }
    .brand-button {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 5px 8px;
        border-radius: 12px;
    }
    .brand-button:hover { background: rgba(0,160,233,0.08); }
    .brand-menu-hint { color: var(--muted); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
    .brand-button .brand {
        font-size: clamp(1.6rem, 2vw, 2.2rem);
        font-weight: 900;
        letter-spacing: 0.08em;
        color: var(--text);
    }
    .brand-button .brand span { color: var(--blue); }
    .brand-menu-panel {
        position: absolute;
        top: calc(100% + 12px);
        left: 0;
        min-width: 250px;
        background: rgba(255,255,255,0.98);
        border: 1px solid var(--border);
        border-radius: 16px;
        box-shadow: 0 24px 55px rgba(15,23,42,0.16);
        display: none;
        flex-direction: column;
        padding: 14px;
        z-index: 30;
    }
    .brand-menu.open .brand-menu-panel {
        display: flex;
    }
    .brand-menu-heading {
        padding: 6px 10px 10px;
        color: var(--muted);
        font-size: 0.72rem;
        font-weight: 900;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }
    .brand-category {
        border: 1px solid transparent;
        background: transparent;
        color: var(--text);
        text-align: left;
        border-radius: 10px;
        padding: 0.8rem 0.9rem;
        font-size: 0.96rem;
        font-weight: 700;
        cursor: pointer;
        margin-bottom: 3px;
    }
    .brand-category:last-child { margin-bottom: 0; }
    .brand-category:hover {
        border-color: rgba(0,160,233,0.25);
        background: rgba(0,160,233,0.06);
    }
    .brand-category-all { color: var(--blue-deep); background: rgba(0,160,233,0.06); }
    .brand-menu-link { display:flex; justify-content:space-between; padding:0.72rem 0.8rem; border-radius:10px; font-weight:700; }
    .brand-menu-link:hover { background:rgba(0,160,233,0.07); }
    .brand-menu-link span { color:var(--blue-deep); font-size:1.1rem; }
    .brand-menu-divider { height:1px; margin:10px 4px; background:var(--border); }
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const searchInput = document.getElementById('front-search');
    const categoryFilter = document.getElementById('category-filter');
    const priceFilter = document.getElementById('price-filter');
    const productCards = Array.from(document.querySelectorAll('.product-card'));
    const brandMenu = document.querySelector('.brand-menu');
    const brandButton = document.querySelector('.brand-button');

    if (brandButton && brandMenu) {
        brandButton.addEventListener('click', function () {
            const isOpen = brandMenu.classList.contains('open');
            brandMenu.classList.toggle('open', !isOpen);
            brandButton.setAttribute('aria-expanded', String(!isOpen));
        });

        document.addEventListener('click', function (event) {
            if (!brandMenu.contains(event.target)) {
                brandMenu.classList.remove('open');
                brandButton.setAttribute('aria-expanded', 'false');
            }
        });

        document.querySelectorAll('.brand-category').forEach(function (button) {
            button.addEventListener('click', function () {
                const category = button.dataset.category;
                if (!category) return;
                productCards.forEach(function (card) { card.dataset.menuCategory = category; });
                applyFilters();
                brandMenu.classList.remove('open');
                brandButton.setAttribute('aria-expanded', 'false');
            });
        });
    }

    function applyFilters() {
        const query = (searchInput ? searchInput.value : '').trim().toLowerCase();
        const selectedCategory = productCards[0]?.dataset.menuCategory || 'all';
        const selectedSort = priceFilter ? priceFilter.value : 'featured';

        const visibleCards = productCards.filter(function (card) {
            const title = (card.dataset.title || '').toLowerCase();
            const category = (card.dataset.category || '').toLowerCase();
            const stock = Number(card.dataset.stock || 0);
            const preorder = card.dataset.preorder === '1';
            const matchesQuery = !query || title.includes(query);
            const matchesCategory = selectedCategory === 'all' || category === selectedCategory.toLowerCase();
            const isInShop = stock > 0 || preorder;
            return matchesQuery && matchesCategory && isInShop;
        });

        if (selectedSort === 'asc') {
            visibleCards.sort(function (a, b) {
                return Number(a.dataset.price) - Number(b.dataset.price);
            });
        } else if (selectedSort === 'desc') {
            visibleCards.sort(function (a, b) {
                return Number(b.dataset.price) - Number(a.dataset.price);
            });
        }

        productCards.forEach(function (card) {
            card.style.display = 'none';
        });

        visibleCards.forEach(function (card) {
            card.style.display = '';
            const container = document.getElementById('shop');
            if (container) container.appendChild(card);
        });
    }

    if (searchInput) {
        searchInput.addEventListener('input', applyFilters);
    }
    if (priceFilter) {
        priceFilter.addEventListener('change', applyFilters);
    }

    const productButtons = document.querySelectorAll('[data-product-id]');
    productButtons.forEach(function (button) {
        button.addEventListener('click', async function () {
            const productId = button.dataset.productId;
            if (!productId || button.disabled) return;

            const payload = {
                product_id: productId,
                quantity: 1,
                title: button.dataset.productTitle,
                price: Number(button.dataset.productPrice || 0),
                image: button.dataset.productImage,
                category: button.dataset.productCategory,
            };

            button.disabled = true;
            const originalText = button.textContent;
            button.textContent = 'Adding...';

            try {
                const response = await fetch('/api/cart/add', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload)
                });
                const data = await response.json();
                if (!response.ok) {
                    throw new Error(data.message || 'Could not add product to cart.');
                }

                if (window.refreshCart) {
                    window.refreshCart();
                }
                alert('Item added to cart.');
            } catch (error) {
                alert(error.message || 'Could not add product to cart.');
            } finally {
                button.disabled = false;
                button.textContent = originalText;
            }
        });
    });

    applyFilters();
});
</script>
{% endblock %}