@extends('front.layouts.master-auth')

@section('content')
<section class="page-content skill-page">
    <div class="container">

        <div class="page-title-cont">
            <x-breadcrumb :items="[
                ['name' => __('Home'), 'url' => route('home')],
                ['name' => __('Categories'), 'url' => ''],
            ]" />
            <h1 class="page-title">
                <span class="skill-page-badge">@lang('front.Explore')</span>
                @lang('Categories')
            </h1>
        </div>

        @if($categories->isEmpty())
            <div class="text-center py-5">
                <p class="text-muted">@lang('No categories found.')</p>
            </div>
        @else
            <div class="row" style="margin-top: 30px;">
                @foreach($categories as $category)
                    <div class="col-md-4 col-sm-6 mb-4">
                        <div class="categories-card">
                            <a href="{{ route('category.show', [$category->id, $category->slug]) }}"
                               class="categories-card__title">
                                {{ $category->name }}
                            </a>

                            @if($category->subCategories->isNotEmpty())
                                <ul class="categories-card__subs list-unstyled">
                                    @foreach($category->subCategories as $sub)
                                        <li>
                                            <a href="{{ route('sub_category.show', [$sub->id, $sub->slug]) }}"
                                               class="categories-card__sub-link">
                                                {{ $sub->name }}
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        @endif

    </div>
</section>
@endsection