script.min.js

async function startVideoCall() {
  //
  // Hello!
  // If you're here then you probably just found what you're looking for.
  // This is the public endpoint for Digital Samba FREE, based
  // on Digital Samba's video conferencing API.
  // Sign up at https://dashboard.digitalsamba.com/signup to get your own,
  // private Digital Samba API endpoint for your projects.
  // 10,000 minutes free each month!
  // Hope to see you and happy building!
  //
  const teamName = "free";
  const apiUrl = `https://api.digitalsamba.com/api/public/${teamName}`;
  const name = document.getElementById("name").value.trim();
  const htmlTitle = `${name}'s Digital Samba Meeting`;

  const errorEl = document.getElementById("startError");
  errorEl.style.display = "none";

  if (!name) {
    errorEl.textContent = "Please enter your name.";
    errorEl.style.display = "block";
    return;
  }

  const e2eeEnabled = document.getElementById("e2eeToggle").checked;
  const newTab = window.open("", "_blank");

  try {
    const now = new Date();
    // now.setDate(now.getDate() + 14); // Add 14 days
    now.setHours(now.getHours() + 4); // Add 4 hours
    const expiresAt = now.toISOString().slice(0, 19).replace("T", " "); // Format as 'YYYY-MM-DD HH:mm:ss'

    const roomResponse = await fetch(`${apiUrl}/rooms`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        privacy: "public",
        e2ee_enabled: e2eeEnabled,
        breakout_rooms_enabled: true,
        expires_at: expiresAt,
        html_title: htmlTitle,
      }),
    });

    const roomData = await roomResponse.json();
    const roomUrl = roomData.room_url;
    const friendlyUrl = roomData.friendly_url;

    const randomUd = () =>
      Math.random().toString(36).substring(2, 12) + Date.now().toString(36);

    const tokenResponse = await fetch(`${apiUrl}/rooms/${friendlyUrl}/token`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ u: name, ud: randomUd() }),
    });

    const tokenData = await tokenResponse.json();
    const joinUrl = `${roomUrl}?token=${tokenData.token}`;

    newTab
      ? (newTab.location.href = joinUrl)
      : (window.location.href = joinUrl);
  } catch (error) {
    if (newTab) newTab.close();
    errorEl.textContent = "Failed to start the video call.";
    errorEl.style.display = "block";
  }
}

function handleKeyPress(event) {
  if (event.key === "Enter") startVideoCall();
}

function startFirework(event) {
  const e2eeEnabled = event.target.checked;

  if (e2eeEnabled) {
    for (let j = 0; j < 3; j++) {
      // Create 3 explosions
      setTimeout(() => {
        const fireworksContainer = document.createElement("div");
        document.body.appendChild(fireworksContainer);

        const numParticles = 50;
        const offsetX = (Math.random() - 0.5) * 100;
        const offsetY = (Math.random() - 0.5) * 100;
        const explosionX = event.clientX + offsetX;
        const explosionY = event.clientY + offsetY;

        for (let i = 0; i < numParticles; i++) {
          const firework = document.createElement("div");
          firework.classList.add("firework");

          const angle = Math.random() * Math.PI * 2;
          const distance = Math.random() * 150 + 75;
          const x = Math.cos(angle) * distance + "px";
          const y = Math.sin(angle) * distance + "px";

          firework.style.setProperty("--x", x);
          firework.style.setProperty("--y", y);
          firework.style.left = `${explosionX}px`;
          firework.style.top = `${explosionY}px`;

          // Assign colors based on probability
          const rand = Math.random();
          if (rand < 0.7) {
            firework.style.background = "#666666";
          } else if (rand < 0.85) {
            firework.style.background = "#f06859"; // red
          } else {
            firework.style.background = "#3771e0"; // blue
          }

          fireworksContainer.appendChild(firework);
        }

        setTimeout(() => {
          fireworksContainer.remove();
        }, 1000);
      }, j * 200); // Delay each explosion slightly
    }
  }
}
// Tooltip
function positionTooltip(tip) {
  tip.style.left = '50%';
  tip.style.right = 'auto';
  tip.style.transform = 'translateX(-50%)';
  const rect = tip.getBoundingClientRect();
  if (rect.right > window.innerWidth) {
    tip.style.left = 'auto';
    tip.style.right = '0';
    tip.style.transform = 'translateX(0)';
  } else if (rect.left < 0) {
    tip.style.left = '0';
    tip.style.right = 'auto';
    tip.style.transform = 'translateX(0)';
  }
}
document.querySelectorAll('.info-icon').forEach(function(icon) {
  let tooltip = icon.querySelector('.tooltip');

  // Toggle visibility on tap
  icon.addEventListener('click', function() {
    const isVisible = tooltip.style.visibility === 'visible';

    // Hide all tooltips before showing the current one
    document.querySelectorAll('.tooltip').forEach(function(tip) {
      tip.style.visibility = 'hidden';
      tip.style.opacity = '0';
    });

    // Show/hide the clicked tooltip
    if (!isVisible) {
      tooltip.style.visibility = 'visible';
      tooltip.style.opacity = '1';
      positionTooltip(tooltip);
    }
  });

  // Close tooltip if clicked outside
  document.addEventListener('click', function(event) {
    if (!icon.contains(event.target)) {
      tooltip.style.visibility = 'hidden';
      tooltip.style.opacity = '0';
    }
  });
});
// Tab switching
function switchTab(tab) {
  document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
  document.querySelectorAll('.tab-content').forEach(tabContent => tabContent.style.display = 'none');

  document.querySelector(`[onclick="switchTab('${tab}')"]`).classList.add('active');
  document.getElementById(`${tab}-tab`).style.display = 'block';
}

// Generate Room Link
async function generateRoomLink() {
  const teamName = "free";
  const apiUrl = `https://api.digitalsamba.com/api/public/${teamName}`;
  const e2eeEnabled = document.getElementById("e2eeToggleGenerate").checked;

  const errorEl = document.getElementById("generateError");
  errorEl.style.display = "none";

  const btn = document.querySelector("#generateForm button");
  btn.disabled = true;
  btn.textContent = "Generating...";

  try {
    const now = new Date();
    now.setDate(now.getDate() + 30);
    const expiresAt = now.toISOString().slice(0, 19).replace("T", " ");

    const response = await fetch(`${apiUrl}/rooms`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        privacy: "public",
        e2ee_enabled: e2eeEnabled,
        breakout_rooms_enabled: true,
        expires_at: expiresAt,
        reusable: true,
        html_title: "Scheduled Digital Samba Room"
      }),
    });

    const data = await response.json();
    const link = data.room_url;

    document.getElementById("generateForm").style.display = "none";
    document.getElementById("generatedBox").style.display = "block";

    const linkEl = document.getElementById("generatedLink");
    linkEl.href = link;
    linkEl.textContent = link;

    const copyBtn = document.getElementById("copyLinkButton");
    copyBtn.innerHTML = "Copy link";
  } catch (error) {
    errorEl.textContent = "Failed to generate the room link.";
    errorEl.style.display = "block";
  } finally {
    btn.disabled = false;
    btn.textContent = "Generate Link";
  }
}



// Copy to clipboard
document.getElementById("copyLinkButton").addEventListener("click", function () {
  const text = document.getElementById("generatedLink").textContent;
  navigator.clipboard.writeText(text).then(() => {
    this.innerHTML = "Copied";
    setTimeout(() => {
      this.innerHTML = "Copy link";
    }, 2000);
  });
});

// Show the form again to create a new link
const generateAgainLink = document.getElementById("generateAnotherLink");
if (generateAgainLink) {
  generateAgainLink.addEventListener("click", function (e) {
    e.preventDefault();
    document.getElementById("generatedBox").style.display = "none";
    const form = document.getElementById("generateForm");
    form.style.display = "";
    document.getElementById("generatedLink").textContent = "";
    document.getElementById("generatedLink").removeAttribute("href");
  });
}

// Waiting list form submission
document.getElementById("scheduleForm").addEventListener("submit", function (e) {
  e.preventDefault();
  const emailErrorEl = document.getElementById("scheduleEmailError");
  const consentErrorEl = document.getElementById("scheduleConsentError");
  const errorEl = document.getElementById("scheduleError");

  emailErrorEl.style.display = "none";
  consentErrorEl.style.display = "none";
  errorEl.style.display = "none";

  const emailEl = document.getElementById("waitingEmail");
  const email = emailEl.value.trim();
  const consent = document.getElementById("marketingConsent").checked;

  let hasError = false;
  if (!email) {
    emailErrorEl.textContent = "Please enter your email address.";
    emailErrorEl.style.display = "block";
    hasError = true;
  } else if (!emailEl.checkValidity()) {
    emailErrorEl.textContent = "Please enter a valid email address.";
    emailErrorEl.style.display = "block";
    hasError = true;
  }

  if (!consent) {
    consentErrorEl.textContent = "Please accept marketing communication to join the waiting list. We'll need to let you know when it's ready.";
    consentErrorEl.style.display = "block";
    hasError = true;
  }

  if (hasError) {
    return;
  }

  const portalId = "2868499";
  const formId = "bbf946bd-ad04-43a9-ad0b-4282efe1d8f9";
  const url = `https://api.hsforms.com/submissions/v3/integration/submit/${portalId}/${formId}`;
  const data = {
    fields: [
      { name: "email", value: email },
    ],
    context: {
      pageUri: window.location.href,
      pageName: document.title,
    },
  };

  fetch(url, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data),
  })
    .then(() => {
      document.getElementById("scheduleForm").style.display = "none";
      const thankYouEl = document.getElementById("scheduleThankYou");
      thankYouEl.textContent = "Thank you! We'll let you know when scheduling becomes available.";
      thankYouEl.style.display = "block";
    })
    .catch(() => {
      errorEl.textContent = "Submission failed. Please try again later.";
      errorEl.style.display = "block";
    });
});