<script setup>
import { VRow } from 'vuetify/lib/components/index.mjs';
const props = defineProps({
    state: {
        type: String,
        required: true,
    },
    patientName: {
        type: String,
        required: true,
    },
    selectedDate: {
        type: String,
        required: true,
    },
    scheduleDateFormate: {
        type: String,
        required: true,
    },
    timezone: {
        type: String,
        required: true,
    },
    selectTimeSlot: {
        type: String,
        required: true,
    },

})
</script>

<template>
    <VCol cols="12" lg="12" md="6">
        <h2 class="text-center mt-2"><span class="  badge badge-center rounded-pill bg-success p-0 me-2"><i
                    class="ti ti-check ti-xs"></i></span>
            Your Order is Complete
        </h2>
    </VCol>
    <div class="v-col v-col-12 text-center w-100">
        <img class="img-fluid text-center" src="assets/img/pages/7xm.xyz325616.jpg" alt="Medical Expert Image"
            style="width: 100%; max-height: 300px; object-fit: cover;">
    </div>

    <VCol cols="12">
        <VCardText>
            <p>We've emailed your order confirmation to you.</p>
            <p>When your hormone test kit ships, we'll notify you via email and text. We'll also send you appointment
                reminders via email and text before your online
                consultation.</p>
            <p><b>Please note that we charge a $59 fee for any missed appointments.</b></p>
            <p>If you need to reschedule or cancel, please do so at least 24 hours prior to your appointment. For
                questions,
                text Member Support at (243)-445-0088</p>
        </VCardText>

    </VCol>
    <VCol cols="12">

        <h2 class="text-center mt-2"><span class="  badge badge-center rounded-pill bg-success p-0 me-2"><i
                    class="ti ti-check ti-xs"></i></span>
            Your are Schedule
        </h2>
        <p class="text-center">A calendar invitation has been sent to your email address.</p>
        <VCardText class="rounded-0" style="display: flex; flex-direction: column; justify-content: space-between;">
            <h2 class="text-center">
                {{ state }} Video Consult
            </h2>

            <v-list class="align-self-center">
                <v-list-item>
                    <template v-slot:prepend>
                        <v-icon icon="tabler-users"></v-icon>
                    </template>
                    <v-list-item-title class="text-wrap">{{ patientName }}</v-list-item-title>
                </v-list-item>
                <v-list-item>
                    <template v-slot:prepend>
                        <v-icon icon="mdi-clock"></v-icon>
                    </template>
                    <v-list-item-title class="text-wrap">{{ selectTimeSlot }} , {{ scheduleDateFormate
                    }}</v-list-item-title>
                </v-list-item>
                <v-list-item>
                    <template v-slot:prepend>
                        <v-icon icon="mdi-clock"></v-icon>
                    </template>
                    <v-list-item-title class="text-wrap">{{ timezone }}</v-list-item-title>
                </v-list-item>
            </v-list>
        </VCardText>

        <VRow no-gutters>
            <VCol cols="12" lg="4" class="p-0 d-none d-md-block">
                <VCardText class="pb-0 px-0 position-relative h-100">
                    <VImg :src="'assets/img/pages/8c8b3766126753c6d098cdb2e42cff49.png'" height="147" width="300"
                        class="congo-john-img w-100" />
                </VCardText>
            </VCol>
            <VCol cols="12" lg="7" class="p-0">
                <VCardText>
                    <h6 class="text-lg text-no-wrap font-weight-medium">
                        Access Your HGH Member Portal Inside the portal,<br> you can access:
                    </h6>
                    <ul>
                        <li>
                            <v-list-item>
                                <v-list-item-content>
                                    <v-list-item-subtitle>Your treatment plan
                                    </v-list-item-subtitle>
                                </v-list-item-content>
                            </v-list-item>
                        </li>
                        <li>
                            <v-list-item>
                                <v-list-item-content>
                                    <v-list-item-subtitle>Medication refill status</v-list-item-subtitle>
                                </v-list-item-content>
                            </v-list-item>
                        </li>
                        <li>
                            <v-list-item>
                                <v-list-item-content>
                                    <v-list-item-subtitle> Billing information</v-list-item-subtitle>
                                </v-list-item-content>
                            </v-list-item>
                        </li>
                    </ul>
                </VCardText>
            </VCol>


        </VRow>
    </VCol>
    <VCol cols="12 mb-3" class="text-center">
        <RouterLink to="/overview">
            <VBtn> Access Member Portral</VBtn>
        </RouterLink>

    </VCol>
</template>
