@extends('layouts.app')
@section('title', "Shop Makhana — God's Treat")

@push('styles')
<style>
  .shop-layout{display:grid;grid-template-columns:240px 1fr;gap:32px;padding:100px 5% 60px;max-width:1400px;margin:0 auto;}
  .sidebar{position:sticky;top:100px;height:fit-content;}
  .filter-block{margin-bottom:28px;}
  .filter-block h3{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--white);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border);}
  .filter-check{display:flex;align-items:center;gap:10px;padding:5px 0;cursor:pointer;color:var(--muted);font-size:.875rem;}
  .filter-check input{accent-color:var(--orange);}
.page-hero{padding:110px 5% 30px;background:linear-gradient(180deg,rgba(255,107,26,.06),transparent);}
  .sort-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
  .sort-bar select{background:var(--card);border:1px solid var(--border2);color:var(--white);padding:8px 14px;border-radius:8px;font-size:.85rem;}
  @media(max-width:768px){.shop-layout{grid-template-columns:1fr}.sidebar{display:none}}
</style>
@endpush

@section('content')

<div class="page-hero">
  <h1 style="font-family:'Bebas Neue',sans-serif;font-size:clamp(2.5rem,6vw,4rem)">SHOP <span class="gradient-text">MAKHANA</span></h1>
  <p style="color:var(--muted);margin-top:8px">{{ $products->count() }} products · Free delivery above ₹499</p>
</div>

<div class="shop-layout">
  <!-- Sidebar -->
  <aside class="sidebar">
    <div class="filter-block">
      <h3>Category</h3>
      @foreach(['Premium','Regular','Kanha Poshak'] as $cat)
      <label class="filter-check">
        <input type="checkbox" name="category" value="{{ $cat }}" {{ request('category') === $cat ? 'checked' : '' }}> {{ $cat }}
      </label>
      @endforeach
    </div>
    <div class="filter-block">
      <h3>Sort By</h3>
      <label class="filter-check"><input type="radio" name="sort" value="default"> Featured</label>
      <label class="filter-check"><input type="radio" name="sort" value="price_low"> Price: Low to High</label>
      <label class="filter-check"><input type="radio" name="sort" value="price_high"> Price: High to Low</label>
      <label class="filter-check"><input type="radio" name="sort" value="discount"> Biggest Discount</label>
    </div>
    <button class="btn-primary" style="width:100%;padding:12px" onclick="applyFilters()">Apply Filters</button>
  </aside>

  <!-- Products -->
  <main>
    <div class="sort-bar">
      <span style="color:var(--muted);font-size:.875rem">{{ $products->count() }} results</span>
      <select onchange="window.location.href='?sort='+this.value">
        <option value="">Sort: Featured</option>
        <option value="price_low">Price: Low to High</option>
        <option value="price_high">Price: High to Low</option>
        <option value="discount">Biggest Discount</option>
      </select>
    </div>

    <div class="products-grid">
      @forelse($products as $product)
      <div class="product-card reveal" onclick="window.location='{{ route('product.show', $product->slug) }}'">
        <div class="product-img-wrap">
          <img src="{{ asset('images/' . $product->image) }}" alt="{{ $product->name }}"
            onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22><rect width=%22100%22 height=%22100%22 fill=%22%23ff6b1a11%22/><text x=%2250%22 y=%2258%22 text-anchor=%22middle%22 fill=%22%23ff6b1a55%22 font-size=%2240%22>🌾</text></svg>'"/>
          @if($product->discount_percent > 0)
            <div class="prod-badges"><span class="price-off">{{ $product->discount_percent }}% OFF</span></div>
          @endif
          <button class="prod-wish" onclick="event.stopPropagation();this.classList.toggle('liked');this.textContent=this.classList.contains('liked')?'♥':'♡'">♡</button>
        </div>
        <div class="product-info">
          <div class="prod-cat">{{ $product->category }}</div>
          <div class="prod-name"><a href="{{ route('product.show', $product->slug) }}" onclick="event.stopPropagation()">{{ $product->name }}</a></div>
          <div class="prod-weight">{{ $product->weight }}</div>
          <div class="prod-pricing">
            <span class="price-cur">₹{{ number_format($product->price) }}</span>
            @if($product->old_price)
              <span class="price-old">₹{{ number_format($product->old_price) }}</span>
              <span class="price-off">{{ $product->discount_percent }}% OFF</span>
            @endif
          </div>
          <form method="POST" action="{{ route('cart.add') }}" onclick="event.stopPropagation()">
            @csrf
            <input type="hidden" name="product_id" value="{{ $product->id }}">
            <button type="submit" class="btn-add">🛒 Add to Cart</button>
          </form>
        </div>
      </div>
      @empty
      <div style="grid-column:1/-1;text-align:center;padding:60px 20px">
        <div style="font-size:3rem;margin-bottom:16px">🔍</div>
        <h3>No products found</h3>
        <a href="{{ route('products') }}" class="btn-primary" style="margin-top:16px;display:inline-flex">View All</a>
      </div>
      @endforelse
    </div>
  </main>
</div>

@endsection

@push('scripts')
<script>
function applyFilters(){
  const cats=[...document.querySelectorAll('input[name=category]:checked')].map(i=>i.value);
  const sort=document.querySelector('input[name=sort]:checked')?.value||'';
  const params=new URLSearchParams();
  if(cats.length)params.set('category',cats[0]);
  if(sort)params.set('sort',sort);
  window.location.href='{{ route('products') }}?'+params.toString();
}
</script>
@endpush