@extends('front.layout.master')

@section('meta_tags')
    <link rel="canonical" href="{{ url()->current() }}" />
    <title>{{ __('All Categories') }} - {{ config('app.name') }}</title>
@endsection

@section('body')
<section class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-6 mb-12">
    {{-- Breadcrumb --}}
    <nav class="breadcrumb-row text-[13px] text-slate-500 mb-4 flex items-center flex-wrap gap-x-1.5 gap-y-1">
        <a href="{{ url('/') }}" class="hover:text-brand-600">{{ __('Home') }}</a>
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-slate-300"><path d="m9 18 6-6-6-6"/></svg>
        <a href="{{ url('categories') }}" class="hover:text-brand-600">{{ __('Categories') }}</a>
        @foreach($crumbs as $cb)
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-slate-300"><path d="m9 18 6-6-6-6"/></svg>
            @if(!empty($cb['url']))
                <a href="{{ $cb['url'] }}" class="hover:text-brand-600">{{ $cb['label'] }}</a>
            @else
                <span class="text-slate-700 font-medium">{{ $cb['label'] }}</span>
            @endif
        @endforeach
    </nav>

    {{-- Header --}}
    <div class="flex items-end justify-between mb-6 flex-wrap gap-3">
        <div>
            <h1 class="font-display font-extrabold text-2xl lg:text-3xl">
                @if($level === 'category')
                    {{ __('All Categories') }}
                @elseif($level === 'sub')
                    {{ $parentCategory->title }}
                @elseif($level === 'child')
                    {{ $parentSubcategory->title }}
                @endif
            </h1>
            <p class="text-slate-500 text-[14px] mt-1">
                @if($level === 'category')
                    {{ __('Browse all departments and explore products') }}
                @elseif($level === 'sub')
                    {{ __('Choose a sub-category to continue') }}
                @elseif($level === 'child')
                    {{ __('Choose a sub-section to view products') }}
                @endif
            </p>
        </div>
        @if($level === 'sub' && $parentCategory)
            <a href="{{ $parentCategory->getURL() }}" class="text-[13px] font-semibold text-brand-600 hover:underline">
                {{ __('Skip — view all products in') }} {{ $parentCategory->title }} →
            </a>
        @elseif($level === 'child' && $parentSubcategory)
            <a href="{{ $parentSubcategory->getURL() }}" class="text-[13px] font-semibold text-brand-600 hover:underline">
                {{ __('Skip — view all products in') }} {{ $parentSubcategory->title }} →
            </a>
        @endif
    </div>

    @if($items->isEmpty())
        <div class="bg-white rounded-2xl shadow-card p-10 text-center">
            <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" class="mx-auto text-slate-300 mb-3"><path d="M3 7h18M3 12h18M3 17h18"/></svg>
            <h3 class="font-semibold text-slate-700">{{ __('Nothing here yet') }}</h3>
            <p class="text-slate-500 text-[13px] mt-1">{{ __('Categories will appear here once added.') }}</p>
            <a href="{{ url('/') }}" class="inline-block mt-4 text-brand-600 font-semibold hover:underline text-[14px]">← {{ __('Back to home') }}</a>
        </div>
    @else
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 lg:gap-4">
            @foreach($items as $item)
                @php
                    if ($level === 'category') {
                        $imgDir = 'images/category/';
                        $hasChildren = $item->subcategory ? $item->subcategory->where('status','1')->count() : 0;
                        $href = $hasChildren > 0 ? url('categories?cat=' . $item->id) : $item->getURL();
                    } elseif ($level === 'sub') {
                        $imgDir = 'images/subcategory/';
                        $hasChildren = $item->childcategory ? $item->childcategory->where('status','1')->count() : 0;
                        $href = $hasChildren > 0 ? url('categories?sub=' . $item->id) : $item->getURL();
                    } else {
                        $imgDir = 'images/grandcategory/';
                        $hasChildren = 0;
                        $href = $item->getURL();
                    }
                    $imgFile = $item->image ?: $item->icon;
                    $imgPath = $imgFile && file_exists(public_path() . '/' . $imgDir . $imgFile) ? url($imgDir . $imgFile) : null;
                @endphp
                <a href="{{ $href }}" class="group bg-white rounded-2xl shadow-card hover:shadow-hover transition-shadow p-3 flex flex-col items-center text-center">
                    <div class="aspect-square w-full bg-slate-50 rounded-xl overflow-hidden grid place-items-center mb-2 relative">
                        @if($imgPath)
                            <img src="{{ $imgPath }}" alt="{{ $item->title }}" loading="lazy" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                        @else
                            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" class="text-slate-300"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
                        @endif
                        @if($hasChildren > 0)
                            <span class="absolute top-1.5 right-1.5 bg-brand-500 text-white text-[10px] font-bold px-1.5 py-0.5 rounded">{{ $hasChildren }}</span>
                        @endif
                    </div>
                    <h3 class="font-semibold text-[13px] leading-snug text-deep group-hover:text-brand-600 transition-colors line-clamp-2">{{ $item->title }}</h3>
                    @if($hasChildren > 0)
                        <span class="text-[11px] text-slate-500 mt-1">
                            {{ $hasChildren }} {{ $level === 'category' ? __('sub-categories') : __('sections') }}
                        </span>
                    @else
                        <span class="text-[11px] text-emerald-600 font-semibold mt-1">{{ __('View products') }} →</span>
                    @endif
                </a>
            @endforeach
        </div>
    @endif
</section>
@endsection