<template>
  <Head>
    <Title v-if="article && article.data[0].category">{{ article.data[0].category }} | Arirang</Title>
    <Title>Arirang</Title>

    <Meta name="title" v-if="article && article.data[0].category" :content="article.data[0].category + ` | Arirang`" />

    <Meta name="description" v-if="article && article.data[0].title" :content="article.data[0].title" />

    <!-- <Meta
      property="og:title"
      v-if="article && article.data[0].category"
      :content="article.data[0].category + ` | Arirang`"
    />
    <Meta
      property="og:description"
      v-if="article && article.data[0].title"
      :content="article.data[0].title"
    />
    <Meta
      name="description"
      v-if="article && article.data[0].title"
      :content="article.data[0].title"
    />
    <Meta property="og:type" content="article" />
    <Meta
      property="og:image"
      v-if="article && article.data[0].thumbnail"
      :content="article.data[0].thumbnail"
    />
    <Meta
      property="og:image:secure_url"
      v-if="article && article.data[0].thumbnail"
      :content="article.data[0].thumbnail"
    />
    <Meta property="og:url" :content="urlArticle" />
    <Meta property="og:image:width" content="600" />
    <Meta property="og:image:height" content="600" /> -->
    <!-- <link rel="canonical" :href="urlArticle" /> -->
  </Head>
  <div class="recipe-page">
    <div class="relative h-[50vh] bg-cover bg-center bg-no-repeat" :style="{ backgroundImage: `url('${article.data[0].thumbnail}')` }">
      <!-- Black overlay with 0.5 opacity -->
      <div class="absolute inset-0 bg-black opacity-50"></div>

      <div class="absolute inset-0 lg:top-40 md:top-40 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 items-center justify-center text-white">
        <div class="recipe-info items-center text-center">
          <span class="recipe-tag text-sm">{{ article.data[0].category }}</span>
          <div class="lg:text-[36px] font-[Header] font-bold text-xl lg:mt-8 md:mt-2 mt-2 leading-10">
            {{ article.data[0].title }}
          </div>
          <p class="mt-7 text-sm">
            {{ formatDate(article.data[0].published_at) }}
          </p>
        </div>
      </div>

      <div class="absolute bottom-[-1px] right-0">
        <img src="/images/bg_curve.svg" class="w-full" />
      </div>
    </div>

    <div class="container mx-auto text-left">
      <div class="lg:mx-40 px-5 mt-3">
        <p class="text-center" v-html="article.data[0].preview"></p>

        <div class="flex justify-center mt-16 mb-10">
          <hr class="border-[#B4281B] border-b-2 w-40" />
        </div>

        <p v-html="article.data[0].body"></p>

        <div class="mt-10">
          <p>TAGS</p>
          <div class="lg:flex md:flex lg:space-x-2 md:space-x-2 lg:space-y-0 md:space-y-0 space-y-2 text-sm mt-2">
            <div v-for="item in article.data[0].tags" :key="item.tags" class="relative border border-[#A3A3A3] text-[#333333] px-6 rounded-full inline-block">
              <div class="lg:text-[16px] md:text-[16px] text-[10px]">
                {{ item }}
              </div>
            </div>
          </div>
        </div>

        <div class="flex items-center justify-between bg-[#EFEFEF] py-4 lg:px-8 px-8 rounded-[30px] border-2 border-[#EC1F29] mt-10" style="box-shadow: 0px 15px 0px 0px rgb(211 27 36)">
          <!-- Like button -->
          <div class="items-center space-x-2">
            <div class="items-center justify-center w-12 h-12" v-on:click="toggleLogin()">
              <img src="/icon/like_icon.svg" />
            </div>
            <p class="text-black text-[12px] pl-1 mt-2">Like</p>
          </div>

          <!-- Save and Share buttons -->
          <div class="flex space-x-5">
            <!-- Save button -->
            <div class="items-center space-x-2">
              <div class="items-center justify-center w-12 h-12" v-on:click="toggleLogin()">
                <img src="/icon/save_icon.svg" />
              </div>
              <p class="text-gray-700 text-[12px] mt-2">
                {{ translate("Save") }}
              </p>
            </div>
            <!-- Share button -->
            <div class="items-center space-x-2">
              <div v-on:click="unsecuredCopyToClipboard()" class="items-center justify-center w-12 h-12">
                <img src="/icon/share_icon.svg" />
              </div>
              <p v-on:click="unsecuredCopyToClipboard()" class="text-gray-700 text-[12px] mt-2">
                {{ translate("Share") }}
              </p>
            </div>
          </div>
        </div>
        <div class="mt-8 text-center">
          <p id="txt-copy" class="text-black text-[12px] mt-2" style="display: none">URL copied to clipboard!</p>
        </div>

        <!-- <div class="article-navigation mt-10">
          <div class="article prev">
            <img src="/icon/sample1.png" alt="Previous Article Image" class="lg:h-24 lg:w-24 w-12 h-12" />
            <div class="text">
              <small> {{ translate("Prev Article") }}</small>
              <h4 class="font-bold">Sample of the Title</h4>
            </div>
          </div>

          <div class="separator"></div>

          <div class="article next">
            <div class="text text-right">
              <small>{{ translate("Next Article") }}</small>
              <h4 class="font-bold">Sample of the Title</h4>
            </div>
            <img src="/icon/sample1.png" alt="Next Article Image" class="lg:h-24 lg:w-24 w-12 h-12" />
          </div>
        </div> -->
      </div>
    </div>

    <section class="image-grid-section lg:mt:20 md:mt-10 mt-8">
      <SectionConnectWithUs />
    </section>
  </div>

  <!-- Pop Up Login -->
  <div>
    <div v-if="showLogin" 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 bg-gray-900 opacity-50" v-on:click="closeLogin()"></div>
      <div class="relative w-auto my-6 mx-5 max-w-4xl">
        <div class="border-0 mx-auto rounded-[30px] shadow-lg relative w-[120vh] bg-white outline-none focus:outline-none">
          <div class="flex">
            <img src="/images/banner-login.webp" alt="Laptop on Desk" class="w-72 rounded-l-[30px]" />
            <div class="p-8 w-full">
              <div class="font-bold text-4xl mb-2">Login</div>
              <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

              <div class="flex items-center border border-[#EC1F297D] p-2 rounded-lg max-w-max mt-5">
                <img src="/icon/icon-google.png" class="w-4 h-4 mr-3" />
                <span class="text-sm">Signin with Google</span>
              </div>

              <div class="flex items-center my-5 w-full">
                <hr class="flex-grow border-t border-gray-300" />
                <span class="px-4 text-gray-500 text-[10px]">Or Use Your Email</span>
                <hr class="flex-grow border-t border-gray-300" />
              </div>

              <div class="mb-4">
                <label class="block text-gray-700 text-[12px] font-bold" for="username"> Email </label>
                <input class="appearance-none text-[10px] border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Write Your Email Here" />
              </div>
              <div class="mb-4">
                <div class="relative">
                  <label class="block text-gray-700 text-[12px] font-bold" for="password"> Password </label>
                  <input
                    :type="showPassword ? 'text' : 'password'"
                    id="password"
                    placeholder="Password"
                    class="appearance-none text-[10px] border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                  />
                  <!-- Eye Icon -->
                  <img :src="showPassword ? '/icon/icon-eye.svg' : '/icon/icon-eye.svg'" alt="Toggle Password" class="absolute right-4 top-8 transform -translate-y-1/2 cursor-pointer w-3" @click="togglePasswordVisibility" />
                </div>
                <div class="flex items-center justify-between mt-2">
                  <div class="sb-checkbox">
                    <div class="flex items-center">
                      <div>
                        <input checked type="checkbox" class="sb-checkbox__input" id="check2" name="check2" />
                        <label class="sb-checkbox__label sb-checkbox__label--red" for="check2"></label>
                      </div>
                      <div class="ms-2 text-[10px] font-medium text-[#959595]">Keep me logged in</div>
                    </div>
                  </div>
                  <div v-on:click="pageForgotpass()" class="text-[10px] text-[#EC1F29] cursor-pointer">Forgot Password?</div>
                </div>
              </div>

              <div class="rounded-full w-full bg-[#EC1F29] text-white py-2 text-[12px] text-center items-center">Login</div>

              <div class="pt-10">
                <span class="text-[10px] text-[#959595]">Dont't Have An Account?</span>
                <span class="text-[10px] text-[#EC1F29]" v-on:click="toggleSignUp()"> Signup</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showLogin" class="opacity-25 fixed inset-0 z-40 bg-black"></div>
  </div>
  <!-- Pop Up Login -->

  <!-- Pop Up SignUp -->
  <div>
    <div v-if="showSignUp" 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 bg-gray-900 opacity-50" v-on:click="closeSignUp()"></div>
      <div class="relative w-auto my-6 mx-5 max-w-4xl">
        <div class="border-0 mx-auto rounded-[30px] shadow-lg relative w-[120vh] bg-white outline-none focus:outline-none">
          <div class="flex">
            <img src="/images/banner-signup.png" alt="Laptop on Desk" class="w-72 rounded-l-[30px]" />
            <div class="p-8 w-full">
              <div class="font-bold text-4xl mb-2">Signup</div>
              <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

              <div class="flex items-center border border-[#EC1F297D] p-2 rounded-lg max-w-max mt-5">
                <img src="/icon/icon-google.png" class="w-4 h-4 mr-3" />
                <span class="text-sm">Signin with Google</span>
              </div>

              <div class="flex items-center my-5 w-full">
                <hr class="flex-grow border-t border-gray-300" />
                <span class="px-4 text-gray-500 text-[10px]">Or Use Your Email</span>
                <hr class="flex-grow border-t border-gray-300" />
              </div>

              <div class="mb-4">
                <label class="block text-gray-700 text-[12px] font-bold" for="username"> Email </label>
                <input class="appearance-none text-[10px] border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Write Your Email Here" />
              </div>
              <div class="mb-4">
                <div class="relative">
                  <label class="block text-gray-700 text-[12px] font-bold" for="password"> Password </label>
                  <input
                    :type="showPassword ? 'text' : 'password'"
                    id="password"
                    placeholder="Password"
                    class="appearance-none text-[10px] border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                  />
                  <!-- Eye Icon -->
                  <img :src="showPassword ? '/icon/icon-eye.svg' : '/icon/icon-eye.svg'" alt="Toggle Password" class="absolute right-4 top-8 transform -translate-y-1/2 cursor-pointer w-3" @click="togglePasswordVisibility" />
                </div>
                <div class="flex items-center justify-between mt-2">
                  <div class="sb-checkbox">
                    <div class="flex items-center">
                      <div>
                        <input checked type="checkbox" class="sb-checkbox__input" id="check2" name="check2" />
                        <label class="sb-checkbox__label sb-checkbox__label--red" for="check2"></label>
                      </div>
                      <div class="ms-2 text-[10px] font-medium text-[#959595]">I agree to the Terms of Service and Privacy Policy</div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="rounded-full w-full bg-[#EC1F29] text-white py-2 text-[12px] text-center items-center">Signup</div>

              <div class="pt-10">
                <span class="text-[10px] text-[#959595]">Already Have An Account?</span>
                <span class="text-[10px] text-[#EC1F29]" v-on:click="toggleLogin()"> Login</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showSignUp" class="opacity-25 fixed inset-0 z-40 bg-black"></div>
  </div>
  <!-- Pop Up SignUp -->
</template>

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

const languageStore = useLanguageStore;
const router = useRoute();
const slug = router.params.id;

const { data: article } = await useFetch(appConfig.api.url + "/api/articles/" + slug);

const formatDate = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleDateString("en-GB", {
    day: "2-digit",
    month: "long",
    year: "numeric",
  });
};
function unsecuredCopyToClipboard() {
  const text = window.location.href;
  const textArea = document.createElement("textarea");
  textArea.value = text;

  document.body.appendChild(textArea);
  textArea.select();

  try {
    document.execCommand("copy");
    //console.log("URL copied to clipboard");

    // Show the message
    const txtCopy = document.getElementById("txt-copy");
    txtCopy.style.display = "block";

    // Optionally hide the message after a delay
    setTimeout(() => {
      txtCopy.style.display = "none";
    }, 2000); // Adjust the time as needed
  } catch (err) {
    //console.error("Unable to copy to clipboard", err);
  }
  document.body.removeChild(textArea);
}

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

const showLogin = ref(false);

function toggleLogin() {
  showLogin.value = !showLogin.value;
  showSignUp.value = false;
}
function closeLogin() {
  showLogin.value = false;
}

const showSignUp = ref(false);

function toggleSignUp() {
  showSignUp.value = !showSignUp.value;
  showLogin.value = false;
}
function closeSignUp() {
  showSignUp.value = false;
}
function pageForgotpass() {
  route.push("/forgot-password");
  showLogin.value = false;
}
</script>

<script>
export default {
  data() {
    return {
      liked: false,
      likes: 1.3, // This represents 1.3K likes
      saved: false,
      urlArticle: "",
    };
  },
  head() {
    return {
      meta: [
        {
          hid: "title",
          name: "title",
          content: "This is a custom description for this page only",
        },
        {
          hid: "description",
          name: "description",
          content: "This is a custom description for this page only",
        },
        // Optional: OG tags
        {
          hid: "og:description",
          property: "og:description",
          content: "Custom description for social media sharing",
        },
        {
          hid: "og:image",
          property: "og:image",
          content: "/storage/FAXlaTqOiLkVgz8uomn5WQ5skymBL5KFfPd8KojM.jpg",
        },
        {
          hid: "og:type",
          property: "og:type",
          content: "Custom description for social media sharing",
        },
        {
          hid: "og:url",
          property: "og:url",
          content: "Custom description for social media sharing",
        },
      ],
    };
  },
  mounted() {
    this.urlArticle = window.location.href;
  },
  methods: {
    toggleLike() {
      this.liked = !this.liked;
      this.likes += this.liked ? 0.1 : -0.1; // Example increment/decrement
    },
    toggleSave() {
      this.saved = !this.saved;
    },
    shareContent() {
      alert("Share button clicked!");
    },
  },
};
</script>

<style scoped>
.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f9f9f9; /* Light gray background */
  padding: 15px;
  border-radius: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  border: 2px solid red;
  max-width: 600px;
  margin: 20px auto;
  position: relative;
}

/* Red rounded bottom bar */
.action-bar::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 15px;
  background-color: red;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}

/* Like, Save, and Share buttons */
.action-button {
  background-color: white;
  border: 2px solid red;
  border-radius: 15px;
  padding: 10px;
  font-size: 18px;
  color: red;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.action-button:hover {
  background-color: #f5f5f5;
}

.action span {
  margin-left: 5px;
  font-size: 12px;
  color: red;
}

/* Aligning Like button and count */
.like {
  display: flex;
  align-items: center;
}

.count {
  margin-left: 8px;
  font-size: 14px;
  color: black; /* Change color of the count */
}

/* Layout adjustments for save and share */
.save,
.share {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 10px;
}

.save span,
.share span {
  margin-top: 5px;
  font-size: 12px;
  color: black;
}

.header {
  position: relative;
}

.image-container {
  position: relative;
}

.hero-image {
  width: 100%;
  clip-path: ellipse(100% 80% at 50% 100%);
}

.recipe-info {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -30%);
  color: white;
  width: 60vw;
}

@media only screen and (max-width: 600px) {
  .recipe-info {
    width: 80vw;
  }
}

.recipe-title {
  font-weight: bold;
}

.mt-5 {
  font-size: 18px;
  margin: 10px 0;
}

.recipe-tag {
  display: inline-block;
  background-color: transparent;
  border: 1px solid white;
  color: white;
  padding: 5px 20px;
  border-radius: 50px;
}

.content {
  margin: 20px;
}

.recipe-description {
  font-size: 16px;
  color: #555;
}

.image-grid-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.image-item {
  flex: 1;
  padding: 10px;
}

.image-item img {
  width: 100%;
  border-radius: 10px;
}

.social-connect {
  text-align: left;
}

.social-connect h3 {
  margin-bottom: 10px;
}

.social-buttons {
  display: flex;
  gap: 10px;
}

.social-buttons button {
  border: none;
  padding: 7px 40px;
  font-size: 16px;
  cursor: pointer;
}

.newsletter-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.newsletter-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
}

.newsletter-form {
  display: flex;
  background-color: white;
  padding: 5px;
  border-radius: 40px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.newsletter-form input {
  border: none;
  padding: 10px 20px;
  border-radius: 40px;
  flex: 2;
  font-size: 16px;
  color: #8e8e8e;
  outline: none;
}

.newsletter-form button {
  background-color: #b83529;
  color: white;
  border: none;
  padding: 20px 20px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 16px;
  margin-left: 10px;
}

.newsletter-form button:hover {
  background-color: #a02d22;
}

.newsletter-form input::placeholder {
  color: #b8b8b8;
  font-size: 16px;
}

.article-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.article {
  display: flex;
  align-items: center;
  gap: 10px;
}

.article img {
  border-radius: 50%;
  object-fit: cover;
}

.text h4 {
  margin: 0;
  color: #2b3b9a; /* Adjust to your color needs */
}

.text small {
  display: block;
  color: #888;
}

.separator {
  width: 1px;
  height: 80px;
  background-color: #ddd;
}
</style>
