@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: #338b94 !important;
    }
        
    .btn-select {
        padding-left: 15px;
        padding-bottom: 15px;
    }
</style>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
@endsection

@section('content')
<div class="text-center text-white mt-5">
    <h3>BERITA</h3>
</div>

<div class="row d-flex mt-3" data-masonry='{"percentPosition": true }'>
    @foreach ($product_news as $news)
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="card m-2">
            <input type="hidden" value="{{$news->id}}" id="news_id">
            <a href="/berita/{{ $news->slug }}">
                <img class="card-img-top" src="{{$news->featured_image ? $news->featured_image->getUrl() : url('/img/default.jpeg') }}" alt="Card image" style="width:100%; height: 150px">
            </a>
            <div class="card-body">
                <h4 class="card-title"><a href="/berita/{{ $news->slug }}">{{$news->title}}</a></h4>
                <p class="card-text">{!! substr($news->content, 0, 100); !!}..</p>
                <p><a href="/berita/{{ $news->slug }}">Lihat selengkapnya</a></p>
            </div>
        </div>
    </div>
    @endforeach
</div>
</div>
@endsection