<script setup>
import moment from "moment-timezone";
import { computed, defineProps, onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
const isMeetingEnable = ref(false);
const isMeetingEnd = ref(true);
const meetingInFuture = ref(true);
const props = defineProps({
    upcommingAppiontmetns: {
        type: Array,
        required: true,
    },
    date: {
        type: String,
        required: true,
    },
    orderid: {
        type: String,
        required: true,
    },
    time: {
        type: String,
        required: true,
    },
    timezone: {
        type: String,
        required: true,
    },
    timeDiff: {
        type: String,
        //required: true,
    },
    showShipment: {
        type: String,
        required: true,
    },
    iscallEnd: {
        type: String,
        required: true,
    },
    isShippmentAmmount: {
        type: String,
        required: true,
    },
    isItem: {
        type: String,
        required: true,
    },
    isStatus: {
        type: String,
        required: true,
    },
});
const router = useRouter();
const store = useStore();
const orders = ref([]);
const selectedDate = ref();
const upcommingAppiontmetns = ref([]);

const treatmentPlan = computed(() => {
    console.log("upcommingData-----------------", props.upcommingAppiontmetns);

    let d = props.upcommingAppiontmetns.map((appiontment) => ({
        ...appiontment,
        appointment_date: getConvertedDate(
            convertUtcTime(
                appiontment.appointment_time,
                appiontment.appointment_date,
                appiontment.timezone
            )
        ),
        appointment_time: getConvertedTime(
            convertUtcTime(
                appiontment.appointment_time,
                appiontment.appointment_date,
                appiontment.timezone
            )
        ),
        isMeeting: convertAndCheckTime(
            convertAndGetTimeDifference(
                appiontment.appointment_time,
                appiontment.appointment_date,
                appiontment.timezone
            )
        ),
        utcConverted: convertUtcTime(
            appiontment.appointment_time,
            appiontment.appointment_date,
            appiontment.timezone
        ),
        timeDifference: convertAndGetTimeDifference(
            appiontment.appointment_time,
            appiontment.appointment_date,
            appiontment.timezone
        ),
    }));
    upcommingAppiontmetns.value = d;
    console.log("upcommingAppiontmetnsAsif>>>>", upcommingAppiontmetns.value);
    return upcommingAppiontmetns.value;
});
const convertUtcTime = (time, date, timezone) => {
    const timezones = {
        EST: "America/New_York",
        CST: "America/Chicago",
        MST: "America/Denver",
        PST: "America/Los_Angeles",
        // Add more mappings as needed
    };

    // Get the IANA timezone identifier from the abbreviation
    const ianaTimeZone = timezones[timezone];

    if (!ianaTimeZone) {
        throw new Error(`Unknown timezone abbreviation: ${timezone}`);
    }

    // Combine date and time into a single string
    const dateTimeString = `${date}T${time}Z`; // Assuming the input date and time are in UTC

    // Create a Date object from the combined string
    const dateObj = new Date(dateTimeString);

    // Options for the formatter
    const options = {
        timeZone: ianaTimeZone,
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
        hour12: false,
    };

    // Create the formatter
    const formatter = new Intl.DateTimeFormat("en-US", options);

    // Format the date
    const convertedDateTime = formatter.format(dateObj);

    return convertedDateTime;
};
const getConvertedTime = (inputDate) => {
    // Split the input date string into date and time components
    const [datePart, timePart] = inputDate.split(", ");

    // Split the time component into hours, minutes, and seconds
    let [hours, minutes, seconds] = timePart.split(":");

    // Convert the hours to an integer
    hours = parseInt(hours);

    // Determine the period (AM/PM) and adjust the hours if necessary
    const period = hours >= 12 ? "PM" : "AM";
    hours = hours % 12 || 12; // Convert 0 and 12 to 12, and other hours to 1-11

    // Format the time as desired
    const formattedTime = `${hours
        .toString()
        .padStart(2, "0")}:${minutes}${period}`;

    return formattedTime;
};
const getConvertedDate = (inputDate) => {
    // Split the input date string into date and time components
    const [datePart, timePart] = inputDate.split(", ");

    // Split the date component into month, day, and year
    const [month, day, year] = datePart.split("/");

    // Create a new Date object from the parsed components
    const dateObject = new Date(`${year}-${month}-${day}T${timePart}`);

    // Define an array of month names
    const monthNames = [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December",
    ];

    // Format the date as desired
    const formattedDate = `${
        monthNames[dateObject.getMonth()]
    } ${day}, ${year}`;

    return formattedDate;
};
const convertAndGetTimeDifference = (time, date, timezone) => {
    const timezones = {
        EST: "America/New_York",
        CST: "America/Chicago",
        MST: "America/Denver",
        PST: "America/Los_Angeles",
        // Add more mappings as needed
    };

    // Get the IANA timezone identifier from the abbreviation
    const ianaTimeZone = timezones[timezone];

    if (!ianaTimeZone) {
        throw new Error(`Unknown timezone abbreviation: ${timezone}`);
    }

    // Combine date and time into a single string
    const dateTimeString = `${date}T${time}Z`; // Assuming the input date and time are in UTC

    // Create a Date object from the combined string
    const dateObj = new Date(dateTimeString);

    // Get the current date and time
    const now = new Date();

    // Calculate the time difference in milliseconds
    const timeDifference = dateObj - now;

    // Convert the time difference to a human-readable format
    const diffInSeconds = Math.abs(timeDifference) / 1000;
    const diffInMinutes = Math.floor(diffInSeconds / 60) % 60;
    const diffInHours = Math.floor(diffInSeconds / 3600);

    let timeLeftOrAgo;
    if (timeDifference > 0) {
        if (diffInHours > 0) {
            timeLeftOrAgo = `${diffInHours} hour${
                diffInHours > 1 ? "s" : ""
            } ${diffInMinutes} minute${diffInMinutes > 1 ? "s" : ""} left`;
        } else {
            timeLeftOrAgo = `${diffInMinutes} minute${
                diffInMinutes > 1 ? "s" : ""
            } left`;
        }
    } else {
        if (diffInHours > 0) {
            timeLeftOrAgo = `${diffInHours} hour${
                diffInHours > 1 ? "s" : ""
            } ${diffInMinutes} minute${diffInMinutes > 1 ? "s" : ""} ago`;
        } else {
            timeLeftOrAgo = `${diffInMinutes} minute${
                diffInMinutes > 1 ? "s" : ""
            } ago`;
        }
    }

    return timeLeftOrAgo;
};
const convertAndCheckTime = (str) => {
    return str.includes("ago");
};
const upComingAppiontmentTime = (date, time) => {
    console.log("formateTime ------------", date, time);
    let ftime = convertUtcDateTimeToLocal(date, time, "time");
    let fdate = convertUtcDateTimeToLocal(date, time, "date");
    // return
    console.log(
        ">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>",
        relativeTimeFromDate(date, time)
    );
    return relativeTimeFromDate(date, time);
};
const relativeTimeFromDate = (dateString, timeString) => {
    // Combine the date and time into a full datetime, treated as local time
    const eventDateTime = new Date(dateString + "T" + timeString);

    // Get the current date and time
    const now = new Date();

    // Calculate the difference in milliseconds between the event time and now
    const diffMs = eventDateTime - now;

    // Check if the event time is in the past and log it to the console if it is
    if (diffMs > 0) {
        // showTimeBar.value = true
        console.log("The event time is in the past.");
    }

    // Convert the difference to an absolute value
    const absDiffMs = Math.abs(diffMs);

    // Calculate differences in days, hours, and minutes
    const minutes = Math.floor(absDiffMs / 60000) % 60;
    const hours = Math.floor(absDiffMs / 3600000) % 24;
    const days = Math.floor(absDiffMs / 86400000);

    // Determine the appropriate suffix based on whether the date is in the future or past
    const suffix = diffMs < 0 ? " ago" : " left";

    // Result formulation based on the above logic
    if (days > 0) {
        return `${days} day${days > 1 ? "s" : ""}${suffix}`;
    } else {
        // Compose hours and minutes
        let result = [];
        if (hours > 0) {
            result.push(`${hours} hour${hours > 1 ? "s" : ""}`);
        }
        if (minutes > 0) {
            result.push(`${minutes} minute${minutes > 1 ? "s" : ""}`);
        }
        if (result.length === 0) {
            return "just now";
        }
        return result.join(" ") + suffix;
    }
};
const isMeetingFuture = ref();
const app_time = (appiontment) => {
    let localTime = convertUtcDateTimeToLocal(
        appiontment.appointment_date,
        appiontment.appointment_time,
        "time"
    );
    return moment(localTime, "HH:mm:ss").format("hh:mm A");
};
const app_date = (appiontment) => {
    let localDate = convertUtcDateTimeToLocal(
        appiontment.appointment_date,
        appiontment.appointment_time,
        "date"
    );
    return moment(localDate, "YYYY-MM-DD").format("MMMM DD, YYYY");
};
const isMeetingAllow = (appiontment) => {
    // console.log('IsMeeting', appiontment);
    let originalDate = convertUtcDateTimeToLocal(
        appiontment.appointment_date,
        appiontment.appointment_time,
        "date"
    );
    let momentDate = moment(originalDate, "YYYY-MM-DD").format("MMMM DD, YYYY");
    let originalTime = convertUtcDateTimeToLocal(
        appiontment.appointment_date,
        appiontment.appointment_time,
        "time"
    );
    let momentTime = moment(originalTime, "HH:mm:ss").format("hh:mm A");

    console.log("originalDateTime", momentDate, " ", momentTime);
    isMeetingFuture.value = isDateTimeInFuture(momentDate, momentTime);
    console.log("isMeetingFuture", isMeetingFuture.value);
    if (appiontment.end_time && !meetingInFuture.value) {
        return false;
        // isMeetingEnable.value = false;
        // isMeetingEnd.value = false;
        console.log("Bth Conditin");
    } else if (appiontment.end_time) {
        // Call has been end
        return false;
        // isMeetingEnable.value = false;

        // isMeetingEnd.value = false;

        console.log("callEnd");
        //!meetingInFuture.value = true;
    } else if (!meetingInFuture.value) {
        // Patient can Join Meeting
        // isMeetingEnable.value = true;
        return true;
        console.log("timeDiff");
    } else {
        // Call has been end
        console.log("else");
        return false;
        // isMeetingEnable.value = false;

        // isMeetingEnd.value = true;
    }
    // return isMeetingFuture.value;
};
const convertUtcDateTimeToLocal = (utcDate, utcTime, type) => {
    const utcDateTime = `${utcDate}T${utcTime}Z`; // Use Z to denote UTC timezone explicitly
    const momentObj = moment.utc(utcDateTime).local(); // Convert UTC to local time

    if (type === "date") {
        return momentObj.format("YYYY-MM-DD"); // Return local date
    } else if (type === "time") {
        return momentObj.format("hh:mm A"); // Return local time
    } else {
        throw new Error("Invalid type specified. Use 'date' or 'time'.");
    }
};
const iscallEnd = async () => {
    if (props.iscallEnd && !meetingInFuture.value) {
        isMeetingEnable.value = false;

        isMeetingEnd.value = false;
        console.log("Bth Conditin");
    } else if (props.iscallEnd) {
        // Call has been end
        isMeetingEnable.value = false;

        isMeetingEnd.value = false;

        console.log("callEnd");
    } else if (!meetingInFuture.value) {
        // Patient can Join Meeting
        isMeetingEnable.value = true;
        console.log("timeDiff");
    } else {
        // Call has been end
        console.log("else");
        isMeetingEnable.value = false;

        isMeetingEnd.value = true;
    }
    await nextTick();
    // isAgentCall();
};
const isDateTimeInFuture = (dateString, timeString) => {
    // Combine the date and time strings into a datetime string
    const dateTimeString = dateString + " " + timeString;

    // Convert the datetime string into a Date object
    const eventDateTime = new Date(dateTimeString);

    // Get the current date and time
    const now = new Date();

    // Compare the eventDateTime with the current date and time
    return eventDateTime > now;
};
const formatDateToISO = (dateString) => {
    const date = new Date(dateString);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");

    return `${year}-${month}-${day}`;
};
const convertTo24Hour = (time12h) => {
    const [time, period] = time12h.split(" ");
    const [hours, minutes] = time.split(":");

    let hours24;
    if (period === "AM") {
        hours24 = hours === "12" ? "00" : hours.padStart(2, "0");
    } else {
        hours24 =
            hours === "12"
                ? "12"
                : String(parseInt(hours, 10) + 12).padStart(2, "0");
    }

    return `${hours24}:${minutes}:00`;
};
const headers = [
    { title: "Order Number", key: "id" },
    { title: "Customer", key: "customer" },
    { title: "Total", key: "total" },
    { title: "Status", key: "status" },
    { title: "Actions", key: "actions" },
];

const loading = ref(false);
const search = ref("");
const filterDialog = ref(false);
const isShown = ref(false);
const startDateMenu = ref(null);
const endDateMenu = ref(null);
const showCustomRangePicker = ref(false);
const dateRange = ref([]);
const callEnd = ref();
const filters = reactive({
    startDate: null,
    endDate: null,
    dateRangeText: computed(() => {
        if (filters.startDate && filters.endDate) {
            return `${formatDateDate(filters.startDate)} - ${formatDateDate(
                filters.endDate
            )}`;
        }
        return "Select Date";
    }),
});

const statusOptions = ["Pending", "Shipped", "Delivered", "Cancelled"];

const getStatusColor = (status) => {
    switch (status) {
        case "Pending":
            return "orange";
        case "Shipped":
            return "blue";
        case "Delivered":
            return "green";
        case "Cancelled":
            return "red";
        default:
            return "gray";
    }
};

const openFilterDialog = () => {
    isShown.value = true;
};

const resetFilters = async () => {
    filters.search = "";
    filters.status = [];
    filters.startDate = null;
    filters.endDate = null;
    startDateMenu.value = null;
    endDateMenu.value = null;
    store.dispatch("updateIsLoading", true);
    await store.dispatch("orderPtaientList");
    orders.value = store.getters.getPatientOrderList;
    console.log(orders.value);
    store.dispatch("updateIsLoading", false);
};

const applyFilters = async () => {
    search.value = filters.search;
    filterDialog.value = false;
    await getFilter();
};

const filteredOrders = computed(() => {
    let filtered = store.getters.getPatientOrderList;

    if (filters.search) {
        filtered = filtered.filter((order) =>
            order.orderNumber
                .toLowerCase()
                .includes(filters.search.toLowerCase())
        );
    }

    return filtered;
});
const datepickStart = async () => {
    console.log("ppicker", startDateMenu.value);

    if (startDateMenu.value) {
        const selectedDate = new Date(startDateMenu.value);
        const dateWithoutTime = new Date(
            selectedDate.getFullYear(),
            selectedDate.getMonth(),
            selectedDate.getDate()
        );
        // Format the date as needed
        console.log("formattedDate");
        // const formattedDate = selectedDate.getFullYear() + '-' + selectedDate.getMonth() + '-' + selectedDate.getDate() //dateWithoutTime.toISOString().slice(0, 10);
        const formattedDate = formatDateDate(selectedDate);
        console.log("formattedDate", formattedDate);
        filters.startDate = formattedDate;
        showStartDatePicker.value = false;
        // await getFilter()
    }
};
const formatDateDate = (date) => {
    const messageDate = new Date(date);
    const options = {
        year: "numeric",
        month: "numeric",
        day: "numeric",
    };
    return messageDate.toLocaleDateString("en-US", options).replace(/\//g, "-");
};

const datepickendDate = async () => {
    console.log("ppicker", filters.endDate);

    if (endDateMenu.value) {
        const selectedDate = new Date(endDateMenu.value);
        const dateWithoutTime = new Date(
            selectedDate.getFullYear(),
            selectedDate.getMonth(),
            selectedDate.getDate()
        );
        // Format the date as needed
        console.log("formattedDate", dateWithoutTime);
        const formattedDate = formatDateDate(selectedDate); //dateWithoutTime.toISOString().slice(0, 10);
        console.log("formattedDate", formattedDate);
        filters.endDate = formattedDate;
        showEndDatePicker.value = false;
        //await getFilter()
    }
};
const viewOrder = (orderId) => {
    router.push({ name: "order-detail", params: { id: orderId } });
};

const formatDate = (date) => {
    const messageDate = new Date(date);
    const options = {
        year: "numeric",
        month: "numeric",
        day: "numeric",
        hour: "numeric", // Change from '2-digit' to 'numeric'
        minute: "2-digit",
        hour12: true, // Add hour12: true to get 12-hour format with AM/PM
    };
    const formattedDate = messageDate
        .toLocaleString("en-US", options)
        .replace(/\//g, "-")
        .replace(",", ""); // Remove the comma
    return formattedDate.trim();
};
const getFilter = async () => {
    console.log("filter", filters.startDate, filters.endDate);

    await store.dispatch("orderPtaientListFilter", {
        from_date: formatDateDate(filters.startDate),
        to_date: formatDateDate(filters.endDate),
    });
    orders.value = store.getters.getPatientOrderList;
    store.dispatch("updateIsLoading", false);
};
onMounted(async () => {
    // store.dispatch("updateIsLoading", true);
    // await fetchApiData();
    // await store.dispatch("orderPtaientList");
    // orders.value = store.getters.getPatientOrderList;
    // console.log(orders.value);
});

const selectToday = () => {
    const today = new Date().toISOString().split("T")[0];
    filters.startDate = today;
    filters.endDate = today;
    showCustomRangePicker.value = false;
};

const selectYesterday = () => {
    const today = new Date();
    const yesterday = new Date(today);
    yesterday.setDate(yesterday.getDate() - 1);
    const formattedYesterday = yesterday.toISOString().split("T")[0];
    filters.startDate = formattedYesterday;
    filters.endDate = formattedYesterday;
    showCustomRangePicker.value = false;
};

const selectLast7Days = () => {
    const today = new Date();
    const sevenDaysAgo = new Date(today);
    sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 6);
    filters.startDate = sevenDaysAgo.toISOString().split("T")[0];
    filters.endDate = today.toISOString().split("T")[0];
    showCustomRangePicker.value = false;
};
const minDate = computed(() => {
    const date = new Date();
    date.setFullYear(date.getFullYear() - 1);
    return date.toISOString().substr(0, 10);
});

const maxDate = computed(() => {
    const date = new Date();
    return date.toISOString().substr(0, 10);
});

const applyCustomRange = (dates) => {
    console.log(dateRange.value);
    dateRange.value.sort();
    if (dates.length === 2) {
        [filters.startDate, filters.endDate] = dates;
        showCustomRangePicker.value = false;
    }
};

const showCustomRangePickerFunction = (state) => {
    if (state) {
        dateRange.value = [];
        showCustomRangePicker.value = true;
    }
};

const formatCurrency = (amount) => {
    let formattedAmount = amount.toString();

    // Remove '.00' if present
    if (formattedAmount.includes(".00")) {
        formattedAmount = formattedAmount.replace(".00", "");
    }

    // Split into parts for integer and decimal
    let parts = formattedAmount.split(".");

    // Format integer part with commas
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");

    // Return formatted number
    return parts.join(".");
};

function changeFormat(dateFormat) {
    const dateParts = dateFormat.split("-"); // Assuming date is in yyyy-mm-dd format
    const year = parseInt(dateParts[0]);
    const month = parseInt(dateParts[1]); // No need for padding
    const day = parseInt(dateParts[2]); // No need for padding

    // Create a new Date object with the parsed values
    const date = new Date(year, month - 1, day); // Month is zero-based in JavaScript Date object

    // Format the date as mm-dd-yyyy
    const formattedDate = month + "-" + day + "-" + date.getFullYear();

    return formattedDate;
}
const formatTotalCurrency = (amount) => {
    let formattedAmount = amount.toString();

    // Remove '.00' if present
    // if (formattedAmount.includes('.00')) {
    //     formattedAmount = formattedAmount.replace('.00', '');
    // }

    // Split into parts for integer and decimal
    let parts = formattedAmount.split(".");

    // Format integer part with commas
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");

    // Return formatted number
    return parts.join(".");
};
</script>

<template>
    <VDialog
        v-model="store.getters.getIsLoading"
        width="110"
        height="150"
        color="yellow"
    >
        <VCardText class="" style="color: white !important">
            <div class="demo-space-x">
                <VProgressCircular :size="40" color="yellow" indeterminate />
            </div>
        </VCardText>
    </VDialog>

    <div v-if="treatmentPlan"></div>
    <v-container class="pt-0">
        <v-row
            v-if="upcommingAppiontmetns.length > 0"
            v-for="(upcomming, index) of upcommingAppiontmetns"
            :key="index"
        >
            <v-col>
                <v-card class="order-card mb-6 rounded-lg elevation-3">
                    <div class="order-header pa-4">
                        <v-row no-gutters align="center">
                            <v-col>
                                <div class="d-flex align-center">
                                    <v-avatar
                                        color="rgb(var(--v-theme-yellow))"
                                        size="56"
                                        class="text-h6 font-weight-bold mr-4"
                                    >
                                        #{{ upcomming.order_id }}
                                    </v-avatar>
                                    <div>
                                        <!-- <div class="text-subtitle-1 text-overline font-weight-medium">Order ID</div> -->
                                        <div
                                            class="text-subtitle-1 font-weight-medium"
                                        >
                                            {{
                                                formatDate(upcomming.created_at)
                                            }}
                                        </div>
                                    </div>
                                </div>
                            </v-col>
                            <v-col cols="auto" class="ml-auto">
                                <v-chip
                                    color="primary"
                                    label
                                    x-large
                                    class="font-weight-bold"
                                >
                                    <!-- Total: ${{ formatCurrency(props.isShippmentAmmount) }}<br> -->
                                    Total: ${{
                                        formatTotalCurrency(
                                            upcomming.items_data.total
                                        )
                                    }}
                                    <br /> </v-chip
                                ><br />
                                <!-- <v-chip color="primary" label x-large class="font-weight-bold mt-3">
                                    Status: {{ upcomming.status }} <br>

                                </v-chip> -->
                                <br />
                            </v-col>
                        </v-row>
                    </div>
                    <VAlert border="start" color="rgb(var(--v-theme-yellow))">
                        <div class="text-center">
                            <b>Time Left: </b> &nbsp;
                            {{ upcomming.timeDifference }}
                        </div>
                    </VAlert>
                    <v-card-text class="pa-4 pb-0">
                        <h3 class="text-h6 font-weight-bold mb-0">
                            Appointment Detail
                        </h3>
                        <div class="order-items-container-appiontment">
                            <v-list class="order-items-list">
                                <v-list-item class="mb-2 rounded-lg">
                                    <v-list-item-content>
                                        <v-list-item-title
                                            class="text-subtitle-1 font-weight-medium"
                                        >
                                            <div class="detail-item">
                                                <span
                                                    class="detail-label text-strong"
                                                ></span>
                                                <span class="detail-value">
                                                    <!-- {{ upcoming.appointment_date }} -->
                                                    <v-list-item-title
                                                        class="text-subtitle-1 font-weight-medium"
                                                    >
                                                        <v-icon
                                                            class="mr-2"
                                                            size="small"
                                                            color="rgb(var(--v-theme-yellow-theme-button))"
                                                            >mdi-calendar-clock</v-icon
                                                        >
                                                        <!-- {{ changeFormat(upcomming.appointment_date) }}
                                                           -->
                                                        {{
                                                            upcomming.appointment_date
                                                        }}
                                                    </v-list-item-title>
                                                </span>
                                            </div>
                                            <div class="detail-item pt-3">
                                                <span class="detail-value">
                                                    <v-icon
                                                        class="mr-2"
                                                        size="small"
                                                        color="rgb(var(--v-theme-yellow-theme-button))"
                                                        >mdi-clock</v-icon
                                                    >
                                                    {{
                                                        upcomming.appointment_time
                                                    }}
                                                </span>
                                            </div>
                                            <div class="detail-item pt-3">
                                                <span
                                                    class="detail-label text-strong"
                                                >
                                                    <v-icon
                                                        class="mr-2"
                                                        size="small"
                                                        color="rgb(var(--v-theme-yellow-theme-button))"
                                                        >mdi-world</v-icon
                                                    >
                                                    {{ upcomming.timezone }}
                                                </span>
                                            </div>
                                        </v-list-item-title>
                                    </v-list-item-content>
                                </v-list-item>
                            </v-list>
                        </div>

                        <div class="order-items-container h-100">
                            <h3 class="text-h6 font-weight-bold mb-0">
                                Order Items
                            </h3>
                            <v-list class="order-items-list">
                                <h3 class="text-h6 font-weight-bold mb-0">
                                    Order Items
                                </h3>
                                <v-list-item
                                    v-for="item in upcomming.items_data
                                        .items_list"
                                    :key="item.id"
                                    class="mb-2 rounded-lg"
                                    two-line
                                >
                                    <v-list-item-content>
                                        <v-list-item-title
                                            class="text-subtitle-1 font-weight-medium"
                                            >{{ item.title }}</v-list-item-title
                                        >
                                        <v-list-item-subtitle>
                                            <v-chip
                                                x-small
                                                class="mr-2"
                                                outlined
                                                >Qty: {{ item.quantity }}
                                            </v-chip>
                                            <v-chip x-small outlined
                                                >${{
                                                    parseFloat(
                                                        item.price
                                                    ).toLocaleString("en-US", {
                                                        minimumFractionDigits: 2,
                                                        maximumFractionDigits: 2,
                                                    })
                                                }}
                                                each</v-chip
                                            >
                                            <v-chip color="primary" x-small
                                                >$
                                                {{
                                                    parseFloat(
                                                        item.quantity *
                                                            item.price
                                                    ).toLocaleString("en-US", {
                                                        minimumFractionDigits: 2,
                                                        maximumFractionDigits: 2,
                                                    })
                                                }}</v-chip
                                            >
                                            <v-chip color="primary" x-small>
                                                {{ item.status }}
                                            </v-chip>
                                        </v-list-item-subtitle>
                                    </v-list-item-content>
                                    <v-list-item-action> </v-list-item-action>
                                </v-list-item>
                            </v-list>
                        </div>
                    </v-card-text>
                    <v-card-text>
                        <RouterLink
                            to="/queue"
                            target="_blank"
                            v-if="upcomming.isMeeting"
                        >
                            <VBtn
                                style="border-radius: 20px; color: #fff"
                                block
                                class="mt-3"
                                color="rgb(var(--v-theme-yellow-theme-button))"
                            >
                                Go to Meeting
                            </VBtn>
                        </RouterLink>
                        <span v-else>
                            <VBtn
                                block
                                style="border-radius: 20px; color: #fff"
                                class="mt-3"
                                color="rgb(var(--v-theme-yellow-theme-button))"
                                disabled
                                >Go to Meeting
                            </VBtn>
                        </span>
                    </v-card-text>
                </v-card>
            </v-col>
        </v-row>
        <v-row v-else>
            <v-col cols="12" md="12">
                <VAlert border="start" color="rgb(var(--v-theme-yellow))">
                    <div class="text-center">No data found</div>
                </VAlert>
            </v-col>
        </v-row>
    </v-container>
</template>
<style scoped>
.custom-select {
    min-height: 44px;
    /* Adjust the minimum height as needed */
    padding-top: 8px;
    /* Adjust top padding as needed */
    padding-bottom: 8px;
    /* Adjust bottom padding as needed */
}

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

.v-date-picker-month__day .v-btn {
    --v-btn-height: 23px !important;
    --v-btn-size: 0.85rem;
}

.custom-date-picker {
    font-size: 0.85em;
}

.custom-date-picker :deep(.v-date-picker-month) {
    width: 100%;
}

.custom-date-picker :deep(.v-date-picker-month__day) {
    width: 30px;
    height: 30px;
}

.custom-date-picker :deep(.v-date-picker-month) {
    min-width: 300px;
}

.custom-date-picker :deep(.v-date-picker-month__day .v-btn) {
    --v-btn-height: 20px !important;
}

.order-card {
    transition: all 0.3s;
}

.order-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px -10px rgba(0, 0, 0, 0.1),
        0 4px 20px 0px rgba(0, 0, 0, 0.1), 0 7px 8px -5px rgba(0, 0, 0, 0.1) !important;
}

.order-header {
    background-color: #f5f5f5;
}

.order-items-container {
    height: 155px;
    /* Set a fixed height */
    overflow-y: auto;
    /* Enable vertical scrolling */
}

.order-items-list {
    padding-right: 16px;
    /* Add some padding for the scrollbar */
}

.order-card .v-list-item {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px !important;
}

/* Custom scrollbar styles */
.order-items-container::-webkit-scrollbar {
    width: 8px;
}

.order-items-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.order-items-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.order-items-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.order-items-container-appiontment {
    max-height: 100px;
}

/* Mobile styles */
@media (max-width: 600px) {
    .order-header {
        flex-direction: column;
    }

    .order-header .v-avatar {
        margin-bottom: 16px;
    }

    .order-header .v-col {
        text-align: center;
    }

    .order-header .ml-auto {
        margin: 16px auto 0 auto;
    }

    .order-items-container {
        height: auto;
    }
}
</style>
