@extends('layouts.app')

@section('content')
    <div class="mb-6">
        <h1 class="text-3xl font-bold text-indigo-700">{{ $category->name }}</h1>
    </div>

    <div class="bg-white shadow-md rounded-lg p-6 mb-6">
        <h2 class="text-xl font-semibold mb-4">Category Details</h2>

        <div class="mb-4">
            <p class="text-gray-700"><span class="font-semibold">Name:</span> {{ $category->name }}</p>
        </div>

        <div class="mb-4">
            <p class="text-gray-700"><span class="font-semibold">Description:</span></p>
            <p class="text-gray-700 mt-2">{{ $category->description }}</p>
        </div>

        <div class="flex mt-6">
            <a href="{{ route('categories.edit', $category) }}" class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded mr-2">
                Edit
            </a>
            <form action="{{ route('categories.destroy', $category) }}" method="POST" class="inline">
                @csrf
                @method('DELETE')
                <button type="submit" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded" onclick="return confirm('Are you sure you want to delete this category?')">
                    Delete
                </button>
            </form>
        </div>
    </div>

    <div class="bg-white shadow-md rounded-lg p-6">
        <h2 class="text-xl font-semibold mb-4">Books in this Category</h2>

        @if($category->books->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                @foreach($category->books as $book)
                    <div class="border rounded-lg p-4 hover:shadow-md transition-shadow">
                        <h3 class="font-bold text-lg mb-1">{{ $book->title }}</h3>
                        <p class="text-gray-600 text-sm mb-2">By {{ $book->author }}</p>
                        <p class="text-gray-700 mb-3">{{ Str::limit($book->description, 100) }}</p>
                        <a href="{{ route('books.show', $book) }}" class="text-indigo-600 hover:text-indigo-800">View Details →</a>
                    </div>
                @endforeach
            </div>
        @else
            <p class="text-gray-700">No books found in this category.</p>
        @endif
    </div>

    <div class="mt-6">
        <a href="{{ route('categories.index') }}" class="text-indigo-600 hover:text-indigo-800">Back to Categories</a>
    </div>
@endsection