/* Add custom Js styles below */ 

// اللودر

(function () {
  if (document.getElementById("elite-loader-wrapper")) return;

  const loaderWrapper = document.createElement("div");
  loaderWrapper.id = "elite-loader-wrapper";

  // استخدمنا شعارك الموجود في الفوتر
  loaderWrapper.innerHTML = `
      <div class="loader-content">
          <div class="logo-3d-container">
              <img src="https://cdn.files.salla.network/theme/2082838346/7ffe5c19-d70e-45fc-9e73-ba061b301423.webp" class="main-loader-logo" alt="Coach Ahmed">
              <div class="neon-ring"></div>
          </div>
      </div>
  `;

  document.body.prepend(loaderWrapper);

  const hideLoader = () => {
    if (loaderWrapper.dataset.hidden === "true") return;
    loaderWrapper.dataset.hidden = "true";

    setTimeout(() => {
      loaderWrapper.style.opacity = "0";
      setTimeout(() => { loaderWrapper.remove(); }, 600);
    }, 1200); 
  };

  window.addEventListener("load", hideLoader);
  if (document.readyState === "complete") hideLoader();
  setTimeout(hideLoader, 5000); // صمام أمان
})();




// كود القائمة فوووق
const navData = {
    brandName: "كوتش أحمد",
    brandSub: "للأداء البدني العالي",
    avatarUrl: "https://cdn.files.salla.network/theme/2082838346/7ffe5c19-d70e-45fc-9e73-ba061b301423.webp",
    links: [
        { text: "الصفحة الرئيسية", icon: "fas fa-house", url: "/" },
        { text: "نبذة عني", icon: "fas fa-address-card", view: "about-view" },
        { text: "الأسئلة الشائعة", icon: "fas fa-circle-question", view: "faq-view" },
        { text: "حسابي", icon: "fas fa-user", url: "/profile" },
        { text: "السلة", icon: "fas fa-shopping-cart", url: "/cart" }
    ]
};

function injectNavbar() {
    const storeHeader = document.querySelector('.store-header');

    if (storeHeader) {
        // إظهار الهيدر وإلغاء أي إخفاء من الـ CSS
        storeHeader.style.setProperty('display', 'block', 'important');
        storeHeader.style.setProperty('visibility', 'visible', 'important');
        storeHeader.style.setProperty('opacity', '1', 'important');

        storeHeader.innerHTML = `
        <div id="nav-section-wrapper">
            <nav class="main-nav">
                <div class="brand-group">
                    <div class="coach-avatar">
                        <a href="/" title="${navData.brandName}">
                            <img src="${navData.avatarUrl}" alt="${navData.brandName}">
                        </a>
                    </div>
                    <div class="brand-info">
                        <span class="brand-name">${navData.brandName}</span>
                        <span class="brand-sub">${navData.brandSub}</span>
                    </div>
                </div>
                <div class="menu-icon" id="trigger-sidebar">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <rect x="3" y="3" width="7" height="7" rx="1"></rect>
                        <rect x="14" y="3" width="7" height="7" rx="1"></rect>
                        <rect x="3" y="14" width="7" height="7" rx="1"></rect>
                        <rect x="14" y="14" width="7" height="7" rx="1"></rect>
                    </svg>
                </div>
            </nav>

            <div id="sidebar-overlay"></div>

            <aside id="sidebar-menu">
                <div id="main-view" class="side-view active">
                    <div class="sidebar-header">
                        <button class="close-btn" id="close-sidebar">&times;</button>
                        <div class="logo-box-brand"><img src="${navData.avatarUrl}" alt="Coach" style="width:100%; height:100%; border-radius:4px;"></div>
                    </div>
                    <div class="view-scroll-content">
                        <nav class="side-nav">
                            ${navData.links.map(link => `
                                <a href="${link.url || 'javascript:void(0)'}" class="side-link ${link.view ? 'clickable' : ''}" 
                                   ${link.view ? `data-view="${link.view}"` : ''}>
                                    <span class="link-text">${link.text}</span>
                                    <span class="link-icon"><i class="${link.icon}"></i></span>
                                </a>
                            `).join('')}
                        </nav>
                        <div class="sidebar-footer">
                            <p class="footer-label">روابط تهمك</p>
                            <a href="/privacy-policy" class="footer-link"> سياسة الخصوصية</a>
                            <a href="/return-policy" class="footer-link"> الاستبدال والاسترجاع</a>
                        </div>
                    </div>
                </div>

                <div id="about-view" class="side-view">
                    <div class="sidebar-header sub-header">
                        <button class="back-btn" data-back="main-view"></button>
                        <h3 class="view-title">نبذة عني</h3>
                    </div>
                    <div class="view-scroll-content">
                        <div class="about-card">
                            <h2 class="highlight-name">أحمد الغزواني</h2>
                            <p class="specialty-tag">مختص في فسيولوجيا الجهد البدني وعلوم الحركة</p>
                            <div class="content-body">
                                <p>أركّز على تطوير القوة، القدرة، والتكيفات الفسيولوجية لرفع كفاءة الأداء الرياضي.</p>
                                <p>ساهمت في إعداد وتطوير رياضيين على المستوى الأولمبي والمحلي من خلال برامج تدريبية مبنية على أسس علمية</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="faq-view" class="side-view">
                    <div class="sidebar-header sub-header">
                        <button class="back-btn" data-back="main-view"></button>
                        <h3 class="view-title">الأسئلة الشائعة</h3>
                    </div>
                    <div class="view-scroll-content">
                        <div class="faq-list">
                            ${renderFaqs()}
                        </div>
                    </div>
                </div>
            </aside>
        </div>
        `;
        
        setupEventListeners();
    }
}

function renderFaqs() {
    const faqs = [
        { q: "هل البرنامج يناسبني؟", a: "نعم، البرنامج مصمم ليتناسب مع مختلف المستويات." },
        { q: "وش الهدف من البرنامج؟", a: "تطوير الأداء البدني الشامل مثل: القوة والسرعة." },
        { q: "هل فيه متابعة؟", a: "نعم، يوجد متابعة مستمرة لضمان التزامك." },
        { q: "متى أشوف نتائج؟", a: "غالباً خلال أول 2–4 أسابيع مع الالتزام." }
    ];
    return faqs.map((faq, index) => `
        <div class="faq-card">
            <h4>${index + 1}. ${faq.q}</h4>
            <p>${faq.a}</p>
        </div>
    `).join('');
}

function setupEventListeners() {
    const trigger = document.getElementById('trigger-sidebar');
    const closeBtn = document.getElementById('close-sidebar');
    const overlay = document.getElementById('sidebar-overlay');
    const sidebar = document.getElementById('sidebar-menu');

    // استخدام كلاس .active ليتطابق مع الـ CSS الخاص بك
    const toggleMenu = () => {
        sidebar.classList.toggle('active');
        overlay.classList.toggle('active');
    };

    if (trigger) trigger.addEventListener('click', toggleMenu);
    if (closeBtn) closeBtn.addEventListener('click', toggleMenu);
    if (overlay) overlay.addEventListener('click', toggleMenu);

    // التنقل بين الشاشات
    document.querySelectorAll('[data-view]').forEach(btn => {
        btn.addEventListener('click', (e) => {
            e.preventDefault();
            const targetView = e.currentTarget.getAttribute('data-view');
            showView(targetView);
        });
    });

    document.querySelectorAll('[data-back]').forEach(btn => {
        btn.addEventListener('click', (e) => {
            const backTo = e.currentTarget.getAttribute('data-back');
            showView(backTo);
        });
    });
}

function showView(viewId) {
    document.querySelectorAll('.side-view').forEach(view => {
        view.classList.remove('active');
    });
    const target = document.getElementById(viewId);
    if (target) target.classList.add('active');
}

// البدء بالحقن
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', injectNavbar);
} else {
    injectNavbar();
}







// نهاية كود القائمة فوووق






// كود لتوضيح صفحات المنتجات المستهدفة
// قائمة الأرقام التي تريد استهدافها

const specialProducts = ['p612373850', 'p89284855','p927696879'];

// التحقق إذا كان الرابط يحتوي على أي من هذه الأرقام
if (specialProducts.some(id => window.location.href.includes(id))) {
    document.body.classList.add('special-design-active');
}

// نهاية الكود



// إنشاء عنصر سكريبت جديد
const sallaScript = document.createElement('script');

// تحديد الخصائص المطلوبة
sallaScript.type = 'module';
sallaScript.src = 'https://cdn.assets.salla.network/prod/@salla.sa/fast-checkout-widget/v0.0.25/widget.esm.js';

// إضافة السكريبت إلى ترويسة الصفحة (head) ليتم تحميله
document.head.appendChild(sallaScript);



// القائمة
function toggleSidebar() {
    const menu = document.getElementById('sidebar-menu');
    const overlay = document.getElementById('sidebar-overlay');
    const isActive = menu.classList.toggle('active');
    overlay.classList.toggle('active');
    
    // قفل السكرول للموقع عند فتح المنيو
    document.body.style.overflow = isActive ? 'hidden' : '';

    // تصفير الصفحة للرئيسية عند الإغلاق
    if (!isActive) {
        setTimeout(() => showView('main-view'), 300);
    }
}

function showView(viewId) {
    // إخفاء كافة الرؤى
    document.querySelectorAll('.side-view').forEach(v => v.classList.remove('active'));
    // إظهار الرؤية المختارة
    const target = document.getElementById(viewId);
    if(target) target.classList.add('active');
}

// نهاية القائمة

// الشريط بالاسفل
function setActive(el) {
    // إزالة الكلاس من الجميع
    const items = document.querySelectorAll('.dock-item');
    items.forEach(item => {
        item.classList.remove('active');
    });
    
    // إضافة الكلاس للعنصر المختار
    el.classList.add('active');

    // إضافة اهتزاز بسيط (Haptic Feedback) إذا كان المتصفح يدعم ذلك
    if (window.navigator && window.navigator.vibrate) {
        window.navigator.vibrate(10);
    }
}

// سلايدر النخبة
const observer = new MutationObserver((mutations, obs) => {
    const slider = document.getElementById('athleteSlider');
    const dots = document.querySelectorAll('.dot');

    if (slider && dots.length > 0) {
        slider.addEventListener('scroll', () => {
            const scrollWidth = slider.scrollWidth - slider.clientWidth;
            if (scrollWidth <= 0) return;

            // الحصول على القيمة المطلقة للتمرير (لدعم RTL)
            const scrollLeft = Math.abs(slider.scrollLeft);
            
            // حساب رقم النقطة بناءً على نسبة التمرير وعدد النقاط
            // scrollLeft / scrollWidth يعطينا قيمة بين 0 و 1
            // نضربها في (عدد النقاط - 1) ثم نقربها لأقرب رقم صحيح
            const activeIndex = Math.round((scrollLeft / scrollWidth) * (dots.length - 1));

            updateDots(activeIndex, dots);
        });

        function updateDots(index, allDots) {
            allDots.forEach((dot, i) => {
                dot.classList.toggle('active', i === index);
            });
        }

        obs.disconnect();
    }
});

observer.observe(document.body, {
    childList: true,
    subtree: true
});


// اخر قسم صور الابطال المتحركة

const TransformationSlider = (() => {
    const settings = {
        trackId: 'rt-infinite-track',
        gap: 15,
        scrollSpeedBase: 50,
    };

    const calculateOriginalWidth = (trackElement) => {
        const cards = Array.from(trackElement.querySelectorAll('.rt-card'));
        let totalWidth = 0;
        cards.forEach((card) => {
            totalWidth += card.offsetWidth + settings.gap;
        });
        return totalWidth;
    };

    const initializeSlider = () => {
        const track = document.getElementById(settings.trackId);
        
        // إذا لم يجد العنصر أو كان العرض لا يزال 0 (لم يُحمل بعد)
        if (!track || track.dataset.rtInitialized === 'true') return false;

        const originalWidth = calculateOriginalWidth(track);
        if (originalWidth <= 0) return false; 

        const originalCards = Array.from(track.children);
        originalCards.forEach((card) => {
            const clone = card.cloneNode(true);
            track.appendChild(clone);
        });

        const animationDuration = Math.round(originalWidth / settings.scrollSpeedBase);
        track.style.setProperty('--track-width', `${originalWidth}px`);
        
        if (!document.getElementById('rt-animation-style')) {
            const style = document.createElement('style');
            style.id = 'rt-animation-style';
            style.textContent = `@keyframes scrollRTInfinite { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-1 * var(--track-width))); } }`;
            document.head.appendChild(style);
        }

        track.style.animation = `scrollRTInfinite ${animationDuration}s linear infinite`;
        track.dataset.rtInitialized = 'true';
        return true;
    };

    // المحاولة المتكررة (لحل مشكلة التأخير في منصة سلة)
    const retryInit = setInterval(() => {
        const isDone = initializeSlider();
        if (isDone) clearInterval(retryInit); // توقف عن المحاولة بمجرد العمل
    }, 500);

    // توقف المحاولة بعد 10 ثوانٍ كأقصى حد لتوفير موارد المتصفح
    setTimeout(() => clearInterval(retryInit), 10000);

    return { refresh: initializeSlider };
})();







// المنتجات



// صفحة المنتج

// صفحة المنتج

(function () {
    // استخدمنا أسماء فريدة جداً لتجنب التعارض مع سكربتات سلة الأخرى
    const SALLA_CUSTOM_CONFIG = {
        "612373850": {
            basePrice: 590,
            selectId: 'option-427350634',
            subTexts: {
                "298196394": "دفع شهري مرن",
                "1671642283": "الأكثر طلباً",
                "1032346548": "أفضل توفير"
            },
            genderOptionId: '194769320',
            daysOptionId: '1655969210',
            agreeOptionId: '752721077',
            agreeValue: '725848912'
        },
        "89284855": {
            basePrice: 450,
            selectId: 'option-687433429',
            subTexts: {
                "450153234": "دفع شهري مرن",
                "1957816851": "الأكثر طلباً",
                "1184762140": "أفضل توفير"
            },
            genderOptionId: '471343315',
            daysOptionId: '663602694',
            agreeOptionId: '363367902',
            agreeValue: '592187493'
        },
        "927696879": {
            basePrice: 4999,
            selectId: 'option-1542596351',
            subTexts: {
                "1432863144": "3 شهور"
            },
            genderOptionId: '32825142',
            daysOptionId: '1231051570',
            agreeOptionId: '2105798151',
            agreeValue: '1731030635'
        }
    };

    function runMyCustomLogic() {
        const productElem = document.querySelector('[id^="product-"]');
        if (!productElem) return;

        const pId = productElem.id.replace('product-', '');
        const cfg = SALLA_CUSTOM_CONFIG[pId];
        if (!cfg) return;

        applyTransformation(cfg.selectId, 'plan', cfg);
        applyTransformation('option-' + cfg.genderOptionId, 'gender', cfg);
        applyTransformation('option-' + cfg.daysOptionId, 'days', cfg);
        applyTransformation('option-' + cfg.agreeOptionId, 'terms', cfg);
    }

    function applyTransformation(selectId, type, cfg) {
        const originalSelect = document.getElementById(selectId);
        if (!originalSelect || originalSelect.dataset.applied === "true") return;

        originalSelect.dataset.applied = "true";
        originalSelect.style.display = 'none';

        const wrapper = document.createElement('div');
        wrapper.className = `custom-wrapper-${type}`;

        Array.from(originalSelect.options).forEach(opt => {
            if (opt.value === "" || (type === 'terms' && opt.value !== cfg.agreeValue)) return;

            const btn = document.createElement('div');
            btn.className = `custom-btn-${type}`;

            if (type === 'terms') {
                btn.innerHTML = `<span class="check-icon">✓</span> أوافق على الشروط والأحكام`;
            } else if (type === 'plan') {
                let base = parseFloat(cfg.basePrice) || 0; // السعر الأساسي (مثلاً 590)
                let optionPrice = 0; // قيمة الزيادة في الخيار

                // البحث عن السعر بين القوسين في نص الخيار (مثلاً: +100 ر.س)
                const match = opt.text.match(/\(([^)]+)\)/);
                if (match) {
                    // استخراج الأرقام فقط من النص الموجود بين القوسين
                    const num = match[1].replace(/[^\d.]/g, '');
                    if (num) optionPrice = parseFloat(num);
                }

                // الحسبة: السعر الأساسي + سعر الإضافة
                const totalDisplayPrice = base + optionPrice;

                btn.innerHTML = `
                    <div class="plan-price">${totalDisplayPrice} <span>ر.س</span></div>
                    <div class="plan-info">
                        <span class="plan-title">${opt.text.split('(')[0]}</span>
                        <span class="plan-sub">${cfg.subTexts[opt.value] || ''}</span>
                    </div>`;
            } else {
                btn.innerText = opt.text;
            }

            btn.onclick = () => {
                if (type === 'terms') {
                    btn.classList.toggle('active');
                    originalSelect.value = btn.classList.contains('active') ? opt.value : "";
                } else {
                    wrapper.querySelectorAll(`.custom-btn-${type}`).forEach(b => b.classList.remove('active'));
                    btn.classList.add('active');
                    originalSelect.value = opt.value;
                }
                originalSelect.dispatchEvent(new Event('change', { bubbles: true }));
            };
            wrapper.appendChild(btn);
        });
        originalSelect.parentElement.appendChild(wrapper);
    }


    // استخدام اسم متغير فريد جداً للمراقب
    const myUniqueSallaObserver = new MutationObserver(() => {
        runMyCustomLogic();
    });

    myUniqueSallaObserver.observe(document.body, { childList: true, subtree: true });

    // تشغيل أولي
    setTimeout(() => {
        runMyCustomLogic();
    }, 1000);

})();




// صفحة المنتج