@extends('layouts.app')

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

    <div class="card">
        <div class="card-body">
            <h5 class="card-title"><strong>Subcategory ID: </strong>{{ $subCategory->id }}</h5>
            <p><strong>Category:</strong> {{ $subCategory->category->category }}</p>  <!-- Display category name -->

            <h4 class="mt-4"><strong>Description:</strong></h4>
            @if($subCategory->description)
                <p>{!! $subCategory->description->description !!}</p>  <!-- Display description -->
            @else
                <p>No description available for this subcategory.</p>
            @endif

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