import { e as buildAssetsURL } from '../_/nitro.mjs';
import { u } from './Skeleton-Bnk8IDLx.mjs';
import { mergeProps, ref, resolveComponent, unref, isRef, useSSRContext, computed } from 'vue';
import { ssrRenderAttrs, ssrRenderComponent, ssrRenderList, ssrRenderAttr, ssrInterpolate, ssrRenderClass, ssrRenderStyle } from 'vue/server-renderer';
import { d as uf, a as Qt, u as ef, h as Ma, i as wn, b as Qs, g as $a } from './server.mjs';
import { d } from './breadcrumb-LaEAX0us.mjs';
import { g } from './SvgIcon-BKMVrGmr.mjs';
import { $ } from './ProductCard-CRNa6mIC.mjs';
import { a } from './NoData-DiE8X5YK.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';
import './star-mqjJGHgV.mjs';

const F = {};
const j = F.setup;
F.setup = (e2, s2) => {
  const a2 = useSSRContext();
  return (a2.modules || (a2.modules = /* @__PURE__ */ new Set())).add("components/Shared/CategoriesSkelton.vue"), j ? j(e2, s2) : undefined;
};
const S = uf(F, [["ssrRender", function(l2, a2, t2, i2) {
  const n2 = u;
  a2(`<div${ssrRenderAttrs(mergeProps({ class: "my-10" }, i2))}>`), a2(ssrRenderComponent(n2, { class: "h-[16px] w-[200px] mb-10" }, null, t2)), a2('<div class="grid grid-cols-1 lg:grid-cols-12 gap-10"><div class="lg:col-span-3">'), l2.$route.query.brand ? a2('<div class="p-6 mb-8 bg-[#FBFCFF] flex items-center gap-5"><div class="size-[120px] bg-gray-200 animate-pulse"></div><div class="w-[58px] h-[28px] bg-gray-200 animate-pulse"></div></div>') : a2("<!---->"), a2('<div class="w-full p-4 bg-[#F9F9F9] h-fit space-y-6">'), a2(ssrRenderComponent(n2, { class: "h-[20px] w-[100px]" }, null, t2)), a2('<div class="space-y-4">'), a2(ssrRenderComponent(n2, { class: "h-[18px] w-[120px]" }, null, t2)), a2(ssrRenderComponent(n2, { class: "h-[14px] w-[100%]" }, null, t2)), a2(ssrRenderComponent(n2, { class: "h-[14px] w-[100%]" }, null, t2)), a2(ssrRenderComponent(n2, { class: "h-[14px] w-[100%]" }, null, t2)), a2("</div>"), a2(ssrRenderComponent(n2, { class: "h-[16px] w-[120px]" }, null, t2)), a2(ssrRenderComponent(n2, { class: "h-[8px] w-[100%]" }, null, t2)), a2(ssrRenderComponent(n2, { class: "h-[8px] w-[100%]" }, null, t2)), a2(ssrRenderComponent(n2, { class: "h-[10px] w-[100%]" }, null, t2)), a2(ssrRenderComponent(n2, { class: "h-[40px] w-full" }, null, t2)), a2('</div></div><div class="flex-1 space-y-10 lg:col-span-9"><div class="grid p-4 bg-[#F9F9F9] grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 xl:grid-cols-4 gap-y-8 gap-x-4"><!--[-->'), ssrRenderList(8, (e2) => {
    a2('<div class="space-y-4">'), a2(ssrRenderComponent(n2, { class: "h-[300px] w-[100%]" }, null, t2)), a2(ssrRenderComponent(n2, { class: "h-[14px] w-[70%]" }, null, t2)), a2(ssrRenderComponent(n2, { class: "h-[14px] w-[40%]" }, null, t2)), a2(ssrRenderComponent(n2, { class: "h-[14px] w-[50%]" }, null, t2)), a2("</div>");
  }), a2('<!--]--><div class="mt-10 xs:col-span-2 sm:col-span-3 xl:col-span-4 flex justify-center gap-4">'), a2(ssrRenderComponent(n2, { class: "h-[48px] !rounded-full w-[48px]" }, null, t2)), a2(ssrRenderComponent(n2, { class: "h-[48px] !rounded-full w-[48px]" }, null, t2)), a2(ssrRenderComponent(n2, { class: "h-[48px] !rounded-full w-[48px]" }, null, t2)), a2(ssrRenderComponent(n2, { class: "h-[48px] !rounded-full w-[48px]" }, null, t2)), a2(ssrRenderComponent(n2, { class: "h-[48px] !rounded-full w-[48px]" }, null, t2)), a2("</div></div></div></div></div>");
}]]), T = 10, C = { __name: "Filter", __ssrInlineRender: true, setup(e2) {
  const l2 = ef();
  Qt().$axios, $a(), Ma();
  const s2 = ref([]), n2 = ref([]), r2 = ref(T), m2 = ref(5e3), y2 = ref(5e3), w2 = computed(() => (r2.value - T) / (y2.value - T) * 100), $2 = computed(() => (m2.value - T) / (y2.value - T) * 100), k2 = computed(() => $2.value - w2.value), q2 = ref(false), F2 = ref(false);
  s2.value = l2.categories.map((e3) => ({ ...e3, selected: false, showChildren: false, sub_categories: e3.sub_categories.map((e4) => ({ ...e4, selected: false, showSubChildren: false, sub_sub_categories: e4.sub_sub_categories || [] })) }));
  const j2 = ref([]), S2 = ref(false);
  return (e3, l3, a2, t2) => {
    var g2, b2, f2, h2, $3, C2, E2, I2, L2, P2;
    const R2 = g;
    l3(`<div${ssrRenderAttrs(t2)}>`), e3.$route.query.brand ? (l3('<div class="p-6 mb-8 bg-[#FBFCFF] flex items-center gap-5"><div class="relative w-[120px] h-[120px]">'), (null == (f2 = null == (b2 = null == (g2 = unref(j2)) ? undefined : g2.filter((l4) => l4.id == e3.$route.query.brand)[0]) ? undefined : b2.image) ? undefined : f2.media) ? l3(`<img${ssrRenderAttr("src", null == (C2 = null == ($3 = null == (h2 = unref(j2)) ? undefined : h2.filter((l4) => l4.id == e3.$route.query.brand)[0]) ? undefined : $3.image) ? undefined : C2.media)} width="120" height="120" alt="boss" class="size-[120px] object-cover">`) : l3('<div class="size-[120px] bg-gray-200 animate-pulse"></div>'), l3("</div>"), (null == (I2 = null == (E2 = unref(j2)) ? undefined : E2.filter((l4) => l4.id == e3.$route.query.brand)[0]) ? undefined : I2.title) ? l3(`<h5 class="font-medium text-xl">${ssrInterpolate(null == (P2 = null == (L2 = unref(j2)) ? undefined : L2.filter((l4) => l4.id == e3.$route.query.brand)[0]) ? undefined : P2.title)}</h5>`) : l3('<div class="w-[58px] h-[28px] bg-gray-200 animate-pulse"></div>'), l3("</div>")) : l3("<!---->"), l3(`<div class="bg-[#FBFCFF] p-3 lg:p-6"><h3 class="font-bold text-xl mb-5 pb-5 border-b border-[#E1E1E1]">${ssrInterpolate(e3.$t("TITLES.sortBy"))}</h3><div class="space-y-8"><div><button class="flex w-full items-center justify-between gap-2"><h4 class="font-semibold text-primary">${ssrInterpolate(e3.$t("TITLES.categories"))}</h4><span class="outline-none">`), l3(ssrRenderComponent(R2, { style: unref(q2) ? null : { display: "none" }, name: "minus" }, null, a2)), l3(ssrRenderComponent(R2, { style: unref(q2) ? { display: "none" } : null, name: "add" }, null, a2)), l3("</span></button>"), unref(q2) ? (l3('<div class="mt-5 space-y-4 ps-4"><!--[-->'), ssrRenderList(unref(s2), (e4) => {
      l3(`<div class="flex flex-col space-y-4"><div class="flex items-center gap-3 text-sm cursor-pointer"><div class="${ssrRenderClass(["w-6 h-6 flex-shrink-0 border border-black rounded-full flex items-center justify-center", e4.selected && "bg-black"])}">`), e4.selected ? l3(ssrRenderComponent(R2, { name: "check", class: "[&_path]:fill-white" }, null, a2)) : l3("<!---->"), l3(`</div><span>${ssrInterpolate(e4.title)}</span><button class="ms-auto">`), l3(ssrRenderComponent(R2, { style: e4.showChildren ? null : { display: "none" }, name: "minus" }, null, a2)), l3(ssrRenderComponent(R2, { style: e4.showChildren ? { display: "none" } : null, name: "add" }, null, a2)), l3("</button></div>"), e4.showChildren ? (l3('<div class="ps-6 space-y-4"><!--[-->'), ssrRenderList(e4.sub_categories, (e5) => {
        l3(`<div class="flex flex-col space-y-4"><div class="flex items-center text-sm gap-3 cursor-pointer"><div class="${ssrRenderClass(["w-5 h-5 border flex-shrink-0 border-black rounded-full flex items-center justify-center", e5.selected && "bg-black"])}">`), e5.selected ? l3(ssrRenderComponent(R2, { name: "check", class: "[&_path]:fill-white" }, null, a2)) : l3("<!---->"), l3(`</div><span>${ssrInterpolate(e5.title)}</span><button class="ms-auto">`), l3(ssrRenderComponent(R2, { style: e5.showSubChildren ? null : { display: "none" }, name: "minus" }, null, a2)), l3(ssrRenderComponent(R2, { style: e5.showSubChildren ? { display: "none" } : null, name: "add" }, null, a2)), l3("</button></div>"), e5.showSubChildren ? (l3('<div class="ps-8 space-y-4"><!--[-->'), ssrRenderList(e5.sub_sub_categories, (e6) => {
          l3(`<div class="flex flex-col space-y-4"><div class="flex items-center text-sm gap-3 cursor-pointer"><div class="${ssrRenderClass(["w-[18px] flex-shrink-0 h-[18px] border border-black rounded-full flex items-center justify-center", e6.selected && "bg-black"])}">`), e6.selected ? l3(ssrRenderComponent(R2, { name: "check", class: "[&_path]:fill-white" }, null, a2)) : l3("<!---->"), l3(`</div><span>${ssrInterpolate(e6.title)}</span></div></div>`);
        }), l3("<!--]--></div>")) : l3("<!---->"), l3("</div>");
      }), l3("<!--]--></div>")) : l3("<!---->"), l3("</div>");
    }), l3("<!--]--></div>")) : l3("<!---->"), l3(`</div><div><button class="flex w-full items-center justify-between gap-2"><h4 class="font-semibold text-primary">${ssrInterpolate(e3.$t("TITLES.brands"))}</h4><span class="outline-none">`), l3(ssrRenderComponent(R2, { style: unref(S2) ? { display: "none" } : null, name: "add" }, null, a2)), l3(ssrRenderComponent(R2, { style: unref(S2) ? null : { display: "none" }, name: "minus" }, null, a2)), l3("</span></button>"), unref(S2) ? (l3('<div class="mt-5 space-y-4 ps-4"><!--[-->'), ssrRenderList(unref(j2), (e4) => {
      l3(`<div class="flex flex-col space-y-4"><div class="flex items-center text-sm gap-3 cursor-pointer"><div class="${ssrRenderClass(["w-6 h-6 border flex-shrink-0 border-black rounded-full flex items-center justify-center", e4.selected && "bg-black"])}">`), e4.selected ? l3(ssrRenderComponent(R2, { name: "check", class: "[&_path]:fill-white" }, null, a2)) : l3("<!---->"), l3(`</div><span>${ssrInterpolate(e4.title)}</span></div></div>`);
    }), l3("<!--]--></div>")) : l3("<!---->"), l3(`</div><div><button class="flex w-full items-center justify-between gap-2"><h4 class="font-semibold text-primary">${ssrInterpolate(e3.$t("TITLES.colors"))}</h4><span class="outline-none">`), l3(ssrRenderComponent(R2, { style: unref(F2) ? { display: "none" } : null, name: "add" }, null, a2)), l3(ssrRenderComponent(R2, { style: unref(F2) ? null : { display: "none" }, name: "minus" }, null, a2)), l3("</span></button>"), unref(F2) ? (l3('<div class="flex flex-wrap gap-2 mt-4"><!--[-->'), ssrRenderList(unref(n2), (e4) => {
      l3(`<div class="${ssrRenderClass([e4.selected && "!border-[1.5px] !border-black", "w-6 h-6 flex-shrink-0 rounded-full border border-gray-400 cursor-pointer"])}" style="${ssrRenderStyle(`background: ${e4.hex}`)}"></div>`);
    }), l3("<!--]--></div>")) : l3("<!---->"), l3(`</div><div><h4 class="font-semibold mb-4 text-primary">${ssrInterpolate(e3.$t("TITLES.priceRange"))}</h4><div class="slider-container"><div class="slider-track"></div><div class="slider-range" style="${ssrRenderStyle({ left: `${unref(w2)}%`, width: `${unref(k2)}%` })}"></div><div class="range-input"><input type="range"${ssrRenderAttr("min", T)}${ssrRenderAttr("max", unref(y2))}${ssrRenderAttr("value", unref(r2))} class="min-range-input"><input type="range"${ssrRenderAttr("min", T)}${ssrRenderAttr("max", unref(y2))}${ssrRenderAttr("value", unref(m2))} class="max-range-input"></div></div><div class="flex mt-3 items-center font-medium justify-between gap-2 text-black"><div><span class="text-lg font-semibold">${ssrInterpolate(unref(r2))}</span> ${ssrInterpolate(e3.$t("TITLES.egp"))}</div><div><span class="text-lg font-semibold">${ssrInterpolate(unref(m2))}</span> ${ssrInterpolate(e3.$t("TITLES.egp"))}</div></div></div><button type="button" class="base-btn w-full !h-12">${ssrInterpolate(e3.$t("TITLES.apply"))}</button></div></div></div>`);
  };
} }, E = C.setup;
C.setup = (e2, s2) => {
  const a2 = useSSRContext();
  return (a2.modules || (a2.modules = /* @__PURE__ */ new Set())).add("components/Shared/Filter.vue"), E ? E(e2, s2) : undefined;
};
const I = "" + buildAssetsURL("flashsale-bg.CbEknVXT.png"), L = "" + buildAssetsURL("80Off.Xt0ia75C.png"), P = "" + buildAssetsURL("1trend.T7UNp7Py.png"), R = { __name: "index", __ssrInlineRender: true, setup(e2) {
  var l2;
  const t2 = Qt().$axios;
  ef();
  const x2 = Ma(), v2 = ref(+(null == (l2 = x2.query) ? undefined : l2.page) || 1), { data: m2, status: f2 } = wn("products", () => {
    var e3;
    return t2.get("product", { params: { main_category_id: x2.query.main_category ? x2.query.main_category : null, sub_category_id: x2.query.sub_category ? x2.query.sub_category : null, sub_sub_category_id: x2.query.sub_sub_category ? x2.query.sub_sub_category : null, color_id: x2.query.color ? x2.query.color : null, price_from: x2.query.minPrice ? x2.query.minPrice : null, price_to: x2.query.maxPrice ? x2.query.maxPrice : null, type: x2.query.type ? x2.query.type : null, brand_id: x2.query.brand ? x2.query.brand : null, page: null == (e3 = x2.query) ? undefined : e3.page } }).then((e4) => e4.data).catch((e4) => e4.response);
  }, { watch: [() => x2.query] });
  ref(null);
  const F2 = ref(false), { t: j2 } = Qs(), T2 = ref([{ name: j2("NAV.home"), to: "/" }, { name: j2("NAV.categories"), to: "/categories", disabled: true }]);
  return (e3, l3, a2, t3) => {
    var x3, g2, b2, h2;
    const y2 = S, w2 = d, j3 = g, E2 = C, R2 = $, B2 = resolveComponent("VPagination"), V = a;
    "pending" === unref(f2) ? (l3(`<div${ssrRenderAttrs(mergeProps({ class: "container my-10" }, t3))}>`), l3(ssrRenderComponent(y2, null, null, a2)), l3("</div>")) : "success" === unref(f2) ? (l3(`<div${ssrRenderAttrs(mergeProps({ class: "my-10" }, t3))}>`), l3(ssrRenderComponent(w2, { "data-aos": "fade-right", class: "container", items: unref(T2) }, null, a2)), "flash_sale" === e3.$route.query.type ? l3(`<div data-aos="fade-in" class="relative my-14 w-full h-[200px]"><img${ssrRenderAttr("src", I)} alt="flashsale" class="w-full h-full sm:object-cover"></div>`) : "offer" === e3.$route.query.type ? l3(`<div data-aos="fade-in" class="relative my-14 w-full h-[200px]"><img${ssrRenderAttr("src", L)} alt="80% Off" class="w-full h-full sm:object-cover"></div>`) : "popular" === e3.$route.query.type ? l3(`<div data-aos="fade-in" class="relative my-14 w-full h-[200px]"><img${ssrRenderAttr("src", P)} alt="trend" class="w-full h-full sm:object-cover"></div>`) : l3("<!---->"), l3(`<div class="my-10 grid container grid-cols-1 lg:grid-cols-12 gap-x-4 xl:gap-x-10 gap-y-6"><button class="lg:hidden flex items-center gap-2 w-fit ms-auto text-primary p-3 lg:p-6 rounded-full"><span class="text-lg">${ssrInterpolate(e3.$t("TITLES.filter"))}</span>`), l3(ssrRenderComponent(j3, { name: "filter", class: "scale-125 !stroke-1" }, null, a2)), l3("</button>"), l3(ssrRenderComponent(E2, { "data-aos": "fade-right", class: "lg:col-span-3 h-fit hidden lg:block" }, null, a2)), unref(F2) ? l3(ssrRenderComponent(E2, { "data-aos": "fade-up", class: "lg:col-span-3 h-fit block lg:hidden" }, null, a2)) : l3("<!---->"), l3('<div data-aos="fade-left" class="lg:col-span-9 bg-[#FBFCFF] p-3 lg:p-6">'), (null == (g2 = null == (x3 = unref(m2)) ? undefined : x3.data) ? undefined : g2.length) ? (l3('<!--[--><div class="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 xl:grid-cols-4 gap-y-8 gap-x-4"><!--[-->'), ssrRenderList(null == (b2 = unref(m2)) ? undefined : b2.data, (e4) => {
      l3(ssrRenderComponent(R2, { key: e4.id, product: e4 }, null, a2));
    }), l3('<!--]--></div><div class="mt-10">'), l3(ssrRenderComponent(B2, { modelValue: unref(v2), "onUpdate:modelValue": [(e4) => isRef(v2) ? v2.value = e4 : null, (l4) => e3.$router.push({ query: Object.assign({}, e3.$route.query, { page: l4 }) })], pages: null == (h2 = unref(m2)) ? undefined : h2.meta.last_page, "range-size": 1, "active-color": "#DCEDFF" }, null, a2)), l3("</div><!--]-->")) : (l3("<div>"), l3(ssrRenderComponent(V, { class: "!min-h-[35vh]" }, null, a2)), l3("</div>")), l3("</div></div></div>")) : l3("<!---->");
  };
} }, B = R.setup;
R.setup = (e2, s2) => {
  const a2 = useSSRContext();
  return (a2.modules || (a2.modules = /* @__PURE__ */ new Set())).add("pages/categories/index.vue"), B ? B(e2, s2) : undefined;
};

export { R as default };
//# sourceMappingURL=index-nYueUWCx.mjs.map
