<script setup>
import StartOverPupup from "@/views/pages/home/StartOverPupup.vue";
import axios from "@axios";
import moment from "moment";
import ProviderInfo from "../layouts/components/ProviderInfo.vue";
import CustomNav from '../layouts/components/navbar-custom.vue';
import { nextTick } from 'vue';

import { onBeforeMount, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
const store = useStore();
const router = useRouter();
const route = useRoute();
const isLoadingVisible = ref(false);
const loginuser = ref("");
const email = ref("");
const phoneNumber = ref("");
const address = ref("");
const city = ref("");
const state = ref("");
const zip_code = ref("");
const country = ref("");
const fullAddress = ref("");
const dob = ref("");
const gender = ref("");
const height = ref("");
const weight = ref("");
const scheduleDate = ref("");
const scheduleTime = ref("");
const isTimeSlot = ref("");
const timeZone = ref("");
const timeDifference = ref();
const timeUntilMeeting = ref("");
const seetingPlanLogo = ref();
const patient_id = localStorage.getItem("patient_id");
const access_token = localStorage.getItem("access_token");
const appointmentDetails = JSON.parse(
    localStorage.getItem("patient_appointment_details")
);
onBeforeMount(async () => {
    store.dispatch("updateIsLoading", true);
    store.dispatch("updateCurrentPage", "review-appointment");
    localStorage.setItem("currentPage", "review-appointment");
    await store.dispatch("getPatientInfo");
    await store.dispatch("getPlanInfo");
    // await store.dispatch('getPatientAppointment')
    loginuser.value =
        store.getters.getPatient.first_name +
        " " +
        store.getters.getPatient.last_name;
    email.value = store.getters.getPatient.email;
    phoneNumber.value = store.getters.getPatient.phone_no;
    address.value = store.getters.getPatient.address;
    city.value = store.getters.getPatient.city;
    state.value = store.getters.getPatient.state;
    zip_code.value = store.getters.getPatient.zip_code;
    country.value = store.getters.getPatient.country;
    fullAddress.value =
        (address.value ? address.value + ", " : "") +
        (city.value ? city.value + ", " : "") +
        (state.value ? state.value + " " : "") +
        (zip_code.value ? zip_code.value + ", " : "") +
        (country.value ? country.value : "");
    // dob.value = store.getters.getPatient.dob
    gender.value = store.getters.getPatient.gender;
    weight.value = store.getters.getPatient.weight;
    height.value = store.getters.getPatient.height;

    timeZone.value = appointmentDetails.timezone;
    isTimeSlot.value = appointmentDetails.appointment_time;
    // timeZone.value = store.getters.getBookedAppointment.timezone
    // isTimeSlot.value = store.getters.getBookedAppointment.appointment_time

    const time = moment(isTimeSlot.value, "HH:mm:ss");
    scheduleTime.value = time.format("HH:mm a");
    timeDifference.value = store.getters.getTimeDiff;
    console.log("time", scheduleTime.value);

    let dateString = store.getters.getPatient.dob;
    let parts = dateString.split("-");
    dob.value = `${parts[1]}-${parts[2]}-${parts[0]}`;

    const appointment_date = new Date(appointmentDetails.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;
    store.dispatch("updateIsLoading", false);
});
onMounted(async () => {
    let setting = await axios.post("/api/settings", {});
    console.log(setting.data);
    seetingPlanLogo.value = "/assets/logo/" + setting.data.logo;
});
const backFun = () => {
    store.dispatch("updateIsLoading", true);
    router.replace(
        route.query.to && route.query.to != "/additional-information"
            ? String(route.query.to)
            : "/book-appointment"
    );
};
const convertTimeBasedOnContext = (time12hr, time24hr) => {
    // Extracting the AM/PM part from the 12-hour format
    const period = time12hr.slice(-2); // 'AM' or 'PM'

    // Extracting the hour part from both time strings
    let hour12 = parseInt(time12hr.slice(0, 2), 10);
    let hour24 = parseInt(time24hr.slice(0, 2), 10);

    // Adjusting the 24-hour time based on the 12-hour format's AM/PM
    if (period === "PM" && hour12 !== 12) {
        // If it's PM and not 12 PM, add 12 to match 24-hour format
        hour24 = (hour24 % 12) + 12;
    } else if (period === "AM" && hour12 === 12) {
        // If it's 12 AM, it should be 00 in 24-hour format
        hour24 = 0;
    }

    // Construct new 24-hour time string
    let newTime24hr = hour24.toString().padStart(2, "0") + time24hr.slice(2);

    return newTime24hr;
};
const confirmFun = async () => {
    store.dispatch("updateIsLoading", true);

    await store.dispatch("savePatientAppointment", {
        patient_id: appointmentDetails.patient_id,
        patient_name: appointmentDetails.patient_name,
        patient_email: appointmentDetails.patient_email,
        appointment_date: appointmentDetails.appointment_date,
        appointment_time: convertTimeBasedOnContext(
            appointmentDetails.timeSlotString,
            appointmentDetails.appointment_time
        ),
        timezone: appointmentDetails.timezone,
        timeSlotString: appointmentDetails.timeSlotString,
    });
    await store.dispatch("savePatientCalendlyAppointment", {
        patient_id: appointmentDetails.patient_id,
        patient_name: appointmentDetails.patient_name,
        patient_email: appointmentDetails.patient_email,
        appointment_date: appointmentDetails.appointment_date,
        appointment_time: convertTimeBasedOnContext(
            appointmentDetails.timeSlotString,
            appointmentDetails.appointment_time
        ),
        timezone: appointmentDetails.timezone,
        timeSlotString: appointmentDetails.timeSlotString,
        url:appointmentDetails.url
    });

    if (!store.getters.getErrorMessage) {
        if (localStorage.getItem("patient_appointment_id")) {
            router.replace(
                route.query.to && route.query.to != "/review-appointment"
                    ? String(route.query.to)
                    : "/additional-information"
            );
        }
    }

    store.dispatch("updateIsLoading", false);
};
</script>

<template>
    <StartOverPupup
        :showPopup="store.getters.getShowStartOverPupup"
    ></StartOverPupup>
    <VDialog
        v-model="store.getters.getIsLoading"
        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>
    <VSnackbar
        v-model="store.getters.getIsTonalSnackbarVisible"
        :timeout="5000"
        location="top end"
        variant="flat"
        color="red"
    >
        {{ store.getters.getErrorMessage }}
    </VSnackbar>
    <!-- <v-app> -->
    <!-- <v-main> -->
    <VRow><CustomNav :logo='seetingPlanLogo'></CustomNav></VRow>
    <VRow
    style="min-height: 100dvh; margin: 0px;"
    :style="isMobile ? { marginTop: '90px' } : { marginTop: '60px' }"
    >
        <VCol
            cols="12"
            md="6"
            class="bg-custom col-order-1"
            :class="
                isMobile
                    ? ''
                    : 'auth-wrapper d-flex align-center justify-center pa-4'
            "
        >
            <ProviderInfo></ProviderInfo>
        </VCol>
        <VCol
            cols="12"
            md="6"
            class="bg-custom-color col-order-2"
            :class="
                isMobile
                    ? ''
                    : 'auth-wrapper d-flex align-center justify-center pa-4'
            "
        >
            <VCard
                class="auth-card pa-2 rounded-5"
                style=""
                :class="isMobile ? '' : 'card-wid'"
            >
                <VRow>
                    <VCol cols="12" lg="12" md="12">
                        <router-link
                            to="/"
                            class="text-center mb-2 mt-2"
                            style="
                                width: 100%;
                                position: relative;
                                display: block;
                                padding-top: 20px;
                            "
                        >
                            <span class="text-center">
                                <VImg
                                    :src="seetingPlanLogo"
                                    width="250"
                                    height="50"
                                    class="logo-img"
                                />
                            </span>
                        </router-link>
                    </VCol>
                </VRow>
                <div class="text-left">
                    <h5 class="text-h5 pricing-title mb-0 mt-4" style="padding-left: 10px;">
                        Confirm Appointment
                    </h5>
                    <div class="v-col v-col-12 w-100 pb-0">
                        <p class="mb-0">
                            Your appointment with <b>Dr. Jonathan Hines</b> has been successfully scheduled for {{ scheduleDate }} at
                            {{ appointmentDetails.timeSlotString }}. If you have any questions or need further assistance, please don't hesitate to reach out.
                            
                        </p>
                        <p class="mb-0">
                            We will email you telehealth instructions. This is
                            your appointment to confirm it.
                        </p>
                    </div>
                </div>
                <!-- <VCol class="pt-0 pb-0">
                    <VCardText class="rounded-0 pt-0 pb-0" style="">
                        <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">
                                    {{ loginuser }}</v-list-item-title
                                >
                            </v-list-item>
                            <v-list-item>
                                <template v-slot:prepend>
                                    <v-icon icon="mdi-calendar"></v-icon>
                                </template>
                                <v-list-item-title class="text-wrap"
                                    >{{ scheduleDate }}
                                </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"
                                    >{{ appointmentDetails.timeSlotString }}
                                </v-list-item-title>
                            </v-list-item>
                            <v-list-item>
                                <template v-slot:prepend>
                                    <v-icon icon="mdi-world"></v-icon>
                                </template>
                                <v-list-item-title class="text-wrap"
                                    >{{ timeZone }}
                                </v-list-item-title>
                            </v-list-item>
                        </v-list>
                    </VCardText>
                </VCol> -->
                <VCol cols="12 pt-4 pb-4" class="text-center">
                    <!-- <RouterLink to="/book-appointment"> -->
                    <VBtn
                        @click="confirmFun"
                        class="text-capitalize mb-2 text-white"
                        block
                        color="rgb(var(--v-theme-yellow-theme-button))"
                        >Confirm</VBtn
                    >
                    <VBtn
                        @click="backFun"
                        class="text-capitalize"
                        color="grey"
                        block
                        >Back</VBtn
                    >
                    <!-- </RouterLink> -->
                    <!-- <RouterLink to="/additional-information"> -->

                    <!-- </RouterLink> -->
                </VCol>
            </VCard>
        </VCol>
    </VRow>

    <!-- </v-main> -->
    <!-- </v-app> -->
</template>

<style lang="scss" scoped>
@use "@core/scss/template/pages/page-auth.scss";

.bg-custom {
  background: #efefed;
}

.bg-custom-color {
  background: #d8ebf6;
}

.total-font {
    font-size: 20px;
    margin-bottom: 5px;
}

.v-list-item--density-default.v-list-item--one-line {
    min-height: 30px !important;
}

.logo-img {
    display: block;
    position: relative;
    margin: 0 auto;
}
</style>
<style scoped>
@media only screen and (max-width: 768px) {
    .card-wid {
        max-width: 600px !important;
        min-width: auto !important;
    }

    .col-order-1 {
        order: 2;
    }

    .col-order-2 {
        order: 1;
    }
}

@media only screen and (min-width: 769px) {
    .col-order-1 {
        order: 1;
    }

    .col-order-2 {
        order: 2;
    }
}

.total-font {
    font-size: 20px;
    margin-bottom: 5px;
}

.bg-custom {
    background: #efefed;
}

.bg-custom-color {
    background: #d8ebf6;
}

.bg-white bg-change-bk .current-plan {
    border: 2px solid rgb(var(--v-theme-primary));
}

.cut-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: line-through;
    text-decoration-color: red;
    text-decoration-thickness: 1px;
}

.plan-card {
    margin: 0rem;
    margin-bottom: 0;
}

.card-wid {
    max-width: 600px;
}

.layout-wrapper {
    justify-content: center;
}

.error-message {
    color: #ff2f2f;
    font-size: 15px;
}
</style>
