<template>
  <main>
    <!-- <div class="bg-black">
      <CarouselProducts :data="banner.data" />
    </div> -->

    <div class="">
      <SwiperBanner :data="banner.data" />
    </div>

    <div v-for="(item, index) in categories.data" :key="index" :id="item.id" :class="['', getBackgroundClass(index)]" :style="getBackgroundStyle(index)">
      <div class="container mx-auto p-5">
        <div class="grid lg:grid-cols-2 gap-8 lg:mt-16 mt-8">
          <div data-aos="fade-right">
            <div class="lg:text-4xl text-3xl py-3 font-bold">
              {{ item.name }}
            </div>
            <p class="mt-3 lg:text-xl md:text-xl text-sm" :class="{ 'text-slate-400': index === 0 }" v-html="item.description"></p>
          </div>
        </div>

        <div class="grid lg:grid-cols-4 md:grid-cols-3 gap-10 lg:my-24 mt-8 lg:px-0 md:p-0 px-0">
          <div v-for="product in item.products" :key="product.id">
            <div :class="['', getCardClass(index)]" style="box-shadow: 0px 8px 31px #00000029">
              <div>
                <div class="" :title="stripHtmlTags(product.description)">
                  <img :src="product.thumbnail" class="mx-auto lg:w-full md:w-52 w-60 h-52 object-scale-down rounded" />
                </div>
                <div class="text-card pb-7 lg:mt-3 md:mt-3 px-5">
                  <div class="flex w-full justify-center items-center h-[60px]">
                    <p class="lg:text-xl md:text-xl text-lg font-bold text-[#273A97]" :title="stripHtmlTags(product.description)">
                      {{ product.name }}
                    </p>
                  </div>

                  <p class="text-sm text-[#959595] line-clamp-2" :title="stripHtmlTags(product.description)" v-html="product.description"></p>
                </div>
                <div class="relative justify-center text-center">
                  <div v-on:click="toggleBuyHere(product)" class="cursor-pointer relative bg-[#EC2029] text-white rounded-full w-[10rem] mx-auto" :class="['', getButtonBuyClass(index)]">
                    <div class="lg:px-8 lg:py-2 px-6 py-2 lg:text-sm md:text-sm text-sm" :class="['', getTextBuyClass(index)]">
                      {{ translate("Buy") }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Pop Up Buy Here -->
            <div>
              <div v-if="showBuyHere" class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
                <div class="absolute mx-10 w-full h-full opacity-50" @click="closeBuyHere()"></div>
                <div class="relative w-auto my-6 mx-5 max-w-4xl">
                  <div class="border-0 mx-auto rounded-[30px] shadow-lg relative flex flex-col lg:w-80 w-full bg-white outline-none focus:outline-none">
                    <div class="relative p-4 flex-auto">
                      <div class="absolute right-6 top-4 items-center justify-center">
                        <!-- Close Button -->
                        <button @click="closeBuyHere()" class="text-gray-500 hover:text-gray-700 focus:outline-none">
                          <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="M6 18L18 6M6 6l12 12" />
                          </svg>
                        </button>
                      </div>
                      <div class="text-center pt-6 pb-3 mt-3">
                        <img :src="currentLink.thumbnail" class="mx-auto lg:w-full md:w-52 w-60 h-52 object-scale-down rounded" />
                        <p class="lg:text-xl md:text-xl text-lg font-bold text-[#273A97]">{{ currentLink.name }}</p>
                        <p class="text-sm text-[#959595] mb-4">{{ stripHtmlTags(currentLink.description) }}</p>
                        <p class="lg:text-xl md:text-xl text-lg font-bold text-gray-900">Buy Here</p>
                      </div>
                      <div class="flex flex-col space-y-5 justify-center items-center pb-5">
                        <div>
                          <a :href="currentLink.url_shopee" target="_blank">
                            <img src="/icon/shopee.png" alt="Shopee" class="w-40" />
                          </a>
                        </div>
                        <div>
                          <a :href="currentLink.url_tokopedia" target="_blank">
                            <img src="/icon/tokped.png" alt="Tokopedia" class="w-40" />
                          </a>
                        </div>
                        <div>
                          <a :href="currentLink.url_tiktok" target="_blank">
                            <img src="/icon/tiktok.png" alt="Tiktok" class="w-40" />
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-if="showBuyHere" class="opacity-50 fixed inset-0 z-40 bg-black bg-opacity-25"></div>
            </div>
            <!-- Pop Up Buy Here -->
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script setup>
import { useFetch } from "nuxt/app";
import { useLanguageStore } from "~/stores/lang";
const appConfig = useAppConfig();

const languageStore = useLanguageStore;

const { data: banner } = await useFetch(appConfig.api.url + "/api/banner-product", {
  method: "GET",
});

const { data: categories } = await useFetch(appConfig.api.url + "/api/category?include=products&lang=" + languageStore().activeLang.value, {
  method: "GET",
  headers: {
    "Accept-Language": languageStore().activeLang.value,
  },
});

const showBuyHere = ref(false);
const currentLink = ref(null);

function toggleBuyHere(link) {
  showBuyHere.value = !showBuyHere.value;
  currentLink.value = link;
}
function closeBuyHere() {
  showBuyHere.value = false;
  currentLink.value = null;
}

const getBackgroundClass = (index) => {
  if (index < 1) {
    return "text-black";
  }

  return index % 2 === 0 ? "bg-arirang-blue text-white" : "bg-arirang-red text-white";
};

const getBackgroundStyle = (index) => {
  if (index === 0) {
    return {
      backgroundImage: 'url("/images/bg_kecil.svg")',
      backgroundSize: "cover",
      backgroundPosition: "center",
      backgroundRepeat: "no-repeat",
    };
  }
  return {};
};

const getButtonBuyClass = (index) => {
  return index % 2 === 0 ? "button-highlight-home" : "button-buy";
};

const getTextBuyClass = (index) => {
  return index % 2 === 0 ? "text-highlight-home" : "text-buy";
};

const getCardClass = (index) => {
  return index < 1 ? "card-cooking-series bg-white align-center justify-between text-center rounded-[30px] px-2 py-4" : "card-noodle shadow-lg bg-white relative justify-center items-center mx-auto rounded-[30px] px-2 py-4";
};

function translate(params) {
  return languageStore().translateWords(params);
}

const stripHtmlTags = (html) => {
  const temp = document.createElement("div");
  temp.innerHTML = html;
  return temp.textContent || temp.innerText || "";
};
</script>

<style>
.card-cooking-series {
  &:hover {
    transition: all 0.3s ease-out;
    transform: scale(1.1);

    /* padding-bottom: 30px; */
    & .text-highlight-home {
      color: white;
    }

    & .button-highlight-home {
      background-position: left bottom;
    }

    /* & .text-card {
      padding-bottom: 20px;
      transition: padding-bottom 1s;
    } */
  }
}

.button-highlight-home {
  border-radius: 50px;
  display: block;
  background: linear-gradient(to right, #273a97 50%, #ec1f29 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all 0.3s ease-out;
}

.button-highlight-home:hover {
  background-position: left bottom;
}

.text-highlight-home {
  text-align: center;
  color: white;
  transition: all 0.6s ease-out;
  display: block;
}

.text-highlight {
  text-align: center;
  font-size: 16px;
  color: white;
  padding: 2px 6px;
  transition: all 0.6s ease-out;
  display: block;
}

.text-highlight-home:hover {
  color: white;
}

.card-rice-noodle {
  border-radius: 30px;
  transition: all 0.3s ease-out;

  & .img-rice-noodle {
    transition: all 0.3s ease-out;
  }

  &:hover {
    border-top-left-radius: 200%;
    border-top-right-radius: 200%;
    border-bottom-left-radius: 35%;
    border-bottom-right-radius: 35%;
    transition: all 0.3s ease-out;

    & .text-rice-series {
      transition: all 0.3s ease-out;
      margin-top: 20px;
    }

    & .button-highlight-home {
      background-position: left bottom;
    }

    & .text-highlight-home {
      color: white;
    }

    & .img-rice-noodle {
      transform: scale(1.2);
      transition: all 0.3s ease-out;
      margin-top: -30px;
      margin-bottom: 20px;
    }
  }
}

.button-buy {
  border-radius: 50px;
  display: block;
  background: linear-gradient(to right, #273a97 50%, #f7ff00 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all 0.5s ease-out;
}

.button-buy:hover {
  background-position: left bottom;
}

.text-buy {
  text-align: center;
  color: black;
  font-weight: bold;
  transition: all 0.6s ease-out;
  display: block;
}

.text-buy:hover {
  color: white;
}

.card-noodle {
  border-radius: 30px;
  transition: all 0.3s ease-out;

  & img {
    transition: all 0.3s ease-out;
  }

  &:hover {
    border-top-left-radius: 45%;
    border-top-right-radius: 45%;
    transition: all 0.3s ease-out;

    & img {
      transform: scale(1.1);
      transition: all 0.3s ease-out;
    }

    & .button-buy {
      background-position: left bottom;
    }

    & .text-buy {
      color: white;
    }

    & .text-highlight-home {
      color: white;
    }

    & .button-highlight-home {
      background-position: left bottom;
    }
  }
}
</style>
