@extends('layouts.home')
@section('content')
    <style>
        .category-card {
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .category-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .category-btn {
            background-color: #6c757d;
            border-color: #6c757d;
        }

        .category-btn:hover {
            background-color: #5a6268;
            border-color: #545b62;
        }

        .fade-in {
            animation: fadeInUp 0.6s ease forwards;
            opacity: 0;
            transform: translateY(30px);
        }

        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
    <main class="container py-4 pb-md-4 pb-5 mb-5">
        <div class="row ">
            <div class="col">
                <h2 id="categoryTitle" class="page-sub-title">Product Categories</h2>
                <p class="text-muted" id="categorySubtitle">Browse products by category</p>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-12">
                <!-- Results Count -->
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <span class="text-muted">Showing {{ $categories->count() }} categories</span>
                </div>

                <div class="row" id="categoryGrid">
                    @forelse ($categories as $index => $category)
                        <div class="col-lg-3 col-md-6 col-sm-6 mb-4">
                            <div class="fade-in" style="animation-delay: {{ $index * 100 }}ms;">
                                <div class="product-card category-card"
                                    onclick="window.location.href='{{ route('search', ['categories[]' => $category->name]) }}'">
                                    <div class="product-image-container">
                                        @if ($category->icon)
                                            <img src="{{ asset('storage/icons/' . $category->icon) }}"
                                                alt="{{ $category->name }}" class="product-image">
                                        @else
                                            <img src="{{ asset('/assets/img/no-product.png') }}" alt="{{ $category->name }}"
                                                class="product-image">
                                        @endif
                                    </div>
                                    <div class="product-card-content">
                                        <h6 class="product-name">{{ $category->name }}</h6>
                                        @if ($category->description)
                                            <div class="product-rating">
                                                <span
                                                    class="">{{ Str::limit($category->description, 50, '...') }}</span>
                                            </div>
                                        @endif

                                        @php
                                            $productCount = $category->products ? $category->products->count() : 0;
                                        @endphp

                                        <div class="stock-badge" style="font-size: 13px">
                                            <i class="fas fa-box me-2"></i>
                                            {{ $productCount }} {{ $productCount == 1 ? 'Product' : 'Products' }}
                                        </div>

                                        <button class="btn-add-cart category-btn"
                                            onclick="event.stopPropagation(); window.location.href='{{ route('category.filter', $category->slug) }}'">
                                            <i class="fas fa-eye me-2"></i>View Products
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="col-12">
                            <div class="text-center py-5">
                                <i class="fas fa-th-large fa-3x text-muted mb-3"></i>
                                <h4 class="text-muted">No categories found</h4>
                                <p class="text-muted">Categories will appear here once they are added</p>
                                <a href="{{ route('search') }}" class="btn btn-primary">
                                    <i class="fas fa-arrow-left"></i> View All Products
                                </a>
                            </div>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </main>
@endsection