<script setup>
import StartOverPupup from '@/views/pages/home/StartOverPupup.vue';
import axios from '@axios';
import { onBeforeMount, onMounted, onUnmounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
// import store from '../store.js';
const router = useRouter()
const route = useRoute()
const isMobile = ref(window.innerWidth <= 768); // Assuming mobile width is less than or equal to 768px
// const patient_id = localStorage.getItem('patient_id')
// const access_token = localStorage.getItem('access_token');
//import plans from '@/views/pages/products/peptied';
const currentPath = window.location.origin
const isTonalSnackbarVisible = ref(false)
const patientResponse = ref(false)
const isLoadingVisible = ref(false)
const infoVForm = ref()
const store = useStore()
const dialog = ref(false);
const selectedPlan = ref({});
const plans = ref([]);
const seetingPlanPage = ref({});
const seetingPlanPara = ref(null);
const seetingPlanLogo = ref();
const isConent = ref();
onBeforeMount(() => {
    store.dispatch('updateCurrentPage', 'plans')
    localStorage.setItem('currentPage', 'plans')
})
onMounted(async () => {
    const baseUrl = window.location.hostname;
    if (baseUrl === 'localhost') {
        isConent.value = 'd-block';
    } else {
        isConent.value = 'd-none';
    }
    // if (baseUrl == )
    console.log(route)
    const id = route.query.id
    const slug = route.query.slug
    if (slug && id) {
        let plansapi = await axios.post('/api/plans', {})
        plans.value = plansapi.data
        let getPlan = plans.value.find(plan => plan.id === parseInt(id) && plan.slug === slug)
        console.log(getPlan)
        localStorage.setItem('plan_name', getPlan.title)
        localStorage.setItem('plan_price', getPlan.price)
        localStorage.setItem('plan_id', getPlan.id)
        localStorage.setItem('list_one_title', getPlan.list_one_title)
        localStorage.setItem('list_sub_title', getPlan.list_sub_title)
        localStorage.setItem('list_two_title', getPlan.list_two_title)
        localStorage.setItem('plan_image', getPlan.image_url)
        localStorage.setItem('prescription_required', getPlan.is_prescription_required)
        localStorage.setItem('shipping_price', getPlan.shipping_cost)
        router.push('/pre-register');
    }
    isLoadingVisible.value = true
    console.log('Current Page', store.getters.getCurrentPage)

    let plansapi = await axios.post('/api/plans', {})

    plans.value = plansapi.data
    console.log(plans.value)
    let setting = await axios.post('/api/settings', {})
    seetingPlanPage.value = setting.data
    let para = seetingPlanPage.value.plan_description.replace(/\n/g, '<br>');
    console.log(para)
    seetingPlanPara.value = para
    seetingPlanLogo.value = '/assets/logo/' + setting.data.logo
    console.log(seetingPlanLogo.value)
    isLoadingVisible.value = false
    window.addEventListener('resize', checkIfMobile);
})
// Detach event listener on component unmount
onUnmounted(() => {
    window.removeEventListener('resize', checkIfMobile);
});

const checkIfMobile = () => {
    isMobile.value = window.innerWidth <= 768;
};
const openDialog = (plan) => {
    selectedPlan.value = plan;
    dialog.value = true;
};
const imageSrc = (src) => {
    console.log(`${currentPath}/product/${src}`)
    return `${currentPath}/product/${src}`
};
const choosePlan = async (plan, price, id) => {
    isLoadingVisible.value = true
    console.log('plan', plan)
    store.dispatch('updatePatientPlan', {
        plan_name: plan,
        plan_amount: price,
        plan_id: id
    })
    let getPlan = plans.value.find(plan => plan.id === parseInt(id))
    console.log(getPlan)
    localStorage.setItem('plan_name', plan)
    localStorage.setItem('plan_price', price)
    localStorage.setItem('plan_id', id)
    localStorage.setItem('list_one_title', getPlan.list_one_title)
    localStorage.setItem('list_sub_title', getPlan.list_sub_title)
    localStorage.setItem('list_two_title', getPlan.list_two_title)
    localStorage.setItem('plan_image', getPlan.image_url)
    router.replace(route.query.to && route.query.to != '/plans' ? String(route.query.to) : '/pre-register')

}
const formattedDescription = computed(async () => {

    return para
});

</script>

<template>
    <StartOverPupup :showPopup="store.getters.getShowStartOverPupup"></StartOverPupup>
    <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>
    <div class="pb-sm-5 rounded-top" :class="isConent">
        <VContainer>

            <div class="auth-wrapper d-flex align-center justify-center pa-4">
                <VCard class="auth-card pa-2 rounded-5" max-width="800">
                    <VCardItem class="justify-center">
                        <VCardTitle class="text-2xl font-weight-bold text-primary">
                            <VImg :src="seetingPlanLogo" width="250" height="50" />
                        </VCardTitle>
                    </VCardItem>
                    <VCardText>
                        <VRow class=" mx-0 gy-3 px-lg-5">
                            <VCol cols="12" md="12" class="pb-0">
                                <!-- 👉 Title and subtitle -->
                                <div class="text-center">
                                    <h4 class="text-h5 pricing-title mb-1">
                                        {{ seetingPlanPage.plan_main_title }}
                                    </h4>
                                    <p class="mb-3" v-html="seetingPlanPara"></p>

                                </div>
                            </VCol>

                            <v-row justify="center">

                                <v-col cols="12" md="10"
                                    class="d-flex align-center justify-space-between py-4 pl-4 rounded-lg border border-gray-200 elevation-0 my-2"
                                    v-for="plan in plans" :key="plan.id">


                                    <div class="d-flex align-center">
                                        <div class="align-self-flex-start">
                                            <v-img :src='imageSrc(plan.image_url)' max-width="120" max-height="120"
                                                class="thumbnail"
                                                style="overflow: hidden; flex-shrink: 0; flex-grow: 0"></v-img>

                                        </div>

                                        <div class="ml-8">

                                            <h3 class="text-h6 font-weight-semibold mb-0">{{ plan.title }}</h3>
                                            <span class="text-subtitle-1 font-weight-medium">{{ plan.currency }} {{
                                                plan.price
                                            }} -
                                                <a href="#" class="text-decoration-none text-primary"
                                                    @click.prevent="openDialog(plan)">More Info</a>
                                            </span>
                                        </div>
                                    </div>
                                    <div>
                                        <v-btn color="primary" variant="outlined"
                                            @click="choosePlan(plan.title, plan.price, plan.id)">
                                            <v-icon left>mdi-plus</v-icon>
                                            Book Now
                                        </v-btn>
                                    </div>
                                </v-col>
                            </v-row>

                            <v-dialog v-model="dialog" max-width="600px">
                                <v-card>
                                    <v-card-title class="headline">{{ selectedPlan.title }}</v-card-title>
                                    <v-card-text>
                                        <p><strong>{{ selectedPlan.list_sub_title }}</strong></p>
                                        <p>{{ selectedPlan.list_one_title }}</p>
                                        <p>{{ selectedPlan.list_two_title }}</p>
                                    </v-card-text>
                                    <v-card-actions>
                                        <v-spacer></v-spacer>
                                        <v-btn color="blue darken-1" text @click="dialog = false">Close</v-btn>
                                    </v-card-actions>
                                </v-card>
                            </v-dialog>


                            <!--
                    <VCol v-for="plan in plans.plans_list" :key="plan.title" cols="12" md="4">
                        <VCard class="auth-card  rounded-5" style="margin-top: 10px;">
                            <div class="col-lg mb-md-0 mb-4">
                                <v-card-title class="headline text-center">
                                    <h2 class="text-center text-capitalize mb-1 card-title">{{ plan.title }}</h2>
                                </v-card-title>
                                <div class="d-flex justify-center pt-3 pb-0">
                                    <div class="text-body-1 align-self-start font-weight-medium">
                                        {{ plan.currency }}
                                    </div>
                                    <h4 class="text-h2 font-weight-medium text-primary">{{ plan.price }}</h4>
                                </div>
                                <v-list lines="one">
                                    <v-list-item :title="plan.list_one_title"
                                        :subtitle="plan.list_sub_title"></v-list-item>
                                    <v-list-item :title="plan.list_two_title"></v-list-item>
                                </v-list>

                            </div>
                        </VCard>
                        <div class="text-center mb-2 mt-5">
                            <v-btn class="btn btn-primary d-grid w-100 waves-effect waves-light" color="primary"
                                variant="flat" @click="choosePlan(plan.title, plan.price)">
                                Choose
                            </v-btn>
                        </div>
                    </VCol> -->




                        </VRow>
                    </VCardText>
                </VCard>
            </div>

        </VContainer>
    </div>

</template>
<style lang="scss">
.card-title {
    font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

.v-list-item-title {
    white-space: inherit !important;
    ;
}

.thumbnail {
    object-fit: contain;
    overflow: hidden;
    flex-shrink: 0;
    flex-grow: 0;
}

.v-list {
    min-height: 220px;
}
</style>
