let currentSlide = 0;
let slides = document.querySelectorAll(".hero-slide");
let wrapper = document.getElementById("hero-wrapper");
let dotsContainer = document.getElementById("hero-dots");

function initSlider() {
    slides = document.querySelectorAll(".hero-slide");

    slides.forEach((_, i) => {
        let dot = document.createElement("span");
        dot.onclick = () => goToSlide(i);
        dotsContainer.appendChild(dot);
    });

    updateSlider();
}

function updateSlider() {
    wrapper.style.transform = `translateX(-${currentSlide * 100}%)`;

    let dots = dotsContainer.querySelectorAll("span");
    dots.forEach(d => d.classList.remove("active"));
    dots[currentSlide].classList.add("active");
}

function nextSlide() {
    currentSlide = (currentSlide + 1) % slides.length;
    updateSlider();
}

function prevSlide() {
    currentSlide = (currentSlide - 1 + slides.length) % slides.length;
    updateSlider();
}

function goToSlide(index) {
    currentSlide = index;
    updateSlider();
}


setInterval(nextSlide, 6000);

document.addEventListener("DOMContentLoaded", initSlider);


//kompetensi

const swiper = new Swiper(".mySwiper", {
    slidesPerView: 4,
    spaceBetween: 20,
    loop: true,

    speed: 5000,

    autoplay: {
        delay: 0,
        disableOnInteraction: false,
    },

    freeMode: true,
    freeModeMomentum: false,

    breakpoints: {
        320: { slidesPerView: 1.2 },
        576: { slidesPerView: 2 },
        768: { slidesPerView: 3 },
        1200: { slidesPerView: 4 }
    }


});


//data capaian

document.addEventListener("DOMContentLoaded", function () {

    const counters = document.querySelectorAll('.counter');

    const runCounter = (counter) => {
        const target = +counter.getAttribute('data-target');
        let count = 0;

        const duration = 1500;
        const stepTime = 16;
        const totalSteps = duration / stepTime;
        const increment = target / totalSteps;

        const update = () => {
            count += increment;

            if (count < target) {
                counter.innerText = Math.floor(count).toLocaleString();
                requestAnimationFrame(update);
            } else {
                counter.innerText = target.toLocaleString();
            }
        };

        update();
    };

    const observer = new IntersectionObserver((entries, obs) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                runCounter(entry.target);
                obs.unobserve(entry.target);
            }
        });
    }, { threshold: 0.5 });

    counters.forEach(counter => observer.observe(counter));

});


const ctx = document.getElementById('chartSampel').getContext('2d');

const gradientBlue = ctx.createLinearGradient(0, 0, 0, 350);
gradientBlue.addColorStop(0, 'rgba(59, 130, 246, 0.25)');
gradientBlue.addColorStop(1, 'rgba(59, 130, 246, 0.02)');

const gradientTeal = ctx.createLinearGradient(0, 0, 0, 350);
gradientTeal.addColorStop(0, 'rgba(20, 184, 166, 0.25)');
gradientTeal.addColorStop(1, 'rgba(20, 184, 166, 0.02)');

new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Tahun 2025', 'Tahun 2024', 'Tahun 2023', 'Tahun 2022'],
        datasets: [
            {
                label: 'Internal',
                data: [1909, 1007, 1567, 1837],
                borderColor: '#3b82f6',
                backgroundColor: gradientBlue,
                fill: true,
                tension: 0.5,
                borderWidth: 2,
                pointRadius: 0,
                pointHoverRadius: 6,
                pointBackgroundColor: '#fff',
                pointBorderColor: '#3b82f6',
                pointBorderWidth: 2
            },
            {
                label: 'Eksternal',
                data: [9078, 5828, 8069, 8554],
                borderColor: '#14b8a6',
                backgroundColor: gradientTeal,
                fill: true,
                tension: 0.5,
                borderWidth: 2,
                pointRadius: 0,
                pointHoverRadius: 6,
                pointBackgroundColor: '#fff',
                pointBorderColor: '#14b8a6',
                pointBorderWidth: 2
            },
            {
                label: 'Total',
                data: [10987, 6835, 9636, 10391],
                borderColor: '#9ca3af',
                backgroundColor: 'rgba(156, 163, 175, 0.1)',
                fill: true,
                tension: 0.5,
                borderWidth: 2,
                pointRadius: 0,
                pointHoverRadius: 6,
                pointBackgroundColor: '#fff',
                pointBorderColor: '#9ca3af',
                pointBorderWidth: 2
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,

        interaction: {
            mode: 'index',
            intersect: false
        },

        plugins: {
            legend: {
                position: 'top',
                labels: {
                    usePointStyle: true,
                    pointStyle: 'circle',
                    padding: 20
                }
            },

            tooltip: {
                backgroundColor: '#ffffff',
                titleColor: '#000',
                bodyColor: '#000',
                borderColor: '#e5e7eb',
                borderWidth: 1,
                padding: 10,
                displayColors: false,
                callbacks: {
                    label: function (context) {
                        return context.dataset.label + ': ' + context.raw.toLocaleString();
                    }
                }
            }
        },

        scales: {
            x: {
                grid: {
                    display: false
                },
                ticks: {
                    color: '#9ca3af'
                }
            },
            y: {
                beginAtZero: true,
                grid: {
                    color: 'rgba(0,0,0,0.05)',
                    drawBorder: false
                },
                ticks: {
                    color: '#9ca3af',
                    callback: function (value) {
                        return value.toLocaleString();
                    }
                }
            }
        }
    }
});


//mitra

function loadLogo() {
    fetch('/webnew/json/mitra.json')
        .then(res => res.json())
        .then(data => {

            let html = "";

            data.forEach(row => {

                html += `
                  <div class="logo-track move-${row.direction}">
                      ${renderGroup(row.logos)}
                      ${renderGroup(row.logos)}                                                                    
                  </div>
                                            `;
            });

            document.querySelector(".logo-slider").innerHTML = html;
        });
}

function renderGroup(logos) {
    let group = '<div class="logo-group">';

    logos.forEach(src => {
        group += `<img src="${src}">`;
    });

    group += '</div>';
    return group;
}

document.addEventListener("DOMContentLoaded", loadLogo);


//berita

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

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

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

            const featured = data[0];

            document.getElementById("featured-berita").innerHTML = `
                                                        <img src="${Array.isArray(featured.gambar) ? featured.gambar[0] : featured.gambar}" class="featured-img">

                                                        <small class="text-muted d-block mt-2">${formatTanggal(featured.tanggal)}</small>

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

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

                                                        <a href="/WebNew/Berita/Detail?id=${featured.id}" class="text-primary fw-semibold">
                                                            Baca Selengkapnya
                                                        </a>
                                                    `;

            let sidebarHTML = "";

            data.slice(1, 5).forEach(item => {
                sidebarHTML += `
                                <div class="d-flex landing-item mb-3">
                                 <img src="${Array.isArray(item.gambar) ? item.gambar[0] : item.gambar}" class="landing-img">
                                 <div>
                                    <small class="text-muted">${formatTanggal(item.tanggal)}</small>

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

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

                                </div>
                                `;
                                                               
            });

            document.getElementById("sidebar-berita").innerHTML = sidebarHTML;
        });
}

document.addEventListener("DOMContentLoaded", loadLandingBerita);

function loadVideoPreview() {

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

            let html = "";

            data.slice(0, 2).forEach(item => {
                html += `
                    <div class="col-md-5">

                        <div class="video-embed">
                           <iframe
                               src="https://www.youtube.com/embed/${item.youtube}"
                               frameborder="0"
                               allowfullscreen>
                           </iframe>
                        </div>

                    </div>
                    `;
            });

            document.getElementById("video-preview").innerHTML = html;
        });
}

document.addEventListener("DOMContentLoaded", loadVideoPreview);


//galeri
function loadGaleriPreview() {

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

            let html = "";

            data.forEach(item => {

                html += `
                    <div class="galeri-item">
                        <img src="${item.gambar}" alt="${item.judul}">
                    </div>
                    `;

            });

            document.getElementById("galeri-preview").innerHTML = html;

        });
}

document.addEventListener("DOMContentLoaded", loadGaleriPreview);