@extends('layouts.app')

@section('styles')
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/welcome.css">
<style>
    .c-app {
        background-color: #2d8c7d;
    }

    .btn-select {
        padding-left: 15px;
        padding-bottom: 15px;
    }

    .img-center {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .card-img-top {
        object-fit: cover;
        width: 100%;
        height: 250px;
        margin-left: auto;
        margin-right: auto;
    }
</style>
@endsection

@section('content')
<div class="mt-3 text-white">
    <a href="/berita">Semua Berita</a> > <a href="#">{{ $product_news->title }}</a>
</div>

<div class="text-white mt-4">
    <h3><span>{{ $product_news->title }}</span></h3>
    <p><span class="badge badge-warning">{{ $product_news->product->title }}</span></p>
    <p><small>{{ $product_news->created_at->format('d M Y') }}</small></p>
</div>

<div class="row mt-4">
    <div class="col-md-9">
        @if($product_news->featured_image)
        <img src="{{ $product_news->featured_image->url }}" width="100%" />
        @endif
        <div class="card mt-4">
            <div class="card-body">
                {!! $product_news->content !!}
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <p><strong>Berita Terkait</strong></p>
                @forelse($related_news as $news)
                
                @empty
                Belum ada
                @endforelse
            </div>
        </div>
    </div>
</div>

@endsection