\u0633\u0644\u0627\u064a\u062f\u0631 \u0648\u0634\u0628\u0643\u0629 \u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a<\/title>\r\n\r\n <style>\r\n :root{\r\n --primary:#6fc284;\r\n --light:#a0cfa0;\r\n --gray:#67686b;\r\n --bg:#f7f8fb;\r\n --card:#ffffff;\r\n --line: rgba(103,104,107,.18);\r\n --shadow: 0 10px 28px rgba(15, 23, 42, .08);\r\n --radius: 18px;\r\n --radius-lg: 22px;\r\n --font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n }\r\n\r\n *{box-sizing:border-box}\r\n\r\n body{\r\n margin:0;\r\n font-family:var(--font);\r\n background: var(--bg);\r\n color:#0f172a;\r\n direction: rtl;\r\n text-align: right;\r\n }\r\n\r\n .wrap{\r\n width:min(1200px, 92vw);\r\n margin: 34px auto 60px;\r\n }\r\n\r\n .header{\r\n display:flex;\r\n align-items:flex-end;\r\n justify-content:space-between;\r\n gap:12px;\r\n margin-bottom: 14px;\r\n }\r\n\r\n .title{\r\n margin:0;\r\n font-size: 22px;\r\n letter-spacing:.2px;\r\n }\r\n\r\n .hint{\r\n margin:0;\r\n color: var(--gray);\r\n font-size: 13px;\r\n }\r\n\r\n \/* ====== Top \"Stories\" Slider ====== *\/\r\n .stories{\r\n position: relative;\r\n background: #fff;\r\n border: 1px solid var(--line);\r\n border-radius: var(--radius-lg);\r\n padding: 14px 44px;\r\n box-shadow: var(--shadow);\r\n overflow:hidden;\r\n }\r\n\r\n .stories-track{\r\n display:flex;\r\n gap: 12px;\r\n overflow:auto;\r\n scroll-behavior:smooth;\r\n padding: 2px 2px 6px;\r\n scrollbar-width: none;\r\n }\r\n\r\n .stories-track::-webkit-scrollbar{display:none}\r\n\r\n .story{\r\n flex: 0 0 auto;\r\n display:flex;\r\n align-items:center;\r\n gap: 10px;\r\n padding: 10px 12px 10px 10px;\r\n border-radius: 999px;\r\n border: 1px solid var(--line);\r\n background: #fff;\r\n cursor:pointer;\r\n user-select:none;\r\n transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;\r\n min-width: 156px;\r\n }\r\n\r\n .story:hover{ transform: translateY(-1px); }\r\n\r\n .story.active{\r\n border-color: rgba(111,194,132,.65);\r\n box-shadow: 0 10px 22px rgba(111,194,132,.18);\r\n background: linear-gradient(180deg, rgba(160,207,160,.18), rgba(111,194,132,.06));\r\n }\r\n\r\n .story-thumb{\r\n width: 42px;\r\n height: 42px;\r\n border-radius: 999px;\r\n overflow:hidden;\r\n border: 2px solid rgba(111,194,132,.6);\r\n background: #eaf6ee;\r\n flex: 0 0 auto;\r\n }\r\n\r\n .story-thumb img{\r\n width:100%;\r\n height:100%;\r\n object-fit:cover;\r\n display:block;\r\n }\r\n\r\n .story-name{\r\n color:var(--primary); \r\n font-weight: 650;\r\n font-size: 14px;\r\n line-height: 1.2;\r\n white-space:nowrap;\r\n }\r\n\r\n .story-count{\r\n margin-right:auto;\r\n font-size: 12px;\r\n color: var(--gray);\r\n padding-right: 8px;\r\n }\r\n\r\n .navBtn{\r\n position:absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 34px;\r\n height: 34px;\r\n border-radius: 999px;\r\n border: 1px solid var(--line);\r\n background:#fff;\r\n cursor:pointer;\r\n display:grid;\r\n place-items:center;\r\n box-shadow: 0 10px 18px rgba(15,23,42,.08);\r\n transition: transform .12s ease;\r\n }\r\n\r\n .navBtn:hover{ transform: translateY(-50%) scale(1.03); }\r\n .navBtn:active{ transform: translateY(-50%) scale(.98); }\r\n\r\n .navPrev{ right: 10px; }\r\n .navNext{ left: 10px; }\r\n\r\n .navBtn svg{ width:18px; height:18px; fill:#0f172a; opacity:.9; }\r\n\r\n \/* ====== Grid ====== *\/\r\n .gridWrap{\r\n margin-top: 16px;\r\n background:#fff;\r\n border: 1px solid var(--line);\r\n border-radius: var(--radius-lg);\r\n padding: 18px;\r\n box-shadow: var(--shadow);\r\n }\r\n\r\n .gridTop{\r\n display:flex;\r\n align-items:center;\r\n justify-content:space-between;\r\n gap: 10px;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .gridTitle{\r\n margin:0;\r\n font-size: 16px;\r\n font-weight: 750;\r\n }\r\n\r\n .badge{\r\n font-size: 12px;\r\n color: #0f172a;\r\n background: rgba(160,207,160,.20);\r\n border: 1px solid rgba(111,194,132,.35);\r\n padding: 7px 10px;\r\n border-radius: 999px;\r\n white-space:nowrap;\r\n }\r\n\r\n .grid{\r\n display:grid;\r\n gap: 14px;\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n\r\n @media (min-width: 720px){\r\n .grid{ grid-template-columns: repeat(3, 1fr); }\r\n }\r\n\r\n @media (min-width: 1020px){\r\n .grid{ grid-template-columns: repeat(4, 1fr); }\r\n }\r\n\r\n .card{\r\n border: 1px solid var(--line);\r\n border-radius: var(--radius);\r\n overflow:hidden;\r\n background: var(--card);\r\n cursor:pointer;\r\n transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;\r\n display:flex;\r\n flex-direction:column;\r\n min-height: 210px;\r\n }\r\n\r\n .card:hover{\r\n transform: translateY(-2px);\r\n border-color: rgba(111,194,132,.55);\r\n box-shadow: 0 14px 28px rgba(111,194,132,.14);\r\n }\r\n\r\n .cardImg{\r\n position: relative;\r\n width: 100%;\r\n aspect-ratio: 1 \/ 1;\r\n overflow: hidden;\r\n border-radius: 14px;\r\n background:#f2f2f2;\r\n }\r\n\r\n .cardImg img{\r\n position:absolute;\r\n inset:0;\r\n width:100%;\r\n height:100%;\r\n object-fit: cover;\r\n object-position:center;\r\n display:block;\r\n }\r\n\r\n .cardBody{\r\n padding: 12px 12px 14px;\r\n display:flex;\r\n align-items:flex-start;\r\n justify-content:space-between;\r\n gap: 10px;\r\n flex: 1;\r\n }\r\n\r\n .cardTitle{\r\n margin:auto 0;\r\n font-size: 14.5px;\r\n font-weight: 750;\r\n line-height: 1.45;\r\n }\r\n\r\n .pill{\r\n flex: 0 0 auto;\r\n font-size: 12px;\r\n color: var(--gray);\r\n border: 1px solid var(--line);\r\n padding: 6px 8px;\r\n border-radius: 999px;\r\n background:#fff;\r\n white-space:nowrap;\r\n }\r\n\r\n .empty{\r\n padding: 22px;\r\n text-align:center;\r\n color: var(--gray);\r\n border: 1px dashed var(--line);\r\n border-radius: var(--radius);\r\n background: rgba(247,248,251,.65);\r\n }\r\n\r\n .story:focus, .card:focus, .navBtn:focus{\r\n outline: 3px solid rgba(111,194,132,.35);\r\n outline-offset: 2px;\r\n }\r\n \r\n #btnPrev, #btnNext{\r\n padding: 0px;\r\n }\r\n\r\n .story:hover .story-name{\r\n color:#fff!important; \r\n }\r\n\r\n @media (max-width: 640px){\r\n .header,\r\n .gridTop{\r\n align-items:flex-start;\r\n flex-direction:column;\r\n }\r\n\r\n .stories{\r\n padding: 14px 38px;\r\n }\r\n\r\n .story{\r\n min-width: 145px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div class=\"wrap\">\r\n <div class=\"header\">\r\n <div>\r\n <h1 class=\"title\">\u062a\u0635\u0641\u0651\u062d \u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a<\/h1>\r\n <p class=\"hint\">\u0627\u062e\u062a\u0631 \u0627\u0644\u062a\u0635\u0646\u064a\u0641 \u0627\u0644\u0631\u0626\u064a\u0633\u064a \u0644\u0639\u0631\u0636 \u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a \u0627\u0644\u0641\u0631\u0639\u064a\u0629 \u0627\u0644\u0645\u0631\u062a\u0628\u0637\u0629 \u0628\u0647.<\/p>\r\n <\/div>\r\n <p class=\"hint\">\u0643\u0644 \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a \u0645\u0634\u0631\u0648\u0639\u0643 \u0641\u064a \u0645\u0643\u0627\u0646 \u0648\u0627\u062d\u062f<\/p>\r\n <\/div>\r\n\r\n \r\n <section class=\"stories\" aria-label=\"\u0633\u0644\u0627\u064a\u062f\u0631 \u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629\">\r\n <button class=\"navBtn navPrev\" type=\"button\" aria-label=\"\u062a\u062d\u0631\u064a\u0643 \u0644\u0644\u064a\u0645\u064a\u0646\" id=\"btnPrev\">\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"m8.59 16.59 1.41 1.41 6-6-6-6-1.41 1.41L13.17 12z\"\/><\/svg>\r\n <\/button>\r\n\r\n <div class=\"stories-track\" id=\"parentTrack\" role=\"tablist\" aria-label=\"\u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629\"><\/div>\r\n\r\n <button class=\"navBtn navNext\" type=\"button\" aria-label=\"\u062a\u062d\u0631\u064a\u0643 \u0644\u0644\u064a\u0633\u0627\u0631\" id=\"btnNext\">\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z\"\/><\/svg>\r\n <\/button>\r\n <\/section>\r\n\r\n \r\n <section class=\"gridWrap\" aria-label=\"\u0634\u0628\u0643\u0629 \u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a \u0627\u0644\u0641\u0631\u0639\u064a\u0629\">\r\n <div class=\"gridTop\">\r\n <h2 class=\"gridTitle\" id=\"gridTitle\">\u0643\u0644 \u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a<\/h2>\r\n <div class=\"badge\" id=\"gridBadge\">\u0627\u0644\u0645\u0639\u0631\u0648\u0636: \u0627\u0644\u0643\u0644<\/div>\r\n <\/div>\r\n\r\n <div class=\"grid\" id=\"childGrid\"><\/div>\r\n <div class=\"empty\" id=\"emptyState\" style=\"display:none;\">\u0644\u0627 \u062a\u0648\u062c\u062f \u062a\u0635\u0646\u064a\u0641\u0627\u062a \u0641\u0631\u0639\u064a\u0629 \u0636\u0645\u0646 \u0647\u0630\u0627 \u0627\u0644\u0642\u0633\u0645 \u062d\u0627\u0644\u064a\u0627\u064b.<\/div>\r\n <\/section>\r\n <\/div>\r\n\r\n<script>\r\n \/*\r\n \u0645\u0647\u0645:\r\n 1) lang=ar \u064a\u062c\u0639\u0644 WPML \u064a\u062d\u0627\u0648\u0644 \u0625\u0631\u062c\u0627\u0639 \u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a \u0627\u0644\u0639\u0631\u0628\u064a\u0629.\r\n 2) \u0642\u0627\u0645\u0648\u0633 \u0627\u0644\u062a\u0631\u062c\u0645\u0629 \u0628\u0627\u0644\u0623\u0633\u0641\u0644 \u064a\u0636\u0645\u0646 \u0638\u0647\u0648\u0631 \u0627\u0644\u0623\u0633\u0645\u0627\u0621 \u0628\u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u062d\u062a\u0649 \u0644\u0648 \u0631\u062c\u0639\u062a \u0645\u0646 \u0627\u0644\u0640 API \u0628\u0627\u0644\u0625\u0646\u0643\u0644\u064a\u0632\u064a\u0629.\r\n 3) \u0627\u0644\u0631\u0648\u0627\u0628\u0637 \u062a\u0628\u0642\u0649 \u0645\u0646 \u0627\u0644\u0640 API\u060c \u064a\u0639\u0646\u064a \u0643\u0644 \u0643\u0631\u062a \u064a\u0641\u062a\u062d \u0631\u0627\u0628\u0637 \u0627\u0644\u062a\u0635\u0646\u064a\u0641 \u0627\u0644\u062d\u0642\u064a\u0642\u064a.\r\n *\/\r\n\r\n const API_URL_AR = \"\/wp-json\/limora\/v1\/product-categories?per_page=200&hide_empty=0&lang=ar\";\r\n const API_URL_EN = \"\/wp-json\/limora\/v1\/product-categories?per_page=200&hide_empty=0&lang=en\";\r\n\r\n const state = { activeParentId: \"all\" };\r\n\r\n const parentTrack = document.getElementById(\"parentTrack\");\r\n const childGrid = document.getElementById(\"childGrid\");\r\n const gridTitle = document.getElementById(\"gridTitle\");\r\n const gridBadge = document.getElementById(\"gridBadge\");\r\n const emptyState = document.getElementById(\"emptyState\");\r\n\r\n let parents = [];\r\n let childrenByParent = {};\r\n let allChildren = [];\r\n let englishImageMap = {};\r\n\r\n const EN_TO_AR = {\r\n \"ALL\": \"\u0627\u0644\u0643\u0644\",\r\n\r\n \"Bathrooms\": \"\u062d\u0645\u0627\u0645\u0627\u062a\",\r\n \"Bathroom Fixtures\": \"\u062a\u062c\u0647\u064a\u0632\u0627\u062a \u062d\u0645\u0627\u0645\",\r\n \"Bathroom Units\": \"\u0648\u062d\u062f\u0627\u062a \u062d\u0645\u0627\u0645\",\r\n \"Bathtubs & Jacuzzi\": \"\u0628\u0627\u0646\u064a\u0648\u0647\u0627\u062a \u0648\u062c\u0627\u0643\u0648\u0632\u064a\",\r\n \"Toilets\": \"\u0643\u0631\u0633\u064a \u062a\u0648\u0627\u0644\u064a\u062a\",\r\n \"Wash Basins\": \"\u0645\u063a\u0627\u0633\u0644\",\r\n\r\n \"Ceramics & Granite\": \"\u0633\u064a\u0631\u0627\u0645\u064a\u0643 \u0648\u063a\u0631\u0627\u0646\u064a\u062a\",\r\n \"Decorative Tiles\": \"\u062f\u064a\u0643\u0648\u0631\",\r\n \"Flooring\": \"\u0623\u0631\u0636\u064a\u0627\u062a\",\r\n \"Wall Tiles\": \"\u062c\u062f\u0631\u0627\u0646\",\r\n\r\n \"Electrical & Lighting\": \"\u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0621 \u0648\u0627\u0644\u0625\u0646\u0627\u0631\u0629\",\r\n \"Cables & Wires\": \"\u0643\u0627\u0628\u0644\u0627\u062a \u0648\u0623\u0633\u0644\u0627\u0643\",\r\n \"Electrical Equipment\": \"\u062a\u062c\u0647\u064a\u0632\u0627\u062a \u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629\",\r\n \"Indoor Lighting\": \"\u0625\u0646\u0627\u0631\u0629 \u062f\u0627\u062e\u0644\u064a\u0629\",\r\n \"Outdoor Lighting\": \"\u0625\u0646\u0627\u0631\u0629 \u062e\u0627\u0631\u062c\u064a\u0629\",\r\n \"Smart Systems\": \"\u0623\u0646\u0638\u0645\u0629 \u0630\u0643\u064a\u0629\",\r\n \"Switches & Sockets\": \"\u0645\u0641\u0627\u062a\u064a\u062d \u0648\u0641\u064a\u0634\",\r\n\r\n \"Kitchens\": \"\u0645\u0637\u0627\u0628\u062e\",\r\n \"Kitchen Accessories\": \"\u0625\u0643\u0633\u0633\u0648\u0627\u0631\u0627\u062a \u0645\u0637\u0627\u0628\u062e\",\r\n \"Kitchen Countertops\": \"\u0623\u0633\u0637\u062d \u0627\u0644\u0645\u0637\u0627\u0628\u062e\",\r\n \"Kitchen Sinks\": \"\u0623\u062d\u0648\u0627\u0636 \u0627\u0644\u0645\u0637\u0628\u062e\",\r\n \"Ready Kitchens\": \"\u0645\u0637\u0627\u0628\u062e \u062c\u0627\u0647\u0632\u0629\",\r\n\r\n \"Mixers & Faucets\": \"\u062e\u0644\u0627\u0637\u0627\u062a\",\r\n \"Faucet Sets\": \"\u0623\u0637\u0642\u0645 \u062e\u0644\u0627\u0637\u0627\u062a\",\r\n \"Kitchen Faucets\": \"\u062e\u0644\u0627\u0637\u0627\u062a \u0645\u0637\u0628\u062e\",\r\n \"Shower Systems\": \"\u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u062f\u0648\u0634\",\r\n \"Wash Basin Faucets\": \"\u062e\u0644\u0627\u0637\u0627\u062a \u0645\u063a\u0627\u0633\u0644\",\r\n\r\n \"Plumbing & Sanitary Systems\": \"\u062a\u0645\u062f\u064a\u062f\u0627\u062a \u0648\u0623\u062f\u0648\u0627\u062a \u0635\u062d\u064a\u0629\",\r\n \"PPR Pipes\": \"\u062a\u0645\u062f\u064a\u062f\u0627\u062a PPR\",\r\n \"PVC Pipes\": \"\u062a\u0645\u062f\u064a\u062f\u0627\u062a PVC\",\r\n \"Sanitary Supplies\": \"\u0645\u0633\u062a\u0644\u0632\u0645\u0627\u062a \u0635\u062d\u064a\u0629\",\r\n \"Water Heaters\": \"\u0633\u062e\u0627\u0646\u0627\u062a\",\r\n \"Water Tanks\": \"\u062e\u0632\u0627\u0646\u0627\u062a\",\r\n\r\n \"Renewable Energy\": \"\u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0628\u062f\u064a\u0644\u0629\",\r\n \"Solar Power Solutions\": \"\u062d\u0644\u0648\u0644 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629\",\r\n \"Solar Water Heaters\": \"\u0623\u0646\u0638\u0645\u0629 \u062a\u0633\u062e\u064a\u0646 \u0627\u0644\u0645\u064a\u0627\u0647 \u0627\u0644\u0634\u0645\u0633\u064a\u0629\"\r\n };\r\n\r\n const AR_TO_EN = Object.fromEntries(\r\n Object.entries(EN_TO_AR).map(([en, ar]) => [ar, en])\r\n );\r\n\r\n function tr(name){\r\n return EN_TO_AR[name] || name;\r\n }\r\n\r\n function englishKey(name){\r\n return AR_TO_EN[name] || name;\r\n }\r\n\r\n function esc(str){\r\n return String(str || \"\").replace(\/[&<>\"']\/g, s => ({\r\n \"&\":\"&\",\"<\":\"<\",\">\":\">\",'\"':\""\",\"'\":\"'\"\r\n }[s]));\r\n }\r\n\r\n function buildEnglishImageMap(apiParents){\r\n const map = {};\r\n\r\n (apiParents || []).forEach(p => {\r\n if(p.name && p.image) map[p.name] = p.image;\r\n\r\n (p.children || []).forEach(ch => {\r\n if(ch.name && ch.image) map[ch.name] = ch.image;\r\n });\r\n });\r\n\r\n englishImageMap = map;\r\n }\r\n\r\n function getImageFor(item){\r\n if(item.image) return item.image;\r\n\r\n const key = englishKey(item.name);\r\n return englishImageMap[key] || \"\";\r\n }\r\n\r\n function normalizeData(apiParents){\r\n const builtParents = [{\r\n id: \"all\",\r\n name: \"\u0627\u0644\u0643\u0644\",\r\n thumb: getImageFor(apiParents[0] || {}),\r\n count: 0\r\n }];\r\n\r\n const mapChildren = {};\r\n const flat = [];\r\n\r\n apiParents.forEach(p => {\r\n const parentNameAr = tr(p.name);\r\n\r\n builtParents.push({\r\n id: String(p.id),\r\n name: parentNameAr,\r\n thumb: getImageFor(p),\r\n count: (p.children || []).length\r\n });\r\n\r\n mapChildren[String(p.id)] = (p.children || []).map(ch => {\r\n const item = {\r\n id: String(ch.id),\r\n title: tr(ch.name),\r\n parent: parentNameAr,\r\n thumb: getImageFor(ch),\r\n link: ch.link\r\n };\r\n\r\n flat.push(item);\r\n return item;\r\n });\r\n });\r\n\r\n builtParents[0].count = flat.length;\r\n\r\n if(!builtParents[0].thumb && flat[0]?.thumb){\r\n builtParents[0].thumb = flat[0].thumb;\r\n }\r\n\r\n parents = builtParents;\r\n childrenByParent = mapChildren;\r\n allChildren = flat;\r\n }\r\n\r\n function getChildrenFor(parentId){\r\n if(parentId === \"all\") return allChildren;\r\n return childrenByParent[parentId] || [];\r\n }\r\n\r\n function renderParents(){\r\n parentTrack.innerHTML = parents.map(p => {\r\n const isActive = p.id === state.activeParentId;\r\n const count = p.count ?? (p.id === \"all\" ? allChildren.length : (childrenByParent[p.id]?.length || 0));\r\n\r\n return `\r\n <button class=\"story ${isActive ? \"active\":\"\"}\" data-parent=\"${esc(p.id)}\" type=\"button\" role=\"tab\" aria-selected=\"${isActive}\">\r\n <span class=\"story-thumb\" aria-hidden=\"true\">\r\n ${p.thumb ? `<img decoding=\"async\" src=\"${esc(p.thumb)}\" alt=\"\">` : ``}\r\n <\/span>\r\n <span class=\"story-name\">${esc(p.name)}<\/span>\r\n <span class=\"story-count\">${count}<\/span>\r\n <\/button>\r\n `;\r\n }).join(\"\");\r\n }\r\n\r\n function renderChildren(){\r\n const parentId = state.activeParentId;\r\n const parentObj = parents.find(p => p.id === parentId);\r\n const children = getChildrenFor(parentId);\r\n\r\n const label = parentObj ? parentObj.name : \"\u0627\u0644\u0643\u0644\";\r\n gridTitle.textContent = parentId === \"all\" ? \"\u0643\u0644 \u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a\" : `\u062a\u0635\u0646\u064a\u0641\u0627\u062a ${label}`;\r\n gridBadge.textContent = `\u0627\u0644\u0645\u0639\u0631\u0648\u0636: ${label}`;\r\n\r\n if(!children.length){\r\n childGrid.innerHTML = \"\";\r\n emptyState.style.display = \"block\";\r\n return;\r\n }\r\n\r\n emptyState.style.display = \"none\";\r\n\r\n childGrid.innerHTML = children.map(c => `\r\n <a class=\"card\" href=\"${esc(c.link)}\" aria-label=\"${esc(c.title)}\">\r\n <div class=\"cardImg\">\r\n ${c.thumb ? `<img decoding=\"async\" src=\"${esc(c.thumb)}\" alt=\"${esc(c.title)}\">` : ``}\r\n <\/div>\r\n <div class=\"cardBody\">\r\n <h3 class=\"cardTitle\">${esc(c.title)}<\/h3>\r\n <span class=\"pill\">${esc(c.parent)}<\/span>\r\n <\/div>\r\n <\/a>\r\n `).join(\"\");\r\n }\r\n\r\n function setActiveParent(parentId){\r\n state.activeParentId = parentId;\r\n renderParents();\r\n renderChildren();\r\n\r\n const btn = parentTrack.querySelector(`[data-parent=\"${CSS.escape(parentId)}\"]`);\r\n if(btn) btn.scrollIntoView({behavior:\"smooth\", inline:\"center\", block:\"nearest\"});\r\n }\r\n\r\n parentTrack.addEventListener(\"click\", (e) => {\r\n const btn = e.target.closest(\".story\");\r\n if(!btn) return;\r\n setActiveParent(btn.getAttribute(\"data-parent\"));\r\n });\r\n\r\n document.getElementById(\"btnPrev\").addEventListener(\"click\", () => {\r\n parentTrack.scrollBy({left: 360, behavior:\"smooth\"});\r\n });\r\n\r\n document.getElementById(\"btnNext\").addEventListener(\"click\", () => {\r\n parentTrack.scrollBy({left: -360, behavior:\"smooth\"});\r\n });\r\n\r\n (async function init(){\r\n try{\r\n \/*\r\n \u0646\u062d\u0645\u0651\u0644 \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0625\u0646\u0643\u0644\u064a\u0632\u064a\u0629 \u0641\u0642\u0637 \u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0635\u0648\u0631\u0647\u0627 \u0643\u0627\u062d\u062a\u064a\u0627\u0637 \u0625\u0630\u0627 \u0643\u0627\u0646\u062a \u0635\u0648\u0631 \u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u0641\u0627\u0631\u063a\u0629.\r\n \u0627\u0644\u0648\u0627\u062c\u0647\u0629 \u0646\u0641\u0633\u0647\u0627 \u0633\u062a\u0639\u0631\u0636 \u0627\u0644\u0639\u0631\u0628\u064a\u0629.\r\n *\/\r\n const enRes = await fetch(API_URL_EN, { credentials: \"same-origin\" });\r\n const enData = await enRes.json();\r\n if(enData && enData.parents) buildEnglishImageMap(enData.parents);\r\n\r\n const arRes = await fetch(API_URL_AR, { credentials: \"same-origin\" });\r\n const arData = await arRes.json();\r\n\r\n if(!arData || !arData.parents) throw new Error(\"Invalid Arabic API response\");\r\n\r\n normalizeData(arData.parents);\r\n setActiveParent(\"all\");\r\n\r\n }catch(err){\r\n console.error(err);\r\n emptyState.style.display = \"block\";\r\n emptyState.textContent = \"\u062a\u0639\u0630\u0631 \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a \u062d\u0627\u0644\u064a\u0627\u064b. \u064a\u0631\u062c\u0649 \u0627\u0644\u062a\u0623\u0643\u062f \u0645\u0646 \u0631\u0627\u0628\u0637 \u0627\u0644\u0640 API \u0648\u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u0644\u063a\u0629.\";\r\n }\r\n })();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0633\u0644\u0627\u064a\u062f\u0631 \u0648\u0634\u0628\u0643\u0629 \u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a \u062a\u0635\u0641\u0651\u062d \u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a \u0627\u062e\u062a\u0631 \u0627\u0644\u062a\u0635\u0646\u064a\u0641 \u0627\u0644\u0631\u0626\u064a\u0633\u064a \u0644\u0639\u0631\u0636 \u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a \u0627\u0644\u0641\u0631\u0639\u064a\u0629 \u0627\u0644\u0645\u0631\u062a\u0628\u0637\u0629 \u0628\u0647. \u0643\u0644 \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a \u0645\u0634\u0631\u0648\u0639\u0643 \u0641\u064a \u0645\u0643\u0627\u0646 \u0648\u0627\u062d\u062f \u0643\u0644 \u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a \u0627\u0644\u0645\u0639\u0631\u0648\u0636: \u0627\u0644\u0643\u0644 \u0644\u0627 \u062a\u0648\u062c\u062f \u062a\u0635\u0646\u064a\u0641\u0627\u062a \u0641\u0631\u0639\u064a\u0629 \u0636\u0645\u0646 \u0647\u0630\u0627 \u0627\u0644\u0642\u0633\u0645 \u062d\u0627\u0644\u064a\u0627\u064b.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_joinchat":[],"footnotes":""},"class_list":["post-22731","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/limoratrade.com\/ar\/wp-json\/wp\/v2\/pages\/22731","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/limoratrade.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/limoratrade.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/limoratrade.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/limoratrade.com\/ar\/wp-json\/wp\/v2\/comments?post=22731"}],"version-history":[{"count":10,"href":"https:\/\/limoratrade.com\/ar\/wp-json\/wp\/v2\/pages\/22731\/revisions"}],"predecessor-version":[{"id":22856,"href":"https:\/\/limoratrade.com\/ar\/wp-json\/wp\/v2\/pages\/22731\/revisions\/22856"}],"wp:attachment":[{"href":"https:\/\/limoratrade.com\/ar\/wp-json\/wp\/v2\/media?parent=22731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \u0633\u0644\u0627\u064a\u062f\u0631 \u0648\u0634\u0628\u0643\u0629 \u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a<\/title>\r\n\r\n <style>\r\n :root{\r\n --primary:#6fc284;\r\n --light:#a0cfa0;\r\n --gray:#67686b;\r\n --bg:#f7f8fb;\r\n --card:#ffffff;\r\n --line: rgba(103,104,107,.18);\r\n --shadow: 0 10px 28px rgba(15, 23, 42, .08);\r\n --radius: 18px;\r\n --radius-lg: 22px;\r\n --font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n }\r\n\r\n *{box-sizing:border-box}\r\n\r\n body{\r\n margin:0;\r\n font-family:var(--font);\r\n background: var(--bg);\r\n color:#0f172a;\r\n direction: rtl;\r\n text-align: right;\r\n }\r\n\r\n .wrap{\r\n width:min(1200px, 92vw);\r\n margin: 34px auto 60px;\r\n }\r\n\r\n .header{\r\n display:flex;\r\n align-items:flex-end;\r\n justify-content:space-between;\r\n gap:12px;\r\n margin-bottom: 14px;\r\n }\r\n\r\n .title{\r\n margin:0;\r\n font-size: 22px;\r\n letter-spacing:.2px;\r\n }\r\n\r\n .hint{\r\n margin:0;\r\n color: var(--gray);\r\n font-size: 13px;\r\n }\r\n\r\n \/* ====== Top \"Stories\" Slider ====== *\/\r\n .stories{\r\n position: relative;\r\n background: #fff;\r\n border: 1px solid var(--line);\r\n border-radius: var(--radius-lg);\r\n padding: 14px 44px;\r\n box-shadow: var(--shadow);\r\n overflow:hidden;\r\n }\r\n\r\n .stories-track{\r\n display:flex;\r\n gap: 12px;\r\n overflow:auto;\r\n scroll-behavior:smooth;\r\n padding: 2px 2px 6px;\r\n scrollbar-width: none;\r\n }\r\n\r\n .stories-track::-webkit-scrollbar{display:none}\r\n\r\n .story{\r\n flex: 0 0 auto;\r\n display:flex;\r\n align-items:center;\r\n gap: 10px;\r\n padding: 10px 12px 10px 10px;\r\n border-radius: 999px;\r\n border: 1px solid var(--line);\r\n background: #fff;\r\n cursor:pointer;\r\n user-select:none;\r\n transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;\r\n min-width: 156px;\r\n }\r\n\r\n .story:hover{ transform: translateY(-1px); }\r\n\r\n .story.active{\r\n border-color: rgba(111,194,132,.65);\r\n box-shadow: 0 10px 22px rgba(111,194,132,.18);\r\n background: linear-gradient(180deg, rgba(160,207,160,.18), rgba(111,194,132,.06));\r\n }\r\n\r\n .story-thumb{\r\n width: 42px;\r\n height: 42px;\r\n border-radius: 999px;\r\n overflow:hidden;\r\n border: 2px solid rgba(111,194,132,.6);\r\n background: #eaf6ee;\r\n flex: 0 0 auto;\r\n }\r\n\r\n .story-thumb img{\r\n width:100%;\r\n height:100%;\r\n object-fit:cover;\r\n display:block;\r\n }\r\n\r\n .story-name{\r\n color:var(--primary); \r\n font-weight: 650;\r\n font-size: 14px;\r\n line-height: 1.2;\r\n white-space:nowrap;\r\n }\r\n\r\n .story-count{\r\n margin-right:auto;\r\n font-size: 12px;\r\n color: var(--gray);\r\n padding-right: 8px;\r\n }\r\n\r\n .navBtn{\r\n position:absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 34px;\r\n height: 34px;\r\n border-radius: 999px;\r\n border: 1px solid var(--line);\r\n background:#fff;\r\n cursor:pointer;\r\n display:grid;\r\n place-items:center;\r\n box-shadow: 0 10px 18px rgba(15,23,42,.08);\r\n transition: transform .12s ease;\r\n }\r\n\r\n .navBtn:hover{ transform: translateY(-50%) scale(1.03); }\r\n .navBtn:active{ transform: translateY(-50%) scale(.98); }\r\n\r\n .navPrev{ right: 10px; }\r\n .navNext{ left: 10px; }\r\n\r\n .navBtn svg{ width:18px; height:18px; fill:#0f172a; opacity:.9; }\r\n\r\n \/* ====== Grid ====== *\/\r\n .gridWrap{\r\n margin-top: 16px;\r\n background:#fff;\r\n border: 1px solid var(--line);\r\n border-radius: var(--radius-lg);\r\n padding: 18px;\r\n box-shadow: var(--shadow);\r\n }\r\n\r\n .gridTop{\r\n display:flex;\r\n align-items:center;\r\n justify-content:space-between;\r\n gap: 10px;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .gridTitle{\r\n margin:0;\r\n font-size: 16px;\r\n font-weight: 750;\r\n }\r\n\r\n .badge{\r\n font-size: 12px;\r\n color: #0f172a;\r\n background: rgba(160,207,160,.20);\r\n border: 1px solid rgba(111,194,132,.35);\r\n padding: 7px 10px;\r\n border-radius: 999px;\r\n white-space:nowrap;\r\n }\r\n\r\n .grid{\r\n display:grid;\r\n gap: 14px;\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n\r\n @media (min-width: 720px){\r\n .grid{ grid-template-columns: repeat(3, 1fr); }\r\n }\r\n\r\n @media (min-width: 1020px){\r\n .grid{ grid-template-columns: repeat(4, 1fr); }\r\n }\r\n\r\n .card{\r\n border: 1px solid var(--line);\r\n border-radius: var(--radius);\r\n overflow:hidden;\r\n background: var(--card);\r\n cursor:pointer;\r\n transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;\r\n display:flex;\r\n flex-direction:column;\r\n min-height: 210px;\r\n }\r\n\r\n .card:hover{\r\n transform: translateY(-2px);\r\n border-color: rgba(111,194,132,.55);\r\n box-shadow: 0 14px 28px rgba(111,194,132,.14);\r\n }\r\n\r\n .cardImg{\r\n position: relative;\r\n width: 100%;\r\n aspect-ratio: 1 \/ 1;\r\n overflow: hidden;\r\n border-radius: 14px;\r\n background:#f2f2f2;\r\n }\r\n\r\n .cardImg img{\r\n position:absolute;\r\n inset:0;\r\n width:100%;\r\n height:100%;\r\n object-fit: cover;\r\n object-position:center;\r\n display:block;\r\n }\r\n\r\n .cardBody{\r\n padding: 12px 12px 14px;\r\n display:flex;\r\n align-items:flex-start;\r\n justify-content:space-between;\r\n gap: 10px;\r\n flex: 1;\r\n }\r\n\r\n .cardTitle{\r\n margin:auto 0;\r\n font-size: 14.5px;\r\n font-weight: 750;\r\n line-height: 1.45;\r\n }\r\n\r\n .pill{\r\n flex: 0 0 auto;\r\n font-size: 12px;\r\n color: var(--gray);\r\n border: 1px solid var(--line);\r\n padding: 6px 8px;\r\n border-radius: 999px;\r\n background:#fff;\r\n white-space:nowrap;\r\n }\r\n\r\n .empty{\r\n padding: 22px;\r\n text-align:center;\r\n color: var(--gray);\r\n border: 1px dashed var(--line);\r\n border-radius: var(--radius);\r\n background: rgba(247,248,251,.65);\r\n }\r\n\r\n .story:focus, .card:focus, .navBtn:focus{\r\n outline: 3px solid rgba(111,194,132,.35);\r\n outline-offset: 2px;\r\n }\r\n \r\n #btnPrev, #btnNext{\r\n padding: 0px;\r\n }\r\n\r\n .story:hover .story-name{\r\n color:#fff!important; \r\n }\r\n\r\n @media (max-width: 640px){\r\n .header,\r\n .gridTop{\r\n align-items:flex-start;\r\n flex-direction:column;\r\n }\r\n\r\n .stories{\r\n padding: 14px 38px;\r\n }\r\n\r\n .story{\r\n min-width: 145px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div class=\"wrap\">\r\n <div class=\"header\">\r\n <div>\r\n <h1 class=\"title\">\u062a\u0635\u0641\u0651\u062d \u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a<\/h1>\r\n <p class=\"hint\">\u0627\u062e\u062a\u0631 \u0627\u0644\u062a\u0635\u0646\u064a\u0641 \u0627\u0644\u0631\u0626\u064a\u0633\u064a \u0644\u0639\u0631\u0636 \u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a \u0627\u0644\u0641\u0631\u0639\u064a\u0629 \u0627\u0644\u0645\u0631\u062a\u0628\u0637\u0629 \u0628\u0647.<\/p>\r\n <\/div>\r\n <p class=\"hint\">\u0643\u0644 \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a \u0645\u0634\u0631\u0648\u0639\u0643 \u0641\u064a \u0645\u0643\u0627\u0646 \u0648\u0627\u062d\u062f<\/p>\r\n <\/div>\r\n\r\n \r\n <section class=\"stories\" aria-label=\"\u0633\u0644\u0627\u064a\u062f\u0631 \u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629\">\r\n <button class=\"navBtn navPrev\" type=\"button\" aria-label=\"\u062a\u062d\u0631\u064a\u0643 \u0644\u0644\u064a\u0645\u064a\u0646\" id=\"btnPrev\">\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"m8.59 16.59 1.41 1.41 6-6-6-6-1.41 1.41L13.17 12z\"\/><\/svg>\r\n <\/button>\r\n\r\n <div class=\"stories-track\" id=\"parentTrack\" role=\"tablist\" aria-label=\"\u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629\"><\/div>\r\n\r\n <button class=\"navBtn navNext\" type=\"button\" aria-label=\"\u062a\u062d\u0631\u064a\u0643 \u0644\u0644\u064a\u0633\u0627\u0631\" id=\"btnNext\">\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z\"\/><\/svg>\r\n <\/button>\r\n <\/section>\r\n\r\n \r\n <section class=\"gridWrap\" aria-label=\"\u0634\u0628\u0643\u0629 \u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a \u0627\u0644\u0641\u0631\u0639\u064a\u0629\">\r\n <div class=\"gridTop\">\r\n <h2 class=\"gridTitle\" id=\"gridTitle\">\u0643\u0644 \u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a<\/h2>\r\n <div class=\"badge\" id=\"gridBadge\">\u0627\u0644\u0645\u0639\u0631\u0648\u0636: \u0627\u0644\u0643\u0644<\/div>\r\n <\/div>\r\n\r\n <div class=\"grid\" id=\"childGrid\"><\/div>\r\n <div class=\"empty\" id=\"emptyState\" style=\"display:none;\">\u0644\u0627 \u062a\u0648\u062c\u062f \u062a\u0635\u0646\u064a\u0641\u0627\u062a \u0641\u0631\u0639\u064a\u0629 \u0636\u0645\u0646 \u0647\u0630\u0627 \u0627\u0644\u0642\u0633\u0645 \u062d\u0627\u0644\u064a\u0627\u064b.<\/div>\r\n <\/section>\r\n <\/div>\r\n\r\n<script>\r\n \/*\r\n \u0645\u0647\u0645:\r\n 1) lang=ar \u064a\u062c\u0639\u0644 WPML \u064a\u062d\u0627\u0648\u0644 \u0625\u0631\u062c\u0627\u0639 \u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a \u0627\u0644\u0639\u0631\u0628\u064a\u0629.\r\n 2) \u0642\u0627\u0645\u0648\u0633 \u0627\u0644\u062a\u0631\u062c\u0645\u0629 \u0628\u0627\u0644\u0623\u0633\u0641\u0644 \u064a\u0636\u0645\u0646 \u0638\u0647\u0648\u0631 \u0627\u0644\u0623\u0633\u0645\u0627\u0621 \u0628\u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u062d\u062a\u0649 \u0644\u0648 \u0631\u062c\u0639\u062a \u0645\u0646 \u0627\u0644\u0640 API \u0628\u0627\u0644\u0625\u0646\u0643\u0644\u064a\u0632\u064a\u0629.\r\n 3) \u0627\u0644\u0631\u0648\u0627\u0628\u0637 \u062a\u0628\u0642\u0649 \u0645\u0646 \u0627\u0644\u0640 API\u060c \u064a\u0639\u0646\u064a \u0643\u0644 \u0643\u0631\u062a \u064a\u0641\u062a\u062d \u0631\u0627\u0628\u0637 \u0627\u0644\u062a\u0635\u0646\u064a\u0641 \u0627\u0644\u062d\u0642\u064a\u0642\u064a.\r\n *\/\r\n\r\n const API_URL_AR = \"\/wp-json\/limora\/v1\/product-categories?per_page=200&hide_empty=0&lang=ar\";\r\n const API_URL_EN = \"\/wp-json\/limora\/v1\/product-categories?per_page=200&hide_empty=0&lang=en\";\r\n\r\n const state = { activeParentId: \"all\" };\r\n\r\n const parentTrack = document.getElementById(\"parentTrack\");\r\n const childGrid = document.getElementById(\"childGrid\");\r\n const gridTitle = document.getElementById(\"gridTitle\");\r\n const gridBadge = document.getElementById(\"gridBadge\");\r\n const emptyState = document.getElementById(\"emptyState\");\r\n\r\n let parents = [];\r\n let childrenByParent = {};\r\n let allChildren = [];\r\n let englishImageMap = {};\r\n\r\n const EN_TO_AR = {\r\n \"ALL\": \"\u0627\u0644\u0643\u0644\",\r\n\r\n \"Bathrooms\": \"\u062d\u0645\u0627\u0645\u0627\u062a\",\r\n \"Bathroom Fixtures\": \"\u062a\u062c\u0647\u064a\u0632\u0627\u062a \u062d\u0645\u0627\u0645\",\r\n \"Bathroom Units\": \"\u0648\u062d\u062f\u0627\u062a \u062d\u0645\u0627\u0645\",\r\n \"Bathtubs & Jacuzzi\": \"\u0628\u0627\u0646\u064a\u0648\u0647\u0627\u062a \u0648\u062c\u0627\u0643\u0648\u0632\u064a\",\r\n \"Toilets\": \"\u0643\u0631\u0633\u064a \u062a\u0648\u0627\u0644\u064a\u062a\",\r\n \"Wash Basins\": \"\u0645\u063a\u0627\u0633\u0644\",\r\n\r\n \"Ceramics & Granite\": \"\u0633\u064a\u0631\u0627\u0645\u064a\u0643 \u0648\u063a\u0631\u0627\u0646\u064a\u062a\",\r\n \"Decorative Tiles\": \"\u062f\u064a\u0643\u0648\u0631\",\r\n \"Flooring\": \"\u0623\u0631\u0636\u064a\u0627\u062a\",\r\n \"Wall Tiles\": \"\u062c\u062f\u0631\u0627\u0646\",\r\n\r\n \"Electrical & Lighting\": \"\u0627\u0644\u0643\u0647\u0631\u0628\u0627\u0621 \u0648\u0627\u0644\u0625\u0646\u0627\u0631\u0629\",\r\n \"Cables & Wires\": \"\u0643\u0627\u0628\u0644\u0627\u062a \u0648\u0623\u0633\u0644\u0627\u0643\",\r\n \"Electrical Equipment\": \"\u062a\u062c\u0647\u064a\u0632\u0627\u062a \u0643\u0647\u0631\u0628\u0627\u0626\u064a\u0629\",\r\n \"Indoor Lighting\": \"\u0625\u0646\u0627\u0631\u0629 \u062f\u0627\u062e\u0644\u064a\u0629\",\r\n \"Outdoor Lighting\": \"\u0625\u0646\u0627\u0631\u0629 \u062e\u0627\u0631\u062c\u064a\u0629\",\r\n \"Smart Systems\": \"\u0623\u0646\u0638\u0645\u0629 \u0630\u0643\u064a\u0629\",\r\n \"Switches & Sockets\": \"\u0645\u0641\u0627\u062a\u064a\u062d \u0648\u0641\u064a\u0634\",\r\n\r\n \"Kitchens\": \"\u0645\u0637\u0627\u0628\u062e\",\r\n \"Kitchen Accessories\": \"\u0625\u0643\u0633\u0633\u0648\u0627\u0631\u0627\u062a \u0645\u0637\u0627\u0628\u062e\",\r\n \"Kitchen Countertops\": \"\u0623\u0633\u0637\u062d \u0627\u0644\u0645\u0637\u0627\u0628\u062e\",\r\n \"Kitchen Sinks\": \"\u0623\u062d\u0648\u0627\u0636 \u0627\u0644\u0645\u0637\u0628\u062e\",\r\n \"Ready Kitchens\": \"\u0645\u0637\u0627\u0628\u062e \u062c\u0627\u0647\u0632\u0629\",\r\n\r\n \"Mixers & Faucets\": \"\u062e\u0644\u0627\u0637\u0627\u062a\",\r\n \"Faucet Sets\": \"\u0623\u0637\u0642\u0645 \u062e\u0644\u0627\u0637\u0627\u062a\",\r\n \"Kitchen Faucets\": \"\u062e\u0644\u0627\u0637\u0627\u062a \u0645\u0637\u0628\u062e\",\r\n \"Shower Systems\": \"\u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u062f\u0648\u0634\",\r\n \"Wash Basin Faucets\": \"\u062e\u0644\u0627\u0637\u0627\u062a \u0645\u063a\u0627\u0633\u0644\",\r\n\r\n \"Plumbing & Sanitary Systems\": \"\u062a\u0645\u062f\u064a\u062f\u0627\u062a \u0648\u0623\u062f\u0648\u0627\u062a \u0635\u062d\u064a\u0629\",\r\n \"PPR Pipes\": \"\u062a\u0645\u062f\u064a\u062f\u0627\u062a PPR\",\r\n \"PVC Pipes\": \"\u062a\u0645\u062f\u064a\u062f\u0627\u062a PVC\",\r\n \"Sanitary Supplies\": \"\u0645\u0633\u062a\u0644\u0632\u0645\u0627\u062a \u0635\u062d\u064a\u0629\",\r\n \"Water Heaters\": \"\u0633\u062e\u0627\u0646\u0627\u062a\",\r\n \"Water Tanks\": \"\u062e\u0632\u0627\u0646\u0627\u062a\",\r\n\r\n \"Renewable Energy\": \"\u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0628\u062f\u064a\u0644\u0629\",\r\n \"Solar Power Solutions\": \"\u062d\u0644\u0648\u0644 \u0627\u0644\u0637\u0627\u0642\u0629 \u0627\u0644\u0634\u0645\u0633\u064a\u0629\",\r\n \"Solar Water Heaters\": \"\u0623\u0646\u0638\u0645\u0629 \u062a\u0633\u062e\u064a\u0646 \u0627\u0644\u0645\u064a\u0627\u0647 \u0627\u0644\u0634\u0645\u0633\u064a\u0629\"\r\n };\r\n\r\n const AR_TO_EN = Object.fromEntries(\r\n Object.entries(EN_TO_AR).map(([en, ar]) => [ar, en])\r\n );\r\n\r\n function tr(name){\r\n return EN_TO_AR[name] || name;\r\n }\r\n\r\n function englishKey(name){\r\n return AR_TO_EN[name] || name;\r\n }\r\n\r\n function esc(str){\r\n return String(str || \"\").replace(\/[&<>\"']\/g, s => ({\r\n \"&\":\"&\",\"<\":\"<\",\">\":\">\",'\"':\""\",\"'\":\"'\"\r\n }[s]));\r\n }\r\n\r\n function buildEnglishImageMap(apiParents){\r\n const map = {};\r\n\r\n (apiParents || []).forEach(p => {\r\n if(p.name && p.image) map[p.name] = p.image;\r\n\r\n (p.children || []).forEach(ch => {\r\n if(ch.name && ch.image) map[ch.name] = ch.image;\r\n });\r\n });\r\n\r\n englishImageMap = map;\r\n }\r\n\r\n function getImageFor(item){\r\n if(item.image) return item.image;\r\n\r\n const key = englishKey(item.name);\r\n return englishImageMap[key] || \"\";\r\n }\r\n\r\n function normalizeData(apiParents){\r\n const builtParents = [{\r\n id: \"all\",\r\n name: \"\u0627\u0644\u0643\u0644\",\r\n thumb: getImageFor(apiParents[0] || {}),\r\n count: 0\r\n }];\r\n\r\n const mapChildren = {};\r\n const flat = [];\r\n\r\n apiParents.forEach(p => {\r\n const parentNameAr = tr(p.name);\r\n\r\n builtParents.push({\r\n id: String(p.id),\r\n name: parentNameAr,\r\n thumb: getImageFor(p),\r\n count: (p.children || []).length\r\n });\r\n\r\n mapChildren[String(p.id)] = (p.children || []).map(ch => {\r\n const item = {\r\n id: String(ch.id),\r\n title: tr(ch.name),\r\n parent: parentNameAr,\r\n thumb: getImageFor(ch),\r\n link: ch.link\r\n };\r\n\r\n flat.push(item);\r\n return item;\r\n });\r\n });\r\n\r\n builtParents[0].count = flat.length;\r\n\r\n if(!builtParents[0].thumb && flat[0]?.thumb){\r\n builtParents[0].thumb = flat[0].thumb;\r\n }\r\n\r\n parents = builtParents;\r\n childrenByParent = mapChildren;\r\n allChildren = flat;\r\n }\r\n\r\n function getChildrenFor(parentId){\r\n if(parentId === \"all\") return allChildren;\r\n return childrenByParent[parentId] || [];\r\n }\r\n\r\n function renderParents(){\r\n parentTrack.innerHTML = parents.map(p => {\r\n const isActive = p.id === state.activeParentId;\r\n const count = p.count ?? (p.id === \"all\" ? allChildren.length : (childrenByParent[p.id]?.length || 0));\r\n\r\n return `\r\n <button class=\"story ${isActive ? \"active\":\"\"}\" data-parent=\"${esc(p.id)}\" type=\"button\" role=\"tab\" aria-selected=\"${isActive}\">\r\n <span class=\"story-thumb\" aria-hidden=\"true\">\r\n ${p.thumb ? `<img decoding=\"async\" src=\"${esc(p.thumb)}\" alt=\"\">` : ``}\r\n <\/span>\r\n <span class=\"story-name\">${esc(p.name)}<\/span>\r\n <span class=\"story-count\">${count}<\/span>\r\n <\/button>\r\n `;\r\n }).join(\"\");\r\n }\r\n\r\n function renderChildren(){\r\n const parentId = state.activeParentId;\r\n const parentObj = parents.find(p => p.id === parentId);\r\n const children = getChildrenFor(parentId);\r\n\r\n const label = parentObj ? parentObj.name : \"\u0627\u0644\u0643\u0644\";\r\n gridTitle.textContent = parentId === \"all\" ? \"\u0643\u0644 \u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a\" : `\u062a\u0635\u0646\u064a\u0641\u0627\u062a ${label}`;\r\n gridBadge.textContent = `\u0627\u0644\u0645\u0639\u0631\u0648\u0636: ${label}`;\r\n\r\n if(!children.length){\r\n childGrid.innerHTML = \"\";\r\n emptyState.style.display = \"block\";\r\n return;\r\n }\r\n\r\n emptyState.style.display = \"none\";\r\n\r\n childGrid.innerHTML = children.map(c => `\r\n <a class=\"card\" href=\"${esc(c.link)}\" aria-label=\"${esc(c.title)}\">\r\n <div class=\"cardImg\">\r\n ${c.thumb ? `<img decoding=\"async\" src=\"${esc(c.thumb)}\" alt=\"${esc(c.title)}\">` : ``}\r\n <\/div>\r\n <div class=\"cardBody\">\r\n <h3 class=\"cardTitle\">${esc(c.title)}<\/h3>\r\n <span class=\"pill\">${esc(c.parent)}<\/span>\r\n <\/div>\r\n <\/a>\r\n `).join(\"\");\r\n }\r\n\r\n function setActiveParent(parentId){\r\n state.activeParentId = parentId;\r\n renderParents();\r\n renderChildren();\r\n\r\n const btn = parentTrack.querySelector(`[data-parent=\"${CSS.escape(parentId)}\"]`);\r\n if(btn) btn.scrollIntoView({behavior:\"smooth\", inline:\"center\", block:\"nearest\"});\r\n }\r\n\r\n parentTrack.addEventListener(\"click\", (e) => {\r\n const btn = e.target.closest(\".story\");\r\n if(!btn) return;\r\n setActiveParent(btn.getAttribute(\"data-parent\"));\r\n });\r\n\r\n document.getElementById(\"btnPrev\").addEventListener(\"click\", () => {\r\n parentTrack.scrollBy({left: 360, behavior:\"smooth\"});\r\n });\r\n\r\n document.getElementById(\"btnNext\").addEventListener(\"click\", () => {\r\n parentTrack.scrollBy({left: -360, behavior:\"smooth\"});\r\n });\r\n\r\n (async function init(){\r\n try{\r\n \/*\r\n \u0646\u062d\u0645\u0651\u0644 \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0625\u0646\u0643\u0644\u064a\u0632\u064a\u0629 \u0641\u0642\u0637 \u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0635\u0648\u0631\u0647\u0627 \u0643\u0627\u062d\u062a\u064a\u0627\u0637 \u0625\u0630\u0627 \u0643\u0627\u0646\u062a \u0635\u0648\u0631 \u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u0641\u0627\u0631\u063a\u0629.\r\n \u0627\u0644\u0648\u0627\u062c\u0647\u0629 \u0646\u0641\u0633\u0647\u0627 \u0633\u062a\u0639\u0631\u0636 \u0627\u0644\u0639\u0631\u0628\u064a\u0629.\r\n *\/\r\n const enRes = await fetch(API_URL_EN, { credentials: \"same-origin\" });\r\n const enData = await enRes.json();\r\n if(enData && enData.parents) buildEnglishImageMap(enData.parents);\r\n\r\n const arRes = await fetch(API_URL_AR, { credentials: \"same-origin\" });\r\n const arData = await arRes.json();\r\n\r\n if(!arData || !arData.parents) throw new Error(\"Invalid Arabic API response\");\r\n\r\n normalizeData(arData.parents);\r\n setActiveParent(\"all\");\r\n\r\n }catch(err){\r\n console.error(err);\r\n emptyState.style.display = \"block\";\r\n emptyState.textContent = \"\u062a\u0639\u0630\u0631 \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a \u062d\u0627\u0644\u064a\u0627\u064b. \u064a\u0631\u062c\u0649 \u0627\u0644\u062a\u0623\u0643\u062f \u0645\u0646 \u0631\u0627\u0628\u0637 \u0627\u0644\u0640 API \u0648\u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u0644\u063a\u0629.\";\r\n }\r\n })();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0633\u0644\u0627\u064a\u062f\u0631 \u0648\u0634\u0628\u0643\u0629 \u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a \u062a\u0635\u0641\u0651\u062d \u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a \u0627\u062e\u062a\u0631 \u0627\u0644\u062a\u0635\u0646\u064a\u0641 \u0627\u0644\u0631\u0626\u064a\u0633\u064a \u0644\u0639\u0631\u0636 \u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a \u0627\u0644\u0641\u0631\u0639\u064a\u0629 \u0627\u0644\u0645\u0631\u062a\u0628\u0637\u0629 \u0628\u0647. \u0643\u0644 \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a \u0645\u0634\u0631\u0648\u0639\u0643 \u0641\u064a \u0645\u0643\u0627\u0646 \u0648\u0627\u062d\u062f \u0643\u0644 \u0627\u0644\u062a\u0635\u0646\u064a\u0641\u0627\u062a \u0627\u0644\u0645\u0639\u0631\u0648\u0636: \u0627\u0644\u0643\u0644 \u0644\u0627 \u062a\u0648\u062c\u062f \u062a\u0635\u0646\u064a\u0641\u0627\u062a \u0641\u0631\u0639\u064a\u0629 \u0636\u0645\u0646 \u0647\u0630\u0627 \u0627\u0644\u0642\u0633\u0645 \u062d\u0627\u0644\u064a\u0627\u064b.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_joinchat":[],"footnotes":""},"class_list":["post-22731","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/limoratrade.com\/ar\/wp-json\/wp\/v2\/pages\/22731","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/limoratrade.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/limoratrade.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/limoratrade.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/limoratrade.com\/ar\/wp-json\/wp\/v2\/comments?post=22731"}],"version-history":[{"count":10,"href":"https:\/\/limoratrade.com\/ar\/wp-json\/wp\/v2\/pages\/22731\/revisions"}],"predecessor-version":[{"id":22856,"href":"https:\/\/limoratrade.com\/ar\/wp-json\/wp\/v2\/pages\/22731\/revisions\/22856"}],"wp:attachment":[{"href":"https:\/\/limoratrade.com\/ar\/wp-json\/wp\/v2\/media?parent=22731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}