@extends('user.template')

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

@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>


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

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

                <section id="blog-details" class="blog-details section">
                    <div class="container">

                        <article class="article">

                            <div class="post-img">

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

                            </div>


                            <h2 class="title">
                                {{ $berita->judul_informasi }}
                            </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_informasi }}">
                                            {{ \Carbon\Carbon::parse($berita->tanggal_informasi)->translatedFormat('d F Y') }}
                                        </time>

                                    </li>

                                </ul>
                            </div>


                            <div class="content">
                                {!! $berita->isi_informasi !!}
                            </div>

                        </article>

                    </div>
                </section>

            </div>


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

                <div class="widgets-container">


                    <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_informasi)
                                    <img src="{{ asset('storage/' . $recent->gambar_informasi) }}"
                                        alt="{{ $recent->judul_informasi }}" class="flex-shrink-0">
                                @else
                                    <img src="{{ asset('assets/img/blog/default.jpg') }}" class="flex-shrink-0">
                                @endif


                                <div>

                                    <h4>
                                        <a href="{{ route('user.detail-berita', $recent->id_informasi) }}">
                                            {{ Str::limit($recent->judul_informasi, 50) }}
                                        </a>
                                    </h4>

                                    <time datetime="{{ $recent->tanggal_informasi }}">
                                        {{ \Carbon\Carbon::parse($recent->tanggal_informasi)->translatedFormat('d F Y') }}
                                    </time>

                                </div>

                            </div>
                        @endforeach

                    </div>


                </div>
            </div>


        </div>
    </div>

@endsection