import axios from "axios";
import { resolveComponent, mergeProps, withCtx, createVNode, toDisplayString, createTextVNode, reactive, useSSRContext } from "vue";
import { useHead } from "@vueuse/head";
import { ssrRenderAttrs, ssrRenderAttr, ssrRenderClass, ssrInterpolate, ssrRenderComponent, ssrRenderList } from "vue/server-renderer";
import { _ as _export_sfc } from "../entries/pages.mjs";
import "@vue/server-renderer";
import "vue-router";
import "vike/server";
/* empty css               */
/* empty css               */
import "pinia";
import "vue-i18n";
/*! src/views/UpdateDetailsPage.vue [vike:pluginModuleBanner] */
const _sfc_main = {
  data() {
    return {
      updateDetails: {},
      categories: [],
      recentPosts: [],
      prevUpdate: {},
      nextUpdate: {},
      loading: false
    };
  },
  setup() {
    const seoState = reactive({
      title: "",
      meta: []
    });
    useHead(seoState);
    return { seoState };
  },
  watch: {
    "$route.params.id"() {
      this.loadUpdateDetails();
    },
    async "$i18n.locale"() {
      await this.goToUpdateDetails();
      this.applySeoFromUpdate();
    }
  },
  methods: {
    applySeoFromUpdate() {
      var _a, _b, _c, _d, _e;
      const locale = this.$i18n.locale;
      const titleValue = ((_a = this.updateDetails) == null ? void 0 : _a[`meta_title_${locale}`]) || ((_b = this.updateDetails) == null ? void 0 : _b[`title_${locale}`]) || "";
      const descriptionSource = ((_c = this.updateDetails) == null ? void 0 : _c[`meta_description_${locale}`]) || ((_d = this.updateDetails) == null ? void 0 : _d[`content_${locale}`]) || "";
      const description = descriptionSource.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim().slice(0, 160);
      const image = ((_e = this.updateDetails) == null ? void 0 : _e.image) || "";
      const title = titleValue ? `${titleValue} | ValuePlus` : "ValuePlus";
      if (!titleValue && !description && !image) return;
      this.seoState.title = title;
      this.seoState.meta = [
        { name: "description", content: description, key: "description" },
        { itemprop: "name", content: title, key: "itemprop:name" },
        { itemprop: "description", content: description, key: "itemprop:description" },
        { itemprop: "image", content: image, key: "itemprop:image" },
        { property: "og:title", content: title, key: "og:title" },
        { property: "og:description", content: description, key: "og:description" },
        { property: "og:image", content: image, key: "og:image" },
        { name: "twitter:title", content: title, key: "twitter:title" },
        { name: "twitter:description", content: description, key: "twitter:description" },
        { name: "twitter:image", content: image, key: "twitter:image" }
      ];
    },
    updateHref(updateItem) {
      if (!updateItem) return "#";
      return `/${this.$i18n.locale}/blogs/${updateItem[`slug_${this.$i18n.locale}`]}`;
    },
    async loadUpdateDetails() {
      var _a;
      this.loading = true;
      try {
        const response = await axios.get("https://admin.valueerp.net/api/updates");
        const updates = response.data.data.all_updates.data;
        this.categories = response.data.data.categories;
        const currentIndex = updates.findIndex((update) => [update.slug_en, update.slug_ar].includes(this.$route.params.id));
        this.updateDetails = updates[currentIndex];
        this.recentPosts = ((_a = this.categories.find((cat) => cat.id === this.updateDetails.category_id)) == null ? void 0 : _a.updates) || [];
        this.prevUpdate = currentIndex > 0 ? updates[currentIndex - 1] : null;
        this.nextUpdate = currentIndex < updates.length - 1 ? updates[currentIndex + 1] : null;
        this.applySeoFromUpdate();
      } catch (error) {
      } finally {
        this.loading = false;
      }
    },
    goToUpdateDetails(type) {
      return this.$router.push({
        name: "blog-details",
        // 👈 route name
        params: {
          id: type === "next" ? this.nextUpdate[`slug_${this.$i18n.locale}`] : type === "prev" ? this.prevUpdate[`slug_${this.$i18n.locale}`] : this.updateDetails[`slug_${this.$i18n.locale}`]
        }
      }).catch(() => {
      });
    }
  },
  async serverPrefetch() {
    await this.loadUpdateDetails();
  },
  created() {
    if (typeof window !== "undefined") {
      this.loadUpdateDetails();
    }
  }
};
function _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
  const _component_router_link = resolveComponent("router-link");
  _push(`<div${ssrRenderAttrs(mergeProps({ class: "max-w-screen-2xl mx-auto xl:px-20 lg:px-16 md:px-12 sm:px-8 px-6" }, _attrs))}><!-- Loading -->`);
  if ($data.loading) {
    _push(`<div class="fixed inset-0 h-dvh flex items-center justify-center bg-white bg-opacity-90 z-50"><div class="border-4 border-y-ambassador-blue border-x-inherit border-solid w-10 h-10 rounded-full animate-spin"></div></div>`);
  } else {
    _push(`<!---->`);
  }
  if ($data.updateDetails) {
    _push(`<div class="lg:mt-20 mt-10 grid xl:grid-cols-3 grid-cols-1 xl:gap-x-6 gap-y-8"><!-- Main update --><div class="col-span-2 xl:order-1 order-2"><div class="relative rounded-t-md border border-solid border-[#F1F3F7] overflow-hidden"><img${ssrRenderAttr("src", $data.updateDetails.image)} class="w-full h-auto object-cover"${ssrRenderAttr("alt", $data.updateDetails[`title_${_ctx.$i18n.locale}`])}><div class="${ssrRenderClass(`absolute top-0 end-0 bg-ambassador-blue ${_ctx.$i18n.locale === "en" ? "rounded-tr-md rounded-bl-md" : "rounded-tl-md rounded-br-md"}`)}"><p class="text-white py-2 px-5 sm:text-base text-sm">${ssrInterpolate(new Date($data.updateDetails.created).toLocaleDateString(_ctx.$i18n.locale === "en" ? "en-GB" : "ar-EG", { day: "2-digit", month: "long", year: "numeric", numberingSystem: _ctx.$i18n.locale === "en" ? "latn" : "arab" }))}</p></div></div><div class="xl:mt-8 mt-6"><h1 class="font-medium lg:text-3xl sm:text-2xl text-xl text-ambassador-blue">${ssrInterpolate($data.updateDetails[`title_${_ctx.$i18n.locale}`])}</h1><p class="xl:mt-5 mt-4 font-light lg:text-lg sm:text-base text-[#737373]">${($data.updateDetails[`content_${_ctx.$i18n.locale}`] ? $data.updateDetails[`content_${_ctx.$i18n.locale}`].replace(/\t/g, "    ").replace(/\r?\n/g, "<br>") : "") ?? ""}</p></div><!-- Pagination --><div class="xl:mt-12 mt-6 flex items-center justify-between gap-4">`);
    if ($data.prevUpdate) {
      _push(`<div class="flex items-center lg:gap-4 gap-3">`);
      _push(ssrRenderComponent(_component_router_link, {
        to: $options.updateHref($data.prevUpdate),
        class: "md:w-14 md:h-14 w-10 h-10 border border-[#CCCCCC] hover:border-ambassador-blue rounded-md flex items-center justify-center"
      }, {
        default: withCtx((_, _push2, _parent2, _scopeId) => {
          if (_push2) {
            _push2(`<span class="material-symbols-rounded text-ambassador-blue font-semibold md:text-2xl text-xl"${_scopeId}>${ssrInterpolate(_ctx.$i18n.locale === "en" ? "arrow_back" : "arrow_forward")}</span>`);
          } else {
            return [
              createVNode(
                "span",
                { class: "material-symbols-rounded text-ambassador-blue font-semibold md:text-2xl text-xl" },
                toDisplayString(_ctx.$i18n.locale === "en" ? "arrow_back" : "arrow_forward"),
                1
                /* TEXT */
              )
            ];
          }
        }),
        _: 1
        /* STABLE */
      }, _parent));
      _push(`<div class="text-start md:block hidden"><p class="text-[#737373] text-sm">${ssrInterpolate(_ctx.$t("Previous post"))}</p><p class="mt-1 text-ambassador-blue font-medium md:text-base text-sm">${ssrInterpolate($data.prevUpdate[`title_${_ctx.$i18n.locale}`])}</p></div></div>`);
    } else {
      _push(`<!---->`);
    }
    if ($data.nextUpdate) {
      _push(`<div class="flex items-center lg:gap-4 gap-3 ms-auto"><div class="text-end md:block hidden"><p class="text-[#737373] text-sm">${ssrInterpolate(_ctx.$t("Next post"))}</p><p class="mt-1 text-ambassador-blue font-medium md:text-base text-sm">${ssrInterpolate($data.nextUpdate[`title_${_ctx.$i18n.locale}`])}</p></div>`);
      _push(ssrRenderComponent(_component_router_link, {
        to: $options.updateHref($data.nextUpdate),
        class: "md:w-14 md:h-14 w-10 h-10 border border-[#CCCCCC] hover:border-ambassador-blue rounded-md flex items-center justify-center"
      }, {
        default: withCtx((_, _push2, _parent2, _scopeId) => {
          if (_push2) {
            _push2(`<span class="material-symbols-rounded text-ambassador-blue font-semibold md:text-2xl text-xl"${_scopeId}>${ssrInterpolate(_ctx.$i18n.locale === "en" ? "arrow_forward" : "arrow_back")}</span>`);
          } else {
            return [
              createVNode(
                "span",
                { class: "material-symbols-rounded text-ambassador-blue font-semibold md:text-2xl text-xl" },
                toDisplayString(_ctx.$i18n.locale === "en" ? "arrow_forward" : "arrow_back"),
                1
                /* TEXT */
              )
            ];
          }
        }),
        _: 1
        /* STABLE */
      }, _parent));
      _push(`</div>`);
    } else {
      _push(`<!---->`);
    }
    _push(`</div></div><!-- Sub Updates --><div class="col-span-1 xl:order-2 order-1 flex flex-col gap-y-6"><!-- Search --><!-- <div class="bg-[#F1F3F7] rounded-md p-6">
          <p class="text-ambassador-blue font-medium md:text-2xl sm:text-xl text-lg leading-4">{{ $t('Search') }}</p>
          <div class="flex mt-4">
            <input type="text" name="search" id="search" placeholder="Type here..." class="outline-none px-4 rounded-s-md w-full">
            <button class="bg-ambassador-blue rounded-e-md">
              <span class="material-symbols-rounded text-white w-11 h-11 flex items-center justify-center font-light">search</span>
            </button>
          </div>
        </div> --><!-- Categories --><div class="bg-[#F1F3F7] rounded-md sm:p-6 p-4"><p class="text-ambassador-blue font-medium md:text-2xl sm:text-xl text-lg leading-4">${ssrInterpolate(_ctx.$t("Categories"))}</p><div class="flex flex-col sm:gap-3 gap-2 mt-4"><!--[-->`);
    ssrRenderList($data.categories, (category, index) => {
      _push(`<div>`);
      _push(ssrRenderComponent(_component_router_link, {
        to: category.updates && category.updates.length > 0 ? $options.updateHref(category.updates[0]) : "#",
        class: `flex items-center justify-between bg-white sm:px-5 px-4 py-3 rounded-[10px] w-full ${category.updates && category.updates.length > 0 ? "" : "pointer-events-none opacity-60"}`
      }, {
        default: withCtx((_, _push2, _parent2, _scopeId) => {
          var _a, _b;
          if (_push2) {
            _push2(`<div class="flex items-center sm:gap-2.5 gap-2"${_scopeId}><span class="material-symbols-outlined text-lg font-semibold text-blue-600 leading-6"${_scopeId}>${ssrInterpolate(_ctx.$i18n.locale === "en" ? "keyboard_double_arrow_right" : "keyboard_double_arrow_left")}</span><p class="text-ambassador-blue sm:text-lg font-medium leading-6"${_scopeId}>${ssrInterpolate(category[`name_${_ctx.$i18n.locale}`])}</p></div><p class="text-xs text-[#737373]"${_scopeId}>${ssrInterpolate("(" + ((_a = category.updates) == null ? void 0 : _a.length) + ")")}</p>`);
          } else {
            return [
              createVNode("div", { class: "flex items-center sm:gap-2.5 gap-2" }, [
                createVNode(
                  "span",
                  { class: "material-symbols-outlined text-lg font-semibold text-blue-600 leading-6" },
                  toDisplayString(_ctx.$i18n.locale === "en" ? "keyboard_double_arrow_right" : "keyboard_double_arrow_left"),
                  1
                  /* TEXT */
                ),
                createVNode(
                  "p",
                  { class: "text-ambassador-blue sm:text-lg font-medium leading-6" },
                  toDisplayString(category[`name_${_ctx.$i18n.locale}`]),
                  1
                  /* TEXT */
                )
              ]),
              createVNode(
                "p",
                { class: "text-xs text-[#737373]" },
                toDisplayString("(" + ((_b = category.updates) == null ? void 0 : _b.length) + ")"),
                1
                /* TEXT */
              )
            ];
          }
        }),
        _: 2
        /* DYNAMIC */
      }, _parent));
      _push(`</div>`);
    });
    _push(`<!--]--></div></div><!-- Recent Posts -->`);
    if ($data.recentPosts.length > 1) {
      _push(`<div class="bg-[#F1F3F7] rounded-md sm:p-6 p-4"><p class="text-ambassador-blue font-medium md:text-2xl sm:text-xl text-lg leading-4">${ssrInterpolate(_ctx.$t("Recent Posts"))}</p><div class="flex flex-col sm:gap-3 gap-2 mt-4"><!--[-->`);
      ssrRenderList($data.recentPosts.filter((item) => item.id !== $data.updateDetails.id), (post, index) => {
        _push(`<div><div class="bg-white flex rounded-md overflow-hidden"><div class="w-24 min-h-24 shrink-0"><img${ssrRenderAttr("src", post.image)} class="w-full h-full object-cover"${ssrRenderAttr("alt", post[`title_${_ctx.$i18n.locale}`])}></div><div class="py-2.5 px-3 w-full h-full"><p class="text-rainmaker text-sm font-light">${ssrInterpolate(new Date(post.created).toLocaleDateString(_ctx.$i18n.locale === "en" ? "en-GB" : "ar-EG", { day: "2-digit", month: "short", year: "numeric", numberingSystem: _ctx.$i18n.locale === "en" ? "latn" : "arab" }))}</p>`);
        _push(ssrRenderComponent(_component_router_link, {
          to: $options.updateHref(post),
          class: "text-ambassador-blue text-base font-medium mt-2 hover:text-blue-600 cursor-pointer"
        }, {
          default: withCtx((_, _push2, _parent2, _scopeId) => {
            if (_push2) {
              _push2(`${ssrInterpolate(post[`title_${_ctx.$i18n.locale}`])}`);
            } else {
              return [
                createTextVNode(
                  toDisplayString(post[`title_${_ctx.$i18n.locale}`]),
                  1
                  /* TEXT */
                )
              ];
            }
          }),
          _: 2
          /* DYNAMIC */
        }, _parent));
        _push(`</div></div></div>`);
      });
      _push(`<!--]--></div></div>`);
    } else {
      _push(`<!---->`);
    }
    _push(`</div></div>`);
  } else {
    _push(`<!---->`);
  }
  _push(`</div>`);
}
const _sfc_setup = _sfc_main.setup;
_sfc_main.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/views/UpdateDetailsPage.vue");
  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};
const UpdateDetailsPage = /* @__PURE__ */ _export_sfc(_sfc_main, [["ssrRender", _sfc_ssrRender]]);
export {
  UpdateDetailsPage as default
};
