@extends('homepage.layout')
@section('content')
    <style>
        body {
            background-color: green;
        }

        section {
            background-color: #033e3a;
        }
    </style>
    <style>
        .news-card {
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .news-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        /* .news-card img:hover {
                    transform: rotate(10deg);
                    transform: scale(1.5);
                } */

        .news-info {
            padding: 20px;
        }

        .news-title {
            text-decoration: none;
            font-size: 1em;
            margin-bottom: 10px;
        }

        .news-date {
            text-decoration: none;
            font-size: 0.8em;
            color: #888;
            margin-bottom: 10px;
        }

        .news-description {
            font-size: 0.8em;
            line-height: 1.6;
            color: #333;
            margin-bottom: 15px;
        }

        .read-more {
            display: inline-block;
            background-color: #3498db;
            color: #fff;
            padding: 8px 16px;
            text-decoration: none;
            border-radius: 4px;
            font-size: 12px;
        }
    </style>
    <div>
        <section>
            <div class="informasi">
                <center>
                    <h3 style="color: white;"><b>Berita</b></h3>
                </center>
                <br>
                <div class="container" style="width: 80%;">

                    @if ($data->count() != 0)
                        @foreach ($data as $a)
                            <a href="/berita/{{ $a->id }}/show" style="text-decoration: none;">
                                <div class="col-sm-12 col-md-4">
                                    <div class="news-card">
                                        <img src="{{ $a->foto }}" alt="News Image">
                                        <div class="news-info">
                                            <h3 class="news-title">{{ substr($a->judul, 0, 97) }}</h3>
                                            <p class="news-date">Tanggal: {{ $a->created_at->format('d F Y') }}</p>
                                            {{-- <p class="news-description">{{ substr($a->isi, 0, 97) }}...</p> --}}
                                            <br>
                                            <span style="font-size: 12px;">Baca Selengkapnya</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        @endforeach
                    @else
                        <center>
                            <h3 style="color: white;">Tidak Ada Berita</h3>
                        </center>
                    @endif
                </div>
            </div>
        </section>
    </div>
    <!--== Blog Classic Post Start ==-->
@endsection