@extends('layouts.app')
@section('content')

<div class="container">
    <h1 class="my-4 text-center">Descriptions</h1>

    <div class="mb-3">
        <a href="{{ route('descriptions.create') }}" class="btn btn-success">Create New Description</a>
    </div>

    <div class="row">
        @foreach($descriptions as $description)
            <div class="col-md-4 mb-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">{!! Str::limit($description->description, 50) !!}</h5>
                        <p class="card-text">{!! Str::limit($description->description, 150) !!}</p>
                        <p><strong>Category:</strong> {{ $description->category->category }}</p>
                        <p><strong>Sub-Category:</strong> {{ $description->subCategory->sub_category }}</p>

                        <a href="{{ route('descriptions.show', $description->id) }}" class="btn btn-info btn-sm me-2">View</a>
                        <a href="{{ route('descriptions.edit', $description->id) }}" class="btn btn-warning btn-sm me-2">Edit</a>

                        <form action="{{ route('descriptions.destroy', $description->id) }}" method="POST" style="display:inline;">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                        </form>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <!-- Pagination Links -->
    <div class="pagination-wrapper">
        {{ $descriptions->links() }}
    </div>

</div>

@endsection