@extends('layouts.app')

@section('content')
<section class="page-header">
  <div class="container">
    <h1>Semua Produk</h1>
    <div class="filter-bar">
      <div class="search-box">
        <input type="text" id="search-input" placeholder="Cari kue..." value="{{ request('search', '') }}">
        <button class="btn btn-sm" onclick="App.searchProducts()">Cari</button>
      </div>
      <select id="category-filter" onchange="App.filterCategory(this.value)">
        <option value="">Semua Kategori</option>
      </select>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="product-grid" id="products-grid">
      <div class="loading">Memuat...</div>
    </div>
  </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', async function() {
  const params = new URLSearchParams(window.location.search);
  const category = params.get('category') || '';
  const search = params.get('search') || '';

  const allRes = await api.getProducts();
  const categories = [...new Set((allRes.data || []).map(p => p.category))];

  const select = document.getElementById('category-filter');
  categories.forEach(c => {
    const opt = document.createElement('option');
    opt.value = c;
    opt.textContent = c;
    if (c === category) opt.selected = true;
    select.appendChild(opt);
  });

  const query = {};
  if (category) query.category = category;
  if (search) query.search = search;

  const res = await api.getProducts(query);
  const products = res.data || [];

  document.getElementById('products-grid').innerHTML = products.length > 0
    ? products.map(p => App.productCard(p)).join('')
    : '<div class="empty-state"><p>Tidak ada produk ditemukan.</p><a href="/products" class="btn btn-primary">Lihat Semua Produk</a></div>';
});
</script>
@endsection