/* Add custom Js code below */ 
document.querySelectorAll('a[href=""], a[href="#"]').forEach(link => {
    link.addEventListener('click', event => {
        event.preventDefault();  
    });
});

document.addEventListener("DOMContentLoaded", function () {
    const sections = document.querySelectorAll("section");
  
    function checkVisibility() {
      sections.forEach((section) => {
        const position = section.getBoundingClientRect();
        if (position.top < window.innerHeight && position.bottom >= 0) {
          section.classList.add("visible");
        } else {
          section.classList.remove("visible");
        }
      });
    }
  
   
  
    // Create the WhatsApp button container
    var whatsappFloat = document.createElement('div');
    whatsappFloat.className = 'whatsapp-float';
  
    // Create the WhatsApp popup container
    var whatsappPopup = document.createElement('div');
    whatsappPopup.className = 'whatsapp-popup';
    whatsappPopup.style.display = 'none'; // Initially hidden
  
    // Create the popup content with avatar, text, input, and button
    var popupContent = `
      <div class="popup-header">
        <div class="avatar-container">
          <img src="https://i.pinimg.com/736x/8b/16/7a/8b167af653c2399dd93b952a48740620.jpg" alt="Avatar" class="avatar-img">
          <span class="support-text">الدعم الفني</span>
        </div>
        <button class="close-popup">×</button>
      </div>
      <div class="popup-body">
        <p>مرحباً بك، نحن متواجدون لخدمتك</p>
        <p>برجاء كتابة رسالتك:</p>
        <input type="text" id="whatsapp-message" placeholder="اكتب رسالتك هنا" style="width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px;">
        <button id="send-whatsapp" class="whatsapp-button">إرسال</button>
        <div class="adfaz-container">
          <a href="https://adfaz.sa/" target="_blank" class="adfaz-link">
            <img src="https://i.ibb.co/P4YVDmW/Black-Gold-White-Luxury-Royal-Crown-Logo.png" alt="Adfaz" class="adfaz-img">
            <span class="adfaz-text">برمجة وتطوير أدفاز</span>
          </a>
        </div>
      </div>
    `;
  
    whatsappPopup.innerHTML = popupContent;
  
    // Append the popup to the container
    whatsappFloat.appendChild(whatsappPopup);
  
    // Create the WhatsApp icon
    var whatsappIcon = new Image();
    whatsappIcon.src = 'https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg';
    whatsappIcon.alt = 'WhatsApp';
    whatsappIcon.className = 'whatsapp-icon';
  
    // Append the icon to the container
    whatsappFloat.appendChild(whatsappIcon);
  
    // Append the WhatsApp button to the body
    document.body.appendChild(whatsappFloat);
  
    // Add CSS styles dynamically
    var style = document.createElement('style');
    style.innerHTML = `
    .whatsapp-float {
      position: fixed;
      bottom: 120px;
      left: 20px;
      z-index: 100;
    }
  
    .whatsapp-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      cursor: pointer;
      transition: transform 0.3s ease-in-out;
    }
  
    .whatsapp-icon:hover {
      transform: scale(1.1);
    }
  
    .whatsapp-popup {
      position: fixed;
      bottom: 90px;
      left: 20px;
      width: 300px;
      background-color: #f0f0f0;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      padding: 15px;
      z-index: 101;
    }
  
    .popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  
    .avatar-container {
      display: flex;
      align-items: center;
    }
  
    .avatar-img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 10px;
    }
  
    .support-text {
      font-size: 16px;
      font-weight: bold;
    }
  
    .close-popup {
      background: none;
      border: none;
      font-size: 20px;
      cursor: pointer;
    }
  
    .popup-body {
    }
  
    .whatsapp-button {
      display: block;
      width: 100%;
      text-align: center;
      background-color: #25d366;
      color: white;
      padding: 10px 15px;
      border-radius: 5px;
      text-decoration: none;
      margin-top: 10px;
    }
  
    .whatsapp-button:hover {
      background-color: #1ebe55;
    }
  
    .adfaz-container {
      display: flex;
      align-items: center;
    }
  
    .adfaz-link {
      display: flex;
      text-decoration: none;
      color: black;
    }
  
    .adfaz-img {
        width: 30px;
        height: 30px;
        margin-left: 3px;
    }
  
    .adfaz-text {
      font-size: 12px;
    }
    `;
    document.head.appendChild(style);
  
    // Toggle the popup when the icon is clicked
    whatsappIcon.addEventListener('click', function() {
      const isVisible = whatsappPopup.style.display === 'block';
      whatsappPopup.style.display = isVisible ? 'none' : 'block';
    });
  
    // Close the popup when the close button is clicked
    const closePopupButton = document.querySelector('.close-popup');
    if (closePopupButton) {
      closePopupButton.addEventListener('click', function() {
        whatsappPopup.style.display = 'none';
      });
    }
  
    // Send the message to WhatsApp
    document.getElementById('send-whatsapp').addEventListener('click', function() {
      var message = document.getElementById('whatsapp-message').value;
      if (message.trim().length > 0) {
        var whatsappLink = `https://wa.me/+966553166959?text=${encodeURIComponent(message)}`;
        window.open(whatsappLink, '_blank');
      } else {
        alert('يرجى كتابة رسالة قبل الإرسال.');
      }
    });
  });