@extends('layouts.master')

@section('title', 'All Categories - The Mini Port')

@section('content')
@push('styles')
<style>
    .category-card {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1px solid #f0f0f0;
    }
    .category-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px -5px rgba(0,0,0,0.1);
        border-color: rgba(var(--bs-primary-rgb), 0.2);
    }
    
    .category-cover {
        height: 280px;
        position: relative;
        overflow: hidden;
    }
    
    .category-cover img {
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .category-card:hover .category-cover img {
        transform: scale(1.1);
    }

    .category-overlay {
        background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    }

    .subcategory-link {
        font-size: 0.9rem;
        color: #64748b;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        padding: 4px 0;
    }
    
    .subcategory-link:hover {
        color: var(--bs-primary);
        padding-left: 5px;
    }

    .az-filter-link {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        font-weight: 600;
        color: #64748b;
        transition: all 0.2s;
        border: 1px solid transparent;
    }
    
    .az-filter-link:hover {
        background: #f1f5f9;
        color: var(--bs-primary);
    }
    
    .az-filter-link.active {
        background: var(--bs-primary);
        color: white;
        box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.3);
    }
</style>
@endpush

<!-- Hero Section -->
<section class="tw-bg-white tw-border-b tw-border-gray-100 tw-py-8 lg:tw-py-12 tw-relative tw-overflow-hidden">
    <!-- Abstract Background -->
    <div class="tw-absolute tw-top-0 tw-right-0 tw-w-1/3 tw-h-full tw-bg-blue-50/50 tw-skew-x-12 tw-translate-x-32"></div>
    <div class="tw-absolute tw-bottom-0 tw-left-0 tw-w-1/4 tw-h-full tw-bg-orange-50/50 -tw-skew-x-12 -tw-translate-x-20"></div>

    <div class="container tw-relative">
        <div class="text-center tw-max-w-3xl tw-mx-auto">
            <h6 class="tw-text-orange-600 tw-font-bold tw-uppercase tw-tracking-widest tw-mb-3">Global Marketplace</h6>
            <h1 class="tw-text-3xl lg:tw-text-5xl tw-font-black tw-text-slate-900 tw-mb-4" style="font-family: 'Outfit', sans-serif;">
                Explore All Categories
            </h1>
            <p class="tw-text-slate-500 tw-text-lg tw-mb-8">
                Discover millions of products from verified suppliers across {{ $categories->count() }}+ specialized categories.
            </p>

            <!-- Search Bar -->
            <div class="tw-bg-white tw-p-2 tw-rounded-full tw-shadow-xl tw-border tw-border-gray-100 tw-max-w-xl tw-mx-auto tw-flex">
                <div class="tw-flex-grow tw-relative">
                    <i class="bi bi-search tw-absolute tw-left-4 tw-top-1/2 -tw-translate-y-1/2 tw-text-gray-400"></i>
                    <input type="text" class="form-control tw-border-0 tw-pl-12 tw-py-3 tw-bg-transparent focus:tw-ring-0" placeholder="Find a category (e.g. Textiles, Electronics)...">
                </div>
                <button class="btn btn-primary tw-bg-orange-600 tw-border-orange-600 hover:tw-bg-orange-700 tw-rounded-full tw-px-8 tw-font-bold">Search</button>
            </div>
        </div>

        <!-- A-Z Filter -->
        <div class="tw-mt-12 tw-flex tw-flex-wrap tw-justify-center tw-gap-1">
            <a href="{{ route('public.categories.index', ['letter' => 'All']) }}" class="az-filter-link text-decoration-none {{ $currentLetter == 'All' ? 'active' : '' }}">ALL</a>
            @foreach(range('A', 'Z') as $char)
                <a href="{{ route('public.categories.index', ['letter' => $char]) }}" class="az-filter-link text-decoration-none {{ $currentLetter == $char ? 'active' : '' }}">{{ $char }}</a>
            @endforeach
        </div>
    </div>
</section>

<!-- Categories Grid -->
<section class="tw-py-12 tw-bg-slate-50 tw-min-h-screen">
    <div class="container">
        @if($categories->count() > 0)
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                @foreach($categories as $category)
                    <div class="col">
                        <div class="card h-100 category-card tw-rounded-2xl tw-overflow-hidden tw-bg-white">
                            <!-- Cover Image Header -->
                            <a href="{{ route('public.categories.show', $category->slug) }}" class="category-cover d-block group">
                                @if($category->image)
                                    <img src="{{ asset('storage/' . $category->image) }}" class="w-100 h-100 object-fit-cover" alt="{{ $category->name }}">
                                @else
                                    <div class="w-100 h-100 tw-bg-slate-100 d-flex align-items-center justify-content-center">
                                        <i class="bi bi-image tw-text-4xl tw-text-slate-300"></i>
                                    </div>
                                @endif
                                <div class="category-overlay tw-absolute tw-inset-0 d-flex align-items-end p-4">
                                    <div class="w-100">
                                        <h3 class="tw-text-white tw-font-bold tw-text-xl tw-mb-0 tw-drop-shadow-md">{{ $category->name }}</h3>
                                        <p class="tw-text-white/80 tw-text-sm tw-mb-0">{{ $category->products_count }} Products</p>
                                    </div>
                                </div>
                            </a>

                            <!-- Subcategories Body -->
                            <div class="card-body p-4">
                                <ul class="list-unstyled mb-0 d-flex flex-column gap-2">
                                    @foreach($category->children->take(5) as $child)
                                        <li>
                                            <a href="{{ route('public.categories.show', $child->slug) }}" class="subcategory-link text-decoration-none">
                                                <i class="bi bi-arrow-right-short tw-text-orange-400 tw-text-lg me-1"></i>
                                                {{ $child->name }}
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>

                                @if($category->children->count() > 5)
                                    <div class="tw-mt-4 tw-pt-3 tw-border-t tw-border-dashed tw-border-slate-200">
                                        <a href="{{ route('public.categories.show', $category->slug) }}" class="tw-text-orange-600 tw-text-sm tw-font-bold text-decoration-none hover:tw-text-orange-700">
                                            View all {{ $category->children->count() }} sub-categories <i class="bi bi-arrow-right"></i>
                                        </a>
                                    </div>
                                @elseif($category->children->count() == 0)
                                    <div class="tw-mt-2 text-center py-2">
                                        <a href="{{ route('public.categories.show', $category->slug) }}" class="btn btn-outline-primary btn-sm tw-rounded-pill tw-px-4">Browse Products</a>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <!-- Empty State -->
            <div class="text-center py-5">
                <div class="tw-bg-white tw-p-8 tw-rounded-3xl tw-shadow-xl tw-max-w-lg tw-mx-auto">
                    <div class="tw-w-20 tw-h-20 tw-bg-orange-50 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mx-auto tw-mb-4">
                        <i class="bi bi-search tw-text-3xl tw-text-orange-500"></i>
                    </div>
                    <h3 class="tw-font-bold tw-text-slate-800 tw-mb-2">No categories found</h3>
                    <p class="tw-text-slate-500 tw-mb-6">We couldn't find any categories matching "{{ $currentLetter }}". Try checking 'All' or search for something else.</p>
                    <a href="{{ route('public.categories.index') }}" class="btn btn-primary tw-bg-orange-600 tw-border-orange-600 hover:tw-bg-orange-700 tw-rounded-full tw-px-8 tw-font-bold">
                        View All Categories
                    </a>
                </div>
            </div>
        @endif
    </div>
</section>
@endsection