@extends(‘frontEnd.layouts.master’)
@section(‘content’)
<style>
.shop-shell{max-width:1280px;margin:0 auto;padding:18px;}
.shop-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:14px;}
.shop-head h2{font-size:22px;font-weight:700;margin:0;color:#222;}
.filter-bar{background:#fff;border:1px solid #eee;border-radius:10px;padding:12px 14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px;box-shadow:0 2px 8px rgba(0,0,0,.04);}
.filter-bar select,.filter-bar input[type=number]{height:38px;border:1px solid #ddd;border-radius:8px;padding:0 10px;font-size:14px;background:#fff;color:#333;}
.filter-bar button,.filter-bar .reset-btn{height:38px;padding:0 16px;border:0;border-radius:8px;background:#ee4d2d;color:#fff;font-weight:600;cursor:pointer;font-size:14px;}
.filter-bar .reset-btn{background:#6c757d;text-decoration:none;display:inline-flex;align-items:center;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;}
.card{background:#fff;border:1px solid #eee;border-radius:10px;overflow:hidden;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;}
.card:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(0,0,0,.08);}
.card .img{aspect-ratio:1/1;background:#f7f7f7;display:block;overflow:hidden;}
.card .img img{width:100%;height:100%;object-fit:cover;display:block;}
.card .body{padding:10px 12px;display:flex;flex-direction:column;gap:6px;flex:1;}
.card .name{font-size:14px;color:#222;line-height:1.35;min-height:38px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card .price{font-size:15px;font-weight:700;color:#ee4d2d;}
.card .old{font-size:12px;color:#999;text-decoration:line-through;margin-left:6px;font-weight:400;}
.empty{background:#fff;border:1px dashed #e2e2e2;border-radius:10px;padding:40px;text-align:center;color:#888;}
.pagination-bar{margin-top:18px;display:flex;justify-content:center;}
</style>

<div class=”shop-shell”>
<div class=”shop-head”>
<h2>All Products</h2>
<div style=”font-size:13px;color:#666;”>
Showing {{ $products->count() }} of {{ $products->total() }} products
</div>
</div>

{{– SORT + PRICE FILTER –}}
<form method=”GET” action=”{{ route(‘shop’) }}” class=”filter-bar”>
<select name=”sort” onchange=”this.form.submit()”>
<option value=””>Default (Latest)</option>
<option value=”1″ {{ request(‘sort’)==1?’selected’:” }}>Newest First</option>
<option value=”2″ {{ request(‘sort’)==2?’selected’:” }}>Oldest First</option>
<option value=”3″ {{ request(‘sort’)==3?’selected’:” }}>Price High → Low</option>
<option value=”4″ {{ request(‘sort’)==4?’selected’:” }}>Price Low → High</option>
<option value=”5″ {{ request(‘sort’)==5?’selected’:” }}>Name A → Z</option>
<option value=”6″ {{ request(‘sort’)==6?’selected’:” }}>Name Z → A</option>
</select>

<input type=”number” name=”min_price” placeholder=”Min Price” value=”{{ request(‘min_price’) }}” min=”0″>
<input type=”number” name=”max_price” placeholder=”Max Price” value=”{{ request(‘max_price’) }}” min=”0″>
<button type=”submit”>Filter</button>
<a href=”{{ route(‘shop’) }}” class=”reset-btn”>Reset</a>
</form>

{{– PRODUCT GRID –}}
@if($products->count() > 0)
<div class=”grid”>
@foreach($products as $product)
@php
$img = optional($product->image)->image;
$hasOld = !empty($product->old_price) && $product->old_price > $product->new_price;
@endphp
<div class=”card”>
<a href=”{{ route(‘product’, $product->slug) }}” class=”img”>
@if($img)
<img src=”{{ asset($img) }}” alt=”{{ $product->name }}” loading=”lazy”>
@else
<img src=”{{ asset(‘frontend/images/no-image.png’) }}” alt=”No image” loading=”lazy”>
@endif
</a>
<div class=”body”>
<a href=”{{ route(‘product’, $product->slug) }}” class=”name” title=”{{ $product->name }}”>
{{ \Illuminate\Support\Str::limit($product->name, 60) }}
</a>
<div>
<span class=”price”>৳{{ number_format($product->new_price, 2) }}</span>
@if($hasOld)
<span class=”old”>৳{{ number_format($product->old_price, 2) }}</span>
@endif
</div>
</div>
</div>
@endforeach
</div>

<div class=”pagination-bar”>
{{ $products->appends(request()->query())->links() }}
</div>
@else
<div class=”empty”>
<h4 style=”margin:0 0 6px;color:#555;”>No products found</h4>
<p style=”margin:0;”>Try adjusting your filters or browse all products.</p>
</div>
@endif
</div>
@endsection