<template>
  <div
    class="flex flex-col md:flex-row justify-between w-full thin pb-[25vw] md:pb-0"
  >
    <div class="w-full md:w-[36.667vw]">
      <div class="grid grid-cols-2 gap-3">
        <div
          class="h-[18.974vw] md:h-[5.469vw] bg-[#EFFAFE] rounded-[3.846vw] md:rounded-[0.781vw] flex items-center justify-between px-[2.051vw] md:px-[1.25vw]"
        >
          <div class="flex flex-col leading-[6.154vw] md:leading-[1.667vw]">
            <p
              class="text-[3.59vw] md:text-[1.055vw] font-[600] text-[#383E43]"
            >
           {{ roundDay }} روز
            </p>
            <p
              class="text-[2.836vw] md:text-[0.741vw] font-[400] text-[#383E43]"
            >
              سابقه عضویت
            </p>
          </div>
          <svg
            class="h-[7.692vw] md:h-[2.344vw] w-[7.692vw] md:w-[2.344vw]"
            viewBox="0 0 45 45"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M15 3.75V9.375"
              stroke="#66A0FF"
              stroke-width="3"
              stroke-miterlimit="10"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M30 3.75V9.375"
              stroke="#66A0FF"
              stroke-width="3"
              stroke-miterlimit="10"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M6.5625 17.0437H38.4375"
              stroke="#66A0FF"
              stroke-width="3"
              stroke-miterlimit="10"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M39.375 15.9375V31.875C39.375 37.5 36.5625 41.25 30 41.25H15C8.4375 41.25 5.625 37.5 5.625 31.875V15.9375C5.625 10.3125 8.4375 6.5625 15 6.5625H30C36.5625 6.5625 39.375 10.3125 39.375 15.9375Z"
              stroke="#66A0FF"
              stroke-width="3"
              stroke-miterlimit="10"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M22.4915 25.6875H22.5084"
              stroke="#66A0FF"
              stroke-width="4"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M15.5518 25.6875H15.5687"
              stroke="#66A0FF"
              stroke-width="4"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M15.5518 31.3125H15.5687"
              stroke="#66A0FF"
              stroke-width="4"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </div>

        <nuxt-link to="/account/my-courses"
          class="h-[18.974vw] md:h-[5.469vw] bg-[#F9F6FF] rounded-[3.846vw] md:rounded-[0.781vw] flex items-center justify-between px-2 md:px-6"
        >
          <div class="flex flex-col leading-[6.154vw] md:leading-[1.667vw]">
            <p
              class="text-[3.59vw] md:text-[1.055vw] font-[600] text-[#383E43]"
            >
            {{ myCourses.data.value.user.course.length }}  
            دوره
            </p>
            <p
              class="text-[2.836vw] md:text-[0.741vw] font-[400] text-[#383E43]"
            >
              دوره های من
            </p>
          </div>
          <svg
            class="h-[7.692vw] md:h-[2.344vw] w-[7.692vw] md:w-[2.344vw]"
            viewBox="0 0 45 45"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M23.4937 38.2875H11.6438C5.71875 38.2875 3.75 34.35 3.75 30.3937V14.6062C3.75 8.68124 5.71875 6.71249 11.6438 6.71249H23.4937C29.4187 6.71249 31.3875 8.68124 31.3875 14.6062V30.3937C31.3875 36.3187 29.4 38.2875 23.4937 38.2875Z"
              stroke="#A466FE"
              stroke-width="3"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M36.6 32.0625L31.3875 28.4063V16.575L36.6 12.9188C39.15 11.1375 41.25 12.225 41.25 15.3563V29.6438C41.25 32.775 39.15 33.8625 36.6 32.0625Z"
              stroke="#A466FE"
              stroke-width="3"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M21.5625 20.625C23.1158 20.625 24.375 19.3658 24.375 17.8125C24.375 16.2592 23.1158 15 21.5625 15C20.0092 15 18.75 16.2592 18.75 17.8125C18.75 19.3658 20.0092 20.625 21.5625 20.625Z"
              stroke="#A466FE"
              stroke-width="3"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </nuxt-link>
        <nuxt-link to="/account/tickets"
          class="h-[18.974vw] md:h-[5.469vw] bg-[#FFF7F4] rounded-[3.846vw] md:rounded-[0.781vw] flex items-center justify-between px-2 md:px-6"
        >
          <div class="flex flex-col leading-[6.154vw] md:leading-[1.667vw]">
            <p
              class="text-[3.59vw] md:text-[1.055vw] font-[600] text-[#383E43]"
            >
            {{ tickets?.data.value.result.length }}  
            تیکت
            </p>
            <p
              class="text-[2.836vw] md:text-[0.741vw] font-[400] text-[#383E43]"
            >
              تیکت ها
            </p>
          </div>
          <svg
            class="h-[7.692vw] md:h-[2.344vw] w-[7.692vw] md:w-[2.344vw]"
            viewBox="0 0 45 45"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M36.5625 23.4375C36.5625 20.85 38.6625 18.75 41.25 18.75V16.875C41.25 9.375 39.375 7.5 31.875 7.5H13.125C5.625 7.5 3.75 9.375 3.75 16.875V17.8125C6.3375 17.8125 8.4375 19.9125 8.4375 22.5C8.4375 25.0875 6.3375 27.1875 3.75 27.1875V28.125C3.75 35.625 5.625 37.5 13.125 37.5H31.875C39.375 37.5 41.25 35.625 41.25 28.125C38.6625 28.125 36.5625 26.025 36.5625 23.4375Z"
              stroke="#FFA766"
              stroke-width="3"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M18.75 7.5L18.75 37.5"
              stroke="#FFA766"
              stroke-width="3"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-dasharray="5 5"
            />
          </svg>
        </nuxt-link>
        <nuxt-link to="/account/wallet"
          class="h-[18.974vw] md:h-[5.469vw] bg-[#FEEFF6] rounded-[3.846vw] md:rounded-[0.781vw] flex items-center justify-between px-2 md:px-[1.25vw]"
        >
          <div class="flex flex-col leading-[6.154vw] md:leading-[1.667vw]">
            <p
              class="text-[3.59vw] md:text-[1.055vw] font-[600] text-[#383E43]"
            >
            {{ numberFormat(balance.data.value) }}  
            تومان
            </p>
            <p
              class="text-[2.836vw] md:text-[0.741vw] font-[400] text-[#383E43]"
            >
              کیف پول
            </p>
          </div>
          <svg
            class="h-[7.692vw] md:h-[2.344vw] w-[7.692vw] md:w-[2.344vw]"
            viewBox="0 0 45 45"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M33.825 25.4062C33.0375 26.175 32.5875 27.2812 32.7 28.4625C32.8688 30.4875 34.725 31.9687 36.75 31.9687H40.3125V34.2C40.3125 38.0812 37.1437 41.25 33.2625 41.25H11.7375C7.85625 41.25 4.6875 38.0812 4.6875 34.2V21.5813C4.6875 17.7 7.85625 14.5312 11.7375 14.5312H33.2625C37.1437 14.5312 40.3125 17.7 40.3125 21.5813V24.2813H36.525C35.475 24.2813 34.5188 24.6937 33.825 25.4062Z"
              stroke="#FF66AD"
              stroke-width="3"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M4.6875 23.2687V14.7001C4.6875 12.4688 6.05625 10.4812 8.1375 9.69374L23.025 4.06874C25.35 3.18749 27.8438 4.91255 27.8438 7.4063V14.5313"
              stroke="#FF66AD"
              stroke-width="3"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M42.2978 26.194V30.0566C42.2978 31.0879 41.4728 31.9316 40.4228 31.9691H36.7478C34.7228 31.9691 32.8665 30.4878 32.6978 28.4628C32.5853 27.2816 33.0353 26.1753 33.8228 25.4066C34.5165 24.6941 35.4728 24.2816 36.5228 24.2816H40.4228C41.4728 24.3191 42.2978 25.1628 42.2978 26.194Z"
              stroke="#FF66AD"
              stroke-width="3"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M13.125 22.5H26.25"
              stroke="#FF66AD"
              stroke-width="3"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </nuxt-link>
      </div>

      <div v-if="lastTickets?.length > 0" class="lastTickets mt-[20vw] md:mt-[2.917vw]">
        <div class="flex flex-col">
          <div class="flex justify-between items-center border-b pb-[0.733vw]">
            <p class="text-[4.038vw] md:text-[1.055vw] font-[500]">
              آخرین تیکت ها
            </p>
            <nuxt-link
              to="/account/tickets"
              class="text-[2.836vw] md:text-[0.741vw] flex"
            >
              همه ی تیکت ها
              <svg
                class="ms-[1.051vw] w-[4.103vw] md:w-[1.042vw]"
                viewBox="0 0 20 21"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M7.97501 5.44165L2.91667 10.5L7.97501 15.5583"
                  stroke="#0F3738"
                  stroke-width="1.5"
                  stroke-miterlimit="10"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M17.0833 10.5H3.05833"
                  stroke="#0F3738"
                  stroke-width="1.5"
                  stroke-miterlimit="10"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </nuxt-link>
          </div>
          <div
            v-for="ticket in lastTickets"
            :key="ticket.id"
            class="flex justify-between items-center mt-[1.25vw] px-2"
          >
            <p class="basis-2/6 text-[3.19vw] md:text-[0.833vw] text-[#000]">
              {{ ticket.subject }}
            </p>
            <p class="basis-2/6 text-[3.19vw] md:text-[0.833vw] text-[#878787]">
              {{ jDate(ticket.createdAt) }}
            </p>
            <nuxt-link
              to="/account/tickets"
              class=" flex justify-center items-center text-[2.518vw] md:text-[0.658vw] px-[2.564vw] md:px-[0.417vw] py-[2.051vw] md:py-[0.521vw] text-[#2ED573] bg-[#2ED5731A] rounded-[2.051vw] md:rounded-[0.521vw]"
            >
              مشاهده
            </nuxt-link>
          </div>
        
        </div>
      </div>

      <div v-if="lastCourses.length > 0" class="lastCources mt-[20vw] md:mt-[2.917vw] mb-8">
        <div class="flex flex-col">
          <div class="flex justify-between items-center border-b pb-[0.833vw]">
            <p class="text-[4.038vw] md:text-[1.055vw] font-[500]">
              آخرین دوره ها
            </p>
            <nuxt-link
              to="/account/my-courses"
              class="text-[2.836vw] md:text-[0.741vw] flex"
            >
              همه ی دوره های ثبت نام شده
              <svg
                class="ms-2 w-[4.103vw] md:w-[1.042vw] h-[4.103vw] md:h-[1.042vw]"
                viewBox="0 0 20 21"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M7.97501 5.44165L2.91667 10.5L7.97501 15.5583"
                  stroke="#0F3738"
                  stroke-width="1.5"
                  stroke-miterlimit="10"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M17.0833 10.5H3.05833"
                  stroke="#0F3738"
                  stroke-width="1.5"
                  stroke-miterlimit="10"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </nuxt-link>
          </div>

          <div
            class="grid grid-cols-1 md:grid-cols-2 mt-[3vw] md:mt-[1.25vw] gap-[3vw] md:gap-[1.25vw]"
          >
            <div v-for="item in lastCourses" :key="item.id">
              <ProgressCard :item="item" />
            </div>
   
          </div>
        </div>
      </div>
    </div>

    <nuxt-link to="/account/profile" class="w-full md:w-[23.385vw]">
      <div
        class="bg-white mb-[1.25vw] pinkShadow p-[5vw] md:p-[1.25vw] flex flex-col profile w-full md:w-[23.385vw] h-[70.872vw] md:h-[20.25vw] rounded-[3.846vw] md:rounded-[0.781vw] space-y-[7vw] md:space-y-[1.5vw]"
      >
        <div class="flex justify-between items-center mt-[1vw]">
          <p
            class="text-[4.038vw] md:text-[0.938vw] text-[#383E43] font-semibold"
          >
            پروفایل
          </p>
          <svg
            class="h-[6.154vw] md:h-[1.406vw] w-[6.154vw] md:w-[1.406vw]"
            viewBox="0 0 27 27"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M13.68 12.2287C13.5675 12.2175 13.4325 12.2175 13.3088 12.2287C10.6313 12.1387 8.505 9.945 8.505 7.245C8.505 4.48875 10.7325 2.25 13.5 2.25C16.2563 2.25 18.495 4.48875 18.495 7.245C18.4838 9.945 16.3575 12.1387 13.68 12.2287Z"
              stroke="#0D3F40"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M8.055 16.38C5.3325 18.2025 5.3325 21.1725 8.055 22.9837C11.1487 25.0537 16.2225 25.0537 19.3162 22.9837C22.0388 21.1612 22.0388 18.1913 19.3162 16.38C16.2337 14.3213 11.16 14.3213 8.055 16.38Z"
              stroke="#0D3F40"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </div>

        <div class="flex justify-center items-center flex-col mt-[1.823vw]">
          <img
          v-if="authUser.user.avatarMedia"
            :src="authUser.user.avatarMedia"
            class="h-[27.949vw] md:h-[7.24vw] w-[27.949vw] md:w-[7.24vw] rounded-full"
            alt=""
          />
          <img
          v-else
            src="/public/images/alt.png"
            class="h-[27.949vw] md:h-[7.24vw] w-[27.949vw] md:w-[7.24vw] rounded-full"
            alt=""
          />
          
          <p
            class="text-[4.038vw] md:text-[0.938vw] text-[#383E43] font-semibold mt-[1.25vw]"
          >
           {{ authUser.user.name ? authUser.user.name : 'کاربر مهمان' }}
          </p>
          <p
            class="font-[400] text-[3.19vw] md:text-[0.833vw] text-[#878787] mt-[0.417vw]"
          >
           {{ authUser.user.userName ?  authUser.user.userName + '@' : 'نام کاربری'}}
          </p>
        </div>

        <!-- <div class="flex justify-between mt-[2.083vw]">
          <svg
            class="w-[4.615vw] md:w-[1.25vw] h-[4.615vw] md:h-[1.25vw]"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M9 4.07998L15.52 10.6C16.29 11.37 16.29 12.63 15.52 13.4L9 19.92"
              stroke="#292D32"
              stroke-width="1.5"
              stroke-miterlimit="10"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
          <span
            class="text-[#383E43] text-[4.038vw] md:text-[0.938vw] font-[600]"
            >آذر</span
          >
          <svg
            class="h-[4.615vw] md:h-[1.25vw] w-[4.615vw] md:w-[1.25vw]"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M15 19.92L8.48 13.4C7.71 12.63 7.71 11.37 8.48 10.6L15 4.08002"
              stroke="#292D32"
              stroke-width="1.5"
              stroke-miterlimit="10"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </div> -->
        <!-- <div
          class="grid grid-cols-5 md:grid-cols-7 mt-[0.833vw] justify-center"
        >
          <div class="hidden md:flex flex-col items-center">
            <p
              class="text-[4.038vw] md:text-[0.938vw] w-[9.744vw] md:w-[1.979vw] h-[13.59vw] md:h-[1.927vw] font-[600] flex justify-center items-center"
            >
              18
            </p>
            <p
              class="text-[2.836vw] md:text-[0.585vw] font-[500] text-[#878787] pt-[0.833vw]"
            >
              سه شنبه
            </p>
          </div>
          <div class="flex flex-col items-center">
            <p
              class="text-[4.038vw] md:text-[0.938vw] w-[9.744vw] md:w-[1.979vw] h-[13.59vw] md:h-[1.927vw] font-[600] flex justify-center items-center"
            >
              17
            </p>
            <p
              class="text-[2.836vw] md:text-[0.585vw] font-[500] text-[#878787] pt-[0.833vw]"
            >
              دو شنبه
            </p>
          </div>
          <div class="flex flex-col items-center">
            <p
              class="text-[4.038vw] md:text-[0.938vw] w-[9.744vw] md:w-[1.979vw] h-[13.59vw] md:h-[1.927vw] font-[600] flex justify-center items-center"
            >
              16
            </p>
            <p
              class="text-[2.836vw] md:text-[0.585vw] font-[500] text-[#878787] pt-[0.833vw]"
            >
              یک شنبه
            </p>
          </div>

          <div class="flex flex-col items-center activeDay">
            <p
              class="bg-white rounded-full text-[4.038vw] md:text-[0.938vw] w-[10.333vw] md:w-[1.979vw] h-[10.282vw] md:h-[1.927vw] font-[600] flex justify-center items-center"
            >
              15
            </p>
            <p
              class="text-[2.836vw] md:text-[0.585vw] font-[500] text-[#878787] pt-[3vw] md:pt-[0.833vw] text-white"
            >
              شنبه
            </p>
          </div>

          <div class="flex flex-col items-center">
            <p
              class="text-[4.038vw] md:text-[0.938vw] w-[9.744vw] md:w-[1.979vw] h-[13.59vw] md:h-[1.927vw] font-[600] flex justify-center items-center"
            >
              14
            </p>
            <p
              class="text-[2.836vw] md:text-[0.585vw] font-[500] text-[#878787] pt-[0.833vw]"
            >
              جمعه
            </p>
          </div>
          <div class="flex flex-col items-center">
            <p
              class="text-[4.038vw] md:text-[0.938vw] w-[9.744vw] md:w-[1.979vw] h-[13.59vw] md:h-[1.927vw] font-[600] flex justify-center items-center"
            >
              13
            </p>
            <p
              class="text-[2.836vw] md:text-[0.585vw] font-[500] text-[#878787] pt-[0.833vw]"
            >
              پنج شنبه
            </p>
          </div>
          <div class="hidden md:flex flex-col items-center">
            <p
              class="text-[4.038vw] md:text-[0.938vw] w-[9.744vw] md:w-[1.979vw] h-[13.59vw] md:h-[1.927vw] font-[600] flex justify-center items-center"
            >
              12
            </p>
            <p
              class="text-[2.836vw] md:text-[0.585vw] font-[500] text-[#878787] pt-[0.833vw]"
            >
              چهار شنبه
            </p>
          </div>
        </div> -->
      </div>
    </nuxt-link>
  </div>
</template>


<script setup>
 const tickets = await useFetch("/api/ticket/getTickets");
  const lastTickets = tickets?.data?.value.result.slice(-2);
const myCourses = await useFetch("/api/auth/me");

const lastCourses = myCourses.data?.value.com.slice(-2);
const  balance = await useFetch("/api/user/balance");
const { authUser } = useAuth();

const today = new Date(); // تاریخ امروز
const pastDate = new Date(authUser.value.user.createdAt); // تاریخ گذشته

// تفاوت زمانی را محاسبه می‌کنیم
const timeDifference = today.getTime() - pastDate.getTime();

// تبدیل میلی‌ثانیه به روز
const dayDifference = timeDifference / (1000 * 3600 * 24);
const roundDay = Math.ceil(dayDifference)



definePageMeta({
  middleware: "auth",
});
</script>



<style scoped>
.activeDay {
  background: linear-gradient(0deg, #0e8789 0%, rgba(34, 164, 166, 0.8) 100%);
  width: 2.917vw;
  height: 4.479vw;
  border-radius: 1.563vw;
  padding-top: 0.313vw;
}

@media (max-width: 768px) {
  .activeDay {
    background: linear-gradient(0deg, #0e8789 0%, rgba(34, 164, 166, 0.8) 100%);
    width: 16.333vw;
    height: 25.282vw;
    border-radius: 7.692vw;
    padding-top: 3vw;
  }
}
</style>