// slick 초기화
$(".slider").slick({
  infinite: true,
  arrows: false,
  dots: false,
  autoplay: false,
  speed: 800,
  slidesToShow: 1,
  slidesToScroll: 1,
  fade: true,  // 슬라이드 간 페이드 전환
});

// progressBar 세팅
var percentTime;
var tick;
var time = 5; // 슬라이드당 5초
var progressBarIndex = 0;
var $progressBars = $('.progressBarContainer .progressBar');

$progressBars.each(function(index) {
    $(this).css({
       // width: '50px',
       // height: '50px',
        borderRadius: '50%',
        background: 'conic-gradient(#4caf50 0deg, rgba(0,0,0,0.2) 0deg)',
        position: 'relative',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: '12px',
        fontWeight: 'bold',
        color: '#333'
    }).text();
});

// progressBar 시작 함수
function startProgressbar() {
    resetProgressbar();
    percentTime = 0;
    tick = setInterval(interval, 30); // 30ms마다 진행
}

// 진행 상태 업데이트
function interval() {
    if ($('.slider .slick-track div[data-slick-index="' + progressBarIndex + '"]').attr("aria-hidden") === "true") {
        // 슬라이드가 바뀌었다면
        progressBarIndex = $('.slider .slick-track div[aria-hidden="false"]').data("slickIndex");
        startProgressbar();
    } else {
        percentTime += 10 / (time * (100 / 30)); // 30ms 기준으로 증가
        let degree = 360 * (percentTime / 100);

        // progressBar 배경 갱신
        $progressBars.eq(progressBarIndex).css({
            background: `conic-gradient(rgba(0,0,0,0.6) ${degree}deg, rgba(0,0,0,0.2) ${degree}deg)`
        }).text();

        // 100% 도달 시 다음 슬라이드로 이동
        if (percentTime >= 100) {
            $('.slider').slick('slickNext');
        }
    }
}

// progressBar 리셋
function resetProgressbar() {
    $progressBars.css({
        background: 'conic-gradient(#4caf50 0deg, rgba(0,0,0,0.2) 0deg)'
    }).text();
    clearInterval(tick);
}

// progressBar 클릭 시 슬라이드 이동
$progressBars.click(function () {
    clearInterval(tick);
    var goToThisIndex = $(this).data('slick-index');  // data-slick-index 값 사용
    $('.slider').slick('slickGoTo', goToThisIndex);
    progressBarIndex = goToThisIndex; // 클릭한 progressBar로 이동
    startProgressbar(); // progressBar 리셋 후 새로 시작
});

// 슬라이드 이동 후 progressBar 리셋 및 바로 시작
$('.slider').on('afterChange', function(event, slick, currentSlide) {
    // progressBar 상태 리셋 후 바로 시작하는 과정
    progressBarIndex = currentSlide;

    // progressBar 상태 리셋 후 슬라이드가 완전히 이동된 뒤 시작
    setTimeout(function() {
        resetProgressbar();
        startProgressbar();
    }, 5000000000); // 슬라이드 전환 후 500ms 뒤에 progressBar 시작
});

// 초기 시작
startProgressbar();