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

function loadBerita() {

    fetch('/WebNew/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="/WebNew/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);