@extends('layouts.app')

@section('content')

<section class="py-16 bg-white">
    <div class="container mx-auto px-4">
        
        {{-- ALPINE.JS DATA: Menyimpan slug kategori yang aktif. 'all' berarti tampilkan semua. --}}
        <div x-data="{ activeSlug: 'all' }">
        
            {{-- HEADER UTAMA & DROPDOWN --}}
            <div class="mb-12 flex flex-col md:flex-row md:items-center md:justify-between border-b pb-4">
                
                {{-- Bagian Teks Utama --}}
                <div class="mb-6 md:mb-0">
                    <h1 class="text-4xl font-extrabold text-gray-900">Ruang Santri</h1>
                    <p class="text-xl text-gray-600 max-w-lg mt-1">
                        Jelajahi karya-karya kreatif dan intelektual dari santri.
                    </p>
                </div>
                
                {{-- Dropdown Kategori (Binding ke activeSlug) --}}
                <div class="max-w-xs w-full sm:w-64">
                    <select 
                        id="kategori-select"
                        {{-- Menggunakan x-model Alpine untuk mengikat nilai dropdown ke activeSlug --}}
                        x-model="activeSlug"
                        class="w-full border border-gray-300 bg-white p-3 rounded-lg shadow-md text-gray-700 font-medium focus:ring-2 focus:ring-blue-500 transition">
                        
                        <option value="all">-- Semua Kategori --</option>
                        
                        @forelse ($kategoriSemua as $kategori)
                        {{-- Nilai option adalah slug kategori --}}
                        <option value="{{ $kategori->slug }}">
                            {{ $kategori->nama_kategori }}
                        </option>
                        @empty
                        <option disabled>Belum ada kategori yang didefinisikan.</option>
                        @endforelse
                    </select>
                </div>
            </div>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                @forelse ($karyaTerbaru as $item)
                
                {{-- KONDISI FILTER ALPINE.JS: Jika activeSlug adalah 'all' ATAU activeSlug sama dengan slug item ini --}}
                <a href="{{ route('kategori.ruang-santri.show', $item->slug) }}"
                    x-show="activeSlug === 'all' || activeSlug === '{{ $item->kategori->slug ?? 'uncategorized' }}'"
                    x-transition:enter.duration.500ms
                    x-transition:leave.duration.300ms
                    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>
                    @else
                    <div class="h-48 w-full bg-gray-200 flex items-center justify-center text-gray-500 text-sm">
                        No Image
                    </div>
                    @endif
                    
                    <div class="p-4 flex flex-col flex-grow">
                        <span class="text-xs font-medium text-blue-500 mb-1">{{ $item->kategori->nama_kategori ?? 'Uncategorized' }}</span>
                        <h3 class="text-lg font-semibold 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), 80) }}</p>
                        <span class="mt-4 text-sm font-medium text-gray-500">Oleh: {{ $item->penulis }}</span>
                        <span class="text-blue-600 text-sm font-medium mt-2">Lihat Karya →</span>
                    </div>
                </a>
                @empty
                <p class="col-span-4 text-gray-500">Belum ada karya terbaru untuk ditampilkan.</p>
                @endforelse
            </div>
            
            {{-- Pesan jika tidak ada yang ditemukan (opsional) --}}
            <template x-if="$root.querySelectorAll('a[x-show]').length === $root.querySelectorAll('a[x-show]:not([style*=\'display: none\'])').length">
                <p class="col-span-4 text-gray-500 text-center mt-8" x-show="$root.querySelectorAll('a[x-show]:not([style*=\'display: none\'])').length === 0">
                    Tidak ada karya dalam kategori ini.
                </p>
            </template>
            
        </div> {{-- Penutup x-data --}}
    </div>
</section>

@endsection