@extends('layouts.store')

@section('title', $title)

@section('content')
<div class="mw-page-hero">
    <div class="container">
        <div class="mw-breadcrumb"><a href="{{ route('home') }}">Home</a> / {{ $title }}</div>
        <h1>{{ $title }}</h1>
    </div>
</div>

<section class="mw-section" style="padding-top:1.5rem">
    <div class="container mw-shop">
        <aside class="mw-filters">
            <h4>Categories</h4>
            <a href="{{ route('shop') }}" class="{{ !$currentCategory ? 'active' : '' }}">All Products</a>
            @foreach($categories as $cat)
                @continue(in_array($cat->slug, ['bestsellers','uncategorized','delhi'], true))
                <a href="{{ route('category.show', $cat) }}"
                   class="{{ $currentCategory && $currentCategory->id === $cat->id ? 'active' : '' }}">
                    {{ $cat->name }}
                </a>
            @endforeach
            <form action="{{ route('shop') }}" method="GET" style="margin-top:1rem">
                <div class="mw-field">
                    <label>Search</label>
                    <input type="search" name="q" value="{{ request('q') }}" placeholder="Search products">
                </div>
                <button class="mw-btn mw-btn-block" type="submit">Search</button>
            </form>
        </aside>
        <div>
            @if($products->count())
                <div class="mw-products">
                    @foreach($products as $product)
                        <x-product-card :product="$product" />
                    @endforeach
                </div>
                <div class="mw-pagination">{{ $products->links('store.partials.pagination') }}</div>
            @else
                <div class="mw-panel"><p>No products found.</p></div>
            @endif
        </div>
    </div>
</section>
@endsection