@extends('layouts.app')

@section('title', 'Categories')

@section('content')
<div class="bg-gray-50 min-h-screen py-8">
    <div class="container mx-auto px-4">
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-gray-900">All Categories</h1>
            <p class="text-gray-600">Browse products by category</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($categories as $category)
                <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition">
                    <a href="{{ route('products.index', ['category' => $category->slug]) }}" class="block p-6">
                        <div class="flex items-center gap-4">
                            <div class="w-16 h-16 bg-blue-100 rounded-xl flex items-center justify-center text-3xl">
                                @php
                                    $icons = [
                                        'safety-equipment' => '🦺',
                                        'office-supplies' => '📎',
                                        'cleaning-products' => '🧹',
                                        'tools-hardware' => '🔧',
                                        'electronics' => '💻',
                                        'furniture' => '🪑',
                                        'packaging' => '📦',
                                        'industrial' => '🏭',
                                    ];
                                @endphp
                                {{ $icons[$category->slug] ?? '📁' }}
                            </div>
                            <div class="flex-1">
                                <h3 class="font-semibold text-lg text-gray-900">{{ $category->name }}</h3>
                                <p class="text-sm text-gray-500">{{ $category->products_count }} products</p>
                            </div>
                            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                            </svg>
                        </div>
                        
                        @if($category->children->count() > 0)
                            <div class="mt-4 pt-4 border-t">
                                <p class="text-sm text-gray-500 mb-2">Subcategories:</p>
                                <div class="flex flex-wrap gap-2">
                                    @foreach($category->children->take(4) as $child)
                                        <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">{{ $child->name }}</span>
                                    @endforeach
                                    @if($category->children->count() > 4)
                                        <span class="text-xs text-blue-600">+{{ $category->children->count() - 4 }} more</span>
                                    @endif
                                </div>
                            </div>
                        @endif
                    </a>
                </div>
            @endforeach
        </div>
    </div>
</div>
@endsection