<script setup>
import StartOverPupup from '@/views/pages/home/StartOverPupup.vue';
import CustomNav from '../layouts/components/navbar-custom.vue';
import axios from '@axios';
import moment from 'moment-timezone';
import { onBeforeMount, onMounted, onUnmounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
import ProviderInfo from '../layouts/components/ProviderInfo.vue';
const store = useStore()
const router = useRouter()
const route = useRoute()
const isMobile = ref(window.innerWidth <= 768); // Assuming mobile width is less than or equal to 768px

const breadcrumbs = ref([
    { title: 'Register', disabled: false, href: '/register' },
    { title: 'Book Appointment', disabled: true }, // Current page, so no href
]);
const isTonalSnackbarVisible = ref(false)
const patientResponse = ref(false)
const isLoadingVisible = ref(false)
const infoVForm = ref();
const email = ref();
const name = ref();

const showTimeSlots = ref(false)
const isTimeSlot = ref()
const timeSlotString = ref()
const selectTimeZone = ref(null)
const timezone = ref([]);
const filterDate = ref([]);
const calanderFormatedDate = ref();
const calanderSelectedDate = ref();
const scheduleDate = ref();
const selectTimeSlot = ref();
const chooseDate = ref([]);
const isAMPM = ref(false);
const additionalButtonsShown = ref(new Array(5).fill(false));
const orderDate = ref();
const errorMessage = ref()
const drawer = ref()
const timeZoneChanged = ref(false)
const timezonePopup = ref(false)
const showCalendar = ref(true)
const patient_id = localStorage.getItem('patient_id')
const access_token = localStorage.getItem('access_token');
const slotTime = ref(null)
const appointmentDetails = JSON.parse(localStorage.getItem('patient_appointment_details'))
const storedTimeZone = ref(null)
const storedAppointmentDate = ref(null)
const storedAppointmentTime = ref(null)
const storedSlotTime = ref(null)
const seetingPlanLogo = ref();
const dateKeys = ref([])
const monthNumber = ref(null);
const timezoneMap = {
    'EST': 'America/New_York',
    'PST': 'America/Los_Angeles',
    'CST': 'America/Chicago',
    'MST': 'America/Denver'
};
onBeforeMount(async () => {

    store.dispatch('updateIsLoading', true)
    store.dispatch('updateCurrentPage', 'book-appointment')
    localStorage.setItem('currentPage', 'book-appointment')
    await store.dispatch('getPatientInfo')
    await store.dispatch('getPlanInfo')
    if (store.getters.getBookedAppointment.slot_time) {
        await store.dispatch('getPatientAppointment')
        //If store have values
        selectTimeZone.value = store.getters.getBookedAppointment.timezone
        calanderFormatedDate.value = store.getters.getBookedAppointment.appointment_date
        isTimeSlot.value = store.getters.getBookedAppointment.appointment_time
        slotTime.value = store.getters.getBookedAppointment.slot_time

        storedTimeZone.value = store.getters.getBookedAppointment.timezone
        storedAppointmentDate.value = store.getters.getBookedAppointment.appointment_date
        storedAppointmentTime.value = store.getters.getBookedAppointment.appointment_time
        storedSlotTime.value = store.getters.getBookedAppointment.slot_time

    }
    console.log(appointmentDetails)
    if (appointmentDetails) {
        selectTimeZone.value = appointmentDetails.timezone
        calanderFormatedDate.value = appointmentDetails.appointment_date
        isTimeSlot.value = appointmentDetails.appointment_time
        slotTime.value = appointmentDetails.timeSlotString

        storedTimeZone.value = appointmentDetails.timezone
        storedAppointmentDate.value = appointmentDetails.appointment_date
        storedAppointmentTime.value = appointmentDetails.appointment_time
        storedSlotTime.value = appointmentDetails.timeSlotString
    }


    name.value = store.getters.getPatient.first_name + ' ' + store.getters.getPatient.last_name
    email.value = store.getters.getPatient.email
    console.log(email.value)

    if (selectTimeZone.value || calanderFormatedDate.value || isTimeSlot.value || slotTime.value) {

        if (calanderFormatedDate.value)
            await getAvailableSlots(calanderFormatedDate.value)
        if (slotTime.value) {
            const entries = Object.entries(chooseDate.value)
            for (const [index, [key, tempSlot]] of entries.entries()) {
                if (tempSlot == slotTime.value)
                    timeSlot(index, tempSlot)
            }
        }
    }
    if (!selectTimeZone.value) {
        // selectTimeZone.value = moment.tz.guess();
        // List of allowed IANA timezones
        const allowedTimezones = Object.values(timezoneMap);

        // Get the guessed timezone
        let guessedTimezone = moment.tz.guess();

        // Check if the guessed timezone is in the allowed list, fallback to EST if not
        if (!allowedTimezones.includes(guessedTimezone)) {
            guessedTimezone = 'America/New_York'; // Fallback to EST
        }
        const selectedAbbreviation = Object.keys(timezoneMap).find(key => timezoneMap[key] === guessedTimezone) || 'EST';
        // Set the initial selected timezone
        selectTimeZone.value = selectedAbbreviation;

        console.log('Current Timezone:', selectTimeZone.value);
    }
    //Calendly API
    let currentDate = null
    if(scheduleDate.value) currentDate = new Date(scheduleDate.value); else currentDate = new Date();
    monthNumber.value = currentDate.getMonth() + 1;
    const monthName = new Intl.DateTimeFormat('en-US', { month: 'long' }).format(currentDate);
    console.log('month loaded',monthName,monthNumber.value)
    await store.dispatch('getCalendlyAvailableSlots', {
        month: monthNumber.value,
        timezone:selectTimeZone.value
    })
    dateKeys.value = Object.keys(store.getters.getCalendlyAvailableTImes);
    console.log('>>>dateKeys>>',dateKeys.value);
    // let availableSlots = [];
    // availableSlots = store.getters.getCalendlyAvailableTImes.map(item => item.start_time + ':00');
    // console.log('//////availableSlots/////',availableSlots);
    store.dispatch('updateIsLoading', false)

})
onMounted(async () => {


    window.addEventListener('resize', checkIfMobile);

    const timezones = reactive(
        Object.entries(timezoneMap).map(([abbreviation, 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');

            if (isAMPM.value == false) {
                return {
                    name: abbreviation,
                    abbreviation: abbreviation,
                };
            } else {
                return {
                    name: `${abbreviation} (${nowformattedOffset})`,
                    abbreviation: abbreviation,
                };
            }
        })
    );

    timezone.value = timezones;

    let setting = await axios.post('/api/settings', {})
    // console.log(setting.data)
    seetingPlanLogo.value = '/assets/logo/' + setting.data.logo

    
})
// Detach event listener on component unmount
onUnmounted(() => {
    window.removeEventListener('resize', checkIfMobile);
});
const changeTimeZone = () => {
    timeZoneChanged.value = true
    timezonePopup.value = true
}
const changeDate = () => {
    showCalendar.value = true
}
const checkIfMobile = () => {
    isMobile.value = window.innerWidth <= 768;
};
const handleDateInput = async () => {
    console.log('handleDateInput')
    if (!calanderSelectedDate.value) {
        isTonalSnackbarVisible.value = true
        errorMessage.value = 'Please select any date from calander';
        return
    }
    timeZoneChanged.value = false
    timezonePopup.value = false
    chooseDate.value = [];
    isLoadingVisible.value = true;
    drawer.value = !drawer.value
    // scheduleDate.value = '';
    console.log("calanderDate", calanderSelectedDate.value);

    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);
    const tempDate = new Date(formattedDate);
    const tempMonth = tempDate.getMonth();
    const tempMonthNumber = tempMonth + 1;
    if (calanderFormatedDate.value) {
        await getAvailableSlots(calanderFormatedDate.value)
        await store.dispatch('getCalendlyAvailableSlots', {
            month: tempMonthNumber,
            timezone:selectTimeZone.value
        })
        dateKeys.value = Object.keys(store.getters.getCalendlyAvailableTImes);
    } else {
        chooseDate.value = [];
    }
};
const monthUpdate = async(event) => {
    const currentYear = new Date().getFullYear();
    const monthName = getMonthName(event+1, currentYear); 
    console.log('month updated',monthName)
    await store.dispatch('getCalendlyAvailableSlots', {
        month: event+1,
        timezone:selectTimeZone.value
    })
    dateKeys.value = Object.keys(store.getters.getCalendlyAvailableTImes);
};
const getMonthName = (monthNumber, year = new Date().getFullYear()) => {
    const date = new Date(year, monthNumber - 1);
    return new Intl.DateTimeFormat('en-US', { month: 'long' }).format(date);
}
const getFormattedDatetimes = (date) => {
  // Ensure the date is in the format "YYYY-MM-DD"
  const formattedDate = date.replace(/\//g, '-');
  let obj = store.getters.getCalendlyAvailableTImes
  console.log('//////formattedDate',formattedDate,obj)
  // Check if the date exists in the object
  if (obj.hasOwnProperty(formattedDate)) {
    // If it does, map over the array and return formatted_datetime values
    return obj[formattedDate].map(item => item.formatted_datetime);
  } else {
    // If the date doesn't exist, return an empty array
    return [];
  }
}
const getAvailableSlots = async (date) => {
    console.log('access_token', access_token)
    await store.dispatch('updateSelectedTimezone', selectTimeZone.value)
    await store.dispatch('getAvailableSlotsData', {
        date: date,
    })
    console.log(store.getters.getSelectedTimezone)

    console.log('My Slots >>>>>',getFormattedDatetimes(date));

    let scheduleTime = store.getters.getSelectedTimezone
    chooseDate.value = getTimeSlotsForDate(getFormattedDatetimes(date), date, scheduleTime);
    console.log('>>>Slots--', chooseDate.value)
    // getTimeSlots(chooseDate.value, scheduleTime);
    console.log(filteredSlots.value)
    if (filteredSlots.value) {
        showCalendar.value = false
    } else {
        isTonalSnackbarVisible.value = true
        errorMessage.value = 'No Slots Availabe'
    }

}
const getTimeSlotsForDate = (timeSlots, date, timezone = 'EST') => {
    // Define the start and end time in the specified timezone
    const startTime = moment.tz(`${date} 00:00:00`, 'YYYY-MM-DD HH:mm:ss', timezone);
    const endTime = moment.tz(`${date} 23:59:00`, 'YYYY-MM-DD HH:mm:ss', timezone);
    const formattedSlots = {};

    for (const [key, value] of Object.entries(timeSlots)) {
        const slotTime = moment.tz(value, 'YYYY-MM-DD HH:mm:ss', timezone);

        // if (slotTime.isSameOrAfter(startTime) && slotTime.isSameOrBefore(endTime)) {
            formattedSlots[key] = slotTime.format('hh:mm A');
        // }
    }

    return formattedSlots;
};
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 timeSlot = (index, selectedTime) => {
    console.log('selectedTime', index, selectedTime)
    selectTimeSlot.value = selectedTime
    // 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 = async () => {
    // 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;

    await scheduleEvent()


    // Handle the logic for the "Next" button, if needed
    // console.log(`Next button clicked for ${index}:00 pm`);
};
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 scheduleEvent = async () => {
    isTimeSlot.value = '';
    // console.log("sdsadsd", selectTimeZone.value);
    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;
        timeSlotString.value = timeString
        console.log("timeSlot", timeString);
        // 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);
    }

    console.log('', calanderFormatedDate.value, isTimeSlot.value)
    if (!selectTimeSlot.value || isTimeSlot.value == 'Invalid date') {
        isLoadingVisible.value = false;
        isTonalSnackbarVisible.value = true;
        errorMessage.value = "Please select a time slot"
        return

    }
    // 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);
    if (storedTimeZone.value == selectTimeZone.value
        && storedAppointmentDate.value == calanderFormatedDate.value
        && storedAppointmentTime.value == isTimeSlot.value) {
        isLoadingVisible.value = true;
        router.replace(route.query.to && route.query.to != '/book-appointment' ? String(route.query.to) : '/review-appointment')

    } else {
        console.log('>>>>>get URl',calanderFormatedDate.value,isTimeSlot.value,getSchedulingUrl(store.getters.getCalendlyAvailableTImes,calanderFormatedDate.value,isTimeSlot.value))
        let apptData = {
            patient_id: patient_id,
            patient_name: name.value,
            patient_email: email.value,
            appointment_date: calanderFormatedDate.value,
            appointment_time: isTimeSlot.value,
            timezone: selectTimeZone.value,
            timeSlotString: timeSlotString.value,
            url:getSchedulingUrl(store.getters.getCalendlyAvailableTImes,calanderFormatedDate.value,isTimeSlot.value),
        }
        // await openSchedulingURL(apptData.appointment_date, apptData.appointment_time);
        localStorage.setItem('patient_appointment_details', JSON.stringify(apptData))
        console.log(JSON.parse(localStorage.getItem('patient_appointment_details'))) 
        // await store.dispatch('savePatientAppointment', {
        //     patient_id: patient_id,
        //     patient_name: name.value,
        //     patient_email: email.value,
        //     appointment_date: calanderFormatedDate.value,
        //     appointment_time: isTimeSlot.value,
        //     timezone: selectTimeZone.value,
        //     timeSlotString: timeSlotString.value
        // })
        // if (localStorage.getItem('patient_appointment_id'))
        
        router.replace(route.query.to && route.query.to != '/book-appointment' ? String(route.query.to) : '/review-appointment')

    }



}
const normalizeTime = (dateTime) => {
    // Split the date and time
    const [date, time] = dateTime.split(' ');
    
    // Split time into hours, minutes, and seconds
    let [hours, minutes, seconds] = time.split(':');
    
    // Remove leading zero from hours if present
    hours = hours.replace(/^0+/, '');

    // Return the normalized date and time string
    return `${date} ${hours}:${minutes}:${seconds}`;
}

const getSchedulingUrl = (records, date, time) => {
    // Normalize the input time to match the format in records
    const targetDateTime = normalizeTime(`${date} ${time}`);
    
    // Check if the given date exists in the records
    if (records[date]) {
        // Loop through the array of objects for the given date
        for (let record of records[date]) {
            // Normalize the record's formatted_datetime for comparison
            const recordDateTime = normalizeTime(record.formatted_datetime);
            
            // Compare the normalized formatted_datetime with the target datetime
            if (recordDateTime === targetDateTime) {
                // Return the scheduling URL if a match is found
                return record.scheduling_url;
            }
        }
    }
    
    // Return null if no matching record is found
    return null;
}
const openSchedulingURL = (date, time) => {
    console.log('date, time',date, time,time.slice(0,5),store.getters.getCalendlyAvailableTImes)
    return new Promise((resolve) => {
        const dateTime = `${date} ${time.slice(0,5)}`;
        const record = store.getters.getCalendlyAvailableTImes.find(item => item.start_time === dateTime);

        if (record && record.scheduling_url) {
            const newWindow = window.open(record.scheduling_url, '_blank');
            
            // Set up an interval to check if the window has been closed
            const checkWindow = setInterval(() => {
                if (newWindow.closed) {
                    clearInterval(checkWindow);
                    resolve();
                }
            }, 1000);
        } else {
            console.log('No matching record found.');
            resolve(); // Resolve immediately if no matching record
        }
    });
};
// const minDate = computed(() => {
//     const today = new Date();
//     return new Date(today.getFullYear(), today.getMonth(), today.getDate());
// });
const minDate = computed(() => {

// const today = new Date();
// const tomorrow = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
// return tomorrow;

// Replace selectTimeZone with the actual variable containing the timezone

let tz = timezoneMap[selectTimeZone.value] || 'America/New_York';

const today = moment().tz(tz);
console.log('today EST >>>', today.format(), tz, selectTimeZone.value);

const tomorrow = today.add(0, 'day');
console.log('tomorrow EST >>>', tomorrow.format());

return tomorrow.format('YYYY-MM-DD'); // Returns date in YYYY-MM-DD format

});

const allowedDates = computed(async () => {
    return dateKeys
});


const maxDate = computed(() => {
    const threeMonthsLater = new Date();
    threeMonthsLater.setMonth(threeMonthsLater.getMonth() + 3);
    return new Date(
        threeMonthsLater.getFullYear(),
        threeMonthsLater.getMonth(),
        threeMonthsLater.getDate()
    );
});
const filteredSlots = computed(() => {
    filterDate.value = []
    console.log('here', calanderSelectedDate.value)
    const today = new Date();
    const todayDateString = today.toISOString().substr(0, 10); // Get today's date in YYYY-MM-DD format
    // console.log("todayDateString", todayDateString);

    if (!storedAppointmentDate.value || calanderSelectedDate.value) {
        const formattedDate = new Intl.DateTimeFormat('en-US', {
            weekday: 'long',
            month: 'long',
            day: 'numeric',
            year: 'numeric',
        }).format(calanderSelectedDate.value);
        scheduleDate.value = formattedDate;

    } else {
        const date = moment(storedAppointmentDate.value);
        scheduleDate.value = date.format('dddd, MMMM D, YYYY');
    }
    let isTodaySlotAvailable = false;
    const entries = Object.entries(chooseDate.value);
    console.log("entries", entries);
    for (const [_, slotValue] of entries) {
        if (calanderFormatedDate.value === todayDateString) {
            console.log('if');
            filterDate.value.push(slotValue);
        } else {
            console.log('else');
            showCalendar.value = true;
            return chooseDate.value;
        }
    }
    return filterDate.value

});
const backFun = () => {
    store.dispatch('updateIsLoading', true)
    router.replace(route.query.to && route.query.to != '/book-appointment' ? String(route.query.to) : '/register')
}
</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>
    <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'">
                <!-- <v-app> -->
                <!-- <v-navigation-drawer v-model="drawer" app temporary v-if="isMobile">
            <v-list>
                <p class="text-center mb-3 mt-4 px-2">{{ scheduleDate }}</p>
                <div style="">
                    <div v-if="!filteredSlots">
                        <h4 class="text-center text-danger"> No slot available </h4>
                    </div>
                    <div v-else class="text-center mb-1 px-2 pb-1 "
                        v-for="(  choosetimeframes, index  ) in   filteredSlots  " :key="index">
                        <div>
                            <v-btn @click="timeSlot(index)" class="mb-2 mx-3 px-5 py-2 w-50" variant="outlined"
                                v-if="!additionalButtonsShown[index]">
                                {{ choosetimeframes }}
                            </v-btn>

                            <div class="mb-2 d-flex" v-if="additionalButtonsShown[index]">
                                <v-btn class="ma-auto mr-0 px-3 py-2 w-50">{{ choosetimeframes
                                    }}</v-btn> &nbsp;
                                <v-btn class="ma-auto px-2 py-2 w-50 pl-2" color="error"
                                    @click="nextButton(choosetimeframes)">Next</v-btn>
                            </div>
                        </div>

                    </div>

                </div>
            </v-list>
        </v-navigation-drawer> -->

                <!-- <v-app-bar app>
            <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
            <v-toolbar-title>My App</v-toolbar-title>
        </v-app-bar> -->

                <!-- <v-main> -->
                <div class="rounded-top">
                    <!-- <VContainer> -->
                    <!-- <div class="auth-wrapper d-flex align-center justify-center pa-4"> -->

                    <VRow class="">
                        <!-- <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> -->
                        <VCol cols="12" md="12">
                            <div class="text-center">
                                <h5 class="text-h5 mb-1 text-center mb-4">
                                    Book Your TeleHealth Doctor Appointment
                                </h5>
                            </div>
                        </VCol>
                        <!-- <VCol cols="12" md="3" v-if="!isMobile"></VCol>
                        <VCol cols="12" md="8">
                            <v-breadcrumbs :items="breadcrumbs" class="pt-0 pb-0 px-8">
                                <template v-slot:divider>
                                    <v-icon icon="mdi-chevron-right"></v-icon>
                                </template>
</v-breadcrumbs>
</VCol> -->
                        <!-- <VCol cols="12" md="3" v-if="!isMobile"></VCol> -->
                        <VCol cols="12" md="12">
                            <div class="auth- align-center justify-center" :class="isMobile ? '' : 'pa-4'">
                                <VCard style="background: no-repeat;box-shadow: none;">
                                    <!-- <div class="text-center mt-4">
                                        <h4 class="text-h4 pricing-title mb-4">
                                            Book an Appointment
                                        </h4>
                                    </div> -->
                                    <!-- <VCardText> -->

                                    <VRow class="">
                                        <!-- <VCol cols="12" md="2" v-if="!isMobile"></Vcol> -->
                                        <VCol cols="12" md="12">
                                            <div>
                                                <strong>Timezone: </strong> <span>{{ selectTimeZone }}</span>
                                            </div>
                                            <div class="text-right pt-2 pb-2">
                                                <a class="mb-2" @click="changeTimeZone"
                                                    style="cursor: pointer;text-decoration: underline; color: blue;">Change
                                                    Timezone</a>
                                            </div>
                                            <!-- <v-container> -->
                                            <!-- <VRow class="justify-end">
                                                    <v-col class="justify-end">
                                                        <v-switch v-model="isAMPM" @change="handleSwitchChange"
                                                            :label="isAMPM ? '24-hour' : 'am/pm'"></v-switch>
                                                    </v-col>
                                                </VRow> -->
                                            <VRow>
                                                <!-- <v-col cols="12" md="12">
                                                        <a class="mb-0 text-primary" @click="backFun"
                                                            style="cursor: pointer;"><v-icon class="mb-0"
                                                                color="primary" icon="mdi-arrow-left"
                                                                size="20"></v-icon> Back</a>
                                                    </v-col> -->
                                                <!-- <v-col cols="12" md="6">
                                                        <h5>Time zone</h5>
                                                        <p>{{ selectTimeZone }}</p>
                                                    </v-col>
                                                    <v-col cols="12" md="6">
                                                        <a class="mb-2" @click="changeTimeZone"
                                                            style="cursor: pointer;text-decoration: underline; color: blue;">Change
                                                            Timezone</a>
                                                    </v-col> -->
                                                <v-col cols="12" md="12" v-if="!showCalendar">
                                                    <v-btn class="mb-2 " @click="changeDate" v-if="!showCalendar"
                                                        block>Change
                                                        Date</v-btn>
                                                </v-col>
                                                <!-- <v-col cols="12" md="12" v-if="timeZoneChanged">
                                                        <v-autocomplete label="Time Zone" v-model="selectTimeZone"
                                                            style="column-gap: 0px;" :items="timezone" item-title="name"
                                                            item-value="abbreviation"
                                                            @update:modelValue="handleDateInput"></v-autocomplete>
                                                    </v-col> -->
                                            </VRow>
                                            <!-- </v-container> -->
                                        </VCol>
                                    </VRow>
                                    <VRow :class="isMobile ? '' : 'px-2'" v-if="showCalendar">
                                        <!-- <VCol cols="12" md="2" lg="2" v-if="!isMobile"></VCol> -->
                                        <VCol cols="12" md="12">
                                            <v-flex>
                                                <v-date-picker color="rgb(var(--v-theme-yellow-theme-button))"
                                                    v-model="calanderSelectedDate" @update:modelValue="handleDateInput"
                                                    :min="minDate" :max="maxDate" width="100%"
                                                    hide-header :allowed-dates="dateKeys" @update:month="monthUpdate"></v-date-picker>


                                            </v-flex>


                                        </VCol>

                                    </VRow>
                                    <VRow :class="isMobile ? '' : 'px-2'" v-if="!showCalendar">
                                        <v-col cols="12" md="12" class="text-center tslot-date pl-4">
                                            <p class="text-center mb-3">{{ scheduleDate }}</p>
                                            <div class="text-center">
                                                <div v-if="!filteredSlots || filteredSlots.length == 0">
                                                    <h4 class="text-center text-danger"> No slot available </h4>
                                                </div>
                                                <span v-else class=" mr-2"
                                                    v-for="(   choosetimeframes, index   ) in filteredSlots   "
                                                    :key="index">
                                                    <!-- v-if="choosetimeframes >= current_scHeduleTime" -->
                                                    <!-- <div> -->
                                                    <v-btn @click="timeSlot(index, choosetimeframes)"
                                                        class="mb-2 px-3 py-2" variant="outlined"
                                                        v-if="!additionalButtonsShown[index]"
                                                        color="rgb(var(--v-theme-yellow-theme-button))">
                                                        {{ choosetimeframes }}
                                                    </v-btn>

                                                    <span v-if="additionalButtonsShown[index]">
                                                        <v-btn class="mb-2 px-3 py-2">{{ choosetimeframes
                                                            }}</v-btn>
                                                        <!-- <v-btn class="ma-auto px-2 py-2 w-50 pl-2" color="error"
                                                        @click="nextButton(choosetimeframes)">Next</v-btn> -->
                                                    </span>
                                                    <!-- </div> -->

                                                </span>
                                                <!-- </div> -->

                                            </div>
                                        </v-col>

                                    </VRow>
                                    <VRow>
                                        <VCol cols="12" md="12" class="text-center" v-if="!showCalendar">
                                            <VBtn
                                                class=" text-capitalize text-white d-grid waves-effect waves-light px-4"
                                                color="rgb(var(--v-theme-yellow-theme-button))" variant="flat"
                                                @click="nextButton()" block>
                                                Next</VBtn>
                                        </VCol>
                                    </VRow>
                                    <!-- </VCardText> -->
                                </VCard>
                            </div>
                        </VCol>

                        <VCol cols="12" md="12">
                            <VDialog v-model="timezonePopup" refs="myDialog" persistent width="500">

                                <!-- <template v-slot:default="{ isActive }"> -->
                                <v-card title="Change Time Zone">
                                    <v-card-text v-if="timeZoneChanged">
                                        <VRow>
                                            <v-col cols="12" md="12">
                                                <v-autocomplete label="Time Zone" v-model="selectTimeZone"
                                                    style="column-gap: 0px;" :items="timezone" item-title="name"
                                                    item-value="abbreviation"
                                                    @update:modelValue="handleDateInput"></v-autocomplete>
                                            </v-col>
                                        </VRow>

                                    </v-card-text>

                                    <v-card-actions>
                                        <v-spacer></v-spacer>

                                        <v-btn text="Close" @click="timezonePopup = false"></v-btn>
                                    </v-card-actions>
                                </v-card>
                                <!-- </template> -->
                            </VDialog>
                        </VCol>

                    </VRow>

                    <!-- </div> -->
                    <!-- </VContainer> -->
                </div>
                <!-- </v-main> -->
                <!-- </v-app> -->
            </VCard>
        </VCol>
    </VRow>

</template>
<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>
<style lang="scss">
.bg-custom {
    background: #efefed;
}

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

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

.card-title {
    font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

.logo-img {
    display: block;
    position: relative;
    margin: 0 auto;
}

.v-date-picker-controls__month-btn,
.v-date-picker-controls__mode-btn {
    display: none;
}

// @media (min-width: 280px) and (max-width: 768px) {
.v-date-picker-month__day .v-btn {
    --v-btn-height: 20px !important;
}

.v-date-picker-month__day {
    height: auto !important;
    width: auto !important;
}

.v-date-picker-month {
    min-width: 100% !important;
}

.bg-primary {
    background-color: rgb(var(--v-theme-grey-900)) !important;
}

.text-primary {
    color: rgb(var(--v-theme-yellow)) !important;
}

// }
</style>
