@extends('layouts.app')

@section('content')
<!-- Banner -->
  <section class="page-banner" style="background-image: url('images/hero_ceiling.png');">
    <div class="container page-banner-content">
      <h1>Product Catalog</h1>
      <p>Explore our complete ecosystem of premium ceilings, roofing sheets, wall panels, and installation accessories. Select a product to request custom estimates.</p>
    </div>
  </section>

  <!-- Product Catalog Grid -->
  <section class="section-padding container">
    <div class="filter-search-bar glass">
      <div class="search-box">
        <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/></svg>
        <input type="text" id="productSearch" placeholder="Search products..." />
      </div>
      <div class="filter-info">
        <svg class="filter-info-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="21" y2="21"/><line x1="4" x2="20" y1="14" y2="14"/><line x1="4" x2="20" y1="7" y2="7"/></svg>
        <span>{{ $products->count() }} Products</span>
      </div>
    </div>

    <!-- Category Tabs -->
    <div class="category-tabs-container">
      <button class="cat-tab-btn active" data-id="all">All Products</button>
      @foreach($categories as $cat)
      <button class="cat-tab-btn" data-id="{{ $cat->slug }}">{{ $cat->name }}</button>
      @endforeach
    </div>

    <!-- Product Cards -->
    <div class="grid-3" id="productGrid">
      @foreach($products as $product)
      <div class="card card-hover product-card" data-category="{{ $product->category->slug ?? '' }}">
        <div class="prod-img-wrapper">
          <img src="{{ Str::startsWith($product->image ?? '', 'products/') ? asset('storage/' . $product->image) : asset($product->image ?? 'images/hero_ceiling.png') }}" alt="{{ $product->name }}" class="prod-img">
          <span class="prod-brand-tag">i-Panel</span>
        </div>
        <div class="prod-content">
          <div class="prod-header-meta">
            <span class="prod-cat-tag">{{ $product->category->name ?? 'General' }}</span>
            <span class="prod-price-tag">Rs. {{ number_format($product->price, 2) }}</span>
          </div>
          <h3>{{ $product->name }}</h3>
          <p class="prod-desc-teaser">{{ Str::limit($product->description, 100) }}</p>
          <div class="prod-actions">
            <button class="btn btn-primary w-full" data-trigger="modal" data-product="{{ Str::slug($product->name) }}">
              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><line x1="3" x2="21" y1="6" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></svg> Request Details & Quote
            </button>
          </div>
        </div>
      </div>
      @endforeach
    </div>

    <!-- Empty Message -->
    <div class="no-products-found" id="noProducts" style="display:none;">
      <svg class="no-prod-icon" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>
      <h3>No Products Found</h3>
      <p>Try different filters or browse all products.</p>
    </div>
  </section>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
  const tabs = document.querySelectorAll('.cat-tab-btn');
  const cards = document.querySelectorAll('.product-card');
  const searchInput = document.getElementById('productSearch');
  const noProducts = document.getElementById('noProducts');
  const grid = document.getElementById('productGrid');
  let activeCategory = 'all';

  function filterProducts() {
    const query = (searchInput?.value || '').toLowerCase();
    let visible = 0;

    cards.forEach(card => {
      const cat = card.dataset.category;
      const text = card.textContent.toLowerCase();
      const matchCat = activeCategory === 'all' || cat === activeCategory;
      const matchSearch = !query || text.includes(query);
      card.style.display = (matchCat && matchSearch) ? '' : 'none';
      if (matchCat && matchSearch) visible++;
    });

    noProducts.style.display = visible === 0 ? 'block' : 'none';
  }

  tabs.forEach(tab => {
    tab.addEventListener('click', function() {
      tabs.forEach(t => t.classList.remove('active'));
      this.classList.add('active');
      activeCategory = this.dataset.id;
      filterProducts();
    });
  });

  searchInput?.addEventListener('input', filterProducts);
});
</script>
@endpush