'use strict';

// slider gallery modal
const gallery = new Swiper('.gallery__slider', {
    spaceBetween: 100,
  
    pagination: {
      el: '.swiper-pagination',
    },
  
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  
    scrollbar: {
      el: '.swiper-scrollbar',
    },
});

let paginationButtons = document.querySelectorAll('.gallery-pagination__item');

paginationButtons.forEach(button => {
    let index = button.dataset.countImg;

    button.onclick = function () {
        gallery.slideTo(index);
    }
})

// open gallery
let detailImage= document.querySelectorAll('.detail__image');
detailImage.forEach(button => {
    let index = button.dataset.countImg;

    button.onclick = function () {
        gallery.slideTo(index);
        
        document.querySelector('.gallery').classList.add('active');
    }
})

// close gallery

document.querySelector('.gallery__close').onclick = function () {
    document.querySelector('.gallery').classList.remove('active');
}
// slider gallery modal

// slider gallery main phone

// createGalleryPhone('.detail__images', '.detail-images__wrapper', '.detail__image', 980);

const detailPhone = new Swiper('.detail__images-phone', {
    spaceBetween: 100,
  
    pagination: {
      el: '.swiper-pagination',
    },
  
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  
    scrollbar: {
      el: '.swiper-scrollbar',
    },
});

let detailImagesPhones = document.querySelectorAll('.detail-images-phone__image-block');

detailImagesPhones.forEach(button => {
    button.onclick = function (e) {
        let index = button.dataset.countImg;

        gallery.slideTo(index);
        
        document.querySelector('.gallery').classList.add('active');
    }
})

// slider gallery main phone

// detail catalog
const detailCatalot = new Swiper('.detail__catalot', {
    // Navigation arrows
    navigation: {
      nextEl: '.detail-catalot-control__button.next',
      prevEl: '.detail-catalot-control__button.prev',
    },
    breakpoints: {
        1600: {
            slidesPerView: 4,
        },
        1200: {
            slidesPerView: 3,
        },
        780: {
            slidesPerView: 2,
        },
        100: {
            slidesPerView: 1.1,
            spaceBetween: 20
        },
    }


});
// detail catalog