@extends('layouts.app')

@section('title', $title)

@section('content')
<section class="bg-gradient-to-r from-indigo-600 to-purple-600 py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <span class="inline-block px-4 py-1.5 bg-white/20 backdrop-blur-sm text-white text-sm font-semibold rounded-full mb-4">
                Browse
            </span>
            <h1 class="text-3xl sm:text-4xl font-bold text-white">{{ $title }}</h1>
            <p class="text-indigo-100 mt-3 max-w-2xl mx-auto">Explore our wide range of product categories and find exactly what you're looking for.</p>
        </div>
    </div>
</section>

<section class="py-12 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        @if($categories->count() > 0)
            <div class="space-y-8">
                @foreach($categories as $category)
                    <div class="bg-white rounded-2xl border border-gray-100 overflow-hidden">
                        {{-- Parent Category Header --}}
                        <a href="{{ route('products.index', ['category' => $category->id]) }}" class="flex items-center gap-4 p-6 hover:bg-gray-50 transition-colors">
                            <div class="w-14 h-14 bg-gradient-to-br from-indigo-50 to-purple-50 rounded-xl flex items-center justify-center flex-shrink-0">
                                @if($category->icon)
                                    <span class="text-2xl">{{ $category->icon }}</span>
                                @else
                                    <span class="text-lg font-bold text-indigo-600">{{ substr($category->name, 0, 1) }}</span>
                                @endif
                            </div>
                            <div class="flex-1 min-w-0">
                                <h3 class="text-lg font-semibold text-gray-900">{{ $category->name }}</h3>
                                @if($category->description)
                                    <p class="text-sm text-gray-500 mt-0.5 truncate">{{ $category->description }}</p>
                                @endif
                            </div>
                            <span class="text-sm font-medium text-indigo-600 bg-indigo-50 px-3 py-1 rounded-full flex-shrink-0">
                                {{ $category->products_count }} {{ Str::plural('product', $category->products_count) }}
                            </span>
                            <svg class="w-5 h-5 text-gray-400 flex-shrink-0" 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"/></svg>
                        </a>

                        {{-- Subcategories --}}
                        @if($category->children->count() > 0)
                            <div class="border-t border-gray-100 px-6 py-4 bg-gray-50/50">
                                <div class="flex flex-wrap gap-2">
                                    @foreach($category->children as $child)
                                        <a href="{{ route('products.index', ['category' => $child->id]) }}" class="inline-flex items-center gap-2 px-4 py-2 bg-white border border-gray-200 rounded-lg text-sm text-gray-700 hover:border-indigo-300 hover:text-indigo-600 hover:bg-indigo-50 transition-all">
                                            <span>{{ $child->name }}</span>
                                            <span class="text-xs text-gray-400">({{ $child->products_count }})</span>
                                        </a>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>
        @else
            <div class="text-center py-16">
                <svg class="w-20 h-20 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
                <h3 class="text-xl font-semibold text-gray-700 mb-2">No Categories Available</h3>
                <p class="text-gray-500">Categories will appear here once added by the admin.</p>
            </div>
        @endif
    </div>
</section>
@endsection