@extends('layouts.app')

@section('styles')
    <style>
    .product-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-img-wrapper {
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-info {
    padding: 10px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.price-section {
    margin-top: 8px;
    font-weight: bold;
}

.price.free {
    color: #28a745;
}




        .category-card {
            transition: all 0.3s ease;
            border: 1px solid #eee;
            border-radius: 12px;
            overflow: hidden;
            height: 100%;
        }

        .category-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
            border-color: transparent;
        }

        .category-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px;
        }

        .category-icon i {
            font-size: 30px;
            color: white;
        }

        .category-stats {
            font-size: 0.9rem;
            color: #6c757d;
        }

        .subcategory-list {
            list-style: none;
            padding: 0;
            margin: 10px 0 0;
        }

        .subcategory-list li {
            padding: 5px 0;
            border-bottom: 1px dashed #eee;
        }

        .subcategory-list li:last-child {
            border-bottom: none;
        }

        .subcategory-list a {
            color: #495057;
            text-decoration: none;
            font-size: 0.9rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .subcategory-list a:hover {
            color: #0d6efd;
        }

        .subcategory-count {
            background: #f8f9fa;
            padding: 2px 8px;
            border-radius: 20px;
            font-size: 0.8rem;
        }

        .popular-category-badge {
            display: inline-block;
            padding: 8px 20px;
            margin: 5px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .popular-category-badge:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
            color: white;
        }

        .category-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 60px 0;
            margin-bottom: 40px;
            border-radius: 0 0 50px 50px;
        }

        .category-header h1 {
            font-size: 2.5rem;
            font-weight: bold;
        }

        .category-header p {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        @media (max-width: 768px) {
            .category-header {
                padding: 40px 0;
            }

            .category-header h1 {
                font-size: 2rem;
            }
        }
    </style>
@endsection

@section('content')
    {{-- Category Header --}}
    <div class="category-header text-center">
        <div class="container">
            <h1>Browse Categories</h1>
            <p class="lead">Find exactly what you're looking for by browsing through our categories</p>
            <div class="mt-4">
                <form action="{{ route('ads.comprehensive.search') }}" method="GET" class="row g-2 justify-content-center">
                    <div class="col-md-6">
                        <div class="input-group">
                            <input type="text" name="search" class="form-control form-control-lg"
                                placeholder="Search in all categories..." aria-label="Search">
                            <button class="btn btn-light btn-lg" type="submit">
                                <i class="bi bi-search"></i> Search
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="container mt-4">
        {{-- Popular Categories Section --}}
        @if (isset($popularCategories) && $popularCategories->count() > 0)
            <section class="mb-5">
                <h2 class="text-center mb-4 fw-bold">
                    <i class="bi bi-star-fill text-warning me-2"></i>
                    Popular Categories
                </h2>
                <div class="text-center">
                    @foreach ($popularCategories as $category)
                        <a href="{{ route('categories.show', $category->slug) }}" class="popular-category-badge">
                            <i class="bi bi-folder me-2"></i>
                            {{ $category->name }}
                            <span class="badge bg-light text-dark ms-2">{{ $category->ads_count }}</span>
                        </a>
                    @endforeach
                </div>
            </section>
        @endif

        {{-- All Categories Grid --}}
        <section class="mb-5">
            <h2 class="text-center mb-4 fw-bold">
                <i class="bi bi-grid-3x3-gap-fill text-primary me-2"></i>
                All Categories
            </h2>

            <div class="row g-4">
                @forelse($parentCategories as $category)
                    <div class="col-lg-4 col-md-6">
                        <div class="category-card card border-0 shadow-sm">
                            <div class="card-body">
                                <div class="category-icon">
                                    @php
                                        $icons = [
                                            'Electronics' => 'bi-phone',
                                            'Furniture' => 'bi-house-door',
                                            'Cars' => 'bi-car-front',
                                            'Jobs' => 'bi-briefcase',
                                            'Real Estate' => 'bi-building',
                                        ];
                                        $icon = $icons[$category->name] ?? 'bi-folder';
                                    @endphp
                                    <i class="bi {{ $icon }}"></i>
                                </div>

                                <h5 class="text-center mb-2">
                                    <a href="{{ route('categories.show', $category->slug) }}"
                                        class="text-decoration-none text-dark">
                                        {{ $category->name }}
                                    </a>
                                </h5>

                                <div class="text-center category-stats mb-3">
                                    <span class="me-3">
                                        <i class="bi bi-megaphone text-primary"></i>
                                        {{ $category->ads_count ?? 0 }} ads
                                    </span>
                                    <span>
                                        <i class="bi bi-diagram-3 text-success"></i>
                                        {{ $category->children->count() }} subcategories
                                    </span>
                                </div>

                                @if ($category->children->count() > 0)
                                    <ul class="subcategory-list">
                                        @foreach ($category->children->take(5) as $child)
                                            <li>
                                                <a href="{{ route('categories.show', $child->slug) }}">
                                                    <span>
                                                        <i class="bi bi-chevron-right text-primary me-1"></i>
                                                        {{ $child->name }}
                                                    </span>
                                                    <span class="subcategory-count">{{ $child->ads_count ?? 0 }}</span>
                                                </a>
                                            </li>
                                        @endforeach

                                        @if ($category->children->count() > 5)
                                            <li class="text-center mt-2">
                                                <a href="{{ route('categories.show', $category->slug) }}"
                                                    class="text-primary">
                                                    View all {{ $category->children->count() }} subcategories
                                                    <i class="bi bi-arrow-right ms-1"></i>
                                                </a>
                                            </li>
                                        @endif
                                    </ul>
                                @endif

                                <div class="text-center mt-3">
                                    <a href="{{ route('categories.show', $category->slug) }}"
                                        class="btn btn-outline-primary btn-sm">
                                        Browse Category
                                        <i class="bi bi-arrow-right ms-1"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12 text-center py-5">
                        <i class="bi bi-inbox display-1 text-muted"></i>
                        <h4 class="mt-3">No Categories Found</h4>
                    </div>
                @endforelse
            </div>
        </section>

        {{-- Recent Ads Section --}}
        @if (isset($recentAds) && $recentAds->count() > 0)
            <hr class="my-5">
            <section>
                <h2 class="text-center mb-4 fw-bold">
                    <i class="bi bi-clock-history text-primary me-2"></i>
                    Recent Ads Across Categories
                </h2>
                <div class="row g-4">
                    @foreach ($recentAds as $ad)
                        <div class="col-xl-3 col-lg-4 col-md-6 col-6">
                            <div class="product-card shadow-sm">
                                <a href="{{ route('ads.show', $ad->slug) }}" class="text-decoration-none">
                                    <div class="product-img-wrapper">
                                        @if ($ad->images->count() > 0)
                                            <img src="{{ asset('storage/' . $ad->images->first()->image_path) }}"
                                                class="product-img" alt="{{ $ad->title }}"
                                                onerror="this.onerror=null; this.src='{{ asset('storage/product_images/default.png') }}';">
                                        @else
                                            <img src="{{ asset('storage/product_images/default.png') }}"
                                                class="product-img" alt="No Image">
                                        @endif
                                    </div>
                                    <div class="product-info">
                                        <h6 class="text-truncate">{{ $ad->title }}</h6>
                                        <div class="small text-muted">
                                            <i class="bi bi-tag"></i> {{ $ad->category->name ?? 'N/A' }}
                                        </div>
                                        <div class="price-section">
                                            @if ($ad->is_free)
                                                <span class="price free">FREE</span>
                                            @else
                                                <span
                                                    class="price">{{ config('app.currency_symbol', '$') }}{{ number_format($ad->price) }}</span>
                                            @endif
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="text-center mt-4">
                    <a href="{{ route('welcome') }}" class="btn btn-outline-primary">
                        View All Ads
                        <i class="bi bi-arrow-right ms-1"></i>
                    </a>
                </div>
            </section>
        @endif
    </div>
@endsection