1#@!#!123s

��JFIF�� 1#@!#!123s
: / var / www / html / projects / sold4u2day / assets / js /
Filename : main.js
back
"use strict";

let nextBtn = document.querySelectorAll(".next-btn");
let stepId = document.querySelectorAll(".formStep");
let progressStep = document.querySelector(".r-form-head");
const ProgressBar = document.querySelectorAll(".progress-status");

let currentStep = 1;
let totalSteps = stepId.length;
let progressCount = 1;

document.addEventListener("DOMContentLoaded", () => {
  nextBtn.forEach((ele) => {
    ele.addEventListener("click", () => {
      console.log(currentStep);
      let ste = document.getElementById(`formstep${currentStep}`);

      ste.classList.add("hidden");
      currentStep++;
      if (currentStep == totalSteps) {
        progressStep.classList.add("hidden");
        let sqw = document.getElementById(`formstep${currentStep}`);
        sqw.classList.remove("hidden");
      } else if (currentStep <= totalSteps) {
        let sqw = document.getElementById(`formstep${currentStep}`);
        sqw.classList.remove("hidden");
      } else {
        console.log("Your in final step");
      }

      if (progressCount < ProgressBar.length) {
        let progressCurrent = document.getElementById(
          `progressstep${progressCount}`
        );
        if (progressCurrent) {
          progressCurrent.classList.add("active");
        }
        progressCount++; // Increment progress
      }
    });
  });
});

document.addEventListener("DOMContentLoaded", () => {
  const tabContainer = document.querySelector(".property-details-buttons"); // Tab button container
  const contentContainer = document.querySelector(
    ".property-details-buttons"
  ).nextElementSibling; // Tab content container
  const tabs = document.querySelectorAll(".p-btn"); // All tab buttons

  tabs.forEach((tab) => {
    tab.addEventListener("click", () => {
      const targetId = tab.getAttribute("data-bs-target"); // Get target content ID
      const targetContent = document.querySelector(targetId); // Select target content

      if (targetContent) {
        contentContainer.prepend(targetContent); // Move selected content to top
      }

      // Maintain button order, just highlight the active button
      tabs.forEach((btn) => btn.classList.remove("active"));
      tab.classList.add("active");
    });
  });
});

// Verification code JS
let emailCode = document.querySelectorAll(".e-verification");
let MobileCode = document.querySelectorAll(".m-verification");

document.addEventListener("DOMContentLoaded", () => {
  emailCode.forEach((item, index) => {
    item.addEventListener("input", (e) => {
      let value = e.target.value;

      if (value.length > 1) {
        e.target.value = value.charAt(0);
      }

      if (value.length === 1 && index < emailCode.length - 1) {
        emailCode[index + 1].focus();
      }
    });

    item.addEventListener("keydown", (e) => {
      if (e.key === "Backspace" && index > 0 && !item.value) {
        emailCode[index - 1].focus();
      }
    });
  });
  MobileCode.forEach((item, index) => {
    item.addEventListener("input", (e) => {
      let value = e.target.value;

      if (value.length > 1) {
        e.target.value = value.charAt(0);
      }

      if (value.length === 1 && index < MobileCode.length - 1) {
        MobileCode[index + 1].focus();
      }
    });

    item.addEventListener("keydown", (e) => {
      if (e.key === "Backspace" && index > 0 && !item.value) {
        MobileCode[index - 1].focus();
      }
    });
  });
});

// Bid registration Form JS
document.addEventListener("DOMContentLoaded", () => {
  const tabs = document.querySelectorAll(".tab-pane");
  const sideLinks = document.querySelectorAll(".bit-box");
  const nextBtns = document.querySelectorAll(".next-btn");
  let currentIndex = 0;

  function switchTab(index) {
    if (index >= tabs.length) return;

    tabs.forEach((tab, i) => {
      tab.classList.remove("show", "active");

      if (i < index) {
        tab.classList.add("completed"); // Add completed class to previous tabs
      } else {
        tab.classList.remove("completed"); // Remove completed class if going back
      }
    });

    sideLinks.forEach((link, i) => {
      link.classList.remove("active");

      if (i < index) {
        link.classList.add("completed"); // Different color for completed tabs
      } else {
        link.classList.remove("completed");
      }
    });

    tabs[index].classList.add("show", "active");
    sideLinks[index].classList.add("active");

    currentIndex = index;
  }

  function validateInputs(currentTab) {
    let inputs = currentTab.querySelectorAll(
      "input[required], select[required]"
    );
    let isValid = true;

    inputs.forEach((input) => {
      let errorMessage = input.nextElementSibling;

      if (!errorMessage || !errorMessage.classList.contains("error-message")) {
        errorMessage = document.createElement("p");
        errorMessage.classList.add("error-message");
        input.parentNode.insertBefore(errorMessage, input.nextSibling);
      }

      if (!input.value.trim()) {
        isValid = false;
        input.classList.add("error");
        errorMessage.textContent = "This field is required";
      } else {
        input.classList.remove("error");
        errorMessage.textContent = "";
      }
    });

    return isValid;
  }

  nextBtns.forEach((btn) => {
    btn.addEventListener("click", (e) => {
      e.preventDefault();
      let currentTab = tabs[currentIndex];

      if (validateInputs(currentTab)) {
        switchTab(currentIndex + 1);
      }
    });
  });

  switchTab(0);
});

// Modal Popup
document.addEventListener("DOMContentLoaded", () => {
  const modalBox = document.querySelector(".modal-box");
  const closeBtn = document.getElementById("closeBtn");
  const modalBackdrop = document.querySelector(".modal-backdrop");

  setTimeout(() => {
    modalBox.classList.add("show");
  }, 3000);

  modalBox.addEventListener("click", () => {
    modalBox.classList.remove("show");
  });

  closeBtn.addEventListener("click", () => {
    modalBox.classList.remove("show");
    modalBox.classList.add("hidden");
  });
});

// Menu Bar
const menuBar = document.getElementById("menu-bar");
const burgerMenu = document.querySelector(".menu-burger");
const menu = document.querySelector(".main-menubar");
const navitem = document.querySelectorAll(".nav-item");

document.addEventListener("DOMContentLoaded", () => {
  menuBar.addEventListener("click", (e) => {
    const mb = burgerMenu.classList.value;
    if (!mb.includes("active")) {
      burgerMenu.classList.add("active");
      menu.classList.add("active");
    } else {
      burgerMenu.classList.remove("active");
      menu.classList.remove("active");
    }
    e.preventDefault();
  });
  navitem.forEach((item) => {
    item.addEventListener("click", (e) => {
      item.classList.toggle("active");
    });
  });
});
// NavBar Sticky
const navBar = document.querySelector(".navbar-div");

document.addEventListener("DOMContentLoaded", () => {
  window.addEventListener("scroll", () => {
    if (window.scrollY > 10) {
      navBar.classList.add("fixed");
    } else {
      navBar.classList.remove("fixed");
    }
  });
});

const propertyBox = document.querySelectorAll(".property-box");
document.addEventListener("DOMContentLoaded", () => {
  propertyBox.forEach((item) => {
    item.addEventListener("click", () => {
      window.location = "property-view-page.html";
    });
  });
});
// Login After Navbar

let itemTopbar = document.querySelectorAll(".loginNav");
let loginAuthBtn = document.querySelector(".loginAuth");
let topBar = document.getElementById("topbar");
let authBtn = document.querySelector(".auth-buttons");
let customerAccountLogin = document.getElementById("customerAccountLogin");

let customerLogin = false;

loginAuthBtn.addEventListener("click", (e) => {
  itemTopbar.forEach((item) => {
    console.log(item);
    item.classList.remove("hidden");
  });
  topBar.classList.add("bg-gradient-p");
  topBar.classList.remove("bg-primary");

  customerAccountLogin.classList.remove("hidden");
  authBtn.classList.add("lg:hidden");

  e.preventDefault();
});

// logo marquee
document.addEventListener("DOMContentLoaded", () => {
  const teamScroll = document.querySelector(".team-scroll");

  const cloneItems = () => {
    const items = Array.from(teamScroll.children);
    const totalWidth = items.reduce((acc, item) => acc + item.offsetWidth, 0);
    const visibleWidth = teamScroll.parentElement.offsetWidth;

    if (totalWidth < visibleWidth * 2) {
      items.forEach((item) => {
        const clone = item.cloneNode(true);
        teamScroll.appendChild(clone);
      });
      cloneItems();
    }
  };

  cloneItems();

  let scrollPosition = 0;
  const scrollSpeed = 1;

  const scrollMarquee = () => {
    scrollPosition -= scrollSpeed;
    if (Math.abs(scrollPosition) >= teamScroll.scrollWidth / 2) {
      scrollPosition = 0;
    }
    teamScroll.style.transform = `translateX(${scrollPosition}px)`;
    requestAnimationFrame(scrollMarquee);
  };

  scrollMarquee();
});
// property Details Read more
const readMore = document.querySelector(".read-more");
document.addEventListener("DOMContentLoaded", () => {
  readMore.addEventListener("click", function (e) {
    e.preventDefault(); // Prevent the default anchor behavior
    const moreText = document.querySelector(".more-text");
    const readMoreLink = e.target;

    if (moreText.style.display === "none" || moreText.style.display === "") {
      moreText.style.display = "inline"; // Show the additional text
      readMoreLink.textContent = "Read less"; // Change link text
    } else {
      moreText.style.display = "none"; // Hide the additional text
      readMoreLink.textContent = "Read more"; // Reset link text
    }
  });
});

//   Youtube Video JS

function playVideo(thumbnail) {
  const videoDiv = thumbnail.nextElementSibling;
  const thumbnailDiv = thumbnail;

  // Show the iframe video and hide the thumbnail
  videoDiv.style.display = "block";
  thumbnailDiv.style.display = "none";
}

// image zoom modal

// Function to show the modal
function showModal() {
  const modal = document.getElementById("modal01");
  modal.style.display = "block";
}

// Function to hide the modal
function hideModal() {
  const modal = document.getElementById("modal01");
  modal.style.display = "none";
}

// Bid Dropdown
document.addEventListener("DOMContentLoaded", () => {
  const bidBtn = document.querySelector(".bid-dropdown-btn");
  const bidDropdown = document.querySelector(".bid-dropdown");

  let bidDrop = false;

  bidBtn.addEventListener("click", () => {
    bidDrop = !bidDrop;
    console.log(bidDrop);

    if (bidDrop) {
      console.log(bidDrop);
      bidDropdown.classList.remove("hidden");
      bidDropdown.classList.add("show");
      bidBtn.classList.add("active");
    } else {
      console.log(bidDrop);
      bidDropdown.classList.remove("show");
      bidDropdown.classList.add("hidden");
      bidBtn.classList.remove("active");
    }
  });
});

// Property Detail button scroll
const pBtn = document.querySelector(".p-btn");
const scrollContainer = document.querySelector(".property-details-buttons");
let isDown = false;
let startX;
let scrollLeft;
document.addEventListener("DOMContentLoaded", () => {
  scrollContainer.addEventListener("mousedown", (e) => {
    isDown = true;
    scrollContainer.classList.add("active");
    startX = e.pageX - scrollContainer.offsetLeft;
    scrollLeft = scrollContainer.scrollLeft;
  });

  scrollContainer.addEventListener("mouseleave", () => {
    isDown = false;
    scrollContainer.classList.remove("active");
  });

  scrollContainer.addEventListener("mouseup", () => {
    isDown = false;
    scrollContainer.classList.remove("active");
  });

  scrollContainer.addEventListener("mousemove", (e) => {
    if (!isDown) return;
    e.preventDefault();
    const x = e.pageX - scrollContainer.offsetLeft;
    const walk = (x - startX) * 2;
    scrollContainer.scrollLeft = scrollLeft - walk;
  });
});

// aution time Js
document.addEventListener("DOMContentLoaded", () => {
  const tabsContainer = document.querySelector("#myTab"); // Auction tabs container
  let isDown = false;
  let startX;
  let scrollLeft;

  tabsContainer.addEventListener("mousedown", (e) => {
    isDown = true;
    tabsContainer.classList.add("active");
    startX = e.pageX - tabsContainer.offsetLeft;
    scrollLeft = tabsContainer.scrollLeft;
  });

  tabsContainer.addEventListener("mouseleave", () => {
    isDown = false;
    tabsContainer.classList.remove("active");
  });

  tabsContainer.addEventListener("mouseup", () => {
    isDown = false;
    tabsContainer.classList.remove("active");
  });

  tabsContainer.addEventListener("mousemove", (e) => {
    if (!isDown) return;
    e.preventDefault();
    const x = e.pageX - tabsContainer.offsetLeft;
    const walk = (x - startX) * 2; // Adjust multiplier for scrolling speed
    tabsContainer.scrollLeft = scrollLeft - walk;
  });
});

// live auction lots animation
document.addEventListener("DOMContentLoaded", () => {
  const tabs = document.querySelectorAll(".auction-tabs li");
  const glider = document.querySelector(".glider");

  const updateGlider = (activeTab) => {
    const tabWidth = activeTab.offsetWidth;
    const tabLeft = activeTab.offsetLeft;

    glider.style.width = `${tabWidth}px`;
    glider.style.transform = `translateX(${tabLeft}px)`;
  };

  const initialActiveTab = document.querySelector(".auction-tabs li.active");
  if (initialActiveTab) updateGlider(initialActiveTab);

  tabs.forEach((tab) => {
    tab.addEventListener("click", () => {
      tabs.forEach((t) => t.classList.remove("active"));

      tab.classList.add("active");

      updateGlider(tab);
    });
  });
});

// Selfi Photo FN
const video = document.getElementById("video");
const canvas = document.getElementById("canvas");
const selfieImage = document.getElementById("selfie");
const captureButton = document.getElementById("capture");
const modalSelfi = document.querySelector(".modal-selfi");
const selfi = document.querySelector(".selfi-btn");

let captured = true;
modalSelfi.addEventListener("click", () => {
  modalSelfi.classList.add("hidden");
});

selfi.addEventListener("click", () => {
  modalSelfi.classList.remove("hidden");
  navigator.mediaDevices
    .getUserMedia({ video: true })
    .then((stream) => {
      video.srcObject = stream;
    })
    .catch((err) => {
      console.error("Error accessing the camera: ", err);
    });
});

captureButton.addEventListener("click", () => {
  selfieImage.classList.remove("hidden");
  const context = canvas.getContext("2d");
  context.drawImage(video, 0, 0, canvas.width, canvas.height);

  const dataUrl = canvas.toDataURL("image/png");
  selfieImage.src = dataUrl;

  captured = false;
  console.log(captured);
});