@extends('layouts.app')

@section('content')
    <!-- Top bar -->
    <div class="bg-white text-gray-800 text-xs sm:text-sm flex justify-between items-center px-4 sm:px-6 py-2 border-b border-gray-100">
        <div class="flex items-center space-x-3 sm:space-x-4">
            <div class="flex items-center space-x-1">
                <i class="fas fa-envelope text-[#1dbf4a] text-xs"></i>
                <span class="hidden sm:inline">{{ $settings['email'] ?? 'secretariat@desarrdigital.id' }}</span>
                <span class="sm:hidden">Email</span>
            </div>
            <span class="hidden sm:inline text-gray-300">|</span>
            <div class="flex items-center space-x-1">
                <i class="fas fa-phone-alt text-[#1dbf4a] text-xs"></i>
                <span class="hidden sm:inline">{{ $settings['wa_number'] ?? '+62 812 9496 2546' }}</span>
                <span class="sm:hidden">WA</span>
            </div>
        </div>
        <div class="flex items-center space-x-1 sm:space-x-2">
            <a class="text-[#1dbf4a] hover:text-[#0f9d58] p-1.5 sm:p-1 rounded hover:bg-gray-50 transition-colors" href="#" title="WhatsApp">
                <i class="fab fa-whatsapp text-sm"></i>
            </a>
            <a class="text-[#1dbf4a] hover:text-[#0f9d58] p-1.5 sm:p-1 rounded hover:bg-gray-50 transition-colors" href="#" title="Facebook">
                <i class="fab fa-facebook-f text-sm"></i>
            </a>
            <a class="text-[#1dbf4a] hover:text-[#0f9d58] p-1.5 sm:p-1 rounded hover:bg-gray-50 transition-colors" href="#" title="Twitter">
                <i class="fab fa-twitter text-sm"></i>
            </a>
            <a class="text-[#1dbf4a] hover:text-[#0f9d58] p-1.5 sm:p-1 rounded hover:bg-gray-50 transition-colors" href="#" title="YouTube">
                <i class="fab fa-youtube text-sm"></i>
            </a>
        </div>
    </div>
    
    <!-- Navbar -->
    <nav class="bg-[#1dbf4a] flex items-center justify-between px-4 sm:px-8 py-3">
        <div class="flex items-center space-x-2 sm:space-x-4">
            @if($settings['logo_url'] ?? false)
                <img alt="Website Desa logo" class="w-10 h-10 sm:w-12 sm:h-12 object-contain" src="{{ asset($settings['logo_url']) }}" />
            @else
                <div class="w-10 h-10 sm:w-12 sm:h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center">
                    <span class="text-white font-bold text-sm sm:text-base">WD</span>
                </div>
            @endif
            <div class="text-white font-robotoslab font-semibold text-base sm:text-xl">
                <div>{{ $settings['hero_title'] ?? 'Website Desa' }}</div>
                <div class="text-sm opacity-90">{{ $settings['hero_subtitle'] ?? 'Kec. Ps. Wajo' }}</div>
            </div>
        </div>
        
        <!-- Desktop Navigation -->
        <ul class="hidden lg:flex space-x-6 text-white font-semibold text-sm sm:text-base">
            <li><a class="hover:text-gray-200" href="{{ url('/') }}">Beranda</a></li>
            <li><a class="hover:text-gray-200" href="{{ route('profil-desa') }}">Profil Desa</a></li>
            <li class="relative group">
                <a class="hover:text-gray-200 flex items-center cursor-pointer" href="#">
                    Informasi Desa <i class="fas fa-chevron-down ml-1 text-xs"></i>
                </a>
                <!-- Dropdown Menu -->
                <div class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50">
                    <div class="py-1">
                        <a href="/visi-misi" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-[#1dbf4a]">
                            <i class="fas fa-eye mr-2"></i>Visi dan Misi
                        </a>
                        <a href="/sejarah" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-[#1dbf4a]">
                            <i class="fas fa-history mr-2"></i>Sejarah
                        </a>
                    </div>
                </div>
            </li>
            <li><a class="hover:text-gray-200" href="#">Data Statistik</a></li>
            <li><a class="hover:text-gray-200" href="#">Kontak</a></li>
        </ul>
        
        <!-- Mobile Menu Button -->
        <button id="mobile-menu-btn" class="lg:hidden text-white p-2">
            <i class="fas fa-bars text-lg"></i>
        </button>
        
        <button class="bg-orange-500 hover:bg-orange-600 text-white text-xs sm:text-sm font-semibold rounded-full px-3 sm:px-4 py-1 hidden sm:block" type="button">
            Buat Pengaduan <i class="fas fa-arrow-right ml-1"></i>
        </button>
    </nav>
    
    <!-- Mobile Navigation Menu -->
    <div id="mobile-menu" class="lg:hidden hidden bg-[#1dbf4a] text-white">
        <ul class="px-4 py-2 space-y-2">
            <li class="py-2"><a class="hover:text-gray-200" href="{{ url('/') }}">Beranda</a></li>
            <li class="py-2"><a class="hover:text-gray-200" href="{{ route('profil-desa') }}">Profil Desa</a></li>
            <li class="py-2">
                <div class="mobile-dropdown">
                    <button class="hover:text-gray-200 flex items-center justify-between w-full text-left" onclick="toggleMobileDropdown()">
                        Informasi Desa <i class="fas fa-chevron-down text-xs" id="mobile-dropdown-icon"></i>
                    </button>
                    <div id="mobile-dropdown-content" class="hidden mt-2 ml-4 space-y-1">
                        <a href="/visi-misi" class="block py-1 text-sm hover:text-gray-200">
                            <i class="fas fa-eye mr-2"></i>Visi dan Misi
                        </a>
                        <a href="/sejarah" class="block py-1 text-sm hover:text-gray-200">
                            <i class="fas fa-history mr-2"></i>Sejarah
                        </a>
                    </div>
                </div>
            </li>
            <li class="py-2"><a class="hover:text-gray-200" href="#">Data Statistik</a></li>
            <li class="py-2"><a class="hover:text-gray-200" href="#">Kontak</a></li>
            <li class="py-2">
                <button class="bg-orange-500 hover:bg-orange-600 text-white text-sm font-semibold rounded-full px-4 py-2 w-full" type="button">
                    Buat Pengaduan <i class="fas fa-arrow-right ml-1"></i>
                </button>
            </li>
        </ul>
    </div>
    
    <!-- Hero Section -->
    <section class="relative">
        <img alt="Village background" class="w-full h-48 sm:h-64 md:h-[28rem] object-cover" src="{{ $settings['background_url'] ?? 'https://storage.googleapis.com/a1aa/image/5c5557dc-83c0-4629-736c-4b7f4debd7fd.jpg' }}" />
        <div class="absolute inset-0 bg-black bg-opacity-40 flex flex-col items-center justify-center px-4">

            <h2 class="text-white text-center text-xs sm:text-sm md:text-base font-semibold mb-4 sm:mb-6 px-2">{{ $settings['contact_address'] ?? 'Desa Mantowu, Kec. Ps. Wajo, Kab. Bone, Sulawesi Selatan' }}</h2>
            <input class="w-full max-w-xl rounded-full py-2 px-4 text-sm sm:text-base placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-400" placeholder="Cari informasi yang anda butuhkan disini..." type="text"/>
            <div class="mt-6 sm:mt-8 w-full max-w-4xl flex flex-wrap justify-center gap-2 sm:gap-4 text-xs sm:text-sm">
                <a class="bg-white rounded-lg shadow-md w-16 sm:w-20 md:w-24 py-2 sm:py-3 text-center font-semibold text-gray-700 hover:bg-gray-100" href="{{ route('galeri.list') }}">Galeri</a>
                <a class="bg-white rounded-lg shadow-md w-16 sm:w-20 md:w-24 py-2 sm:py-3 text-center font-semibold text-gray-700 hover:bg-gray-100" href="{{ route('berita.list') }}">Berita</a>
                <a class="bg-white rounded-lg shadow-md w-16 sm:w-20 md:w-24 py-2 sm:py-3 text-center font-semibold text-gray-700 hover:bg-gray-100" href="/pengaduan">Pengaduan</a>
                <a class="bg-white rounded-lg shadow-md w-16 sm:w-20 md:w-24 py-2 sm:py-3 text-center font-semibold text-gray-700 hover:bg-gray-100" href="{{ route('berita.list') }}">Berita</a>

            </div>
        </div>
    </section>
    
    <!-- Announcement and Pie Chart Section -->
    <section class="max-w-7xl mx-auto px-4 sm:px-8 py-4 sm:py-8 flex flex-col lg:flex-row gap-4 sm:gap-6">
        <!-- Announcement -->
        <div class="lg:w-2/3 bg-white rounded-lg shadow-md overflow-hidden relative">
            <div class="absolute top-2 left-2 bg-orange-400 text-white text-xs font-semibold px-3 py-1 rounded z-10">
                Pengumuman Desa
            </div>
            @if($pengumuman->count())
                <!-- First/Latest Announcement (Always Visible) -->
                @php $firstItem = $pengumuman->first(); @endphp
                <div class="p-3 sm:p-4 border-t border-gray-200 cursor-pointer hover:bg-gray-50 transition-colors group pengumuman-item" 
                     onclick="openPengumumanModal(@json($firstItem->id), @json($firstItem->judul), @json($firstItem->isi), @json($firstItem->gambar ? asset($firstItem->gambar) : ''), @json($firstItem->published_at ? $firstItem->published_at->format('d/m/Y H:i') : $firstItem->created_at->format('d/m/Y H:i')), @json($firstItem->author))">
                    <div class="flex items-center space-x-2 mb-2">
                        <img alt="Pengumuman icon" class="w-5 h-5 sm:w-6 sm:h-6" src="{{ $firstItem->gambar ? asset($firstItem->gambar) : 'https://storage.googleapis.com/a1aa/image/56bf6c35-b8b4-4e50-f31d-c52bf9814b01.jpg' }}"/>
                        <h3 class="text-xs sm:text-sm font-semibold group-hover:text-[#1dbf4a] transition-colors">{{ $firstItem->judul }}</h3>
                        <span class="bg-red-500 text-white text-[10px] px-2 py-0.5 rounded-full">TERBARU</span>
                        <i class="fas fa-expand-arrows-alt text-gray-400 group-hover:text-[#1dbf4a] ml-auto transition-colors opacity-0 group-hover:opacity-100"></i>
                    </div>
                    <p class="text-xs text-gray-600 mb-1">
                        {{ Str::limit($firstItem->isi, 120) }}
                    </p>
                    <div class="text-xs text-gray-400 flex items-center space-x-2">
                        <i class="far fa-clock"></i>
                        <span>{{ $firstItem->published_at ? $firstItem->published_at->format('d/m/Y H:i') : $firstItem->created_at->format('d/m/Y H:i') }}</span>
                        <span class="hidden sm:inline">|</span>
                        <span>{{ $firstItem->author }}</span>
                        <span class="ml-auto text-[#1dbf4a] opacity-0 group-hover:opacity-100 transition-opacity">
                            <i class="fas fa-mouse-pointer mr-1"></i>Klik untuk perbesar
                        </span>
                    </div>
                </div>

                @if($pengumuman->count() > 1)
                <!-- Dropdown Toggle Button -->
                <div class="border-t border-gray-200 bg-gray-50">
                    <button 
                        id="pengumuman-dropdown-btn" 
                        class="w-full p-3 text-left text-xs sm:text-sm text-gray-600 hover:bg-gray-100 transition-all duration-200 flex items-center justify-between group"
                        onclick="togglePengumumanDropdown()"
                    >
                        <span class="flex items-center">
                            <i class="fas fa-list mr-2 text-[#1dbf4a]"></i>
                            <span>Lihat {{ $pengumuman->count() - 1 }} pengumuman lainnya</span>
                            <span class="ml-2 bg-[#1dbf4a] text-white text-[10px] px-2 py-0.5 rounded-full">{{ $pengumuman->count() - 1 }}</span>
                        </span>
                        <i id="pengumuman-dropdown-icon" class="fas fa-chevron-down transition-transform duration-300 group-hover:text-[#1dbf4a]"></i>
                    </button>
                </div>

                <!-- Dropdown Content (Hidden by default) -->
                <div id="pengumuman-dropdown" class="hidden transition-all duration-300 ease-in-out max-h-0 overflow-hidden">
                    @foreach($pengumuman->skip(1) as $item)
                        <div class="p-3 sm:p-4 border-t border-gray-200 bg-gray-50 cursor-pointer hover:bg-gray-100 transition-colors group pengumuman-item" 
                             onclick="openPengumumanModal(@json($item->id), @json($item->judul), @json($item->isi), @json($item->gambar ? asset($item->gambar) : ''), @json($item->published_at ? $item->published_at->format('d/m/Y H:i') : $item->created_at->format('d/m/Y H:i')), @json($item->author))">
                            <div class="flex items-center space-x-2 mb-2">
                                <img alt="Pengumuman icon" class="w-4 h-4 sm:w-5 sm:h-5" src="{{ $item->gambar ? asset($item->gambar) : 'https://storage.googleapis.com/a1aa/image/56bf6c35-b8b4-4e50-f31d-c52bf9814b01.jpg' }}"/>
                                <h3 class="text-xs sm:text-sm font-semibold group-hover:text-[#1dbf4a] transition-colors">{{ $item->judul }}</h3>
                                <i class="fas fa-expand-arrows-alt text-gray-400 group-hover:text-[#1dbf4a] ml-auto transition-colors opacity-0 group-hover:opacity-100"></i>
                            </div>
                            <p class="text-xs text-gray-600 mb-1">
                                {{ Str::limit($item->isi, 80) }}
                            </p>
                            <div class="text-xs text-gray-400 flex items-center space-x-2">
                                <i class="far fa-clock"></i>
                                <span>{{ $item->published_at ? $item->published_at->format('d/m/Y H:i') : $item->created_at->format('d/m/Y H:i') }}</span>
                                <span class="hidden sm:inline">|</span>
                                <span>{{ $item->author }}</span>
                                <span class="ml-auto text-[#1dbf4a] opacity-0 group-hover:opacity-100 transition-opacity text-[10px]">
                                    <i class="fas fa-search-plus mr-1"></i>Perbesar
                                </span>
                            </div>
                        </div>
                    @endforeach
                    
                    <!-- View All Button -->
                    <div class="p-3 border-t border-gray-200 bg-gray-100">
                        <a href="{{ route('pengumuman.list') }}" class="block text-center text-xs sm:text-sm text-[#1dbf4a] font-semibold hover:text-[#0f9d58] transition-colors">
                            <i class="fas fa-external-link-alt mr-1"></i>
                            Lihat Semua Pengumuman
                        </a>
                    </div>
                </div>
                @endif
            @else
                <div class="p-4 text-center text-gray-500">
                    <i class="fas fa-bullhorn text-2xl mb-2 opacity-50"></i>
                    <p class="text-sm">Belum ada pengumuman.</p>
                </div>
            @endif
        </div>
        <!-- Pie Chart -->
        <div class="lg:w-1/3 bg-white rounded-lg shadow-md p-4 flex flex-col items-center justify-center">
            <h4 class="text-xs sm:text-sm font-semibold mb-2">Data Penduduk Desa</h4>
            @if($data_penduduk)
            <div class="w-32 h-32 sm:w-40 sm:h-40 relative">
                <svg class="w-full h-full" viewBox="0 0 36 36">
                    <circle class="text-gray-200" cx="18" cy="18" fill="transparent" r="15" stroke="currentColor" stroke-width="3"></circle>
                    <!-- Laki-laki circle -->
                    <circle class="text-blue-500" cx="18" cy="18" fill="transparent" r="15" stroke="currentColor" stroke-dasharray="{{ $data_penduduk->stroke_dash_array_laki_laki }}" stroke-linecap="round" stroke-width="3" transform="rotate(-90 18 18)"></circle>
                    <!-- Perempuan circle -->
                    <circle class="text-pink-500" cx="18" cy="18" fill="transparent" r="15" stroke="currentColor" stroke-dasharray="{{ $data_penduduk->stroke_dash_array_perempuan }}" stroke-linecap="round" stroke-width="3" transform="rotate({{ -90 + ($data_penduduk->persentase_laki_laki * 3.6) }} 18 18)"></circle>
                </svg>
                <div class="absolute inset-0 flex flex-col items-center justify-center text-[10px] font-semibold text-gray-700">
                    <div class="text-center space-y-1">
                        <div class="flex items-center justify-center space-x-1">
                            <span class="w-2 h-2 bg-blue-500 rounded-full"></span>
                            <span>L: {{ $data_penduduk->laki_laki }}</span>
                        </div>
                        <div class="flex items-center justify-center space-x-1">
                            <span class="w-2 h-2 bg-pink-500 rounded-full"></span>
                            <span>P: {{ $data_penduduk->perempuan }}</span>
                        </div>
                        <div class="text-gray-500 font-bold mt-2">
                            Total: {{ $data_penduduk->total_penduduk }}
                        </div>
                    </div>
                </div>
            </div>
            @else
            <div class="w-32 h-32 sm:w-40 sm:h-40 flex items-center justify-center">
                <div class="text-center text-gray-500">
                    <i class="fas fa-users text-2xl mb-2"></i>
                    <p class="text-xs">Data belum tersedia</p>
                    <p class="text-[10px] text-gray-400">Silakan tambahkan di admin panel</p>
                </div>
            </div>
            @endif
        </div>
    </section>
    
    <!-- Jadwal Sholat Section -->
    <section class="max-w-7xl mx-auto px-4 sm:px-8 py-4">
        <div class="bg-white rounded-lg shadow-md border border-[#1dbf4a] flex flex-col sm:flex-row items-center sm:items-stretch">
            <div class="bg-[#1dbf4a] text-white rounded-t-lg sm:rounded-l-lg sm:rounded-tr-none flex items-center justify-center px-4 sm:px-6 py-3 sm:py-4 w-full sm:w-64">
                <i class="fas fa-moon text-xl sm:text-2xl mr-2"></i>
                <div>
                    <p class="text-xs">Jadwal Sholat {{ $settings['hero_title'] ?? 'Desa Mantowu' }}</p>
                </div>
            </div>
            <div class="flex flex-wrap sm:flex-nowrap justify-between flex-grow px-4 py-3 gap-2 sm:gap-4 w-full">
                <div class="text-center w-14 sm:w-16 md:w-20">
                    <p class="text-xs font-semibold">Imsak</p>
                    <p class="text-sm font-bold">04:32</p>
                </div>
                <div class="text-center w-14 sm:w-16 md:w-20">
                    <p class="text-xs font-semibold">Subuh</p>
                    <p class="text-sm font-bold">04:40</p>
                </div>
                <div class="text-center w-14 sm:w-16 md:w-20">
                    <p class="text-xs font-semibold">Dzuhur</p>
                    <p class="text-sm font-bold">11:59</p>
                </div>
                <div class="text-center w-14 sm:w-16 md:w-20">
                    <p class="text-xs font-semibold">Ashar</p>
                    <p class="text-sm font-bold">15:20</p>
                </div>
                <div class="text-center w-14 sm:w-16 md:w-20">
                    <p class="text-xs font-semibold">Maghrib</p>
                    <p class="text-sm font-bold">17:56</p>
                </div>
                <div class="text-center w-14 sm:w-16 md:w-20">
                    <p class="text-xs font-semibold">Isya</p>
                    <p class="text-sm font-bold">19:07</p>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Aparatur Desa Section -->
    <section class="max-w-7xl mx-auto px-4 sm:px-8 py-6 sm:py-8 bg-[#e6f0f0] rounded-t-3xl">
        <div class="max-w-4xl mx-auto">
            <h3 class="text-xs sm:text-sm font-semibold text-[#1dbf4a] mb-1 border-l-4 border-orange-400 pl-2">
                Sekilas Pemimpin Desa
            </h3>
            @if($aparatur->count())
                <h2 class="font-robotoslab font-semibold text-base sm:text-lg mb-4">
                    {{ $aparatur->first()->nama }}
                </h2>
                <p class="text-xs text-gray-700 mb-6 sm:mb-8 leading-relaxed">
                    {{ $aparatur->first()->jabatan }}
                </p>
                <div class="mb-8 sm:mb-12">
                    @if($aparatur->first()->foto)
                        <img alt="Signature of the village leader" class="mx-auto w-32 sm:w-40" src="{{ asset($aparatur->first()->foto) }}"/>
                    @endif
                </div>
            @endif
        </div>
        <div class="max-w-6xl mx-auto grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 sm:gap-6">
            @foreach($aparatur as $item)
                <div class="bg-[#1dbf4a] rounded-lg p-3 sm:p-4 flex flex-col items-center">
                    @if($item->foto)
                        <img alt="Portrait of {{ $item->nama }}" class="rounded-lg mb-2 w-20 h-24 sm:w-24 sm:h-28 md:w-28 md:h-32 lg:w-32 lg:h-36 object-cover" src="{{ asset($item->foto) }}"/>
                    @endif
                    <p class="text-xs text-center text-white font-semibold">{{ $item->nama }}</p>
                    <p class="text-[9px] text-white text-center">{{ $item->jabatan }}</p>
                </div>
            @endforeach
        </div>
    </section>
    
    <!-- Profil Desa Video Section -->
    <section class="max-w-7xl mx-auto px-4 sm:px-8 py-6 sm:py-8">
        <h3 class="text-xs sm:text-sm font-semibold text-[#1dbf4a] mb-1 border-l-4 border-orange-400 pl-2">
            Profil Desa
        </h3>
        <div class="bg-white rounded-lg shadow-md p-3 sm:p-4">
            <div class="video-container w-full">
                <iframe 
                    src="https://drive.google.com/file/d/1W3_4diU8SeGSpyEA4c_2bQiWMqP8-VmO/preview" 
                    class="w-full h-full border-0 rounded-lg"
                    allow="autoplay"
                    allowfullscreen
                ></iframe>
                <!-- Fallback image if iframe fails to load -->
                <div class="absolute inset-0 bg-gray-200 flex items-center justify-center" style="display: none;" id="fallback-image">
                    <img alt="Village background" class="w-full h-full object-cover rounded-lg" src="{{ $settings['background_url'] ?? 'https://storage.googleapis.com/a1aa/image/5c5557dc-83c0-4629-736c-4b7f4debd7fd.jpg' }}" />
                </div>
            </div>
        </div>
    </section>

    <!-- Berita Desa Section -->
    <section class="max-w-7xl mx-auto px-4 sm:px-8 py-6 sm:py-8">
        <h3 class="text-xs sm:text-sm font-semibold text-[#1dbf4a] mb-1 border-l-4 border-orange-400 pl-2">
            Berita Desa
        </h3>
        <div class="bg-white rounded-lg shadow-md p-3 sm:p-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
            @foreach($berita as $item)
                <article class="relative rounded-lg overflow-hidden shadow-md flex flex-col cursor-pointer hover:shadow-lg transition-all duration-300 group berita-item"
                         onclick="openBeritaModal(@json($item->id), @json($item->judul), @json($item->isi), @json($item->gambar ? asset($item->gambar) : ''), @json($item->created_at->format('d/m/Y H:i')), @json($item->author ?? 'Admin Desa'))">
                    <img alt="News image" class="w-full h-32 sm:h-36 object-cover group-hover:scale-105 transition-transform duration-300" src="{{ $item->gambar ? asset($item->gambar) : 'https://storage.googleapis.com/a1aa/image/e8386500-9792-4430-6e34-b659c6470a30.jpg' }}"/>
                    <div class="absolute top-2 right-2 bg-orange-500 text-white text-xs font-semibold px-2 py-0.5 rounded">
                        NEW!!
                    </div>
                    <div class="absolute top-2 left-2 bg-black bg-opacity-50 text-white p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">
                        <i class="fas fa-newspaper text-sm"></i>
                    </div>
                    <div class="p-3 flex flex-col flex-grow">
                        <h4 class="text-xs font-semibold text-white bg-black bg-opacity-70 p-1 rounded mb-1 group-hover:bg-orange-500 transition-colors">
                            {{ Str::limit($item->judul, 40) }}
                        </h4>
                        <p class="text-[9px] text-gray-700 flex-grow overflow-hidden">
                            {{ Str::limit($item->isi, 100) }}
                        </p>
                        <div class="flex justify-between items-center mt-2">
                            <div class="text-[8px] text-gray-400 flex items-center space-x-1">
                                <i class="far fa-clock"></i>
                                <span>{{ $item->created_at->format('d/m/Y') }}</span>
                            </div>
                            <button class="bg-orange-500 hover:bg-orange-600 text-white text-xs font-semibold rounded-full px-2 sm:px-3 py-1 group-hover:bg-[#1dbf4a] transition-colors" 
                                    type="button" 
                                    onclick="event.stopPropagation(); openBeritaModal(@json($item->id), @json($item->judul), @json($item->isi), @json($item->gambar ? asset($item->gambar) : ''), @json($item->created_at->format('d/m/Y H:i')), @json($item->author ?? 'Admin Desa'))">
                                <i class="fas fa-book-open mr-1"></i>Baca Berita
                            </button>
                        </div>
                        <div class="mt-2 text-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <span class="text-[10px] text-orange-500 font-semibold">
                                <i class="fas fa-mouse-pointer mr-1"></i>Klik untuk baca lengkap
                            </span>
                        </div>
                    </div>
                </article>
            @endforeach
        </div>
    </section>
    
    <!-- Galeri Kegiatan Desa Section -->
    <section class="max-w-7xl mx-auto px-4 sm:px-8 py-6 sm:py-8">
        <div class="flex items-center justify-between mb-4 sm:mb-6">
            <h3 class="text-xs sm:text-sm font-semibold text-[#1dbf4a] border-l-4 border-orange-400 pl-2">
                Galeri Kegiatan Desa
            </h3>
            <a href="{{ route('galeri.list') }}" class="text-xs sm:text-sm text-[#1dbf4a] hover:text-[#0f9d58] font-medium">
                Lihat Semua <i class="fas fa-arrow-right ml-1"></i>
            </a>
        </div>
        
        @if($galeri->count() > 0)
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3 sm:gap-4">
            @foreach($galeri as $item)
            <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow group">
                <div class="aspect-square relative overflow-hidden">
                    <img src="{{ $item->gambar ? asset($item->gambar) : 'https://storage.googleapis.com/a1aa/image/752879b4-785b-4f86-832c-0ff3f174167a.jpg' }}" 
                         alt="{{ $item->judul }}" 
                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                    <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-300"></div>
                </div>
                <div class="p-2 sm:p-3">
                    <h4 class="text-xs sm:text-sm font-semibold text-gray-800 line-clamp-2 mb-1">{{ $item->judul }}</h4>
                    @if($item->kategori)
                    <span class="text-xs text-[#1dbf4a] bg-green-50 px-2 py-1 rounded-full">{{ $item->kategori }}</span>
                    @endif
                </div>
            </div>
            @endforeach
        </div>
        @else
        <div class="bg-[#e6f0f0] rounded-lg h-32 sm:h-48 flex items-center justify-center">
            <div class="text-center text-gray-500">
                <i class="fas fa-images text-2xl sm:text-3xl mb-2"></i>
                <p class="text-xs sm:text-sm">Belum ada foto galeri</p>
            </div>
        </div>
        @endif
    </section>
    
    <!-- Transparansi Anggaran Section -->
    <section class="max-w-7xl mx-auto px-4 sm:px-8 py-6 sm:py-8">
        <h4 class="text-center text-xs text-gray-600 mb-4 sm:mb-6">
            Transparansi Anggaran
        </h4>
        <div class="flex flex-col sm:flex-row justify-center gap-4">
            @php
                $budgetTypes = [
                    'pendapatan' => 'APBDes 2023 Pendapatan',
                    'pelaksanaan' => 'APBDes 2023 Pelaksanaan', 
                    'pembelanjaan' => 'APBDes 2023 Pembelanjaan'
                ];
            @endphp
            
            @foreach($budgetTypes as $type => $title)
                @php
                    $budget = $apbdes_2023->get($type);
                    $total = $budget ? $budget->total_anggaran : 0;
                    $realisasi = $budget ? $budget->realisasi : 0;
                    $percentage = $total > 0 ? ($realisasi / $total) * 100 : 0;
                    $circumference = 2 * pi() * 15; // r=15
                    $strokeDasharray = $circumference;
                    $strokeDashoffset = $circumference - ($percentage / 100) * $circumference;
                @endphp
                
                <div class="bg-white rounded-lg shadow-md border border-orange-400 w-full sm:w-64 p-4 flex flex-col items-center">
                    <p class="text-xs font-semibold mb-2">{{ $title }}</p>
                    <svg class="w-20 h-20 sm:w-24 sm:h-24 mb-2" viewbox="0 0 36 36">
                        <circle class="text-gray-300" cx="18" cy="18" fill="transparent" r="15" stroke="currentColor" stroke-width="3"></circle>
                        <circle class="text-orange-500" cx="18" cy="18" fill="transparent" r="15" stroke="currentColor" 
                                stroke-dasharray="{{ $strokeDasharray }}" 
                                stroke-dashoffset="{{ $strokeDashoffset }}" 
                                stroke-linecap="round" stroke-width="3" transform="rotate(-90 18 18)"></circle>
                    </svg>
                    <p class="text-xs text-gray-600 text-center">
                        Rp {{ number_format($realisasi, 0, ',', '.') }}<br/>
                        Total : Rp {{ number_format($total, 0, ',', '.') }}
                    </p>
                    @if($total > 0)
                        <p class="text-xs text-orange-500 font-semibold mt-1">
                            {{ number_format($percentage, 1) }}% Realisasi
                        </p>
                    @endif
                </div>
            @endforeach
        </div>
    </section>
    
    <!-- Program Sinergi Section -->
    <section class="max-w-7xl mx-auto px-4 sm:px-8 py-6 sm:py-8 bg-[#e6f0f0] rounded-lg text-center">
        <h4 class="text-xs text-gray-600 mb-4">Program Sinergi</h4>
        <div class="flex justify-center space-x-1">
            <span class="w-1.5 h-1.5 rounded-full bg-[#1dbf4a]"></span>
            <span class="w-1.5 h-1.5 rounded-full bg-[#1dbf4a]"></span>
            <span class="w-1.5 h-1.5 rounded-full bg-[#1dbf4a]"></span>
            <span class="w-1.5 h-1.5 rounded-full bg-[#1dbf4a]"></span>
            <span class="w-1.5 h-1.5 rounded-full bg-[#1dbf4a]"></span>
            <span class="w-1.5 h-1.5 rounded-full bg-[#1dbf4a]"></span>
            <span class="w-1.5 h-1.5 rounded-full bg-[#1dbf4a]"></span>
        </div>
    </section>
    
    <!-- Pengaduan Desa Section -->
    <section class="max-w-7xl mx-auto px-4 sm:px-8 py-6 sm:py-8">
        <div class="bg-gradient-to-r from-[#0f9d58] to-[#1dbf4a] rounded-lg p-4 sm:p-6 text-white flex flex-col sm:flex-row items-center justify-between gap-4">
            <div class="max-w-xl text-center sm:text-left">
                <h4 class="font-semibold text-sm mb-2">Pengaduan Desa</h4>
                <p class="text-xs leading-relaxed">
                    Apabila Anda Memiliki Keluhan dan Dan Permasalahan bisa klik button di bawah ini ! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas felis nec massa ornare blandit.
                </p>
            </div>
            <a href="/pengaduan" class="bg-orange-500 hover:bg-orange-600 text-white text-xs font-semibold rounded-full px-4 sm:px-5 py-2 whitespace-nowrap inline-block text-center">
                Buat Pengaduan
            </a>
            <img alt="Illustration of people and documents" class="w-20 h-auto sm:w-28" src="https://storage.googleapis.com/a1aa/image/5dfc7093-859d-4cc4-1a41-cdc3434a170a.jpg"/>
        </div>
    </section>

    <!-- Informasi Desa Section -->
    <section class="max-w-7xl mx-auto px-4 sm:px-8 py-8 sm:py-12">
        <div class="text-center mb-8">
            <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 mb-4">Informasi Desa</h2>
            <div class="w-16 h-1 bg-gradient-to-r from-[#0f9d58] to-[#1dbf4a] mx-auto"></div>
            <p class="text-gray-600 mt-4 max-w-2xl mx-auto">
                Pelajari lebih lanjut tentang visi, misi, dan sejarah perkembangan Desa Mantowu
            </p>
        </div>
        
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- Visi & Misi Card -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300">
                <div class="bg-gradient-to-r from-[#0f9d58] to-[#1dbf4a] p-6">
                    <div class="flex items-center justify-center">
                        <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center">
                            <i class="fas fa-eye text-[#1dbf4a] text-2xl"></i>
                        </div>
                    </div>
                    <h3 class="text-2xl font-bold text-white text-center mt-4">Visi & Misi</h3>
                </div>
                <div class="p-6">
                    <blockquote class="text-gray-600 italic text-center mb-4 border-l-4 border-[#1dbf4a] pl-4">
                        "Terwujudnya Desa Mantowu yang Mandiri, Sejahtera, dan Berkelanjutan..."
                    </blockquote>
                    <p class="text-gray-500 text-sm mb-6">
                        Pelajari visi dan misi lengkap beserta target pembangunan desa untuk masa depan yang lebih baik.
                    </p>
                    <div class="text-center">
                        <a href="/visi-misi" class="inline-flex items-center bg-gradient-to-r from-[#0f9d58] to-[#1dbf4a] text-white font-semibold py-3 px-6 rounded-lg hover:shadow-lg transform hover:scale-105 transition-all duration-300">
                            <i class="fas fa-arrow-right mr-2"></i>
                            Selengkapnya
                        </a>
                    </div>
                </div>
            </div>

            <!-- Sejarah Card -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300">
                <div class="bg-gradient-to-r from-[#1dbf4a] to-[#0f9d58] p-6">
                    <div class="flex items-center justify-center">
                        <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center">
                            <i class="fas fa-history text-[#1dbf4a] text-2xl"></i>
                        </div>
                    </div>
                    <h3 class="text-2xl font-bold text-white text-center mt-4">Sejarah Desa</h3>
                </div>
                <div class="p-6">
                    <p class="text-gray-600 mb-4">
                        <strong>2011:</strong> Desa Mantowu secara administratif terbentuk berdasarkan Perda Kab. Buton No. 19 Tahun 2011. Jejak permukiman telah ada jauh sebelumnya, dipelopori para pendatang yang mencari lahan pertanian subur.
                    </p>
                    <p class="text-gray-500 text-sm mb-6">
                        Jelajahi perjalanan panjang transformasi desa dari era perintisan hingga digitalisasi modern.
                    </p>
                    <div class="text-center">
                        <a href="/sejarah" class="inline-flex items-center bg-gradient-to-r from-[#1dbf4a] to-[#0f9d58] text-white font-semibold py-3 px-6 rounded-lg hover:shadow-lg transform hover:scale-105 transition-all duration-300">
                            <i class="fas fa-arrow-right mr-2"></i>
                            Selengkapnya
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Pengumuman Modal -->
    <div id="pengumumanModal" class="hidden fixed inset-0 z-50 overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen px-4 py-6">
            <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" onclick="closePengumumanModal()"></div>
            <div class="relative bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-hidden">
                <!-- Modal Header -->
                <div class="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between z-10">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 bg-orange-400 rounded-full flex items-center justify-center">
                            <i class="fas fa-bullhorn text-white"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-gray-900">Pengumuman Desa</h3>
                            <p class="text-sm text-gray-500">Detail Pengumuman</p>
                        </div>
                    </div>
                    <button onclick="closePengumumanModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>

                <!-- Modal Body -->
                <div class="overflow-y-auto max-h-[calc(90vh-80px)] modal-scrollbar">
                    <!-- Image Section -->
                    <div id="modalImageSection" class="hidden">
                        <img id="modalImage" class="w-full h-64 object-cover" alt="Pengumuman Image">
                    </div>

                    <div class="p-6">
                        <!-- Title and Meta -->
                        <div class="mb-4">
                            <h2 id="modalTitle" class="text-xl sm:text-2xl font-bold text-gray-900 mb-3"></h2>
                            <div class="flex items-center space-x-4 text-sm text-gray-500">
                                <div class="flex items-center space-x-1">
                                    <i class="far fa-clock"></i>
                                    <span id="modalDate"></span>
                                </div>
                                <div class="flex items-center space-x-1">
                                    <i class="fas fa-user"></i>
                                    <span id="modalAuthor"></span>
                                </div>
                                <div class="flex items-center space-x-1">
                                    <i class="fas fa-tag"></i>
                                    <span class="bg-orange-100 text-orange-600 px-2 py-1 rounded-full text-xs">Pengumuman</span>
                                </div>
                            </div>
                        </div>

                        <!-- Content -->
                        <div class="prose prose-sm max-w-none">
                            <div id="modalContent" class="text-gray-700 leading-relaxed whitespace-pre-line"></div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="mt-6 pt-4 border-t border-gray-200 flex flex-col sm:flex-row gap-3 sm:justify-between">
                            <div class="flex gap-2">
                                <button onclick="sharePengumuman()" class="flex items-center space-x-2 bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors text-sm">
                                    <i class="fas fa-share-alt"></i>
                                    <span>Bagikan</span>
                                </button>
                                <button onclick="printPengumuman()" class="flex items-center space-x-2 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition-colors text-sm">
                                    <i class="fas fa-print"></i>
                                    <span>Cetak</span>
                                </button>
                            </div>
                            <a href="{{ route('pengumuman.list') }}" class="flex items-center justify-center space-x-2 bg-[#1dbf4a] text-white px-4 py-2 rounded-lg hover:bg-[#0f9d58] transition-colors text-sm">
                                <i class="fas fa-list"></i>
                                <span>Lihat Semua</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Berita Modal -->
    <div id="beritaModal" class="hidden fixed inset-0 z-50 overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen px-4 py-6">
            <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" onclick="closeBeritaModal()"></div>
            <div class="relative bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-hidden">
                <!-- Modal Header -->
                <div class="sticky top-0 bg-gradient-to-r from-orange-500 to-orange-600 text-white border-b border-orange-300 px-6 py-4 flex items-center justify-between z-10">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                            <i class="fas fa-newspaper text-white"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold">Berita Desa Mantowu</h3>
                            <p class="text-sm opacity-90">Informasi Terkini Desa</p>
                        </div>
                    </div>
                    <button onclick="closeBeritaModal()" class="text-white hover:text-orange-200 transition-colors">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>

                <!-- Modal Body -->
                <div class="overflow-y-auto max-h-[calc(90vh-80px)] modal-scrollbar">
                    <!-- Image Section -->
                    <div id="beritaModalImageSection" class="hidden">
                        <img id="beritaModalImage" class="w-full h-80 object-cover" alt="Berita Image">
                    </div>

                    <div class="p-6">
                        <!-- Title and Meta -->
                        <div class="mb-6">
                            <h2 id="beritaModalTitle" class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4 leading-tight"></h2>
                            <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 pb-4 border-b border-gray-200">
                                <div class="flex items-center space-x-2">
                                    <i class="far fa-clock text-orange-500"></i>
                                    <span id="beritaModalDate"></span>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <i class="fas fa-user text-orange-500"></i>
                                    <span id="beritaModalAuthor"></span>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <i class="fas fa-newspaper text-orange-500"></i>
                                    <span class="bg-orange-100 text-orange-600 px-3 py-1 rounded-full text-xs font-semibold">Berita Desa</span>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <i class="fas fa-eye text-orange-500"></i>
                                    <span class="text-xs">Status: Terbaru</span>
                                </div>
                            </div>
                        </div>

                        <!-- Content -->
                        <div class="prose prose-lg max-w-none">
                            <div id="beritaModalContent" class="text-gray-700 leading-relaxed whitespace-pre-line text-justify"></div>
                        </div>

                        <!-- Tags/Categories (placeholder) -->
                        <div class="mt-8 pt-4 border-t border-gray-200">
                            <div class="flex items-center space-x-2 mb-4">
                                <i class="fas fa-tags text-orange-500"></i>
                                <span class="text-sm font-semibold text-gray-700">Tags:</span>
                            </div>
                            <div class="flex flex-wrap gap-2">
                                <span class="bg-orange-100 text-orange-600 px-3 py-1 rounded-full text-xs">Desa Mantowu</span>
                                <span class="bg-green-100 text-green-600 px-3 py-1 rounded-full text-xs">Berita Terkini</span>
                                <span class="bg-blue-100 text-blue-600 px-3 py-1 rounded-full text-xs">Informasi Publik</span>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="mt-8 pt-6 border-t border-gray-200 flex flex-col sm:flex-row gap-3 sm:justify-between">
                            <div class="flex gap-2">
                                <button onclick="shareBerita()" class="flex items-center space-x-2 bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors text-sm">
                                    <i class="fas fa-share-alt"></i>
                                    <span>Bagikan</span>
                                </button>
                                <button onclick="printBerita()" class="flex items-center space-x-2 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition-colors text-sm">
                                    <i class="fas fa-print"></i>
                                    <span>Cetak</span>
                                </button>
                                <button onclick="bookmarkBerita()" class="flex items-center space-x-2 bg-yellow-500 text-white px-4 py-2 rounded-lg hover:bg-yellow-600 transition-colors text-sm">
                                    <i class="fas fa-bookmark"></i>
                                    <span>Simpan</span>
                                </button>
                            </div>
                            <a href="{{ route('berita.list') }}" class="flex items-center justify-center space-x-2 bg-orange-500 text-white px-4 py-2 rounded-lg hover:bg-orange-600 transition-colors text-sm">
                                <i class="fas fa-list"></i>
                                <span>Lihat Semua Berita</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Footer -->
    <footer class="bg-[#1dbf4a] text-white py-8 sm:py-10">
        <div class="max-w-7xl mx-auto px-4 sm:px-8 grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">
            <div class="text-center md:text-left">
                <div class="flex items-center justify-center md:justify-start space-x-2 mb-3">
                    @if($settings['logo_url'] ?? false)
                        <img alt="Website Desa logo" class="w-10 h-10 sm:w-12 sm:h-12 object-contain" src="{{ asset($settings['logo_url']) }}"/>
                    @else
                        <div class="w-10 h-10 sm:w-12 sm:h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center">
                            <span class="text-white font-bold text-sm sm:text-base">WD</span>
                        </div>
                    @endif
                    <div class="font-robotoslab font-semibold text-base sm:text-lg">
                        <div>{{ $settings['hero_title'] ?? 'Website Desa' }}</div>
                        <div class="text-xs opacity-90">{{ $settings['hero_subtitle'] ?? 'Kec. Ps. Wajo' }}</div>
                    </div>
                </div>
                <p class="text-xs max-w-xs mx-auto md:mx-0">{{ $settings['contact_address'] ?? 'Desa Mantowu, Kec. Ps. Wajo, Kab. Bone' }}</p>
                <div class="mt-4 flex justify-center md:justify-start">
                    <img alt="Google Play Store badge" class="w-24 sm:w-32" src="https://storage.googleapis.com/a1aa/image/2fefb4ee-182f-433b-5bb5-e078bdcdc8a7.jpg"/>
                </div>
            </div>
            <div class="text-xs text-center md:text-left">
                <h5 class="font-semibold mb-3">Menu Lainnya</h5>
                <ul class="space-y-2">
                    <li><a class="hover:underline" href="/visi-misi">Visi & Misi</a></li>
                    <li><a class="hover:underline" href="/sejarah">Sejarah Desa</a></li>
                </ul>
            </div>
            <div class="text-xs text-center md:text-left">
                <h5 class="font-semibold mb-3">Hubungi Kami</h5>
                <div class="flex justify-center md:justify-start space-x-3 mb-3 text-base">
                    <a aria-label="WhatsApp" class="hover:text-gray-200" href="#"><i class="fab fa-whatsapp"></i></a>
                    <a aria-label="Facebook" class="hover:text-gray-200" href="#"><i class="fab fa-facebook-f"></i></a>
                    <a aria-label="Twitter" class="hover:text-gray-200" href="#"><i class="fab fa-twitter"></i></a>
                    <a aria-label="YouTube" class="hover:text-gray-200" href="#"><i class="fab fa-youtube"></i></a>
                </div>
                <p class="mb-1 flex items-center justify-center md:justify-start space-x-2">
                    <i class="fas fa-envelope"></i>
                    <span>{{ $settings['email'] ?? 'secretariat@desarrdigital.id' }}</span>
                </p>
                <p class="flex items-center justify-center md:justify-start space-x-2">
                    <i class="fas fa-phone-alt"></i>
                    <span>WA: {{ $settings['wa_number'] ?? '+62 812 9496 2546' }}</span>
                </p>
            </div>
        </div>
        <p class="text-center text-xs mt-6 sm:mt-8 text-white/80">
            Website Desa Template © All rights reserved. | Made with ♥ by rrdesign.id<br>
            ©2025 Copilot Production
        </p>
    </footer>
    
    <!-- Mobile Menu JavaScript -->
    <script>
        document.getElementById('mobile-menu-btn').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });

        function toggleMobileDropdown() {
            const dropdownContent = document.getElementById('mobile-dropdown-content');
            const dropdownIcon = document.getElementById('mobile-dropdown-icon');
            
            dropdownContent.classList.toggle('hidden');
            
            if (dropdownContent.classList.contains('hidden')) {
                dropdownIcon.classList.remove('fa-chevron-up');
                dropdownIcon.classList.add('fa-chevron-down');
            } else {
                dropdownIcon.classList.remove('fa-chevron-down');
                dropdownIcon.classList.add('fa-chevron-up');
            }
        }

                 // Pengumuman Dropdown Toggle
        function togglePengumumanDropdown() {
            const dropdownContent = document.getElementById('pengumuman-dropdown');
            const dropdownIcon = document.getElementById('pengumuman-dropdown-icon');
            const dropdownBtn = document.getElementById('pengumuman-dropdown-btn');
            
            if (dropdownContent.classList.contains('hidden')) {
                // Show dropdown
                dropdownContent.classList.remove('hidden');
                dropdownContent.style.maxHeight = dropdownContent.scrollHeight + 'px';
                dropdownIcon.classList.remove('fa-chevron-down');
                dropdownIcon.classList.add('fa-chevron-up', 'rotate-180');
                dropdownBtn.classList.add('bg-gray-100');
            } else {
                // Hide dropdown
                dropdownContent.style.maxHeight = '0px';
                dropdownIcon.classList.remove('fa-chevron-up', 'rotate-180');
                dropdownIcon.classList.add('fa-chevron-down');
                dropdownBtn.classList.remove('bg-gray-100');
                
                // Hide element after animation
                setTimeout(() => {
                    dropdownContent.classList.add('hidden');
                }, 300);
            }
        }

        // Pengumuman Modal Functions
        function openPengumumanModal(id, title, content, image, date, author) {
            const modal = document.getElementById('pengumumanModal');
            const modalTitle = document.getElementById('modalTitle');
            const modalContent = document.getElementById('modalContent');
            const modalImage = document.getElementById('modalImage');
            const modalImageSection = document.getElementById('modalImageSection');
            const modalDate = document.getElementById('modalDate');
            const modalAuthor = document.getElementById('modalAuthor');

            // Set content
            modalTitle.textContent = title;
            modalContent.textContent = content;
            modalDate.textContent = date;
            modalAuthor.textContent = author;

            // Handle image
            if (image && image.trim() !== '') {
                modalImage.src = image;
                modalImageSection.classList.remove('hidden');
            } else {
                modalImageSection.classList.add('hidden');
            }

            // Show modal
            modal.classList.remove('hidden');
            document.body.style.overflow = 'hidden';

            // Animation
            setTimeout(() => {
                modal.querySelector('.relative').classList.add('animate-in');
            }, 10);
        }

        function closePengumumanModal() {
            const modal = document.getElementById('pengumumanModal');
            modal.classList.add('hidden');
            document.body.style.overflow = 'auto';
        }

        function sharePengumuman() {
            const title = document.getElementById('modalTitle').textContent;
            const url = window.location.href;
            
            if (navigator.share) {
                navigator.share({
                    title: 'Pengumuman: ' + title,
                    text: 'Lihat pengumuman dari Desa Mantowu',
                    url: url
                });
            } else {
                // Fallback - copy to clipboard
                const textToCopy = `Pengumuman: ${title}\n${url}`;
                navigator.clipboard.writeText(textToCopy).then(() => {
                    alert('Link pengumuman berhasil disalin!');
                });
            }
        }

        function printPengumuman() {
            const title = document.getElementById('modalTitle').textContent;
            const content = document.getElementById('modalContent').textContent;
            const date = document.getElementById('modalDate').textContent;
            const author = document.getElementById('modalAuthor').textContent;
            
            const printWindow = window.open('', '_blank');
            printWindow.document.write(`
                <html>
                <head>
                    <title>Pengumuman - ${title}</title>
                    <style>
                        body { font-family: Arial, sans-serif; padding: 20px; }
                        .header { border-bottom: 2px solid #1dbf4a; padding-bottom: 15px; margin-bottom: 20px; }
                        .title { font-size: 24px; font-weight: bold; margin-bottom: 10px; }
                        .meta { color: #666; font-size: 14px; }
                        .content { line-height: 1.6; margin-top: 20px; }
                        .footer { margin-top: 30px; border-top: 1px solid #ccc; padding-top: 15px; font-size: 12px; color: #666; }
                    </style>
                </head>
                <body>
                    <div class="header">
                        <h1>🏛️ Desa Mantowu</h1>
                        <p>Pengumuman Resmi</p>
                    </div>
                    <div class="title">${title}</div>
                    <div class="meta">📅 ${date} | ✍️ ${author}</div>
                    <div class="content">${content.replace(/\n/g, '<br>')}</div>
                    <div class="footer">
                        <p>Dokumen ini dicetak dari website resmi Desa Mantowu</p>
                        <p>© 2025 Desa Mantowu - Semua hak dilindungi</p>
                    </div>
                </body>
                </html>
            `);
            printWindow.document.close();
            printWindow.print();
        }

        // Close modal with ESC key
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                closePengumumanModal();
                closeBeritaModal();
            }
        });

        // Berita Modal Functions
        function openBeritaModal(id, title, content, image, date, author) {
            const modal = document.getElementById('beritaModal');
            const modalTitle = document.getElementById('beritaModalTitle');
            const modalContent = document.getElementById('beritaModalContent');
            const modalImage = document.getElementById('beritaModalImage');
            const modalImageSection = document.getElementById('beritaModalImageSection');
            const modalDate = document.getElementById('beritaModalDate');
            const modalAuthor = document.getElementById('beritaModalAuthor');

            // Set content
            modalTitle.textContent = title;
            modalContent.textContent = content;
            modalDate.textContent = date;
            modalAuthor.textContent = author;

            // Handle image
            if (image && image.trim() !== '') {
                modalImage.src = image;
                modalImageSection.classList.remove('hidden');
            } else {
                modalImageSection.classList.add('hidden');
            }

            // Show modal
            modal.classList.remove('hidden');
            document.body.style.overflow = 'hidden';

            // Animation
            setTimeout(() => {
                modal.querySelector('.relative').classList.add('animate-in');
            }, 10);
        }

        function closeBeritaModal() {
            const modal = document.getElementById('beritaModal');
            modal.classList.add('hidden');
            document.body.style.overflow = 'auto';
        }

        function shareBerita() {
            const title = document.getElementById('beritaModalTitle').textContent;
            const url = window.location.href;
            
            if (navigator.share) {
                navigator.share({
                    title: 'Berita: ' + title,
                    text: 'Baca berita terbaru dari Desa Mantowu',
                    url: url
                });
            } else {
                // Fallback - copy to clipboard
                const textToCopy = `Berita: ${title}\n${url}`;
                navigator.clipboard.writeText(textToCopy).then(() => {
                    alert('Link berita berhasil disalin!');
                });
            }
        }

        function printBerita() {
            const title = document.getElementById('beritaModalTitle').textContent;
            const content = document.getElementById('beritaModalContent').textContent;
            const date = document.getElementById('beritaModalDate').textContent;
            const author = document.getElementById('beritaModalAuthor').textContent;
            const image = document.getElementById('beritaModalImage').src;
            
            const printWindow = window.open('', '_blank');
            printWindow.document.write(`
                <html>
                <head>
                    <title>Berita - ${title}</title>
                    <style>
                        body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; }
                        .header { border-bottom: 3px solid #f97316; padding-bottom: 15px; margin-bottom: 20px; }
                        .header h1 { color: #f97316; margin: 0; }
                        .title { font-size: 28px; font-weight: bold; margin: 20px 0; color: #333; }
                        .meta { color: #666; font-size: 14px; margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
                        .content { margin-top: 25px; text-align: justify; font-size: 16px; }
                        .footer { margin-top: 40px; border-top: 2px solid #f97316; padding-top: 15px; font-size: 12px; color: #666; }
                        .image { max-width: 100%; height: auto; margin: 20px 0; border-radius: 8px; }
                        .watermark { background: linear-gradient(45deg, #f97316, #fb923c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; }
                    </style>
                </head>
                <body>
                    <div class="header">
                        <h1>📰 Desa Mantowu</h1>
                        <p>Portal Berita Resmi Desa</p>
                    </div>
                    ${image && image !== window.location.href ? `<img src="${image}" class="image" alt="Berita Image">` : ''}
                    <div class="title">${title}</div>
                    <div class="meta">
                        📅 Dipublikasikan: ${date} | ✍️ Penulis: ${author}
                        <br><span class="watermark">BERITA RESMI DESA MANTOWU</span>
                    </div>
                    <div class="content">${content.replace(/\n/g, '<br>')}</div>
                    <div class="footer">
                        <p><strong>Desa Mantowu - Portal Informasi Resmi</strong></p>
                        <p>Dokumen ini dicetak dari website resmi Desa Mantowu</p>
                        <p>© 2025 Desa Mantowu - Semua hak dilindungi undang-undang</p>
                        <p style="color: #f97316;">🌐 Kunjungi website kami untuk berita terbaru lainnya</p>
                    </div>
                </body>
                </html>
            `);
            printWindow.document.close();
            printWindow.print();
        }

        function bookmarkBerita() {
            const title = document.getElementById('beritaModalTitle').textContent;
            const url = window.location.href;
            
            // Check if browser supports bookmarking
            if (window.external && window.external.AddFavorite) {
                // Internet Explorer
                window.external.AddFavorite(url, 'Berita: ' + title);
            } else if (window.sidebar && window.sidebar.addPanel) {
                // Firefox
                window.sidebar.addPanel('Berita: ' + title, url, '');
            } else {
                // Other browsers - copy to clipboard with instruction
                const textToCopy = `Bookmark: ${title}\n${url}`;
                navigator.clipboard.writeText(textToCopy).then(() => {
                    alert('Link berita telah disalin! Anda dapat menambahkannya ke bookmark browser Anda secara manual.');
                }).catch(() => {
                    prompt('Salin link ini untuk bookmark:', url);
                });
            }
        }

        // Iframe Video Error Handling
        function initIframeVideo() {
            const iframe = document.querySelector('iframe');
            const fallbackImage = document.getElementById('fallback-image');
            
            if (iframe) {
                iframe.addEventListener('error', function() {
                    console.log('Iframe failed to load, showing fallback image');
                    if (fallbackImage) {
                        fallbackImage.style.display = 'flex';
                        iframe.style.display = 'none';
                    }
                });
                
                // Check if iframe loads successfully
                iframe.addEventListener('load', function() {
                    console.log('Iframe loaded successfully');
                });
            }
        }

        // Initialize iframe when DOM is loaded
        document.addEventListener('DOMContentLoaded', function() {
            initIframeVideo();
        });
    </script>
@endsection