'use strict';

const gymSwiper = new Swiper('.gym-swiper', {
    direction: 'horizontal',
    breakpoints: {
        320:{
            slidesPerView: 1.20,
            spaceBetween: 24,
        },
        996: {
            slidesPerView: 3
        },
    }
});



const reviewsSwiper = new Swiper('.reviews-swiper', {
    spaceBetween: 24,
    // If we need pagination
    pagination: {
        el: '.swiper-pagination',
    },

    // Navigation arrows
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

    // And if we need scrollbar
    scrollbar: {
        el: '.swiper-scrollbar',
    },
    runCallbacksOnInit: true,
    // === new change
    on: {
        slideChange: function(){
            let offer = document.querySelector('#numberReviews');
            offer.innerHTML = (this.activeIndex +  1);
        }
    }
})

// gymSwiper.destroy();

// how

function howPc() {
    let itemButtons = document.querySelectorAll('.how-control__item');

    itemButtons.forEach((button) => {
        let num = button.dataset.num;

        button.onclick = function name(params, index) {

            let activeContent = document.querySelector('.how__content').querySelector('.active'),
                activeButton = document.querySelector('.how__control').querySelector('.active');

            if (activeContent.dataset.num == button.dataset.num) return;
            
            activeContent.style.height = '0px';
            activeContent.classList.remove('active');
            activeButton.classList.remove('active');

            let newActive = document.querySelector(`.how-content__item-block[data-num='${num}']`),
                newButton = document.querySelector(`.how-control__item[data-num='${num}']`);
            

            setTimeout(() => {
                let newHeight = newActive.querySelector('.how-content__item').offsetHeight + 'px';
                newActive.style.height = newHeight;
                newActive.classList.add('active');
                newButton.classList.add('active');
            }, 300);
        }        
    })
}

howPc();


// function howPc() {
//     let itemButtons = document.querySelectorAll('.how-control__item'),
//         itemBlocks = document.querySelectorAll('.how-content__item-block');

//     itemButtons.forEach((button, index) => {
//         let block = itemBlocks[index];

//         button.onclick = function () {
//             let activeContent = document.querySelector('.how__content').querySelector('.active'),
//                 activeButton = document.querySelector('.how__control').querySelector('.active');
            
//             activeContent.style.height = '0px';
//             activeContent.classList.remove('active');
//             activeButton.classList.remove('active');

//             setTimeout(() => {
//                 let newHeight = block.querySelector('.how-content__item').offsetHeight + 'px';
//                 block.style.height = newHeight;
//                 block.classList.add('active');
//                 button.classList.add('active');
//             }, 300);
//         }
//     })
// }