@extends('layouts.app')

@section('title', $category->name . ' - ' . \App\Models\Setting::get('site_name', 'KiyoKart'))

@push('styles')
<link rel="stylesheet" href="{{ asset('css/homepage.css') }}">
@endpush

@section('content')
<!-- Page Header -->
<section class="page-header py-4 mb-4" style="background: var(--color-primary); color: white;">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h1 class="mb-2">{{ strtoupper($category->name) }}</h1>
                @if($category->description)
                    <p class="mb-0" style="font-size: 1.1rem; opacity: 0.9;">{{ $category->description }}</p>
                @else
                    <p class="mb-0" style="font-size: 1.1rem; opacity: 0.9;">Shop our curated collection</p>
                @endif
            </div>
            <div class="col-md-4 text-end">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb justify-content-end mb-0" style="background: transparent;">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}" style="color: rgba(255,255,255,0.8);">Home</a></li>
                        <li class="breadcrumb-item active" style="color: white;">{{ $category->name }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</section>

<!-- Filter & Count Section -->
<section class="filter-section py-3 mb-4" style="background: #f8f9fa; border-bottom: 1px solid #e0e0e0;">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-12">
                <p class="mb-0 text-muted">
                    Showing <strong>{{ $products->firstItem() ?? 0 }}</strong> to <strong>{{ $products->lastItem() ?? 0 }}</strong> 
                    of <strong>{{ $products->total() }}</strong> products in {{ $category->name }}
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Products Grid -->
<section class="products-section py-5">
    <div class="container product-page-wrapper">
        <div class="products-with-sidebar">
            <!-- Category Filter Sidebar -->
            @include('partials.category-filter-sidebar', [
                'categoriesWithCounts' => $categoriesWithCounts,
                'selectedCategoryIds' => $selectedCategoryIds ?? [],
                'formAction' => route('category.show', $category->slug)
            ])

            <!-- Products Content -->
            <div class="products-content" style="flex: 1;">
                @if($products->count() > 0)
                    <div class="row g-4">
                        @foreach($products as $product)
                            <div class="col-6 col-md-4 col-lg-3">
                                @include('partials.product-card', ['product' => $product])
                            </div>
                        @endforeach
                    </div>

                    <!-- Pagination -->
                    <div class="row mt-5">
                        <div class="col-12 d-flex justify-content-center">
                            {{ $products->links('vendor.pagination.collection') }}
                        </div>
                    </div>
                @else
                    <div class="text-center py-5">
                        <i class="bi bi-box-seam" style="font-size: 4rem; color: #ccc;"></i>
                        <h3 class="mt-3 text-muted">No Products Found</h3>
                        <p class="text-muted">There are no products in this category yet.</p>
                        <a href="{{ route('home') }}" class="btn btn-primary mt-3">Back to Home</a>
                    </div>
                @endif
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script src="{{ asset('js/category-filter.js') }}"></script>
@endpush