<script setup>
import axios from '@axios';
import { onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()// Assuming mobile width is less than or equal to 768px
const patient_id = localStorage.getItem('patient_id')
const access_token = localStorage.getItem('access_token');
const isLoadingVisible = ref(false)
const firstName = ref('')
const lastName = ref('')
const email = ref('')
const phone = ref('')
const planName = ref('')
const planAmount = ref('')
const planList = ref([])
const plansubTitle = ref('')
const currentPath = window.location.origin
onMounted(async () => {
    await getPatientInfo()
    await getPlanInfo()
})

const getPatientInfo = async () => {

    console.log()
    isLoadingVisible.value = true;
    await axios.post('/api/get-patient-detail/' + patient_id, {
        headers: {
            'Authorization': `Bearer ${access_token}`,
        }
    })
        .then(response => {
            console.log('Response:', response.data);
            if (response.data) {
                var patientdata = response.data.patient
                firstName.value = patientdata.first_name
                lastName.value = patientdata.last_name
                email.value = patientdata.email
                phone.value = patientdata.phone_no
                isLoadingVisible.value = false;
            } else {
                isLoadingVisible.value = false;
            }
        })
        .catch(error => {
            isLoadingVisible.value = false;
            console.log('Error:', error);
        });
}

const getPlanInfo = async () => {

    console.log()
    isLoadingVisible.value = true;
    await axios.post('/api/get-plan-by-patient/' + patient_id, {
        headers: {
            'Authorization': `Bearer ${access_token}`,
        }
    })
        .then(response => {
            console.log('Response:', response.data);
            if (response.data) {
                let planData = response.data
                console.log('plan ', planData)
                planList.value = planData
                planName.value = planData.title
                planAmount.value = planData.price
                isLoadingVisible.value = false;
            } else {
                isLoadingVisible.value = false;
            }
        })
        .catch(error => {
            isLoadingVisible.value = false;
            console.log('Error:', error);
        });
}
const imageSrc = (src) => {
    console.log(`${currentPath}/product/${src}`)
    return `${currentPath}/product/${src}`
};
</script>

<template>
    <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>
    <VRow>

        <VCol cols="12" md="9" v-for="plan in planList" :key="plan.id">
            <v-card class="mx-auto">

                <v-img :src='imageSrc(plan.image_url)' height="200px" class="membershipImage" cover
                    style="width:auto"></v-img>

                <v-card-subtitle class="mt-4">
                    {{ plan.title }} Status: Active
                </v-card-subtitle>
                <v-card-title>
                    {{ plan.list_sub_title }}
                </v-card-title>
                <VCardText class="ml-3">
                    <h3>{{ plan.list_one_title }}</h3>
                    <ul class="ml-5">
                        <li>{{ plan.list_two_title }}</li>

                    </ul>
                </VCardText>
                <VCardText>
                    <p> </p>
                    <p class="text-black">Your membership will start with your first medication purchase</p>
                </VCardText>

            </v-card>
        </VCol>
        <VCol cols="12" md="9" v-if="planName == 'Pro Plan'">
            <v-card class="mx-auto">
                <v-img :src="'/assets/images/pro_plan.jpg'" height="200px" cover></v-img>
                <v-card-subtitle class="mt-4">
                    TRT Membership Status: Active
                </v-card-subtitle>
                <v-card-title>
                    Testosterone Replacement Therapy For Men
                </v-card-title>
                <VCardText class="ml-3">
                    <h3>Membership Benifits Overview</h3>
                    <ul class="ml-5">
                        <li>Customized treatment based on your specific needs and health status.</li>
                        <li>Ongoing monitoring and adjustments by your healthcare provider to ensure safety and
                            effectiveness.</li>
                        <li>Consistent supply of necessary medications.</li>
                        <li>Access to specialized testosterone formulations.</li>
                        <li>Coordinated care and clinical oversight from your provider.</li>
                    </ul>
                </VCardText>
                <VCardText>
                    <p>The main advantages of a Pro Plan are the personalized, supervised, and sustainable approach to
                        managing low testosterone, which can lead to better outcomes compared to self-management.</p>
                    <p class="text-black">Your membership will start with your first medication purchase</p>
                </VCardText>

            </v-card>
        </VCol>
        <VCol cols="12" md="9" v-if="planName == 'Basic Plan'">
            <v-card class="mx-auto">
                <v-img :src="'/assets/images/basic_plan.jpg'" height="200px" cover></v-img>
                <v-card-subtitle class="mt-4">
                    Membership Status: Active
                </v-card-subtitle>
                <v-card-title>
                    Weight Loss
                </v-card-title>
                <VCardText class="ml-3">
                    <h3>Membership Benifits Overview</h3>
                    <ul class="ml-5">
                        <li>Exclusive Access to Medical Weight Loss Experts</li>
                        <li>As a member, you'll have direct access to our team of nationally-recognized weight loss
                            physicians and nutritionists. Get personalized treatment plans, prescription medication
                            management, and ongoing virtual coaching from true experts.</li>
                        <li>We take a comprehensive, individualized approach. Your membership includes a full medical
                            evaluation, metabolic testing, body composition analysis, and personal counseling to design
                            the ideal program for your goals and lifestyle.</li>
                        <li>Physician-prescribed weight loss medications, lipotropic injections, appetite suppressants,
                            metabolic boosters, and high-quality supplements are included based on your custom treatment
                            plan.</li>
                        <li>Forget dieting on your own. Your membership provides tailored meal plans from registered
                            dietitians, along with customized exercise regimens created by certified fitness coaches.
                        </li>
                    </ul>
                </VCardText>
                <VCardText>
                    <p>At HGH, we take an integrative approach to weight loss that combines advanced science with
                        personalized support. Our programs are designed by leading medical experts and tailored to your
                        specific needs.

                        We focus on promoting safe, sustainable weight loss by optimizing hormone levels, boosting
                        metabolism, curbing cravings, and building better habits.</p>
                    <p class="text-black">Your membership will start with your first medication purchase</p>
                </VCardText>

            </v-card>
        </VCol>
        <VCol cols="12" md="3" v-for="plan in planList" :key="plan.id">
            <VCard class="auth-card pa-2 rounded-5">
                <div class="col-lg mb-md-0 mb-4">
                    <v-card-title class="headline text-center">
                        <h3 class="text-center text-capitalize mb-1 card-title text-wrap">{{ plan.title }}</h3>
                    </v-card-title>
                    <div class="d-flex justify-center pt-3 pb-3">
                        <div class="text-body-1 align-self-start font-weight-medium"> $ </div>
                        <h4 class="text-h2 font-weight-medium text-primary"
                            style="color: rgb(var(--v-theme-yellow)) !important">{{
        plan.price }}</h4>
                        <!-- <div class="text-body-1 font-weight-medium align-self-end"> /month </div> -->
                    </div>
                    <v-list lines="one">

                        <v-list-item color="primary" style="padding: 5px;">
                            <template v-slot:prepend>
                                <v-icon class="mb-0" color="rgb(var(--v-theme-yellow))" icon="mdi-check-circle"
                                    size="20"></v-icon>
                            </template>

                            <v-list-item-title text="">
                                {{ plan.list_one_title }}
                                <div class="text-wrap">
                                    <small>{{ plan.list_sub_title }}</small>
                                </div>
                            </v-list-item-title>
                        </v-list-item>
                        <v-list-item color="primary" style="padding: 5px;">
                            <template v-slot:prepend>
                                <v-icon class="mb-0" color="rgb(var(--v-theme-yellow))" icon="mdi-check-circle"
                                    size="20"></v-icon>
                            </template>

                            <v-list-item-title class="text-wrap">{{ plan.list_two_title }}</v-list-item-title>
                        </v-list-item>
                    </v-list>


                    <div class="text-center mb-2">
                        <v-btn class="btn btn-primary d-grid w-100 waves-effect waves-light" color="primary"
                            variant="flat">
                            Upgrade Plan
                        </v-btn>
                    </div>
                </div>
            </VCard>
        </VCol>
    </VRow>
</template>
<style lang="scss">
.membershipImage {
    background-image: url('@images/pages/membershipBanner.jpg');
    background-size: cover;
}

img.v-img__img.v-img__img--cover {
    width: auto;
}
</style>
