document.addEventListener("DOMContentLoaded", function () {
// Tab navigation
const tabsContainer = document.querySelector(".tabs");
const tabButtons = document.querySelectorAll(".tab-button");
const leftArrow = document.createElement("button");
const rightArrow = document.createElement("button");
leftArrow.className = "arrow left";
rightArrow.className = "arrow right";
leftArrow.textContent = "<";
rightArrow.textContent = ">";
if (tabButtons.length > 4) {
tabsContainer.parentNode.insertBefore(leftArrow, tabsContainer);
tabsContainer.parentNode.appendChild(rightArrow);
let scrollAmount = 0;
const maxScroll = tabsContainer.scrollWidth - tabsContainer.clientWidth;
leftArrow.addEventListener("click", () => {
scrollAmount = Math.max(scrollAmount - 100, 0);
tabsContainer.scrollTo({ left: scrollAmount, behavior: "smooth" });
});
rightArrow.addEventListener("click", () => {
scrollAmount = Math.min(scrollAmount + 100, maxScroll);
tabsContainer.scrollTo({ left: scrollAmount, behavior: "smooth" });
});
}
// Tabs activation
tabButtons.forEach((button) => {
button.addEventListener("click", function () {
document.querySelectorAll(".tab-button").forEach((btn) => btn.classList.remove("active"));
document.querySelectorAll(".tab-content").forEach((content) => content.classList.remove("active"));
button.classList.add("active");
const tabId = button.getAttribute("data-tab");
document.getElementById(tabId).classList.add("active");
});
});
// Image modal functionality
document.querySelectorAll(".hotel-images").forEach((imageContainer, index) => {
const images = Array.from(imageContainer.querySelectorAll("img"));
if (images.length > 5) {
const viewMoreButton = document.createElement("button");
viewMoreButton.className = "view-more-button";
viewMoreButton.textContent = "View More";
imageContainer.appendChild(viewMoreButton);
const modal = document.createElement("div");
modal.className = "image-modal";
modal.innerHTML = `
×
![Image Preview]()
`;
document.body.appendChild(modal);
let currentImageIndex = 0;
const modalImage = modal.querySelector(".modal-image");
const closeModal = () => modal.classList.remove("open");
const showImage = (index) => {
currentImageIndex = index;
modalImage.src = images[index].src;
};
viewMoreButton.addEventListener("click", () => {
modal.classList.add("open");
showImage(5);
});
modal.querySelector(".close").addEventListener("click", closeModal);
modal.querySelector(".prev").addEventListener("click", () => {
if (currentImageIndex > 0) showImage(currentImageIndex - 1);
});
modal.querySelector(".next").addEventListener("click", () => {
if (currentImageIndex < images.length - 1) showImage(currentImageIndex + 1);
});
modal.addEventListener("click", (e) => {
if (e.target === modal) closeModal();
});
}
});
});
