@extends('user.template')

@section('title', $berita->judul_berita)

@section('content')

    <div class="page-title">
        <div class="container d-lg-flex justify-content-between align-items-center">
            <h1 class="mb-2 mb-lg-0">Detail Berita</h1>
            <nav class="breadcrumbs">
                <ol>
                    <li><a href="{{ route('user.index') }}">Beranda</a></li>
                    <li><a href="{{ route('user.berita') }}">Berita</a></li>
                    <li class="current">Detail Berita</li>
                </ol>
            </nav>
        </div>
    </div><!-- End Page Title -->

    <div class="container">
        <div class="row">

            <div class="col-lg-8">

                <!-- Blog Details Section -->
                <section id="blog-details" class="blog-details section">
                    <div class="container">

                        <article class="article">

                            <div class="post-img">
                                @if ($berita->gambar_berita)
                                    <img src="{{ asset('storage/' . $berita->gambar_berita) }}"
                                        alt="{{ $berita->judul_berita }}" class="img-fluid">
                                @else
                                    <img src="assets/img/blog/default.jpg" alt="default" class="img-fluid">
                                @endif
                            </div>

                            <h2 class="title">{{ $berita->judul_berita }}</h2>

                            <div class="meta-top">
                                <ul>
                                    <li class="d-flex align-items-center">
                                        <i class="bi bi-person"></i>
                                        {{ $berita->author ?? 'Admin' }}
                                    </li>
                                    <li class="d-flex align-items-center">
                                        <i class="bi bi-clock"></i>
                                        <time datetime="{{ $berita->tanggal_berita }}">
                                            {{ \Carbon\Carbon::parse($berita->tanggal_berita)->translatedFormat('d F Y') }}
                                        </time>
                                    </li>

                                </ul>
                            </div><!-- End meta top -->

                            <div class="content">
                                {!! $berita->isi_berita !!}
                            </div><!-- End post content -->

                        </article>

                    </div>
                </section><!-- /Blog Details Section -->

            </div>

            <div class="col-lg-4 sidebar">

                <div class="widgets-container">

                    <!-- Recent Posts Widget -->
                    <!-- Recent Posts Widget -->
                    <div class="recent-posts-widget widget-item">
                        <h3 class="widget-title">Berita Lainnya</h3>

                        @foreach ($recentBerita as $recent)
                            <div class="post-item">
                                @if ($recent->gambar_berita)
                                    <img src="{{ asset('storage/' . $recent->gambar_berita) }}"
                                        alt="{{ $recent->judul_berita }}" class="flex-shrink-0">
                                @else
                                    <img src="assets/img/blog/default.jpg" alt="default" class="flex-shrink-0">
                                @endif
                                <div>
                                    <h4>
                                        <a href="{{ route('user.detail-berita', $recent->id_berita) }}">
                                            {{ Str::limit($recent->judul_berita, 50) }}
                                        </a>
                                    </h4>
                                    <time datetime="{{ $recent->tanggal_berita }}">
                                        {{ \Carbon\Carbon::parse($recent->tanggal_berita)->translatedFormat('d F Y') }}
                                    </time>
                                </div>
                            </div>
                        @endforeach

                    </div><!--/Recent Posts Widget -->

                </div>

            </div>

        </div>
    </div>

@endsection