@extends('layouts.app')

@section('content')
<div class="container">
    <h1 class="my-4 text-center">Category: {{ $category->category }}</h1>

    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Category ID: {{ $category->id }}</h5>

            <h4 class="mt-4">Subcategories:</h4>
            @if($category->subcategories->isEmpty())
                <p>No subcategories available for this category.</p>
            @else
                <ul class="list-group mt-3">
                    @foreach($category->subcategories as $subcategory)
                        <li class="list-group-item">
                            <strong>{{ $subcategory->sub_category }}</strong><br>
                            @if($subcategory->description)
                                <small>{{ $subcategory->description->description }}</small>  <!-- Display the description -->
                            @else
                                <small>No description available.</small>
                            @endif
                        </li>
                    @endforeach
                </ul>
            @endif

            <div class="text-center mt-4">
                <a href="{{ route('categories.index') }}" class="btn btn-primary btn-lg">Back to Categories</a>
            </div>
        </div>
    </div>
</div>
@endsection