import { e as buildAssetsURL } from '../_/nitro.mjs';
import { d } from './Skeleton-BBJiWBrY.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, h as Ma, i as wn, b as Qs, u as ef, g as $a } from './server.mjs';
import { d as d$1 } from './breadcrumb-LaEAX0us.mjs';
import { g } from './SvgIcon-BKMVrGmr.mjs';
import { $ } from './ProductCard-a4k3Hr5i.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 j = {};
const F = j.setup;
j.setup = (e2, l2) => {
  const a2 = useSSRContext();
  return (a2.modules || (a2.modules = /* @__PURE__ */ new Set())).add("components/Shared/CategoriesSkelton.vue"), F ? F(e2, l2) : undefined;
};
const S = uf(j, [["ssrRender", function(s2, a2, t2, i2) {
  const n2 = d;
  a2(`<div${ssrRenderAttrs(mergeProps({ class: "my-10" }, i2))}>`), a2(ssrRenderComponent(n2, { class: "h-[16px] w-[200px] mb-10" }, null, t2)), a2('<div class="grid container grid-cols-1 lg:grid-cols-12 gap-10"><div class="w-full p-4 bg-[#F9F9F9] h-fit lg:col-span-3 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 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><div class="mt-10 flex justify-center gap-4">'), a2(ssrRenderComponent(n2, { class: "h-[30px] w-[60px]" }, null, t2)), a2(ssrRenderComponent(n2, { class: "h-[30px] w-[60px]" }, null, t2)), a2(ssrRenderComponent(n2, { class: "h-[30px] w-[60px]" }, null, t2)), a2("</div></div></div></div>");
}]]), T = 10, C = { __name: "Filter", __ssrInlineRender: true, setup(e2) {
  const s2 = ef();
  Qt().$axios, $a(), Ma();
  const l2 = ref([]), n2 = ref([]), r2 = ref(T), v2 = ref(5e3), y2 = ref(5e3), $2 = computed(() => (r2.value - T) / (y2.value - T) * 100), w2 = computed(() => (v2.value - T) / (y2.value - T) * 100), q2 = computed(() => w2.value - $2.value), k2 = ref(false), j2 = ref(false);
  l2.value = s2.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 F2 = ref([]), S2 = ref(false);
  return (e3, s3, a2, t2) => {
    var g2, b2, f2;
    const h2 = g;
    s3(`<div${ssrRenderAttrs(t2)}>`), e3.$route.query.brand ? s3(`<div class="p-6 mb-8 bg-[#FBFCFF] flex items-center gap-5"><img${ssrRenderAttr("src", null == (b2 = null == (g2 = unref(F2).filter((s4) => s4.id == e3.$route.query.brand)[0]) ? undefined : g2.image) ? undefined : b2.media)} width="80" height="80" alt="boss" class="size-[120px] object-cover"><h5 class="font-medium text-xl">${ssrInterpolate(null == (f2 = unref(F2).filter((s4) => s4.id == e3.$route.query.brand)[0]) ? undefined : f2.title)}</h5></div>`) : s3("<!---->"), s3(`<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">`), s3(ssrRenderComponent(h2, { style: unref(k2) ? null : { display: "none" }, name: "minus" }, null, a2)), s3(ssrRenderComponent(h2, { style: unref(k2) ? { display: "none" } : null, name: "add" }, null, a2)), s3("</span></button>"), unref(k2) ? (s3('<div class="mt-5 space-y-4 ps-4"><!--[-->'), ssrRenderList(unref(l2), (e4) => {
      s3(`<div class="flex flex-col space-y-4"><div class="flex items-center gap-3 cursor-pointer"><div class="${ssrRenderClass(["w-6 h-6 border border-black rounded-full flex items-center justify-center", e4.selected && "bg-black"])}">`), e4.selected ? s3(ssrRenderComponent(h2, { name: "check", class: "[&_path]:fill-white" }, null, a2)) : s3("<!---->"), s3(`</div><span>${ssrInterpolate(e4.title)}</span><button class="ms-auto">`), e4.showChildren ? s3(ssrRenderComponent(h2, { name: "minus" }, null, a2)) : s3(ssrRenderComponent(h2, { name: "add" }, null, a2)), s3("</button></div>"), e4.showChildren ? (s3('<div class="ps-6 space-y-4"><!--[-->'), ssrRenderList(e4.sub_categories, (e5) => {
        s3(`<div class="flex flex-col space-y-4"><div class="flex items-center gap-3 cursor-pointer"><div class="${ssrRenderClass(["w-5 h-5 border border-black rounded-full flex items-center justify-center", e5.selected && "bg-black"])}">`), e5.selected ? s3(ssrRenderComponent(h2, { name: "check", class: "[&_path]:fill-white" }, null, a2)) : s3("<!---->"), s3(`</div><span>${ssrInterpolate(e5.title)}</span><button class="ms-auto">`), e5.showSubChildren ? s3(ssrRenderComponent(h2, { name: "minus" }, null, a2)) : s3(ssrRenderComponent(h2, { name: "add" }, null, a2)), s3("</button></div>"), e5.showSubChildren ? (s3('<div class="ps-8 space-y-4"><!--[-->'), ssrRenderList(e5.sub_sub_categories, (e6) => {
          s3(`<div class="flex flex-col space-y-4"><div class="flex items-center gap-3 cursor-pointer"><div class="${ssrRenderClass(["w-[18px] h-[18px] border border-black rounded-full flex items-center justify-center", e6.selected && "bg-black"])}">`), e6.selected ? s3(ssrRenderComponent(h2, { name: "check", class: "[&_path]:fill-white" }, null, a2)) : s3("<!---->"), s3(`</div><span>${ssrInterpolate(e6.title)}</span></div></div>`);
        }), s3("<!--]--></div>")) : s3("<!---->"), s3("</div>");
      }), s3("<!--]--></div>")) : s3("<!---->"), s3("</div>");
    }), s3("<!--]--></div>")) : s3("<!---->"), s3(`</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">`), s3(ssrRenderComponent(h2, { style: unref(S2) ? { display: "none" } : null, name: "add" }, null, a2)), s3(ssrRenderComponent(h2, { style: unref(S2) ? null : { display: "none" }, name: "minus" }, null, a2)), s3("</span></button>"), unref(S2) ? (s3('<div class="mt-5 space-y-4 ps-4"><!--[-->'), ssrRenderList(unref(F2), (e4) => {
      s3(`<div class="flex flex-col space-y-4"><div class="flex items-center gap-3 cursor-pointer"><div class="${ssrRenderClass(["w-6 h-6 border border-black rounded-full flex items-center justify-center", e4.selected && "bg-black"])}">`), e4.selected ? s3(ssrRenderComponent(h2, { name: "check", class: "[&_path]:fill-white" }, null, a2)) : s3("<!---->"), s3(`</div><span>${ssrInterpolate(e4.title)}</span></div></div>`);
    }), s3("<!--]--></div>")) : s3("<!---->"), s3(`</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">`), s3(ssrRenderComponent(h2, { style: unref(j2) ? { display: "none" } : null, name: "add" }, null, a2)), s3(ssrRenderComponent(h2, { style: unref(j2) ? null : { display: "none" }, name: "minus" }, null, a2)), s3("</span></button>"), unref(j2) ? (s3('<div class="flex flex-wrap gap-2 mt-4"><!--[-->'), ssrRenderList(unref(n2), (e4) => {
      s3(`<div class="${ssrRenderClass([e4.selected && "!border-[1.5px] !border-black", "w-6 h-6 rounded-full border border-gray-400 cursor-pointer"])}" style="${ssrRenderStyle(`background: ${e4.hex}`)}"></div>`);
    }), s3("<!--]--></div>")) : s3("<!---->"), s3(`</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($2)}%`, width: `${unref(q2)}%` })}"></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(v2))} 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(v2))}</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, l2) => {
  const a2 = useSSRContext();
  return (a2.modules || (a2.modules = /* @__PURE__ */ new Set())).add("components/Shared/Filter.vue"), E ? E(e2, l2) : 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 s2;
  const t2 = Qt().$axios, m2 = Ma(), x2 = ref(+(null == (s2 = m2.query) ? undefined : s2.page) || 1), { data: v2, status: g2 } = wn("products", () => {
    var e3;
    return t2.get("product", { params: { main_category_id: m2.query.main_category ? m2.query.main_category : null, sub_category_id: m2.query.sub_category ? m2.query.sub_category : null, sub_sub_category_id: m2.query.sub_sub_category ? m2.query.sub_sub_category : null, color_id: m2.query.color ? m2.query.color : null, price_from: m2.query.minPrice ? m2.query.minPrice : null, price_to: m2.query.maxPrice ? m2.query.maxPrice : null, type: m2.query.type ? m2.query.type : null, brand_id: m2.query.brand ? m2.query.brand : null, page: null == (e3 = m2.query) ? undefined : e3.page } }).then((e4) => e4.data).catch((e4) => e4.response);
  }, { watch: [() => m2.query] });
  ref(null);
  const f2 = ref(false), { t: j2 } = Qs(), F2 = ref([{ name: j2("NAV.home"), to: "/" }, { name: j2("NAV.categories"), to: "/categories", disabled: true }]);
  return (e3, s3, a2, t3) => {
    var m3, b2, h2, y2;
    const $2 = S, j3 = d$1, T2 = g, E2 = C, R2 = $, V2 = resolveComponent("VPagination"), A = a;
    "pending" === unref(g2) ? (s3(`<div${ssrRenderAttrs(mergeProps({ class: "container my-10" }, t3))}>`), s3(ssrRenderComponent($2, null, null, a2)), s3("</div>")) : "success" === unref(g2) ? (s3(`<div${ssrRenderAttrs(mergeProps({ class: "my-10" }, t3))}>`), s3(ssrRenderComponent(j3, { "data-aos": "fade-right", class: "container", items: unref(F2) }, null, a2)), "flash_sale" === e3.$route.query.type ? s3(`<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 ? s3(`<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 ? s3(`<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>`) : s3("<!---->"), s3(`<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>`), s3(ssrRenderComponent(T2, { name: "filter", class: "scale-125 !stroke-1" }, null, a2)), s3("</button>"), s3(ssrRenderComponent(E2, { "data-aos": "fade-right", class: "lg:col-span-3 h-fit hidden lg:block" }, null, a2)), unref(f2) ? s3(ssrRenderComponent(E2, { "data-aos": "fade-up", class: "lg:col-span-3 h-fit block lg:hidden" }, null, a2)) : s3("<!---->"), s3('<div data-aos="fade-left" class="lg:col-span-9 bg-[#FBFCFF] p-3 lg:p-6">'), (null == (b2 = null == (m3 = unref(v2)) ? undefined : m3.data) ? undefined : b2.length) ? (s3('<!--[--><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 == (h2 = unref(v2)) ? undefined : h2.data, (e4) => {
      s3(ssrRenderComponent(R2, { key: e4.id, product: e4 }, null, a2));
    }), s3('<!--]--></div><div class="mt-10">'), s3(ssrRenderComponent(V2, { modelValue: unref(x2), "onUpdate:modelValue": [(e4) => isRef(x2) ? x2.value = e4 : null, (s4) => e3.$router.push({ query: Object.assign({}, e3.$route.query, { page: s4 }) })], pages: null == (y2 = unref(v2)) ? undefined : y2.meta.last_page, "range-size": 1, "active-color": "#DCEDFF" }, null, a2)), s3("</div><!--]-->")) : (s3("<div>"), s3(ssrRenderComponent(A, { class: "!min-h-[35vh]" }, null, a2)), s3("</div>")), s3("</div></div></div>")) : s3("<!---->");
  };
} }, V = R.setup;
R.setup = (e2, l2) => {
  const a2 = useSSRContext();
  return (a2.modules || (a2.modules = /* @__PURE__ */ new Set())).add("pages/categories/index.vue"), V ? V(e2, l2) : undefined;
};

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