/* Add custom Js styles below */ 
/* Add custom Js code below */ 

document.addEventListener('DOMContentLoaded', function () {
    let sbc = document.querySelector('.store-footer .leading-6');
    
    if (sbc) {
        let newContent = `
        <div class="mt-5 seha"> 
            <a href="https://hls.seha.sa/#/establishment-licenses/9B57054F-2DCB-4DB3-8299-62DECC04444D/print" 
                class="flex text-center items-center justify-center h-full" target="_blank"> 
                <img style="width:6rem" class="object-contain" height="100%" 
                    src="https://i.ibb.co/RvvScTY/1123px-Saudi-Ministry-of-Health-Logo-svg.png" 
                    alt="seha"> 
                <div>
                    <p class="mb-3 font-bold">بترخيص من وزارة الصحة</p>
                    <span>1400056471</span>
                </div>
            </a> 
        </div>`;
        
        sbc.insertAdjacentHTML('afterend', newContent);
    } else {
        console.error("Element with class '.store-footer .leading-6' not found.");
    }
});

/* Homepage reviews */ 


document.addEventListener("DOMContentLoaded", () => {
    let brandSection = document.querySelector("section.s-block.s-block--brands");

    if (brandSection) {
        let lang = document.documentElement.lang || "en";

        let reviews = [
            { name: "Natali Itan", rating: 5, text_en: "The service was great, the staff was very friendly, they explained everything about the vitamins and the nurse did everything carefully. It's comfortable that they come to your home. I recommend.", text_ar: "الخدمة كانت رائعة، الطاقم كان ودودًا جدًا، شرحوا كل شيء عن الفيتامينات، والممرضة قامت بكل شيء بعناية. من المريح أنهم يأتون إلى منزلك. أنصح بالخدمة." },
            { name: "Johara Ebrahem", rating: 5, text_en: "The staff came well prepared+ excellent experience+ very friendly. I can’t wait to see and feel the difference after the vita drip.", text_ar: "الطاقم جاء مجهزًا جيدًا + تجربة ممتازة + ودود جدًا. لا أطيق الانتظار لرؤية الفرق بعد الفيتا دريب." },
            { name: "Mohamed Al-Attas", rating: 4.5, text_en: "It was a nice experience and great service with great care, for sure I will do it again.", text_ar: "كانت تجربة رائعة وخدمة ممتازة برعاية كبيرة، بالتأكيد سأقوم بها مرة أخرى." },
            { name: "Manal Abothnain", rating: 5, text_en: "Dr. Samah was a breath of fresh air. Thank you, doctor.", text_ar: "الدكتورة سماح كانت رائعة بحق. شكرًا لكِ دكتورة." }
        ];

        let selectedReviews = reviews.map(review => ({
            name: review.name,
            rating: review.rating,
            text: lang.includes("ar") ? review.text_ar : review.text_en
        }));

        let reviewSection = document.createElement("section");
        reviewSection.classList.add("unique-reviews-section");

        reviewSection.innerHTML = `
            <style>
                .unique-reviews-section { 
                    width: 100%; 
                    padding: 40px 0; 
                    background: #ffffff; 
                    text-align: center;
                    margin-top: 50px;
                }
                .swiper-container { 
                    width: 100%;
                    overflow: hidden;
                    padding: 20px 0;
                }
                .swiper-wrapper {
                    display: flex;
                    align-items: center;
                }
                .unique-swiper-slide { 
                    display: flex; 
                    flex-direction: column; 
                    align-items: center; 
                    justify-content: center; 
                    background: white; 
                    padding: 20px; 
                    border-radius: 10px; 
                    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); 
                    max-width: 280px; 
                    min-height: 250px;
                    margin: 10px; 
                    position: relative;
                }
                .unique-review-name { 
                    font-size: 1.2rem; 
                    font-weight: bold; 
                    color: #333; 
                    display: flex; 
                    align-items: center;
                    gap: 8px;
                }
                .verified-badge {
                    width: 18px;
                    height: 18px;
                }
                .unique-stars {
                    display: flex;
                    justify-content: center;
                    gap: 3px;
                    margin-top: 5px;
                }
                .google-logo {
                    width: 30px;
                    height: 30px;
                    position: absolute;
                    bottom: 10px;
                    right: 10px;
                }
            </style>
            <div class="mx-auto max-w-7xl lg:px-8">
                <div class="container mt-12">
                    <h2>${lang.includes("ar") ? "آراء عملائنا" : "Customer Reviews"}</h2>
                    <div class="swiper-container unique-swiper">
                        <div class="swiper-wrapper">
                            ${selectedReviews.map(review => `
                                <div class="swiper-slide unique-swiper-slide">
                                    <span class="unique-review-name">
                                        ${review.name}
                                        <img class="verified-badge" src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Twitter_Verified_Badge.svg" alt="Verified">
                                    </span>
                                    <span class="unique-stars">
                                        ${generateStars(review.rating)}
                                    </span>
                                    <p class="unique-review-text">${review.text}</p>
                                    <img class="google-logo" src="https://cdn1.iconfinder.com/data/icons/google-s-logo/150/Google_Icons-09-1024.png" alt="Google">
                                </div>
                            `).join("")}
                        </div>
                        <div class="swiper-pagination unique-swiper-pagination"></div>
                    </div>
                </div>
            </div>
        `;

        brandSection.replaceWith(reviewSection);

        // تأخير تحميل السوايبر لضمان عمل التمرير التلقائي بعد التحديث
        setTimeout(() => {
            let swiper = new Swiper(".unique-swiper", {
                loop: true,
                spaceBetween: 15,
                slidesPerView: 1.2,
                centeredSlides: true,
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
                grabCursor: true,
                autoplay: {
                    delay: 3000, // تغيير الشريحة كل 3 ثواني
                    disableOnInteraction: false, // استمر في التمرير التلقائي حتى بعد التفاعل
                },
                breakpoints: {
                    640: { slidesPerView: 1.8 },
                    768: { slidesPerView: 2.5 }, 
                    1024: { slidesPerView: 3 },
                },
            });
        }, 500); // تأخير بسيط لضمان تحميل DOM بالكامل
    }

    function generateStars(rating) {
        let fullStar = '⭐';
        let halfStar = '⭐️';
        let stars = fullStar.repeat(Math.floor(rating));
        if (rating % 1 !== 0) stars += halfStar;
        return stars;
    }
});






/* product card rating */ 
document.addEventListener("DOMContentLoaded", function () {
    function addRatingStars() {
        let productCards = document.querySelectorAll(".product-card");

        productCards.forEach(function (card) {
            let titleElement = card.querySelector(".product-card__title a");

            // التحقق من وجود العنوان والرابط
            if (titleElement) {
                let productURL = titleElement.href;

                // قائمة المنتجات التي نريد إضافة التقييم لها فقط
                let allowedProducts = {
                    "https://evercare.sa/ar/coenzymeq10/p2138592148": "★★★★☆", // 4.5 نجوم
                    "https://evercare.sa/ar/nad+drip/p401900352": "★★★★★",  // 5 نجوم
                    "https://evercare.sa/ar/the-elixir/p39534842": "★★★★☆"  // 4.5 نجوم
                };

                // التحقق مما إذا كان المنتج ضمن القائمة
                if (allowedProducts[productURL] && !card.querySelector(".rating-stars")) {
                    // إنشاء عنصر التقييم
                    let ratingContainer = document.createElement("div");
                    ratingContainer.classList.add("rating-stars");
                    ratingContainer.style.display = "flex";
                    ratingContainer.style.alignItems = "center";
                    ratingContainer.style.justifyContent = "center"; // جعلها في المنتصف
                    ratingContainer.style.marginTop = "10px"; // إضافة مسافة بين العنوان والتقييم
                    ratingContainer.style.fontSize = "22px"; // تكبير حجم النجوم
                    ratingContainer.style.color = "#FFD700"; // لون النجوم الذهبي
                    ratingContainer.style.fontWeight = "bold";

                    // تحديد التقييم بناءً على المنتج
                    ratingContainer.innerHTML = allowedProducts[productURL];

                    // إدراج التقييم أسفل اسم المنتج مباشرةً وفي المنتصف
                    titleElement.parentNode.insertBefore(ratingContainer, titleElement.nextSibling);
                }
            }
        });
    }

    // تشغيل الكود فورًا عند تحميل الصفحة
    addRatingStars();

    // مراقبة التغيرات في الـ DOM وإعادة تشغيل الكود إذا لزم الأمر
    let observer = new MutationObserver(addRatingStars);
    observer.observe(document.body, { childList: true, subtree: true });
});



/* product page rating */ 
document.addEventListener("DOMContentLoaded", function () {
    function addReviewsSlider() {
        let isMobile = window.innerWidth <= 768; // يتحقق إذا كان الجهاز موبايل أو تابلت
        let formElement = document.getElementById("product-form");

        if (formElement) {
            let productID = formElement.querySelector("input[name='id']")?.value;

            let allowedProducts = {
                "2138592148": [
                    { name: "Sultan Alsultan", review: "It’s the first time for me and it seems a good experience. Thank you to Dr.Samah" },
                    { name: "Waleed Al-Ghonaim", review: "Great staff and great home service, thank you" }
                ],
                "401900352": [
                    { name: "hiba fattouh", review: "Very helpful experience and friendly and professional staff." },
                    { name: "aljazy alsalem", review: "Best team and best service won’t be the last inshallah" }
                ],
                "39534842": [
                    { name: "Sultan Alsultan", review: "It’s the first time for me and it seems a good experience. Thank you to Dr.Samah" },
                    { name: "Waleed Al-Ghonaim", review: "Great staff and great home service, thank you" }
                ]
            };

            if (allowedProducts[productID] && !document.querySelector(".reviews-slider")) {
                // إنشاء عنصر السلايدر
                let sliderContainer = document.createElement("div");
                sliderContainer.classList.add("reviews-slider");
                sliderContainer.style.width = "100%";
                sliderContainer.style.maxWidth = "400px";
                sliderContainer.style.margin = "15px auto";
                sliderContainer.style.padding = "10px";
                sliderContainer.style.background = "#f8f8f8";
                sliderContainer.style.borderRadius = "8px";
                sliderContainer.style.boxShadow = "0 2px 5px rgba(0,0,0,0.1)";
                sliderContainer.style.textAlign = "center";
                sliderContainer.style.position = "relative";

                // إنشاء عنصر الريفيو
                let reviewContent = document.createElement("div");
                reviewContent.classList.add("review-content");
                reviewContent.style.transition = "opacity 0.5s";
                reviewContent.style.opacity = "1";
                reviewContent.style.padding = "10px";

                let currentReviewIndex = 0;
                let reviews = allowedProducts[productID];

                function updateReview() {
                    let review = reviews[currentReviewIndex];
                    reviewContent.innerHTML = `
                        <div style="display: flex; align-items: center; justify-content: center; gap: 5px;">
                            <strong>${review.name}</strong> 
                            <span style="display: flex; align-items: center;">
                                <img src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Twitter_Verified_Badge.svg" 
                                     alt="Verified" width="18" height="18" 
                                     style="margin-left: 5px;">
                            </span>
                        </div>
                        <div style="color: #FFD700; font-size: 20px; margin: 5px 0;">★★★★★</div>
                        <p style="font-size: 14px; color: #333;">"${review.review}"</p>
                    `;

                    currentReviewIndex = (currentReviewIndex + 1) % reviews.length;
                }

                updateReview();
                setInterval(updateReview, 3000);

                sliderContainer.appendChild(reviewContent);

                // إنشاء زر التقييمات على جوجل
                let googleReviewButton = document.createElement("a");
                googleReviewButton.href = "https://www.google.com/maps/place/evercare/@24.8126824,46.5994295,17z/data=!4m8!3m7!1s0x4db64449decbdc3f:0x3b25326e416ccd51!8m2!3d24.8128075!4d46.5997135!9m1!1b1!16s%2Fg%2F11vsd6hdrc?entry=ttu&g_ep=EgoyMDI1MDIxOS4xIKXMDSoASAFQAw%3D%3D";
                googleReviewButton.target = "_blank";
                googleReviewButton.style.display = "inline-flex"; // لجعله قابلًا للنقر
                googleReviewButton.style.alignItems = "center";
                googleReviewButton.style.justifyContent = "center";
                googleReviewButton.style.gap = "10px";
                googleReviewButton.style.marginTop = "10px";
                googleReviewButton.style.padding = "10px 15px";
                googleReviewButton.style.background = "#fff"; // زر أبيض
                googleReviewButton.style.color = "#000"; // نص أسود
                googleReviewButton.style.borderRadius = "5px";
                googleReviewButton.style.fontSize = "16px";
                googleReviewButton.style.fontWeight = "bold";
                googleReviewButton.style.textDecoration = "none";
                googleReviewButton.style.cursor = "pointer";
                googleReviewButton.style.boxShadow = "0px 2px 5px rgba(0, 0, 0, 0.2)"; // ظل خفيف
                googleReviewButton.style.position = "relative"; // لمنع التداخل
                googleReviewButton.style.zIndex = "9999"; // لضمان أن يكون قابلًا للنقر
                googleReviewButton.style.pointerEvents = "auto"; // تأكيد قابلية النقر

                googleReviewButton.innerHTML = `
                    <img src="https://cdn1.iconfinder.com/data/icons/google-s-logo/150/Google_Icons-09-1024.png" width="20" height="20" alt="Google">
                    تقييمات عملائنا على قوقل
                `;

                // منع الفورم من إعادة التوجيه عند النقر على الزر
                googleReviewButton.addEventListener("click", function (event) {
                    event.stopPropagation(); // منع الحدث من الانتقال إلى العناصر الأخرى
                });

                sliderContainer.appendChild(googleReviewButton);

                if (isMobile) {
                    // إذا كان الجهاز موبايل، نضيف السلايدر تحت <form>
                    formElement.insertAdjacentElement("afterend", sliderContainer);
                } else {
                    // إذا كان الجهاز كمبيوتر، نضيفه تحت زر الحجز كما في الكود السابق
                    let bookingButton = document.querySelector(".sticky-product-bar .s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary");
                    if (bookingButton) {
                        bookingButton.insertAdjacentElement("afterend", sliderContainer);
                    }
                }
            }
        }
    }

    // تشغيل الكود فورًا عند تحميل الصفحة
    addReviewsSlider();

    // مراقبة التغيرات في الـ DOM وإعادة تشغيل الكود إذا لزم الأمر
    let observer = new MutationObserver(addReviewsSlider);
    observer.observe(document.body, { childList: true, subtree: true });
});


document.addEventListener("DOMContentLoaded", function () {
    // استهداف العنصر الذي يحتوي على النص "الباقات المتكاملة"
    let packageLink = document.querySelector("a[aria-label='الباقات المتكاملة']");

    if (packageLink) {
        // إنشاء عنصر ليبل "الأكثر طلبًا"
        let bestSellerLabel = document.createElement("span");
        bestSellerLabel.textContent = "الأكثر طلباً";
        bestSellerLabel.classList.add("best-seller-label");

        // تخصيص التنسيق
        bestSellerLabel.style.fontSize = "14px";
        bestSellerLabel.style.fontWeight = "bold";
        bestSellerLabel.style.color = "#fff"; // النص أبيض
        bestSellerLabel.style.padding = "2px 8px"; // إضافة padding لظهور الليبل بشكل أفضل
        bestSellerLabel.style.borderRadius = "5px"; // تقويس الأطراف
        bestSellerLabel.style.backgroundColor = "#0000FF"; // خلفية زرقاء
        bestSellerLabel.style.transition = "transform 0.5s ease-in-out, opacity 0.5s ease-in-out"; // إضافة انيميشن حركة وشفافية
        bestSellerLabel.style.transform = "translateY(20px)"; // البدء من الأسفل
        bestSellerLabel.style.opacity = "0"; // جعل الليبل غير مرئي بدايةً

        // جعل الرابط يستخدم flexbox ليظهر العناصر في نفس السطر
        packageLink.style.display = "flex"; // استخدام flex لجعل العناصر في نفس السطر
        packageLink.style.alignItems = "center"; // محاذاة العناصر في المنتصف عموديًا
        packageLink.style.gap = "10px"; // إضافة مسافة بين النص والليبل

        // إضافة الليبل إلى الرابط بعد النص
        packageLink.appendChild(bestSellerLabel);

        // بعد إضافة الليبل، نستخدم انيميشن لظهوره من الأسفل للأعلى
        setTimeout(() => {
            bestSellerLabel.style.transform = "translateY(0)"; // حركة من الأسفل للأعلى
            bestSellerLabel.style.opacity = "1"; // جعل النص مرئيًا
        }, 10); // تأخير صغير لضمان تطبيق التغيير بعد إضافته
    }
});



/* mobile menu */ 

document.addEventListener("DOMContentLoaded", function () {
    // استهداف قائمة الموبايل
    let mobileMenu = document.querySelector(".main-menu");

    if (mobileMenu) {
        // إنشاء العنصر الجديد (الزر "تواصل مع طبيبك الآن")
        let contactDoctorButton = document.createElement("li");
        contactDoctorButton.classList.add("lg:hidden", "text-sm", "font-bold", "rounded-md", "border", "border-green-500", "bg-green-100", "p-2", "hover:bg-green-200");

        contactDoctorButton.innerHTML = `
            <a class="text-gray-700 !flex items-center gap-x-2" 
               target="_self" 
               href="https://api.whatsapp.com/send/?phone=%2B966510012100&text=%D9%85%D8%B1%D8%AD%D8%A8%D8%A7+..+%D9%84%D8%AF%D9%8A+%D8%A7%D8%B3%D8%AA%D9%81%D8%B3%D8%A7%D8%B1+%D8%A8%D8%AE%D8%B5%D9%88%D8%B5+&type=phone_number&app_absent=0" 
               aria-label="تواصل مع طبيبك الآن">
                <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WhatsApp" class="w-5 h-5">
                <span>تواصل مع طبيبك الآن</span>
            </a>
        `;

        // إضافة الزر إلى القائمة
        mobileMenu.appendChild(contactDoctorButton);
    }
});