document.addEventListener('DOMContentLoaded', (event) => {
    const startButton = document.querySelector('.col-auto .btn-primary');
    const accordionButtons = document.getElementsByClassName('accordion-button');


    startButton.addEventListener('click', () => {
        const arrayOfElements = Array.from(accordionButtons);
        arrayOfElements.forEach((button,index) => {
            button.addEventListener('click', () => {
                const images = Array.from(document.getElementsByClassName('img-fluid'))
                images.forEach((img)=>{
                    img.addEventListener('click',(e)=>{
                        const modalImgContainer = Array.from(document.querySelectorAll('.modal-body.text-center'))[0]
                        const modalIMG = Array.from(modalImgContainer.children)[0]
                        console.log(modalIMG)
    
                        modalImgContainer.addEventListener('mousemove',(e)=>{

                            if(isMobileDevice()){

                                if(modalIMG.style.transform != 'scale(4)'){

                                    $("#imageModal .modal-content")[0].getBoundingClientRect()
                                    const x= e.clientX - $("#imageModal .modal-content")[0].getBoundingClientRect().left - (($("#imageModal .modal-body").outerWidth(true) - $("#imageModal .modal-body").width()) / 2);
                                    const y= e.clientY - $("#imageModal .modal-content")[0].getBoundingClientRect().top - $("#imageModal .modal-header").outerHeight(true);
                                    // modalIMG.style.transformOrigin = `${x/2}px ${y/2}px`
                                    
                                    modalIMG.style.transform = 'scale(4)'
                                    modalIMG.style.transformOrigin = `${x}px ${y}px`;

                                } else {
                                    modalIMG.style.transform = 'scale(1)';
                                    // modalIMG.style.transformOrigin = `0px 0px`
                                }


                            } else {
                                $("#imageModal .modal-content")[0].getBoundingClientRect()
                                const x= e.clientX - $("#imageModal .modal-content")[0].getBoundingClientRect().left - (($("#imageModal .modal-body").outerWidth(true) - $("#imageModal .modal-body").width()) / 2);
                                const y= e.clientY - $("#imageModal .modal-content")[0].getBoundingClientRect().top - $("#imageModal .modal-header").outerHeight(true);
                                // modalIMG.style.transformOrigin = `${x/2}px ${y/2}px`
                                
                                modalIMG.style.transform = 'scale(2)'
                                modalIMG.style.transformOrigin = `${x}px ${y}px`;

                            }
                            
                        })
    
                        modalImgContainer.addEventListener('mouseout',(e)=>{

                            if(isMobileDevice()){
                                if(modalIMG.style.transform != 'scale(4)'){
                                    modalIMG.style.transform = 'scale(1)'
                                }
                            } else {

                                modalIMG.style.transform = 'scale(1)'
                                
                            }

                        })
                    })
                })
            });
        });

    });
});

function isMobileDevice() {
    return (
        typeof window.ontouchstart !== "undefined" ||
        navigator.userAgent.match(/Mobi|Android|iPhone|iPad|iPod/i)
    );
}
