window.addEventListener('resize', () => {
  setPosition()
})

function setPosition() {
  const currentWidth = $('#nav-1').find('li a.active').parent('li').width();
  const current = $('li a.active').position();
  $('#nav-1 .slide1').css({ left: +current.left, width: currentWidth });
}

$(document).ready(function () {
  setPosition()
  $('.agile-approach-heading li').bind('click', function (e) {
    e.preventDefault();
    $('.agile-approach-heading li').removeClass('active');
    const target = $(this).attr('data-id');
    $(this).addClass('active');
    $('html, body')
      .stop()
      .animate(
        {
          scrollTop: $(target).offset().top - 100,
        },
        600
      );
    return false;
  });

  // Slick Slider

  $('.gantt-slider-1 ul, .gantt-slider-2 ul').slick({
    centerMode: true,
    centerPadding: 60,
    adaptiveHeight: true,
    slidesToShow: 1,
    responsive: [
      {
        breakpoint: 992,
        settings: {
          centerMode: false,
          slidesToShow: 1,
        },
      },
    ],
  });
  $('#nav-1 a').on('click', function () {
    const tab_id = $(this).attr('data-tab');
    const position = $(this).parent().position();
    const width = $(this).parent().width();
    $('#nav-1 .slide1').css({ opacity: 1, left: +position.left, width: width });
    $('.tab-content').removeClass('active');
    $('#' + tab_id).addClass('active');
    $('#nav-1 a').removeClass('active');
    $(this).addClass('active');

    $('.gantt-slider-1 ul, .gantt-slider-2 ul').slick('refresh');
  });

  function scrollFixedAside() {
    const scrollTop = $(window).scrollTop();

    $('.agile-approach-list li').each(function (i) {
      if ($(this).offset().top - 100 <= scrollTop + 200) {
        $('.agile-approach-heading li.active').removeClass('active');
        $('.agile-approach-heading li').eq(i).addClass('active');
      }
    });
  }

  $(window).scroll(function () {
    scrollFixedAside();
  });
  $(window).resize(function () {
    scrollFixedAside();
  });
});