function hideProjectPictures() {
  const elements = document.querySelectorAll('.project-picture');
  
  elements.forEach(el => {
    el.style.display = 'none';
  });
}

function displaySection(element) {
	if(element.innerHTML=='View All Projects') {
		element.innerHTML = 'Close';
		hideProjectPictures();
		const parent = element.parentElement;
		const elements = parent.querySelectorAll('.project-picture');
		elements.forEach(el => {
			el.style.display = 'inline-flex';
		});
		element.scrollIntoView({ behavior: 'smooth' });
	} else {
		element.innerHTML = 'View All Projects';
		hideProjectPictures();
	}
}
function initializeSection() {
	hideProjectPictures();
//	const parent = document.getElementById('project-1');
//	const elements = parent.querySelectorAll('.project-picture');
//	elements.forEach(el => {
//		el.style.display = 'block';
//	});
}
function initializeTooltips() {
	document.querySelectorAll('.btn').forEach(el => {
	  el.setAttribute('data-bs-toggle', 'tooltip');
	  el.setAttribute('title', 'Click to view sample pictures');
	  new bootstrap.Tooltip(el);
	});
}

const counterEl = document.getElementById('carouselCounter');
const carouselEl = document.getElementById('projectCarousel');

function updateCounter(index, total) {
    counterEl.textContent = `${index + 1} of ${total}`;
}
document.addEventListener('DOMContentLoaded', initializeSection);
//document.addEventListener('DOMContentLoaded', initializeTooltips);
document.addEventListener('DOMContentLoaded', function () {

    const modalEl = document.getElementById('projectModal');
    const modal = new bootstrap.Modal(modalEl);
    const carouselInner = document.getElementById('projectCarouselInner');
    const modalTitle = document.getElementById('projectModalTitle');
    document.querySelectorAll('.view-pictures-btn').forEach(button => {

        button.addEventListener('click', function () {

            const project = this.closest('.projects');
            if (!project) return;

            // Get title
            const titleEl = project.querySelector('h3');
            modalTitle.textContent = titleEl ? titleEl.textContent : 'Project Images';

            // Find hidden images container
            const picturesContainer = project.querySelector('.project-pictures');
            if (!picturesContainer) return;

            const images = picturesContainer.querySelectorAll('img');

            // Clear previous carousel content
            carouselInner.innerHTML = '';

            images.forEach((img, index) => {

                const div = document.createElement('div');
                div.className = 'carousel-item' + (index === 0 ? ' active' : '');

                const newImg = document.createElement('img');
                newImg.src = img.src;
                newImg.className = 'img-fluid d-block mx-auto';

                div.appendChild(newImg);
                carouselInner.appendChild(div);
            });

			const total = images.length;
			updateCounter(0, total);

            modal.show();
        });
    });
    // Optional: clean up when modal closes
    modalEl.addEventListener('hidden.bs.modal', function () {
        carouselInner.innerHTML = '';
    });
	carouselEl.addEventListener('slid.bs.carousel', function (event) {
		const total = carouselInner.children.length;
		updateCounter(event.to, total);
	});

});