<template>
  <div class="pb-container py-[40px] flex justify-center gap-[10%]">
    <div class="bg-pale-100 w-full rounded-[20px] p-8 gap-6 grid lg:grid-cols-2">
      <div>
        <p class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900 mb-[48px]" v-text="pricingComponent.title"></p>
        <div class="flex flex-col divide-y divide-gray-200 px-6 bg-white rounded-lg md:rounded-2xl overflow-hidden">
          <div v-for="(price, index) in pricingComponent.data"
               class="relative w-full py-6">
            <a class="text-gray-900 cursor-pointer w-full inline-flex justify-between gap-1.5 items-center leading-[28px] font-semibold text-lg">
              <span class="hover:underline text-lg leading-[28px] text-gray-900" @click="toggle(index)">
                {{ price.title }}
              </span>
              <span class="min-w-[24px]">
                <Plus v-if="!show[index]"
                      class="w-6 h-6 cursor-pointer text-gray-400 hover:text-gray-700"
                      @click="toggle(index)"></Plus>
                <Minus v-else
                       class="w-6 h-6 cursor-pointer text-gray-400 hover:text-gray-700"
                       @click="toggle(index)"></Minus>
              </span>
            </a>
            <p v-if="show[index]" class="mt-2 text-gray-600 leading-[24px] all-unset ql-editor"
               v-html="price?.supporting_text"></p>
          </div>
        </div>
      </div>
      <div class="bg-white rounded-lg md:rounded-2xl overflow-hidden flex flex-col items-center justify-center py-8 px-12">
        <div v-if="paragraphComponent">
          <p class="text-[32px] font-semibold text-gray-900" v-text="paragraphComponent.title"></p>
          <p class="text-[18px]text-gray-600 mt-2" v-html="paragraphComponent.paragraph"></p>
        </div>
        <a v-if="paragraphComponent?.hasOwnProperty('button') && paragraphComponent.button.show" :href="paragraphComponent.button.url"
           class="mt-4 flex justify-center items-center w-full gap-2 px-3 py-2.5 rounded-full shadow-xs text-[16px] font-semibold text-white bg-brand-600 hover:bg-brand-700 border border-brand-600 text-center cursor-pointer"
        >
          {{ paragraphComponent.button.title }} <ArrowUpRight class="w-5 h-5"></ArrowUpRight>
        </a>
      </div>
    </div>
  </div>
</template>
<script setup>
import {ref, computed} from "vue";
import Plus from "@/assets/img/icons/plus-circle.svg";
import Minus from "@/assets/img/icons/minus-circle.svg";
import ArrowUpRight from "@/assets/img/icons/arrow-up-right.svg";
import "quill/dist/quill.snow.css";

const props = defineProps({
  section: {
    required: true,
    type: Object,
  },
});

const section = ref(props.section);
const show = ref([]);
const paragraphComponent = computed(() => {
  return section.value.components.find((component) => component.type === "paragraph");
});

const pricingComponent = computed(() => {
  return section.value.components.find((component) => component.type === "pricing");
});

pricingComponent.value.data.forEach((value, index) => {
  show.value[index] = false;
})

const toggle = (index) => {
  show.value[index] = !show.value[index];
};

</script>