import { e as buildAssetsURL } from '../_/nitro.mjs';
import { d } from './Skeleton-BBJiWBrY.mjs';
import { mergeProps, withCtx, openBlock, createBlock, Fragment, renderList, createVNode, computed, unref, useSSRContext, ref, withModifiers, toDisplayString, createTextVNode, watch } from 'vue';
import { ssrRenderAttrs, ssrRenderComponent, ssrRenderClass, ssrRenderList, ssrRenderAttr, ssrInterpolate, ssrRenderStyle, ssrIncludeBooleanAttr, ssrRenderTeleport } from 'vue/server-renderer';
import { d as uf, a as Qt, h as Ma, b as Qs, i as wn, _ as An, g as $a } from './server.mjs';
import { g } from './SvgIcon-BnUcaRsf.mjs';
import { d as d$1 } from './breadcrumb-gjE702oE.mjs';
import { h as he, g as ge, z, I, B, A as A$1 } from './swiper-vue-DHAv4051.mjs';
import { $ } from './ProductCard-JXWs1p7c.mjs';
import { n } from './Backdrop-BEGlY-L5.mjs';
import { a } from './NoData-DKdVqXcQ.mjs';
import { p } from './Modal-CfKvzdGl.mjs';
import { A, g as g$1 } from './star-mqjJGHgV.mjs';
import { p as pe } from './index-Dj5w-pp2.mjs';
import 'node:http';
import 'node:https';
import 'node:fs';
import 'node:url';
import 'node:path';
import 'unhead';
import '@unhead/shared';
import 'vue-router';
import 'vue-rate';
import 'date-fns';
import '@hennge/vue3-pagination';
import 'axios';
import 'vue-social-sharing';

const J = {};
const K = J.setup;
J.setup = (e2, l2) => {
  const s2 = useSSRContext();
  return (s2.modules || (s2.modules = /* @__PURE__ */ new Set())).add("components/Shared/ProductDetailsSkelton.vue"), K ? K(e2, l2) : undefined;
};
const N = uf(J, [["ssrRender", function(t2, s2, a2, i2) {
  const o2 = d;
  s2(`<div${ssrRenderAttrs(mergeProps({ class: "pb-6 lg:pb-14" }, i2))}>`), s2(ssrRenderComponent(o2, { class: "h-[16px] w-[200px] mb-10" }, null, a2)), s2('<div class="grid grid-cols-1 lg:grid-cols-12 gap-10"><div class="lg:col-span-7"><div class="gap-8 flex flex-col md:flex-row"><div class="order-2 md:order-1 w-full md:block gap-2 flex md:w-[128px] max-w-[100%]">'), s2(ssrRenderComponent(o2, { class: "h-[128px] flex-1 w-[128px] mb-2" }, null, a2)), s2(ssrRenderComponent(o2, { class: "h-[128px] flex-1 w-[128px] mb-2" }, null, a2)), s2(ssrRenderComponent(o2, { class: "h-[128px] flex-1 w-[128px] mb-2" }, null, a2)), s2(ssrRenderComponent(o2, { class: "h-[128px] hidden md:block w-[128px] mb-2" }, null, a2)), s2('</div><div class="w-full order-1 md:order-2 h-[340px] lg:h-[680px] max-w-[100%]">'), s2(ssrRenderComponent(o2, { class: "h-[100%] w-[100%] rounded-md" }, null, a2)), s2('</div></div><div class="mt-8 space-y-4">'), s2(ssrRenderComponent(o2, { class: "h-[20px] w-[120px]" }, null, a2)), s2('<div class="space-y-6">'), s2(ssrRenderComponent(o2, { class: "h-[20px] w-[400px] max-w-[100%]" }, null, a2)), s2(ssrRenderComponent(o2, { class: "h-[16px] w-[400px] max-w-[100%]" }, null, a2)), s2(ssrRenderComponent(o2, { class: "h-[16px] w-[400px] max-w-[100%]" }, null, a2)), s2(ssrRenderComponent(o2, { class: "h-[16px] w-[400px] max-w-[100%]" }, null, a2)), s2('</div></div></div><div class="flex flex-col lg:col-span-5"><div class="mb-6 space-y-4 pb-6 border-b-2 border-[#DEE0EA]">'), s2(ssrRenderComponent(o2, { class: "h-[36px] w-[160px]" }, null, a2)), s2('<div class="flex items-center gap-4">'), s2(ssrRenderComponent(o2, { class: "h-[32px] w-[72px]" }, null, a2)), s2(ssrRenderComponent(o2, { class: "h-[24px] w-[150px]" }, null, a2)), s2("</div>"), s2(ssrRenderComponent(o2, { class: "h-[20px] w-[100px]" }, null, a2)), s2("</div>"), s2(ssrRenderComponent(o2, { class: "h-[24px] mb-4 w-[300px]" }, null, a2)), s2('<div class="mb-8 space-y-4">'), s2(ssrRenderComponent(o2, { class: "h-[20px] w-[120px]" }, null, a2)), s2('<div class="flex items-center gap-4">'), s2(ssrRenderComponent(o2, { class: "h-[40px] w-[100px]" }, null, a2)), s2(ssrRenderComponent(o2, { class: "h-[40px] w-[100px]" }, null, a2)), s2(ssrRenderComponent(o2, { class: "h-[40px] w-[100px]" }, null, a2)), s2('</div></div><div class="mb-8 space-y-4">'), s2(ssrRenderComponent(o2, { class: "h-[20px] w-[120px]" }, null, a2)), s2('<div class="flex items-center gap-4">'), s2(ssrRenderComponent(o2, { class: "h-[40px] w-[100px]" }, null, a2)), s2(ssrRenderComponent(o2, { class: "h-[40px] w-[100px]" }, null, a2)), s2(ssrRenderComponent(o2, { class: "h-[40px] w-[100px]" }, null, a2)), s2("</div></div>"), s2(ssrRenderComponent(o2, { class: "h-[50px] w-[100%] rounded-md" }, null, a2)), s2('<div class="mt-8 pt-6 border-t-2 border-[#DEE0EA] space-y-4">'), s2(ssrRenderComponent(o2, { class: "h-[20px] w-[120px]" }, null, a2)), s2('<div class="space-y-6">'), s2(ssrRenderComponent(o2, { class: "h-[20px] w-[240px]" }, null, a2)), s2(ssrRenderComponent(o2, { class: "h-[16px] w-[240px]" }, null, a2)), s2(ssrRenderComponent(o2, { class: "h-[16px] w-[240px]" }, null, a2)), s2(ssrRenderComponent(o2, { class: "h-[16px] w-[240px]" }, null, a2)), s2('</div></div><div class="mt-8 pt-6 border-t-2 border-[#DEE0EA] space-y-4">'), s2(ssrRenderComponent(o2, { class: "bg-[#F9F9F9] p-4 w-full h-[200px] space-y-6" }, null, a2)), s2('</div><div class="mt-8 pt-6 border-t-2 border-[#DEE0EA] space-y-4">'), s2(ssrRenderComponent(o2, { class: "h-[20px] w-[120px]" }, null, a2)), s2('<div class="space-y-6">'), s2(ssrRenderComponent(o2, { class: "h-[20px] w-[240px]" }, null, a2)), s2(ssrRenderComponent(o2, { class: "h-[16px] w-[240px]" }, null, a2)), s2(ssrRenderComponent(o2, { class: "h-[16px] w-[240px]" }, null, a2)), s2(ssrRenderComponent(o2, { class: "h-[16px] w-[240px]" }, null, a2)), s2('</div></div></div></div><div class="my-8 py-8 bg-[#F9F9F9] px-6">'), s2(ssrRenderComponent(o2, { class: "h-[24px] w-[200px]" }, null, a2)), s2('<div class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mt-4">'), s2(ssrRenderComponent(o2, { class: "h-[400px] w-[100%] rounded-md" }, null, a2)), s2(ssrRenderComponent(o2, { class: "h-[400px] w-[100%] rounded-md" }, null, a2)), s2(ssrRenderComponent(o2, { class: "h-[400px] w-[100%] rounded-md" }, null, a2)), s2(ssrRenderComponent(o2, { class: "h-[400px] w-[100%] rounded-md" }, null, a2)), s2("</div></div></div>");
}]]), Z = { components: { Swiper: he, SwiperSlide: ge }, props: { images: { type: Array, required: true } }, setup() {
  const e2 = ref(null), t2 = ref(false);
  return { thumbsSwiper: e2, setThumbsSwiper: (t3) => {
    e2.value = t3;
  }, isDesktop: t2, modules: [z, I, B] };
} };
const H = Z.setup;
Z.setup = (e2, l2) => {
  const s2 = useSSRContext();
  return (s2.modules || (s2.modules = /* @__PURE__ */ new Set())).add("components/UI/CustomSwiper.vue"), H ? H(e2, l2) : undefined;
};
const W = uf(Z, [["ssrRender", function(e2, t2, s2, c2, u2, p2, m2, v2) {
  const x2 = he, $2 = ge;
  t2(`<div${ssrRenderAttrs(mergeProps({ class: "custom-swiper gap-6 flex flex-col md:flex-row" }, c2))}><div class="${ssrRenderClass([{ "desktop-layout": p2.isDesktop }, "order-2 md:order-1 w-full md:w-[128px] overflow-auto max-w-[100%]"])}">`), t2(ssrRenderComponent(x2, { onSwiper: p2.setThumbsSwiper, spaceBetween: 10, breakpoints: { 0: { direction: "horizontal", slidesPerView: 3 }, 567: { direction: "horizontal", slidesPerView: 4 }, 768: { direction: "vertical", slidesPerView: 3 } }, direction: p2.isDesktop ? "vertical" : "horizontal", watchSlidesProgress: true, modules: p2.modules, class: "h-full w-full thumbs-swiper max-w-[100%]" }, { default: withCtx((e3, t3, l2, s3) => {
    if (!t3) return [(openBlock(true), createBlock(Fragment, null, renderList(u2.images, (e4) => (openBlock(), createBlock($2, { class: "md:w-auto cursor-pointer !h-[128px]", key: e4.id }, { default: withCtx(() => [createVNode("img", { src: e4.media, class: "w-[128px] md:w-auto select-none h-[128px] cursor-pointer object-cover max-w-[100%]" }, null, 8, ["src"])]), _: 2 }, 1024))), 128))];
    t3("<!--[-->"), ssrRenderList(u2.images, (e4) => {
      t3(ssrRenderComponent($2, { class: "md:w-auto cursor-pointer !h-[128px]", key: e4.id }, { default: withCtx((t4, l3, s4, a2) => {
        if (!l3) return [createVNode("img", { src: e4.media, class: "w-[128px] md:w-auto select-none h-[128px] cursor-pointer object-cover max-w-[100%]" }, null, 8, ["src"])];
        l3(`<img${ssrRenderAttr("src", e4.media)} class="w-[128px] md:w-auto select-none h-[128px] cursor-pointer object-cover max-w-[100%]"${a2}>`);
      }), _: 2 }, l2, s3));
    }), t3("<!--]-->");
  }), _: 1 }, s2)), t2('</div><div class="w-full order-1 md:order-2 h-[340px] md:h-[404px] lg:h-[680px] max-w-[100%]">'), t2(ssrRenderComponent(x2, { spaceBetween: 10, pagination: { clickable: true }, thumbs: { swiper: p2.thumbsSwiper }, modules: p2.modules, loop: true, class: "main-swiper h-full w-full max-w-[100%]" }, { default: withCtx((e3, t3, l2, s3) => {
    if (!t3) return [(openBlock(true), createBlock(Fragment, null, renderList(u2.images, (e4) => (openBlock(), createBlock($2, { class: "!w-full !h-full max-w-[100%] cursor-pointer", key: e4.id }, { default: withCtx(() => [createVNode("img", { src: e4.media, class: "w-full select-none h-full object-cover max-w-[100%]" }, null, 8, ["src"])]), _: 2 }, 1024))), 128))];
    t3("<!--[-->"), ssrRenderList(u2.images, (e4) => {
      t3(ssrRenderComponent($2, { class: "!w-full !h-full max-w-[100%] cursor-pointer", key: e4.id }, { default: withCtx((t4, l3, s4, a2) => {
        if (!l3) return [createVNode("img", { src: e4.media, class: "w-full select-none h-full object-cover max-w-[100%]" }, null, 8, ["src"])];
        l3(`<img${ssrRenderAttr("src", e4.media)} class="w-full select-none h-full object-cover max-w-[100%]"${a2}>`);
      }), _: 2 }, l2, s3));
    }), t3("<!--]-->");
  }), _: 1 }, s2)), t2("</div></div>");
}]]), X = "" + buildAssetsURL("size-gide.DL63WMpF.png"), ee = (e2) => {
  const t2 = $a(), l2 = Ma(), a2 = ref(null), i2 = ref(null), o2 = ref(false), n2 = ref(false), r2 = computed(() => {
    var t3;
    return (null == (t3 = e2.value) ? undefined : t3.details) ? e2.value.details.reduce((e3, t4) => (e3.find((e4) => e4.id === t4.color.id) || e3.push(t4.color), e3), []) : [];
  }), d2 = computed(() => {
    var t3;
    return (null == (t3 = e2.value) ? undefined : t3.details) ? e2.value.details.reduce((e3, t4) => (e3.find((e4) => e4.id === t4.size.id) || e3.push(t4.size), e3), []) : [];
  }), p2 = computed(() => {
    var t3;
    return (null == (t3 = e2.value) ? undefined : t3.details) && e2.value.details.length ? e2.value.details.find((e3) => {
      var t4;
      return !(a2.value && e3.color.id !== a2.value.id || i2.value && (null == (t4 = e3.size) ? undefined : t4.id) !== i2.value.id);
    }) || e2.value.details[0] : null;
  }), m2 = () => {
    var e3, s2;
    t2.push({ query: { ...l2.query, color: (null == (e3 = a2.value) ? undefined : e3.id) || null, size: (null == (s2 = i2.value) ? undefined : s2.id) || null } });
  };
  return watch(() => e2.value, (t3) => {
    (null == t3 ? undefined : t3.details) && (() => {
      var t4, s2, o3, n3;
      const r3 = l2.query.color, d3 = l2.query.size;
      if (r3 && (null == (t4 = e2.value) ? undefined : t4.details)) {
        const t5 = null == (s2 = e2.value.details.find((e3) => e3.color.id == r3)) ? undefined : s2.color;
        a2.value = t5 || null;
      }
      if (d3 && (null == (o3 = e2.value) ? undefined : o3.details)) {
        const t5 = null == (n3 = e2.value.details.find((e3) => e3.size.id == d3)) ? undefined : n3.size;
        i2.value = t5 || null;
      }
    })();
  }, { immediate: true }), { selectedColor: a2, selectedSize: i2, colorIsOpen: o2, sizeIsOpen: n2, availableColors: r2, availableSizes: d2, selectedDetail: p2, selectColor: (t3) => {
    var l3;
    a2.value = t3, i2.value = (null == (l3 = e2.value.details.find((e3) => e3.color.id === t3.id)) ? undefined : l3.size) || null, m2();
  }, selectSize: (t3) => {
    var l3;
    i2.value = t3, a2.value = (null == (l3 = e2.value.details.find((e3) => e3.size.id === t3.id)) ? undefined : l3.color) || null, m2();
  }, toggleColorDropdown: (e3) => {
    e3.stopPropagation(), o2.value = !o2.value, o2.value && (n2.value = false);
  }, toggleSizeDropdown: (e3) => {
    e3.stopPropagation(), n2.value = !n2.value, n2.value && (o2.value = false);
  } };
}, te = { __name: "ProductDetails", __ssrInlineRender: true, props: { data: { type: Object, required: true } }, setup(e2) {
  const t2 = e2, { locale: u2 } = Qs(), k2 = z;
  Qt().$axios, ref(null);
  const S2 = computed(() => t2.data), { selectedColor: C2, selectedSize: A2, colorIsOpen: L2, sizeIsOpen: j2, availableColors: V2, availableSizes: B2, selectedDetail: R2, selectColor: J2, selectSize: K2, toggleColorDropdown: N2, toggleSizeDropdown: Z2 } = ee(S2), H2 = ref(false), te2 = ref(false), le2 = ref(false), se2 = ref(false), ae2 = ref(false), ie2 = ref(false), oe2 = ref(false), ne2 = ref(false), re2 = ref(""), de = (e3) => {
    var l2, s2, a2, i2, o2, n2;
    const r2 = encodeURIComponent((undefined).location.href), d2 = encodeURIComponent(null == (l2 = t2.data) ? undefined : l2.title), c2 = encodeURIComponent(null == (s2 = t2.data) ? undefined : s2.short_desc);
    if ("linkedin" === e3) (undefined).open(`https://www.linkedin.com/shareArticle?mini=true&url=${r2}&title=${d2}&summary=${c2}&source=Al-Arkan`, "_blank");
    else if ("facebook" === e3) (undefined).open(`https://www.facebook.com/sharer/sharer.php?u=${r2}`, "_blank");
    else if ("twitter" === e3) {
      const e4 = `${d2} - ${c2}`;
      (undefined).open(`https://twitter.com/intent/tweet?text=${e4}&url=${r2}`, "_blank");
    } else if ("whatsapp" === e3) {
      const e4 = `${null == (a2 = t2.data) ? undefined : a2.title} - ${null == (i2 = t2.data) ? undefined : i2.short_desc}
    ${(undefined).location.href}`;
      (undefined).open(`https://wa.me/?text=${encodeURIComponent(e4)}`, "_blank");
    } else if ("snapchat" === e3) {
      const e4 = `${null == (o2 = t2.data) ? undefined : o2.title} - ${null == (n2 = t2.data) ? undefined : n2.short_desc} - ${(undefined).location.href}`;
      (undefined).open(`https://www.snapchat.com/share?text=${encodeURIComponent(e4)}`, "_blank");
    } else if ("telegram" === e3) {
      const e4 = `${d2} - ${c2}`;
      (undefined).open(`https://t.me/share/url?url=${r2}&text=${e4}`, "_blank");
    }
  }, ce = (e3) => {
    if ((undefined).clipboard) (undefined).clipboard.writeText(e3).then(() => {
      pe.success("Copied to clipboard");
    });
    else {
      const t3 = (undefined).createElement("textarea");
      t3.value = e3, (undefined).body.appendChild(t3), t3.select(), (undefined).execCommand("copy"), (undefined).body.removeChild(t3), pe.success("Copied to clipboard");
    }
  };
  return (t3, s2, c2, S3) => {
    var _a, _b, _c;
    var C3, _2, I2, A3, D2, Y2, J3, K3, N3, Z3, ee2, ue, pe, me, ve, xe, be, fe, ge$1, we, he$1, $e, ye, Ee, Te, ke, Se, Ce, _e, Ie, Ae, Le, ze, je;
    const Fe = W, Pe = g, De = $, Ve = n, Be = a, Re = p, qe = g;
    e2.data ? (s2(`<div${ssrRenderAttrs(mergeProps({ class: "pb-6 lg:pb-14" }, S3))}><div class="grid grid-cols-1 lg:grid-cols-12 gap-10"><div class="lg:col-span-7" data-aos="fade-right">`), s2("<!---->"), s2(ssrRenderComponent(Fe, { images: [e2.data.main_image, ...null == (C3 = unref(R2)) ? undefined : C3.images] }, null, c2)), s2(`<div class="mt-8"><div class="py-4 mb-8 px-5 flex items-center gap-4 bg-[#FAFAFA]"><h3 class="text-xl underline font-semibold">${ssrInterpolate(t3.$t("TITLES.reviews"))}</h3><div class="flex items-center gap-1.5"><img${ssrRenderAttr("src", A)} alt="star" class="w-6 h-6"><span class="font-medium text-lg">${ssrInterpolate((_a = null == (_2 = unref(R2)) ? undefined : _2.rate_avg) != null ? _a : "0")}</span></div></div><div class="space-y-6"><span class="text-primary text-lg font-semibold">${ssrInterpolate(t3.$t("TITLES.general_size"))}</span><div class="flex flex-wrap items-center gap-4"><p>${ssrInterpolate(t3.$t("TITLES.runs_small"))}</p><div class="h-2 w-[240px] max-w-[100%] bg-[#F0F0F0] rounded-full"><div class="h-2 bg-primary rounded-full" style="${ssrRenderStyle(`width: ${e2.data.smallPercentage}%`)}"></div></div><span class="font-medium text-xl">${ssrInterpolate(e2.data.smallPercentage)}%</span></div><div class="flex flex-wrap items-center gap-4"><p>${ssrInterpolate(t3.$t("TITLES.true_to_size"))}</p><div class="h-2 w-[240px] max-w-[100%] bg-[#F0F0F0] rounded-full"><div class="h-2 bg-primary rounded-full" style="${ssrRenderStyle(`width: ${e2.data.fitPercentage}%`)}"></div></div><span class="font-medium text-xl">${ssrInterpolate(e2.data.fitPercentage)}%</span></div><div class="flex flex-wrap items-center gap-4"><p>${ssrInterpolate(t3.$t("TITLES.runs_large"))}</p><div class="h-2 w-[240px] max-w-[100%] bg-[#F0F0F0] rounded-full"><div class="h-2 bg-primary rounded-full" style="${ssrRenderStyle(`width: ${e2.data.bigPercentage}%`)}"></div></div><span class="font-medium text-xl">${ssrInterpolate(e2.data.bigPercentage)}%</span></div></div><div class="h-2 bg-[#F1F1F1] w-full rounded-full my-6"></div><div class="space-y-6"><!--[-->`), ssrRenderList(null == (I2 = unref(R2)) ? undefined : I2.reviews, (e3, l2) => {
      var a2;
      s2(`<div data-aos="fade-up" class="border border-[#E1E1E1] p-6"><div class="flex items-center justify-between mb-4"><div class="font-bold text-xl">${ssrInterpolate(e3.user_name)}</div><div class="flex items-center gap-1"><!--[-->`), ssrRenderList(5, (t4) => {
        s2('<span class="cursor-pointer transition duration-300 hover:scale-110">'), t4 <= Math.floor(e3.rate || 0) ? s2(`<img${ssrRenderAttr("src", A)} alt="star" class="w-6 h-6">`) : s2(`<img${ssrRenderAttr("src", g$1)} alt="star" class="w-6 h-6">`), s2("</span>");
      }), s2(`<!--]--></div></div><div class="text-lg font-medium text-[#505050] mb-6"><span>${ssrInterpolate(t3.$t("TITLES.color"))}: ${ssrInterpolate(null == e3 ? undefined : e3.color)} / ${ssrInterpolate(t3.$t("TITLES.size"))}: ${ssrInterpolate(null == e3 ? undefined : e3.size)}</span></div><div class="text-lg font-medium text-[##03030]">${ssrInterpolate(e3.review)}</div>`), e3.image ? s2(`<div class="flex gap-4 mt-6 items-center flex-wrap"><div class="relative group"><img${ssrRenderAttr("src", null == (a2 = e3.image) ? undefined : a2.media)} alt="star" width="120" height="120" class="w-[120px] h-[120px] object-cover"><button class="absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white p-3 opacity-0 transition-all group-hover:opacity-100 hover:bg-gray-100"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg></button></div></div>`) : s2("<!---->"), s2("</div>");
    }), s2(`<!--]--></div></div></div><div class="flex flex-col lg:col-span-5" data-aos="fade-left"><div class="mb-6 pb-6 border-b-2 border-[#DEE0EA]"><div class="flex mb-6 gap-4 items-center flex-wrap"><div class="text-primary font-medium text-3xl"><span class="font-bold">${ssrInterpolate((null == (A3 = unref(R2)) ? undefined : A3.discount_offer) ? (null == (D2 = unref(R2)) ? undefined : D2.price) - (null == (Y2 = unref(R2)) ? undefined : Y2.price) * (null == (J3 = unref(R2)) ? undefined : J3.discount_offer) / 100 : null == (K3 = unref(R2)) ? undefined : K3.price)}</span> ${ssrInterpolate(t3.$t("TITLES.egp"))}</div><div class="flex items-center gap-4"><div class="text-xl text-white font-medium relative"><img${ssrRenderAttr("src", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAAoCAYAAABdGbwdAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADySURBVHgB7dk9CsIwGIfxRCM4dOgNxJspqKseQU8g7op4I4/gETrYqWJ8S/0otfUPzs9vKnm3h6YNxO+TJDp06jn8RCCBQAKBBAIJBBIIJBBIINC3zE7Om+J2G8+uVx8c3mKMpzAYrKZZlr3WCPSxm+f5qrnIFivFeOmHsG4bEcjc7ZtT31Z1BKqcuwYEMos8J9C/CGT2w+Goa0YgE0OYds0IZLxzy2Oapm0zAlXSe1Fs2wYEeoreTw5Jsm2+SZ5bjQY7VZcHR3s6l79/AglsMYFAAoEEAgkEEggkEEggkEAggUACgQQCCQQSCCQQSCCQ8ADgxDaouwwUPgAAAABJRU5ErkJggg==")} alt="Subtract" class="h-10 !w-[72px]"><span class="absolute top-1/2 start-1/2 transform rtl:translate-x-1/2 -translate-x-1/2 -translate-y-1/2">${ssrInterpolate((_b = null == (N3 = unref(R2)) ? undefined : N3.discount_offer) != null ? _b : "0")}%</span></div><p class="text-[#9C0C0C] font-semibold">${ssrInterpolate(t3.$t("TITLES.off_with_voucher"))}</p></div></div><div class="flex items-center justify-between">`), (null == (Z3 = unref(R2)) ? undefined : Z3.discount_offer) ? s2(`<div class="text-[#7C7E80] line-through font-medium text-2xl"><span class="font-bold">${ssrInterpolate(null == (ee2 = unref(R2)) ? undefined : ee2.price)}</span> ${ssrInterpolate(t3.$t("TITLES.egp"))}</div>`) : s2("<!---->"), s2(`<div class="flex items-center gap-1.5"><img${ssrRenderAttr("src", A)} alt="star" class="w-6 h-6"><span class="font-medium text-lg">${ssrInterpolate((_c = null == (ue = unref(R2)) ? undefined : ue.rate_avg) != null ? _c : "0")}</span></div></div></div><div class="pb-6 border-b-2 border-[#DEE0EA] mb-6"><p class="text-xl text-primary mb-6">${ssrInterpolate(null == (pe = e2.data) ? undefined : pe.short_desc)}</p><div class="px-5 py-2.5 mb-6 flex items-center gap-2 text-lg bg-[#FCE9E9]"><span class="font-medium text-[#DC6E07]">LoGo</span><span>${ssrInterpolate(t3.$t("TITLES.save"))} <span class="text-[#DC6E07]">90 ${ssrInterpolate(t3.$t("TITLES.egp"))}</span> ${ssrInterpolate(t3.$t("TITLES.saveWithJoin"))}</span></div><div class="flex bg-[#F9F9F9] ps-2 py-0 items-center justify-between"><span class="text-primary text-xl font-medium">${ssrInterpolate(t3.$t("TITLES.brand"))}: ${ssrInterpolate(null == (me = e2.data.brand) ? undefined : me.title)}</span><img${ssrRenderAttr("src", null == (xe = null == (ve = e2.data.brand) ? undefined : ve.image) ? undefined : xe.media)}${ssrRenderAttr("alt", null == (be = e2.data.brand) ? undefined : be.title)} class="w-[88px] h-[64px] object-cover"></div></div><div class="pb-6 border-b-2 border-[#DEE0EA] mb-6"><div class="mb-8"><div class="flex items-center justify-between mb-4"><span class="text-primary font-medium text-xl">${ssrInterpolate(t3.$t("TITLES.color"))}</span><div class="relative"><button class="py-2 px-5 font-light rounded-full transition-all flex items-center gap-2 bg-[#F5F5F5] duration-300 text-center text-primary">${ssrInterpolate((null == (ge$1 = null == (fe = unref(R2)) ? undefined : fe.color) ? undefined : ge$1.title) || t3.$t("TITLES.selectColor"))} `), s2(ssrRenderComponent(Pe, { name: "chevron-down", class: "scale-[1.2]" }, null, c2)), s2("</button>"), unref(L2) ? (s2('<div class="absolute end-0 z-50 mt-0.5 w-[158px] bg-white ring-1 ring-black ring-opacity-5"><ul class="px-2.5" role="menu" aria-orientation="vertical"><!--[-->'), ssrRenderList(unref(V2), (e3) => {
      var t4, l2;
      s2(`<li class="block w-full border-b border-[#E1E1E1] last:border-b-0 text-sm text-primary" role="menuitem"><button class="w-full flex items-center justify-between py-3 text-start"><div class="flex items-center gap-2"><span class="size-6 rounded-full" style="${ssrRenderStyle(`background-color: ${e3.hex};`)}"></span><span>${ssrInterpolate(e3.title)}</span></div>`), (null == (l2 = null == (t4 = unref(R2)) ? undefined : t4.color) ? undefined : l2.id) === e3.id ? s2(ssrRenderComponent(Pe, { name: "check" }, null, c2)) : s2("<!---->"), s2("</button></li>");
    }), s2("<!--]--></ul></div>")) : s2("<!---->"), s2('</div></div><div class="flex gap-2"><!--[-->'), ssrRenderList(unref(V2), (e3) => {
      var t4, l2, a2, i2;
      s2(`<button class="${ssrRenderClass([{ "border-primary": (null == (l2 = null == (t4 = unref(R2)) ? undefined : t4.color) ? undefined : l2.id) === e3.id, "border-transparent": (null == (i2 = null == (a2 = unref(R2)) ? undefined : a2.color) ? undefined : i2.id) !== e3.id }, "w-8 h-8 rounded-full border-2 flex items-center justify-center"])}"><div class="w-6 h-6 rounded-full" style="${ssrRenderStyle({ backgroundColor: e3.hex })}"></div></button>`);
    }), s2(`<!--]--></div></div><div class="mb-10"><div class="flex items-center gap-2 justify-between mb-4"><div class="flex items-center gap-4"><span class="text-primary font-medium text-xl">${ssrInterpolate(t3.$t("TITLES.size"))}</span><div class="relative"><button class="py-2 px-5 rounded-full transition-all flex items-center gap-2 bg-[#F5F5F5] duration-300 text-center font-light text-primary"><span>${ssrInterpolate((null == (he$1 = null == (we = unref(R2)) ? undefined : we.size) ? undefined : he$1.title) || t3.$t("TITLES.selectSize"))}</span>`), s2(ssrRenderComponent(Pe, { name: "chevron-down", class: "scale-[1.2] flex-shrink-0" }, null, c2)), s2("</button>"), unref(j2) ? (s2('<div class="absolute max-w-[100%] start-0 z-50 mt-0.5 w-[140px] bg-white ring-1 ring-black ring-opacity-5"><ul class="px-2.5" role="menu" aria-orientation="vertical"><!--[-->'), ssrRenderList(unref(B2), (e3) => {
      var t4, l2;
      s2(`<li class="block w-full border-b border-[#E1E1E1] last:border-b-0 text-sm text-primary" role="menuitem"><button class="w-full flex items-center justify-between py-3 text-start">${ssrInterpolate(e3.title)} `), (null == (l2 = null == (t4 = unref(R2)) ? undefined : t4.size) ? undefined : l2.id) === e3.id ? s2(ssrRenderComponent(Pe, { name: "check" }, null, c2)) : s2("<!---->"), s2("</button></li>");
    }), s2("<!--]--></ul></div>")) : s2("<!---->"), s2('</div></div></div><div class="flex gap-2"><!--[-->'), ssrRenderList(unref(B2), (e3) => {
      var t4, l2, a2, i2;
      s2(`<button class="${ssrRenderClass([{ "border-black bg-black text-white": (null == (l2 = null == (t4 = unref(R2)) ? undefined : t4.size) ? undefined : l2.id) === e3.id, "border-[#E1E1E1] text-gray-700": (null == (i2 = null == (a2 = unref(R2)) ? undefined : a2.size) ? undefined : i2.id) !== e3.id }, "px-6 py-1 border rounded-full font-semibold text-base"])}">${ssrInterpolate(e3.title)}</button>`);
    }), s2(`<!--]--></div></div><div class="flex flex-wrap items-center gap-4"><button${ssrIncludeBooleanAttr(unref(H2)) ? " disabled" : ""} class="justify-center disabled:opacity-70 disabled:cursor-not-allowed transition-all duration-300 border-[#E1E1E1] border group hover:border-primary hover:bg-primary size-14 rounded-full bg-white flex items-center text-center">`), e2.data.is_fave ? s2(ssrRenderComponent(Pe, { name: "fill-heart", class: "text-2xl transition-all duration-300" }, null, c2)) : s2(ssrRenderComponent(Pe, { name: "heart", class: "text-2xl transition-all duration-300 [&_path]:fill-primary group-hover:[&_path]:!fill-white" }, null, c2)), s2('</button><button class="justify-center transition-all duration-300 border-[#E1E1E1] border group hover:border-primary hover:bg-primary size-14 rounded-full bg-white flex items-center text-center">'), s2(ssrRenderComponent(Pe, { name: "share", class: "text-2xl transition-all duration-300 [&_path]:fill-primary group-hover:[&_path]:!fill-white" }, null, c2)), s2(`</button><button class="base-btn flex-1 !font-medium"${ssrIncludeBooleanAttr(!e2.data.details || !e2.data.details.length || !(null == ($e = unref(R2)) ? undefined : $e.in_stock) || unref(te2)) ? " disabled" : ""}>`), s2(ssrRenderComponent(Pe, { name: "cart" }, null, c2)), s2(` ${ssrInterpolate(t3.$t("TITLES.addToCart"))}</button></div></div>`), (null == (Ee = null == (ye = unref(R2)) ? undefined : ye.coupons) ? undefined : Ee.length) ? (s2('<div class="py-4 mb-6 px-6 relative bg-[#f1f7ff]"><div class="absolute top-1/2 size-10 -translate-y-1/2 -start-5 rounded-full bg-white"></div><div class="absolute top-1/2 size-10 -translate-y-1/2 -end-5 rounded-full bg-white"></div><div class="flex flex-wrap mb-4 items-center gap-4"><div class="py-2 px-6 bg-[#DBE6F4] flex items-center justify-center gap-2">'), s2(ssrRenderComponent(Pe, { name: "coupon", class: "flex-shrink-0" }, null, c2)), s2(`<span class="font-medium">${ssrInterpolate(t3.$t("TITLES.bestDeal"))}</span></div>`), "percentage" === (null == (ke = null == (Te = unref(R2)) ? undefined : Te.coupons[0]) ? undefined : ke.discount_type) ? s2(`<span class="font-medium text-lg">${ssrInterpolate(null == (Ce = null == (Se = unref(R2)) ? undefined : Se.coupons[0]) ? undefined : Ce.discount)}% ${ssrInterpolate(t3.$t("TITLES.off"))}</span>`) : s2(`<span class="font-medium text-lg">${ssrInterpolate(null == (Ie = null == (_e = unref(R2)) ? undefined : _e.coupons[0]) ? undefined : Ie.discount)} EGP ${ssrInterpolate(t3.$t("TITLES.off"))}</span>`), s2(`<button class="ms-auto flex items-center gap-3"><span class="text-primary font-medium text-lg">+${ssrInterpolate(unref(R2).coupons_count)} ${ssrInterpolate(t3.$t("TITLES.vouchers"))}</span>`), s2(ssrRenderComponent(Pe, { class: ["ar" === unref(u2) ? "rotate-180" : "rotate-0", "scale-[0.8] [&_path]:fill-primary"], name: "chevron-right" }, null, c2)), s2('</button></div><div class="pt-8 flex items-center flex-wrap justify-between gap-2 border-dashed border-t border-[#949EAC]"><button class="flex items-center gap-2">'), s2(ssrRenderComponent(Pe, { name: "copy" }, null, c2)), s2(`<span class="font-medium text-lg">${ssrInterpolate(unref(R2).coupons[0].code)}</span></button><span class="font-medium text-lg">${ssrInterpolate(t3.$t("TITLES.validTill"))}: <span class="font-normal">${ssrInterpolate(unref(R2).coupons[0].end_at)}</span></span></div></div>`)) : s2("<!---->"), s2(`<div class="${ssrRenderClass({ "border-t-2 border-[#DEE0EA] pt-6": null == (Le = null == (Ae = unref(R2)) ? undefined : Ae.coupons) ? undefined : Le.length })}"><h4 class="text-primary text-lg font-semibold mb-5">${ssrInterpolate(t3.$t("TITLES.shippingToEgypt"))}</h4><div class="flex items-center gap-4 mb-8">`), s2(ssrRenderComponent(Pe, { name: "truck", class: "flex-shrink-0" }, null, c2)), s2(`<div class="flex-1 font-medium text-[#333232]"><p class="mb-3">${ssrInterpolate(t3.$t("TITLES.freeExpressShipping"))}</p><div class="flex items-center justify-between gap-2 flex-wrap"><span>${ssrInterpolate(t3.$t("TITLES.estimatedDelivery"))}</span><span class="text-[#606060] text-sm font-normal"> 2022/09/15 - 2022/09/30</span></div></div></div><div class="flex cursor-pointer mb-8 items-center gap-2 flex-wrap">`), s2(ssrRenderComponent(Pe, { name: "return-policy", class: "flex-shrink-0" }, null, c2)), s2(`<h5 class="font-medium text-lg">${ssrInterpolate(t3.$t("TITLES.returnPolicy"))}</h5><button class="${ssrRenderClass(["ar" === unref(u2) ? "rotate-180" : "", "flex-shrink-0 ms-auto inline-block"])}">`), s2(ssrRenderComponent(Pe, { name: "chevron-right", class: "[&_path]:fill-primary" }, null, c2)), s2('</button></div><div class="flex cursor-pointer items-center gap-2 flex-wrap">'), s2(ssrRenderComponent(Pe, { name: "description", class: "flex-shrink-0" }, null, c2)), s2(`<h5 class="font-medium text-lg">${ssrInterpolate(t3.$t("TITLES.description"))}</h5><button class="${ssrRenderClass(["ar" === unref(u2) ? "rotate-180" : "", "flex-shrink-0 ms-auto inline-block"])}">`), s2(ssrRenderComponent(Pe, { class: ["ar" === unref(u2) ? "rotate-180" : "", "[&_path]:fill-primary"], name: "chevron-right" }, null, c2)), s2("</button></div></div>"), (null == (je = null == (ze = e2.data) ? undefined : ze.complete_outfit) ? undefined : je.length) ? (s2(`<div class="my-8 py-8 bg-[#F9F9F9] ps-6"><h2 class="text-xl font-bold mb-8">${ssrInterpolate(t3.$t("TITLES.matchingChoices"))}</h2>`), s2(ssrRenderComponent(unref(he), { modules: [unref(k2)], "slides-per-view": 1.3, "space-between": 16, "free-mode": true, breakpoints: { 0: { slidesPerView: 1.3 }, 576: { slidesPerView: 2.2 }, 768: { slidesPerView: 3.2 }, 992: { slidesPerView: 1.2 }, 1280: { slidesPerView: 2.1 }, 1536: { slidesPerView: 2.2 } }, class: "related-products-swiper" }, { default: withCtx((t4, l2, s3, c3) => {
      var u3, m2;
      if (!l2) return [(openBlock(true), createBlock(Fragment, null, renderList(null == (m2 = e2.data) ? undefined : m2.complete_outfit, (e3, t5) => (openBlock(), createBlock(unref(ge), { key: t5 }, { default: withCtx(() => [createVNode(De, { product: e3 }, null, 8, ["product"])]), _: 2 }, 1024))), 128))];
      l2("<!--[-->"), ssrRenderList(null == (u3 = e2.data) ? undefined : u3.complete_outfit, (e3, t5) => {
        l2(ssrRenderComponent(unref(ge), { key: t5 }, { default: withCtx((t6, l3, s4, a2) => {
          if (!l3) return [createVNode(De, { product: e3 }, null, 8, ["product"])];
          l3(ssrRenderComponent(De, { product: e3 }, null, s4, a2));
        }), _: 2 }, s3, c3));
      }), l2("<!--]-->");
    }), _: 1 }, c2)), s2("</div>")) : s2("<!---->"), s2("</div></div>"), ssrRenderTeleport(s2, (e3) => {
      unref(ie2) ? e3(ssrRenderComponent(Ve, { onClose: (e4) => ie2.value = false }, { default: withCtx((e4, l2, s3, a2) => {
        if (!l2) return [createVNode("img", { src: t3.imageModal, "data-aos": "zoom-in", "data-aos-duration": "800", alt: "review image", class: "max-w-[100%] object-cover" }, null, 8, ["src"])];
        l2(`<img${ssrRenderAttr("src", t3.imageModal)} data-aos="zoom-in" data-aos-duration="800" alt="review image" class="max-w-[100%] object-cover"${a2}>`);
      }), _: 1 }, c2)) : e3("<!---->");
    }, "body", false, c2), ssrRenderTeleport(s2, (l2) => {
      unref(ae2) ? l2(ssrRenderComponent(Ve, { onClose: (e3) => ae2.value = false }, { default: withCtx((l3, s3, a2, o2) => {
        var _a2;
        if (!s3) return [createVNode("div", { onClick: withModifiers(() => {
        }, ["stop"]), class: "bg-white w-[1000px] max-w-[100%] lg:p-14 p-6", "data-aos": "zoom-in", "data-aos-duration": "800" }, [createVNode("div", { class: "relative" }, [createVNode("h4", { class: "text-3xl text-center mb-8 font-bold" }, toDisplayString(t3.$t("TITLES.description")), 1), createVNode("button", { class: "absolute top-1/2 -translate-y-1/2 end-0", onClick: (e3) => ae2.value = false }, [createVNode(Pe, { name: "big-close" })], 8, ["onClick"])]), createVNode("div", { innerHTML: e2.data.long_desc }, null, 8, ["innerHTML"])], 8, ["onClick"])];
        s3(`<div class="bg-white w-[1000px] max-w-[100%] lg:p-14 p-6" data-aos="zoom-in" data-aos-duration="800"${o2}><div class="relative"${o2}><h4 class="text-3xl text-center mb-8 font-bold"${o2}>${ssrInterpolate(t3.$t("TITLES.description"))}</h4><button class="absolute top-1/2 -translate-y-1/2 end-0"${o2}>`), s3(ssrRenderComponent(Pe, { name: "big-close" }, null, a2, o2)), s3(`</button></div><div${o2}>${(_a2 = e2.data.long_desc) != null ? _a2 : ""}</div></div>`);
      }), _: 1 }, c2)) : l2("<!---->");
    }, "body", false, c2), ssrRenderTeleport(s2, (e3) => {
      unref(se2) ? e3(ssrRenderComponent(Ve, { onClose: (e4) => se2.value = false }, { default: withCtx((e4, l2, s3, a2) => {
        if (!l2) return [createVNode("div", { onClick: withModifiers(() => {
        }, ["stop"]), class: "bg-white lg:p-14 p-6 w-[1000px] max-w-[100%]", "data-aos": "zoom-in", "data-aos-duration": "800" }, [createVNode("div", { class: "relative" }, [createVNode("h4", { class: "text-3xl text-center mb-8 font-bold" }, toDisplayString(t3.$t("TITLES.returnPolicy")), 1), createVNode("button", { class: "absolute top-1/2 -translate-y-1/2 end-0", onClick: (e5) => se2.value = false }, [createVNode(Pe, { name: "big-close" })], 8, ["onClick"])]), createVNode("div", { class: "mb-8 border-t-2 border-[#909EAC] pt-8" }, [createVNode("h4", { class: "text-primary text-lg font-semibold mb-4" }, toDisplayString(t3.$t("TITLES.ourGuarantee")), 1), createVNode("p", { class: "text-[#909EAC]" }, toDisplayString(t3.$t("TITLES.returnExchangeInfo")), 1)]), createVNode("div", null, [createVNode("h4", { class: "text-primary text-lg font-semibold mb-4" }, toDisplayString(t3.$t("TITLES.request")) + ": ", 1), createVNode("div", { class: "space-y-4 text-[#909EAC]" }, [createVNode("p", null, "1. " + toDisplayString(t3.$t("TITLES.requestCondition1")), 1), createVNode("p", null, "2. " + toDisplayString(t3.$t("TITLES.requestCondition2")), 1), createVNode("p", null, "3. " + toDisplayString(t3.$t("TITLES.requestCondition3")), 1)])])], 8, ["onClick"])];
        l2(`<div class="bg-white lg:p-14 p-6 w-[1000px] max-w-[100%]" data-aos="zoom-in" data-aos-duration="800"${a2}><div class="relative"${a2}><h4 class="text-3xl text-center mb-8 font-bold"${a2}>${ssrInterpolate(t3.$t("TITLES.returnPolicy"))}</h4><button class="absolute top-1/2 -translate-y-1/2 end-0"${a2}>`), l2(ssrRenderComponent(Pe, { name: "big-close" }, null, s3, a2)), l2(`</button></div><div class="mb-8 border-t-2 border-[#909EAC] pt-8"${a2}><h4 class="text-primary text-lg font-semibold mb-4"${a2}>${ssrInterpolate(t3.$t("TITLES.ourGuarantee"))}</h4><p class="text-[#909EAC]"${a2}>${ssrInterpolate(t3.$t("TITLES.returnExchangeInfo"))}</p></div><div${a2}><h4 class="text-primary text-lg font-semibold mb-4"${a2}>${ssrInterpolate(t3.$t("TITLES.request"))}: </h4><div class="space-y-4 text-[#909EAC]"${a2}><p${a2}>1. ${ssrInterpolate(t3.$t("TITLES.requestCondition1"))}</p><p${a2}>2. ${ssrInterpolate(t3.$t("TITLES.requestCondition2"))}</p><p${a2}>3. ${ssrInterpolate(t3.$t("TITLES.requestCondition3"))}</p></div></div></div>`);
      }), _: 1 }, c2)) : e3("<!---->");
    }, "body", false, c2), ssrRenderTeleport(s2, (e3) => {
      unref(le2) ? e3(ssrRenderComponent(Ve, { onClose: (e4) => le2.value = false }, { default: withCtx((e4, l2, s3, a2) => {
        var c3, u3;
        if (!l2) return [createVNode("div", { onClick: withModifiers(() => {
        }, ["stop"]), class: "bg-white lg:p-14 p-6 w-[840px] overflow-y-auto max-h-[90%] max-w-[100%]", "data-aos": "zoom-in", "data-aos-duration": "800" }, [createVNode("div", { class: "relative" }, [createVNode("h4", { class: "text-3xl text-center mb-12 font-bold" }, toDisplayString(t3.$t("TITLES.vouchers")), 1), createVNode("button", { class: "absolute top-1/2 -translate-y-1/2 end-0", onClick: (e5) => le2.value = false }, [createVNode(Pe, { name: "big-close" })], 8, ["onClick"])]), (null == (u3 = unref(R2).coupons) ? undefined : u3.length) ? (openBlock(), createBlock("div", { key: 0, class: "flex flex-col gap-8" }, [(openBlock(true), createBlock(Fragment, null, renderList(unref(R2).coupons, (e5, l3) => {
          var s4, a3, r2, d2, c4, u4;
          return openBlock(), createBlock("div", { key: l3, class: "py-4 mb-6 px-6 relative bg-[#f1f7ff]" }, [createVNode("div", { class: "absolute top-1/2 size-10 -translate-y-1/2 -start-5 rounded-full bg-white" }), createVNode("div", { class: "absolute top-1/2 size-10 -translate-y-1/2 -end-5 rounded-full bg-white" }), createVNode("div", { class: "flex flex-wrap mb-4 items-center gap-4" }, [createVNode("div", { class: "py-2 px-6 bg-[#DBE6F4] flex items-center justify-center gap-2" }, [createVNode(Pe, { name: "coupon", class: "flex-shrink-0" }), createVNode("span", { class: "font-medium" }, toDisplayString(t3.$t("TITLES.bestDeal")), 1)]), "percentage" === (null == (a3 = null == (s4 = unref(R2)) ? undefined : s4.coupons[0]) ? undefined : a3.discount_type) ? (openBlock(), createBlock("span", { key: 0, class: "font-medium text-lg" }, toDisplayString(null == (d2 = null == (r2 = unref(R2)) ? undefined : r2.coupons[0]) ? undefined : d2.discount) + "% " + toDisplayString(t3.$t("TITLES.off")), 1)) : (openBlock(), createBlock("span", { key: 1, class: "font-medium text-lg" }, toDisplayString(null == (u4 = null == (c4 = unref(R2)) ? undefined : c4.coupons[0]) ? undefined : u4.discount) + " " + toDisplayString(t3.$t("TITLES.egp")) + " " + toDisplayString(t3.$t("TITLES.off")), 1))]), createVNode("div", { class: "pt-8 flex items-center flex-wrap justify-between gap-2 border-dashed border-t border-[#949EAC]" }, [createVNode("button", { class: "flex items-center gap-2", onClick: (t4) => ce(e5.code) }, [createVNode(Pe, { name: "copy" }), createVNode("span", { class: "font-medium text-lg" }, toDisplayString(e5.code), 1)], 8, ["onClick"]), createVNode("span", { class: "font-medium text-lg" }, [createTextVNode(toDisplayString(t3.$t("TITLES.validTill")) + ": ", 1), createVNode("span", { class: "font-normal" }, toDisplayString(e5.end_at), 1)])])]);
        }), 128))])) : (openBlock(), createBlock("div", { key: 1 }, [createVNode(Be, { class: "!min-h-[300px]" })]))], 8, ["onClick"])];
        l2(`<div class="bg-white lg:p-14 p-6 w-[840px] overflow-y-auto max-h-[90%] max-w-[100%]" data-aos="zoom-in" data-aos-duration="800"${a2}><div class="relative"${a2}><h4 class="text-3xl text-center mb-12 font-bold"${a2}>${ssrInterpolate(t3.$t("TITLES.vouchers"))}</h4><button class="absolute top-1/2 -translate-y-1/2 end-0"${a2}>`), l2(ssrRenderComponent(Pe, { name: "big-close" }, null, s3, a2)), l2("</button></div>"), (null == (c3 = unref(R2).coupons) ? undefined : c3.length) ? (l2(`<div class="flex flex-col gap-8"${a2}><!--[-->`), ssrRenderList(unref(R2).coupons, (e5, i2) => {
          var o2, n2, r2, d2, c4, u4;
          l2(`<div class="py-4 mb-6 px-6 relative bg-[#f1f7ff]"${a2}><div class="absolute top-1/2 size-10 -translate-y-1/2 -start-5 rounded-full bg-white"${a2}></div><div class="absolute top-1/2 size-10 -translate-y-1/2 -end-5 rounded-full bg-white"${a2}></div><div class="flex flex-wrap mb-4 items-center gap-4"${a2}><div class="py-2 px-6 bg-[#DBE6F4] flex items-center justify-center gap-2"${a2}>`), l2(ssrRenderComponent(Pe, { name: "coupon", class: "flex-shrink-0" }, null, s3, a2)), l2(`<span class="font-medium"${a2}>${ssrInterpolate(t3.$t("TITLES.bestDeal"))}</span></div>`), "percentage" === (null == (n2 = null == (o2 = unref(R2)) ? undefined : o2.coupons[0]) ? undefined : n2.discount_type) ? l2(`<span class="font-medium text-lg"${a2}>${ssrInterpolate(null == (d2 = null == (r2 = unref(R2)) ? undefined : r2.coupons[0]) ? undefined : d2.discount)}% ${ssrInterpolate(t3.$t("TITLES.off"))}</span>`) : l2(`<span class="font-medium text-lg"${a2}>${ssrInterpolate(null == (u4 = null == (c4 = unref(R2)) ? undefined : c4.coupons[0]) ? undefined : u4.discount)} ${ssrInterpolate(t3.$t("TITLES.egp"))} ${ssrInterpolate(t3.$t("TITLES.off"))}</span>`), l2(`</div><div class="pt-8 flex items-center flex-wrap justify-between gap-2 border-dashed border-t border-[#949EAC]"${a2}><button class="flex items-center gap-2"${a2}>`), l2(ssrRenderComponent(Pe, { name: "copy" }, null, s3, a2)), l2(`<span class="font-medium text-lg"${a2}>${ssrInterpolate(e5.code)}</span></button><span class="font-medium text-lg"${a2}>${ssrInterpolate(t3.$t("TITLES.validTill"))}: <span class="font-normal"${a2}>${ssrInterpolate(e5.end_at)}</span></span></div></div>`);
        }), l2("<!--]--></div>")) : (l2(`<div${a2}>`), l2(ssrRenderComponent(Be, { class: "!min-h-[300px]" }, null, s3, a2)), l2("</div>")), l2("</div>");
      }), _: 1 }, c2)) : e3("<!---->");
    }, "body", false, c2), ssrRenderTeleport(s2, (e3) => {
      unref(oe2) ? e3(ssrRenderComponent(Ve, { onClose: (e4) => oe2.value = false }, { default: withCtx((e4, l2, s3, a2) => {
        if (!l2) return [createVNode("div", { onClick: withModifiers(() => {
        }, ["stop"]), class: "bg-white p-5 md:p-10", "data-aos": "zoom-in", "data-aos-duration": "800" }, [createVNode("div", { class: "relative" }, [createVNode("h4", { class: "text-3xl text-center font-bold mb-10" }, toDisplayString(t3.$t("TITLES.sizeGuide")), 1), createVNode("button", { class: "absolute top-1/2 -translate-y-1/2 end-0", onClick: withModifiers((e5) => oe2.value = false, ["stop"]) }, [createVNode(Pe, { name: "big-close" })], 8, ["onClick"])]), createVNode("div", { class: "p-5 bg-[#F6F6F6]" }, [createVNode("img", { src: X, alt: "size-gide", class: "object-contain select-none max-w-[100%] max-h-[100%]" })])], 8, ["onClick"])];
        l2(`<div class="bg-white p-5 md:p-10" data-aos="zoom-in" data-aos-duration="800"${a2}><div class="relative"${a2}><h4 class="text-3xl text-center font-bold mb-10"${a2}>${ssrInterpolate(t3.$t("TITLES.sizeGuide"))}</h4><button class="absolute top-1/2 -translate-y-1/2 end-0"${a2}>`), l2(ssrRenderComponent(Pe, { name: "big-close" }, null, s3, a2)), l2(`</button></div><div class="p-5 bg-[#F6F6F6]"${a2}><img${ssrRenderAttr("src", X)} alt="size-gide" class="object-contain select-none max-w-[100%] max-h-[100%]"${a2}></div></div>`);
      }), _: 1 }, c2)) : e3("<!---->");
    }, "body", false, c2), unref(ne2) ? s2(ssrRenderComponent(Re, { title: t3.$t("TITLES.share_product"), onClose: (e3) => ne2.value = false }, { default: withCtx((e3, t4, l2, s3) => {
      if (!t4) return [createVNode("div", { class: "bg-primary mb-5 rounded-lg bg-opacity-10 p-3 text-primary flex items-center justify-between gap-2" }, [createVNode("p", { class: "max-w-[80%] truncate" }, toDisplayString(unref(re2)), 1), createVNode("button", { class: "text-primary", onClick: (e4) => ce(unref(re2)) }, [createVNode(qe, { name: "copy" })], 8, ["onClick"])]), createVNode("div", { class: "flex items-center justify-center gap-4 flex-wrap" }, [createVNode("button", { type: "button", onClick: (e4) => de("facebook") }, [createVNode(qe, { name: "facebook" })], 8, ["onClick"]), createVNode("button", { type: "button", onClick: (e4) => de("twitter") }, [createVNode(qe, { name: "x" })], 8, ["onClick"]), createVNode("button", { type: "button", onClick: (e4) => de("linkedin"), class: "scale-[1.15]" }, [createVNode(qe, { name: "linkedin" })], 8, ["onClick"]), createVNode("button", { type: "button", onClick: (e4) => de("whatsapp") }, [createVNode(qe, { name: "whatsapp-2" })], 8, ["onClick"]), createVNode("button", { type: "button", onClick: (e4) => de("snapchat"), class: "scale-[1.25]" }, [createVNode(qe, { name: "snapchat" })], 8, ["onClick"]), createVNode("button", { type: "button", onClick: (e4) => de("telegram") }, [createVNode(qe, { name: "telegram" })], 8, ["onClick"])])];
      t4(`<div class="bg-primary mb-5 rounded-lg bg-opacity-10 p-3 text-primary flex items-center justify-between gap-2"${s3}><p class="max-w-[80%] truncate"${s3}>${ssrInterpolate(unref(re2))}</p><button class="text-primary"${s3}>`), t4(ssrRenderComponent(qe, { name: "copy" }, null, l2, s3)), t4(`</button></div><div class="flex items-center justify-center gap-4 flex-wrap"${s3}><button type="button"${s3}>`), t4(ssrRenderComponent(qe, { name: "facebook" }, null, l2, s3)), t4(`</button><button type="button"${s3}>`), t4(ssrRenderComponent(qe, { name: "x" }, null, l2, s3)), t4(`</button><button type="button" class="scale-[1.15]"${s3}>`), t4(ssrRenderComponent(qe, { name: "linkedin" }, null, l2, s3)), t4(`</button><button type="button"${s3}>`), t4(ssrRenderComponent(qe, { name: "whatsapp-2" }, null, l2, s3)), t4(`</button><button type="button" class="scale-[1.25]"${s3}>`), t4(ssrRenderComponent(qe, { name: "snapchat" }, null, l2, s3)), t4(`</button><button type="button"${s3}>`), t4(ssrRenderComponent(qe, { name: "telegram" }, null, l2, s3)), t4("</button></div>");
    }), _: 1 }, c2)) : s2("<!---->"), s2("</div>")) : s2("<!---->");
  };
} }, le = te.setup;
te.setup = (e2, l2) => {
  const s2 = useSSRContext();
  return (s2.modules || (s2.modules = /* @__PURE__ */ new Set())).add("components/Shared/ProductDetails.vue"), le ? le(e2, l2) : undefined;
};
const se = { __name: "Recommended", __ssrInlineRender: true, props: { data: Array, required: true }, setup(e2) {
  const { locale: t2 } = Qs();
  return (s2, c2, u2, m2) => {
    var x2;
    const g2 = $, h2 = An, y2 = g, E2 = a;
    c2(`<section${ssrRenderAttrs(mergeProps({ class: "bg-[#FAFCFF] my-6 lg:my-14 py-6 lg:py-14" }, m2))}><div class="container"><h2 data-aos="fade-up" class="mb-10 text-center text-3xl sm:text-4xl lg:text-5xl font-semibold animate-fade-in">${ssrInterpolate(s2.$t("TITLES.recommended"))}</h2>`), (null == (x2 = e2.data) ? undefined : x2.length) ? (c2("<div>"), c2(ssrRenderComponent(unref(he), { modules: ["SwiperAutoplay" in s2 ? s2.SwiperAutoplay : unref(A$1), "SwiperFreeMode" in s2 ? s2.SwiperFreeMode : unref(z)], "slides-per-view": 1.3, "free-mode": true, "space-between": 24, autoplay: { delay: 5e3, disableOnInteraction: false }, breakpoints: { 0: { slidesPerView: 1.3 }, 576: { slidesPerView: 2 }, 768: { slidesPerView: 3 }, 1024: { slidesPerView: 4 }, 1280: { slidesPerView: 5 } }, class: "mySwiper mb-10" }, { default: withCtx((t3, l2, s3, c3) => {
      if (!l2) return [(openBlock(true), createBlock(Fragment, null, renderList(e2.data, (e3) => (openBlock(), createBlock(unref(ge), { key: e3.id }, { default: withCtx(() => [createVNode(g2, { product: e3 }, null, 8, ["product"])]), _: 2 }, 1024))), 128))];
      l2("<!--[-->"), ssrRenderList(e2.data, (e3) => {
        l2(ssrRenderComponent(unref(ge), { key: e3.id }, { default: withCtx((t4, l3, s4, a2) => {
          if (!l3) return [createVNode(g2, { product: e3 }, null, 8, ["product"])];
          l3(ssrRenderComponent(g2, { product: e3 }, null, s4, a2));
        }), _: 2 }, s3, c3));
      }), l2("<!--]-->");
    }), _: 1 }, u2)), c2('<div class="mt-10 flex items-center justify-center">'), c2(ssrRenderComponent(h2, { to: s2.localePath("/categories") }, { default: withCtx((e3, l2, a2, o2) => {
      if (!l2) return [createVNode("button", { class: "w-[320px] max-w-[100%] bg-black justify-center flex items-center gap-1 px-8 py-3 text-white transition hover:bg-opacity-80 hover:scale-105" }, [createVNode("span", { class: "text-xl font-medium" }, toDisplayString(s2.$t("TITLES.viewAll")), 1), createVNode(y2, { class: ["ar" === unref(t2) ? "rotate-180" : "", "scale-75"], name: "arrow-right" }, null, 8, ["class"])])];
      l2(`<button class="w-[320px] max-w-[100%] bg-black justify-center flex items-center gap-1 px-8 py-3 text-white transition hover:bg-opacity-80 hover:scale-105"${o2}><span class="text-xl font-medium"${o2}>${ssrInterpolate(s2.$t("TITLES.viewAll"))}</span>`), l2(ssrRenderComponent(y2, { class: ["ar" === unref(t2) ? "rotate-180" : "", "scale-75"], name: "arrow-right" }, null, a2, o2)), l2("</button>");
    }), _: 1 }, u2)), c2("</div></div>")) : (c2("<div>"), c2(ssrRenderComponent(E2, { class: "!min-h-[35vh]" }, null, u2)), c2("</div>")), c2("</div></section>");
  };
} }, ae = se.setup;
se.setup = (e2, l2) => {
  const s2 = useSSRContext();
  return (s2.modules || (s2.modules = /* @__PURE__ */ new Set())).add("components/Shared/Recommended.vue"), ae ? ae(e2, l2) : undefined;
};
const ie = { __name: "MayLike", __ssrInlineRender: true, props: { data: Array, required: true }, setup(e2) {
  const { locale: t2 } = Qs();
  return (l2, s2, c2, u2) => {
    var m2;
    const x2 = $, g2 = An, h2 = g, y2 = a;
    (null == (m2 = e2.data) ? undefined : m2.length) ? (s2(`<div${ssrRenderAttrs(u2)}>`), s2(ssrRenderComponent(unref(he), { modules: ["SwiperAutoplay" in l2 ? l2.SwiperAutoplay : unref(A$1), "SwiperFreeMode" in l2 ? l2.SwiperFreeMode : unref(z)], "slides-per-view": 1.3, "free-mode": true, "space-between": 24, autoplay: { delay: 5e3, disableOnInteraction: false }, breakpoints: { 0: { slidesPerView: 1.3 }, 576: { slidesPerView: 2 }, 768: { slidesPerView: 3 }, 1024: { slidesPerView: 4 }, 1280: { slidesPerView: 5 } }, class: "mySwiper mb-10" }, { default: withCtx((t3, l3, s3, c3) => {
      if (!l3) return [(openBlock(true), createBlock(Fragment, null, renderList(e2.data, (e3) => (openBlock(), createBlock(unref(ge), { key: e3.id }, { default: withCtx(() => [createVNode(x2, { product: e3 }, null, 8, ["product"])]), _: 2 }, 1024))), 128))];
      l3("<!--[-->"), ssrRenderList(e2.data, (e3) => {
        l3(ssrRenderComponent(unref(ge), { key: e3.id }, { default: withCtx((t4, l4, s4, a2) => {
          if (!l4) return [createVNode(x2, { product: e3 }, null, 8, ["product"])];
          l4(ssrRenderComponent(x2, { product: e3 }, null, s4, a2));
        }), _: 2 }, s3, c3));
      }), l3("<!--]-->");
    }), _: 1 }, c2)), s2('<div class="mt-10 flex items-center justify-center">'), s2(ssrRenderComponent(g2, { to: l2.localePath("/categories") }, { default: withCtx((e3, s3, a2, o2) => {
      if (!s3) return [createVNode("button", { class: "w-[320px] max-w-[100%] bg-black justify-center flex items-center gap-1 px-8 py-3 text-white transition hover:bg-opacity-80 hover:scale-105" }, [createVNode("span", { class: "text-xl font-medium" }, toDisplayString(l2.$t("TITLES.viewAll")), 1), createVNode(h2, { class: ["ar" === unref(t2) ? "rotate-180" : "", "scale-75"], name: "arrow-right" }, null, 8, ["class"])])];
      s3(`<button class="w-[320px] max-w-[100%] bg-black justify-center flex items-center gap-1 px-8 py-3 text-white transition hover:bg-opacity-80 hover:scale-105"${o2}><span class="text-xl font-medium"${o2}>${ssrInterpolate(l2.$t("TITLES.viewAll"))}</span>`), s3(ssrRenderComponent(h2, { class: ["ar" === unref(t2) ? "rotate-180" : "", "scale-75"], name: "arrow-right" }, null, a2, o2)), s3("</button>");
    }), _: 1 }, c2)), s2("</div></div>")) : (s2(`<div${ssrRenderAttrs(u2)}>`), s2(ssrRenderComponent(y2, { class: "!min-h-[35vh]" }, null, c2)), s2("</div>"));
  };
} }, oe = ie.setup;
ie.setup = (e2, l2) => {
  const s2 = useSSRContext();
  return (s2.modules || (s2.modules = /* @__PURE__ */ new Set())).add("components/Shared/MayLike.vue"), oe ? oe(e2, l2) : undefined;
};
const ne = { __name: "[slug]", __ssrInlineRender: true, setup(e2) {
  const t2 = Qt().$axios, s2 = Ma(), { locale: o2, t: n2 } = Qs(), { data: r2, status: d2 } = wn("products", () => t2.get(`web_product/${s2.params.slug}`).then((e3) => e3.data.data).catch((e3) => e3.response)), u2 = computed(() => {
    var e3;
    return [{ name: n2("NAV.home"), to: "/" }, { name: null == (e3 = r2.value) ? undefined : e3.title, to: `/product/${s2.params.slug}`, disabled: true }];
  });
  return (e3, t3, s3, n3) => {
    var c2, m2, v2, x2;
    const g2 = N, w2 = An, h2 = g, y2 = d$1, E2 = te, T2 = se, k2 = ie;
    "pending" === unref(d2) ? (t3(`<div${ssrRenderAttrs(mergeProps({ class: "container my-10" }, n3))}>`), t3(ssrRenderComponent(g2, null, null, s3)), t3("</div>")) : "success" === unref(d2) ? (t3(`<div${ssrRenderAttrs(mergeProps({ class: "container my-10" }, n3))}><div data-aos="fade-right" class="flex mb-10 items-center gap-5 flex-wrap">`), t3(ssrRenderComponent(w2, { to: e3.localePath("/"), class: "justify-center flex items-center border border-[#E1E1E1] size-12 rounded-full" }, { default: withCtx((e4, t4, l2, s4) => {
      if (!t4) return [createVNode(h2, { name: "arrow-left", class: ["ar" === unref(o2) ? "rotate-180" : "", "[&_path]:fill-primary scale-[.60]"] }, null, 8, ["class"])];
      t4(ssrRenderComponent(h2, { name: "arrow-left", class: ["ar" === unref(o2) ? "rotate-180" : "", "[&_path]:fill-primary scale-[.60]"] }, null, l2, s4));
    }), _: 1 }, s3)), t3(ssrRenderComponent(y2, { items: unref(u2) }, null, s3)), t3("</div>"), t3(ssrRenderComponent(E2, { data: unref(r2) }, null, s3)), (null == (c2 = unref(r2)) ? undefined : c2.recommended) ? t3(ssrRenderComponent(T2, { data: null == (m2 = unref(r2)) ? undefined : m2.recommended }, null, s3)) : t3("<!---->"), t3(`<div class="my-6 lg:my-14 py-6 lg:py-14"><div class="container"><h2 data-aos="fade-up" class="mb-10 text-center text-3xl sm:text-4xl lg:text-5xl font-semibold animate-fade-in">${ssrInterpolate(e3.$t("TITLES.mayAlsoLike"))}</h2>`), (null == (v2 = unref(r2)) ? undefined : v2.also_may_like) ? t3(ssrRenderComponent(k2, { data: null == (x2 = unref(r2)) ? undefined : x2.also_may_like }, null, s3)) : t3("<!---->"), t3('</div></div><div class="container pb-6 lg:pb-14"><button class="rounded-full bg-white border border-primary flex items-center justify-center w-16 h-16">'), t3(ssrRenderComponent(h2, { name: "arrow-up", class: "scale-75" }, null, s3)), t3("</button></div></div>")) : t3("<!---->");
  };
} }, re = ne.setup;
ne.setup = (e2, l2) => {
  const s2 = useSSRContext();
  return (s2.modules || (s2.modules = /* @__PURE__ */ new Set())).add("pages/product/[slug].vue"), re ? re(e2, l2) : undefined;
};

export { ne as default };
//# sourceMappingURL=_slug_-Dr7z2K-G.mjs.map
