<script setup>
import axios from '@axios';
import OrderSummary from '@images/pages/healthcare-wellness-wellbeing-first-aid-box-word-graphic.jpg';
import {
    cardNumberValidator,
    cvvValidator,
    expiryValidator,
    requiredValidator
} from '@validators';
import moment from 'moment-timezone';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()
const isMobile = ref(window.innerWidth <= 768);
const disableNext = ref(false)
const isTimeSlot = ref()
const isDialogVisible = ref(false)
const isLoadingVisible = ref(false)
const isScheduleDialogVisible = ref(false)
const isEventScheduleDialogVisible = ref(false);
const currentDialoagkey = ref('')
const cardValue = ref(8);
const rowValue = ref(5);
const date = ref(new Date().toISOString().substr(0, 10));
const activeSlot = ref(false);
const patientName = ref('')
const patientEmail = ref('')
const firstName = ref('')
const lastName = ref('')
const email = ref('')
const phone = ref('')
const dob = ref('')
const address = ref('')
const apt = ref('')
const city = ref('')
const state = ref('')
const zipcode = ref('')
const billingaddress = ref('')
const billingapt = ref('')
const billingcity = ref('')
const billingstate = ref('')
const billingzipcode = ref('')
const termAndCondtiton = ref(true)
const billingSection = ref(false)
const schedule_consultant = ref(true)
const order_complete = ref(false);
const cardNumber = ref('')
const expiry = ref('')
const cvv = ref('')
const cart = ref('')
const patientInfoForm = ref()
const paymentForm = ref()
const questionForm = ref()
const uploadFilesRef = ref()
const refForm = ref()
const selectTimeZone = ref("America/Los_Angeles")
const formattedbookingTime = ref()
// const stimeZone = ref("America/Los_Angeles PST (-08:00)")
const step = ref(1)
const steps = ref([
    { step: 1, complete: false, editable: true },
    { step: 2, complete: false, editable: true },
    { step: 3, complete: false, editable: true },
    { step: 4, complete: false, editable: true },
    // Add more steps as needed
])
const auth_information = ref();
const dob_auth_person = ref();
const relationship_auth_person = ref();
const patient_concent_Signature = ref();
const appointment_cancel_Signature = ref();
const medicare_disclaimer_Signature = ref();
const telehealth_concent_Signature = ref();
const secondary_contact_Signature = ref();
const current_scHeduleTime = moment().format('HH:mm:ss');
const timezone = ref([]);
const filterDate = ref([]);
const states = ref([
    { name: 'Howland Island', abbreviation: 'UM-84' },
    { name: 'Delaware', abbreviation: 'DE' },
    { name: 'Maryland', abbreviation: 'MD' },
    { name: 'Baker Island', abbreviation: 'UM-81' },
    { name: 'Kingman Reef', abbreviation: 'UM-89' },
    { name: 'New Hampshire', abbreviation: 'NH' },
    { name: 'Wake Island', abbreviation: 'UM-79' },
    { name: 'Kansas', abbreviation: 'KS' },
    { name: 'Texas', abbreviation: 'TX' },
    { name: 'Nebraska', abbreviation: 'NE' },
    { name: 'Vermont', abbreviation: 'VT' },
    { name: 'Jarvis Island', abbreviation: 'UM-86' },
    { name: 'Hawaii', abbreviation: 'HI' },
    { name: 'Guam', abbreviation: 'GU' },
    { name: 'United States Virgin Islands', abbreviation: 'VI' },
    { name: 'Utah', abbreviation: 'UT' },
    { name: 'Oregon', abbreviation: 'OR' },
    { name: 'California', abbreviation: 'CA' },
    { name: 'New Jersey', abbreviation: 'NJ' },
    { name: 'North Dakota', abbreviation: 'ND' },
    { name: 'Kentucky', abbreviation: 'KY' },
    { name: 'Minnesota', abbreviation: 'MN' },
    { name: 'Oklahoma', abbreviation: 'OK' },
    { name: 'Pennsylvania', abbreviation: 'PA' },
    { name: 'New Mexico', abbreviation: 'NM' },
    { name: 'American Samoa', abbreviation: 'AS' },
    { name: 'Illinois', abbreviation: 'IL' },
    { name: 'Michigan', abbreviation: 'MI' },
    { name: 'Virginia', abbreviation: 'VA' },
    { name: 'Johnston Atoll', abbreviation: 'UM-67' },
    { name: 'West Virginia', abbreviation: 'WV' },
    { name: 'Mississippi', abbreviation: 'MS' },
    { name: 'Northern Mariana Islands', abbreviation: 'MP' },
    { name: 'United States Minor Outlying Islands', abbreviation: 'UM' },
    { name: 'Massachusetts', abbreviation: 'MA' },
    { name: 'Connecticut', abbreviation: 'CT' },
    { name: 'Florida', abbreviation: 'FL' },
    { name: 'District of Columbia', abbreviation: 'DC' },
    { name: 'Midway Atoll', abbreviation: 'UM-71' },
    { name: 'Navassa Island', abbreviation: 'UM-76' },
    { name: 'Indiana', abbreviation: 'IN' },
    { name: 'Wisconsin', abbreviation: 'WI' },
    { name: 'Wyoming', abbreviation: 'WY' },
    { name: 'South Carolina', abbreviation: 'SC' },
    { name: 'Arkansas', abbreviation: 'AR' },
    { name: 'South Dakota', abbreviation: 'SD' },
    { name: 'Montana', abbreviation: 'MT' },
    { name: 'North Carolina', abbreviation: 'NC' },
    { name: 'Palmyra Atoll', abbreviation: 'UM-95' },
    { name: 'Puerto Rico', abbreviation: 'PR' },
    { name: 'Colorado', abbreviation: 'CO' },
    { name: 'Missouri', abbreviation: 'MO' },
    { name: 'New York', abbreviation: 'NY' },
    { name: 'Maine', abbreviation: 'ME' },
    { name: 'Tennessee', abbreviation: 'TN' },
    { name: 'Georgia', abbreviation: 'GA' },
    { name: 'Louisiana', abbreviation: 'LA' },
    { name: 'Nevada', abbreviation: 'NV' },
    { name: 'Iowa', abbreviation: 'IA' },
    { name: 'Idaho', abbreviation: 'ID' },
    { name: 'Rhode Island', abbreviation: 'RI' },
    { name: 'Washington', abbreviation: 'WA' },
    { name: 'Ohio', abbreviation: 'OH' },
    // ... (add the rest of the states)
]);
const orderStored = ref(false)
let previousStep = step.value;
const isFormValid = ref(false);
const patient_concent = ref(false);
const appointment_cancel = ref(false);
const medicare_disclaimer = ref(false);
const telehealth_concent = ref(false);
const secondary_contact = ref(false);
const isCalander = ref(true);
const calanderFormatedDate = ref();
const orderDate = ref();
const isScheduleEvent = ref(false);
const calanderSelectedDate = ref(new Date());
const scheduleDate = ref();
const selectTimeSlot = ref();
const chooseDate = ref([]);
const uploadFiles = ref([]);

const gender = ref()
const maritalStatus = ref()
const height = ref()
const weight = ref()
const genders = ref([
    { name: 'Male', abbreviation: 'Male' },
    { name: 'Female', abbreviation: 'Female' },
    { name: 'Other', abbreviation: 'Other' },
]);

const maritalStatuses = ref([
    { name: 'Single', abbreviation: 'Single' },
    { name: 'Married', abbreviation: 'Married' },
    { name: 'Divorced', abbreviation: 'Divorced' },
]);

const heights = ref([
    { name: '5 ft 0 in', abbreviation: '5 ft 0 in' },
    { name: '5 ft 1 in', abbreviation: '5 ft 1 in' },
    { name: '5 ft 2 in', abbreviation: '5 ft 2 in' },
    { name: '5 ft 3 in', abbreviation: '5 ft 3 in' },
    { name: '5 ft 4 in', abbreviation: '5 ft 4 in' },
    { name: '5 ft 5 in', abbreviation: '5 ft 5 in' },
    { name: '5 ft 6 in', abbreviation: '5 ft 6 in' },
    { name: '5 ft 7 in', abbreviation: '5 ft 7 in' },
    { name: '5 ft 8 in', abbreviation: '5 ft 8 in' },
    { name: '5 ft 9 in', abbreviation: '5 ft 9 in' },
    { name: '5 ft 10 in', abbreviation: '5 ft 10 in' },
    { name: '5 ft 11 in', abbreviation: '5 ft 11 in' },
    { name: '6 ft 0 in', abbreviation: '6 ft 0 in' },
    { name: '6 ft 1 in', abbreviation: '6 ft 1 in' },
    { name: '6 ft 2 in', abbreviation: '6 ft 2 in' },
    { name: '6 ft 3 in', abbreviation: '6 ft 3 in' },
    { name: '6 ft 4 in', abbreviation: '6 ft 4 in' },
    { name: '6 ft 5 in', abbreviation: '6 ft 5 in' },
    { name: '6 ft 6 in', abbreviation: '6 ft 6 in' },
    { name: '6 ft 7 in', abbreviation: '6 ft 7 in' },
    { name: '6 ft 8 in', abbreviation: '6 ft 8 in' },
    { name: '6 ft 9 in', abbreviation: '6 ft 9 in' },
    { name: '6 ft 10 in', abbreviation: '6 ft 10 in' },
    { name: '6 ft 11 in', abbreviation: '6 ft 11 in' },
    { name: '7 ft 0 in', abbreviation: '7 ft 0 in' },
]);
const errors = ref({
    name: undefined,
    last_name: undefined,
    phone: undefined,
    email: undefined,
    dob: undefined,
    address: undefined,
    city: undefined,
    state: undefined,
    zipcode: undefined,
    country: undefined,
    termAndCondtiton: undefined,
    receviceSMs: undefined,
    isPolicy: undefined

})
const isAMPM = ref(true);
const additionalButtonsShown = ref(new Array(5).fill(false));

const checkIfMobile = () => {
    isMobile.value = window.innerWidth <= 768;
};
const timeSlot = (index) => {
    // Reset visibility of the last shown additional buttons
    const lastShownIndex = additionalButtonsShown.value.findIndex((shown) => shown);
    if (lastShownIndex !== -1) {
        additionalButtonsShown.value[lastShownIndex] = false;
    }

    // Toggle the visibility of the additional buttons for the clicked time slot
    additionalButtonsShown.value[index] = true;
};

const nextButton = (timeSlot) => {
    // console.log('nextButton', timeSlot);
    // const [time, period] = timeSlot.split(' ');
    // const [hours, minutes] = time.split(':').map(Number);
    // let totalSeconds = (hours % 12) * 3600 + minutes * 60;
    // console.log("period", period);
    // if (period.toLowerCase() === 'pm') {
    //     totalSeconds += 12 * 3600;
    // }
    // selectTimeSlot.value = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:00`;
    selectTimeSlot.value = timeSlot;
    isCalander.value = false;
    isScheduleEvent.value = true;
    // Handle the logic for the "Next" button, if needed
    // console.log(`Next button clicked for ${index}:00 pm`);
};
const openDialog = (question_key) => {
    currentDialoagkey.value = question_key;
    isDialogVisible.value = true;
    window.addEventListener('click', closeDialogOnOutsideClick);
};
const closeDialogOnOutsideClick = (event) => {
    const dialogElement = refs.myDialog.$el;
    if (!dialogElement.contains(event.target)) {
        isDialogVisible.value = false;
        window.removeEventListener('click', closeDialogOnOutsideClick);
    }
};
const billingAddressShow = () => {
    if (billingSection.value == false) {
        billingSection.value = true;
    } else {
        billingSection.value = false;
    }

}
const questions = ref([
    {
        question_key: 'why_interested_hrt',
        question: "What aspects of hormone replacement therapy (HRT) intrigue you?",
        type: "text",
    },
    {
        question_key: 'goal_loss_weight',
        question: "Is your objective with the program to achieve weight loss?",
        type: "radio",
        options: ["Yes", "No"],
    },
    {
        question_key: 'what_biological_sex',
        question: "What is your assigned sex at birth?",
        type: "radio",
        options: ["Male", "Female"],
    },
    {
        question_key: '3_years_physical_test',
        question: "Have you undergone a comprehensive physical examination by a medical professional within the past three years, which included assessments of vital signs such as weight, blood pressure, and heart rate?",
        type: "radio",
        options: ["Yes", "No"],
    },
    {
        question_key: 'medical_problems',
        question: "Did you experience any medical issues? If so, could you please elaborate?",
        type: "radio",
        options: ["Yes", "No"],
    },
    {
        question_key: 'have_prostate_cancer',
        question: "Have you ever received a diagnosis of prostate cancer?",
        type: "radio",
        options: ["Yes", "No"],
    },
    {
        question_key: 'what_height',
        question: "How tall are you?",
        type: "dropdown",
        options: ["5 ft 1 in",
            "5 ft 2 in",
            "5 ft 3 in",
            "5 ft 4 in",
            "5 ft 5 in",
            "5 ft 6 in",
            "5 ft 7 in",
            "5 ft 8 in",
        ],
    },
    {
        question_key: 'whight',
        question: "What is your weight?",
        type: "text",
    },
    {
        question_key: 'birthdate',
        question: "When were you born?",
        type: "date",
        sub_title: 'To proceed with medication, kindly input your accurate date of birth using the format mm/dd/yyyy.'
    },
    {
        question_key: 'past_harmone_treatments',
        question: "Have you been prescribed any hormone treatments currently or in the past?",
        type: "radio",
        options: ["thyroid_medication", "testosterone_treatment", "estrogen_blocker", "hgh", "ipamoreline", "colomipheine", "hcg", "other", "none"],
    },
    {
        question_key: 'take_medications',
        question: "Are you currently using or have you used any over-the-counter or prescription medications, excluding hormone treatments? (Please note that your responses will be cross-checked against prescription and insurance records. Failure to disclose current prescriptions and/or medical conditions may result in disapproval for your safety.)",
        type: "radio",
        options: ["Yes", "No"],
    },
    {
        question_key: 'have_medications_allegies',
        question: "Do you have any allergies to medications?",
        type: "radio",
        options: ["Yes", "No"],
    },
    {
        question_key: 'plan_children',
        question: "Do you intend to have children at some point in the future?",
        type: "radio",
        options: ["Yes", "No"],
    },
    {
        question_key: 'partner_pregnant',
        question: "Is your partner currently pregnant or breastfeeding?",
        type: "radio",
        options: ["Yes", "No", "not applicab_e"],
    },
    {
        question_key: 'experience_ed',
        question: "Are you currently experiencing any erectile dysfunction (ED) issues?",
        type: "radio",
        options: ["never", "almost_never", "occasionally", "almost_always", "always"],
    },
    {
        question_key: 'thyroid_disorders',
        question: "Have you ever been diagnosed with thyroid disorders such as hypothyroidism (underactive thyroid), hyperthyroidism (overactive thyroid), Hashimoto's Disease, or Graves' Disease?",
        type: "radio",
        options: ["Yes", "No"],
    },
    {
        question_key: 'family_history',
        question: "Does your family have a history of any of the following disorders?",
        type: "radio",
        options: ["drug_alcohol", "cancer", "heart_disease", "thyroid_disease", "low_testosterone",
            "none"],
    },
    {
        question_key: 'patient_concent',
        question: "Please read and  accept",
        linktext: "Patient Content",
        type: "signalCheckbox",
    },
    {
        question_key: 'appointment_cancel',
        question: "Please read and  accept",
        linktext: "Appointment Cancel",
        type: "signalCheckbox",
    },
    {
        question_key: 'medicare_disclaimer',
        question: "Please read and  accept",
        linktext: "Medicare Disclaimer",
        type: "signalCheckbox",
    },
    {
        question_key: 'telehealth_concent',
        question: "Please read and  accept",
        linktext: "Telehealth Concent",
        type: "signalCheckbox",
    },
    {
        question_key: 'secondary_contact',
        question: "Please read and  accept",
        linktext: "Secondary Contact Disclosure(optional)",
        type: "signalCheckbox",
    },

]);
const answers = ref([]);
const patientId = localStorage.getItem('patient_id');
onMounted(async () => {
    window.addEventListener('resize', checkIfMobile);
    // console.log("calanderSelectedDate", moment().format('YYYY-MM-DD HH:mm:ss'));
    // let time = moment().format('HH:mm:ss');
    // console.log("time", time);
    const timezones = reactive(moment.tz.names().map(timezone => {
        const offset = moment.tz(timezone).utcOffset();
        const offsetHours = Math.abs(Math.floor(offset / 60));
        const offsetMinutes = Math.abs(offset % 60);
        const offsetSign = offset < 0 ? '-' : '+';
        const formattedOffset = `${offsetSign}${offsetHours.toString().padStart(2, '0')}:${offsetMinutes.toString().padStart(2, '0')}`;
        const now = moment().tz(timezone);
        const nowformattedOffset = now.format('Z');
        const nowformattedTimezone = now.format('z');
        const formattedTime = now.format('hh:mm A');
        // console.log(timezone + ' - ' + nowformattedTimezone + ' - (' + nowformattedOffset + ')'); // Output: EST
        if (isAMPM.value == false) {
            return {
                name: timezone + ' (' + nowformattedOffset + ') ',
                abbreviation: timezone,
            };
        } else {
            return {
                name: timezone + ' (' + nowformattedOffset + ') ',
                abbreviation: timezone,
            };

        }

    }));
    // await handleDateInput();
    timezone.value = timezones;

    await getPatientDetails()

})
onUnmounted(() => {
    window.removeEventListener('resize', checkIfMobile);
});
const getPatientDetails = async () => {
    await axios.post('/api/get-patient-detail/' + patientId)
        .then(response => {
            // console.log("patient-detail", response.data)
            let patientdata = response.data.patient

            firstName.value = patientdata.first_name
            lastName.value = patientdata.last_name
            email.value = patientdata.email
            phone.value = patientdata.phone_no
            dob.value = patientdata.dob
            // address.value = ''
            // city.value = ''
            // state.value = patientdata.state
            // zipcode.value = 'sadasd'
        })
        .catch(error => {
            console.error(error);
        });
}
const getOrderDetails = async () => {
    await axios.post('/api/store-order-data/' + localStorage.getItem('cart_id'))
        .then(response => {
            console.log(response.data.cart)
            let cartdata = response.data.cart

            firstName.value = cartdata.first_name
            lastName.value = cartdata.last_name
            email.value = cartdata.email
            phone.value = cartdata.phone
            dob.value = cartdata.date_of_birth
            address.value = cartdata.shipping_address1
            apt.value = cartdata.shipping_address2
            city.value = cartdata.shipping_city
            state.value = cartdata.shipping_state
            zipcode.value = cartdata.shipping_zipcode
            billingaddress.value = cartdata.billing_address1
            billingapt.value = cartdata.billing_address2
            billingcity.value = cartdata.billing_city
            billingstate.value = cartdata.billing_state
            billingzipcode.value = cartdata.billing_zipcode
            if (billingaddress.value) {
                termAndCondtiton.value = true
                billingSection.value = true
            }
        })
        .catch(error => {
            // console.error(error);
        });
};
const formatPhoneNumber = () => {
    // Remove non-numeric characters from the input
    const numericValue = phone.value.replace(/\D/g, '');

    // Apply formatting logic
    if (numericValue.length <= 10) {
        phone.value = numericValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
    } else {
        // Limit the input to a maximum of 14 characters
        const truncatedValue = numericValue.slice(0, 10);
        phone.value = truncatedValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
    }
};
const cardNumberFormat = () => {
    cardNumber.value = cardNumber.value.replace(/\D/g, '').substring(0, 16);

}
const formatExpiry = () => {
    // Automatically format the input to MM/YY format
    expiry.value = expiry.value.replace(/\D/g, '').slice(0, 4).replace(/(\d{2})(\d{2})/, '$1/$2');
}
const handleCVVInput = () => {
    // Remove non-digit characters from input
    cvv.value = cvv.value.replace(/\D/g, '');
}
const steeperAction = () => {
    return step.value == 4;
};
watch(
    () => step.value,
    async (newStep) => {
        if (newStep === 3) {
            isCalander.value = true;
            isScheduleEvent.value = false;
        }
        if (newStep === 4) {

        }

        if (newStep === 1) {
            cardValue.value = 8;
        }
        if (newStep === 1 && newStep > previousStep) {
            cardValue.value = 8;
            console.log('Performing actions for Step One');

        } else if (newStep === 2 && newStep > previousStep) {
            cardValue.value = 10;

            console.log('2 ', await validatePayment())
            if (!(await validatePayment())) {
                step.value = previousStep;
                return
            }
            await updatePatientAddress()
            await saveOrderInfo()
            await processPayment()
            console.log('Performing actions for Step Two');
        } else if (newStep === 3 && newStep > previousStep) {

            cardValue.value = 10;
            console.log('3 ', await validateQuestion())
            if (!(await validateQuestion())) {
                step.value = previousStep;
                return
            }

            saveAnswers()

            console.log('Performing actions for Step Three');

        } else if (newStep === 4 && newStep > previousStep) {

            cardValue.value = 10;

            console.log('3 ', await validateFiles())
            if (!(await validateFiles())) {
                step.value = previousStep;
                return
            }
            scheduleDate.value = '';
            chooseDate.value = [];
            calanderFormatedDate.value;
            isScheduleDialogVisible.value = true;
            await updatePatientInfo()
            console.log('Performing actions for Step 4');



        }        // Update the previousStep variable
        previousStep = newStep;
    }
);
const validateOrderInfo = async () => {
    const { valid: isValid } = await patientInfoForm.value?.validate();
    console.log('isValid ', isValid);
    return isValid;
};

const updatePatientAddress = async () => {
    console.log('updatePatientAddress');
    await axios.post('/api/update-patient/' + patientId, {

        address: address.value,
        city: city.value,
        state: state.value,
        zip_code: zipcode.value,
        country: 'United States',

    }).then(r => {
        console.log("updated patient ", r.data);
    }).catch(e => {
        console.log(e.response);
        const { errors: formErrors } = e.response.data.errors;
        console.error("Error", e.response.data.errors)
    });
}
const saveOrderInfo = async () => {
    console.log('saveOrderInfo');
    await axios.post('/api/store-order-data', {
        first_name: firstName.value,
        last_name: lastName.value,
        email: email.value,
        phone: phone.value,
        // date_of_birth: dob.value,
        patient_id: patientId,
        shipping_address1: address.value,
        shipping_address2: apt.value,
        shipping_city: city.value,
        shipping_state: state.value,
        shipping_zipcode: zipcode.value,
        shipping_country: '',
        billing_address1: billingaddress.value,
        billing_address2: billingapt.value,
        billing_city: billingcity.value,
        billing_state: billingstate.value,
        billing_zipcode: billingzipcode.value,
        billing_country: "",
        shipping_amount: 0,
        total_amount: 99.00

    }).then(r => {
        localStorage.setItem('cart_id', r.data.cart.id)
        console.log("store order", r.data);
        orderStored.value = true
    }).catch(e => {
        console.log(e.response);
        const { errors: formErrors } = e.response.data.errors;
        console.error("Error", e.response.data.errors)
    });

}


const validatePayment = async () => {
    const { valid: isValid } = await paymentForm.value?.validate();
    console.log('isValid ', isValid);
    return isValid;
};

const updatePatientInfo = async () => {
    console.log('updatePatientInfo');
    await axios.post('/api/update-patient/' + patientId, {

        dob: dob.value,
        gender: gender.value,
        marital_status: maritalStatus.value,
        height: height.value,
        weight: weight.value,

    }).then(r => {
        console.log("updated patient ", r.data);
    }).catch(e => {
        console.log(e.response);
        const { errors: formErrors } = e.response.data.errors;
        console.error("Error", e.response.data.errors)
    });
}

const processPayment = async () => {
    await axios.post('/api/process-payment')
        .then(response => {
            console.log(response.data)
        })
        .catch(error => {
            console.error(error);
        });
}

const validateQuestion = async () => {
    const { valid: isValid } = await questionForm.value?.validate();
    console.log('isValid ', isValid);
    return isValid;
};

const validateFiles = async () => {
    const { valid: isValid } = await uploadFilesRef.value?.validate();
    console.log('isValid ', isValid);
    return isValid;
};

const saveAnswers = async () => {
    const patient_id = localStorage.getItem('patient_id');
    const jsonData = {
        questions: questions.value.reduce((accumulator, question, index) => {
            const answerValue = answers.value[question.question_key];

            if (answerValue !== undefined) {
                accumulator.push({
                    question_key: question.question_key,
                    type: question.type,
                    answer: answerValue,
                });
            }

            return accumulator;
        }, []),
    };
    let qaData = Array({ 'answers': jsonData.questions });
    console.log('answers ', JSON.stringify(qaData));
    // You can send the jsonData to your server or use it as needed
    axios.post('/api/medical-history-question-post/' + patient_id,
        {
            answers: jsonData.questions
        }
    )
        .then(response => {
            console.log('answer api', response.data)
            // console.log(chooseDate);
            order_complete.value = true;
            localStorage.setItem('isLogin', 'true')
            localStorage.setItem('profileCompleted', '0')
        })
        .catch(error => {
            // console.error(error);
        });
};

const abc = computed(() => {
    console.log("Step", step.value);
});
const hideActions = ref();
const selectedTimeZoneName = computed(() => {

    // Find the selected time zone in the array and return its name
    const chosenTimeZone = timezone.value.find(zone => zone.abbreviation === selectTimeZone.value);
    return chosenTimeZone ? chosenTimeZone.name : '';
});

const selectedStateName = computed(() => {
    const selectedState = states.value.find(s => s.abbreviation === state.value);

    return selectedState ? selectedState.name : '';
});
const patientScheduleInfo = ref()
const scheduleSubmit = () => {

    patientScheduleInfo.value?.validate().then(({ valid: isValid }) => {
        console.log('isValid ', isValid)
        if (isValid)
            scheduleEvent()
    })
};


const scheduleEvent = async () => {
    isTimeSlot.value = '';
    // console.log("sdsadsd", selectTimeZone.value);
    const patient_id = localStorage.getItem('patient_id');
    const access_token = localStorage.getItem('access_token');
    isLoadingVisible.value = true;
    // console.log("isAMPM", isAMPM.value);
    if (isAMPM.value) { //24 hours
        isTimeSlot.value = selectTimeSlot.value + ":00"
        // console.log("timeSlot", isTimeSlot.value);
    } else { //Am pm
        let timeString = selectTimeSlot.value;

        // Parse the time string into a Moment.js object
        let timeMoment = moment(timeString, 'hh:mm A');

        // Format the Moment.js object to the desired format ":02:00:00"
        isTimeSlot.value = timeMoment.format('hh:mm:ss');

        // console.log("formattedTimeAsif", isTimeSlot.value);
    }
    // const parsedTime = moment(selectTimeSlot.value, ['hh:mm A', 'HH:mm A'], true);
    // console.log("parsedTime", parsedTime);
    // Format the time string to "HH:mm:ss"H:i:s
    // formattedbookingTime.value = parsedTime.format('HH:mm:ii');
    // console.log("formattedbookingTime", formattedbookingTime.value);
    await axios.post('/api/book-appointment', {
        patient_id: patient_id,
        patient_name: patientName.value,
        patient_email: patientEmail.value,
        appointment_date: calanderFormatedDate.value,
        appointment_time: isTimeSlot.value,
        timezone: selectTimeZone.value
    }, {
        headers: {
            'Authorization': `Bearer ${access_token}`,
        }
    })
        .then(response => {
            hideActions.value = steeperAction();
            console.log("action", hideActions.value);
            console.log('Response:', response.data);
            const appointmentDetail = response.data.appointment;
            localStorage.setItem('patient_appointment_id', appointmentDetail.id);
            // isEventScheduleDialogVisible.value = true;
            isCalander.value = false;
            isScheduleEvent.value = false;
            schedule_consultant.value = false;
            order_complete.value = true;
            localStorage.setItem('isLogin', 'true')
            isLoadingVisible.value = false;
        })
        .catch(error => {

            console.error('Error:', error);
        });



}


const minDate = computed(() => {
    const today = new Date();
    return new Date(today.getFullYear(), today.getMonth(), today.getDate());
});

const maxDate = computed(() => {
    const threeMonthsLater = new Date();
    threeMonthsLater.setMonth(threeMonthsLater.getMonth() + 3);
    return new Date(
        threeMonthsLater.getFullYear(),
        threeMonthsLater.getMonth(),
        threeMonthsLater.getDate()
    );
});
const isEventClose = () => {
    isEventScheduleDialogVisible.value = false;
    isLoadingVisible.value = true;
    router.push('/overview');
}
const handleDateInput = () => {
    chooseDate.value = [];
    isLoadingVisible.value = true;
    scheduleDate.value = '';
    console.log("calanderDate", calanderSelectedDate.value);
    const access_token = localStorage.getItem('access_token');
    console.log(access_token);
    const selectedDate = new Date(calanderSelectedDate.value);
    const year = selectedDate.getFullYear();
    const month = (selectedDate.getMonth() + 1).toString().padStart(2, '0'); // Adding 1 because months are zero-indexed
    const day = selectedDate.getDate().toString().padStart(2, '0');
    calanderFormatedDate.value = `${year}-${month}-${day}`;
    orderDate.value = `${month}-${day}-${year}`;
    const formattedDate = new Intl.DateTimeFormat('en-US', {
        weekday: 'long',
        month: 'long',
        day: 'numeric',
        year: 'numeric',
    }).format(calanderSelectedDate.value);
    scheduleDate.value = formattedDate;
    console.log("formattedDate", calanderFormatedDate.value, formattedDate);
    if (calanderFormatedDate.value) {
        axios.post('/api/available-slots/' + calanderFormatedDate.value, {
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${access_token}`,
                'Accept': 'application/json',
            }
        })
            .then(response => {
                // Handle the successful response here
                // console.log('Response:', response.data);
                // let apiData = response.data.available_slots;
                let scheduleTime = selectTimeZone.value;

                chooseDate.value = response.data.available_slots;
                getTimeSlots(chooseDate.value, scheduleTime);
                isLoadingVisible.value = false;
            })
            .catch(error => {
                // Handle errors here
                console.error('Error:', error);
            });
    } else {
        chooseDate.value = [];
    }
};

const getTimeSlots = (availableSlot, timezone) => {

    let offestTimeZone = timezone;
    // console.log('timezone', offestTimeZone);
    // Get the current time in the specified timezone
    const now = moment();

    // Define the time slots (adjust as needed)
    const timeSlots = availableSlot;

    // Initialize an array to store the current time slots
    const convertedSlots = {};

    // Convert each time slot to the specified timezone
    for (const [key, value] of Object.entries(availableSlot)) {

        let slot = value;
        // console.log('slot', slot);
        const concateDate = calanderFormatedDate.value + ' ' + slot;
        // console.log('concateDate', concateDate);

        const originalTime = moment.utc(concateDate, 'YYYY-MM-DD HH:mm:ss');
        // console.log("originalTime", originalTime.format('YYYY-MM-DD HH:mm:ss'));
        const convertedTime = originalTime.tz(timezone);
        let converted_date = convertedTime.format('YYYY-MM-DD');
        // console.log("convertedTime", convertedTime.format('YYYY-MM-DD HH:mm:ss'));
        if (converted_date == calanderFormatedDate.value) {
            if (isAMPM.value) {
                convertedSlots[key] = convertedTime.format('HH:mm');
            } else {
                convertedSlots[key] = convertedTime.format('hh:mm A');
            }

        }
        // const convertedTimee = moment.utc(concateDate, 'HH:mm:ss').utcOffset(offsetSign * offsetMinutes);


        // console.log(`Converted timee (${offestTimeZone}): ${convertedTime.format('HH:mm:ss')}`);
        // let start_date = moment.utc(concateDate + " 00:00:00", "YYYY-MM-DD HH:mm:ss").utcOffset(timezoneComponents[0]).format("YYYY-MM-DD HH:mm:ss");
    }
    // console.log('convertedSlots', convertedSlots);
    chooseDate.value = convertedSlots;
    // console.log('convertedSlots', convertedSlots);
    // console.log('chooseDate', chooseDate.value);
    // Return the converted time slots
    return convertedSlots;
};
const getCurrentDate = () => {
    const today = new Date();
    const year = today.getFullYear();
    let month = today.getMonth() + 1;
    let day = today.getDate();

    // Format the date to match the input type="date" format
    month = month < 10 ? `0${month}` : month;
    day = day < 10 ? `0${day}` : day;

    return `${year}-${month}-${day}`;
};

const handleContinueClick = (currentDialoagkey) => {
    isDialogVisible.value = false; // Hide the dialog
    answers.value[currentDialoagkey] = true; // Update the answers object
};

const handleSwitchChange = async () => {
    timezone.value = [];
    if (isAMPM.value == false) {
        const timezones = reactive(moment.tz.names().map(timezone => {
            const offset = moment.tz(timezone).utcOffset();
            const offsetHours = Math.abs(Math.floor(offset / 60));
            const offsetMinutes = Math.abs(offset % 60);
            const offsetSign = offset < 0 ? '-' : '+';
            const formattedOffset = `${offsetSign}${offsetHours.toString().padStart(2, '0')}:${offsetMinutes.toString().padStart(2, '0')}`;
            const now = moment().tz(timezone);
            const nowformattedOffset = now.format('Z');
            const nowformattedTimezone = now.format('z');
            const formattedTime = now.format('hh:mm A');
            return {
                name: timezone + ' (' + formattedTime + ') ',
                abbreviation: timezone
            };
        }));
        timezone.value = timezones;

    } else {
        const timezones = reactive(moment.tz.names().map(timezone => {
            const offset = moment.tz(timezone).utcOffset();
            const offsetHours = Math.abs(Math.floor(offset / 60));
            const offsetMinutes = Math.abs(offset % 60);
            const offsetSign = offset < 0 ? '-' : '+';
            const formattedOffset = `${offsetSign}${offsetHours.toString().padStart(2, '0')}:${offsetMinutes.toString().padStart(2, '0')}`;
            const now = moment().tz(timezone);
            const nowformattedOffset = now.format('Z');
            const nowformattedTimezone = now.format('z');
            const formattedTime = now.format('hh:mm A');
            return {
                name: timezone + ' (' + formattedTime + ') ',
                abbreviation: timezone
            };
        }));


        timezone.value = timezones;
    }
    await handleDateInput();

}
// const noSlotsAvailable = ref(false);
const filteredSlots = computed(() => {
    const today = new Date();
    const todayDateString = today.toISOString().substr(0, 10); // Get today's date in YYYY-MM-DD format
    // console.log("todayDateString", todayDateString);
    const formattedDate = new Intl.DateTimeFormat('en-US', {
        weekday: 'long',
        month: 'long',
        day: 'numeric',
        year: 'numeric',
    }).format(calanderSelectedDate.value);
    scheduleDate.value = formattedDate;
    let isTodaySlotAvailable = false;
    const entries = Object.entries(chooseDate.value)
    // console.log("entries", entries);
    for (const slotDate of entries) {
        if (calanderFormatedDate.value === todayDateString) {
            filterDate.value.push(slotDate);
        } else {
            return chooseDate.value;
        }
    }


});

const handleTimeZoneChange = () => {
    // Do something with the new selected time zone value
    console.log('Selected time zone:', selectTimeZone.value);
};
const nextStep = async () => {
    console.log('step', step.value)
    if (step.value == 1) {
        console.log('1 ', await validatePayment())
        if (!(await validatePayment())) {
            step.value = previousStep;
            return
        }
        isLoadingVisible.value = true
        await updatePatientAddress()
        await saveOrderInfo()
        await processPayment()
        console.log('Performing actions for Step Two');
        isLoadingVisible.value = false
        step.value++;

    }

    if (step.value == 2) {
        console.log('2 ', await validateQuestion())
        if (!(await validateQuestion())) {
            step.value = previousStep;
            return
        }
        isLoadingVisible.value = true
        await saveAnswers()
        isLoadingVisible.value = false
        disableNext.value = true
    }

};

const prevStep = () => {
    step.value--;
};
</script>
<template class="mx-4 mb-3">
    <section>
        <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 class="mx-lg-3 mx-0 mt-4">
            <VCol cols="12" lg="12" md="12">
                <router-link to="/" class="text-center" style="width: 100%;position: relative;display: block;">
                    <span class="text-center">
                        <svg width="32" height="22" viewBox="0 0 32 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M0.00172773 0V6.85398C0.00172773 6.85398 -0.133178 9.01207 1.98092 10.8388L13.6912 21.9964L19.7809 21.9181L18.8042 9.88248L16.4951 7.17289L9.23799 0H0.00172773Z"
                                fill="#7367F0" />
                            <path opacity="0.06" fill-rule="evenodd" clip-rule="evenodd"
                                d="M7.69824 16.4364L12.5199 3.23696L16.5541 7.25596L7.69824 16.4364Z" fill="#161616" />
                            <path opacity="0.06" fill-rule="evenodd" clip-rule="evenodd"
                                d="M8.07751 15.9175L13.9419 4.63989L16.5849 7.28475L8.07751 15.9175Z" fill="#161616" />
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M7.77295 16.3566L23.6563 0H32V6.88383C32 6.88383 31.8262 9.17836 30.6591 10.4057L19.7824 22H13.6938L7.77295 16.3566Z"
                                fill="#7367F0" />
                        </svg>
                    </span>
                    <span class="app-brand-text demo menu-text fw-bold ms-2 ps-1">HGH</span>
                </router-link>
            </VCol>
            <VCol cols="12" :lg="cardValue" md="6" class="mb-5">
                <VCard>
                    <v-stepper :hide-actions="true" alt-labels hide-details v-model="step" :step="step"
                        :items="['', '']">
                        <template v-slot:item.1>
                            <v-card class="p-0" title="" flat>
                                <h4>Payment Information</h4>
                                <VForm ref="paymentForm" @submit.prevent="() => { }">
                                    <VRow>
                                        <VCol cols="12" lg="6" md="6">
                                            <VRow>
                                                <VCol cols="12" lg="12" md="12">
                                                    <VTextField v-model="cardNumber" label="Credit Card Number*"
                                                        :rules="[requiredValidator, cardNumberValidator]"
                                                        placeholder="xxxxxxxxxxxxxxxx" @input="cardNumberFormat" />
                                                </VCol>
                                                <VCol cols="12" lg="6" md="6">
                                                    <VTextField v-model="expiry" label="Expiration Date*"
                                                        :rules="[requiredValidator, expiryValidator]"
                                                        placeholder="MM/YY" @input="formatExpiry" />
                                                </VCol>
                                                <VCol cols="12" lg="6" md="6">
                                                    <VTextField v-model="cvv" :rules="[requiredValidator, cvvValidator]"
                                                        label="CVV*" maxlength="3" @input="handleCVVInput" />
                                                </VCol>
                                            </VRow>
                                        </VCol>
                                        <VCol cols="12" lg="6" md="6">
                                            <svg v-if="!isMobile" xmlns="http://www.w3.org/2000/svg"
                                                xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="auto"
                                                height="150" viewBox="0 0 256 256" xml:space="preserve">

                                                <defs>
                                                </defs>
                                                <g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;"
                                                    transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)">
                                                    <path
                                                        d="M 81.159 25.776 l -0.9 -10.05 c -0.101 -1.123 -1.092 -1.952 -2.215 -1.851 L 1.86 20.698 c -1.123 0.101 -1.952 1.092 -1.851 2.215 l 4.128 46.09 c 0.101 1.123 1.092 1.952 2.215 1.851 l 3.076 -0.276 L 81.159 25.776 z"
                                                        style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(176,182,188); fill-rule: nonzero; opacity: 1;"
                                                        transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
                                                    <path
                                                        d="M 9.428 74.189 c 0 1.074 0.871 1.944 1.944 1.944 h 76.683 c 1.074 0 1.944 -0.871 1.944 -1.944 V 49.73 c -26.255 -4.947 -53.138 -4.734 -80.572 0 V 74.189 z"
                                                        style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(64,89,107); fill-rule: nonzero; opacity: 1;"
                                                        transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
                                                    <path
                                                        d="M 88.056 25.776 H 11.372 c -1.074 0 -1.944 0.871 -1.944 1.945 v 7.719 c 26.857 6.175 53.715 6.175 80.572 0 v -7.719 C 90 26.647 89.129 25.776 88.056 25.776 z"
                                                        style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(64,89,107); fill-rule: nonzero; opacity: 1;"
                                                        transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
                                                    <rect x="9.43" y="35.44" rx="0" ry="0" width="80.57" height="14.29"
                                                        style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(242,242,242); fill-rule: nonzero; opacity: 1;"
                                                        transform=" matrix(1 0 0 1 0 0) " />
                                                    <path
                                                        d="M 51.045 60.484 H 19.469 c -0.552 0 -1 -0.447 -1 -1 s 0.448 -1 1 -1 h 31.576 c 0.553 0 1 0.447 1 1 S 51.598 60.484 51.045 60.484 z"
                                                        style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(242,242,242); fill-rule: nonzero; opacity: 1;"
                                                        transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
                                                    <path
                                                        d="M 37.707 68.001 H 19.469 c -0.552 0 -1 -0.447 -1 -1 s 0.448 -1 1 -1 h 18.238 c 0.552 0 1 0.447 1 1 S 38.259 68.001 37.707 68.001 z"
                                                        style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(242,242,242); fill-rule: nonzero; opacity: 1;"
                                                        transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
                                                    <path
                                                        d="M 51.045 68.001 h -8.574 c -0.552 0 -1 -0.447 -1 -1 s 0.448 -1 1 -1 h 8.574 c 0.553 0 1 0.447 1 1 S 51.598 68.001 51.045 68.001 z"
                                                        style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(242,242,242); fill-rule: nonzero; opacity: 1;"
                                                        transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
                                                    <path
                                                        d="M 81.153 58.484 H 65.638 c -0.553 0 -1 0.447 -1 1 v 7.517 c 0 0.553 0.447 1 1 1 h 15.516 c 0.553 0 1 -0.447 1 -1 v -7.517 C 82.153 58.932 81.706 58.484 81.153 58.484 z"
                                                        style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(242,242,242); fill-rule: nonzero; opacity: 1;"
                                                        transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
                                                </g>
                                            </svg>
                                        </VCol>
                                    </VRow>
                                    <VRow>
                                        <VCol cols="12" md="12">
                                            <p>Payments processed in the United States. Card information secured
                                                by SSL
                                                128
                                                bit encryption.</p>
                                        </VCol>
                                    </VRow>
                                    <v-card class="p-0" title="" flat>
                                        <h4>Billing Information</h4>
                                        <VRow>
                                            <VCol cols="12" md="6">
                                                <VTextField v-model="address" label="Address"
                                                    :rules="[requiredValidator]" />
                                            </VCol>
                                            <VCol cols="12" md="6">
                                                <VTextField v-model="apt" label="APT/Suite #" />
                                            </VCol>
                                        </VRow>
                                        <VRow>
                                            <VCol cols="12" md="4">
                                                <VTextField v-model="city" label="City" :rules="[requiredValidator]" />
                                            </VCol>
                                            <VCol cols="12" md="4">
                                                <v-select v-model="state" label="Select State" :items="states"
                                                    item-title="name" item-value="abbreviation"
                                                    :rules="[requiredValidator]" :error-messages="errors.state">
                                                </v-select>
                                                <!-- <VTextField v-model="state" :rules="[requiredValidator]" label="State" /> -->
                                            </VCol>
                                            <VCol cols="12" md="4">
                                                <VTextField type="number" v-model="zipcode" :rules="[requiredValidator]"
                                                    label="ZipCode" />
                                            </VCol>
                                        </VRow>
                                    </v-card>
                                    <!-- <VRow>
                                        <VCol cols="12" md="5" class="mt-3">
                                            <VCheckbox v-model="termAndCondtiton" @click=billingAddressShow
                                                label="Billing Address same as shipping." />
                                        </VCol>
                                    </VRow> -->

                                    <v-card class="p-0 mt-2" flat v-if="billingSection">

                                        <VRow>
                                            <VCol cols="12" md="6">
                                                <VTextField v-model="billingaddress" label="Address"
                                                    :rules="[requiredValidator]" />
                                            </VCol>
                                            <VCol cols="12" md="6">
                                                <VTextField v-model="billingapt" label="APT/Suite #" />
                                            </VCol>
                                        </VRow>
                                        <VRow>
                                            <VCol cols="12" md="6">
                                                <VTextField v-model="billingcity" label="City"
                                                    :rules="[requiredValidator]" />
                                            </VCol>
                                        </VRow>
                                        <!-- <VRow>
                                        <VCol cols="12" md="6">
                                            <VTextField v-model="email" label="Email"
                                                :rules="[requiredValidator, emailValidator]" />
                                        </VCol>
                                        <VCol cols="6">
                                            <VTextField v-model="phone" label="Phone Number"
                                                pattern="^\(\d{3}\) \d{3}-\d{4}$" :rules="[requiredPhone, validUSAPhone]"
                                                :error-messages="errors.phone" placeholder="i.e. (000) 000-0000"
                                                @input="formatPhoneNumber" />
                                        </VCol>
                                    </VRow>
                                    <VRow>
                                        <VCol cols="6">
                                            <VTextField v-model="dob" :max="getCurrentDate()" label="Date of Birth"
                                                placeholder="Date of Birth" type="date" :rules="[requiredValidator]" />
                                        </VCol>
                                    </VRow> -->
                                    </v-card>
                                </VForm>
                            </v-card>

                        </template>
                        <template v-slot:item.2>
                            <v-card title="" flat>
                                <h5 v-if="!order_complete">Please fill the assesment form carefully.</h5>
                                <VForm v-if="!order_complete" ref="questionForm" @submit.prevent="() => { }">
                                    <div>
                                        <v-row v-for="(q, index) in   questions  " :key="index">
                                            <v-col>
                                                <template v-if="q.type === 'text'">
                                                    <p><b>{{ q.question }}</b></p>
                                                    <v-text-field v-model="answers[q.question_key]"
                                                        :rules="[requiredValidator]" />
                                                </template>
                                                <template v-if="q.type === 'date'">
                                                    <p><b>{{ q.question }}</b></p>
                                                    <v-text-field class="col-lg-4" :max="getCurrentDate()"
                                                        :type="q.type" :rules="[requiredValidator]"
                                                        v-model="answers[q.question_key]" />
                                                </template>
                                                <template v-if="q.type === 'signalCheckbox'">
                                                    <!-- <div class="d-flex">
                                                        <div>
                                                            <VCheckbox v-model="answers[q.question_key]"
                                                                @click="openDialog(q.question_key)">
                                                            </VCheckbox>
                                                        </div>
                                                        <div>
                                                            <span class="text-muted">{{ q.question }} <b class="text-reset"
                                                                    @click="openDialog(q.question_key)"> {{
                                                                        q.linktext }}</b></span>
                                                        </div>
                                                    </div> -->
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox"
                                                            v-model="answers[q.question_key]"
                                                            @click="openDialog(q.question_key)">
                                                        <label class="form-check-label" for="flexCheckDisabled">
                                                            {{ q.question }} <b class="text-reset"
                                                                style="cursor: pointer;"
                                                                @click="openDialog(q.question_key)">{{
            q.linktext }}</b>
                                                        </label>
                                                    </div>
                                                    <!-- <div class="d-flex align-items-center">
                                                        <div>
                                                            <VCheckbox v-model="answers[q.question_key]"
                                                                @click="openDialog(q.question_key)"></VCheckbox>
                                                        </div>
                                                        
                                                        <div>
                                                            <span class="text-muted">
                                                                {{ q.question }}
                                                                <b class="text-reset" style="cursor: pointer;"
                                                                    @click="openDialog(q.question_key)">{{
                                                                        q.linktext }}</b>
                                                            </span>
                                                        </div>
                                                    </div> -->
                                                </template>
                                                <template v-else-if="q.type === 'radio'">
                                                    <p><b>{{ q.question }}</b></p>
                                                    <v-checkbox v-for="(  option, optionIndex  ) in   q.options  "
                                                        :key="optionIndex" v-model="answers[q.question_key]"
                                                        :label="option" :value="option"></v-checkbox>
                                                </template>
                                                <template v-else-if="q.type === 'dropdown'">
                                                    <p><b>{{ q.question }}</b></p>
                                                    <v-select v-model="answers[q.question_key]" :items="q.options"
                                                        label="Select"></v-select>

                                                </template>
                                                <template v-else-if="q.type === 'checkbox'">
                                                    <p><b>{{ q.question }}</b></p>
                                                    <v-checkbox v-model="answers[q.question_key]"
                                                        :label="q.label"></v-checkbox>
                                                    <v-checkbox v-for="(  option, optionIndex  ) in   q.options  "
                                                        :key="optionIndex" :value="option"
                                                        v-model="answers[q.question_key]" :label="option"></v-checkbox>
                                                </template>

                                            </v-col>
                                        </v-row>
                                    </div>
                                </VForm>
                                <VCardText v-if="order_complete">
                                    <VRow>
                                        <VCol cols="12" lg="12" md="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 Order is Complete
                                            </h2>
                                            <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 mb-3" class="text-center">
                                                <RouterLink to="/overview">
                                                    <VBtn> Access Member Portral</VBtn>
                                                </RouterLink>

                                            </VCol>
                                        </VCol>
                                    </VRow>
                                </VCardText>
                            </v-card>
                        </template>
                        <VRow>
                            <VCol col="12" md="6">
                                <v-btn color="grey" @click="prevStep" :disabled="step === 1" v-if="!disableNext"
                                    class="m-4">Previous</v-btn>
                            </VCol>
                            <VCol col="12" md="6">
                                <v-btn @click="nextStep" v-if="!disableNext" class="float-right m-4">Next</v-btn>
                            </VCol>
                        </VRow>
                        <VDialog v-model="isScheduleDialogVisible" refs="myDialog" persistent width="500">
                            <VCard>
                                <VCardItem>
                                    <VCardTitle class="pt-0 text-center text-dark"><b>Next Step:</b> </VCardTitle>
                                    <VCardTitle class="pt-0 text-center text-dark text-wrap"><b>Schedule Your eClinic
                                            Consultation</b>
                                    </VCardTitle>

                                    <VCardText class="pt-2 pb-0 px-0">

                                        In your virtual meeting with your medical professional, you will receive details
                                        about your treatment plan. This will include instructions on medication
                                        administration and helpful tips for achieving the best results.
                                    </VCardText>

                                    <VCardTitle class="text-center m-3">
                                        <VBtn color="error" class="text-center"
                                            @click="isScheduleDialogVisible = false">
                                            Schedule
                                            Now</VBtn>
                                    </VCardTitle>

                                </VCardItem>


                            </VCard>
                        </VDialog>
                        <VDialog v-model="isDialogVisible" refs="myDialog" persistent width="500">
                            <!-- Dialog Content -->
                            <VCard>
                                <VCardText v-if="currentDialoagkey == 'patient_concent'"
                                    title="Male Harmone therapy Patient consent">

                                    <!-- <DialogCloseBtn variant="text" size="small" @click="isDialogVisible = false" /> -->
                                    <VCardText class="pt-0"><b>Med Excel Clinic, P.A. ("Hgh HRT")</b>
                                    </VCardText>
                                    <VCardText><b>Nature of Hormone replacement and supplements therapy</b>
                                    </VCardText>
                                    <VDivider class="m-0"></VDivider>
                                    <VCardText class="scrollable-text px-0 py-3">
                                        I hereby give my consent to be treated using hormone replacement
                                        therapy.
                                        (antioxidants), and other medications prescribed to aid in improving my
                                        overall health. I further consent to receive hormone replacement
                                        therapy.


                                    </VCardText>
                                    <VCardText class="p-0">
                                        <VRow>
                                            <VCol cols="12" lg="6" md="6">
                                                <VTextField v-model="patient_concent_Signature"
                                                    label="Full Name Signature" :rules="[requiredValidator]" />

                                            </VCol>
                                            <VCol cols="12" lg="6" md="6">
                                                <VTextField v-model="date" type="date" disabled label="date"
                                                    :rules="[requiredValidator]" />
                                            </VCol>
                                        </VRow>
                                    </VCardText>
                                    <VCardText class="text-end pt-0 mt-5">
                                        <VBtn @click.prevent="handleContinueClick(currentDialoagkey)">
                                            Continue
                                        </VBtn>
                                    </VCardText>


                                </VCardText>
                                <VCardText v-if="currentDialoagkey == 'appointment_cancel'" title="">
                                    <v-card-title class="p-0">
                                        <span class="headline"><b>Medical Provider consultation
                                                cancellation</b></span>
                                    </v-card-title>
                                    <VDivider></VDivider>
                                    <!-- <DialogCloseBtn variant="text" size="small" @click="isDialogVisible = false" /> -->
                                    <VCardText class="scrollable-text px-0 py-3">
                                        I acknowledge that Hgh Medical charges a $59 for missed
                                        appiontments.
                                    </VCardText>
                                    <VCardText class="p-0">
                                        <VRow>
                                            <VCol cols="12" lg="6" md="6">
                                                <VTextField v-model="appointment_cancel_Signature"
                                                    label="Full Name Signature" :rules="[requiredValidator]" />

                                            </VCol>
                                            <VCol cols="12" lg="6" md="6">
                                                <VTextField v-model="date" type="date" disabled label="date"
                                                    :rules="[requiredValidator]" />
                                            </VCol>
                                        </VRow>
                                    </VCardText>
                                    <VCardText class="text-end pt-0 mt-5">
                                        <VBtn @click.prevent="handleContinueClick(currentDialoagkey)">
                                            Continue
                                        </VBtn>
                                    </VCardText>
                                </VCardText>
                                <VCardText v-if="currentDialoagkey == 'medicare_disclaimer'">
                                    <v-card-title class="p-0">
                                        <span class="headline"><b>DISCLAIMER OF MEDICARE / <br> INSURANCE
                                                BENEFIT</b></span>
                                    </v-card-title>
                                    <VDivider></VDivider>
                                    <!-- <DialogCloseBtn variant="text" size="small" @click="isDialogVisible = false" /> -->
                                    <VCardText class="scrollable-text px-0 py-3">
                                        The patient acknowledge Hgh HRT or any of its
                                        representatives
                                        have made no representation or warranty that the treatment or any
                                        portion
                                        thereof qualifies or will qualify for reimbursement or assignment under
                                        any
                                        other government or private insurance program.
                                    </VCardText>
                                    <VCardText class="p-0">
                                        <VRow>
                                            <VCol cols="12" lg="6" md="6">
                                                <VTextField v-model="medicare_disclaimer_Signature"
                                                    label="Full Name Signature" :rules="[requiredValidator]" />

                                            </VCol>
                                            <VCol cols="12" lg="6" md="6">
                                                <VTextField v-model="date" type="date" disabled label="date"
                                                    :rules="[requiredValidator]" />
                                            </VCol>
                                        </VRow>

                                    </VCardText>
                                    <VCardText class="text-end pt-0 mt-5">
                                        <VBtn @click.prevent="handleContinueClick(currentDialoagkey)">
                                            Continue
                                        </VBtn>
                                    </VCardText>
                                </VCardText>
                                <VCardText v-if="currentDialoagkey == 'telehealth_concent'" title="">
                                    <v-card-title class="p-0">
                                        <span class="headline"><b>Hgh Medical, P.A. Telehealth <br> Informed
                                                Consent</b></span>
                                    </v-card-title>
                                    <VDivider></VDivider>
                                    <!-- <DialogCloseBtn variant="text" size="small" @click="isDialogVisible = false" /> -->
                                    <VCardText class="scrollable-text px-0 py-3">
                                        Telehealth involves the use of secure electronic communications,
                                        information technology, or other means to enable a healthcare provider
                                        and
                                        a patient at different locations to communicate and share individual
                                        patient
                                        health information for the purpose of rendering clinical care. This
                                        "Telehealth Informed Consent" informs the patient ("patient," "you")
                                    </VCardText>
                                    <VCardText class="p-0">
                                        <VRow>
                                            <VCol cols="12" lg="6" md="6">
                                                <VTextField v-model="telehealth_concent_Signature"
                                                    label="Full Name Signature" :rules="[requiredValidator]" />

                                            </VCol>
                                            <VCol cols="12" lg="6" md="6">
                                                <VTextField v-model="date" type="date" disabled label="date"
                                                    :rules="[requiredValidator]" />
                                            </VCol>
                                        </VRow>

                                    </VCardText>
                                    <VCardText class="text-end pt-0 mt-5">
                                        <VBtn @click.prevent="handleContinueClick(currentDialoagkey)">
                                            Continue
                                        </VBtn>
                                    </VCardText>
                                </VCardText>
                                <VCardText v-if="currentDialoagkey == 'secondary_contact'" title="">
                                    <!-- <DialogCloseBtn variant="text" size="small" @click="isDialogVisible = false" /> -->
                                    <v-card-title class="p-0">
                                        <span class="headline"><b>Secondary Disclosure</b></span>
                                    </v-card-title>
                                    <VDivider></VDivider>
                                    <VCardText class="scrollable-text pt-0 px-0 py-0">
                                        Hgh HRT , PC is not permitted by law to provide information
                                    </VCardText>
                                    <VCardText class="p-0">
                                        <VRow>
                                            <VCol cols="12" lg="12" md="6">
                                                <VTextField v-model="auth_information"
                                                    label="Authorize Release of Medical Information to (enter name)    "
                                                    :rules="[requiredValidator]" />
                                            </VCol>
                                        </VRow>
                                        <VRow>
                                            <VCol cols="12" md="6">
                                                <VTextField v-model="dob_auth_person" type="date"
                                                    :max="getCurrentDate()" label="DOB of authorized person above "
                                                    :rules="[requiredValidator]" />
                                            </VCol>
                                            <VCol cols="12" md="6">
                                                <VTextField v-model="relationship_auth_person"
                                                    label="Relationship of authorize person"
                                                    :rules="[requiredValidator]" />
                                            </VCol>
                                        </VRow>
                                    </VCardText>

                                    <VCardText class="p-0">
                                        <VRow>
                                            <VCol cols="12" lg="6" md="6">
                                                <VTextField v-model="secondary_contact_Signature"
                                                    label="Full Name Signature" :rules="[requiredValidator]" />

                                            </VCol>
                                            <VCol cols="12" lg="6" md="6">
                                                <VTextField v-model="date" type="date" disabled label="date"
                                                    :rules="[requiredValidator]" />
                                            </VCol>
                                        </VRow>

                                    </VCardText>
                                    <VCardText class="text-end pt-0 mt-5">
                                        <VBtn @click.prevent="handleContinueClick(currentDialoagkey)">
                                            Continue
                                        </VBtn>
                                    </VCardText>


                                </VCardText>
                            </VCard>

                        </VDialog>
                    </v-stepper>
                </VCard>
            </VCol>


            <VCol cols="12" lg="3" md="6" class="d-none d-sm-block" v-if="step == 1">
                <VCard>
                    <VCardItem class="px-2 py-2">
                        <VCardTitle>Order Summary</VCardTitle>
                    </VCardItem>
                    <VImg :src="OrderSummary" cover />
                    <VCardText>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="accordion" id="accordionExample">
                                    <ul class="list-unstyled">
                                        <li class="pb-2">
                                            <h>
                                                <span class="badge badge-center rounded-pill bg-success p-0 me-2"><i
                                                        class="ti ti-check ti-xs"></i></span>
                                                eClinic Consultation
                                            </h>
                                        </li>
                                        <li class="pb-2">
                                            <h>
                                                <span class="badge badge-center rounded-pill bg-success p-0 me-2"><i
                                                        class="ti ti-check ti-xs"></i></span>
                                                Hormone Test kit
                                            </h>
                                        </li>
                                        <li class="pb-2">
                                            <h>
                                                <span class="badge badge-center rounded-pill bg-success p-0 me-2"><i
                                                        class="ti ti-check ti-xs"></i></span>
                                                Treatment Plan
                                            </h>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <VDivider></VDivider>
                        <VRow>
                            <VCol cols="6">
                                <b>Shipping</b>
                            </VCol>
                            <VCol cols="6">
                                <b class="text-right">Free</b>
                            </VCol>
                        </VRow>
                        <VRow>
                            <VCol cols="6">
                                <b>Total</b>
                            </VCol>
                            <VCol cols="6">
                                <b>$99</b>
                            </VCol>
                        </VRow>
                    </VCardText>
                </VCard>
            </VCol>
        </VRow>
    </section>
</template>
<style>
@media (max-width: 600px) {
    .v-stepper-header {
        display: none;
    }

    .v-stepper-item:not(.v-stepper-item--selected) {
        display: none;
    }

    .v-stepper-item:active(.v-stepper-item--selected) {
        align-items: center;
    }

    .v-stepper--alt-labels .v-stepper-header {
        overflow: hidden;
    }

    .slot-date {
        margin-top: 10px;
    }
}
</style>
<style scoped>
.timezoneDropDown .v-input__control input {
    column-gap: 0px;
}

@media (min-width: 576px) {
    .slot-date {
        padding-top: 10px;
        margin-top: 50px;
    }
}


.backButton {
    cursor: pointer;
}

.fade-slide-enter-active,
.fade-slide-leave-active {
    transition: opacity 0.5s, transform 0.5s;
}

.fade-slide-enter,
.fade-slide-leave-to {
    opacity: 0;
    transform: translateX(20px);
}

.fade-container {
    position: relative;
}

/* Animation for the active button */
.fade-slide-enter-active.active,
.fade-slide-leave-active.active {
    transition: opacity 0.5s, transform 0.5s;
}

.fade-slide-enter.active,
.fade-slide-leave-to.active {
    opacity: 0;
    transform: translateX(0);
}

.scrollable-text {
    min-height: 50px;
    /* Set the maximum height you desire */
    overflow: auto;
    /* Enable vertical scrolling */
}

.text-right {
    text-align: right;
}

.checkbox-container {
    display: flex;
    align-items: flex-start;
}

.text-container {
    margin-left: 10px;
    /* Adjust the margin as needed */
    flex: 1;
    /* Allow the text container to grow and take remaining space */
}
</style>
