@extends('frontend.layouts.app')

@section('title') {{ $title ?? 'Top Categories' }} @endsection
@section('meta')
<meta property="og:title" content="{{ $og_title }}" />
<meta property="og:description" content="{{ $og_description }}" />
<meta property="og:image" content="{{ getSeoImage($og_image) }}" />
@endsection

@push('style')
@endpush

@section('content')
    <!-- Breadcrumb Section -->
    @include('frontend.layouts.includes.breadcrumb',
        ['links'=>[[$title => route('frontend.top-categories') ]]])

    <!-- Top Categories Section -->
    <div class="top-categories-section pt-2 pb-3 pt-lg-3 pb-lg-5">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h4 class="mb-0">Popular Categories</h4>
            </div>

            @if ($categories->count() == 0)
                <div class="no-categories text-center py-5">
                    <i class="far fa-folder-open fa-3x text-muted"></i>
                    <h4 class="mt-3">No categories found</h4>
                    <p class="text-muted">Categories will appear here based on top searches</p>
                    <a href="{{ url('/') }}" class="btn btn-primary mt-3">Browse Items</a>
                </div>
            @else
                <div class="row g-4">
                    <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 g-3">
                        @foreach ($categories as $category)
                            <div class="col">
                                <div class="category_item d-flex align-items-center position-relative p-3 p-lg-4 h-100 border-end border-bottom">
                                    <div class="category_icon bg-light rounded p-2 shadow-sm me-2">
                                        <a href="{{ route('frontend.category', ['category' => $category->slug]) }}" class="stretched-link">
                                            @if($category->image)
                                                <img src="{{ getIcon($category->image) }}" width="40" class="img-fluid" alt="{{ $category->slug }}">
                                            @endif
                                        </a>
                                    </div>
                                    <div class="category_content">
                                        <div class="category_name mb-1">
                                            <strong>{{ $category->name }}</strong>
                                        </div>
                                        @if(isset($category->search_count))
                                            <small class="text-muted">{{ $category->search_count }} searches</small>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    </div>
@endsection

@push('script')
@endpush