@extends('themes.organic.layouts.master')
@section('title', $q !== '' ? ('Search: ' . $q) : 'Search Products')
@section('content')
<div class="container py-4">
    <div class="row justify-content-center mb-4">
        <div class="col-lg-8">
            <form action="{{ route('frontend.search') }}" method="GET" class="search-form-lg">
                <input type="text" name="q" value="{{ $q }}" placeholder="পণ্যের নাম, ক্যাটাগরি, SKU লিখুন..." autocomplete="off" id="searchPageInput">
                <button type="submit"><i class="fas fa-search"></i> Search</button>
            </form>
        </div>
    </div>

    <h4 class="mb-4">
        <i class="fas fa-search me-2"></i>
        @if($q !== '')
            "{{ $q }}" এর ফলাফল ({{ $products->total() }})
        @else
            সকল পণ্য ({{ $products->total() }})
        @endif
    </h4>

    @if($products->count())
    <div class="{{ \App\Services\ProductItemSettingsService::gridRowClass('category') }}">
        @foreach($products as $product)
        @include('themes.organic.layouts.product-card', ['product' => $product, 'gridContext' => 'category'])
        @endforeach
    </div>
    <div class="mt-4">{{ $products->links() }}</div>
    @else
    <div class="text-center py-5 text-muted">
        <i class="fas fa-search fa-3x mb-3 d-block opacity-50"></i>
        <h5>কোনো পণ্য পাওয়া যায়নি।</h5>
        <a href="{{ route('frontend.products') }}" class="btn btn-success mt-2 me-2">সকল পণ্য দেখুন</a>
        <a href="{{ route('frontend.home') }}" class="btn btn-outline-secondary mt-2">হোমে ফিরে যান</a>
    </div>
    @endif
</div>
@endsection

@push('styles')
<style>
.search-form-lg {
    display:flex; gap:0; border:2px solid #d1d5db; border-radius:10px; overflow:hidden; background:#fff;
}
.search-form-lg:focus-within { border-color:#65971e; box-shadow:0 0 0 3px rgba(101,151,30,.15); }
.search-form-lg input {
    flex:1; border:none; outline:none; padding:14px 16px; font-size:16px;
}
.search-form-lg button {
    border:none; background:#65971e; color:#fff; padding:0 22px; font-weight:700;
}
</style>
@endpush