@extends('layouts.front')
@section('title', 'Program Kegiatan')

@section('content')
<div class="bg-gray-50 min-h-screen pb-16">
    <!-- Header Area -->
    <div class="text-center pt-16 mb-12 px-4">
        <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-green-100 text-[#00923F] text-sm font-bold mb-4 border border-green-200 shadow-sm" data-aos="fade-down">
            ✨ Inovasi & Pergerakan
        </div>
        <h1 class="text-4xl md:text-5xl font-extrabold text-gray-900 tracking-tight mb-4" data-aos="fade-up" data-aos-delay="100">Program <span class="text-[#00923F]">Kegiatan</span></h1>
        <p class="text-lg text-gray-600 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="200">Pantau berbagai program kerja dan agenda kegiatan dari 7 bidang pengurus PAC Fatayat NU Tahunan.</p>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-aos="fade-up" data-aos-delay="300">
        <div class="flex flex-col lg:flex-row gap-8 items-start">
            
            <!-- KIRI: Sidebar Kategori 7 Bidang -->
            <div class="w-full lg:w-1/3 shrink-0 lg:sticky lg:top-28">
                <div class="bg-white p-6 rounded-3xl shadow-sm border border-gray-100">
                    <h3 class="font-bold text-lg text-gray-900 mb-4 pb-4 border-b border-gray-100 flex items-center gap-2">
                        <svg class="w-5 h-5 text-[#00923F]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path></svg>
                        Filter Bidang
                    </h3>
                    <div class="flex flex-col gap-2">
                        @foreach($bidangs as $b)
                            <!-- Kita gunakan link (a) agar langsung me-refresh halaman dengan parameter yang benar -->
                            <a href="{{ url('/program-kegiatan?bidang='.urlencode($b).'&sort='.request('sort', 'terbaru')) }}" 
                               class="px-4 py-3 rounded-xl text-sm font-bold transition-all flex items-center justify-between group
                               {{ request('bidang', 'Semua') == $b ? 'bg-[#00923F] text-white shadow-md' : 'bg-gray-50 text-gray-600 hover:bg-green-100 hover:text-[#00923F]' }}">
                                <span>{{ $b }}</span>
                                <svg class="w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity {{ request('bidang', 'Semua') == $b ? 'opacity-100 text-white' : '' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>

            <!-- KANAN: Konten & Sortir -->
            <div class="w-full lg:w-2/3">
                
                <!-- Baris Sortir di Atas Konten -->
                <div class="flex flex-col sm:flex-row justify-between items-center bg-white p-4 rounded-2xl shadow-sm border border-gray-100 mb-6 gap-4">
                    <div class="text-sm font-bold text-gray-600">
                        Menampilkan program untuk: <span class="text-[#00923F]">{{ request('bidang', 'Semua') }}</span>
                    </div>
                    
                    <form action="{{ url('/program-kegiatan') }}" method="GET" id="sortForm" class="flex items-center gap-2 w-full sm:w-auto">
                        <input type="hidden" name="bidang" value="{{ request('bidang', 'Semua') }}">
                        <label class="text-sm font-bold text-gray-500 whitespace-nowrap">Urutkan:</label>
                        <select name="sort" onchange="document.getElementById('sortForm').submit()" class="bg-gray-50 border border-gray-300 text-gray-700 text-sm rounded-xl focus:ring-[#00923F] outline-none px-3 py-2 font-bold cursor-pointer w-full sm:w-auto">
                            <option value="terbaru" {{ request('sort') == 'terbaru' ? 'selected' : '' }}>Paling Baru</option>
                            <option value="terlama" {{ request('sort') == 'terlama' ? 'selected' : '' }}>Paling Lama</option>
                        </select>
                    </form>
                </div>

                <!-- Grid Konten Program -->
                @if($programs->isEmpty())
                    <div class="text-center py-20 bg-white rounded-3xl border border-dashed border-gray-300 shadow-sm">
                        <svg class="mx-auto h-16 w-16 text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path></svg>
                        <p class="text-xl font-bold text-gray-500">Belum ada program kegiatan.</p>
                    </div>
                @else
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        @foreach($programs as $program)
                            <div class="bg-white rounded-3xl border border-gray-100 shadow-sm hover:shadow-xl hover:border-green-300 transition duration-300 flex flex-col group overflow-hidden">
                                <div class="relative h-48 bg-gray-100 overflow-hidden">
                                    @if($program->image)
                                        <img src="{{ asset('storage/' . $program->image) }}" class="w-full h-full object-cover group-hover:scale-110 transition duration-700">
                                    @else
                                        <div class="w-full h-full flex items-center justify-center text-green-200 font-bold text-xl">Fatayat NU</div>
                                    @endif
                                    <div class="absolute top-4 left-4 bg-[#00923F] text-white text-[10px] font-bold px-3 py-1.5 rounded-full shadow-sm max-w-[85%] truncate">
                                        {{ $program->bidang }}
                                    </div>
                                </div>
                                
                                <div class="p-6 flex flex-col flex-grow">
                                    <div class="text-xs text-gray-400 font-bold mb-2">
                                        {{ \Carbon\Carbon::parse($program->created_at)->locale('id')->translatedFormat('d M Y') }}
                                    </div>
                                    <h3 class="font-bold text-lg text-gray-800 mb-3 line-clamp-2 leading-snug group-hover:text-[#00923F] transition">{{ $program->title }}</h3>
                                    <div class="text-gray-600 text-sm line-clamp-3 mb-6 flex-grow leading-relaxed">
                                        {!! \Illuminate\Support\Str::limit(strip_tags($program->content), 80) !!}
                                    </div>
                                    
                                    <a href="{{ url('/program-kegiatan/' . $program->slug) }}" class="block bg-green-50 text-[#00923F] text-center text-sm font-bold py-3 rounded-xl border border-green-100 hover:bg-[#00923F] hover:text-white transition w-full mt-auto">
                                        Lihat Detail
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    
                    <!-- Paginasi -->
                    <div class="mt-6">
                        {{ $programs->links() }}
                    </div>
                @endif
            </div>

        </div>
    </div>
</div>
@endsection