@model List<WebApplication2.Models.ViewModels.BeritaViewModel>

    @{
    Layout = "~/Views/WebNew/Shared/_Layout.cshtml";

    ViewData["Title"] = "Berita";
    }

    @section Style {
    <link rel="stylesheet" href="~/webnew/css/Berita/Berita.css" asp-append-version="true" />
    }

    @await Html.PartialAsync("Section/_Hero", "Berita")

    <div class="container mt-5">

        <div class="row mb-4">
            <div class="col-md-6">
                <input type="text" id="search" class="form-control" placeholder="Cari Berita...">
            </div>
            <div class="col-md-6">
                <input type="date" id="filterDate" class="form-control">
            </div>
        </div>


        <div class="row" id="beritaList"></div>

    </div>

    <script>
        function formatTanggal(dateStr) {
            const date = new Date(dateStr);
            return date.toLocaleDateString("en-US", {
                year: "numeric",
                month: "long",
                day: "numeric"
            });
        }

        function loadBerita() {

            fetch('/Berita/GetBerita')
                .then(res => res.json())
                .then(data => {

                    renderBerita(data);

                    document.getElementById("search").addEventListener("keyup", function () {
                        const keyword = this.value.toLowerCase();
                        const filtered = data.filter(x =>
                            x.judul.toLowerCase().includes(keyword) ||
                            x.deskripsi.toLowerCase().includes(keyword)
                        );
                        renderBerita(filtered);
                    });

                    document.getElementById("filterDate").addEventListener("change", function () {
                        const date = this.value;
                        const filtered = data.filter(x => x.tanggal === date);
                        renderBerita(filtered);
                    });

                });
        }

        function renderBerita(list) {

            let html = "";

            list.forEach(item => {
                html += `
                        <div class="col-md-4 mb-4">
                            <div class="card h-100 shadow-sm">

                                <img src="${Array.isArray(item.gambar) ? item.gambar[0] : item.gambar}"
                                     class="card-img-top">

                                <div class="card-body">
                                    <small class="text-muted">${formatTanggal(item.tanggal)}</small>

                                    <h6 class="fw-bold mt-2">${item.judul}</h6>

                                    <p class="text-muted small">
                                        ${item.deskripsi}
                                    </p>

                                    <a href="/Berita/Detail?id=${item.id}" class="text-primary fw-semibold">
                                        Baca Selengkapnya
                                    </a>
                                </div>

                            </div>
                        </div>
                    `;
            });

            document.getElementById("beritaList").innerHTML = html;
        }

        document.addEventListener("DOMContentLoaded", loadBerita);
    </script>