@extends('layouts.app')

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

@push('styles')
<link rel="stylesheet" href="{{ asset('css/homepage.css') }}">
<style>
    .select2-results__option--highlighted {
        background-color: var(--color-primary) !important;
        color: white !important;
    }
</style>
@endpush

@push('head')
<link rel="canonical" href="{{ route('collections.show', $collectionSlug) }}">
@endpush

@section('content')
<!-- Page Header -->
<section class="page-header py-4">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h1 class="mb-2">{{ strtoupper($collectionName) }}</h1>
                @if($collectionType === 'category' && $category && $category->description)
                    <p class="mb-0">{{ $category->description }}</p>
                @elseif($collectionType === 'special')
                    <p class="mb-0">
                        @if($collectionSlug === 'best-sellers')
                            Our most popular products loved by customers
                        @elseif($collectionSlug === 'new-arrivals')
                            Discover our latest products just added to the collection
                        @endif
                    </p>
                @else
                    <p class="mb-0">Shop our curated collection</p>
                @endif
            </div>
            <div class="col-md-4 text-end">
                <!-- Breadcrumb Navigation -->
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb justify-content-end mb-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('home') }}">Home</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ route('collections.show', 'best-sellers') }}">Collections</a>
                        </li>
                        <li class="breadcrumb-item active">{{ $collectionName }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</section>

{{-- Subcategories Section Removed --}}

<!-- Filter & Count Section -->
<section class="filter-section py-3 mb-4">
    <div class="container">
        <div class="row align-items-center g-3">
            <div class="col-md-8">
                <p class="mb-0 text-muted">
                    Showing <strong>{{ $products->firstItem() ?? 0 }}</strong> to <strong>{{ $products->lastItem() ?? 0 }}</strong> 
                    of <strong>{{ $products->total() }}</strong> 
                    @if($collectionType === 'category')
                        @if(isset($isParentCategory) && $isParentCategory)
                            products in {{ $collectionName }} and subcategories
                        @else
                            products in {{ $collectionName }}
                        @endif
                    @else
                        product{{ $products->total() !== 1 ? 's' : '' }}
                    @endif
                </p>
            </div>
            <div class="col-md-4 d-flex justify-content-md-end">
                @php($currentSort = request('sort'))
                <form method="GET" action="{{ route('collections.show', $collectionSlug) }}" class="d-flex align-items-center gap-2 w-100">
                    @foreach(request()->except('sort', 'page') as $key => $value)
                        @if(is_array($value))
                            @foreach($value as $item)
                                <input type="hidden" name="{{ $key }}[]" value="{{ $item }}">
                            @endforeach
                        @else
                            <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                        @endif
                    @endforeach
                    <label for="sortSelect" class="mb-0 text-muted text-nowrap">Sort by:</label>
                    <select id="sortSelect" name="sort" class="form-select selectpicker" data-style="btn-primary" onchange="this.form.submit()">
                        <option value="" {{ $currentSort === null || $currentSort === 'newest' ? 'selected' : '' }}>Newest</option>
                        <option value="price_asc" {{ $currentSort === 'price_asc' ? 'selected' : '' }}>Low to High</option>
                        <option value="price_desc" {{ $currentSort === 'price_desc' ? 'selected' : '' }}>High to Low</option>
                        <option value="most_sale" {{ $currentSort === 'most_sale' ? 'selected' : '' }}>Popular Products</option>
                    </select>
                </form>
            </div>
        </div>
    </div>
</section>

<!-- Products Grid -->
<section class="products-section">
    <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('collections.show', $collectionSlug)
            ])

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

                    <!-- Pagination -->
                    @if($products->hasPages())
                        <div class="row mt-5">
                            <div class="col-12 d-flex justify-content-center">
                                {{ $products->links('vendor.pagination.collection') }}
                            </div>
                        </div>
                    @endif
                @else
                    <div class="text-center py-5">
                        <i class="bi bi-box-seam empty-products-icon"></i>
                        <h3 class="mt-3 text-muted">No Products Found</h3>
                        <p class="text-muted">
                            @if($collectionType === 'category')
                                There are no products in this category yet.
                            @else
                                No products available in this collection at the moment.
                            @endif
                        </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