@extends('layouts.app')

@section('content')

<section class="py-16 bg-gray-50">
    <div class="container mx-auto px-4">
        
        <h1 class="text-4xl font-bold mb-4 text-gray-900">Kategori: {{ $kategoriAktif->nama_kategori }}</h1>
        <p class="text-lg text-gray-600 mb-10">Menampilkan semua karya dalam kategori {{ $kategoriAktif->nama_kategori }}.</p>

        {{-- Grid Card Daftar Karya --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            @forelse ($karya as $item)
            <a href="{{ route('kategori.ruang-santri.show', $item->slug) }}"
                class="group bg-white border border-gray-200 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 flex flex-col overflow-hidden">
                
                {{-- Gambar Thumbnail --}}
                @if($item->gambar1)
                <div class="h-48 w-full overflow-hidden">
                    <img src="{{ asset('storage/' . $item->gambar1) }}" alt="{{ $item->judul }}" 
                         class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                </div>
                @endif
                
                <div class="p-5 flex flex-col flex-grow">
                    <h3 class="text-xl font-bold mb-2 line-clamp-2 text-gray-800 group-hover:text-blue-600 transition">{{ $item->judul }}</h3>
                    
                    <p class="text-gray-600 text-sm mt-1 line-clamp-3 flex-grow">{{ Str::limit(strip_tags($item->isi1), 100) }}</p>
                    
                    <div class="mt-4 pt-3 border-t border-gray-100 flex justify-between items-center">
                        <span class="text-sm font-medium text-gray-500">
                            Oleh: {{ $item->penulis }}
                        </span>
                        <span class="text-blue-600 text-sm font-medium">
                            Baca Selengkapnya →
                        </span>
                    </div>
                </div>
            </a>
            @empty
            <p class="col-span-3 text-gray-500">Belum ada karya santri dalam kategori ini.</p>
            @endforelse
        </div>

        {{-- Paginasi --}}
        <div class="mt-10">
            {{ $karya->links() }}
        </div>
    </div>
</section>

@endsection