@extends('layouts.app')

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

@push('styles')
<link rel="stylesheet" href="{{ asset('css/homepage.css') }}">
<style>
    /* Pagination Styles - Matching Brand Standards */
    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        margin: 2rem 0;
        padding: 0;
        list-style: none;
        flex-wrap: wrap;
    }

    .pagination .page-item {
        margin: 0;
    }

    .pagination .page-link {
        min-width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 1rem;
        margin: 0;
        color: var(--color-primary);
        background: #ffffff;
        border: 2px solid #e2e8f0;
        border-radius: 10px;
        font-weight: 600;
        font-size: 0.9rem;
        text-decoration: none;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .pagination .page-link:hover {
        background: var(--color-primary);
        color: #ffffff;
        border-color: var(--color-primary);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(17, 72, 67, 0.2);
    }

    .pagination .page-link:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(17, 72, 67, 0.15);
    }

    .pagination .page-item.active .page-link {
        background: var(--color-primary);
        color: #ffffff;
        border-color: var(--color-primary);
        box-shadow: 0 4px 12px rgba(17, 72, 67, 0.25);
        cursor: default;
    }

    .pagination .page-item.active .page-link:hover {
        transform: none;
        box-shadow: 0 4px 12px rgba(17, 72, 67, 0.25);
    }

    .pagination .page-item.disabled .page-link {
        color: #cbd5e0;
        background: #f7fafc;
        border-color: #e2e8f0;
        cursor: not-allowed;
        opacity: 0.6;
    }

    .pagination .page-item.disabled .page-link:hover {
        background: #f7fafc;
        color: #cbd5e0;
        transform: none;
        box-shadow: none;
        border-color: #e2e8f0;
    }
</style>
@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" style="font-size: 2.5rem; font-weight: 700;">NEW ARRIVALS</h1>
                <p class="mb-0" style="font-size: 1.1rem; opacity: 0.9;">Discover Our Latest Products</p>
            </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;">New Arrivals</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</section>

<!-- Filter 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-6">
                <p class="mb-0 text-muted">
                    Showing <strong>{{ $products->firstItem() ?? 0 }}</strong> to <strong>{{ $products->lastItem() ?? 0 }}</strong> 
                    of <strong>{{ $products->total() }}</strong> products
                </p>
            </div>
            <div class="col-md-6">
                <form method="GET" action="{{ route('collections.show', 'new-arrivals') }}" class="d-flex gap-2">
                    <select name="category" class="form-select form-select-sm" style="max-width: 200px;" onchange="this.form.submit()">
                        <option value="">All Categories</option>
                        @if(isset($categoriesWithCounts))
                            @foreach($categoriesWithCounts as $category)
                                <option value="{{ $category->slug }}" {{ request('category') == $category->slug ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        @endif
                    </select>
                </form>
            </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('collections.show', 'new-arrivals')
            ])

            <!-- 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 -->
                    @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" style="font-size: 4rem; color: #ccc;"></i>
                        <h3 class="mt-3 text-muted">No New Arrivals Yet</h3>
                        <p class="text-muted">Check back soon for our latest products!</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