/* Add custom JS code below */

(function() {
    // 1. إنشاء عنصر الحاوية الخلفية (الأسود)
    var devContainer = document.createElement('div');
    devContainer.className = 'custom-footer-dev';
    devContainer.style.backgroundColor = '#fff';
    devContainer.style.textAlign = 'center';
    devContainer.style.padding = '15px 0';
    devContainer.style.width = '100%';
    devContainer.style.clear = 'both';

    // 2. إنشاء زر الرابط (الأحمر)
    var devLink = document.createElement('a');
    devLink.href = 'https://linktr.ee/AL_Zaiem';
    devLink.target = '_blank';
    devLink.rel = 'noopener noreferrer';
    devLink.innerText = 'برمجة وتطوير ALzaiem';
    
    // تنسيق الزر بالـ CSS
    devLink.style.color = '#ffffff';
    devLink.style.backgroundColor = '#034192';
    devLink.style.textDecoration = 'none';
    devLink.style.fontSize = '14px';
    devLink.style.fontWeight = 'bold';
    devLink.style.padding = '8px 20px';
    devLink.style.borderRadius = '5px';
    devLink.style.display = 'inline-block';
    devLink.style.transition = 'all 0.3s ease';

    // إضافة تأثير تمرير الماوس (Hover) عبر الـ JS
    devLink.onmouseover = function() {
        this.style.backgroundColor = '#ffffff';
        this.style.color = '#034192';
    };
    devLink.onmouseout = function() {
        this.style.backgroundColor = '#034192';
        this.style.color = '#ffffff';
    }; 

    // 3. دمج الزر داخل الحاوية
    devContainer.appendChild(devLink);

    // 4. إضافة العنصر كاملاً في نهاية جسم الصفحة (الفوتر)
    document.body.appendChild(devContainer);
})();


document.addEventListener("DOMContentLoaded", function() {
    // 1. إنشاء عنصر القائمة المنبثقة والأيقونة
    const whatsappFloat = document.createElement('div');
    whatsappFloat.className = 'whatsapp-float';
    whatsappFloat.innerHTML = `
    <div class="whatsapp-popup" style="display: none;">
      <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://api.whatsapp.com/send?phone=966555084715" target="_blank" rel="noopener noreferrer" class="whatsapp-button">تواصل معنا</a>
        <div class="adfaz-container">
            <span class="adfaz-text">برمجة وتطوير ALZaiem</span>
        </div>
      </div>
    </div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WhatsApp" class="whatsapp-icon">`;

    document.body.appendChild(whatsappFloat);

    // 2. إضافة التنسيقات (CSS) وتصحيح الألوان والخلفية
    const whatsappStyle = document.createElement('style');
    whatsappStyle.textContent = `
    .whatsapp-float {
      position: fixed;
      bottom: 20px;
      left: 20px;
      z-index: 999999 !important;
      direction: rtl;
    }
    .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;
      background: linear-gradient(135deg, #075e54, #128c7e);
      width: 280px;
      padding: 15px;
      color: white;
      z-index: 999999 !important;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.3);
      font-family: sans-serif;
    }
    .popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid rgba(255,255,255,0.2);
      padding-bottom: 8px;
      margin-bottom: 10px;
    }
    .avatar-container {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .avatar-img {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      object-fit: cover;
    }
    .support-text {
      font-weight: bold;
      font-size: 14px;
    }
    .close-popup {
      background: none;
      border: none;
      color: white;
      font-size: 24px;
      cursor: pointer;
      line-height: 1;
    }
    .popup-body p {
      margin: 5px 0;
      font-size: 13px;
    }
    .options-list {
      list-style: none;
      padding: 0;
      margin: 10px 0;
      font-size: 13px;
    }
    .options-list li {
      margin-bottom: 5px;
    }
    .whatsapp-button {
      display: block;
      background-color: #25d366;
      color: white;
      text-align: center;
      padding: 8px;
      border-radius: 5px;
      text-decoration: none;
      font-weight: bold;
      margin-top: 10px;
      transition: background 0.2s;
    }
    .whatsapp-button:hover {
      background-color: #20ba5a;
    }
    .adfaz-container {
      text-align: center;
      font-size: 10px;
      margin-top: 10px;
      opacity: 0.7;
    }
    `;
    document.head.appendChild(whatsappStyle);

    // 3. تشغيل الأزرار والتحكم بالظهور والاختفاء
    const icon = whatsappFloat.querySelector('.whatsapp-icon');
    const popup = whatsappFloat.querySelector('.whatsapp-popup');
    const closeBtn = whatsappFloat.querySelector('.close-popup');

    icon.addEventListener('click', function(e) {
      e.stopPropagation();
      popup.style.display = (popup.style.display === 'none' || popup.style.display === '') ? 'block' : 'none';
    });

    closeBtn.addEventListener('click', function(e) {
      e.stopPropagation();
      popup.style.display = 'none';
    });
    
    document.addEventListener('click', function() {
        popup.style.display = 'none';
    });
    popup.addEventListener('click', function(e) {
        e.stopPropagation();
    });
});