<template>
  <div class="recipe-page">
    <div
      class="relative h-[50vh] bg-cover bg-center bg-no-repeat"
      style="background-image: url(&quot;/images/banner-profile.png&quot;)"
    >
      <!-- Konten utama dengan z-20 -->
      <div
        class="absolute top-40 left-1/2 transform z-20 -translate-x-1/2 -translate-y-1/2 items-center justify-center text-white"
      >
        <div class="recipe-info items-center text-center z-20">
          <div class="bg-white rounded-[25px] p-8 w-80 shadow-lg relative">
            <img
              src="/icon/sample1.png"
              alt="Profile Picture"
              class="lg:h-24 lg:w-24 w-16 h-16 rounded-full mx-auto"
            />
            <div class="text-black mt-4">
              <h3 class="font-bold text-3xl text-[#273A97]">
                Antony Wicaksono
              </h3>
              <p class="text-gray-500 text-[14px]">antonywiu189@gmail.com</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Gambar curve di bawah dengan z-0 -->
      <div class="absolute bottom-0 left-0 right-0 z-0">
        <img src="/images/bg_curve.svg" class="w-full" />
      </div>
    </div>
  </div>

  <div class="container mx-auto text-left lg:mt-12 md:mt-12">
    <section class="overflow-auto">
      <div class="container mx-auto lg:px-72 px-6 pb-10">
        <!-- Tabs -->
        <div
          class="tabs flex lg:justify-between md:justify-center justify-center bg-white rounded-full p-3"
          style="box-shadow: 0px 8px 31px #00000029"
        >
          <!-- Tab 1 -->
          <div
            @click="setActiveTab('tab1')"
            :class="[
              'text-black text-sm font-semibold px-4 py-2 rounded-full hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 hover:text-white text-black',
              activeTab === 'tab1'
                ? 'bg-red-500 text-white'
                : 'bg-white text-black',
            ]"
          >
            VOUCHERS
          </div>
          <!-- Tab 2 -->
          <div
            @click="setActiveTab('tab2')"
            :class="[
              'text-sm font-semibold px-4 py-2 rounded-full hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 hover:text-white text-black',
              activeTab === 'tab2'
                ? 'bg-red-500 text-white'
                : 'bg-white text-black',
            ]"
          >
            BOOKMARKED ARTICLES
          </div>
          <!-- Tab 3 -->
          <div
            @click="setActiveTab('tab3')"
            :class="[
              'text-sm font-semibold px-4 py-2 rounded-full hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 hover:text-white text-black',
              activeTab === 'tab3'
                ? 'bg-red-500 text-white'
                : 'bg-white text-black',
            ]"
          >
            LIKED ARTICLES
          </div>
          <!-- Tab 4 -->
          <div
            @click="setActiveTab('tab4')"
            :class="[
              'text-sm font-semibold px-4 py-2 rounded-full hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 hover:text-white text-black',
              activeTab === 'tab4'
                ? 'bg-red-500 text-white'
                : 'bg-white text-black',
            ]"
          >
            SETTINGS
          </div>
        </div>
      </div>
    </section>
  </div>
  <!-- Tab Content -->
  <div>
    <div
      v-if="activeTab === 'tab1'"
      class="text-left lg:mt-8 md:mt-8 mt-5 lg:px-16 md:px-10"
    >
      <CardVoucher />
    </div>
    <div
      v-if="activeTab === 'tab2'"
      class="text-left lg:mt-8 md:mt-8 mt-5 lg:px-16 md:px-10"
    >
      <CardBookmark />
    </div>
    <div
      v-if="activeTab === 'tab3'"
      class="text-left lg:mt-8 md:mt-8 mt-5 lg:px-16 md:px-10"
    >
      <CardLikeArticle />
    </div>
    <div
      v-if="activeTab === 'tab4'"
      class="text-left lg:mt-8 md:mt-8 mt-5 lg:px-16 md:px-10"
    >
      <SectionSetting />
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { useRoute } from "vue-router";

const activeTab = ref("tab1");

// Akses route saat ini
const route = useRoute();

// Watch perubahan query parameter
watch(
  () => route.query.cat,
  (newCat) => {
    if (newCat === "setting") {
      setActiveTab("tab4");
    } else if (newCat === "voucher") {
      setActiveTab("tab1");
    } else if (newCat === "bookmark") {
      setActiveTab("tab2");
    } else {
      setActiveTab("tab3");
    }
  },
  { immediate: true }, // Jalankan watcher saat komponen di-mount
);

function setActiveTab(tab) {
  activeTab.value = tab;
  console.log(tab);
}
</script>

<script>
export default {
  data() {
    return {
      bookmarks: "N",
      buttonClicked: false,
      imageUrl:
        "http://127.0.0.1:8000/storage/PGL55FSTlT6zxrjHPPQI3Spdfoca20jmN92iOmBk.jpg",
      loaderForm: false,
    };
  },
  mounted() {
    this.updateArticles();
  },
  methods: {
    toggleVisibility(index) {
      this.images.forEach((image, i) => {
        image.isVisible = i === index ? !image.isVisible : false;
      });
    },
    updateArticles() {
      const tabs = document.querySelectorAll("[name=tab]");
      tabs.forEach((tab, i) => {
        if (tab.checked) {
          const contents = document.querySelectorAll(".content");
          contents.forEach((content, index) => {
            content.classList.remove("on");
            if (index === i) {
              content.classList.add("on");
            }
          });
        }
      });
    },
    // handleTabChange() {
    //   const tabTriggers = document.querySelectorAll(".tab-trigger");
    //   tabTriggers.forEach((trigger, i) => {
    //     trigger.addEventListener("click", () => {
    //       const index = Array.from(tabTriggers).indexOf(trigger);
    //       const tabs = document.querySelectorAll("[name=tab]");
    //       tabs[index].checked = true;
    //       const contents = document.querySelectorAll(".content");
    //       contents.forEach((content, idx) => {
    //         content.classList.remove("on");
    //         if (idx === index) {
    //           content.classList.add("on");
    //         }
    //       });
    //     });
    //   });
    // },
  },
};
</script>

<style>
#idspecify {
  display: none;
}
details {
  display: inline;
}

details {
  position: relative;
}
details summary {
  display: block;
  cursor: pointer;
}
details summary:focus {
  outline: none;
}
details[open] {
  display: block;
  padding-bottom: 25px;
  padding-top: 10px;
  animation: open 0.2s linear;
}
details[open] summary {
  position: absolute;
  bottom: 0;
  left: 0;
}

details #open {
  padding-left: 5px;
  text-align: middle;
}
details #open:after {
  display: inline-block;
  position: relative;
  top: -3px;
  padding-left: 8px;
  transform: rotate(90deg);
}
details[open] #open {
  display: none;
}
details #close {
  display: none;
}
details[open] #close {
  display: flex;
}

::-webkit-details-marker {
  display: none;
}

@keyframes open {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.tabs {
  display: flex;
  flex-wrap: wrap;
}
.tabs div {
  order: 1;
  display: block;
  cursor: pointer;
  transition: 0.2s;
}
.fromconnect {
  text-align: left;
}
.tabs .tab {
  order: 99;
  flex-grow: 1;
  width: 100%;
  display: none;
  padding-top: 10px;
}
.tabs input[type="radio"] {
  display: none;
}
.tabs input[type="radio"]:checked + .tab-trigger {
  font-weight: bold;
  border-bottom: 3px solid #ec3f35;
  color: #ec3f35;
}
.tabs input[type="radio"]:checked + div + .tab {
  display: block;
}
.alertt {
  display: none;
}
.bgfield {
  border: 1px solid red;
  background-color: #ffe3e3;
}
.alertCollaborate {
  display: none;
}
.bgfieldCollaborate {
  border: 1px solid red;
  background-color: #ffe3e3;
}

.bookmark {
  background-image: url("/images/simpan-2.png");
}
.bookmarked {
  background-image: url("/images/tersimpan.png");
}
::-webkit-scrollbar-thumb {
  background-color: #fff;
}

/* This will change the color of the scrollbar track */
::-webkit-scrollbar-track {
  background-color: #fff;
}

/* This will change the color of the scrollbar corner */
::-webkit-scrollbar-corner {
  background-color: #fff;
}

.simplebar-scrollbar::before {
  background-color: #fff;
}

/* Change the color of the scrollbar track */
.simplebar-track.simplebar-vertical {
  background-color: #fff;
}
ul li {
  list-style-type: disc;
}
ol li {
  list-style-type: decimal;
}
.content {
  display: none;
}

.content.on {
  display: block;
}
.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;
}

.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: rgb(12, 12, 12);
  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>
