@extends('layouts.app')

@section('title', 'Search Results - ' . \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" style="font-size: 2.5rem; font-weight: 700;">
                    @if(!empty($searchQuery))
                        SEARCH RESULTS: "{{ $searchQuery }}"
                    @else
                        ALL PRODUCTS
                    @endif
                </h1>
                <p class="mb-0" style="font-size: 1.1rem; opacity: 0.9;">
                    @if(!empty($searchQuery))
                        Products matching your search
                    @else
                        Browse all available products
                    @endif
                </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;">Search</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</section>

<!-- Search Bar Section -->
<section class="search-bar-section py-3 mb-4" style="background: #f8f9fa; border-bottom: 1px solid #e0e0e0;">
    <div class="container">
        <form method="GET" action="{{ route('product.search') }}" class="row g-2">
            <div class="col-md-8">
                <input type="text" 
                       name="search" 
                       class="form-control form-control-md" 
                       placeholder="Search products by name or keywords..." 
                       value="{{ $searchQuery }}"
                       autofocus>
            </div>
            <div class="col-md-2">
                <select name="category" class="form-select form-select-lg">
                    <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>
            </div>
            <div class="col-md-2">
                <!-- btn-lg -->
                <button type="submit" class="btn btn-primary w-100">
                    <i class="bi bi-search"></i> Search
                </button>
            </div>
        </form>
    </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">
                    @if($products->count() > 0)
                        Showing <strong>{{ $products->firstItem() ?? 0 }}</strong> to <strong>{{ $products->lastItem() ?? 0 }}</strong> 
                        of <strong>{{ $products->total() }}</strong> 
                        @if(!empty($searchQuery))
                            product{{ $products->total() !== 1 ? 's' : '' }} matching "{{ $searchQuery }}"
                        @else
                            product{{ $products->total() !== 1 ? 's' : '' }}
                        @endif
                    @else
                        No products found
                    @endif
                </p>
            </div>
            <div class="col-md-6 text-end d-flex justify-content-end">
                @php($currentSort = request('sort'))
                <form method="GET" action="{{ route('product.search') }}" 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
                    <input type="hidden" name="search" value="{{ $searchQuery }}">
                    <label for="sortSelect" class="mb-0 text-muted text-nowrap">Sort by:</label>
                    <select id="sortSelect" name="sort" class="form-select" 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>
                    
                    @if(!empty($searchQuery))
                        <a href="{{ route('product.search') }}" class="btn btn-sm btn-outline-secondary text-nowrap">
                            <i class="bi bi-x-circle"></i> Clear Search
                        </a>
                    @endif
                </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('product.search')
            ])

            <!-- 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-6 col-lg-3">
                                @include('partials.product-card', ['product' => $product])
                            </div>
                        @endforeach
                    </div>

                    <!-- Pagination -->
                    @if($products->hasPages())
                    <div class="row mt-3">
                        <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-search" style="font-size: 4rem; color: #ccc;"></i>
                <h3 class="mt-3 text-muted">
                    @if(!empty($searchQuery))
                        No products found for "{{ $searchQuery }}"
                    @else
                        No products available
                    @endif
                </h3>
                <p class="text-muted">
                    @if(!empty($searchQuery))
                        Try searching with different keywords or browse our categories.
                    @else
                        Check back soon for new products!
                    @endif
                </p>
                <div class="mt-4">
                    <a href="{{ route('product.search') }}" class="btn btn-outline-primary me-2">
                        <i class="bi bi-arrow-left"></i> Clear Search
                    </a>
                    <a href="{{ route('home') }}" class="btn btn-primary">
                        <i class="bi bi-house"></i> Back to Home
                    </a>
                </div>
            </div>
                @endif
            </div>
        </div>
    </div>
</section>
@endsection

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