@extends('ecommerce::frontend.layout.main2')

@section('title') {{ $category->page_title ?? $category->name }} - {{ $ecommerce_setting->site_title ?? 'Shop' }} @endsection

@section('description') {{ $category->short_description ?? $category->meta_description ?? 'Browse ' . $category->name . ' collection' }} @endsection

@section('content')
<!-- Header -->
@include('ecommerce::frontend.partials.header')
<!-- /Header -->

<!-- Breadcrumb -->
<div class="tf-breadcrumb">
    <div class="container">
        <div class="tf-breadcrumb-wrap d-flex justify-content-between flex-wrap align-items-center">
            <div class="tf-breadcrumb-list">
                <a href="{{ url('/') }}" class="text">Home</a>
                <i class="icon icon-arrow-right"></i>
                <a href="{{ url('/shop') }}" class="text">Shop</a>
                <i class="icon icon-arrow-right"></i>
                <span class="text">{{ $category->name }}</span>
            </div>
        </div>
    </div>
</div>
<!-- /Breadcrumb -->

<!-- Category Banner (if image exists) -->
@if($category->image)
<section class="flat-spacing-5 pt-0">
    <div class="container">
        <div class="tf-shop-banner radius-10 o-hidden">
            <img class="lazyload" data-src="{{ asset('public/images/category/' . $category->image) }}" 
                src="{{ asset('public/images/category/' . $category->image) }}" alt="{{ $category->name }}">
            <div class="box-content">
                <span class="wow fadeInUp sub-title text-white" data-wow-delay="0s">{{ $category->name }}</span>
                <h1 class="wow fadeInUp heading text-white" data-wow-delay=".1s">{{ $category->page_title ?? $category->name }}</h1>
                @if($category->short_description)
                <p class="wow fadeInUp text-white description" data-wow-delay=".2s">{{ $category->short_description }}</p>
                @endif
            </div>
        </div>
    </div>
</section>
@else
<!-- Category Header (no image) -->
<section class="flat-spacing-1 pt-0">
    <div class="container">
        <div class="tf-shop-control grid-3 align-items-center">
            <div>
                <h1 class="h2 mb-0">{{ $category->name }}</h1>
                @if($category->short_description)
                <p class="text-muted mb-0">{{ $category->short_description }}</p>
                @endif
            </div>
        </div>
    </div>
</section>
@endif

<!-- Subcategories or Products -->
<section class="flat-spacing-2 pt-0">
    <div class="container">
        @if($sub_categories->count() > 0)
        <!-- Show Subcategories -->
        <div class="tf-shop-content">
            <div class="grid-layout wrapper-shop" data-grid="grid-4">
                @foreach($sub_categories as $sub_category)
                @php
                    $productCount = DB::table('products')
                        ->where('category_id', $sub_category->id)
                        ->where('is_active', 1)
                        ->where('is_online', 1)
                        ->count();
                @endphp
                <div class="card-product">
                    <div class="card-product-wrapper">
                        <a href="{{ url('/shop') }}/{{ $sub_category->slug }}" class="product-img">
                            @if($sub_category->image)
                                <img class="lazyload img-product" 
                                    data-src="{{ asset('public/images/category/' . $sub_category->image) }}"
                                    src="{{ asset('public/images/category/' . $sub_category->image) }}"
                                    alt="{{ $sub_category->name }}">
                            @elseif($sub_category->icon)
                                <img class="lazyload img-product" 
                                    data-src="{{ asset('public/images/category/icons/' . $sub_category->icon) }}"
                                    src="{{ asset('public/images/category/icons/' . $sub_category->icon) }}"
                                    alt="{{ $sub_category->name }}">
                            @else
                                <img class="lazyload img-product" 
                                    data-src="{{ asset('newsite/images/category/cate-12.jpg') }}"
                                    src="{{ asset('newsite/images/category/cate-12.jpg') }}"
                                    alt="{{ $sub_category->name }}">
                            @endif
                        </a>
                    </div>
                    <div class="card-product-info text-center">
                        <a href="{{ url('/shop') }}/{{ $sub_category->slug }}" class="h5 mb-2 d-block">
                            {{ $sub_category->name }}
                        </a>
                        <span class="text-muted">{{ $productCount }} {{ $productCount == 1 ? 'product' : 'products' }}</span>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @else
        <!-- No Subcategories - Show Coming Soon or Empty State -->
        <div class="text-center py-5">
            <div class="tf-empty-cart">
                <div class="empty-cart-icon">
                    <i class="icon icon-shopping-cart-simple fs-80"></i>
                </div>
                <h3 class="mt-4">No Products Yet</h3>
                <p class="text-muted">Products in this category are coming soon. Check back later!</p>
                <div class="mt-4">
                    <a href="{{ url('/shop') }}" class="tf-btn animate-btn">
                        Continue Shopping
                        <i class="icon icon-arrow-right"></i>
                    </a>
                </div>
            </div>
        </div>
        @endif
    </div>
</section>

@endsection

@section('script')
<script>
    "use strict";
    
    $(document).ready(function() {
        // Lazy load images
        if ($('.lazyload').length > 0) {
            $('.lazyload').each(function() {
                var $img = $(this);
                var src = $img.data('src');
                if (src) {
                    $img.attr('src', src);
                }
            });
        }
    });
</script>
@endsection