function getQueryParam(name) {
    return new URLSearchParams(window.location.search).get(name);
}

function formatTanggal(dateStr) {
    return new Date(dateStr).toLocaleDateString("id-ID", {
        day: "numeric",
        month: "long",
        year: "numeric"
    });
}

function loadDetail() {

    const id = getQueryParam("id");

    fetch(`/WebNew/Berita/GetDetail?id=${id}`)
        .then(res => {
            if (!res.ok) throw new Error("Data tidak ditemukan");
            return res.json();
        })
        .then(data => {

            if (!data) {
                document.getElementById("judul").innerText = "Data tidak ditemukan";
                return;
            }

            document.getElementById("judul").innerText = data.judul || "-";
            document.getElementById("tanggal").innerText = formatTanggal(data.tanggal || "");

            renderSlider(data.gambar);

            document.getElementById("isi").innerHTML =
                (data.isi || "").replace(/\n/g, "<br>");
        })
        .catch(err => {
            console.error(err);
            document.getElementById("judul").innerText = "Gagal load berita";
        });
}

function loadSidebar() {

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

            let html = "";

            data.slice(0, 4).forEach(item => {

                let gambar = Array.isArray(item.gambar) ? item.gambar[0] : item.gambar;

                html += `
                        <div class="sidebar-item">
                            <img src="${Array.isArray(item.gambar) ? item.gambar[0] : item.gambar}" class="sidebar-img">

                            <div class="sidebar-content">
                                <small class="sidebar-date">${formatTanggal(item.tanggal)}</small>

                                <div class="sidebar-title">${item.judul}</div>

                                <a href="/WebNew/Berita/Detail?id=${item.id}" class="sidebar-link">
                                    Baca Selengkapnya
                                </a>
                            </div>
                        </div>
                    `;
            });

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

let currentIndex = 0;
let sliderImages = [];

function renderSlider(images) {

    if (!images || images.length === 0) return;

    sliderImages = images;
    currentIndex = 0;

    const slider = document.getElementById("slider");

    slider.innerHTML = `
            <img id="slide-img" src="${images[0]}">

            ${images.length > 1 ? `
                <button class="slider-btn prev" onclick="prevSlide()">‹</button>
                <button class="slider-btn next" onclick="nextSlide()">›</button>
            ` : ""}
        `;
}

function nextSlide() {
    currentIndex = (currentIndex + 1) % sliderImages.length;
    document.getElementById("slide-img").src = sliderImages[currentIndex];
}

function prevSlide() {
    currentIndex = (currentIndex - 1 + sliderImages.length) % sliderImages.length;
    document.getElementById("slide-img").src = sliderImages[currentIndex];
}

document.addEventListener("DOMContentLoaded", function () {
    loadDetail();
    loadSidebar();
});