@extends('frontend::layouts.master')

@php
$assetPath = 'frontend_assets';
$langCode = session('lang_code', 'en');
$isRtl = ($direction ?? 'ltr') === 'rtl';
@endphp

<script>
    window.pageName = 'category_listing';
</script>

@section('content')
    <div class="container-fluid px-lg-5 mt-1">
        <div class="main-header-bar d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center">
                <a href="javascript:history.back()" class="back-btn me-2">
                    <img src="{{ asset($assetPath . '/icons/back.png') }}">
                </a>
                <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb" class="py-3">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item item-nav"><a href="{{ url('/') }}" data-translate="home">{{ webTrans('home', 'category_listing', 'Home') }}</a></li>
                        <li class="breadcrumb-item item-nav active" aria-current="page" data-translate="all_categories">{{ webTrans('all_categories', 'category_listing', 'All Categories') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <section class="product-listing-section">
        <div class="container-fluid px-2 px-lg-5">
            <div class="row g-4">
                {{-- ========================= CATEGORY GRID ========================= --}}
                <div class="col-md-12">
                    <div class="row g-4 g-md-4 row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6">
                        @forelse($categories as $category)
                        {{-- Parent Category Card --}}
                        <div class="col">
                            <a href="{{ route('frontend.product_list', ['category' => $category->id]) }}" class="text-decoration-none h-100 d-block">
                                <div class="category-card border rounded h-100 text-center transition-all bg-white overflow-hidden">
                                    <div class="category-img-container d-flex align-items-center justify-content-center" style="aspect-ratio: 1/1; overflow: hidden; width: 100%;">
                                        <img src="{{ uploadedAsset($category->icon) }}" class="w-100 h-100" alt="{{  $category->getTranslation('name', $langCode, true) }}" style="object-fit: cover; display: block;">
                                    </div>
                                    <div class="p-2 p-md-3">
                                        <h6 class="category-name text-dark fw-bold mb-0" style="font-size: 14px;">{{ $category->getTranslation('name', $langCode, true) }}</h6>
                                    </div>
                                </div>
                            </a>
                        </div>
                        
                        {{-- Subcategory Cards --}}
                        @foreach($category->children as $child)
                        <div class="col">
                            <a href="{{ route('frontend.product_list', ['category' => $child->id]) }}" class="text-decoration-none h-100 d-block">
                                <div class="category-card border rounded h-100 text-center transition-all bg-white overflow-hidden">
                                    <div class="category-img-container d-flex align-items-center justify-content-center" style="aspect-ratio: 1/1; overflow: hidden; width: 100%;">
                                        <img src="{{ uploadedAsset($child->icon) }}" class="w-100 h-100" alt="{{  $child->getTranslation('name', $langCode, true) }}" style="object-fit: cover; display: block;">
                                    </div>
                                    <div class="p-2 p-md-3">
                                        <h6 class="category-name text-dark fw-bold mb-0" style="font-size: 14px;">{{ $child->getTranslation('name', $langCode, true) }}</h6>
                                    </div>
                                </div>
                            </a>
                        </div>
                        @endforeach
                        @empty
                        <div class="col-12 text-center py-5">
                            <img src="{{ asset($assetPath . '/images/Group497.png') }}" class="img-fluid mb-4" style="max-width: 200px; opacity: 0.5;">
                            <p class="text-muted">{{ webTrans('no_categories_found', 'category_listing', 'No categories found.') }}</p>
                        </div>
                        @endforelse
                    </div>
                </div>

            </div>
        </div>
    </section>

<style>
    .subcategory-link {
        font-size: 13px;
        transition: color 0.2s ease;
    }

    .hover-red:hover {
        color: #CD001C !important;
    }

    .category-card {
        border: 1px solid #dee2e6;
        background: #fff;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

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

    .category-name {
        font-family: 'Rubik', sans-serif;
        font-size: 15px;
        color: #263238;
    }

    .section-title {
        font-family: 'Rubik', sans-serif;
        font-weight: 600;
        color: #263238;
    }

    .back-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: #f8f9fa;
        border-radius: 12px;
    }
</style>
@endsection