<template>
  <div
    class="mt-[5vw] md:mt-[1vw] rounded-[0.781vw] bg-[#F8F8F8] pinkShadow p-[4vw] md:p-[1.3vw] space-y-[6vw] md:space-y-[0.4vw] thin"
  >
    <h2
      class="gap-[2vw] md:gap-[0.5vw] text-[3.59vw] md:text-[1.055vw] font-semibold flex items-center"
    >
      اطلاعات دوره

      <svg
        class="h-[4.359vw] md:h-[1.25vw] w-[4.359vw] md:w-[1.25vw]"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
          stroke="#0D3F40"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M12 8V13"
          stroke="#0D3F40"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M11.9946 16H12.0036"
          stroke="#0D3F40"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </h2>

    <div
      class="flexBox w-full flex-col text-[3.59vw] md:text-[0.938vw] text-[#878787]"
    >
      <div class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between">
        <p class="flex items-center gap-[0.8vw]">
          <svg
            class="h-[4.872vw] md:h-[1.25vw] w-[4.872vw] md:w-[1.25vw]"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12.53 20.42H6.21C3.05 20.42 2 18.32 2 16.21V7.78996C2 4.62996 3.05 3.57996 6.21 3.57996H12.53C15.69 3.57996 16.74 4.62996 16.74 7.78996V16.21C16.74 19.37 15.68 20.42 12.53 20.42Z"
              stroke="#878787"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M19.5202 17.1L16.7402 15.15V8.84001L19.5202 6.89001C20.8802 5.94001 22.0002 6.52001 22.0002 8.19001V15.81C22.0002 17.48 20.8802 18.06 19.5202 17.1Z"
              stroke="#878787"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M11.5 11C12.3284 11 13 10.3284 13 9.5C13 8.67157 12.3284 8 11.5 8C10.6716 8 10 8.67157 10 9.5C10 10.3284 10.6716 11 11.5 11Z"
              stroke="#878787"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
          تعداد ویدیو ها
        </p>
        <p class="text-[#383E43] font-semibold">
          {{ props?.props[0]?.countOfVideos }}
        </p>
      </div>
      <div class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between">
        <p class="flex items-center gap-[0.8vw]">
          <svg
            class="h-[4.872vw] md:h-[1.25vw] w-[4.872vw] md:w-[1.25vw]"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M9.31982 11.6801L11.8798 14.2401L14.4398 11.6801"
              stroke="#878787"
              stroke-width="1.5"
              stroke-miterlimit="10"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M11.8799 4V14.17"
              stroke="#878787"
              stroke-width="1.5"
              stroke-miterlimit="10"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M20 12.1801C20 16.6001 17 20.1801 12 20.1801C7 20.1801 4 16.6001 4 12.1801"
              stroke="#878787"
              stroke-width="1.5"
              stroke-miterlimit="10"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>

          حجم فایل ها
        </p>
        <p class="text-[#383E43] font-semibold">
          {{ props?.props[0]?.totalFileSize }} گیگابایت
        </p>
      </div>
      <div class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between">
        <p class="flex items-center gap-[0.8vw]">
          <svg
            class="h-[4.872vw] md:h-[1.25vw] w-[4.872vw] md:w-[1.25vw]"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M13.01 2.91995L18.91 5.53995C20.61 6.28995 20.61 7.52995 18.91 8.27995L13.01 10.8999C12.34 11.1999 11.24 11.1999 10.57 10.8999L4.67002 8.27995C2.97002 7.52995 2.97002 6.28995 4.67002 5.53995L10.57 2.91995C11.24 2.61995 12.34 2.61995 13.01 2.91995Z"
              stroke="#878787"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M3 11C3 11.84 3.63 12.81 4.4 13.15L11.19 16.17C11.71 16.4 12.3 16.4 12.81 16.17L19.6 13.15C20.37 12.81 21 11.84 21 11"
              stroke="#878787"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M3 16C3 16.93 3.55 17.77 4.4 18.15L11.19 21.17C11.71 21.4 12.3 21.4 12.81 21.17L19.6 18.15C20.45 17.77 21 16.93 21 16"
              stroke="#878787"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
          سطح دوره
        </p>
        <p class="text-[#383E43] font-semibold">{{ props?.props[0]?.level }}</p>
      </div>
      <div class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between">
        <p class="flex items-center gap-[0.8vw]">
          <svg
            class="h-[4.872vw] md:h-[1.25vw] w-[4.872vw] md:w-[1.25vw]"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
              stroke="#878787"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M8.0001 3H9.0001C7.0501 8.84 7.0501 15.16 9.0001 21H8.0001"
              stroke="#878787"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M15 3C16.95 8.84 16.95 15.16 15 21"
              stroke="#878787"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M3 16V15C8.84 16.95 15.16 16.95 21 15V16"
              stroke="#878787"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M3 8.99998C8.84 7.04998 15.16 7.04998 21 8.99998"
              stroke="#878787"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>

          زبان
        </p>
        <p class="text-[#383E43] font-semibold">
          {{ props?.props[0]?.language }}
        </p>
      </div>
      <div class="py-[3vw] md:py-[0.9vw] w-full border-b flex justify-between">
        <p class="flex items-center gap-[0.8vw] ps-[2vw]">سطح رضایت</p>
        <p class="text-[#383E43] font-semibold">
          {{ props?.props[0]?.satisfactionLevel }}
        </p>
      </div>

      <h2
        v-if="props?.props[0]?.price > 0"
        class="my-[5vw] md:my-[1.25vw] text-[4.544vw] md:text-[1.502vw] text-[#383E43] font-semibold flex items-center justify-end w-full gap-[0.5vw]"
      >
        {{ numberFormat(props?.props[0]?.price) }}
        <p class="text-[2.836vw] md:text-[0.741vw]">تومان</p>
      </h2>
      <h2
        v-else
        class="my-[5vw] md:my-[1.25vw] text-[4.544vw] md:text-[1.502vw] text-[#383E43] font-semibold flex items-center justify-end w-full gap-[0.5vw]"
      >
        رایگان
      </h2>
      <button
        class="greenButton h-[11.795vw] md:h-auto w-full flexBox text-[4.038vw] md:text-[1.055vw] rounded-[2.564vw] md:rounded-[0.521vw]"
        @click="paymentHandler(props?.props[0]._id)"
      >
        <svg
          class="h-[5.641vw] md:h-[1.458vw] w-[5.641vw] md:w-[1.458vw]"
          viewBox="0 0 28 28"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M11.7248 2.95171L4.70145 7.53671C2.44978 9.00671 2.44978 12.2967 4.70145 13.7667L11.7248 18.3517C12.9848 19.18 15.0614 19.18 16.3214 18.3517L23.3098 13.7667C25.5498 12.2967 25.5498 9.01837 23.3098 7.54837L16.3214 2.96338C15.0614 2.12338 12.9848 2.12338 11.7248 2.95171Z"
            stroke="white"
            stroke-width="2.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M6.56831 15.26L6.55664 20.7317C6.55664 22.2133 7.69997 23.8 9.09998 24.2667L12.8216 25.5033C13.4633 25.7133 14.525 25.7133 15.1783 25.5033L18.9 24.2667C20.3 23.8 21.4433 22.2133 21.4433 20.7317V15.3183"
            stroke="white"
            stroke-width="2.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M24.9668 17.5V10.5"
            stroke="white"
            stroke-width="2.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
        {{ props?.props[1] ? "مشاهده دوره" : "شرکت در دوره" }}
      </button>
    </div>
  </div>
</template>


<script setup>
import { useToast } from "vue-toastification";
const { authUser } = useAuth();
const props = defineProps(["props"], ["access"]);

const toast = useToast();
const router = useRouter();
const paymentHandler = async (id) => {
  if (authUser.value === null) {
    return router.push({
      path: "/login",
    });
  }
  try {
    const data = await useFetch("/api/user/registerCourse", {
      method: "POST",
      body: {
        courseId: id
      },
    });
    console.log(data?.data?.value?.paymentData?.redirectUrl);
    if (data?.data?.value?.payment?.authority === 'FREE') {
      toast.success("ثبت نام انجام شد");
      navigateTo('/account/my-courses')
    
    } else {
      location.href = data?.data?.value?.paymentData?.redirectUrl
    }
    // setTimeout(() => {
    //   location.reload();
    // }, 1000);
  } catch (error) {
    toast.error("خطا در برقراری ارتباط");
  }
};
</script>