@extends('layouts.layanan')

@section('title', 'Informasi Layanan - Website Desa Cemara')

@section('content')
<!-- Hero Section -->
<section id="dokumen-list" class="relative mt-1 text-white py-16 overflow-hidden">
    <img src="{{ asset('images/layanan-hero.png') }}" alt="Pelayanan Masyarakat" class="absolute inset-0 w-full h-full object-cover">
    <div class="absolute inset-0 bg-gradient-to-r from-blue-900/90 via-blue-900/75 to-blue-800/60"></div>
    <div class="container mx-auto px-4 text-center relative z-10">
        <h2 class="text-3xl md:text-4xl font-bold mb-4 drop-shadow-lg">Pelayanan Masyarakat Desa Cemara</h2>
        <p class="text-lg mb-8 max-w-xl mx-auto opacity-90 drop-shadow">Temukan berbagai dokumen layanan administrasi desa yang dapat Anda unduh secara mudah dan transparan</p>
        
        @if($dokumen->count() > 0)
            <div class="flex justify-center space-x-4 flex-wrap gap-y-2">
                @foreach ($dokumen as $doc)
                <a href="{{ asset('storage/' . $doc->file) }}" download
                    class="px-6 py-3 border border-white text-white rounded-lg hover:bg-white hover:text-blue-900 transition flex items-center gap-2 m-1">
                    <i class="fas fa-file-pdf"></i>
                    <span>{{ $doc->nama }}</span>
                    <i class="fas fa-download ml-2"></i>
                </a>
                @endforeach
            </div>
        @else
            <div class="bg-blue-800/40 max-w-md mx-auto p-4 rounded-xl border border-blue-700/50 text-blue-100">
                <i data-feather="info" class="w-8 h-8 mx-auto mb-2 text-blue-300"></i>
                <p class="text-sm">Dokumen administrasi belum diunggah oleh admin.</p>
            </div>
        @endif
    </div>
</section>

<!-- Services Section -->
<section class="py-16 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-blue-900 mb-2">Layanan Administratif</h2>
            <p class="text-gray-600 max-w-md mx-auto">Ajukan berbagai jenis surat pengantar dan keterangan secara online</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Service Card 1 -->
            <div class="service-card bg-white rounded-2xl shadow-sm hover:shadow-xl border border-gray-100 transition-all duration-300 p-6 flex flex-col justify-between">
                <div>
                    <div class="flex items-center mb-4">
                        <div class="bg-blue-50 p-3 rounded-xl mr-4 text-blue-600">
                            <i data-feather="file-text" class="w-6 h-6"></i>
                        </div>
                        <h3 class="text-lg font-bold text-gray-800">Surat Keterangan Domisili</h3>
                    </div>
                    <p class="text-gray-600 text-sm mb-6">Surat keterangan tempat tinggal untuk berbagai keperluan administrasi kependudukan.</p>
                </div>
                <div class="flex justify-between items-center border-t border-gray-50 pt-4 mt-auto">
                    <span class="text-xs text-gray-500 bg-gray-100 px-2.5 py-1 rounded-full flex items-center gap-1">
                        <i data-feather="clock" class="w-3.5 h-3.5"></i> 1 Hari Kerja
                    </span>
                    <a href="/pengajuan-surat?kategori=Pengajuan Surat Keterangan Domisili" class="text-blue-600 hover:text-blue-800 font-bold text-sm flex items-center gap-1 hover:underline transition">
                        Ajukan Surat <i data-feather="arrow-right" class="w-4 h-4"></i>
                    </a>
                </div>
            </div>

            <!-- Service Card 2 -->
            <div class="service-card bg-white rounded-2xl shadow-sm hover:shadow-xl border border-gray-100 transition-all duration-300 p-6 flex flex-col justify-between">
                <div>
                    <div class="flex items-center mb-4">
                        <div class="bg-blue-50 p-3 rounded-xl mr-4 text-blue-600">
                            <i data-feather="briefcase" class="w-6 h-6"></i>
                        </div>
                        <h3 class="text-lg font-bold text-gray-800">Surat Keterangan Usaha</h3>
                    </div>
                    <p class="text-gray-600 text-sm mb-6">Mengakui legalitas dan keberadaan usaha (sebagai syarat pinjaman atau perizinan).</p>
                </div>
                <div class="flex justify-between items-center border-t border-gray-50 pt-4 mt-auto">
                    <span class="text-xs text-gray-500 bg-gray-100 px-2.5 py-1 rounded-full flex items-center gap-1">
                        <i data-feather="clock" class="w-3.5 h-3.5"></i> 1 Hari Kerja
                    </span>
                    <a href="/pengajuan-surat?kategori=Pengajuan Surat Keterangan Usaha" class="text-blue-600 hover:text-blue-800 font-bold text-sm flex items-center gap-1 hover:underline transition">
                        Ajukan Surat <i data-feather="arrow-right" class="w-4 h-4"></i>
                    </a>
                </div>
            </div>

            <!-- Service Card 3 -->
            <div class="service-card bg-white rounded-2xl shadow-sm hover:shadow-xl border border-gray-100 transition-all duration-300 p-6 flex flex-col justify-between">
                <div>
                    <div class="flex items-center mb-4">
                        <div class="bg-blue-50 p-3 rounded-xl mr-4 text-blue-600">
                            <i data-feather="activity" class="w-6 h-6"></i>
                        </div>
                        <h3 class="text-lg font-bold text-gray-800">Surat Keterangan Kematian</h3>
                    </div>
                    <p class="text-gray-600 text-sm mb-6">Dasar hukum pencatatan kematian untuk kepengurusan warisan dan jaminan pensiun.</p>
                </div>
                <div class="flex justify-between items-center border-t border-gray-50 pt-4 mt-auto">
                    <span class="text-xs text-gray-500 bg-gray-100 px-2.5 py-1 rounded-full flex items-center gap-1">
                        <i data-feather="clock" class="w-3.5 h-3.5"></i> 1 Hari Kerja
                    </span>
                    <a href="/pengajuan-surat?kategori=Pengajuan Surat Keterangan Kematian" class="text-blue-600 hover:text-blue-800 font-bold text-sm flex items-center gap-1 hover:underline transition">
                        Ajukan Surat <i data-feather="arrow-right" class="w-4 h-4"></i>
                    </a>
                </div>
            </div>

            <!-- Service Card 4 -->
            <div class="service-card bg-white rounded-2xl shadow-sm hover:shadow-xl border border-gray-100 transition-all duration-300 p-6 flex flex-col justify-between">
                <div>
                    <div class="flex items-center mb-4">
                        <div class="bg-blue-50 p-3 rounded-xl mr-4 text-blue-600">
                            <i data-feather="heart" class="w-6 h-6"></i>
                        </div>
                        <h3 class="text-lg font-bold text-gray-800">Surat Keterangan Tidak Mampu</h3>
                    </div>
                    <p class="text-gray-600 text-sm mb-6">Verifikasi kondisi ekonomi lemah untuk mendapatkan akses bantuan sosial/kesehatan.</p>
                </div>
                <div class="flex justify-between items-center border-t border-gray-50 pt-4 mt-auto">
                    <span class="text-xs text-gray-500 bg-gray-100 px-2.5 py-1 rounded-full flex items-center gap-1">
                        <i data-feather="clock" class="w-3.5 h-3.5"></i> 1 Hari Kerja
                    </span>
                    <a href="/pengajuan-surat?kategori=Pengajuan Surat Keterangan Tidak Mampu (SKTM)" class="text-blue-600 hover:text-blue-800 font-bold text-sm flex items-center gap-1 hover:underline transition">
                        Ajukan Surat <i data-feather="arrow-right" class="w-4 h-4"></i>
                    </a>
                </div>
            </div>

            <!-- Service Card 5 -->
            <div class="service-card bg-white rounded-2xl shadow-sm hover:shadow-xl border border-gray-100 transition-all duration-300 p-6 flex flex-col justify-between">
                <div>
                    <div class="flex items-center mb-4">
                        <div class="bg-blue-50 p-3 rounded-xl mr-4 text-blue-600">
                            <i data-feather="book-open" class="w-6 h-6"></i>
                        </div>
                        <h3 class="text-lg font-bold text-gray-800">Surat Keterangan Penghasilan</h3>
                    </div>
                    <p class="text-gray-600 text-sm mb-6">Bukti kemampuan finansial keluarga/orang tua untuk pengajuan beasiswa anak.</p>
                </div>
                <div class="flex justify-between items-center border-t border-gray-50 pt-4 mt-auto">
                    <span class="text-xs text-gray-500 bg-gray-100 px-2.5 py-1 rounded-full flex items-center gap-1">
                        <i data-feather="clock" class="w-3.5 h-3.5"></i> 1 Hari Kerja
                    </span>
                    <a href="/pengajuan-surat?kategori=Pengajuan Surat Keterangan Penghasilan Orang Tua" class="text-blue-600 hover:text-blue-800 font-bold text-sm flex items-center gap-1 hover:underline transition">
                        Ajukan Surat <i data-feather="arrow-right" class="w-4 h-4"></i>
                    </a>
                </div>
            </div>

            <!-- Service Card 6 -->
            <div class="service-card bg-white rounded-2xl shadow-sm hover:shadow-xl border border-gray-100 transition-all duration-300 p-6 flex flex-col justify-between">
                <div>
                    <div class="flex items-center mb-4">
                        <div class="bg-blue-50 p-3 rounded-xl mr-4 text-blue-600">
                            <i data-feather="navigation" class="w-6 h-6"></i>
                        </div>
                        <h3 class="text-lg font-bold text-gray-800">Surat Pindah/Datang WNI</h3>
                    </div>
                    <p class="text-gray-600 text-sm mb-6">Dasar perubahan data kependudukan akibat perpindahan domisili antar daerah.</p>
                </div>
                <div class="flex justify-between items-center border-t border-gray-50 pt-4 mt-auto">
                    <span class="text-xs text-gray-500 bg-gray-100 px-2.5 py-1 rounded-full flex items-center gap-1">
                        <i data-feather="clock" class="w-3.5 h-3.5"></i> 2 Hari Kerja
                    </span>
                    <a href="/pengajuan-surat?kategori=Pengajuan Surat Keterangan Pindah/Datang WNI" class="text-blue-600 hover:text-blue-800 font-bold text-sm flex items-center gap-1 hover:underline transition">
                        Ajukan Surat <i data-feather="arrow-right" class="w-4 h-4"></i>
                    </a>
                </div>
            </div>

            <!-- Service Card 7 -->
            <div class="service-card bg-white rounded-2xl shadow-sm hover:shadow-xl border border-gray-100 transition-all duration-300 p-6 flex flex-col justify-between">
                <div>
                    <div class="flex items-center mb-4">
                        <div class="bg-blue-50 p-3 rounded-xl mr-4 text-blue-600">
                            <i data-feather="alert-triangle" class="w-6 h-6"></i>
                        </div>
                        <h3 class="text-lg font-bold text-gray-800">Surat Keterangan Kehilangan</h3>
                    </div>
                    <p class="text-gray-600 text-sm mb-6">Surat pengantar kehilangan dokumen/barang untuk syarat pengurusan duplikat ke pihak berwenang.</p>
                </div>
                <div class="flex justify-between items-center border-t border-gray-50 pt-4 mt-auto">
                    <span class="text-xs text-gray-500 bg-gray-100 px-2.5 py-1 rounded-full flex items-center gap-1">
                        <i data-feather="clock" class="w-3.5 h-3.5"></i> 1 Hari Kerja
                    </span>
                    <a href="/pengajuan-surat?kategori=Pengajuan Surat Keterangan Kehilangan" class="text-blue-600 hover:text-blue-800 font-bold text-sm flex items-center gap-1 hover:underline transition">
                        Ajukan Surat <i data-feather="arrow-right" class="w-4 h-4"></i>
                    </a>
                </div>
            </div>

            <!-- Service Card 8 -->
            <div class="service-card bg-white rounded-2xl shadow-sm hover:shadow-xl border border-gray-100 transition-all duration-300 p-6 flex flex-col justify-between">
                <div>
                    <div class="flex items-center mb-4">
                        <div class="bg-blue-50 p-3 rounded-xl mr-4 text-blue-600">
                            <i data-feather="users" class="w-6 h-6"></i>
                        </div>
                        <h3 class="text-lg font-bold text-gray-800">Surat Kuasa Ahli Waris</h3>
                    </div>
                    <p class="text-gray-600 text-sm mb-6">Menetapkan dan mengesahkan hak ahli waris atas pembagian harta peninggalan keluarga.</p>
                </div>
                <div class="flex justify-between items-center border-t border-gray-50 pt-4 mt-auto">
                    <span class="text-xs text-gray-500 bg-gray-100 px-2.5 py-1 rounded-full flex items-center gap-1">
                        <i data-feather="clock" class="w-3.5 h-3.5"></i> 2 Hari Kerja
                    </span>
                    <a href="/pengajuan-surat?kategori=Pengajuan Surat Keterangan Kuasa Ahli Waris" class="text-blue-600 hover:text-blue-800 font-bold text-sm flex items-center gap-1 hover:underline transition">
                        Ajukan Surat <i data-feather="arrow-right" class="w-4 h-4"></i>
                    </a>
                </div>
            </div>

            <!-- Service Card 9 -->
            <div class="service-card bg-white rounded-2xl shadow-sm hover:shadow-xl border border-gray-100 transition-all duration-300 p-6 flex flex-col justify-between">
                <div>
                    <div class="flex items-center mb-4">
                        <div class="bg-blue-50 p-3 rounded-xl mr-4 text-blue-600">
                            <i data-feather="map" class="w-6 h-6"></i>
                        </div>
                        <h3 class="text-lg font-bold text-gray-800">Surat Jual Beli Tanah</h3>
                    </div>
                    <p class="text-gray-600 text-sm mb-6">Bukti pengantar otentik transaksi jual beli atau peralihan hak kepemilikan tanah warga.</p>
                </div>
                <div class="flex justify-between items-center border-t border-gray-50 pt-4 mt-auto">
                    <span class="text-xs text-gray-500 bg-gray-100 px-2.5 py-1 rounded-full flex items-center gap-1">
                        <i data-feather="clock" class="w-3.5 h-3.5"></i> 2 Hari Kerja
                    </span>
                    <a href="/pengajuan-surat?kategori=Pengajuan Surat Keterangan Jual Beli Tanah" class="text-blue-600 hover:text-blue-800 font-bold text-sm flex items-center gap-1 hover:underline transition">
                        Ajukan Surat <i data-feather="arrow-right" class="w-4 h-4"></i>
                    </a>
                </div>
            </div>

            <!-- Service Card 10 -->
            <div class="service-card bg-white rounded-2xl shadow-sm hover:shadow-xl border border-gray-100 transition-all duration-300 p-6 flex flex-col justify-between">
                <div>
                    <div class="flex items-center mb-4">
                        <div class="bg-blue-50 p-3 rounded-xl mr-4 text-blue-600">
                            <i data-feather="heart" class="w-6 h-6"></i>
                        </div>
                        <h3 class="text-lg font-bold text-gray-800">Pengantar Perkawinan</h3>
                    </div>
                    <p class="text-gray-600 text-sm mb-6">Surat pengantar awal sebagai syarat pendaftaran nikah di Kantor Urusan Agama (KUA).</p>
                </div>
                <div class="flex justify-between items-center border-t border-gray-50 pt-4 mt-auto">
                    <span class="text-xs text-gray-500 bg-gray-100 px-2.5 py-1 rounded-full flex items-center gap-1">
                        <i data-feather="clock" class="w-3.5 h-3.5"></i> 1 Hari Kerja
                    </span>
                    <a href="/pengajuan-surat?kategori=Pengajuan Surat Keterangan Pengantar Perkawinan" class="text-blue-600 hover:text-blue-800 font-bold text-sm flex items-center gap-1 hover:underline transition">
                        Ajukan Surat <i data-feather="arrow-right" class="w-4 h-4"></i>
                    </a>
                </div>
            </div>

            <!-- Service Card 11 -->
            <div class="service-card bg-white rounded-2xl shadow-sm hover:shadow-xl border border-gray-100 transition-all duration-300 p-6 flex flex-col justify-between">
                <div>
                    <div class="flex items-center mb-4">
                        <div class="bg-blue-50 p-3 rounded-xl mr-4 text-blue-600">
                            <i data-feather="user-x" class="w-6 h-6"></i>
                        </div>
                        <h3 class="text-lg font-bold text-gray-800">Surat Belum Menikah</h3>
                    </div>
                    <p class="text-gray-600 text-sm mb-6">Bukti pernyataan resmi status belum menikah untuk melamar pekerjaan atau lainnya.</p>
                </div>
                <div class="flex justify-between items-center border-t border-gray-50 pt-4 mt-auto">
                    <span class="text-xs text-gray-500 bg-gray-100 px-2.5 py-1 rounded-full flex items-center gap-1">
                        <i data-feather="clock" class="w-3.5 h-3.5"></i> 1 Hari Kerja
                    </span>
                    <a href="/pengajuan-surat?kategori=Pengajuan Surat Keterangan Belum Menikah" class="text-blue-600 hover:text-blue-800 font-bold text-sm flex items-center gap-1 hover:underline transition">
                        Ajukan Surat <i data-feather="arrow-right" class="w-4 h-4"></i>
                    </a>
                </div>
            </div>

            <!-- Service Card 12 -->
            <div class="service-card bg-white rounded-2xl shadow-sm hover:shadow-xl border border-gray-100 transition-all duration-300 p-6 flex flex-col justify-between">
                <div>
                    <div class="flex items-center mb-4">
                        <div class="bg-blue-50 p-3 rounded-xl mr-4 text-blue-600">
                            <i data-feather="gift" class="w-6 h-6"></i>
                        </div>
                        <h3 class="text-lg font-bold text-gray-800">Surat Hibah/Wakaf</h3>
                    </div>
                    <p class="text-gray-600 text-sm mb-6">Mengurus pengantar pemberian aset untuk kepentingan pribadi (hibah) atau umum/agama (wakaf).</p>
                </div>
                <div class="flex justify-between items-center border-t border-gray-50 pt-4 mt-auto">
                    <span class="text-xs text-gray-500 bg-gray-100 px-2.5 py-1 rounded-full flex items-center gap-1">
                        <i data-feather="clock" class="w-3.5 h-3.5"></i> 2 Hari Kerja
                    </span>
                    <a href="/pengajuan-surat?kategori=Pengajuan Surat Keterangan Hibah/Wakaf" class="text-blue-600 hover:text-blue-800 font-bold text-sm flex items-center gap-1 hover:underline transition">
                        Ajukan Surat <i data-feather="arrow-right" class="w-4 h-4"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Service Guide Section -->
<section id="panduan-layanan" class="py-16 bg-white">
    <div class="container mx-auto px-4">
        <div class="flex flex-col lg:flex-row items-stretch gap-8">
            {{-- Bagian Kiri: Panduan Layanan Desa --}}
            <div class="lg:w-1/2 flex">
                <div class="bg-gray-50 p-8 rounded-2xl border border-gray-100 w-full flex flex-col justify-between">
                    <div>
                        <h2 class="text-3xl font-bold text-blue-900 mb-4">Panduan Layanan Desa</h2>
                        <p class="text-gray-600 mb-6">Pelajari langkah-langkah pengajuan berbagai layanan administrasi desa dengan panduan yang jelas dan mudah dipahami.</p>
                        <ul class="space-y-4 text-gray-700">
                            <li class="flex items-start">
                                <i data-feather="check-circle" class="text-green-500 mr-3 mt-1 flex-shrink-0"></i>
                                <span>Alur pengajuan online yang terstruktur</span>
                            </li>
                            <li class="flex items-start">
                                <i data-feather="check-circle" class="text-green-500 mr-3 mt-1 flex-shrink-0"></i>
                                <span>Syarat berkas/lampiran lengkap</span>
                            </li>
                            <li class="flex items-start">
                                <i data-feather="check-circle" class="text-green-500 mr-3 mt-1 flex-shrink-0"></i>
                                <span>Waktu verifikasi oleh petugas terukur</span>
                            </li>
                            <li class="flex items-start">
                                <i data-feather="check-circle" class="text-green-500 mr-3 mt-1 flex-shrink-0"></i>
                                <span>Tanpa pungutan biaya (gratis)</span>
                            </li>
                        </ul>
                    </div>
                    
                    @php
                        $panduan = $dokumen->first(fn($d) => str_contains(strtolower($d->nama), 'panduan'));
                    @endphp
                    
                    @if($panduan)
                        <a href="{{ asset('storage/' . $panduan->file) }}" download
                            class="mt-8 bg-blue-900 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-800 transition inline-flex items-center justify-center gap-2">
                            <i data-feather="download" class="w-5 h-5"></i> Unduh Panduan Lengkap
                        </a>
                    @else
                        <button onclick="Swal.fire('Info', 'Panduan layanan belum diunggah oleh admin.', 'info')"
                            class="mt-8 bg-gray-300 text-gray-500 px-6 py-3 rounded-lg font-semibold cursor-not-allowed">
                            <i data-feather="info" class="inline mr-2 w-5 h-5"></i> Panduan Belum Tersedia
                        </button>
                    @endif
                </div>
            </div>

            {{-- Bagian Kanan: Contoh Alur --}}
            <div class="lg:w-1/2 flex">
                <div class="bg-gray-50 p-8 rounded-2xl border border-gray-100 w-full">
                    <div class="flex items-center mb-6">
                        <i data-feather="book-open" class="text-blue-900 w-8 h-8 mr-3"></i>
                        <h3 class="text-xl font-bold text-gray-800">Contoh Alur Pengajuan</h3>
                    </div>
                    <div class="space-y-4">
                        <div class="p-4 bg-white rounded-xl shadow-sm border border-gray-100">
                            <h4 class="font-bold text-blue-900 mb-2">1. Surat Keterangan Domisili</h4>
                            <ol class="list-decimal list-inside text-gray-600 space-y-1.5 pl-2 text-sm">
                                <li>Unduh Formulir Domisili di bawah ini</li>
                                <li>Isi data dan tanda tangani</li>
                                <li>Masuk ke menu <a href="/pengajuan-surat" class="text-blue-600 hover:underline font-semibold">Pengajuan Surat</a></li>
                                <li>Pilih Kategori <strong>Pengajuan Surat Domisili</strong></li>
                                <li>Unggah formulir terisi di kolom lampiran, lalu kirim</li>
                            </ol>
                        </div>
                        <div class="p-4 bg-white rounded-xl shadow-sm border border-gray-100">
                            <h4 class="font-bold text-blue-900 mb-2">2. Surat Keterangan Usaha</h4>
                            <ol class="list-decimal list-inside text-gray-600 space-y-1.5 pl-2 text-sm">
                                <li>Masuk ke menu <a href="/pengajuan-surat" class="text-blue-600 hover:underline font-semibold">Pengajuan Surat</a></li>
                                <li>Pilih Kategori <strong>Pengajuan Surat Usaha</strong></li>
                                <li>Tulis deskripsi singkat usaha Anda</li>
                                <li>Unggah berkas KTP & Foto Usaha di kolom lampiran, lalu kirim</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Download Section -->
<section id="formulir-desa" class="py-16 bg-blue-950 text-white">
    <div class="container mx-auto px-4 text-center ">
        <h2 class="text-3xl font-bold mb-6">Formulir Layanan Desa</h2>
        <p class="text-lg mb-8 max-w-xl mx-auto opacity-80">Unduh berkas formulir PDF yang diperlukan untuk melengkapi pengajuan administratif Anda</p>

        @php
            $domisili = $dokumen->first(fn($d) => str_contains(strtolower($d->nama), 'domisili'));
            $kk = $dokumen->first(fn($d) => str_contains(strtolower($d->nama), 'kk') || str_contains(strtolower($d->nama), 'kartu keluarga'));
            $sktm = $dokumen->first(fn($d) => str_contains(strtolower($d->nama), 'sktm') || str_contains(strtolower($d->nama), 'tidak mampu'));
        @endphp

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
            <!-- Card 1 -->
            <div class="bg-white text-gray-800 p-6 rounded-2xl shadow-lg border border-gray-100 flex flex-col justify-between">
                <div>
                    <div class="bg-blue-50 w-12 h-12 rounded-xl flex items-center justify-center text-blue-600 mx-auto mb-4">
                        <i data-feather="file-text" class="w-6 h-6"></i>
                    </div>
                    <h3 class="font-bold mb-1 text-gray-850">Formulir Domisili</h3>
                    <p class="text-gray-500 mb-6 text-sm">Untuk berkas lampiran pengajuan surat domisili</p>
                </div>
                @if($domisili)
                    <a href="{{ asset('storage/' . $domisili->file) }}" download
                        class="w-full text-center bg-blue-900 text-white font-semibold py-2.5 px-4 rounded-xl hover:bg-blue-800 transition text-sm flex items-center justify-center gap-2">
                        <i data-feather="download" class="w-4 h-4"></i> Unduh PDF
                    </a>
                @else
                    <button onclick="Swal.fire('Informasi', 'Formulir Domisili belum diunggah oleh admin di Dashboard.', 'info')" 
                        class="w-full text-center bg-gray-200 text-gray-400 font-semibold py-2.5 px-4 rounded-xl text-sm cursor-pointer hover:bg-gray-300 hover:text-gray-500 transition">
                        Belum Tersedia
                    </button>
                @endif
            </div>

            <!-- Card 2 -->
            <div class="bg-white text-gray-800 p-6 rounded-2xl shadow-lg border border-gray-100 flex flex-col justify-between">
                <div>
                    <div class="bg-blue-50 w-12 h-12 rounded-xl flex items-center justify-center text-blue-600 mx-auto mb-4">
                        <i data-feather="file-text" class="w-6 h-6"></i>
                    </div>
                    <h3 class="font-bold mb-1 text-gray-850">Formulir KK Baru</h3>
                    <p class="text-gray-500 mb-6 text-sm">Untuk melengkapi pembuatan kartu keluarga baru</p>
                </div>
                @if($kk)
                    <a href="{{ asset('storage/' . $kk->file) }}" download
                        class="w-full text-center bg-blue-900 text-white font-semibold py-2.5 px-4 rounded-xl hover:bg-blue-800 transition text-sm flex items-center justify-center gap-2">
                        <i data-feather="download" class="w-4 h-4"></i> Unduh PDF
                    </a>
                @else
                    <button onclick="Swal.fire('Informasi', 'Formulir Kartu Keluarga belum diunggah oleh admin di Dashboard.', 'info')" 
                        class="w-full text-center bg-gray-200 text-gray-400 font-semibold py-2.5 px-4 rounded-xl text-sm cursor-pointer hover:bg-gray-300 hover:text-gray-500 transition">
                        Belum Tersedia
                    </button>
                @endif
            </div>

            <!-- Card 3 -->
            <div class="bg-white text-gray-800 p-6 rounded-2xl shadow-lg border border-gray-100 flex flex-col justify-between">
                <div>
                    <div class="bg-blue-50 w-12 h-12 rounded-xl flex items-center justify-center text-blue-600 mx-auto mb-4">
                        <i data-feather="file-text" class="w-6 h-6"></i>
                    </div>
                    <h3 class="font-bold mb-1 text-gray-850">Formulir SKTM</h3>
                    <p class="text-gray-500 mb-6 text-sm">Untuk lampiran surat keterangan tidak mampu</p>
                </div>
                @if($sktm)
                    <a href="{{ asset('storage/' . $sktm->file) }}" download
                        class="w-full text-center bg-blue-900 text-white font-semibold py-2.5 px-4 rounded-xl hover:bg-blue-800 transition text-sm flex items-center justify-center gap-2">
                        <i data-feather="download" class="w-4 h-4"></i> Unduh PDF
                    </a>
                @else
                    <button onclick="Swal.fire('Informasi', 'Formulir SKTM belum diunggah oleh admin di Dashboard.', 'info')" 
                        class="w-full text-center bg-gray-200 text-gray-400 font-semibold py-2.5 px-4 rounded-xl text-sm cursor-pointer hover:bg-gray-300 hover:text-gray-500 transition">
                        Belum Tersedia
                    </button>
                @endif
            </div>
        </div>

        <a href="#dokumen-list"
            class="border border-white/60 px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-950 transition inline-block">
            <i data-feather="arrow-up" class="inline mr-2 w-4 h-4"></i> Lihat Semua Formulir
        </a>
    </div>
</section>
@endsection