@extends('layouts.app')

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-9">
            
            <!-- Navigasi Ringkas -->
            <nav aria-label="breadcrumb" class="mb-3">
                <ol class="breadcrumb small">
                    <li class="breadcrumb-item"><a href="{{ route('desa.berita.index') }}" class="text-success text-decoration-none">Berita</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ $berita->kategori }}</li>
                </ol>
            </nav>

            <!-- Judul Berita -->
            <h1 class="fw-bold text-dark lh-base mb-3">{{ $berita->judul }}</h1>

            <!-- Meta Data -->
            <div class="d-flex flex-wrap align-items-center gap-3 text-muted small mb-4 pb-3 border-bottom border-light">
                <div><i class="bi bi-calendar3 text-success me-1"></i> {{ \Carbon\Carbon::parse($berita->tanggal_publikasi)->translatedFormat('d F Y') }}</div>
                <div><i class="bi bi-person-fill text-success me-1"></i> Oleh: Admin Redaksi</div>
                <div><span class="badge bg-success-subtle text-success rounded-pill px-2 py-1">{{ $berita->kategori }}</span></div>
            </div>

            <!-- Gambar Utama -->
            <div class="mb-4 text-center">
                <img src="{{ asset('images/' . $berita->gambar) }}" class="img-fluid rounded-4 shadow-sm w-100" alt="{{ $berita->judul }}" style="max-height: 500px; object-fit: cover;">
            </div>

            <!-- Isi Konten Berita -->
            <div class="article-content text-secondary lh-lg fs-6 mb-5" style="text-align: justify;">
                {!! nl2br(e($berita->isi)) !!}
            </div>

            <!-- Tombol Kembali & Bagikan -->
            <div class="d-flex justify-content-between align-items-center border-top pt-4 mb-5">
                <a href="{{ route('desa.berita.index') }}" class="btn btn-light rounded-pill btn-sm px-4">
                    <i class="bi bi-arrow-left me-1"></i> Kembali ke Daftar Berita
                </a>
                <a href="https://api.whatsapp.com/send?text=Baca%20berita%20desa%20terbaru%3A%20{{ urlencode(url()->current()) }}" 
                   target="_blank" 
                   class="btn btn-success rounded-pill btn-sm px-4">
                    <i class="bi bi-whatsapp me-2"></i> Bagikan ke WA
                </a>
            </div>

        </div>
    </div>
</div>
@endsection