<?php /** /app/views/public/catalogo.php */ ?>

<section style="padding: 60px 0 40px; background: var(--color-soft);">
  <div class="container" style="text-align:center">
    <span style="font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;color:var(--color-gold)">Coleção OFFICE</span>
    <h1 style="margin:12px 0 8px">Catálogo</h1>
    <p style="color:var(--color-muted)">Encontre o modelo perfeito para você</p>
  </div>
</section>

<section style="padding: 48px 0">
  <div class="container">
    <form method="get" action="<?= url('catalogo') ?>" id="filtroForm">
      <div class="catalog-layout">

        <!-- FILTROS -->
        <aside class="catalog-filters">
          <div class="filter-group">
            <h4>Busca</h4>
            <div class="search-box">
              <input type="text" name="busca" class="form-control" placeholder="Nome ou código"
                value="<?= e($filtros['busca'] ?? '') ?>">
            </div>
          </div>

          <?php if (!empty($categorias)): ?>
          <div class="filter-group">
            <h4>Categoria</h4>
            <label><input type="radio" name="categoria" value="" class="auto-submit" <?= empty($filtros['categoria']) ? 'checked' : '' ?>> Todas</label>
            <?php foreach ($categorias as $cat): ?>
              <label>
                <input type="radio" name="categoria" value="<?= e($cat['slug']) ?>" class="auto-submit"
                  <?= ($filtros['categoria'] ?? '') === $cat['slug'] ? 'checked' : '' ?>>
                <?= e($cat['nome']) ?>
              </label>
            <?php endforeach; ?>
          </div>
          <?php endif; ?>

          <?php if (!empty($colecoes)): ?>
          <div class="filter-group">
            <h4>Coleção</h4>
            <label><input type="radio" name="colecao" value="" class="auto-submit" <?= empty($filtros['colecao']) ? 'checked' : '' ?>> Todas</label>
            <?php foreach ($colecoes as $col): ?>
              <label>
                <input type="radio" name="colecao" value="<?= e($col['slug']) ?>" class="auto-submit"
                  <?= ($filtros['colecao'] ?? '') === $col['slug'] ? 'checked' : '' ?>>
                <?= e($col['nome']) ?>
              </label>
            <?php endforeach; ?>
          </div>
          <?php endif; ?>

          <div class="filter-group">
            <h4>Material</h4>
            <input type="text" name="material" class="form-control" placeholder="Ex: Acetato, Metal"
              value="<?= e($filtros['material'] ?? '') ?>">
          </div>

          <div class="filter-group">
            <h4>Cor</h4>
            <input type="text" name="cor" class="form-control" placeholder="Ex: Preto, Dourado"
              value="<?= e($filtros['cor'] ?? '') ?>">
          </div>

          <div class="filter-group">
            <h4>Características</h4>
            <label><input type="checkbox" name="polarizado" value="1" class="auto-submit" <?= !empty($filtros['polarizado']) ? 'checked' : '' ?>> Polarizado</label>
            <label><input type="checkbox" name="uv" value="1" class="auto-submit" <?= !empty($filtros['uv']) ? 'checked' : '' ?>> Proteção UV</label>
          </div>

          <div style="display:flex;gap:8px">
            <button type="submit" class="btn btn-sm" style="flex:1">Filtrar</button>
            <a href="<?= url('catalogo') ?>" class="btn btn-outline btn-sm">Limpar</a>
          </div>
        </aside>

        <!-- LISTA -->
        <div>
          <div class="catalog-toolbar">
            <div class="count"><strong><?= $pagination['total'] ?></strong> produtos encontrados</div>
            <select name="ordem" class="form-select auto-submit" style="max-width:220px">
              <option value="recentes"   <?= ($filtros['ordem'] ?? '') === 'recentes'   ? 'selected' : '' ?>>Mais recentes</option>
              <option value="destaque"   <?= ($filtros['ordem'] ?? '') === 'destaque'   ? 'selected' : '' ?>>Destaques primeiro</option>
              <option value="nome_asc"   <?= ($filtros['ordem'] ?? '') === 'nome_asc'   ? 'selected' : '' ?>>Nome (A-Z)</option>
              <option value="nome_desc"  <?= ($filtros['ordem'] ?? '') === 'nome_desc'  ? 'selected' : '' ?>>Nome (Z-A)</option>
              <option value="preco_asc"  <?= ($filtros['ordem'] ?? '') === 'preco_asc'  ? 'selected' : '' ?>>Menor preço</option>
              <option value="preco_desc" <?= ($filtros['ordem'] ?? '') === 'preco_desc' ? 'selected' : '' ?>>Maior preço</option>
            </select>
          </div>

          <?php if (empty($produtos)): ?>
            <div class="empty-state">
              <h3>Nenhum produto encontrado</h3>
              <p>Tente alterar os filtros para ver mais modelos.</p>
            </div>
          <?php else: ?>
            <div class="products-grid">
              <?php foreach ($produtos as $p): ?>
                <a class="product-card" href="<?= url('produto/' . $p['slug']) ?>">
                  <div class="product-card__img">
                    <?php if ($p['destaque']): ?><span class="product-card__badge">Destaque</span><?php endif; ?>
                    <?php if (!empty($p['imagem_principal'])): ?>
                      <img src="<?= upload_url($p['imagem_principal']) ?>" alt="<?= e($p['nome']) ?>" loading="lazy">
                    <?php else: ?>
                      <div class="empty">◎</div>
                    <?php endif; ?>
                  </div>
                  <div class="product-card__body">
                    <div class="product-card__sku"><?= e($p['sku']) ?></div>
                    <div class="product-card__name"><?= e($p['nome']) ?></div>
                    <?php if (!empty($p['mostrar_preco']) && !empty($p['preco'])): ?>
                      <div class="product-card__price"><?= price((float)$p['preco']) ?></div>
                    <?php endif; ?>
                  </div>
                </a>
              <?php endforeach; ?>
            </div>

            <?php if ($pagination['pages'] > 1): ?>
              <div class="pagination">
                <?php
                  $params = $_GET; unset($params['page']);
                  $base = url('catalogo') . '?' . http_build_query($params);
                  $base = rtrim($base, '?');
                  $sep = str_contains($base, '?') ? '&' : '?';
                  for ($i = 1; $i <= $pagination['pages']; $i++):
                    $cls = $i === $pagination['page'] ? 'current' : '';
                ?>
                  <?php if ($cls): ?>
                    <span class="<?= $cls ?>"><?= $i ?></span>
                  <?php else: ?>
                    <a href="<?= $base . $sep . 'page=' . $i ?>"><?= $i ?></a>
                  <?php endif; ?>
                <?php endfor; ?>
              </div>
            <?php endif; ?>
          <?php endif; ?>
        </div>

      </div>
    </form>
  </div>
</section>
