@extends('layouts.app')

@section('title', __('Categories'))

@section('content')
    <div class="container py-4">
        <!-- Page Header -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h1 class="h2 mb-2">{{ __('Product Categories') }}</h1>
                        <p class="text-muted mb-0">{{ __('Browse our collection by category') }}</p>
                    </div>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item">
                                <a href="{{ route('home') }}">{{ __('Home') }}</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">
                                {{ __('Categories') }}
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

        @if($featuredCategories->count() > 0)
            <!-- Featured Categories -->
            <div class="row mb-5">
                <div class="col-12">
                    <h3 class="h4 mb-3">{{ __('Popular Categories') }}</h3>
                    <div class="row">
                        @foreach($featuredCategories as $category)
                            <div class="col-lg-4 col-md-6 mb-4">
                                <div class="card category-featured-card h-100 shadow-sm">
                                    @if($category->image)
                                        <div class="category-image-container">
                                            <img src="{{ asset('storage/' . $category->image) }}"
                                                 class="card-img-top category-image"
                                                 alt="{{ $category->name }}">
                                            <div class="category-overlay">
                                                <div class="category-info">
                                                    <h5 class="category-title">{{ $category->name }}</h5>
                                                    <p class="category-count">{{ $category->products_count }} {{ __('Products') }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    @else
                                        <div class="category-placeholder">
                                            <div class="category-icon">
                                                <i class="fas fa-layer-group"></i>
                                            </div>
                                            <h5 class="category-title">{{ $category->name }}</h5>
                                            <p class="category-count">{{ $category->products_count }} {{ __('Products') }}</p>
                                        </div>
                                    @endif

                                    <div class="card-body">
                                        @if($category->description)
                                            <p class="card-text text-muted small">
                                                {{ Str::limit($category->description, 100) }}
                                            </p>
                                        @endif
                                        <a href="{{ route('categories.show', $category->slug) }}"
                                           class="btn btn-outline-primary btn-sm">
                                            {{ __('View Products') }}
                                            <i class="fas fa-arrow-right ms-1"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif

        <!-- All Categories -->
        <div class="row">
            <div class="col-12">
                <h3 class="h4 mb-3">{{ __('All Categories') }}</h3>

                @if($categories->count() > 0)
                    <div class="row">
                        @foreach($categories as $category)
                            <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
                                <div class="card category-card h-100">
                                    @if($category->image)
                                        <div class="category-image-wrapper">
                                            <img src="{{ asset('storage/' . $category->image) }}"
                                                 class="card-img-top category-card-image"
                                                 alt="{{ $category->name }}">
                                        </div>
                                    @else
                                        <div class="category-card-placeholder">
                                            <i class="fas fa-layer-group"></i>
                                        </div>
                                    @endif

                                    <div class="card-body d-flex flex-column">
                                        <h5 class="card-title">{{ $category->name }}</h5>

                                        @if($category->description)
                                            <p class="card-text text-muted small flex-grow-1">
                                                {{ Str::limit($category->description, 80) }}
                                            </p>
                                        @endif

                                        <!-- Subcategories -->
                                        @if($category->children->count() > 0)
                                            <div class="subcategories mb-3">
                                                <small class="text-muted d-block mb-1">{{ __('Subcategories') }}:</small>
                                                <div class="subcategory-links">
                                                    @foreach($category->children->take(3) as $child)
                                                        <a href="{{ route('categories.show', $child->slug) }}"
                                                           class="badge bg-light text-dark text-decoration-none me-1 mb-1">
                                                            {{ $child->name }}
                                                        </a>
                                                    @endforeach
                                                    @if($category->children->count() > 3)
                                                        <span class="badge bg-secondary">
                                                        +{{ $category->children->count() - 3 }} {{ __('more') }}
                                                    </span>
                                                    @endif
                                                </div>
                                            </div>
                                        @endif

                                        <div class="mt-auto">
                                            <a href="{{ route('categories.show', $category->slug) }}"
                                               class="btn btn-primary btn-sm w-100">
                                                {{ __('View Category') }}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="row">
                        <div class="col-12">
                            <div class="text-center py-5">
                                <i class="fas fa-layer-group fa-3x text-muted mb-3"></i>
                                <h4>{{ __('No Categories Found') }}</h4>
                                <p class="text-muted">{{ __('We are currently organizing our product categories. Please check back soon!') }}</p>
                                <a href="{{ route('products.index') }}" class="btn btn-primary">
                                    {{ __('Browse All Products') }}
                                </a>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .category-featured-card {
            border: none;
            border-radius: 12px;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

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

        .category-image-container {
            position: relative;
            height: 200px;
            overflow: hidden;
        }

        .category-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .category-featured-card:hover .category-image {
            transform: scale(1.1);
        }

        .category-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-align: center;
        }

        .category-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .category-count {
            font-size: 0.9rem;
            opacity: 0.9;
            margin: 0;
        }

        .category-placeholder {
            height: 200px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            text-align: center;
        }

        .category-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
            opacity: 0.8;
        }

        .category-card {
            border: 1px solid #e9ecef;
            border-radius: 8px;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .category-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .category-image-wrapper {
            height: 150px;
            overflow: hidden;
        }

        .category-card-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .category-card-placeholder {
            height: 150px;
            background: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6c757d;
            font-size: 2rem;
        }

        .subcategory-links {
            line-height: 1.6;
        }

        .subcategories .badge {
            font-size: 0.75rem;
            padding: 0.25em 0.5em;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .category-image-container {
                height: 150px;
            }

            .category-title {
                font-size: 1.1rem;
            }

            .category-count {
                font-size: 0.8rem;
            }
        }
    </style>
@endpush