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

<div class="rounded-3 container mb-4 mt-5 mt-4 bg-white p-3 px-3">

    <div class="row">

        <div class="col-md-8">

            <small class="text-muted" id="tanggal"></small>

            <h3 class="fw-bold mt-2" id="judul"></h3>

            <div id="slider" class="slider my-3"></div>

            <p id="isi" style="line-height:1.7;"></p>

        </div>

        <div class="col-md-4">

            <div class="card sidebar-card p-3 shadow-sm">
                <h6 class="fw-semibold mb-3">Baca Artikel Lainnya</h6>
                <div id="sidebar"></div>
            </div>

        </div>

    </div>

</div>

<script>
    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(`/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('/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="/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();
    });
</script>