/* Add custom Js code below */ 
// Create the WhatsApp button container
document.addEventListener('DOMContentLoaded', () => {
  const categories = document.querySelector('.s-block.s-block--banners > div');


const category_item = document.createElement('a');
category_item.className = 'banner-entry square-photos ';
  category_item.href = 'https://salla.sa/digital-market1/redirect/categories/895649305';
  category_item.innerHTML = `
    <div class="lazy__bg lazy bg-no-repeat entered loaded" data-bg="https://cdn.salla.sa/form-builder/KgvfBF3qDRh8y4MCCfdaQP6iIVQkzwv3ZS1ntahI.png" style="background-size: contain; background-image: url(&quot;https://cdn.salla.sa/form-builder/KgvfBF3qDRh8y4MCCfdaQP6iIVQkzwv3ZS1ntahI.png&quot;);" data-ll-status="loaded"></div>`
  ;
  categories.append(category_item);
  
});



var whatsappFloat = document.createElement('div');
whatsappFloat.className = 'whatsapp-float';

// Create the WhatsApp link container
var whatsappPopup = document.createElement('div');
whatsappPopup.className = 'whatsapp-popup';
whatsappPopup.style.display = 'none'; // Initially hidden

// Create the popup content with avatar, text, and list of options
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>
    <ul class="options-list">
      <li>1- لتتبع الطلب</li>
      <li>2- مشكلة</li>
      <li>3- استفسار</li>
    </ul>
    <a href="https://wa.me/+966556167519" target="_blank" class="whatsapp-button">تواصل معنا</a>
    <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;
  right: 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;
  right: 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 {
}

.options-list {
  list-style-type: none;
  padding: 0;
  margin: 10px 0;
}

.options-list li {
  margin-bottom: 5px;
}

.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: 15px;
}

.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() {
  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';
});