@extends('layouts.app')

@section('content')
<div class="container py-5">
    
    <!-- JUDUL HALAMAN UTAMA -->
    <div class="text-center mb-5">
        <h2 class="fw-bold text-uppercase m-0">Pengumuman Resmi Desa</h2>
        <p class="text-muted mt-2">Pusat informasi, surat edaran, dan transparansi kegiatan Pemerintah Desa Kadumbul</p>
        <div class="mx-auto bg-success mt-2" style="width: 70px; height: 4px; border-radius: 2px;"></div>
    </div>

    <!-- BARIS FILTER KATEGORI & PENCARIAN (SEJAJAR & SEIMBANG) -->
    <div class="row g-3 align-items-center mb-4">
        <!-- Sisi Kiri: Tombol Filter Kategori -->
        <div class="col-md-8">
            <div class="card border-0 shadow-sm rounded-4 bg-light">
                <div class="card-body p-3 d-flex flex-wrap align-items-center gap-2">
                    <span class="text-secondary small fw-bold me-2"><i class="bi bi-filter-circle-fill text-success"></i> KATEGORI:</span>
                    
                    <ul class="nav nav-pills gap-2" id="pills-tab" role="tablist" style="border: none;">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active rounded-pill px-3 py-1.5 small fw-medium" id="pills-semua-tab" data-bs-toggle="pill" data-bs-target="#pills-semua" type="button" role="tab">Semua</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link rounded-pill px-3 py-1.5 small fw-medium" id="pills-pemerintahan-tab" data-bs-toggle="pill" data-bs-target="#pills-pemerintahan" type="button" role="tab">Pemerintahan</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link rounded-pill px-3 py-1.5 small fw-medium" id="pills-bansos-tab" data-bs-toggle="pill" data-bs-target="#pills-bansos" type="button" role="tab">Bantuan Sosial</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link rounded-pill px-3 py-1.5 small fw-medium" id="pills-kegiatan-tab" data-bs-toggle="pill" data-bs-target="#pills-kegiatan" type="button" role="tab">Kegiatan Desa</button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Sisi Kanan: Kotak Pencarian Diperkecil & Sejajar -->
        <div class="col-md-4">
            <div class="card border-0 shadow-sm rounded-4 bg-light">
                <div class="card-body p-2">
                    <form action="#" method="GET" class="m-0">
                        <div class="input-group">
                            <input type="text" name="cari" class="form-control form-control-sm border-0 bg-white rounded-start-pill ps-3" placeholder="Cari pengumuman...">
                            <button class="btn btn-sm btn-success rounded-end-pill px-3" type="submit">
                                <i class="bi bi-search small"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- KONTEN PENGUMUMAN BERDASARKAN FILTER TAB -->
    <div class="tab-content" id="pills-tabContent">
        
        <!-- 1. TAB SEMUA PENGUMUMAN -->
        <div class="tab-pane fade show active" id="pills-semua" role="tabpanel">
            
            <!-- BLOK PEMERINTAHAN -->
            <div class="card border-0 shadow-sm rounded-4 mb-4 overflow-hidden">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-start flex-wrap mb-3">
                        <span class="badge bg-success-subtle text-success px-3 py-2 rounded-pill fw-bold"><i class="bi bi-tag-fill me-1"></i> Pemerintahan</span>
                        <div class="text-muted small">
                            <span class="me-3"><i class="bi bi-calendar-event me-1"></i> <strong>Terbit:</strong> 25 Jun 2026</span>
                            <span class="text-danger"><i class="bi bi-calendar-x me-1"></i> <strong>Kadaluwarsa:</strong> 15 Jul 2026</span>
                        </div>
                    </div>
                    <h4 class="fw-bold text-dark mb-3">Pembaruan Data Kartu Keluarga Terkait Sistem Layanan Mandiri Desa</h4>
                    <p class="text-secondary small mb-4" style="line-height: 1.6;">Diberitahukan kepada seluruh warga masyarakat Desa Kadumbul agar segera melakukan verifikasi dan pembaruan data Kartu Keluarga (KK) terbaru di kantor desa. Proses ini diperlukan guna sinkronisasi database jaminan layanan mandiri.</p>
                    <div class="d-flex justify-content-between align-items-center flex-wrap pt-3 border-top border-light">
                        <a href="#" class="btn btn-sm btn-outline-primary rounded-pill px-3 fw-medium" download><i class="bi bi-download me-1"></i> Download File (PDF)</a>
                        <a href="https://api.whatsapp.com/send?text=Info%20Pengumuman%3A%20Pembaruan%20Data%20Kartu%20Keluarga%20Desa%20Kadumbul" target="_blank" class="btn btn-sm btn-success rounded-pill px-3 fw-medium"><i class="bi bi-whatsapp me-1"></i> Bagikan ke WA</a>
                    </div>
                </div>
            </div>

            <!-- BLOK BANTUAN SOSIAL -->
            <div class="card border-0 shadow-sm rounded-4 mb-4 overflow-hidden">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-start flex-wrap mb-3">
                        <span class="badge bg-warning-subtle text-warning-emphasis px-3 py-2 rounded-pill fw-bold"><i class="bi bi-hand-thumbs-up-fill me-1"></i> Bantuan Sosial</span>
                        <div class="text-muted small">
                            <span class="me-3"><i class="bi bi-calendar-event me-1"></i> <strong>Terbit:</strong> 20 Jun 2026</span>
                            <span class="text-danger"><i class="bi bi-calendar-x me-1"></i> <strong>Kadaluwarsa:</strong> 05 Jul 2026</span>
                        </div>
                    </div>
                    <h4 class="fw-bold text-dark mb-3">Jadwal Penyaluran Bantuan Langsung Tunai (BLT) Dana Desa Tahap II</h4>
                    <p class="text-secondary small mb-4" style="line-height: 1.6;">Penyaluran dana BLT Tahap II dijadwalkan bertempat di Aula Pertemuan Umum Kantor Desa Kadumbul. Bagi Keluarga Penerima Manfaat (KPM) diwajibkan hadir membawa identitas asli KTP/KK sesuai jadwal wilayah dusun.</p>
                    <div class="d-flex justify-content-between align-items-center flex-wrap pt-3 border-top border-light">
                        <a href="#" class="btn btn-sm btn-outline-primary rounded-pill px-3 fw-medium" download><i class="bi bi-download me-1"></i> Download File (PDF)</a>
                        <a href="https://api.whatsapp.com/send?text=Info%20Bantuan%20Sosial%3A%20Jadwal%20BLT%20Dana%20Desa%20Tahap%20II" target="_blank" class="btn btn-sm btn-success rounded-pill px-3 fw-medium"><i class="bi bi-whatsapp me-1"></i> Bagikan ke WA</a>
                    </div>
                </div>
            </div>

            <!-- BLOK KEGIATAN DESA -->
            <div class="card border-0 shadow-sm rounded-4 mb-4 overflow-hidden">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-start flex-wrap mb-3">
                        <span class="badge bg-primary-subtle text-primary px-3 py-2 rounded-pill fw-bold"><i class="bi bi-calendar-check-fill me-1"></i> Kegiatan Desa</span>
                        <div class="text-muted small">
                            <span class="me-3"><i class="bi bi-calendar-event me-1"></i> <strong>Terbit:</strong> 18 Jun 2026</span>
                            <span class="text-danger"><i class="bi bi-calendar-x me-1"></i> <strong>Kadaluwarsa:</strong> 28 Jun 2026</span>
                        </div>
                    </div>
                    <h4 class="fw-bold text-dark mb-3">Agenda Kerja Bakti Lingkungan Terpadu Menyambut Hari Bersih Desa</h4>
                    <p class="text-secondary small mb-4" style="line-height: 1.6;">Mengundang partisipasi aktif seluruh elemen masyarakat, pemuda, dan kepala dusun untuk melaksanakan aksi gotong royong pembersihan fasilitas jalan utama desa dan selokan umum.</p>
                    <div class="d-flex justify-content-between align-items-center flex-wrap pt-3 border-top border-light">
                        <a href="#" class="btn btn-sm btn-outline-primary rounded-pill px-3 fw-medium" download><i class="bi bi-download me-1"></i> Download File (PDF)</a>
                        <a href="https://api.whatsapp.com/send?text=Info%20Kegiatan%20Desa%3A%20Agenda%20Kerja%20Bakti%20Masyarakat" target="_blank" class="btn btn-sm btn-success rounded-pill px-3 fw-medium"><i class="bi bi-whatsapp me-1"></i> Bagikan ke WA</a>
                    </div>
                </div>
            </div>

        </div>

        <!-- 2. TAB PEMERINTAHAN SAJA -->
        <div class="tab-pane fade" id="pills-pemerintahan" role="tabpanel">
            <!-- Salinan Blok Pemerintahan -->
            <div class="card border-0 shadow-sm rounded-4 mb-4 overflow-hidden">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-start flex-wrap mb-3">
                        <span class="badge bg-success-subtle text-success px-3 py-2 rounded-pill fw-bold"><i class="bi bi-tag-fill me-1"></i> Pemerintahan</span>
                        <div class="text-muted small">
                            <span class="me-3"><i class="bi bi-calendar-event me-1"></i> <strong>Terbit:</strong> 25 Jun 2026</span>
                            <span class="text-danger"><i class="bi bi-calendar-x me-1"></i> <strong>Kadaluwarsa:</strong> 15 Jul 2026</span>
                        </div>
                    </div>
                    <h4 class="fw-bold text-dark mb-3">Pembaruan Data Kartu Keluarga Terkait Sistem Layanan Mandiri Desa</h4>
                    <p class="text-secondary small mb-4" style="line-height: 1.6;">Diberitahukan kepada seluruh warga masyarakat Desa Kadumbul agar segera melakukan verifikasi dan pembaruan data Kartu Keluarga (KK) terbaru di kantor desa.</p>
                    <div class="d-flex justify-content-between align-items-center flex-wrap pt-3 border-top border-light">
                        <a href="#" class="btn btn-sm btn-outline-primary rounded-pill px-3 fw-medium" download><i class="bi bi-download me-1"></i> Download File (PDF)</a>
                        <a href="https://api.whatsapp.com/send?text=Info%20Pengumuman%3A%20Pembaruan%20Data%20Kartu%20Keluarga%20Desa%20Kadumbul" target="_blank" class="btn btn-sm btn-success rounded-pill px-3 fw-medium"><i class="bi bi-whatsapp me-1"></i> Bagikan ke WA</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 3. TAB BANTUAN SOSIAL SAJA -->
        <div class="tab-pane fade" id="pills-bansos" role="tabpanel">
            <!-- Salinan Blok Bantuan Sosial -->
            <div class="card border-0 shadow-sm rounded-4 mb-4 overflow-hidden">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-start flex-wrap mb-3">
                        <span class="badge bg-warning-subtle text-warning-emphasis px-3 py-2 rounded-pill fw-bold"><i class="bi bi-hand-thumbs-up-fill me-1"></i> Bantuan Sosial</span>
                        <div class="text-muted small">
                            <span class="me-3"><i class="bi bi-calendar-event me-1"></i> <strong>Terbit:</strong> 20 Jun 2026</span>
                            <span class="text-danger"><i class="bi bi-calendar-x me-1"></i> <strong>Kadaluwarsa:</strong> 05 Jul 2026</span>
                        </div>
                    </div>
                    <h4 class="fw-bold text-dark mb-3">Jadwal Penyaluran Bantuan Langsung Tunai (BLT) Dana Desa Tahap II</h4>
                    <p class="text-secondary small mb-4" style="line-height: 1.6;">Penyaluran dana BLT Tahap II dijadwalkan bertempat di Aula Pertemuan Umum Kantor Desa Kadumbul.</p>
                    <div class="d-flex justify-content-between align-items-center flex-wrap pt-3 border-top border-light">
                        <a href="#" class="btn btn-sm btn-outline-primary rounded-pill px-3 fw-medium" download><i class="bi bi-download me-1"></i> Download File (PDF)</a>
                        <a href="https://api.whatsapp.com/send?text=Info%20Bantuan%20Sosial%3A%20Jadwal%20BLT%20Dana%20Desa%20Tahap%20II" target="_blank" class="btn btn-sm btn-success rounded-pill px-3 fw-medium"><i class="bi bi-whatsapp me-1"></i> Bagikan ke WA</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 4. TAB KEGIATAN DESA SAJA -->
        <div class="tab-pane fade" id="pills-kegiatan" role="tabpanel">
            <!-- Salinan Blok Kegiatan Desa -->
            <div class="card border-0 shadow-sm rounded-4 mb-4 overflow-hidden">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-start flex-wrap mb-3">
                        <span class="badge bg-primary-subtle text-primary px-3 py-2 rounded-pill fw-bold"><i class="bi bi-calendar-check-fill me-1"></i> Kegiatan Desa</span>
                        <div class="text-muted small">
                            <span class="me-3"><i class="bi bi-calendar-event me-1"></i> <strong>Terbit:</strong> 18 Jun 2026</span>
                            <span class="text-danger"><i class="bi bi-calendar-x me-1"></i> <strong>Kadaluwarsa:</strong> 28 Jun 2026</span>
                        </div>
                    </div>
                    <h4 class="fw-bold text-dark mb-3">Agenda Kerja Bakti Lingkungan Terpadu Menyambut Hari Bersih Desa</h4>
                    <p class="text-secondary small mb-4" style="line-height: 1.6;">Mengundang partisipasi aktif seluruh elemen masyarakat, pemuda, dan kepala dusun untuk melaksanakan aksi gotong royong.</p>
                    <div class="d-flex justify-content-between align-items-center flex-wrap pt-3 border-top border-light">
                        <a href="#" class="btn btn-sm btn-outline-primary rounded-pill px-3 fw-medium" download><i class="bi bi-download me-1"></i> Download File (PDF)</a>
                        <a href="https://api.whatsapp.com/send?text=Info%20Kegiatan%20Desa%3A%20Agenda%20Kerja%20Bakti%20Masyarakat" target="_blank" class="btn btn-sm btn-success rounded-pill px-3 fw-medium"><i class="bi bi-whatsapp me-1"></i> Bagikan ke WA</a>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- BACK TO HOME -->
    <div class="text-center mt-4">
        <a href="{{ route('desa.home') }}" class="btn btn-sm btn-outline-secondary rounded-pill px-4 py-2 shadow-sm fw-medium">
            <i class="bi bi-house-door-fill me-2"></i>Kembali ke Beranda
        </a>
    </div>
</div>

<style>
    .nav-pills .nav-link {
        color: #198754;
        border: 1px solid #198754;
        background-color: transparent;
    }
    .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
        color: #fff;
        background-color: #198754;
        border-color: #198754;
    }
    .form-control:focus {
        box-shadow: none;
        border-color: #198754;
    }
</style>
@endsection