@extends('layouts.front')
@section('title', 'Beranda')

@push('styles')
<style>
    .swiper-wrapper { align-items: stretch !important; }
    .swiper-slide { height: auto !important; display: flex !important; }
    .swiper-pagination-bullet-active { background-color: #00923F !important; }
        
    .swiper-pagination, .swiper-pagination-agenda { position: relative !important; margin-top: 30px !important; bottom: 0 !important; width: 100% !important; text-align: center !important; }

    .swiper-slide { -webkit-tap-highlight-color: transparent; }
</style>
@endpush

@section('content')
    <!-- ============================================== -->
    <!-- HERO SECTION (TIDAK DISENTUH SAMA SEKALI) -->
    <!-- ============================================== -->
    <section class="pt-20 pb-32 relative overflow-hidden bg-cover bg-center bg-no-repeat" style="background-image: url('{{ asset('images/fotokegiatan.jpeg') }}');">
        
        <div class="absolute inset-0 bg-[#243025]/80 mix-blend-multiply z-0"></div>

        <div class="absolute top-[-10%] right-[-5%] w-96 h-96 bg-white opacity-10 rounded-full blur-3xl pointer-events-none z-0"></div>
        <div class="absolute bottom-[10%] left-[-10%] w-80 h-80 bg-yellow-400 opacity-20 rounded-full blur-3xl pointer-events-none z-0"></div>
        <div class="max-w-5xl mx-auto px-4 text-center relative z-10">
            <div data-aos="fade-down" data-aos-duration="1000" class="inline-flex items-center gap-2 px-5 py-2 rounded-full bg-white/10 text-white border border-white/20 backdrop-blur-sm text-sm font-bold mb-8 shadow-sm">
                ✨ Selamat Datang di Portal Resmi
            </div>
            
            <h1 data-aos="fade-up" data-aos-delay="100" data-aos-duration="1000" class="text-4xl md:text-5xl lg:text-7xl font-extrabold text-white tracking-tight mb-6 leading-[1.1]">
                Perempuan Muda <span class="text-yellow-400">Berdaya</span>, <br> Membangun Peradaban
            </h1>
            
            <p data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000" class="text-lg md:text-xl text-green-50 max-w-3xl mx-auto mb-10 leading-relaxed font-medium">
                Fatayat NU Tahunan hadir sebagai wadah pemberdayaan perempuan muda Muslimah. Bersama, kita ciptakan perubahan positif melalui pendidikan, sosial, dan dakwah.
            </p>
            
            <div data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000" class="flex flex-col sm:flex-row justify-center gap-4">
                <a href="{{ url('/profil/visi-misi') }}" class="bg-yellow-400 hover:bg-yellow-500 text-green-950 px-8 py-3.5 rounded-xl font-bold transition-all shadow-lg hover:shadow-xl hover:-translate-y-1">
                    Tentang Kami
                </a>
                <a href="{{ url('/kontak') }}" class="bg-transparent border-2 border-green-400/50 hover:border-white text-white hover:bg-white/10 px-8 py-3.5 rounded-xl font-bold transition-all">
                    Gabung Bersama Kami
                </a>
            </div>
        </div>

        <div class="absolute bottom-[-1px] left-0 w-full overflow-hidden leading-none z-10">
            <svg class="relative block w-full h-[70px] md:h-[76px]" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
                <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V120H0Z" fill="#ffffff"></path>
            </svg>
        </div>
    </section>

    <!-- Section Berita Terkini -->
    <section class="py-20 bg-white relative">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div data-aos="fade-up" class="text-center mb-14 max-w-2xl mx-auto">
                <h2 class="text-3xl font-extrabold text-gray-900 mb-4">Kabar Terkini</h2>
                <div class="w-20 h-1.5 bg-yellow-400 mx-auto rounded-full mb-6"></div>
                <p class="text-gray-600 text-lg">Pantau terus informasi terbaru, liputan kegiatan, dan berbagai artikel menarik seputar pergerakan Fatayat NU di Kecamatan Tahunan.</p>
            </div>

            <div data-aos="fade-up" data-aos-delay="200" class="swiper beritaSwiper mb-8 pb-10">
                <div class="swiper-wrapper">
                    @forelse ($articles as $article)
                        <div class="swiper-slide w-full">
                            <div class="w-full h-full bg-white rounded-3xl border border-gray-100 shadow-sm hover:shadow-xl hover:border-green-200 transition duration-300 flex flex-col group overflow-hidden">
                                <div class="relative h-64 bg-gray-50 flex items-center justify-center overflow-hidden border-b border-gray-100">
                                    @if($article->image)
                                        <img src="{{ asset('storage/' . $article->image) }}" class="w-full h-full object-cover group-hover:scale-110 transition duration-700">
                                    @else
                                        <div class="text-green-300 font-bold text-2xl">Fatayat NU</div>
                                    @endif
                                    <div class="absolute top-4 left-4 bg-white text-[#00923F] text-[11px] font-bold px-3 py-1.5 rounded-full shadow-sm">
                                        {{ \Carbon\Carbon::parse($article->created_at)->locale('id')->translatedFormat('d M Y') }}
                                    </div>
                                </div>
                                
                                <div class="p-6 md:p-8 flex flex-col flex-grow w-full">
                                    <h3 class="font-bold text-xl text-gray-800 mb-3 line-clamp-2 leading-snug group-hover:text-[#00923F] transition">{{ $article->title }}</h3>
                                    <div class="text-gray-600 text-sm line-clamp-3 mb-6 flex-grow leading-relaxed">{!! \Illuminate\Support\Str::limit(strip_tags($article->content), 100) !!}</div>
                                    
                                    <a href="{{ url('/berita/' . $article->slug) }}" class="block bg-gray-50 text-[#00923F] text-center text-sm font-bold py-3.5 rounded-xl border border-gray-100 hover:bg-[#00923F] hover:text-white transition w-full mt-auto">
                                        Baca Selengkapnya
                                    </a>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="swiper-slide w-full text-center text-gray-500 py-10 bg-white rounded-3xl border border-dashed border-gray-300">Belum ada berita yang dipublikasikan.</div>
                    @endforelse
                </div>
                <div class="swiper-pagination"></div>
            </div>
            
            <div data-aos="zoom-in" data-aos-delay="300" class="text-center mt-4">
                <a href="{{ url('/berita') }}" class="inline-flex items-center text-[#00923F] font-bold bg-green-50 px-8 py-3.5 rounded-xl hover:bg-[#00923F] hover:text-white transition shadow-sm">
                    Lihat Semua Berita 
                    <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
                </a>
            </div>
        </div>
    </section>

    <!-- Section Agenda (SUDAH PAKAI SWIPER & POPUP) -->
    <section class="py-24 bg-gray-50 border-t border-gray-100 overflow-hidden">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div data-aos="fade-up" class="text-center mb-12">
                <h2 class="text-3xl font-extrabold text-gray-900 mb-4">Agenda Mendatang</h2>
                <div class="w-20 h-1.5 bg-[#00923F] mx-auto rounded-full mb-6"></div>
                <p class="text-gray-600 text-lg">Jangan lewatkan jadwal kegiatan rutin dan acara khusus dari PAC maupun Ranting.</p>
            </div>

            <!-- Kontainer Swiper Agenda -->
            <div data-aos="fade-up" data-aos-delay="200" class="swiper agendaSwiper pb-8 pt-4">
                <div class="swiper-wrapper">
                    @forelse ($events as $event)
                        <div class="swiper-slide">
                            <!-- Card diklik akan membuka Modal Pop-up -->
                            <div onclick="openAgendaModal(this)" 
                                 data-title="{{ $event->name }}"
                                 data-date="{{ \Carbon\Carbon::parse($event->event_date)->locale('id')->translatedFormat('l, d F Y - H:i') }} WIB"
                                 data-location="{{ $event->location }}"
                                 data-desc="{{ $event->description ?? 'Tidak ada catatan tambahan untuk agenda ini. Silakan hadir tepat waktu.' }}"
                                 class="w-full bg-white rounded-3xl p-6 border border-gray-100 flex flex-col hover:border-green-300 hover:shadow-xl transition-all duration-300 group hover:-translate-y-1 cursor-pointer">
                                
                                <div class="flex gap-5 items-start pointer-events-none">
                                    <div class="bg-green-50 p-4 rounded-2xl text-center shadow-sm border border-green-100 shrink-0 group-hover:bg-[#00923F] transition-colors duration-300">
                                        <span class="block text-xs text-green-700 font-bold uppercase group-hover:text-green-100">
                                            {{ \Carbon\Carbon::parse($event->event_date)->locale('id')->translatedFormat('M') }}
                                        </span>
                                        <span class="block text-2xl font-extrabold text-[#00923F] group-hover:text-white">
                                            {{ \Carbon\Carbon::parse($event->event_date)->format('d') }}
                                        </span>
                                    </div>
                                    <div>
                                        <h3 class="font-bold text-lg text-gray-800 mb-2 group-hover:text-[#00923F] transition leading-tight line-clamp-2">{{ $event->name }}</h3>
                                        <p class="text-sm text-gray-500 mb-3 flex items-start gap-1.5">
                                            <svg class="w-4 h-4 text-gray-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path></svg>
                                            <span class="line-clamp-1">{{ $event->location }}</span>
                                        </p>
                                    </div>
                                </div>

                                <div class="mt-5 pt-4 border-t border-gray-100 flex-grow pointer-events-none relative">
                                    <!-- Potong teks jadi 2 baris saja untuk Preview -->
                                    <p class="text-sm text-gray-600 line-clamp-2 leading-relaxed">
                                        {{ $event->description ?? 'Tidak ada catatan tambahan untuk agenda ini...' }}
                                    </p>
                                    <span class="text-[#00923F] text-xs font-bold mt-3 inline-block">Klik untuk detail &rarr;</span>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="w-full text-center text-gray-500 py-12 border border-dashed rounded-3xl bg-gray-50">Belum ada agenda kegiatan dalam waktu dekat.</div>
                    @endforelse
                </div>
                <!-- Pagination untuk Agenda -->
                <div class="swiper-pagination-agenda text-center mt-4"></div>
            </div>
            
        </div>
    </section>

    <!-- Cuplikan Galeri -->
    <section class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4">
            <div data-aos="fade-up" class="text-center mb-10">
                <h2 class="text-3xl font-extrabold text-gray-900">Galeri <span class="text-[#00923F]">Terbaru</span></h2>
                <p class="text-gray-500 mt-2">Momen pergerakan dan kegiatan kami.</p>
            </div>
            
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                @foreach($albums as $album)
                    @if($album->galleries->first())
                        <a href="{{ url('/galeri') }}" data-aos="zoom-in" data-aos-delay="{{ $loop->iteration * 100 }}" class="group relative aspect-square rounded-2xl overflow-hidden shadow-sm block">
                            <img src="{{ asset('storage/'.$album->galleries->first()->image_path) }}" class="w-full h-full object-cover group-hover:scale-110 transition duration-500">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent flex flex-col justify-end p-4">
                                <span class="text-white font-bold text-sm truncate">{{ $album->nama_album }}</span>
                            </div>
                        </a>
                    @endif
                @endforeach
            </div>
            
            <div data-aos="fade-up" class="text-center mt-10">
                <a href="{{ url('/galeri') }}" class="inline-block border-2 border-[#00923F] text-[#00923F] font-bold px-6 py-2.5 rounded-full hover:bg-[#00923F] hover:text-white transition">Lihat Semua Galeri</a>
            </div>
        </div>
    </section>

    <!-- Tautan Cepat (SUDAH PAKAI SWIPER) -->
    <section class="py-16 bg-green-900 text-white relative overflow-hidden">
        <div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0); background-size: 24px 24px;"></div>
        <div class="max-w-7xl mx-auto px-4 relative z-10">
            
            <div data-aos="fade-up" data-aos-delay="100" class="swiper tautanSwiper pb-8 pt-4">
                <div class="swiper-wrapper">
                    <div class="swiper-slide w-full">
                        <a href="{{ url('/profil/sejarah') }}" class="w-full h-full p-6 bg-white/10 rounded-2xl text-center hover:bg-[#00923F] transition border border-white/20 backdrop-blur-sm group block select-none">
                            <div class="w-12 h-12 bg-white text-green-900 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition pointer-events-none">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
                            </div>
                            <h3 class="font-bold text-lg pointer-events-none">Sejarah Kami</h3>
                        </a>
                    </div>
                    
                    <div class="swiper-slide w-full">
                        <a href="{{ url('/profil/visi-misi') }}" class="w-full h-full p-6 bg-white/10 rounded-2xl text-center hover:bg-[#00923F] transition border border-white/20 backdrop-blur-sm group block select-none">
                            <div class="w-12 h-12 bg-white text-green-900 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition pointer-events-none">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path></svg>
                            </div>
                            <h3 class="font-bold text-lg pointer-events-none">Visi & Misi</h3>
                        </a>
                    </div>

                    <div class="swiper-slide w-full">
                        <a href="{{ url('/profil/struktur') }}" class="w-full h-full p-6 bg-white/10 rounded-2xl text-center hover:bg-[#00923F] transition border border-white/20 backdrop-blur-sm group block select-none">
                            <div class="w-12 h-12 bg-white text-green-900 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition pointer-events-none">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                            </div>
                            <h3 class="font-bold text-lg pointer-events-none">Struktur Organisasi</h3>
                        </a>
                    </div>

                    <div class="swiper-slide w-full">
                        <a href="{{ url('/berita') }}" class="w-full h-full p-6 bg-white/10 rounded-2xl text-center hover:bg-[#00923F] transition border border-white/20 backdrop-blur-sm group block select-none">
                            <div class="w-12 h-12 bg-white text-green-900 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition pointer-events-none">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path></svg>
                            </div>
                            <h3 class="font-bold text-lg pointer-events-none">Portal Berita</h3>
                        </a>
                    </div>
                    
                    <div class="swiper-slide w-full">
                        <a href="{{ url('/galeri') }}" class="w-full h-full p-6 bg-white/10 rounded-2xl text-center hover:bg-[#00923F] transition border border-white/20 backdrop-blur-sm group block select-none">
                            <div class="w-12 h-12 bg-white text-green-900 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition pointer-events-none">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                            </div>
                            <h3 class="font-bold text-lg pointer-events-none">Galeri Kegiatan</h3>
                        </a>
                    </div>

                    <div class="swiper-slide w-full">
                        <a href="{{ url('/kontak') }}" class="w-full h-full p-6 bg-white/10 rounded-2xl text-center hover:bg-[#00923F] transition border border-white/20 backdrop-blur-sm group block select-none">
                            <div class="w-12 h-12 bg-white text-green-900 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition pointer-events-none">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
                            </div>
                            <h3 class="font-bold text-lg pointer-events-none">Hubungi Kami</h3>
                        </a>
                    </div>
                    
                </div>
            </div>
            
        </div>
    </section>

    <!-- ============================================== -->
    <!-- KODE HTML MODAL POP-UP AGENDA (HIDDEN DEFAULT) -->
    <!-- ============================================== -->
    <div id="agendaModal" class="fixed inset-0 z-[999] hidden items-center justify-center p-4 bg-black/60 backdrop-blur-sm opacity-0 transition-opacity duration-300">
        <div class="bg-white rounded-3xl shadow-2xl w-full max-w-lg transform scale-95 transition-transform duration-300 relative overflow-hidden flex flex-col max-h-[90vh]">
            
            <div class="bg-[#00923F] p-6 text-white relative shrink-0">
                <button onclick="closeAgendaModal()" class="absolute top-4 right-4 bg-white/20 hover:bg-white/40 rounded-full p-2 transition">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
                <h3 id="modalTitle" class="font-extrabold text-2xl pr-8 line-clamp-2">Judul</h3>
            </div>
            
            <div class="p-6 overflow-y-auto">
                <div class="flex items-center gap-3 mb-3 text-sm font-bold text-gray-700">
                    <div class="bg-yellow-100 text-yellow-800 p-2.5 rounded-xl">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                    </div>
                    <span id="modalDate">Tanggal</span>
                </div>
                <div class="flex items-center gap-3 mb-6 text-sm font-bold text-gray-700">
                    <div class="bg-blue-100 text-blue-800 p-2.5 rounded-xl">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path></svg>
                    </div>
                    <span id="modalLocation">Lokasi</span>
                </div>
                
                <hr class="border-gray-100 mb-4 border-2">
                <h4 class="font-bold text-gray-900 mb-2">Deskripsi Lengkap Kegiatan:</h4>
                <p id="modalDesc" class="text-gray-600 text-sm leading-relaxed whitespace-pre-wrap"></p>
            </div>
            
            <div class="p-4 border-t border-gray-100 shrink-0 bg-gray-50">
                <button onclick="closeAgendaModal()" class="w-full bg-[#00923F] hover:bg-green-800 text-white font-bold py-3.5 rounded-xl transition shadow-sm">Tutup Info</button>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            if(typeof Swiper !== 'undefined') {
                // 1. Swiper Berita
                new Swiper(".beritaSwiper", {
                    slidesPerView: 1.2, spaceBetween: 20, loop: false, grabCursor: true,
                    autoplay: { delay: 4000, disableOnInteraction: false },
                    pagination: { el: ".swiper-pagination", clickable: true, dynamicBullets: true },
                    breakpoints: { 640: { slidesPerView: 2.2 }, 1024: { slidesPerView: 3, spaceBetween: 24 } },
                });

                // 2. Swiper Agenda (BARU)
                new Swiper(".agendaSwiper", {
                    slidesPerView: 1.1, spaceBetween: 16, loop: false, grabCursor: true,
                    pagination: { el: ".swiper-pagination-agenda", clickable: true, dynamicBullets: true },
                    breakpoints: { 640: { slidesPerView: 2.2 }, 1024: { slidesPerView: 3, spaceBetween: 24 } },
                });

                // 3. Swiper Tautan Cepat (BARU)
                new Swiper(".tautanSwiper", {
                    slidesPerView: 2.2, spaceBetween: 16, loop: false, grabCursor: true,
                    breakpoints: { 640: { slidesPerView: 4.2 }, 1024: { slidesPerView: 6, spaceBetween: 24 } },
                });
            }
        });

        // Script Kendali Modal Pop-up Agenda
        function openAgendaModal(element) {
            // Ambil data dari atribut HTML
            document.getElementById('modalTitle').innerText = element.getAttribute('data-title');
            document.getElementById('modalDate').innerText = element.getAttribute('data-date');
            document.getElementById('modalLocation').innerText = element.getAttribute('data-location');
            document.getElementById('modalDesc').innerText = element.getAttribute('data-desc');
            
            const modal = document.getElementById('agendaModal');
            modal.classList.remove('hidden');
            modal.classList.add('flex');
            
            // Sedikit delay agar animasi munculnya terasa mulus
            setTimeout(() => {
                modal.classList.remove('opacity-0');
                modal.children[0].classList.remove('scale-95');
            }, 10);
        }
        
        function closeAgendaModal() {
            const modal = document.getElementById('agendaModal');
            modal.classList.add('opacity-0');
            modal.children[0].classList.add('scale-95');
            
            // Tunggu animasi selesai baru disembunyikan total
            setTimeout(() => {
                modal.classList.add('hidden');
                modal.classList.remove('flex');
            }, 300);
        }
    </script>
    @endpush
@endsection