<script setup>
import AnalyticsCongratulations from '@/views/dashboard/AnalyticsCongratulations.vue';
import axios from '@axios';
// import HeathCare from '@images/pages/healthcare-wellness-wellbeing-first-aid-box-word-graphic.jpg';
const isLoadingVisible = ref(false);
const loginuser = ref('');
const scheduleDate = ref('');
const scheduleTime = ref('');
const timeZone = ref('');
onMounted(() => {
  const patient_id = localStorage.getItem('patient_id')
  const access_token = localStorage.getItem('access_token');
  isLoadingVisible.value = true;
  axios.post('/api/agent-last-appointment-detail/' + patient_id, {
    headers: {
      'Authorization': `Bearer ${access_token}`,
    }
  })
    .then(response => {
      console.log('Response:', response.data);
      if (response.data) {
        let appointmentData = response.data.appointment
        let patientData = response.data.patient
        loginuser.value = patientData.first_name + ' ' + patientData.last_name;
        scheduleTime.value = appointmentData.appointment_time;
        timeZone.value = appointmentData.timezone;
        console.log(scheduleTime.value)
        const appointment_date = new Date(appointmentData.appointment_date);
        const formattedDate = new Intl.DateTimeFormat('en-US', {
          year: 'numeric',
          month: 'long',
          day: 'numeric',
        }).format(appointment_date);
        console.log('formattedDate', formattedDate)
        scheduleDate.value = formattedDate;
        isLoadingVisible.value = false;
      } else {
        isLoadingVisible.value = false;
      }

    })
    .catch(error => {
      // console.error('Error:', error);
    });

});
</script>

<template>
  <VRow>
    <VDialog v-model="isLoadingVisible" width="110" height="150" color="primary">
      <VCardText class="" style="color: white !important;">
        <div class="demo-space-x">
          <VProgressCircular :size="40" color="primary" indeterminate />
        </div>
      </VCardText>

    </VDialog>
    <VCol cols="12" md="12" color="error">
      <VCardTitle class="text-center">

        <b>Hi {{ loginuser }}</b>
        <p>You can access your order status, treatment plan, and product updates from HGH right here.</p>
      </VCardTitle>
    </VCol>

    <!-- 👉 Congratulations -->
    <VCol cols="12" lg="12" md="8">
      <VCardTitle class="text-wrap">Personalized treatment program <RouterLink to="/">
          <span>(See all)</span>
        </RouterLink>
      </VCardTitle>
      <AnalyticsCongratulations v-bind="{
        date: scheduleDate,
        time: scheduleTime,
        timezone: timeZone
      }" />
    </VCol>

    <!-- <VCol cols="12" sm="4">
      <VCardTitle>You might find fascinating.</VCardTitle>
      <VRow>

        <VCol cols="12" md="">
          <CardStatisticsVertical v-bind="{
            title: 'Hormone Therapy For Women is Here, Offering',
            image: HeathCare,
            content: 'improve libido, energy, fat loss, sleep and more!',
            subcontent: ''
          }" />
        </VCol>
      </VRow>
    </VCol> -->

    <!-- 👉 Total Revenue -->
    <!-- <VCol cols="12" md="8" order="2" order-md="1">
      <AnalyticsTotalRevenue />
    </VCol> -->

    <!-- <VCol cols="12" sm="8" md="4" order="1" order-md="2">
      <VRow>
         👉 Payments -->
    <!-- <VCol cols="12" sm="6">
          <CardStatisticsVertical v-bind="{
            title: 'Payments',
            image: paypal,
            stats: '$2,468',
            change: -14.82,
          }" />
        </VCol> -->

    <!-- 👉 Revenue -->
    <!-- <VCol cols="12" sm="6">
      <CardStatisticsVertical v-bind="{
        title: 'Transactions',
        image: card,
        stats: '$14,857',
        change: 28.14,
      }" />
    </VCol> -->
    <!-- </VRow> -->

    <!-- <VRow>
   
    <VCol cols="12" sm="12">
      <AnalyticsProfitReport />
    </VCol>
  </VRow> -->
    <!-- </VCol> -->

    <!-- 👉 Order Statistics -->
    <!-- <VCol cols="12" md="4" sm="6" order="3">
      <AnalyticsOrderStatistics />
    </VCol> -->

    <!-- 👉 Tabs chart -->
    <!-- <VCol cols="12" md="4" sm="6" order="3">
      <AnalyticsFinanceTabs />
    </VCol> -->

    <!-- 👉 Transactions -->
    <!-- <VCol cols="12" md="4" sm="6" order="3">
      <AnalyticsTransactions />
    </VCol> -->
  </VRow>
</template>
