\r\n `;\r\n\r\n rdp.parentNode.insertBefore(wrapper, rdp);\r\n\r\n const baseRules = window.BinaeryRulesData || { disabledWeekdays: [0, 1, 2, 6], disabledDates: [], disabledRanges: [] };\r\n const cfg = { firstDay: 1 };\r\n\r\n // Reactivate Calendar Specific Condition: Disable all dates in the current week (e.g. 29, 30)\r\n const currentWeekDates = getCurrentWeekDates(window.ukToday);\r\n const existingDisabled = Array.isArray(baseRules.disabledDates) ? baseRules.disabledDates.slice() : [];\r\n const disabledDates = Array.from(new Set(existingDisabled.concat(currentWeekDates)));\r\n const existingRanges = Array.isArray(baseRules.disabledRanges) ? baseRules.disabledRanges.slice() : [];\r\n const disabledRanges = existingRanges.concat([{\r\n start: currentWeekDates[0],\r\n end: currentWeekDates[currentWeekDates.length - 1]\r\n }]);\r\n const specialEnabled = (baseRules.specialEnabledDates || []).filter(\r\n (d) => !currentWeekDates.includes(d)\r\n );\r\n\r\n const reactivateRules = Object.assign({}, baseRules, {\r\n isSkioPortal: true,\r\n disabledDates: disabledDates,\r\n disabledRanges: disabledRanges,\r\n specialEnabledDates: specialEnabled\r\n });\r\n\r\n // Prevent accidental clicks on the inline wrapper from triggering overlay dismiss or removeChild errors\r\n wrapper.addEventListener(\"click\", function (e) {\r\n if (e.target === wrapper) {\r\n e.stopPropagation();\r\n }\r\n }, true);\r\n\r\n // Initialize our dynamic calendar inside the wrapper\r\n window.BinaeryCalendar.initOverlay(wrapper, cfg, reactivateRules);\r\n // Listen for attribute changes on the calendar host to detect when a user clicks a date\r\n const host = wrapper.querySelector(\"[data-binaery-role='calendar-host']\");\r\n if (host) {\r\n const observer = new MutationObserver((mutations) => {\r\n mutations.forEach((mutation) => {\r\n if (mutation.attributeName === \"data-selected-iso\") {\r\n const iso = host.getAttribute(\"data-selected-iso\");\r\n if (iso) {\r\n syncIsoToRdp(iso, modal);\r\n }\r\n }\r\n });\r\n });\r\n observer.observe(host, { attributes: true });\r\n\r\n function showReactivateLoading() {\r\n let overlay = document.getElementById(\"binaery-portal-loading-overlay\");\r\n if (!overlay) {\r\n overlay = document.createElement(\"div\");\r\n overlay.id = \"binaery-portal-loading-overlay\";\r\n overlay.setAttribute(\"role\", \"status\");\r\n overlay.setAttribute(\"aria-live\", \"polite\");\r\n overlay.style =\r\n \"position:fixed; inset:0; background:rgba(255,255,255,0.7); z-index:2147483647; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; backdrop-filter:blur(2px);\";\r\n overlay.innerHTML =\r\n '' +\r\n 'Reactivating your subscription\u2026' +\r\n '';\r\n document.body.appendChild(overlay);\r\n }\r\n overlay.style.display = \"flex\";\r\n }\r\n\r\n // Guard against duplicate registration on the same long-lived modal node\r\n if (!modal.__binaeryReloadListenerAttached) {\r\n modal.__binaeryReloadListenerAttached = true;\r\n const controller = new AbortController();\r\n let reloadTriggered = false;\r\n\r\n window.addEventListener(\r\n \"pagehide\",\r\n () => {\r\n controller.abort();\r\n modal.__binaeryReloadListenerAttached = false;\r\n },\r\n { once: true }\r\n );\r\n\r\n modal.addEventListener(\r\n \"click\",\r\n function (e) {\r\n try {\r\n if (reloadTriggered) return;\r\n\r\n const btn = e.target.closest(\r\n \"button, [role='button'], input[type='submit'], .MuiButton-root\"\r\n );\r\n if (!btn) return;\r\n\r\n if (btn.closest(\".binaery-reactivate-wrapper\") || btn.closest(\".rdp\")) return;\r\n if (btn.disabled || btn.getAttribute(\"aria-disabled\") === \"true\") return;\r\n\r\n const btnText = (btn.textContent || \"\").trim().toLowerCase();\r\n const ariaLabel = (btn.getAttribute(\"aria-label\") || \"\").toLowerCase();\r\n\r\n const isConfirmBtn =\r\n btnText.includes(\"confirm\") ||\r\n btnText.includes(\"reactivate\") ||\r\n ariaLabel.includes(\"confirm\") ||\r\n ariaLabel.includes(\"reactivate\");\r\n\r\n if (isConfirmBtn) {\r\n // Always read host from the live DOM because React re-renders can replace the wrapper\r\n const liveHost = modal.querySelector(\r\n \".binaery-reactivate-wrapper [data-binaery-role='calendar-host']\"\r\n );\r\n const datePicked = Boolean(liveHost && liveHost.dataset.selectedIso);\r\n\r\n if (datePicked) {\r\n reloadTriggered = true;\r\n showReactivateLoading();\r\n\r\n let obs;\r\n const reloadTimer = setTimeout(function () {\r\n if (obs) obs.disconnect();\r\n if (\"scrollRestoration\" in history) {\r\n history.scrollRestoration = \"manual\";\r\n }\r\n window.scrollTo(0, 0);\r\n window.location.reload();\r\n }, 10000);\r\n\r\n obs = new MutationObserver(() => {\r\n if (modal.querySelector(\".Mui-error, [role='alert']\")) {\r\n clearTimeout(reloadTimer);\r\n obs.disconnect();\r\n reloadTriggered = false;\r\n const overlay = document.getElementById(\"binaery-portal-loading-overlay\");\r\n if (overlay) overlay.style.display = \"none\";\r\n }\r\n });\r\n\r\n obs.observe(modal, { childList: true, subtree: true });\r\n }\r\n }\r\n } catch (err) {\r\n console.error(\"[Binaery]: reactivate click handler error\", err);\r\n }\r\n },\r\n { capture: true, signal: controller.signal }\r\n );\r\n }\r\n }\r\n }\r\n\r\n function syncIsoToRdp(iso, modal) {\r\n const parts = String(iso).slice(0, 10).split(\"-\").map(Number);\r\n const tY = parts[0];\r\n const tM = parts[1] - 1;\r\n const tD = parts[2];\r\n\r\n function tryClick(attempts = 0) {\r\n if (attempts > 10) return; // Prevent infinite loops\r\n \r\n // ALWAYS dynamically query the rdp container as React frequently re-renders and destroys old DOM nodes\r\n const rdpContainer = modal.querySelector(\".rdp\");\r\n if (!rdpContainer) {\r\n setTimeout(() => tryClick(attempts + 1), 50);\r\n return;\r\n }\r\n\r\n const caption = rdpContainer.querySelector(\".rdp-caption_label\");\r\n if (!caption) return;\r\n \r\n // Extract month and year from caption (e.g. \"October 2026\")\r\n const captionText = caption.textContent.replace(/[^a-zA-Z0-9\\s]/g, \"\").trim();\r\n const rdpDate = new Date(captionText);\r\n if (isNaN(rdpDate.getTime())) return;\r\n \r\n const rM = rdpDate.getMonth();\r\n const rY = rdpDate.getFullYear();\r\n\r\n if (rY === tY && rM === tM) {\r\n // We are in the right month, click the matching day\r\n const days = rdpContainer.querySelectorAll(\".rdp-day:not(.rdp-day_outside)\");\r\n for (let i = 0; i < days.length; i++) {\r\n if (parseInt(days[i].textContent, 10) === tD) {\r\n const btn = days[i];\r\n \r\n // Prevent deselecting: if Skio's calendar already has this date selected, do not click it again.\r\n // (react-day-picker toggles selection off if you click an already-selected date).\r\n if (btn.getAttribute(\"aria-selected\") === \"true\" || btn.classList.contains(\"rdp-day_selected\")) {\r\n return;\r\n }\r\n\r\n // Dispatch both a native click and React-compatible pointer events\r\n btn.click();\r\n btn.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, cancelable: true, view: window }));\r\n btn.dispatchEvent(new MouseEvent('mouseup', { bubbles: true, cancelable: true, view: window }));\r\n return;\r\n }\r\n }\r\n } else {\r\n // Navigate the hidden .rdp calendar to the target month\r\n const isFuture = (tY > rY) || (tY === rY && tM > rM);\r\n const navBtn = isFuture ? rdpContainer.querySelector(\".rdp-nav_button_next\") : rdpContainer.querySelector(\".rdp-nav_button_previous\");\r\n if (navBtn && !navBtn.disabled) {\r\n navBtn.click();\r\n // Wait for React to re-render the calendar before trying again\r\n setTimeout(() => tryClick(attempts + 1), 50);\r\n }\r\n }\r\n }\r\n tryClick();\r\n }\r\n\r\n // \uD83D\uDEAB Automatically hide \"8 week\" / \"8 weeks\" options in Skio Portal dropdowns & modals\r\n function hide8WeekOptions() {\r\n const options = document.querySelectorAll(\"option\");\r\n options.forEach((opt) => {\r\n // Don't remove options inside Reactivate modals\r\n if (opt.closest(\".skio-modal-reactivate, [data-modal-type='reactivate']\")) return;\r\n\r\n const val = (opt.value || \"\").toLowerCase();\r\n const txt = (opt.textContent || \"\").toLowerCase();\r\n // Skip removal if option is currently selected to preserve existing 8-week subscriber state\r\n if ((val.includes(\"8 week\") || txt.includes(\"8 week\")) && !opt.selected) {\r\n opt.remove();\r\n }\r\n });\r\n }\r\n\r\n const selector = \".SubscriptionGroup-Active\";\r\n let bannerInjectedOrPending = false; \r\n\r\n // Initial execution\r\n classifySkioModals();\r\n hide8WeekOptions();\r\n\r\n const existing = document.querySelector(selector);\r\n if (existing && !document.querySelector(\".custom-subscription-info\") && !bannerInjectedOrPending) {\r\n runLogic(existing);\r\n }\r\n\r\n const observer = new MutationObserver(() => {\r\n try {\r\n classifySkioModals();\r\n hide8WeekOptions();\r\n\r\n const el = document.querySelector(selector);\r\n if (el && !document.querySelector(\".custom-subscription-info\") && !bannerInjectedOrPending) {\r\n runLogic(el);\r\n }\r\n } catch (err) {\r\n console.error(\"[EQ Debug]: Subscription observer error\", err);\r\n }\r\n });\r\n\r\n observer.observe(document.body, {\r\n childList: true,\r\n subtree: true,\r\n });\r\n\r\n // Safety net: disconnect observer on page unload/teardown\r\n window.addEventListener(\"pagehide\", () => observer.disconnect());\r\n\r\n function runLogic(element) {\r\n if (document.querySelector(\".custom-subscription-info\") || bannerInjectedOrPending) {\r\n return; // \uD83D\uDEAB Banner already present or fetch in-flight\r\n }\r\n bannerInjectedOrPending = true;\r\n\r\n //debugger;\r\n let customerInformation = getLatestSkioUserEmail({ clean: true });\r\n let customerEmailID = null;\r\n if (customerInformation != null) {\r\n customerEmailID = customerInformation.value.split(\"-skioSiteId-\")[0];\r\n }\r\n /*\r\n console.log(`[EQ Debug]: Customer Email ID found`, customerEmailID);\r\n console.log(`[EQ Debug]: Customer Information found`, customerInformation);\r\n */\r\n function attachBanner(targetElement, infoDiv) {\r\n if (!targetElement) {\r\n console.log(\"[EQ Debug]: targetElement not found\");\r\n return;\r\n }\r\n\r\n if (targetElement.parentNode) {\r\n targetElement.parentNode.insertBefore(infoDiv, targetElement);\r\n } else {\r\n targetElement.prepend(infoDiv);\r\n }\r\n }\r\n\r\n if (customerEmailID == null) {\r\n let textContentToAdd = `\u26A0\uFE0F Warning: Anything you change below won't affect orders that have already been paid for. If you're looking to make changes, reach out to us on email or WhatsApp!`;\r\n const infoDiv = document.createElement(\"div\");\r\n infoDiv.className = \"custom-subscription-info\";\r\n infoDiv.innerHTML = `\r\n\r\n
\r\n ${textContentToAdd}\r\n
\r\n `;\r\n attachBanner(element, infoDiv);\r\n console.log(\r\n `[EQ Debug]: Found element for subscriptions page`,\r\n element\r\n );\r\n } else {\r\n const requestOptions = {\r\n method: \"GET\",\r\n redirect: \"follow\",\r\n };\r\n fetch(\r\n `https://stockedfood.eqserver.net/order/graphql/customer/last5/by-email/${customerEmailID}`,\r\n requestOptions\r\n )\r\n .then((response) => response.text())\r\n .then((result) => {\r\n const latestOrder = JSON.parse(result)?.orders?.[0];\r\n console.log(latestOrder?.processedAt);\r\n console.log(latestOrder?.tags);\r\n let tags = null;\r\n let orderPaymentDate = latestOrder?.processedAt;\r\n tags = latestOrder?.tags;\r\n let dateOfDelivery = extractDateFromTags(tags);\r\n let dateOfDeliveryFormatted = null;\r\n if (dateOfDelivery != null) {\r\n dateOfDeliveryFormatted = formatDDMMYYYYToReadable(dateOfDelivery);\r\n console.log(\r\n `[EQ Debug]: Date of delivery extracted from tags: ${dateOfDeliveryFormatted}`\r\n );\r\n }\r\n let formattedDate = new Date(orderPaymentDate).toLocaleDateString(\r\n \"en-GB\",\r\n {\r\n day: \"2-digit\",\r\n month: \"long\",\r\n year: \"numeric\",\r\n }\r\n );\r\n\r\n let deliveryTextContentToAdd = ``;\r\n let textContentToAdd = ``;\r\n if (dateOfDelivery != null) {\r\n deliveryTextContentToAdd = ` for delivery on ${dateOfDeliveryFormatted}`;\r\n let todayDate = new Date();\r\n let deliveryDateObj = new Date(dateOfDeliveryFormatted);\r\n if (deliveryDateObj > todayDate) {\r\n textContentToAdd = `\u26A0\uFE0F Warning: you have an order that has been paid for on ${formattedDate}${deliveryTextContentToAdd}. Anything you change below won't affect this order so if you're looking to make changes, reach out to us on email or WhatsApp!`;\r\n } else {\r\n textContentToAdd = `\u26A0\uFE0F Warning: Anything you change below won't affect orders that have already been paid for. If you're looking to make changes, reach out to us on email or WhatsApp!`;\r\n }\r\n } else {\r\n textContentToAdd = `\u26A0\uFE0F Warning: Anything you change below won't affect orders that have already been paid for. If you're looking to make changes, reach out to us on email or WhatsApp!`;\r\n }\r\n\r\n const infoDiv = document.createElement(\"div\");\r\n infoDiv.className = \"custom-subscription-info\";\r\n infoDiv.innerHTML = `\r\n
\r\n ${textContentToAdd}\r\n
\r\n `;\r\n attachBanner(element, infoDiv);\r\n })\r\n .catch((error) => {\r\n // Don't reset bannerInjectedOrPending here: the observer would call runLogic again\r\n // on the next DOM mutation and re-fetch endlessly. Fall back to the default banner instead.\r\n console.error(\"[EQ Debug]: Last order fetch failed, showing default banner\", error);\r\n if (document.querySelector(\".custom-subscription-info\")) return;\r\n const infoDiv = document.createElement(\"div\");\r\n infoDiv.className = \"custom-subscription-info\";\r\n infoDiv.innerHTML = `\r\n
\r\n \u26A0\uFE0F Warning: Anything you change below won't affect orders that have already been paid for. If you're looking to make changes, reach out to us on email or WhatsApp!\r\n
\r\n `;\r\n attachBanner(element, infoDiv);\r\n });\r\n }\r\n // \uD83D\uDD25 your actual logic here\r\n }\r\n})();\r\n\r\nconst extractDateFromTags = (tags) => {\r\n if (!Array.isArray(tags)) return null;\r\n\r\n // Matches DD.MM.YYYY where year is between 2026\u20132030\r\n const dateRegex = /\\b\\d{1,2}\\.\\d{1,2}\\.(2026|2027|2028|2029|2030)\\b/;\r\n\r\n for (const tag of tags) {\r\n const match = tag.match(dateRegex);\r\n if (match) {\r\n return match[0];\r\n }\r\n }\r\n\r\n return null;\r\n};\r\n\r\n/**\r\n * Returns the latest email found inside UserAttributes in localStorage\r\n * @param {Object} options\r\n * @param {boolean} options.clean - remove \"-skioSiteId-...\" from email\r\n * @returns {{ key: string, value: string } | null}\r\n */\r\nconst getLatestSkioUserEmail = (options = { clean: false }) => {\r\n let lastEmail = null;\r\n\r\n for (let i = 0; i < localStorage.length; i++) {\r\n const storageKey = localStorage.key(i);\r\n const rawValue = localStorage.getItem(storageKey);\r\n\r\n if (typeof rawValue !== \"string\" || !rawValue.includes(\"UserAttributes\")) {\r\n continue;\r\n }\r\n\r\n try {\r\n const parsed = JSON.parse(rawValue);\r\n const userAttributes = parsed?.UserAttributes;\r\n\r\n if (!Array.isArray(userAttributes)) continue;\r\n\r\n const emailObj = userAttributes.find(\r\n (attr) => attr?.Name === \"email\" && typeof attr.Value === \"string\"\r\n );\r\n\r\n if (emailObj) {\r\n lastEmail = {\r\n key: \"email\",\r\n value: options.clean\r\n ? emailObj.Value.split(\"-skioSiteId-\")[0]\r\n : emailObj.Value,\r\n };\r\n }\r\n } catch (e) {\r\n // Ignore invalid JSON safely\r\n }\r\n }\r\n\r\n return lastEmail;\r\n};\r\n\r\nconst formatDDMMYYYYToReadable = (dateStr) => {\r\n if (!dateStr) return null;\r\n\r\n const [day, month, year] = dateStr.split(\".\");\r\n if (!day || !month || !year) return null;\r\n\r\n const date = new Date(Date.UTC(year, month - 1, day));\r\n\r\n return date.toLocaleDateString(\"en-GB\", {\r\n day: \"2-digit\",\r\n month: \"long\",\r\n year: \"numeric\",\r\n timeZone: \"UTC\",\r\n });\r\n};\r\n\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n document.querySelectorAll(\"video\").forEach((video) => {\r\n if (video.paused && !video.ended) {\r\n video.muted = true;\r\n video.play().catch(() => {});\r\n }\r\n });\r\n});\r\n\r\nconst babCache = {};\r\nfunction getBabDocument(babUrl) {\r\n if (!babCache[babUrl]) {\r\n babCache[babUrl] = fetch(babUrl)\r\n .then((res) => {\r\n if (!res.ok) throw new Error(\"Failed to fetch Bundle page\");\r\n return res.text();\r\n })\r\n .then((html) => {\r\n const parser = new DOMParser();\r\n return parser.parseFromString(html, \"text/html\");\r\n })\r\n .catch((err) => {\r\n delete babCache[babUrl];\r\n throw err;\r\n });\r\n }\r\n return babCache[babUrl];\r\n}\r\n\r\nfunction findDishPickerContainers(root) {\r\n const itemsLabels = Array.from(root.querySelectorAll(\"span\")).filter((s) =>\r\n /^Items\\s*\\(\\d+\\)$/.test(s.textContent.trim())\r\n );\r\n\r\n const containers = new Set();\r\n\r\n itemsLabels.forEach((label) => {\r\n let el = label;\r\n for (let i = 0; i < 8 && el; i++) {\r\n el = el.parentElement;\r\n if (!el) break;\r\n if (el.querySelectorAll(\"img\").length >= 3) {\r\n containers.add(el);\r\n break;\r\n }\r\n }\r\n });\r\n\r\n return Array.from(containers);\r\n}\r\n\r\nfunction setupSkioModalInfoIcons(root) {\r\n const containers = findDishPickerContainers(root);\r\n\r\n containers.forEach((container) => {\r\n try {\r\n container.querySelectorAll(\"img\").forEach((img) => {\r\n if (img.classList.contains(\"custom-info-added\")) return;\r\n\r\n img.classList.add(\"custom-info-added\");\r\n\r\n const imgContainer = img.parentElement;\r\n if (!imgContainer) return;\r\n\r\n imgContainer.classList.add(\"custom-skio-img-container\");\r\n\r\n const infoBtn = document.createElement(\"button\");\r\n infoBtn.type = \"button\";\r\n infoBtn.className = \"info-icon-button custom-skio-info-btn\";\r\n infoBtn.innerHTML = `\r\n \r\n i\r\n `;\r\n imgContainer.appendChild(infoBtn);\r\n\r\n const card =\r\n img.closest(\r\n \"[class*='DishCard'], [class*='dish-card'], [class*='ProductCard'], [class*='product-card']\"\r\n ) || img.parentElement?.parentElement?.parentElement;\r\n if (card) card.classList.add(\"custom-skio-dish-card\");\r\n });\r\n } catch (err) {\r\n console.error(\"setupSkioModalInfoIcons error:\", err);\r\n }\r\n });\r\n}\r\n\r\nfunction setupAddonInfoIcons(root) {\r\n root.querySelectorAll(\".cart-template__addon-item\").forEach((item) => {\r\n const trigger = item.querySelector(\".cart-addon-image-trigger\");\r\n if (!trigger || trigger.dataset.infoAdded) return;\r\n\r\n trigger.dataset.infoAdded = \"true\";\r\n trigger.classList.add(\"custom-skio-img-container\");\r\n\r\n const infoBtn = document.createElement(\"button\");\r\n infoBtn.type = \"button\";\r\n infoBtn.className = \"info-icon-button custom-skio-info-btn\";\r\n infoBtn.innerHTML = `\r\n \r\n i\r\n `;\r\n\r\n trigger.appendChild(infoBtn);\r\n item.classList.add(\"custom-skio-dish-card\");\r\n });\r\n}\r\n\r\n// Debounced setup to avoid running too frequently\r\nlet skioSetupTimer = null;\r\nfunction debouncedSetup() {\r\n clearTimeout(skioSetupTimer);\r\n skioSetupTimer = setTimeout(() => {\r\n setupSkioModalInfoIcons(document.body);\r\n setupAddonInfoIcons(document.body);\r\n }, 100);\r\n}\r\n\r\n// Persistent observer watches whole body for Skio portal injections\r\nconst skioModalObserver = new MutationObserver(debouncedSetup);\r\nskioModalObserver.observe(document.body, {\r\n childList: true,\r\n subtree: true,\r\n});\r\n\r\n// Run once immediately\r\nsetupSkioModalInfoIcons(document.body);\r\nsetupAddonInfoIcons(document.body);\r\nfunction handleDocumentClick(e) {\r\n try {\r\n const addonTrigger = e.target.closest(\".cart-addon-image-trigger\");\r\n if (addonTrigger && addonTrigger.dataset.handle) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n if (window.openStockedProductModal) {\r\n window.openStockedProductModal(\r\n addonTrigger.dataset.handle,\r\n true,\r\n addonTrigger\r\n );\r\n }\r\n return;\r\n }\r\n\r\n const infoBtn = e.target.closest(\".custom-skio-info-btn\");\r\n if (!infoBtn) return;\r\n\r\n e.preventDefault();\r\n e.stopPropagation();\r\n\r\n const imgContainer = infoBtn.parentElement;\r\n const image = imgContainer?.querySelector(\"img\");\r\n if (!image) return;\r\n\r\n // Addon products\r\n const trigger = infoBtn.closest(\".cart-addon-image-trigger\");\r\n if (trigger?.dataset.handle) {\r\n window.openStockedProductModal(trigger.dataset.handle, true, trigger);\r\n return;\r\n }\r\n const title = image.alt?.trim();\r\n const handle = window.stockedActiveProductsMap?.[title];\r\n\r\n if (!handle) return;\r\n\r\n if (window.openStockedProductModal) {\r\n window.openStockedProductModal(handle, false, infoBtn);\r\n }\r\n } catch (err) {\r\n console.error(\"[DocumentClick] Error handling click:\", err);\r\n }\r\n}\r\n\r\n// Remove previous listener if registered before adding a new one\r\nif (typeof window._cleanupDocumentClick === \"function\") {\r\n window._cleanupDocumentClick();\r\n}\r\n\r\ndocument.addEventListener(\"click\", handleDocumentClick);\r\n\r\n// expose cleanup for callers\r\nwindow._cleanupDocumentClick = function () {\r\n document.removeEventListener(\"click\", handleDocumentClick);\r\n};\r\n\r\nwindow.openStockedProductModal = function (\r\n handle,\r\n isAddon = false,\r\n triggerElement = null\r\n) {\r\n const url = `/products/${handle}`;\r\n\r\n // Create modal if it doesn't exist\r\n let modal = document.getElementById(\"custom-product-modal\");\r\n if (!modal) {\r\n modal = document.createElement(\"div\");\r\n modal.id = \"custom-product-modal\";\r\n\r\n const modalContent = document.createElement(\"div\");\r\n modalContent.className = \"custom-product-modal-content\";\r\n\r\n const closeBtn = document.createElement(\"button\");\r\n closeBtn.className = \"custom-product-modal-close\";\r\n closeBtn.innerHTML = \"×\";\r\n\r\n closeBtn.onclick = function () {\r\n modal.style.display = \"none\";\r\n const container = document.getElementById(\"custom-product-content\");\r\n if (container) container.innerHTML = \"\"; // clear content to stop videos/scripts\r\n document.body.style.overflow = \"\"; // restore body scroll\r\n };\r\n\r\n const contentContainer = document.createElement(\"div\");\r\n contentContainer.id = \"custom-product-content\";\r\n\r\n modalContent.appendChild(closeBtn);\r\n modalContent.appendChild(contentContainer);\r\n modal.appendChild(modalContent);\r\n document.body.appendChild(modal);\r\n\r\n // Close on click outside\r\n modal.addEventListener(\"click\", function (event) {\r\n if (event.target === modal) {\r\n modal.style.display = \"none\";\r\n const container = document.getElementById(\"custom-product-content\");\r\n if (container) container.innerHTML = \"\";\r\n document.body.style.overflow = \"\";\r\n }\r\n });\r\n }\r\n\r\n const contentContainer = document.getElementById(\"custom-product-content\");\r\n modal.style.display = \"flex\";\r\n document.body.style.overflow = \"hidden\"; // Prevent background scrolling\r\n\r\n // Fetch HTML directly to bypass iframe CSP blocks\r\n fetch(url)\r\n .then((res) => {\r\n if (!res.ok) throw new Error(\"Product page not found\");\r\n return res.text();\r\n })\r\n .then((html) => {\r\n const parser = new DOMParser();\r\n const doc = parser.parseFromString(html, \"text/html\");\r\n const template = doc.querySelector(\".product-template\");\r\n\r\n // 1. First, see if the popup contents are directly on the fetched product page\r\n // (We recently added a hidden build-a-bundle-product-card to the main product template to support this)\r\n let directPopup = doc.querySelector(\".product-popup-contents\");\r\n\r\n if (directPopup) {\r\n return injectPopupContent(directPopup);\r\n }\r\n\r\n // 2. If not found directly, check if it's a bundle product and fetch from the bundle page\r\n if (template) {\r\n const babUrl = template.dataset.babUrl;\r\n const productId = template.dataset.productId;\r\n\r\n if (babUrl && productId) {\r\n return getBabDocument(babUrl).then((babDoc) => {\r\n const popupContent = babDoc.querySelector(\r\n `.product-popup-contents[data-product-id=\"${productId}\"]`\r\n );\r\n if (popupContent) {\r\n injectPopupContent(popupContent);\r\n } else {\r\n throw new Error(\r\n \"Product details snippet not found in Bundle page\"\r\n );\r\n }\r\n });\r\n }\r\n }\r\n\r\n // 3. Fallback: render the whole product page content without header/footer if no popup available\r\n const mainContent =\r\n doc.querySelector(\"main\") ||\r\n doc.querySelector(\"#smooth-content\") ||\r\n doc.body;\r\n contentContainer.innerHTML = mainContent.innerHTML;\r\n\r\n function injectPopupContent(popupElement) {\r\n // Clone the popup content to avoid mutating cache\r\n const clone = popupElement.cloneNode(true);\r\n\r\n // Hide the Add to Bundle (ATB) container since we are on subscriptions page\r\n if (isAddon) {\r\n const defaultMobileBtn = clone.querySelector(\r\n \".bab-product-popup-contents__atb-container > .button.desktop\\\\:hidden\"\r\n );\r\n if (defaultMobileBtn) defaultMobileBtn.style.display = \"none\";\r\n\r\n const subBtn = clone.querySelector(\r\n \".bab-product-popup-contents__atb-container .sub-btn\"\r\n );\r\n if (subBtn) subBtn.style.display = \"none\";\r\n\r\n const otpBtn = clone.querySelector(\r\n \".bab-product-popup-contents__atb-container .otp-btn\"\r\n );\r\n if (otpBtn) {\r\n otpBtn.classList.remove(\"hidden\", \"desktop:hidden\");\r\n otpBtn.style.display = \"flex\"; // or block\r\n }\r\n }\r\n\r\n if (!isAddon) {\r\n const atbContainer = clone.querySelector(\r\n \".bab-product-popup-contents__atb-container\"\r\n );\r\n if (atbContainer && atbContainer.parentElement) {\r\n atbContainer.parentElement.style.display = \"none\";\r\n }\r\n }\r\n\r\n // Inject the popup content\r\n contentContainer.innerHTML = clone.innerHTML;\r\n\r\n // Wire up functionality\r\n setupModalSwiper();\r\n setupModalVideos();\r\n setupModalAccordions();\r\n setupModalNutritionInfo();\r\n setupModalATB();\r\n setupModalReviewClick();\r\n\r\n // Trigger Judge.me render\r\n\r\n if (\r\n window.jdgmCacheServer &&\r\n typeof window.jdgmCacheServer.reloadAll === \"function\"\r\n ) {\r\n window.jdgmCacheServer.reloadAll();\r\n } else if (\r\n window.jdgmCacheServer &&\r\n typeof window.jdgmCacheServer.reload === \"function\"\r\n ) {\r\n window.jdgmCacheServer.reload();\r\n } else if (\r\n window.jdgm &&\r\n typeof window.jdgm.initializeWidgets === \"function\"\r\n ) {\r\n window.jdgm.initializeWidgets();\r\n }\r\n }\r\n })\r\n .catch((err) => {\r\n contentContainer.innerHTML =\r\n '
Failed to load product details.
';\r\n console.error(\"Error fetching product popup:\", err);\r\n });\r\n\r\n // Helper to initialize Swiper inside the modal if Swiper is available\r\n function setupModalSwiper() {\r\n const mainSwiperEl = contentContainer.querySelector(\r\n \".product-template__media-container__main-swiper .swiper\"\r\n );\r\n const thumbsSwiperEl = contentContainer.querySelector(\r\n \".product-template__media-container__thumbs-swiper .swiper\"\r\n );\r\n\r\n if (mainSwiperEl && thumbsSwiperEl && typeof Swiper !== \"undefined\") {\r\n const thumbSwiper = new Swiper(thumbsSwiperEl, {\r\n spaceBetween: 12,\r\n slidesPerView: 4,\r\n watchSlidesProgress: true,\r\n slideToClickedSlide: true,\r\n });\r\n\r\n const mainSwiper = new Swiper(mainSwiperEl, {\r\n spaceBetween: 12,\r\n slidesPerView: 1,\r\n thumbs: {\r\n swiper: thumbSwiper,\r\n },\r\n });\r\n\r\n mainSwiper.controller.control = thumbSwiper;\r\n mainSwiper.on(\"slideChange\", () => {\r\n thumbSwiper.slideTo(mainSwiper.realIndex);\r\n });\r\n } else {\r\n // Fallback for when Swiper is not loaded (or fails to initialize)\r\n const mainSlides = contentContainer.querySelectorAll(\r\n \".product-template__media-container__main-swiper .swiper-slide\"\r\n );\r\n const thumbSlides = contentContainer.querySelectorAll(\r\n \".product-template__media-container__thumbs-swiper .swiper-slide\"\r\n );\r\n const thumbsWrapper = contentContainer.querySelector(\r\n \".product-template__media-container__thumbs-swiper .swiper-wrapper\"\r\n );\r\n\r\n if (mainSlides.length > 0 && thumbSlides.length > 0) {\r\n // Style the swiper wrapper to lay out thumbnails horizontally\r\n if (thumbsWrapper) {\r\n thumbsWrapper.style.display = \"flex\";\r\n thumbsWrapper.style.gap = \"12px\";\r\n thumbsWrapper.style.flexWrap = \"wrap\";\r\n thumbsWrapper.style.width = \"100%\";\r\n }\r\n\r\n // Initialize display state for main slides\r\n mainSlides.forEach((slide, index) => {\r\n if (index === 0) {\r\n slide.style.display = \"block\";\r\n slide.style.position = \"relative\";\r\n slide.style.opacity = \"1\";\r\n slide.style.pointerEvents = \"auto\";\r\n } else {\r\n slide.style.display = \"none\";\r\n slide.style.position = \"absolute\";\r\n slide.style.opacity = \"0\";\r\n slide.style.pointerEvents = \"none\";\r\n }\r\n });\r\n\r\n // Initialize display state and click handlers for thumbnails\r\n thumbSlides.forEach((thumb, index) => {\r\n thumb.style.width = \"72px\";\r\n thumb.style.height = \"72px\";\r\n thumb.style.flexShrink = \"0\";\r\n thumb.style.position = \"relative\";\r\n thumb.style.cursor = \"pointer\";\r\n thumb.style.borderWidth = \"2px\";\r\n thumb.style.borderStyle = \"solid\";\r\n\r\n if (index === 0) {\r\n thumb.classList.add(\"swiper-slide-thumb-active\");\r\n thumb.style.borderColor = \"rgba(239, 125, 0, 0.60)\"; // selected-orange-border\r\n } else {\r\n thumb.classList.remove(\"swiper-slide-thumb-active\");\r\n thumb.style.borderColor = \"rgba(35, 35, 35, 0.10)\"; // primary-border\r\n }\r\n\r\n thumb.addEventListener(\"click\", (event) => {\r\n event.preventDefault();\r\n\r\n // Switch active main slide\r\n mainSlides.forEach((slide, slideIndex) => {\r\n if (slideIndex === index) {\r\n slide.style.display = \"block\";\r\n slide.style.position = \"relative\";\r\n slide.style.opacity = \"1\";\r\n slide.style.pointerEvents = \"auto\";\r\n } else {\r\n slide.style.display = \"none\";\r\n slide.style.position = \"absolute\";\r\n slide.style.opacity = \"0\";\r\n slide.style.pointerEvents = \"none\";\r\n\r\n // Pause video on inactive slides if playing\r\n const video = slide.querySelector(\"video\");\r\n if (video) {\r\n video.pause();\r\n video.classList.add(\"hidden\");\r\n const img = slide.querySelector(\".media__image\");\r\n const icon = slide.querySelector(\".media__icon\");\r\n if (img) img.classList.remove(\"hidden\");\r\n if (icon) icon.classList.remove(\"hidden\");\r\n }\r\n }\r\n });\r\n\r\n // Update active thumbnail border\r\n thumbSlides.forEach((t, tIndex) => {\r\n if (tIndex === index) {\r\n t.classList.add(\"swiper-slide-thumb-active\");\r\n t.style.borderColor = \"rgba(239, 125, 0, 0.60)\";\r\n } else {\r\n t.classList.remove(\"swiper-slide-thumb-active\");\r\n t.style.borderColor = \"rgba(35, 35, 35, 0.10)\";\r\n }\r\n });\r\n });\r\n });\r\n } else {\r\n // Fallback: show only the first image and hide thumbs/rest if not enough slides\r\n const slides = contentContainer.querySelectorAll(\r\n \".product-template__media-container__main-swiper .swiper-slide\"\r\n );\r\n slides.forEach((slide, index) => {\r\n if (index > 0) slide.style.display = \"none\";\r\n });\r\n const thumbs = contentContainer.querySelector(\r\n \".product-template__media-links\"\r\n );\r\n if (thumbs) thumbs.style.display = \"none\";\r\n }\r\n }\r\n }\r\n\r\n // Helper to setup video clicks\r\n function setupModalVideos() {\r\n const mediaItems = contentContainer.querySelectorAll(\r\n \".product-template__media--video\"\r\n );\r\n mediaItems.forEach((item) => {\r\n const img = item.querySelector(\".media__image\");\r\n const icon = item.querySelector(\".media__icon\");\r\n const video = item.querySelector(\".media__video\");\r\n if (img && icon && video) {\r\n img.addEventListener(\"click\", (event) => {\r\n event.preventDefault();\r\n img.classList.add(\"hidden\");\r\n icon.classList.add(\"hidden\");\r\n video.classList.remove(\"hidden\");\r\n video.play();\r\n });\r\n video.addEventListener(\"click\", (event) => {\r\n event.preventDefault();\r\n video.pause();\r\n video.classList.add(\"hidden\");\r\n img.classList.remove(\"hidden\");\r\n icon.classList.remove(\"hidden\");\r\n });\r\n }\r\n });\r\n }\r\n\r\n // Helper to setup accordion toggles\r\n function setupModalAccordions() {\r\n const containers = contentContainer.querySelectorAll(\r\n \".product-accordion-container\"\r\n );\r\n containers.forEach((container) => {\r\n const accordions = container.querySelectorAll(\".product-accordion\");\r\n accordions.forEach((accordion) => {\r\n const trigger = accordion.querySelector(\".product-accordion__trigger\");\r\n const content = accordion.querySelector(\".product-accordion__contents\");\r\n if (trigger && content) {\r\n trigger.addEventListener(\"click\", () => {\r\n if (accordion.classList.contains(\"active\")) {\r\n accordion.classList.remove(\"active\");\r\n } else {\r\n accordion.classList.add(\"active\");\r\n }\r\n });\r\n }\r\n });\r\n });\r\n }\r\n\r\n // Helper to setup nutrition multiplier and toggle table\r\n function setupModalNutritionInfo() {\r\n const displays = contentContainer.querySelectorAll(\r\n \".product-nutrition-info-content\"\r\n );\r\n displays.forEach((display) => {\r\n const optionsContainer = display.querySelector(\r\n \".product-nutrition-info-content__multiplier-container\"\r\n );\r\n const nutritionValueContainers = display.querySelectorAll(\r\n \".product-nutrition-metric\"\r\n );\r\n\r\n if (optionsContainer && nutritionValueContainers) {\r\n const multiplierOptions = optionsContainer.querySelectorAll(\r\n \".product-nutrition-info-content__multiplier-value\"\r\n );\r\n multiplierOptions.forEach((multiplierOption) => {\r\n multiplierOption.addEventListener(\"click\", (e) => {\r\n if (!multiplierOption.classList.contains(\"active\")) {\r\n multiplierOptions.forEach((option) => {\r\n option.classList.remove(\"active\");\r\n });\r\n multiplierOption.classList.add(\"active\");\r\n\r\n const multiplier = parseInt(multiplierOption.textContent);\r\n if (multiplier) {\r\n nutritionValueContainers.forEach((valueContainer) => {\r\n const originalValue = parseFloat(\r\n valueContainer.dataset.originalValue\r\n );\r\n if (!isNaN(originalValue)) {\r\n const metricSpan = valueContainer.querySelector(\r\n \".product-nutrition-metric-value\"\r\n );\r\n if (metricSpan) {\r\n metricSpan.textContent =\r\n Math.round(originalValue * multiplier * 100) / 100;\r\n }\r\n }\r\n });\r\n }\r\n }\r\n });\r\n });\r\n }\r\n\r\n // bind show/hide of nutrition table\r\n const nutritionTableCont = display.querySelector(\r\n \".nutrition-table-container\"\r\n );\r\n if (nutritionTableCont) {\r\n const tableTrigger = nutritionTableCont.querySelector(\r\n \".nutrition-table-toggle\"\r\n );\r\n const tableDropdown = nutritionTableCont.querySelector(\r\n \".nutrition-table-dropdown\"\r\n );\r\n if (tableTrigger && tableDropdown) {\r\n const triggerChevron = tableTrigger.querySelector(\"svg\");\r\n tableTrigger.addEventListener(\"click\", (e) => {\r\n if (tableDropdown.classList.contains(\"hidden\")) {\r\n tableDropdown.classList.remove(\"hidden\");\r\n if (triggerChevron) {\r\n triggerChevron.classList.add(\"-rotate-180\");\r\n }\r\n } else {\r\n tableDropdown.classList.add(\"hidden\");\r\n if (triggerChevron) {\r\n triggerChevron.classList.remove(\"-rotate-180\");\r\n }\r\n }\r\n });\r\n }\r\n }\r\n });\r\n }\r\n\r\n // Helper to handle clicking on the review badge in the modal\r\n function setupModalReviewClick() {\r\n const badge = contentContainer.querySelector(\".pop-up-judgeme-badge\");\r\n if (!badge) return;\r\n\r\n badge.style.cursor = \"pointer\";\r\n badge.addEventListener(\"click\", (e) => {\r\n e.preventDefault();\r\n const reviewAccordion =\r\n contentContainer.querySelector(\".review-accordion\");\r\n if (reviewAccordion) {\r\n if (!reviewAccordion.classList.contains(\"active\")) {\r\n reviewAccordion.classList.add(\"active\");\r\n }\r\n reviewAccordion.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n }\r\n });\r\n }\r\n\r\n function setupModalATB() {\r\n const atbContainer = contentContainer.querySelector(\r\n \".bab-product-popup-contents__atb-container\"\r\n );\r\n if (!atbContainer) return;\r\n\r\n const infoText = atbContainer.parentElement?.querySelector(\r\n \"span.text-grey-600.text-extra-small.font-brandon-text.justify-start\"\r\n );\r\n\r\n if (infoText) {\r\n infoText.style.display = \"none\";\r\n }\r\n\r\n const increaseBtns = atbContainer.querySelectorAll(\r\n \".product-quantity__increase\"\r\n );\r\n const decreaseBtns = atbContainer.querySelectorAll(\r\n \".product-quantity__decrease\"\r\n );\r\n const qtyDisplays = atbContainer.querySelectorAll(\".product-quantity\");\r\n const atbButtons = atbContainer.querySelectorAll(\r\n \".bab-product-add-to-bundle\"\r\n );\r\n\r\n const otpPriceDisplay = atbContainer.querySelector(\r\n \".otp-btn .product-price\"\r\n );\r\n const subPriceDisplay = atbContainer.querySelector(\r\n \".sub-btn .product-price\"\r\n );\r\n const subCompPriceDisplay = atbContainer.querySelector(\r\n \".sub-btn .product-comparison-price\"\r\n );\r\n\r\n const singlePrice = parseFloat(atbContainer.dataset.singlePrice) || 0;\r\n const singleSubPrice =\r\n parseFloat(atbContainer.dataset.singleSubscriptionPrice) || 0;\r\n\r\n let currentQty = 1;\r\n\r\n function formatMoney(cents) {\r\n if (!cents) return \"\";\r\n let str = \"\u00A3\" + (cents / 100).toFixed(2);\r\n return str.replace(\".00\", \"\");\r\n }\r\n\r\n function updateDisplay() {\r\n qtyDisplays.forEach((d) => (d.textContent = currentQty));\r\n if (otpPriceDisplay)\r\n otpPriceDisplay.textContent = formatMoney(singlePrice * currentQty);\r\n if (subPriceDisplay)\r\n subPriceDisplay.textContent = formatMoney(singleSubPrice * currentQty);\r\n if (subCompPriceDisplay)\r\n subCompPriceDisplay.textContent = formatMoney(singlePrice * currentQty);\r\n }\r\n\r\n updateDisplay();\r\n\r\n increaseBtns.forEach((btn) => {\r\n btn.addEventListener(\"click\", (e) => {\r\n e.preventDefault();\r\n currentQty++;\r\n updateDisplay();\r\n });\r\n });\r\n\r\n decreaseBtns.forEach((btn) => {\r\n btn.addEventListener(\"click\", (e) => {\r\n e.preventDefault();\r\n if (currentQty > 1) {\r\n currentQty--;\r\n updateDisplay();\r\n }\r\n });\r\n });\r\n\r\n atbButtons.forEach((btn) => {\r\n btn.addEventListener(\"click\", async (e) => {\r\n e.preventDefault();\r\n\r\n if (triggerElement) {\r\n if (isAddon) {\r\n // Calculate existing addons quantity in the cart\r\n let existingAddonQty = 0;\r\n document\r\n .querySelectorAll(\".cart-template__addon-item\")\r\n .forEach((addon) => {\r\n const qtyDisplay = addon.querySelector(\r\n \".product-quantity, input[type='number']\"\r\n );\r\n if (qtyDisplay) {\r\n const val = parseInt(\r\n qtyDisplay.textContent || qtyDisplay.value,\r\n 10\r\n );\r\n if (!isNaN(val)) existingAddonQty += val;\r\n }\r\n });\r\n\r\n if (existingAddonQty + currentQty > 4) {\r\n alert(\"You can only add a maximum of 4 one-off extras.\");\r\n return;\r\n }\r\n\r\n const addonItem = triggerElement.closest(\r\n \".cart-template__addon-item\"\r\n );\r\n if (addonItem) {\r\n const variantId = addonItem.dataset.variantId;\r\n if (variantId) {\r\n try {\r\n const requestJson = {\r\n items: [\r\n {\r\n id: parseInt(variantId, 10),\r\n quantity: currentQty,\r\n },\r\n ],\r\n };\r\n await fetch(\"/cart/add.js\", {\r\n method: \"POST\",\r\n headers: { \"Content-Type\": \"application/json\" },\r\n body: JSON.stringify(requestJson),\r\n });\r\n window.location.reload();\r\n } catch (error) {\r\n console.error(\"Error adding to cart:\", error);\r\n }\r\n }\r\n }\r\n } else {\r\n const card = triggerElement.closest(\".custom-skio-dish-card\");\r\n if (card) {\r\n const pageAddBtn =\r\n card.querySelector(\r\n \"button[aria-label*='Add'], button[aria-label*='add'], .product-quantity__increase\"\r\n ) ||\r\n Array.from(card.querySelectorAll(\"button\")).find(\r\n (b) =>\r\n b.textContent &&\r\n (b.textContent.includes(\"Add\") ||\r\n b.textContent.includes(\"+\"))\r\n );\r\n if (pageAddBtn) {\r\n for (let i = 0; i < currentQty; i++) {\r\n pageAddBtn.click();\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n let modal = document.getElementById(\"custom-product-modal\");\r\n if (modal) {\r\n modal.style.display = \"none\";\r\n document.body.style.overflow = \"\";\r\n }\r\n });\r\n });\r\n }\r\n};\r\n\r\n// \u2500\u2500\u2500 Cart Addon Product Detail Popup \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n(function () {\r\n var currentImages = [];\r\n var currentIndex = 0;\r\n\r\n // \u2500\u2500 DOM helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n function el(id) {\r\n return document.getElementById(id);\r\n }\r\n\r\n // \u2500\u2500 Navigate to a specific image index \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n function goTo(index) {\r\n if (!currentImages.length) return;\r\n currentIndex = (index + currentImages.length) % currentImages.length;\r\n\r\n var imgEl = el(\"cart-addon-popup-image\");\r\n if (imgEl) {\r\n imgEl.src = currentImages[currentIndex];\r\n }\r\n\r\n // Update thumbnail active state\r\n var thumbs = el(\"cart-addon-popup-thumbs\");\r\n if (thumbs) {\r\n Array.prototype.forEach.call(\r\n thumbs.querySelectorAll(\".addon-popup-thumb\"),\r\n function (t, i) {\r\n t.style.borderColor =\r\n i === currentIndex\r\n ? \"rgba(239,125,0,0.7)\" // active \u2013 amber\r\n : \"rgba(35,35,35,0.10)\"; // inactive \u2013 primary-border\r\n }\r\n );\r\n }\r\n }\r\n\r\n // \u2500\u2500 Close popup \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n function closeAddonPopup() {\r\n var popup = el(\"cart-addon-detail-popup\");\r\n if (!popup) return;\r\n popup.style.display = \"none\";\r\n document.body.style.overflow = \"\";\r\n currentImages = [];\r\n currentIndex = 0;\r\n }\r\n\r\n // \u2500\u2500 Click delegation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n document.addEventListener(\"click\", function (e) {\r\n // Open on image-button click\r\n var trigger = e.target.closest(\".cart-addon-image-trigger\");\r\n if (trigger) {\r\n return;\r\n }\r\n\r\n // Prev arrow\r\n if (e.target.closest(\"#cart-addon-popup-prev\")) {\r\n goTo(currentIndex - 1);\r\n return;\r\n }\r\n\r\n // Next arrow\r\n if (e.target.closest(\"#cart-addon-popup-next\")) {\r\n goTo(currentIndex + 1);\r\n return;\r\n }\r\n\r\n // Close button\r\n if (e.target.closest(\"#cart-addon-popup-close\")) {\r\n closeAddonPopup();\r\n return;\r\n }\r\n\r\n // Backdrop\r\n var popup = el(\"cart-addon-detail-popup\");\r\n if (\r\n popup &&\r\n (e.target === popup || e.target.id === \"cart-addon-popup-bg\")\r\n ) {\r\n closeAddonPopup();\r\n }\r\n });\r\n\r\n // \u2500\u2500 Keyboard: Escape closes, \u2190 / \u2192 navigates \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n document.addEventListener(\"keydown\", function (e) {\r\n var popup = el(\"cart-addon-detail-popup\");\r\n if (!popup || popup.style.display === \"none\") return;\r\n\r\n if (e.key === \"Escape\") {\r\n closeAddonPopup();\r\n }\r\n if (e.key === \"ArrowLeft\") {\r\n goTo(currentIndex - 1);\r\n }\r\n if (e.key === \"ArrowRight\") {\r\n goTo(currentIndex + 1);\r\n }\r\n });\r\n})();\r\n/* ---- Delivery Countdown Banner ---- */\r\n(function () {\r\n function initDeliveryCountdownBanner() {\r\n try {\r\n var bannerEl = document.getElementById(\"eq-delivery-countdown-banner\");\r\n if (!bannerEl) return;\r\n\r\n var enabled = bannerEl.getAttribute(\"data-enabled\") === \"true\";\r\n if (!enabled) return;\r\n\r\n var ukTodayStr = bannerEl.getAttribute(\"data-uk-today\");\r\n var ukHour = parseInt(bannerEl.getAttribute(\"data-uk-hour\"), 10) || 0;\r\n var ukMinute = parseInt(bannerEl.getAttribute(\"data-uk-minute\"), 10) || 0;\r\n var ukSecond = parseInt(bannerEl.getAttribute(\"data-uk-second\"), 10) || 0;\r\n\r\n if (!ukTodayStr) return;\r\n\r\n var parts = ukTodayStr.split(\"-\").map(Number);\r\n if (parts.length !== 3) return;\r\n\r\n var serverNowDate = new Date(\r\n parts[0],\r\n parts[1] - 1,\r\n parts[2],\r\n ukHour,\r\n ukMinute,\r\n ukSecond\r\n );\r\n var timeOffset = serverNowDate.getTime() - Date.now();\r\n\r\n var testMode = bannerEl.getAttribute(\"data-test-mode\") === \"true\";\r\n var hideAfterCutoff =\r\n bannerEl.getAttribute(\"data-hide-after-cutoff\") === \"true\";\r\n\r\n var textBeforeCutoff =\r\n bannerEl.getAttribute(\"data-text-before-cutoff\") ||\r\n \"Order within {countdown} for same-week delivery on {delivery_day}\";\r\n var textAfterCutoff =\r\n bannerEl.getAttribute(\"data-text-after-cutoff\") ||\r\n \"Same-week delivery window closed. Next available delivery is {delivery_day}\";\r\n\r\n var rules = window.BinaeryRulesData || {\r\n disabledWeekdays: [0, 1, 2, 6],\r\n disabledDates: [],\r\n disabledRanges: [],\r\n cutoffMode: \"days\",\r\n cutoffDays: 2,\r\n cutoffTime: \"12:00\",\r\n };\r\n\r\n var isSameWeekDeliveryAllowed = rules.cutoffMode === \"days\";\r\n\r\n function parseYMD(str) {\r\n if (!str) return null;\r\n var p = String(str).slice(0, 10).split(\"-\");\r\n if (p.length !== 3) return null;\r\n var y = parseInt(p[0], 10);\r\n var m = parseInt(p[1], 10) - 1;\r\n var d = parseInt(p[2], 10);\r\n if (isNaN(y) || isNaN(m) || isNaN(d)) return null;\r\n return new Date(y, m, d);\r\n }\r\n\r\n function toISO(date) {\r\n var y = date.getFullYear();\r\n var m = String(date.getMonth() + 1).padStart(2, \"0\");\r\n var d = String(date.getDate()).padStart(2, \"0\");\r\n return y + \"-\" + m + \"-\" + d;\r\n }\r\n\r\n function isDeliveryDayValid(date, rules) {\r\n var y = date.getFullYear();\r\n var m = String(date.getMonth() + 1).padStart(2, \"0\");\r\n var d = String(date.getDate()).padStart(2, \"0\");\r\n var iso = y + \"-\" + m + \"-\" + d;\r\n\r\n if (iso < ukTodayStr) return false;\r\n\r\n // If same-week delivery is not allowed, block any dates in the current week\r\n if (rules.cutoffMode !== \"days\") {\r\n var todayD = parseYMD(ukTodayStr);\r\n if (todayD) {\r\n var dow = todayD.getDay();\r\n var daysUntilSunday = (7 - dow) % 7;\r\n var cutoffSunday = new Date(\r\n todayD.getFullYear(),\r\n todayD.getMonth(),\r\n todayD.getDate() + daysUntilSunday\r\n );\r\n var mondayAfterSunday = new Date(\r\n cutoffSunday.getFullYear(),\r\n cutoffSunday.getMonth(),\r\n cutoffSunday.getDate() + 1\r\n );\r\n var minSelectableISO = toISO(mondayAfterSunday);\r\n if (iso < minSelectableISO) {\r\n return false;\r\n }\r\n }\r\n }\r\n\r\n if (\r\n Array.isArray(rules.specialEnabledDates) &&\r\n rules.specialEnabledDates.indexOf(iso) !== -1\r\n ) {\r\n return true;\r\n }\r\n\r\n var dow = date.getDay();\r\n var disabledWeekdays = Array.isArray(rules.disabledWeekdays)\r\n ? rules.disabledWeekdays\r\n : [0, 1, 2, 6];\r\n if (disabledWeekdays.indexOf(dow) !== -1) {\r\n return false;\r\n }\r\n\r\n if (\r\n Array.isArray(rules.disabledDates) &&\r\n rules.disabledDates.indexOf(iso) !== -1\r\n ) {\r\n return false;\r\n }\r\n\r\n if (Array.isArray(rules.disabledRanges)) {\r\n for (var i = 0; i < rules.disabledRanges.length; i++) {\r\n var r = rules.disabledRanges[i];\r\n if (r && r.start && r.end) {\r\n if (iso >= r.start && iso <= r.end) {\r\n return false;\r\n }\r\n }\r\n }\r\n }\r\n\r\n return true;\r\n }\r\n\r\n var todayDate = new Date(serverNowDate);\r\n var dayOfWeek = todayDate.getDay();\r\n var diffToMonday =\r\n todayDate.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1);\r\n var monday = new Date(\r\n todayDate.getFullYear(),\r\n todayDate.getMonth(),\r\n diffToMonday\r\n );\r\n\r\n var validDeliveryDaysInCurrentWeek = [];\r\n if (isSameWeekDeliveryAllowed) {\r\n for (var i = 0; i < 7; i++) {\r\n var d = new Date(\r\n monday.getFullYear(),\r\n monday.getMonth(),\r\n monday.getDate() + i\r\n );\r\n if (isDeliveryDayValid(d, rules)) {\r\n validDeliveryDaysInCurrentWeek.push(d);\r\n }\r\n }\r\n }\r\n\r\n var cutoffDays = parseInt(rules.cutoffDays, 10);\r\n if (isNaN(cutoffDays)) cutoffDays = 2;\r\n\r\n var cutoffTimeParts = String(rules.cutoffTime || \"12:00\").split(\":\");\r\n var cutoffHour = parseInt(cutoffTimeParts[0], 10) || 0;\r\n var cutoffMinute = parseInt(cutoffTimeParts[1], 10) || 0;\r\n\r\n var targetCutoffDate = null;\r\n var targetDeliveryDay = null;\r\n\r\n var currentUKDate = new Date(Date.now() + timeOffset);\r\n\r\n for (var i = 0; i < validDeliveryDaysInCurrentWeek.length; i++) {\r\n var deliveryDay = validDeliveryDaysInCurrentWeek[i];\r\n var cutoffDate = new Date(\r\n deliveryDay.getFullYear(),\r\n deliveryDay.getMonth(),\r\n deliveryDay.getDate() - cutoffDays,\r\n cutoffHour,\r\n cutoffMinute,\r\n 0\r\n );\r\n\r\n if (currentUKDate < cutoffDate) {\r\n targetCutoffDate = cutoffDate;\r\n targetDeliveryDay = deliveryDay;\r\n break;\r\n }\r\n }\r\n\r\n if (testMode) {\r\n var testCutoffDate = new Date(currentUKDate);\r\n testCutoffDate.setDate(testCutoffDate.getDate() + 2);\r\n testCutoffDate.setHours(15, 0, 0, 0);\r\n\r\n targetCutoffDate = testCutoffDate;\r\n targetDeliveryDay = new Date(testCutoffDate);\r\n targetDeliveryDay.setDate(targetDeliveryDay.getDate() + cutoffDays);\r\n }\r\n\r\n var daysOfWeekNames = [\r\n \"Sunday\",\r\n \"Monday\",\r\n \"Tuesday\",\r\n \"Wednesday\",\r\n \"Thursday\",\r\n \"Friday\",\r\n \"Saturday\",\r\n ];\r\n var monthsNames = [\r\n \"January\",\r\n \"February\",\r\n \"March\",\r\n \"April\",\r\n \"May\",\r\n \"June\",\r\n \"July\",\r\n \"August\",\r\n \"September\",\r\n \"October\",\r\n \"November\",\r\n \"December\",\r\n ];\r\n\r\n function getOrdinalSuffix(day) {\r\n if (day > 3 && day < 21) return \"th\";\r\n switch (day % 10) {\r\n case 1:\r\n return \"st\";\r\n case 2:\r\n return \"nd\";\r\n case 3:\r\n return \"rd\";\r\n default:\r\n return \"th\";\r\n }\r\n }\r\n\r\n function formatDeliveryDate(date) {\r\n var dayName = daysOfWeekNames[date.getDay()];\r\n var monthName = monthsNames[date.getMonth()];\r\n var dayNum = date.getDate();\r\n return (\r\n dayName + \", \" + monthName + \" \" + dayNum + getOrdinalSuffix(dayNum)\r\n );\r\n }\r\n\r\n var nextAvailableDeliveryDay = null;\r\n\r\n // Computed lazily (not just once at page load) so that if the cutoff time\r\n // passes while the tab is left open without a refresh, the \"after cutoff\"\r\n // message can still resolve a real date instead of falling back to the\r\n // generic \"the next available slot\" text.\r\n function computeNextAvailableDeliveryDay(fromDate) {\r\n var searchStart = new Date(fromDate);\r\n searchStart.setDate(searchStart.getDate() + 1);\r\n for (var i = 0; i < 30; i++) {\r\n var testDate = new Date(\r\n searchStart.getFullYear(),\r\n searchStart.getMonth(),\r\n searchStart.getDate() + i\r\n );\r\n if (isDeliveryDayValid(testDate, rules)) {\r\n var testCutoffDate = new Date(\r\n testDate.getFullYear(),\r\n testDate.getMonth(),\r\n testDate.getDate() - cutoffDays,\r\n cutoffHour,\r\n cutoffMinute,\r\n 0\r\n );\r\n if (fromDate < testCutoffDate) {\r\n return testDate;\r\n }\r\n }\r\n }\r\n return null;\r\n }\r\n\r\n function updateTimer() {\r\n try {\r\n var nowUK = new Date(Date.now() + timeOffset);\r\n\r\n if (targetCutoffDate && nowUK < targetCutoffDate) {\r\n var diffMs = targetCutoffDate.getTime() - nowUK.getTime();\r\n\r\n var totalSec = Math.floor(diffMs / 1000);\r\n var days = Math.floor(totalSec / 86400);\r\n var hrs = Math.floor((totalSec % 86400) / 3600);\r\n var mins = Math.floor((totalSec % 3600) / 60);\r\n var secs = totalSec % 60;\r\n\r\n var daysStr = String(days).padStart(2, \"0\");\r\n var hrsStr = String(hrs).padStart(2, \"0\");\r\n var minsStr = String(mins).padStart(2, \"0\");\r\n var secsStr = String(secs).padStart(2, \"0\");\r\n\r\n var countdownHTML =\r\n '' +\r\n daysStr +\r\n ':' +\r\n hrsStr +\r\n ':' +\r\n minsStr +\r\n ':' +\r\n secsStr +\r\n \"\";\r\n\r\n var formattedDelDay = formatDeliveryDate(targetDeliveryDay);\r\n\r\n var fullText = textBeforeCutoff\r\n .replace(\"{countdown}\", countdownHTML)\r\n .replace(\r\n \"{delivery_day}\",\r\n \"\" + formattedDelDay + \"\"\r\n );\r\n\r\n bannerEl.innerHTML = \"
\" + fullText + \"
\";\r\n bannerEl.style.display = \"flex\";\r\n } else {\r\n if (hideAfterCutoff) {\r\n bannerEl.style.display = \"none\";\r\n } else {\r\n if (!nextAvailableDeliveryDay) {\r\n nextAvailableDeliveryDay =\r\n computeNextAvailableDeliveryDay(nowUK);\r\n }\r\n var formattedNextDelDay = nextAvailableDeliveryDay\r\n ? formatDeliveryDate(nextAvailableDeliveryDay)\r\n : \"the next available slot\";\r\n var fullText = textAfterCutoff.replace(\r\n \"{delivery_day}\",\r\n \"\" + formattedNextDelDay + \"\"\r\n );\r\n\r\n bannerEl.innerHTML = \"