<script setup>
import store from "@/store";
import moment from "moment";
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();
const route = useRoute();
const getPrescriptionHistory = ref([]);
const doctorAppiontments = ref([]);
const selectedFilter = ref(null);
const currentMonth = ref(null);
const start_date = ref();
const end_date = ref();
const isMeetingEnable = ref(false);
const isMeetingEnd = ref(true);
const meetingInFuture = ref(true);
const dessertHeaders = ref([
    {
        title: "Product",
        align: "start",
        sortable: false,
        key: "name",
    },
    { title: "Price", key: "calories" },
    { title: "Quantity", key: "quantiy" },
    { title: "Status", key: "status" },
]);
const desserts = ref([
    {
        name: "Semaglutide Injection",
        calories: "$299.00",
        quantiy: 2,
        status: "Pending",
    },
]);
const scheduleDate = ref();
const scheduleTime = ref();
const timeZone = ref();
const order_id = ref();
const appiontmentId = ref();
const items = ref([]);
const totalcost = ref();
const previousTotalCost = ref();
const isCallClose = ref();
const status = ref();
const upcomingAppoinmentList = ref([]);
const upcommingAppiontmetns = ref([]);
onMounted(async () => {
    store.dispatch("updateIsLoading", true);
    await store.dispatch("getPatientAppointment");
    upcomingAppoinmentList.value =
        store.getters.getPatientUpcomingAppiontments.upcoming_appointments;
    console.log("upcoming", store.getters.getBookedAppointment);
    timeZone.value = store.getters.getBookedAppointment.timezone;
    order_id.value = store.getters.getBookedAppointment.order_id;
    items.value = store.getters.getBookedAppointment.items.items_list;
    totalcost.value =
        store.getters.getBookedAppointment.items.total +
        store.getters.getBookedAppointment.items.total_shipping_cost;
    appiontmentId.value = store.getters.getBookedAppointment.appiontmentId;
    isCallClose.value = store.getters.getBookedAppointment.end_time;
    status.value = store.getters.getBookedAppointment.status;
    let appointmentDate = convertUtcDateTimeToLocal(
        store.getters.getBookedAppointment.appointment_date,
        store.getters.getBookedAppointment.appointment_time,
        "date"
    );
    let appointmentTime = convertUtcDateTimeToLocal(
        store.getters.getBookedAppointment.appointment_date,
        store.getters.getBookedAppointment.appointment_time,
        "time"
    );
    scheduleDate.value = moment(appointmentDate, "YYYY-MM-DD").format(
        "MMMM DD, YYYY"
    );
    scheduleTime.value = moment(appointmentTime, "HH:mm:ss").format("hh:mm A");
    await store.dispatch("getPrescriptionHistory");
    getPrescriptionHistory.value = store.getters.getPrescriptionHistory.history;
    console.log("getPrescriptionHistory", getPrescriptionHistory.value);
    store.dispatch("updateIsLoading", false);
});

const handleDateInput = async () => {
    getHistory.value = [];
    // await store.dispatch('getHistoryFilter', {
    //     filter: selectedFilter.value,
    // })
    // getHistory.value = store.getters.getHistoryFilter.patients;
    // console.log("getHistoryFilter", getHistory.value);
    // store.dispatch('updateIsLoading', false)
};

const search = ref("");

const upComingRecords = computed(() => {
    console.log("upcommingData-----------------", upcomingAppoinmentList.value);

    let d = upcomingAppoinmentList.value.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 formattedHistory = computed(() => {
    return getPrescriptionHistory.value.map((history) => ({
        ...history,
        previousTotalCost: history.total_amount,
        appointment_date: getConvertedDate(
            convertUtcTime(
                history.appointment_time,
                history.appointment_date,
                history.timezone
            )
        ),
        appointment_time: getConvertedTime(
            convertUtcTime(
                history.appointment_time,
                history.appointment_date,
                history.timezone
            )
        ),

        // appointment_date: changeFormat(history.appointment_date),
        // appointment_time: convertUtcDateTimeToLocal(history.appointment_date, history.appointment_time, 'time'),
        start_time: changeDateFormat(history.start_time),
        end_time: changeDateFormat(history.end_time),
        duration: totalCallDuration(history.start_time, history.end_time),
    }));
});

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(".");
};
const isUpcomingMeeting = computed(() => {
    let appDate = formatDateToISO(
        store.getters.getBookedAppointment.appointment_date
    );
    let appTime = convertTo24Hour(
        store.getters.getBookedAppointment.appointment_time
    );
    // console.log("PlanCallend", props.iscallEnd, props.timeDiff, props.date, props.time, appDate, appTime, isDateTimeInFuture(props.date, props.time));
    meetingInFuture.value = isDateTimeInFuture(
        store.getters.getBookedAppointment.appointment_date,
        store.getters.getBookedAppointment.appointment_time
    );
    iscallEnd();
});
const iscallEnd = async () => {
    if (isCallClose.value && !meetingInFuture.value) {
        isMeetingEnable.value = false;

        isMeetingEnd.value = false;
        console.log("Bth Conditin");
    } else if (isCallClose.value) {
        // 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 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:ss"); // Return local time
    } else {
        throw new Error("Invalid type specified. Use 'date' or 'time'.");
    }
};

function changeDateFormat(dateFormat) {
    console.log("startTimeFormat", dateFormat);
    if (dateFormat) {
        const dateTimeParts = dateFormat.split(" ");
        const datePart = dateTimeParts[0];
        const timePart = dateTimeParts[1].slice(0, 5); // Slice to remove seconds
        const dateParts = datePart.split("-");
        const year = dateParts[0];
        const month = dateParts[1];
        const day = dateParts[2];
        return `${month}-${day}-${year} ${timePart}`;
    }
}

function changeFormat(dateFormat) {
    const dateParts = dateFormat.split("-"); // Assuming date is in yyyy-mm-dd format
    const year = parseInt(dateParts[0]);
    const month = String(dateParts[1]).padStart(2, "0"); // Pad single-digit months with leading zero
    const day = String(dateParts[2]).padStart(2, "0"); // Pad single-digit days with leading zero

    // 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;
}
function totalCallDuration(start_time, end_time) {
    console.log(start_time, end_time);
    const startMoment = moment(start_time);
    const endMoment = moment(end_time);

    // Calculate the duration
    const duration = moment.duration(endMoment.diff(startMoment));
    const hours = duration.hours();
    const thours = `${String(hours).padStart(2, "0")}`;
    const minutes = duration.minutes();
    const tminutes = `${String(minutes).padStart(2, "0")}`;
    const seconds = duration.seconds();
    const tsecond = `${String(seconds).padStart(2, "0")}`;
    let durationText;
    if (hours === 0 && minutes === 0) {
        //for second
        durationText = ` 00:00:${tsecond}`;
    } else if (hours === 0 && minutes > 0) {
        //for minutes
        durationText = `00:${tminutes}:${tsecond}`;
    } else if (hours > 0) {
        //for hours
        durationText = `${thours}:${tminutes}:${tsecond}`;
    }
    const totalDuration = durationText;
    console.log("Duration:", durationText);
    // You may need to adjust this function based on your actual data structure
    // For example, if you have separate first name and last name properties in each appointment object
    return totalDuration; // For now, just return the first name
}

const historyDetail = (history) => {
    console.log("history", history);
    // router.push("/patient/complete-appintment-detail/" + history.id);
    router.push("/order-detail/" + history.order_id);
};
const date = ref("");
const showDatePicker = ref(false);
const startDateMenu = ref(null);
const endDateMenu = ref(null);
const showStartDatePicker = ref(false);
const showEndDatePicker = ref(false);
const dateFormate = ref();
const panel = ref(0);
const filters = reactive({
    search: "",
    status: [],
    startDate: null,
    endDate: null,
});
const datepickStart = async () => {
    console.log("ppicker", startDateMenu.value);
    dateFormate.value = changeCalanderDate(startDateMenu.value);
    console.log("dateFormate", dateFormate.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;

        store.dispatch("updateIsLoading", true);
        await store.dispatch("getDateFilter", {
            appointment_date: dateFormate.value,
        });
        getPrescriptionHistory.value =
            store.getters.getPrescriptionHistory.history;
        console.log("getPrescriptionHistory", getPrescriptionHistory.value);
        store.dispatch("updateIsLoading", false);
    }
};
const formatDateDate = (date) => {
    const messageDate = new Date(date);
    const options = {
        day: "numeric",
        year: "numeric",
        month: "numeric",
    };
    return messageDate.toLocaleDateString("en-US", options).replace(/\//g, "-");
};

function changeCalanderDate(dateFormat) {
    const originalDateString = dateFormat;

    // Create a Date object from the original date string
    const originalDate = new Date(originalDateString);

    // Extract year, month, and day from the Date object
    const year = originalDate.getFullYear();
    // JavaScript months are zero-indexed, so add 1 to get the correct month
    const month = (originalDate.getMonth() + 1).toString().padStart(2, "0");
    const day = originalDate.getDate().toString().padStart(2, "0");

    // Form the desired date format YYYY-MM-DD
    const formattedDate = `${year}-${month}-${day}`;

    return formattedDate; // Output: 2024-06-03
}
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("getPrescriptionHistory");
    getPrescriptionHistory.value = store.getters.getPrescriptionHistory.history;
    console.log("getPrescriptionHistory", getPrescriptionHistory.value);
    store.dispatch("updateIsLoading", false);
};
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, "-");
    return `${formattedDate} `;
};
</script>
<template>
    <VRow>
        <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="primary"
                        indeterminate
                    />
                </div>
            </VCardText>
        </VDialog>
        <div v-if="upComingRecords"></div>
        <div v-if="isUpcomingMeeting"></div>
        <VCol cols="12" class="px-3">
            <VCardTitle class="my-1 pl-0 mb-0">
                <h4 class="mb-0">Upcoming Appointments</h4>
            </VCardTitle>
            <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="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="rgb(var(--v-theme-yellow-theme-button))"
                                        label
                                        x-large
                                        class="font-weight-bold"
                                    >
                                        <!-- Total: ${{ formatCurrency(props.isShippmentAmmount) }}<br> -->
                                        Total: ${{
                                            formatCurrency(
                                                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>

                        <v-card-text class="pa-4 pb-0">
                            <VRow>
                                <VCol cols="12" md="6">
                                    <h3 class="text-h6 font-weight-bold mb-0">
                                        <v-icon
                                            class="mr-2"
                                            color="rgb(var(--v-theme-yellow-theme-button))"
                                            >mdi-calendar-clock</v-icon
                                        >Appointment Detail
                                    </h3>

                                    <div
                                        class="order-items-container-appiontment pt-2 pb-0"
                                    >
                                        <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
                                                                    >
                                                                    {{
                                                                        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>

                                        <VCardText class="pt-0">
                                            <RouterLink
                                                v-if="upcomming.isMeeting"
                                                to="/queue"
                                                target="_blank"
                                            >
                                                <VBtn
                                                    style="border-radius: 20px"
                                                    block
                                                    class="mt-3 text-white"
                                                    color="rgb(var(--v-theme-yellow-theme-button))"
                                                >
                                                    Go to Meeting
                                                </VBtn>
                                            </RouterLink>
                                            <span v-else>
                                                <VBtn
                                                    block
                                                    style="border-radius: 20px"
                                                    class="mt-3 text-white"
                                                    color="rgb(var(--v-theme-yellow-theme-button))"
                                                    disabled
                                                >
                                                    Go to Meeting
                                                </VBtn>
                                            </span>
                                        </VCardText>
                                    </div>
                                </VCol>
                                <VCol cols="12" md="6">
                                    <div
                                        class="order-items-container h-100 pt-2"
                                    >
                                        <h3
                                            class="text-h6 font-weight-bold mb-0"
                                        >
                                            <v-icon
                                                class="mr-2"
                                                color="rgb(var(--v-theme-yellow-theme-button))"
                                                >mdi-shopping-cart</v-icon
                                            >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="yellow-theme-button"
                                                            x-small
                                                            >$
                                                            {{
                                                                parseFloat(
                                                                    item.quantity *
                                                                        item.price
                                                                ).toLocaleString(
                                                                    "en-US",
                                                                    {
                                                                        minimumFractionDigits: 2,
                                                                        maximumFractionDigits: 2,
                                                                    }
                                                                )
                                                            }}</v-chip
                                                        >
                                                        <v-chip
                                                            color="yellow-theme-button"
                                                            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>
                                </VCol>
                            </VRow>
                        </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-theme-button))"
                        variant="tonal"
                    >
                        <div class="text-center">No data found</div>
                    </VAlert>
                </v-col>
            </v-row>
        </VCol>
        <VCol cols="12" class="px-3">
            <VCardTitle class="my-1 pl-0 mb-0">
                <h4 class="mb-0">Previous Appointments</h4>
            </VCardTitle>

            <VCardText class="d-flex flex-column gap-y-4 px-0 rounded-5">
                <VCard class="rounded-5" style="border-radius: 10px">
                    <v-row class="px-4 py-4">
                        <v-col cols="12" md="4" sm="6">
                            <VMenu
                                location="bottom"
                                :close-on-content-click="false"
                                :nudge-right="40"
                                transition="scale-transition"
                                offset-y
                                min-width="auto"
                            >
                                <template #activator="{ props }">
                                    <v-text-field
                                        readonly
                                        v-model="filters.startDate"
                                        label="Search Date"
                                        v-bind="props"
                                        outlined
                                        density="compact"
                                        @focus="showStartDatePicker = true"
                                    ></v-text-field>
                                </template>
                                <v-date-picker
                                    v-model="startDateMenu"
                                    @update:modelValue="datepickStart"
                                    v-if="showStartDatePicker"
                                    class="custom-date-picker"
                                    hide-header
                                ></v-date-picker>
                            </VMenu>
                        </v-col>
                        <v-col cols="6">
                            <v-btn
                                color="primary"
                                class="text-capitalize"
                                text
                                @click="resetFilters"
                            >
                                Reset
                            </v-btn>
                        </v-col>
                    </v-row>
                </VCard>
                <v-row>
                    <v-col
                        cols="6"
                        v-if="formattedHistory.length > 0"
                        v-for="history in formattedHistory"
                        :key="history.id"
                    >
                        <VCard class="order-card mb-6 rounded-lg elevation-3">
                            <div class="order-header pa-4 pb-0">
                                <v-row no-gutters align="center">
                                    <v-col>
                                        <div class="d-flex align-center">
                                            <div>
                                                <div
                                                    class="text-overline text-left"
                                                >
                                                    Order ID:
                                                    {{ history.order_id }}
                                                </div>
                                                <div
                                                    class="text-overline text-subtitle-1 font-weight-medium"
                                                >
                                                    Date:
                                                    {{
                                                        formatDate(
                                                            history.created_at
                                                        )
                                                    }}
                                                </div>
                                            </div>
                                        </div>
                                    </v-col>
                                    <v-col cols="auto" class="ml-auto">
                                        <!-- <v-chip color="rgb(var(--v-theme-yellow))" label x-large class="font-weight-bold">
                                            Total: ${{ formatCurrency(history.previousTotalCost) }}
                                        </v-chip> -->

                                        <v-chip
                                            color="rgb(var(--v-theme-yellow-theme-button))"
                                            label
                                            x-large
                                            class="font-weight-bold mt-0"
                                        >
                                            {{ history.status }} </v-chip
                                        ><br />
                                    </v-col>
                                </v-row>
                            </div>
                            <VRow>
                                <VCol col="12">
                                    <v-card-text class="pa-4">
                                        <VCardTitle
                                            class="my-1 pl-0 mb-0 pt-0 pb-0"
                                        >
                                            <p class="font-weight-700 mb-1">
                                                <v-icon
                                                    class="mr-2"
                                                    color="rgb(var(--v-theme-yellow-theme-button))"
                                                    >mdi-calendar-clock</v-icon
                                                >Appiontment Detail
                                            </p>
                                        </VCardTitle>

                                        <div
                                            class="order-items-container-previous"
                                        >
                                            <v-list
                                                class="order-items-list pt-0"
                                            >
                                                <v-list-item
                                                    class="mb-2 mt-3 rounded-lg"
                                                    two-line
                                                >
                                                    <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"
                                                                >
                                                                    <v-icon
                                                                        class="mr-2"
                                                                        size="small"
                                                                        color="rgb(var(--v-theme-yellow-theme-button))"
                                                                        >mdi-calendar-clock</v-icon
                                                                    >{{
                                                                        history.appointment_date
                                                                    }}
                                                                </span>
                                                            </div>
                                                            <div
                                                                class="detail-item pt-3"
                                                            >
                                                                <span
                                                                    class="detail-value"
                                                                >
                                                                    <v-icon
                                                                        class=""
                                                                        size="small"
                                                                        color="rgb(var(--v-theme-yellow-theme-button))"
                                                                        >mdi-clock</v-icon
                                                                    >
                                                                    {{
                                                                        moment(
                                                                            history.appointment_time,
                                                                            "HH:mm:ss"
                                                                        ).format(
                                                                            "hh:mm A"
                                                                        )
                                                                    }}
                                                                </span>
                                                            </div>
                                                            <div
                                                                class="detail-item pt-3"
                                                            >
                                                                <span
                                                                    class="detail-label text-strong"
                                                                >
                                                                    <v-icon
                                                                        class=""
                                                                        size="small"
                                                                        color="rgb(var(--v-theme-yellow-theme-button))"
                                                                        >mdi-world</v-icon
                                                                    >
                                                                    {{
                                                                        history.timezone
                                                                    }}
                                                                </span>
                                                            </div>

                                                            <div
                                                                class="pt-3 pb-3"
                                                            >
                                                                <VBtn
                                                                    color="rgb(var(--v-theme-yellow-theme-button))"
                                                                    block
                                                                    outlined
                                                                    class="text-white"
                                                                    style="
                                                                        border-radius: 20px;
                                                                    "
                                                                    @click="
                                                                        historyDetail(
                                                                            history
                                                                        )
                                                                    "
                                                                >
                                                                    View Detail
                                                                </VBtn>
                                                            </div>
                                                        </v-list-item-title>
                                                    </v-list-item-content>
                                                    <v-list-item-action>
                                                    </v-list-item-action>
                                                </v-list-item>
                                            </v-list>
                                        </div>
                                    </v-card-text>
                                </VCol>
                            </VRow>

                            <v-divider></v-divider>
                        </VCard>
                    </v-col>

                    <v-col v-else>
                        <VCard border flat>
                            <VAlert
                                border="start"
                                color="rgb(var(--v-theme-yellow-theme-button))"
                                variant="tonal"
                            >
                                <div class="text-center">No data found</div>
                            </VAlert>
                        </VCard>
                    </v-col>
                </v-row>
            </VCardText>
        </VCol>
    </VRow>
</template>
<style lang="scss">
.v-expansion-panel {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

button.v-expansion-panel-title {
    background-color: rgb(var(--v-theme-yellow)) !important;
    color: #fff;
}

button.v-expansion-panel-title.bg-secondary {
    background-color: rgb(var(--v-theme-yellow)) !important;
    color: #fff;
}

button.v-expansion-panel-title {
    background-color: rgb(var(--v-theme-yellow)) !important;
    color: #fff;
}

.v-expansion-panel-text__wrapper {
    padding: 0 !important;
}

button.v-expansion-panel-title.v-expansion-panel-title--active {
    background-color: rgb(var(--v-theme-yellow)) !important;
    color: #fff;
}

span.v-expansion-panel-title__icon {
    color: rgb(var(--v-theme-yellow)) !important;
    display: none !important;
}

.v-expansion-panel {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.v-expansion-panel:hover {
    box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.15);
}

.v-expansion-panel-title {
    padding: 15px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.v-expansion-panel-title.pt-0 {
    padding-top: 0;
}

// .v-expansion-panel-title:hover {
//     background-color: #f9f9f9;
//     color: #222;
// }

.v-expansion-panel-title .mdi {
    font-size: 20px;
    color: #666;
    transition: transform 0.3s ease, color 0.3s ease;
}

.v-expansion-panel-title.v-expansion-panel-title--active .mdi {
    transform: rotate(180deg);
    color: #222;
}

.v-expansion-panel-text {
    padding: 10px 15px;
    font-size: 13px;
    color: #555;
    border-top: 1px solid #eee;
}

.v-expansion-panel-text .d-flex {
    margin-bottom: 24px;
}

.v-expansion-panel-text .d-flex > div {
    flex: 1;
}

.v-expansion-panel-text p {
    margin-bottom: 16px;
    font-size: 14px;
}

.v-expansion-panel-text h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #333;
}

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

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

.order-items-container-previous {
    height: 210px;
    /* 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);
}

/* 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;
}

/* 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>
