@extends('visitor.layout.tamplate')

@section('content')
    {{-- 1. Hero Section Program (Gaya Dark & Modern) --}}
    <section class="pt-44 pb-24 bg-sky-950 relative overflow-hidden">
        {{-- Background Image Overlay --}}
        <div class="absolute inset-0 opacity-10">

        </div>

        <div class="max-w-7xl mx-auto px-6 relative z-10 text-center">
            <span
                class="bg-yellow-400 text-sky-950 px-6 py-2 rounded-full text-[10px] md:text-xs font-black uppercase tracking-widest mb-6 inline-block animate-fade-in">
                Inisiatif Kami
            </span>
            <h1 class="text-4xl md:text-6xl font-extrabold text-white mb-6 leading-tight">
                Program <span class="text-yellow-400 italic font-serif">Unggulan</span>
            </h1>
            <p class="max-w-2xl mx-auto text-sky-100/70 leading-relaxed text-base md:text-lg">
                Inisiatif nyata YPTP dalam membangun masa depan Papua melalui pendidikan, pemberdayaan, dan pengembangan
                karakter.
            </p>
        </div>
    </section>

   {{-- 2. Filter & Search Section --}}
<section class="py-10 bg-white sticky top-20 z-30 border-b border-slate-100 shadow-sm">
    <div class="max-w-7xl mx-auto px-6">
        <div class="flex flex-col lg:flex-row gap-6 justify-between items-center">

            {{-- Kategori Tabs --}}
     

            

            {{-- Search Input Group --}}
            {{-- PERBAIKAN: Ubah POST menjadi GET --}}
            <form action="{{ route('program') }}" method="GET" class="relative w-full lg:w-[400px] flex gap-2">
                {{-- Tambahkan hidden input agar kategori tetap terbawa saat klik tombol Cari --}}
                @if(request('category'))
                    <input type="hidden" name="category" value="{{ request('category') }}">
                @endif

                <div class="relative flex-grow">
                    <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
                    <input type="text" name="search" value="{{ request('search') }}"
                        placeholder="Cari nama program..."
                        class="w-full bg-slate-50 border border-slate-200 rounded-2xl py-3.5 pl-12 pr-4 outline-none focus:ring-2 focus:ring-yptp-blue transition-all text-sm">
                </div>
                <button type="submit"
                    class="bg-sky-950 hover:bg-yptp-blue text-white px-8 rounded-2xl font-bold text-sm transition-all active:scale-95 shadow-lg">
                    Cari
                </button>
            </form>
        </div>
    </div>
</section>

    {{-- 3. Grid Program --}}
    <section class="py-20 px-6 bg-slate-50/50">
        <div class="max-w-7xl mx-auto">
            @if ($programs->count() > 0)
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-10">
                    @foreach ($programs as $item)
                        <article
                            class="group bg-white rounded-[2.5rem] border border-slate-100 overflow-hidden hover:shadow-2xl hover:-translate-y-2 transition-all duration-500 flex flex-col h-full">
                            {{-- Thumbnail --}}
                            <div class="relative h-64 overflow-hidden">
                                <img src="{{ asset('uploads/programs/' . $item->image) }}" alt="{{ $item->title }}"
                                    class="w-full h-full object-cover group-hover:scale-110 transition duration-700">

                                {{-- Badge Kategori --}}
                                <div class="absolute top-6 left-6">
                                    <span
                                        class="bg-yellow-400 text-sky-950 px-4 py-1.5 rounded-xl text-[10px] font-black uppercase tracking-widest shadow-lg">
                                        {{ $item->category_program->name }}
                                    </span>
                                </div>
                            </div>

                            {{-- Content Body --}}
                            <div class="p-8 flex flex-col flex-grow">
                                <h3
                                    class="text-xl font-bold text-sky-950 mb-4 leading-tight group-hover:text-yptp-blue transition line-clamp-2">
                                    {{ $item->title }}
                                </h3>

                                <p class="text-slate-500 text-sm leading-relaxed line-clamp-3 mb-8">
                                    {{ strip_tags($item->description) }}
                                </p>

                                {{-- Footer Card --}}
                                <div class="mt-auto pt-6 border-t border-slate-50">
                                    <a href="{{ route('show_program', $item->slug) }}"
                                        class="inline-flex items-center gap-2 text-yptp-blue font-black text-xs uppercase tracking-widest group/btn hover:gap-4 transition-all">
                                        Detail Program
                                        <i class="fas fa-arrow-right text-[10px]"></i>
                                    </a>
                                </div>
                            </div>
                        </article>
                    @endforeach
                </div>

                {{-- Pagination --}}
                <div class="mt-16 flex justify-center">
                    {{ $programs->appends(request()->query())->links() }}
                </div>
            @else
                {{-- Empty State --}}
                <div class="text-center py-24 bg-white rounded-[3rem] border-2 border-dashed border-slate-200">
                    <div
                        class="w-24 h-24 bg-slate-50 text-slate-300 rounded-full flex items-center justify-center mx-auto mb-8 text-4xl">
                        <i class="fas fa-tasks"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-sky-950 mb-3">Program Tidak Ditemukan</h3>
                    <p class="text-slate-500 mb-8">Maaf, kami tidak menemukan program yang sesuai dengan pencarian Anda.</p>
                    <a href="{{ route('program') }}"
                        class="bg-yptp-blue text-white px-8 py-4 rounded-2xl font-bold text-sm hover:bg-sky-950 transition-all shadow-lg">
                        Lihat Semua Program
                    </a>
                </div>
            @endif
        </div>
    </section>
@endsection