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

// Create the WhatsApp link container
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="logo-container">
    <a >
      <img src="">
    </a>
  </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/+966 56 575 8955" 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://iili.io/Fv1sNIa.gif';
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: 100px;
left: 20px;
z-index: 100;
}
.logo-container{
  height: 50px;
  margin: auto;
}
.whatsapp-icon {
width: 50px;
height: 50px;
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: 155px;
  left: 20px;
  background: linear-gradient(var(--main-color), var(--second-color));
  width: 300px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 15px;
  color: white;
  z-index: 101;
  border-radius: 10px;
}

.popup-header {
  display: flex
;
  justify-content: space-between;
  align-items: center;
}
.adfaz-container {
  display: flex
;
  padding-top: 6px;
  align-items: flex-end;
  justify-content: space-evenly;
}
.avatar-img {
width: 40px;
height: 40px;
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;
    color: white;
}
.support-text {
font-size: 16px;
font-weight: bold;
}

`;
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';
});

// Close the popup when the close button is clicked
document.querySelector('.close-popup').addEventListener('click', function () {
  whatsappPopup.style.display = 'none';
});