/* Add custom Js code below */ 

//*******************************************
 /* إضافة زر الوضع الداكن */
document.querySelector("body > div.app-inner.flex.flex-col.min-h-full > header > div.main-nav-container.shadow-default.bg-white > div > div > div > div:nth-of-type(2)").insertAdjacentHTML('afterbegin', `
    <button id="darkModeToggle" aria-label="Toggle Dark Mode" style="cursor: pointer; font-size: 23px; border: none; background: transparent; border: 1px solid rgba(229, 231, 235); border-radius: 50%; width: 35px; height: 35px; margin: 0 12px;">
        🌙
    </button>
`);

(function() {
    const toggleButton = document.getElementById('darkModeToggle');
    
    // التحقق من حالة الوضع من localStorage
    const currentMode = localStorage.getItem('theme');
    
    if (currentMode === 'dark') {
        document.body.classList.add('dark-mode');
        toggleButton.innerHTML = '🌞'; // رمز الوضع الفاتح
        document.body.style.backgroundColor = '#121212';
        document.body.style.color = '#ffffff';
    } else {
        document.body.classList.remove('dark-mode');
        toggleButton.innerHTML = '🌙'; // رمز الوضع الداكن
        document.body.style.backgroundColor = '#ffffff';
        document.body.style.color = '#000000';
    }

    // إضافة حدث للنقر على الزر
    toggleButton.addEventListener('click', () => {
        document.body.classList.toggle('dark-mode');

        if (document.body.classList.contains('dark-mode')) {
            toggleButton.innerHTML = '🌞'; // رمز الوضع الفاتح
            document.body.style.backgroundColor = '#121212';
            document.body.style.color = '#ffffff';
            localStorage.setItem('theme', 'dark'); // حفظ الوضع الداكن في localStorage
        } else {
            toggleButton.innerHTML = '🌙'; // رمز الوضع الداكن
            document.body.style.backgroundColor = '#ffffff';
            document.body.style.color = '#000000';
            localStorage.setItem('theme', 'light'); // حفظ الوضع الفاتح في localStorage
        }
    });
})();

document.querySelectorAll('a[href=""], a[href="#"]').forEach(link => {
    link.addEventListener('click', event => {
        event.preventDefault();  
    });
});

//********************************
// create scrollIcon 
const scrollIcon = document.createElement("div");
scrollIcon.id = "scroll-icon";
scrollIcon.style.position = "fixed";
scrollIcon.style.bottom = "20px";
scrollIcon.style.right = "20px";
scrollIcon.style.width = "50px";
scrollIcon.style.height = "50px";
scrollIcon.style.display = "none"; // initailly hidden
scrollIcon.style.alignItems = "center";
scrollIcon.style.justifyContent = "center";
scrollIcon.style.cursor = "pointer";
scrollIcon.style.zIndex = "1000";

//********************************
// 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 = document.createElement('img');
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: 20px;
  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;
}


.whatsapp-button {
  display: block;
  width: 100%;
  text-align: center;
  background-color: #5A146E;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  text-decoration: none;
  margin-top: 10px;
}

.whatsapp-button:hover {
  background-color: black;
}

.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() {
  whatsappPopup.style.display = (whatsappPopup.style.display === 'none') ? 'block' : 'none';
});

// Close the popup when the close button is clicked
document.querySelector('.close-popup').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() !== '') {
    var whatsappLink = `https://wa.me/966508200535?text=${encodeURIComponent(message)}`;
    window.open(whatsappLink, '_blank');
  } else {
    alert('يرجى كتابة رسالة قبل الإرسال.');
  }
});

//****************************************
document.addEventListener("DOMContentLoaded", function() {
  // Create the golden background
  var goldenBackground = document.createElement("div");
  goldenBackground.style.position = "fixed";
  goldenBackground.style.top = "0";
  goldenBackground.style.left = "0";
  goldenBackground.style.width = "100%";
  goldenBackground.style.height = "100%";
  goldenBackground.style.backgroundColor = "#541266";
  goldenBackground.style.zIndex = "999";
  goldenBackground.style.transition = "opacity 1s";

  // Create the airplane icon
  var airplane = document.createElement("div");
  airplane.innerHTML = `<svg version="1.1" width="60px" height="70px" viewBox="0 0 60 70">
              <defs>
                <filter id="f1" x="0" y="0">
                  <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
                </filter>
              </defs>
              <g id="airplane">
                <path fill="#695515" d="M0.677,20.977l4.355,1.631c0.281,0.104,0.579,0.162,0.88,0.16l9.76-0.004L30.46,41.58c0.27,0.34,0.679,0.545,1.112,0.541
                h1.87c0.992,0,1.676-0.992,1.322-1.918l-6.643-17.439l6.914,0.002l6.038,6.037c0.265,0.266,0.624,0.412,0.999,0.418l1.013-0.004
                c1.004-0.002,1.684-1.012,1.312-1.938l-2.911-7.277l2.912-7.278c0.372-0.928-0.313-1.941-1.313-1.938h1.017
                c-0.375,0-0.732,0.15-0.996,0.414l-6.039,6.039h-6.915l6.646-17.443c0.354-0.926-0.33-1.916-1.321-1.914l-1.87-0.004
                c-0.439,0.004-0.843,0.203-1.112,0.543L15.677,17.24l-9.765-0.002c-0.3,0.002-0.597,0.055-0.879,0.16L0.678,19.03
                C-0.225,19.36-0.228,20.637,0.677,20.977z" transform="translate(44,0) rotate(90 0 0)" />
              </g>
              <g id="shadow" transform="scale(.9)">
                <path fill="#695515" fill-opacity="0.3" d="M0.677,20.977l4.355,1.631c0.281,0.104,0.579,0.162,0.88,0.16l9.76-0.004L30.46,41.58c0.27,0.34,0.679,0.545,1.112,0.541
                    h1.87c0.992,0,1.676-0.992,1.322-1.918l-6.643-17.439l6.914,0.002l6.038,6.037c0.265,0.266,0.624,0.412,0.999,0.418l1.013-0.004
                    c1.004-0.002,1.684-1.012,1.312-1.938l-2.911-7.277l2.912-7.278c0.372-0.928-0.313-1.941-1.313-1.938h1.017
                    c-0.375,0-0.732,0.15-0.996,0.414l-6.039,6.039h-6.915l6.646-17.443c0.354-0.926-0.33-1.916-1.321-1.914l-1.87-0.004
                    c-0.439,0.004-0.843,0.203-1.112,0.543L15.677,17.24l-9.765-0.002c-0.3,0.002-0.597,0.055-0.879,0.16L0.678,19.03
                    C-0.225,19.36-0.228,20.637,0.677,20.977z" transform="translate(64,30) rotate(90 0 0)" filter="url(#f1)" />
              </g>
            </svg>`; // You can use an image instead
  airplane.style.position = "absolute";
  airplane.style.bottom = "0";
  airplane.style.left = "50%";
  airplane.style.transform = "translateX(-50%)";
  airplane.style.transform = "rotate(0deg)";
  airplane.style.fontSize = "50px"; // Adjust the size as needed
  airplane.style.zIndex = "2000";

  // Append the elements to the body
  goldenBackground.appendChild(airplane);
  document.body.appendChild(goldenBackground);

  // Animate the airplane
  var airplaneAnimation = airplane.animate([
    { transform: 'translate(-50%, 0)' },
    { transform: 'translate(-50%, -100vh)' }
  ], {
    duration: 2000,
    easing: 'ease-in-out',
    fill: 'forwards'
  });

  // Remove the background after the animation
  airplaneAnimation.onfinish = function() {
    goldenBackground.style.opacity = "0";
    setTimeout(function() {
      goldenBackground.remove();
    }, 1000); // This should match the transition duration

    // Now create the welcome card
    createWelcomeCard();
  };

  function createWelcomeCard() {
    // Get the current URL path
    var path = window.location.pathname;

    // Check if the current path is the homepage
    if (path === "/") {
      // Create the popup container
      var popup = document.createElement("div");
      popup.id = "welcomePopup";
      popup.style.position = "fixed";
      popup.style.top = "50%";
      popup.style.left = "50%";
      popup.style.transform = "translate(-50%, -50%)";
      popup.style.padding = "20px";
      popup.style.backgroundColor = "white";
      popup.style.border = "1px solid #ccc";
      popup.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.1)";
      popup.style.zIndex = "1000";
      popup.style.textAlign = "center";

      // Create Image
      var img = document.createElement("img");
      img.src = "https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/KjlDaa/mxhYyVrbxg41ksrXqaNNqE6jpENmXNd0oGyz34c7.png";
      img.style.width = "200px";
      img.style.height = "250px";
      img.style.margin = "0px auto";

      // Create the heading
      var heading = document.createElement("h3");
      heading.innerText = "مرحبًا بك في  Sara's Store! استمتع بالتسوق معنا.";
      heading.style.marginBottom = "20px";

      // Create the button
      var button = document.createElement("button");
      button.id = "exploreButton";
      button.innerText = "استكشف عالمنا";
      button.style.padding = "10px 20px";
      button.style.backgroundColor = "#5A146E";
      button.style.color = "white";
      button.style.border = "none";
      button.style.cursor = "pointer";
      button.style.fontSize = "16px";
      button.addEventListener("mouseover", function() {
        button.style.backgroundColor = "#343434";
      });
      button.addEventListener("mouseout", function() {
        button.style.backgroundColor = "#343434";
      });
      button.addEventListener("click", function() {
        popup.style.transition = "opacity 0.5s";
        popup.style.opacity = "0";
        setTimeout(function() {
          popup.style.display = "none";
        }, 500);
      });

      // Append elements to the popup
      popup.appendChild(img);
      popup.appendChild(heading);
      popup.appendChild(button);

      // Append the popup to the body
      document.body.appendChild(popup);

      // Show the popup
      popup.style.display = "block";
    }
  }
});
//******************************************
// create svg circle
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("class", "progress-circle");
svg.setAttribute("viewBox", "0 0 36 36");
svg.style.width = "100%";
svg.style.height = "100%";
svg.style.transform = "rotate(-90deg)";


// create circle background
const circleBg = document.createElementNS("http://www.w3.org/2000/svg", "path");
circleBg.setAttribute("class", "circle-bg");
circleBg.setAttribute(
  "d",
  "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
);
circleBg.setAttribute("fill", "none");
circleBg.setAttribute("stroke", "#f3f3f3");
circleBg.setAttribute("stroke-width", "3.8");

// create the moved circle
const circle = document.createElementNS("http://www.w3.org/2000/svg", "path");
circle.setAttribute("class", "circle");
circle.setAttribute(
  "d",
  "M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
);
circle.setAttribute("fill", "none");
circle.setAttribute("stroke", "#5A146E");
circle.setAttribute("stroke-width", "3.8");
circle.setAttribute("stroke-linecap", "round");
circle.style.transition = "stroke-dasharray 0.3s ease";



// add elements to svg
svg.appendChild(circleBg);
svg.appendChild(circle);

// create arrow
const arrow = document.createElement("div");
arrow.textContent = "↑";
arrow.style.position = "absolute";
arrow.style.fontSize = "22px";
arrow.style.fontWeight = "bold";
arrow.style.color = "#5A146E ";
arrow.style.pointerEvents = "none";



// add svg , arrow to scrollTcon
scrollIcon.appendChild(svg);
scrollIcon.appendChild(arrow);

// add scrollTcon to page
document.body.appendChild(scrollIcon);

// add events
window.addEventListener("scroll", () => {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  const scrollPercentage = (scrollTop / scrollHeight) * 100;

  // update circle background
  circle.style.strokeDasharray = `${scrollPercentage}, 100`;

  // hide or display scrollIcon based on scrollTop 
 if (scrollTop > 300) {
    scrollIcon.style.display = "flex";
  } else {
    scrollIcon.style.display = "none";
  }

});
//*************************************************//

// back to top when click the icon
scrollIcon.addEventListener("click", () => {
  window.scrollTo({ top: 0, behavior: "smooth" });
});

document.addEventListener('mousemove', (e) => {

    if (Math.random() > 0.5) return;  

    const star = document.createElement('div');
    star.style.position = 'absolute';
    star.style.width = '20px';
    star.style.height = '20px';
    star.style.backgroundImage = 'url("https://i.ibb.co/ngtLDBm/82449264-9893444.png")'; 
    star.style.backgroundSize = 'contain';
    star.style.pointerEvents = 'none';
    star.style.left = (e.pageX + Math.random() * 30 - 15) + 'px'; 
    star.style.top = (e.pageY + Math.random() * 30 - 15) + 'px';
    star.style.opacity = 1;
    star.style.transition = 'opacity 1s ease-out, transform 1s ease-out';
    document.body.appendChild(star);

    setTimeout(() => {
        star.style.opacity = 0;
        star.style.transform = 'scale(1.5)';
    }, 10);

    setTimeout(() => {
        star.remove();
    }, 1000);
});
const sallaProductOptions = document.querySelector('salla-product-options');


const alertMessage = document.createElement('p');
alertMessage.textContent = "الرجاء اختيار أحد هذا الاختيارات للتمكن من اتمام الشراء";

alertMessage.style.backgroundColor = '#ffdddd';
alertMessage.style.color = '#a94442';
alertMessage.style.padding = '15px';
alertMessage.style.border = '1px solid #a94442';
alertMessage.style.borderRadius = '5px';
alertMessage.style.marginBottom = '10px';
alertMessage.style.fontWeight = 'bold';
alertMessage.style.textAlign = 'center';

sallaProductOptions.insertBefore(alertMessage, sallaProductOptions.firstChild);
//*******************************************