@extends('layouts.publik')

@section('content')
<div class="container py-5">
    
    <!-- HEADER -->
    <div class="text-center mb-5">
        <h3 class="fw-bold text-dark display-6 mb-2">PENGUMUMAN DESA</h3>
        <p class="text-muted">Kumpulan informasi dan pengumuman resmi dari Pemerintah Desa Kadumbul</p>
    </div>

    <!-- LIST PENGUMUMAN -->
    <div class="row g-4">
        @forelse($pengumuman as $item)
            <div class="col-md-6">
                <div class="card border-0 shadow-sm rounded-4 h-100 bg-white p-4">
                    <div class="d-flex align-items-center mb-3">
                        <div class="bg-success text-white rounded-circle p-2 me-3 d-flex align-items-center justify-content-center" style="width: 45px; height: 45px;">
                            <i class="fa-solid fa-bullhorn"></i>
                        </div>
                        <div>
                            <small class="text-muted">
                                <i class="fa-regular fa-calendar me-1"></i>
                                {{ isset($item->created_at) ? $item->created_at->format('d M Y') : $item->tanggal }}
                            </small>
                        </div>
                    </div>
                    
                    <h5 class="fw-bold text-dark mb-2">{{ $item->judul }}</h5>
                    <p class="text-secondary small mb-0">
                        {{ \Illuminate\Support\Str::limit(strip_tags($item->isi), 150, '...') }}
                    </p>
                </div>
            </div>
        @empty
            <div class="col-12 text-center py-5">
                <i class="fa-solid fa-bullhorn text-muted fa-3x mb-3 opacity-50"></i>
                <p class="text-muted">Belum ada pengumuman terbaru.</p>
            </div>
        @endforelse
    </div>

    <div class="mt-4">
        {{ $pengumuman->links() }}
    </div>

</div>
@endsection