<script setup>
import illustrationJohnDark from '@images/cards/illustration-john-dark.png';
import illustrationJohnLight from '@images/cards/illustration-john-light.png';
import { useTheme } from 'vuetify';
// const panelActive = ref(true);
const panel = ref(0)
onMounted(() => {
  // panelActive.value = true;
});
const props = defineProps({
  date: {
    type: String,
    required: true,
  },
  time: {
    type: String,
    required: true,
  },
  timezone: {
    type: String,
    required: true,
  },
})
const orders = ref([
  {
    icon: 'tabler-circle-check',
    type: 'SENDER',
    name: 'Myrtle Ullrich',
    address: '101 Boulder, California(CA), 95959',
  },
  {
    icon: 'tabler-map-pin',
    type: 'RECEIVER',
    name: 'Barry Schowalter',
    address: '939 Orange, California(CA),92118',
  },
]);
const { global } = useTheme()
const illustrationJohn = computed(() => global.name.value === 'dark' ? illustrationJohnDark : illustrationJohnLight)
</script>

<template>
  <VCard class="text-center text-sm-start">
    <VRow no-gutters>
      <VCol>

        <VExpansionPanels v-model="panel">
          <VExpansionPanel>
            <VExpansionPanelTitle variant="tonal" color="secondary">
              <span><b>TRT Lab Kit with a Virtual Provider Consultation.</b> <br><br>
                <p>{{ date }} Status: InProcess <br>
                </p>
                <p>Test Kit Tracking : <Routerview to="/"> To you</Routerview> / <Routerview to="/trt"> back to Lab
                  </Routerview>
                </p>
              </span>
            </VExpansionPanelTitle>
            <VExpansionPanelText>
              <VCardText>
                <VTimeline side="end" align="start" line-inset="8" truncate-line="both" density="compact">
                  <!-- SECTION Timeline Item: Flight -->
                  <VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">

                    <!-- 👉 Header -->
                    <div class="d-flex justify-space-between align-center gap-2 flex-wrap">
                      <span class="app-timeline-title">
                        <b>Medical History Form Completed</b><br><br>
                      </span>
                    </div>
                  </VTimelineItem>

                  <!-- !SECTION -->
                  <VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">
                    <!-- 👉 Header -->
                    <div class="d-flex justify-space-between align-center flex-wrap mb-1">
                      <div class="app-timeline-title">
                        <b>Online Consultation Scheduled</b><br><br>
                      </div>
                    </div>
                  </VTimelineItem>

                  <!-- SECTION Timeline Item: Interview Schedule -->
                  <VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">
                    <template #icon>
                      3
                    </template>
                    <!-- 👉 Header -->
                    <div class="d-flex justify-space-between align-center flex-wrap mb-1">
                      <div class="app-timeline-title">
                        <b>eClinic Schedule is Confirmed for {{ date }}</b>
                      </div>
                    </div>

                    <div class="d-flex justify-space-between align-center flex-wrap">
                      <!-- 👉 Avatar & Personal Info -->
                      <div class="d-flex align-center mt-2">
                        <div class="d-flex flex-column">
                          <p class="text-sm font-weight-medium text-high-emphasis mb-0">
                            Your virtual consultation with your HGH provider is set for {{ props.date }}, at {{
          props.time
        }}
                            , {{ props.timezone }}. On the appointment day, we will send you an email containing the
                            link
                            to join, along
                            with useful tips for preparation. If you have any inquiries or need to reschedule, feel free
                            to reach out via text at (223) 124-5533.
                          </p>
                        </div>

                      </div>
                      <VBtn class="mt-3" color="rgb(var(--v-theme-yellow))">Go to Meeting</VBtn>
                      <!-- 👉 Person Actions -->
                    </div>


                  </VTimelineItem>

                  <VTimelineItem dot-color="secondary" color="secondary" icon="tabler-check" size="small">
                    <template #icon>
                      4
                    </template>
                    <!-- <template #icon>
                      <VIcon size="20" icon="tabler-circle-check" color="error" />
                    </template> -->
                    <!-- 👉 Header -->
                    <div class="d-flex justify-space-between align-center flex-wrap mb-1">
                      <div>
                        <b>eClicnic Attented</b><br><br>
                      </div>
                    </div>
                  </VTimelineItem>
                  <VTimelineItem dot-color="secondary" color="secondary" icon="tabler-check" size="small">
                    <template #icon>
                      5
                    </template>
                    <!-- 👉 Header -->
                    <div class="d-flex justify-space-between align-center flex-wrap mb-1">
                      <div>
                        <b>Medication Ordered</b>
                      </div>
                    </div>
                  </VTimelineItem>
                  <VTimelineItem dot-color="secondary" color="secondary" icon="tabler-check" size="small">
                    <template #icon>
                      6
                    </template>
                    <!-- 👉 Header -->
                    <div class="d-flex justify-space-between align-center flex-wrap mb-1">
                      <div>
                        <b>Medication Shipped</b>
                      </div>
                    </div>
                  </VTimelineItem>
                  <VTimelineItem dot-color="secondary" color="secondary" icon="tabler-check" size="small">
                    <template #icon>
                      7
                    </template>
                    <!-- 👉 Header -->
                    <div class="d-flex justify-space-between align-center flex-wrap mb-1">
                      <div>
                        <b>Medication Delivered</b>
                      </div>
                    </div>
                  </VTimelineItem>
                  <!-- !SECTION -->
                </VTimeline>
              </VCardText>
            </VExpansionPanelText>
          </VExpansionPanel>

        </VExpansionPanels>
        <VCardTitle class="text-start">Latest Labs <RouterLink to="/">
            <span>(See all)</span>
          </RouterLink>
        </VCardTitle>
        <VExpansionPanels class="mt-2">
          <VExpansionPanel>
            <VExpansionPanelTitle variant="tonal" color="secondary">
              <span><b>TRT Lab Kit </b> <br><br>
                <p>{{ date }} Status: Ordered <br>
                </p>
                <p>Test Kit Tracking : <Routerview to="/"> To you</Routerview> / <Routerview to="/trt"> back to Lab
                  </Routerview>
                </p>
              </span>
            </VExpansionPanelTitle>
            <VExpansionPanelText>
              <h2 class="text-start">Results</h2>
              <VCardText>

                <VTimeline side="end" align="start" line-inset="8" truncate-line="both" density="compact">
                  <!-- SECTION Timeline Item: Flight -->

                  <VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">

                    <!-- 👉 Header -->
                    <div class="d-flex justify-space-between align-center gap-2 flex-wrap">

                      <span class="app-timeline-title">
                        <b>Ordered Hormone Test Kit</b><br><br>
                      </span>
                    </div>
                  </VTimelineItem>

                  <!-- !SECTION -->
                  <VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">
                    <!-- 👉 Header -->
                    <div class="d-flex justify-space-between align-center flex-wrap mb-1">
                      <div class="app-timeline-title">
                        <b>Shipped Hormone Test Kit</b><br><br>
                      </div>
                    </div>
                  </VTimelineItem>

                  <!-- SECTION Timeline Item: Interview Schedule -->
                  <VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">
                    <!-- 👉 Header -->
                    <div class="d-flex justify-space-between align-center flex-wrap mb-1">
                      <div class="app-timeline-title">
                        <b>Delivered Hormone Test Kit</b><br><br>
                      </div>
                    </div>
                  </VTimelineItem>

                  <VTimelineItem dot-color="rgb(var(--v-theme-yellow))" color="rgb(var(--v-theme-yellow))"
                    icon="tabler-check" size="small">
                    <template #icon>
                      4
                    </template>
                    <!-- <template #icon>
                      <VIcon size="20" icon="tabler-circle-check" color="error" />
                    </template> -->
                    <!-- 👉 Header -->
                    <div class="d-flex justify-space-between align-center flex-wrap mb-1 ">
                      <div>
                        <b>Hormone Test Kit in Transit</b><br><br>
                      </div>
                    </div>
                  </VTimelineItem>
                  <VTimelineItem dot-color="secondary" color="secondary" icon="tabler-check" size="small">
                    <template #icon>
                      5
                    </template>
                    <!-- 👉 Header -->
                    <div class="d-flex justify-space-between align-center flex-wrap mb-1">
                      <div>
                        <b>Lab Received Hormone Test Kit</b>
                      </div>
                    </div>
                  </VTimelineItem>
                  <VTimelineItem dot-color="secondary" color="secondary" icon="tabler-check" size="small">
                    <template #icon>
                      6
                    </template>
                    <!-- 👉 Header -->
                    <div class="d-flex justify-space-between align-center flex-wrap mb-1">
                      <div>
                        <b>Provider Reviewed Test Results</b>
                      </div>
                    </div>
                  </VTimelineItem>
                  <!-- !SECTION -->
                </VTimeline>
              </VCardText>
            </VExpansionPanelText>
          </VExpansionPanel>

        </VExpansionPanels>




      </VCol>
    </VRow>
  </VCard>
</template>

<style lang="scss" scoped>
.john-illustration {
  inset-block-end: -0.0625rem;
  inset-inline-end: 3rem;
}

.v-timeline .v-timeline-divider__inner-dot {
  background-color: white !important;
}

button.v-expansion-panel-title {
  background-color: rgb(var(--v-theme-yellow)) !important;
  color: #fff;
}

button.v-expansion-panel-title.bg-secondary {
  background-color: rgb(var(--v-theme-yellow)) !important;
  color: #fff;
}

button.v-expansion-panel-title {
  background-color: rgb(var(--v-theme-yellow)) !important;
  color: #fff;
}

button.v-expansion-panel-title.v-expansion-panel-title--active {
  background-color: rgb(var(--v-theme-yellow)) !important;
  color: #fff;
}

span.v-expansion-panel-title__icon {
  color: #fff
}
</style>
