{% extends "base.html" %}

{% block title %}Shop - Semua Produk Sepatu Bola & Perlengkapan Olahraga Original DN Sport{% endblock %}

{% block content %}
<div class="container" style="padding:28px 0 60px">
  
  <div class="ff-section-header" style="margin-bottom:18px">
    <h1 class="ff-heading-title">
      {% if selected_cat == 'football' %}
        FOOTBALL (SEPATU BOLA)
      {% elif selected_cat == 'futsal' %}
        FUTSAL (SEPATU FUTSAL IN)
      {% elif selected_cat == 'running' %}
        RUNNING &amp; SNEAKERS
      {% elif selected_cat == 'apparel' %}
        APPAREL &amp; GEAR
      {% elif selected_cat == 'bestseller' or selected_cat == 'best_seller' %}
        ⭐ PRODUK BEST SELLER (TERLARIS)
      {% elif selected_cat == 'promo' %}
        🔥 PROMO &amp; DISKON SPESIAL
      {% elif selected_brand %}
        PRODUK {{ selected_brand|upper }}
      {% else %}
        SHOP / KATALOG PRODUK
      {% endif %}
    </h1>
    <div id="catalogCount" style="font-family:var(--font-body);font-weight:700;color:var(--ff-text-muted);font-size:13px">
      Memuat produk...
    </div>
  </div>

  <!-- Catalog Toolbar (Fantasista Style) -->
  <div class="catalog-toolbar-ff">
    <!-- Category Tabs -->
    <div class="cat-tabs-row">
      <button class="cat-tab-btn {% if not selected_cat %}active{% endif %}" onclick="filterByCategory('', this)">
        ALL PRODUCTS
      </button>
      <button class="cat-tab-btn {% if selected_cat in ('bestseller', 'best_seller') %}active{% endif %}" onclick="filterByCategory('bestseller', this)" style="color:#d97706;font-weight:800">
        ⭐ BEST SELLER
      </button>
      <button class="cat-tab-btn {% if selected_cat == 'promo' %}active{% endif %}" onclick="filterByCategory('promo', this)" style="color:var(--ff-red);font-weight:800">
        🔥 PROMO SPESIAL
      </button>
      <button class="cat-tab-btn {% if selected_cat == 'football' %}active{% endif %}" onclick="filterByCategory('football', this)">
        FOOTBALL
      </button>
      <button class="cat-tab-btn {% if selected_cat == 'futsal' %}active{% endif %}" onclick="filterByCategory('futsal', this)">
        FUTSAL
      </button>
      <button class="cat-tab-btn {% if selected_cat == 'running' %}active{% endif %}" onclick="filterByCategory('running', this)">
        RUNNING &amp; SNEAKERS
      </button>
      <button class="cat-tab-btn {% if selected_cat == 'apparel' %}active{% endif %}" onclick="filterByCategory('apparel', this)">
        APPAREL &amp; GEAR
      </button>
    </div>

    <!-- Brand Filter Pills -->
    <div style="margin-bottom:14px">
      <div style="font-size:11px;font-weight:700;color:#777;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:8px">
        FILTER BRAND:
      </div>
      <div class="brands-row" style="justify-content:flex-start">
        <button class="brand-btn-pill {% if not selected_brand %}active{% endif %}" data-brand="" onclick="filterByBrand('', this)">
          SEMUA BRAND
        </button>
        {% for b in brands %}
        <button class="brand-btn-pill {% if selected_brand == b.kategori_merk %}active{% endif %}" data-brand="{{ b.kategori_merk }}" onclick="filterByBrand('{{ b.kategori_merk }}', this)">
          {{ b.kategori_merk }}
          <span class="count">{{ b.total }}</span>
        </button>
        {% endfor %}
      </div>
    </div>

    <!-- Secondary Controls -->
    <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;border-top:1px solid #f2f2f2;padding-top:12px">
      <div>
        <label style="display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;cursor:pointer">
          <input type="checkbox" id="readyStockFilter" style="accent-color:var(--ff-gold);width:16px;height:16px">
          <span>Hanya Ready Stock</span>
        </label>
      </div>

      <div style="display:flex;align-items:center;gap:8px">
        <span style="font-size:12.5px;color:#777;font-weight:600">Urutkan:</span>
        <select id="catalogSort" style="padding:6px 12px;border:1px solid #d5d5d5;border-radius:4px;font-size:13px;outline:none;cursor:pointer">
          <option value="popular">Terpopuler</option>
          <option value="discount_desc">Diskon Terbesar (%)</option>
          <option value="price_asc">Harga Terendah &rarr; Tertinggi</option>
          <option value="price_desc">Harga Tertinggi &rarr; Terendah</option>
          <option value="name_asc">Nama Produk (A - Z)</option>
          <option value="stock_desc">Stok Terbanyak</option>
        </select>
        <button class="btn btn-dark" style="padding:6px 14px;font-size:12px" onclick="resetCatalogFilters()">Reset</button>
      </div>
    </div>
  </div>

  <!-- Dynamic Product Grid -->
  <div class="ff-products-grid" id="catalogGrid">
    <!-- Populated by catalog.js -->
  </div>

  <!-- Pagination Controls -->
  <div class="pagination" id="catalogPagination">
    <!-- Populated by catalog.js -->
  </div>

</div>
{% endblock %}