@extends('layouts.publik')

@section('content')
<!-- BANNER UTAMA (HERO SECTION) -->
<div class="hero-section shadow-sm mb-5">
    <div class="container">
        <h1 class="display-4 fw-bold mb-3">Selamat Datang di Desa Kadumbul</h1>
        <p class="lead mb-0">Portal Informasi Resmi Pemerintah dan Masyarakat Desa Kadumbul</p>
    </div>
</div>

<!-- KONTEN UTAMA: PROFIL, PENGUMUMAN, KONTAK -->
<div class="container my-5">
    <div class="row g-4">
        
        <!-- KOLOM 1: PROFIL DESA -->
        <div class="col-lg-4 col-md-6">
            <div class="card border-0 shadow-sm h-100 bg-white" style="border-radius: 12px;">
                <div class="card-body p-4 d-flex flex-column">
                    <h5 class="fw-bold text-success border-bottom pb-2 mb-3">
                        <i class="fa-solid fa-file-lines me-2"></i>Profil Desa
                    </h5>
                    <p class="text-muted small mb-3">
                        Ketahui informasi dasar data menyeluruh mengenai tata kelola wilayah Desa Kadumbul:
                    </p>
                    
                    <!-- Indikator Isi Profil -->
                    <ul class="list-unstyled flex-grow-1 small text-secondary mb-4">
                        <li class="mb-2"><i class="fa-solid fa-clock-rotate-left text-success me-2"></i>Sejarah Desa</li>
                        <li class="mb-2"><i class="fa-solid fa-bullseye text-success me-2"></i>Visi </li>
                        <li class="mb-2"><i class="fa-solid fa-bullseye text-success me-2"></i> Misi </li>
                        <li class="mb-2"><i class="fa-solid fa-chart-simple text-success me-2"></i>Data Statistik Kependudukan</li>
                    </ul>

                    <div>
                        <a href="{{ url('/profil') }}" class="btn btn-success btn-sm w-100 fw-bold py-2 rounded-3 shadow-sm">
                            Buka Profil Desa <i class="fa-solid fa-arrow-right ms-1"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- KOLOM 2: PENGUMUMAN -->
        <div class="col-lg-4 col-md-6">
            <div class="card border-0 shadow-sm h-100 bg-white" style="border-radius: 12px;">
                <div class="card-body p-4 d-flex flex-column">
                    <h5 class="fw-bold text-success border-bottom pb-2 mb-3">
                        <i class="fa-solid fa-bullhorn me-2"></i>Pengumuman
                    </h5>
                    <p class="text-muted small mb-3">
                        Pantau kegiatan yang sedang berjalan dari pemerintah desa:
                    </p>
                    
                    <!-- Indikator Isi Pengumuman Kilat -->
                    <div class="flex-grow-1">
                        @if(isset($pengumuman) && $pengumuman->count() > 0)
                            <div class="list-group list-group-flush gap-2 mb-3">
                                @foreach($pengumuman as $item)
                                    <a href="{{ route('publik.pengumuman.index') }}" class="list-group-item list-group-item-action border-0 px-0 py-1 bg-transparent text-truncate small text-secondary">
                                        <i class="fa-solid fa-circle-chevron-right text-success me-1"></i> {{ $item->judul }}
                                    </a>
                                @endforeach
                            </div>
                        @else
                            <ul class="list-unstyled small text-secondary mb-4">
                                <li class="mb-2"><i class="fa-solid fa-circle-info text-success me-2"></i>Informasi Bantuan Sosial</li>
                                <li class="mb-2"><i class="fa-solid fa-circle-info text-success me-2"></i>Agenda Rapat & Kerja Bakti Warga</li>
                                <li class="mb-2"><i class="fa-solid fa-circle-info text-success me-2"></i>Maklumat Layanan Administrasi</li>
                            </ul>
                        @endif
                    </div>

                    <div>
                        <a href="{{ route('publik.pengumuman.index') }}" class="btn btn-success btn-sm w-100 fw-bold py-2 rounded-3 shadow-sm">
                            Lihat Pengumuman <i class="fa-solid fa-arrow-right ms-1"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- KOLOM 3: KONTAK KAMI -->
        <div class="col-lg-4 col-md-12">
            <div class="card border-0 shadow-sm h-100 bg-white" style="border-radius: 12px;">
                <div class="card-body p-4 d-flex flex-column">
                    <h5 class="fw-bold text-success border-bottom pb-2 mb-3">
                        <i class="fa-solid fa-map-location-dot me-2"></i>Kontak 
                    </h5>
                    <p class="text-muted small mb-3">
                        Hubungi perangkat atau kunjungi langsung area koordinat layanan sentral terintegrasi kami:
                    </p>
                    
                    <!-- Indikator Isi Kontak -->
                    <ul class="list-unstyled flex-grow-1 small text-secondary mb-4">
                        <li class="mb-2"><i class="fa-solid fa-location-dot text-success me-2"></i>Alamat Kantor Desa</li>
                        <li class="mb-2"><i class="fa-solid fa-map-marked-alt text-success me-2"></i>Navigasi Google Maps </li>
                        <li class="mb-2"><i class="fa-solid fa-comments text-success me-2"></i>Form Kotak Aspirasi & Aduan Warga</li>
                    </ul>

                    <div>
                        <a href="{{ route('publik.kontak') }}" class="btn btn-success btn-sm w-100 fw-bold py-2 rounded-3 shadow-sm">
                            Hubungi & Cari Peta <i class="fa-solid fa-location-arrow ms-1"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- BERITA TERBARU -->
<div class="container mb-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="fw-bold text-dark m-0"><i class="fa-solid fa-newspaper text-success me-2"></i>Berita Terbaru</h4>
        <a href="{{ route('publik.berita.index') }}" class="small fw-semibold text-success text-decoration-none">Lihat Semua <i class="fa-solid fa-arrow-right ms-1"></i></a>
    </div>
    <div class="row g-4">
        @forelse($berita as $b)
            <div class="col-md-4">
                <div class="card h-100 shadow-sm border-0 rounded-4 overflow-hidden">
                    <img src="{{ $b->gambar ? asset('storage/'.$b->gambar) : 'https://placehold.co/600x400?text=Desa+Kadumbul' }}" class="card-img-top" style="height: 180px; object-fit: cover;" alt="{{ $b->judul }}">
                    <div class="card-body">
                        <small class="text-muted d-block mb-2"><i class="fa-regular fa-calendar me-1"></i>{{ $b->created_at->format('d M Y') }}</small>
                        <h6 class="fw-bold text-dark mb-2">{{ $b->judul }}</h6>
                        <a href="{{ route('publik.berita.show', $b->slug) }}" class="small fw-semibold text-success text-decoration-none">Baca Selengkapnya &rarr;</a>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12">
                <p class="text-muted text-center py-4 mb-0">Belum ada berita yang dipublikasikan.</p>
            </div>
        @endforelse
    </div>
</div>

<!-- POTENSI DESA -->
<div class="container mb-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="fw-bold text-dark m-0"><i class="fa-solid fa-seedling text-success me-2"></i>Potensi Desa</h4>
        <a href="{{ route('publik.potensi') }}" class="small fw-semibold text-success text-decoration-none">Lihat Semua <i class="fa-solid fa-arrow-right ms-1"></i></a>
    </div>
    <div class="row g-4">
        @forelse($potensi as $item)
            <div class="col-md-4">
                <div class="card h-100 shadow-sm border-0 rounded-4 overflow-hidden">
                    <div class="bg-light text-center d-flex align-items-center justify-content-center" style="height: 160px;">
                        @if($item->gambar)
                            <img src="{{ $item->gambar_url }}" class="w-100 h-100" style="object-fit: cover;" alt="{{ $item->nama_potensi }}">
                        @else
                            <i class="fa-solid fa-wheat-awn fa-2x text-success opacity-50"></i>
                        @endif
                    </div>
                    <div class="card-body">
                        <span class="badge bg-success bg-opacity-10 text-success small mb-2">{{ $item->kategori }}</span>
                        <h6 class="fw-bold text-dark mb-0">{{ $item->nama_potensi }}</h6>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12">
                <p class="text-muted text-center py-4 mb-0">Belum ada data potensi desa yang ditambahkan.</p>
            </div>
        @endforelse
    </div>
</div>
@endsection