/********* Header BG ****/
document.addEventListener("DOMContentLoaded", function () {

    const isHome =
        location.pathname === "/" ||
        location.pathname === "/ar" ||
        location.pathname === "/ar/" ||
        location.pathname === "/en" ||
        location.pathname === "/en/";

    if (!isHome) return;

    document.body.classList.add("salla-home");

    const elements = document.querySelectorAll(".store-header, .bg-inherit");

    function toggleHeaderColor() {
        elements.forEach(el => {
            el.classList.toggle("scrolled", window.scrollY > 50);
        });
    }

    toggleHeaderColor();
    window.addEventListener("scroll", toggleHeaderColor);

});


/********جدول القياسات  ******/
/********* Size Guide Popup - Salla *********/

(function () {

    function initSizeGuide() {

        /* منع تشغيل الكود أكثر من مرة */
        if (document.getElementById("size-guide-button")) {
            return;
        }

        /* التحقق من أن الصفحة صفحة منتج */
		const productMeta =
			document.querySelector(
				'meta[property="og:type"][content="product"]'
			) ||
			document.querySelector(
				'meta[property="product:price:amount"]'
			) ||
			document.querySelector(
				'meta[property="product:price:currency"]'
			);

		const productDetails =
			document.querySelector("salla-product-options") ||
			document.querySelector(".product-single") ||
			document.querySelector("#product-form");

		const isProductPage = Boolean(
			productMeta || productDetails
		);

        /* عدم إظهار دليل المقاسات خارج صفحات المنتجات */
        if (!isProductPage) {
            return;
        }

        /* إنشاء الزر الجانبي */
        const sizeGuideButton = document.createElement("button");

        sizeGuideButton.id = "size-guide-button";
        sizeGuideButton.type = "button";
        sizeGuideButton.setAttribute(
            "aria-label",
            "فتح دليل المقاسات"
        );

        sizeGuideButton.innerHTML = `
            <span class="size-guide-text">
                دليل المقاسات
            </span>

            <span class="size-guide-icon">
                <svg viewBox="0 0 24 24" aria-hidden="true">
                    <rect
                        x="3"
                        y="6"
                        width="18"
                        height="12"
                        rx="2"
                    ></rect>

                    <path
                        d="M7 6v5M10 6v3M13 6v5M16 6v3"
                    ></path>
                </svg>
            </span>
        `;

        /* إنشاء خلفية الـPopup ومحتواه */
        const sizeGuideOverlay = document.createElement("div");

        sizeGuideOverlay.id = "size-guide-overlay";
        sizeGuideOverlay.setAttribute("aria-hidden", "true");

        sizeGuideOverlay.innerHTML = `
            <div
                id="size-guide-popup"
                role="dialog"
                aria-modal="true"
                aria-label="دليل المقاسات"
            >
                <button
                    id="size-guide-close"
                    type="button"
                    aria-label="إغلاق النافذة"
                >
                    &times;
                </button>

                <div class="size-guide-content">

                    <h2 class="size-guide-title">
                        جدول قياسات الجسم |
                        Body Measurements Chart
                    </h2>

                    <div class="size-guide-table-wrapper">
                        <table class="size-guide-table">

                            <thead>
                                <tr>
                                    <th>
                                        EU<br>
                                        الأوروبي
                                    </th>

                                    <th>
                                        UK<br>
                                        البريطاني
                                    </th>

                                    <th>
                                        Bust (cm)<br>
                                        الصدر
                                    </th>

                                    <th>
                                        Waist (cm)<br>
                                        الخصر
                                    </th>

                                    <th>
                                        Hips (cm)<br>
                                        الأرداف
                                    </th>
                                </tr>
                            </thead>

                            <tbody>
                                <tr>
                                    <td>36</td>
                                    <td>8</td>
                                    <td>83</td>
                                    <td>65</td>
                                    <td>92</td>
                                </tr>

                                <tr>
                                    <td>38</td>
                                    <td>10</td>
                                    <td>88</td>
                                    <td>70</td>
                                    <td>97</td>
                                </tr>

                                <tr>
                                    <td>40</td>
                                    <td>12</td>
                                    <td>93</td>
                                    <td>75</td>
                                    <td>102</td>
                                </tr>

                                <tr>
                                    <td>42</td>
                                    <td>14</td>
                                    <td>98</td>
                                    <td>80</td>
                                    <td>107</td>
                                </tr>

                                <tr>
                                    <td>44</td>
                                    <td>16</td>
                                    <td>103</td>
                                    <td>85</td>
                                    <td>112</td>
                                </tr>

                                <tr>
                                    <td>46</td>
                                    <td>18</td>
                                    <td>108</td>
                                    <td>90</td>
                                    <td>117</td>
                                </tr>
                            </tbody>

                        </table>
                    </div>

                    <div class="size-guide-note">

                        <span class="size-guide-note-ar">
                            القياسات إرشادية وقد تختلف قليلاً
                            حسب تصميم الفستان ونوع القماش.
                            للحصول على المقاس الأنسب، قارني
                            قياسات جسمك بالجدول.
                        </span>

                        <span class="size-guide-note-en">
                            Measurements are provided as a general
                            guide and may vary slightly depending
                            on the dress design and fabric. For the
                            best fit, compare your body measurements
                            with the chart.
                        </span>

                    </div>

                </div>
            </div>
        `;

        /* إضافة الزر والنافذة إلى الصفحة */
        document.body.appendChild(sizeGuideButton);
        document.body.appendChild(sizeGuideOverlay);

        const sizeGuidePopup =
            document.getElementById("size-guide-popup");

        const sizeGuideClose =
            document.getElementById("size-guide-close");

        /* فتح النافذة */
        function openSizeGuide() {
            sizeGuideOverlay.classList.add("is-open");
            sizeGuideOverlay.setAttribute(
                "aria-hidden",
                "false"
            );

            document.body.classList.add("size-guide-open");
        }

        /* إغلاق النافذة */
        function closeSizeGuide() {
            sizeGuideOverlay.classList.remove("is-open");
            sizeGuideOverlay.setAttribute(
                "aria-hidden",
                "true"
            );

            document.body.classList.remove("size-guide-open");
        }

        /* الضغط على الزر */
        sizeGuideButton.addEventListener(
            "click",
            openSizeGuide
        );

        /* الضغط على زر الإغلاق */
        sizeGuideClose.addEventListener(
            "click",
            closeSizeGuide
        );

        /* منع الإغلاق عند الضغط داخل النافذة */
        sizeGuidePopup.addEventListener(
            "click",
            function (event) {
                event.stopPropagation();
            }
        );

        /* الإغلاق عند الضغط على الخلفية */
        sizeGuideOverlay.addEventListener(
            "click",
            closeSizeGuide
        );

        /* الإغلاق بزر Escape */
        document.addEventListener(
            "keydown",
            function (event) {
                if (
                    event.key === "Escape" &&
                    sizeGuideOverlay.classList.contains(
                        "is-open"
                    )
                ) {
                    closeSizeGuide();
                }
            }
        );
    }

    function startSizeGuide() {

        /* محاولة التشغيل مباشرة */
        initSizeGuide();

        /*
         * بعض عناصر منصة سلة تُحمّل بعد اكتمال الصفحة،
         * لذلك نعيد التحقق لمدة خمس ثوانٍ
         */
        let attempts = 0;

        const checkInterval = setInterval(function () {

            initSizeGuide();
            attempts++;

            if (
                document.getElementById(
                    "size-guide-button"
                ) ||
                attempts >= 10
            ) {
                clearInterval(checkInterval);
            }

        }, 500);
    }

    /*
     * تشغيل الكود سواء تم تحميله
     * قبل اكتمال الصفحة أو بعدها
     */
    if (document.readyState === "loading") {
        document.addEventListener(
            "DOMContentLoaded",
            startSizeGuide
        );
    } else {
        startSizeGuide();
    }

})();